@charset "utf-8";
/* --------------------------------------------------
    element
----------------------------------------------------- */

/* *** DEFAULT *** */
:root { --header-height: 105px; --section-height: 830px; }
body { overflow-x: hidden; }
@media all and (max-width: 991px){
    :root { --header-height: 60px; }
}

/* *** MENU(GNB) *** */
#header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: rgba(0, 66, 135, 0.7); z-index: 10000; }
#header.menuhover { background-color: #fff; }
#header.menuhover::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #ddd; }
#header .outer { position: relative; margin: 0 auto; width: 100%; max-width: 1260px; }
#header .outer .lanBx .lang { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; height: 44px; }
#header .outer .lanBx .lang li { position: relative; display: flex; justify-content: center; align-items: center; padding-top: 10px; height: 100%; }
#header .outer .lanBx .lang li a { position: relative; display: inline-block; padding: 0 10px; font-size: 13px; color: #fff; height: 100%; line-height: 34px; }
#header.menuhover .outer .lanBx .lang li a { color: #000; }
#header .outer .lanBx .lang li:first-child a::after { position: absolute; content: ""; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; background-color: #fff; }
#header.menuhover .outer .lanBx .lang li:first-child a::after { background-color: #000; }
#header .outer .lanBx .lang .searchBx { padding-right: clamp(20px, 5.87vw, 74px); }
#header .outer .lanBx .lang .searchBx .search { position: relative; margin: 0; margin-left: 20px; padding: 0; width: 133px; height: 25px; background-color: #003267; }
#header.menuhover .outer .lanBx .lang .searchBx .search { background-color: #f0f1f0; }
#header .outer .lanBx .lang .searchBx .search input { margin: 0; padding-left: 10px; padding-top: 0px; font-size: 12px; color: #2474cb; width: 100px; height: 24px; border: none; background: transparent; vertical-align: top; }
#header .outer .lanBx .lang .searchBx .search input:focus { border-color: #000; }
#header .outer .lanBx .lang .searchBx .search input::placeholder { font-size: 12px; }
#header .outer .lanBx .lang .searchBx .search input[type="submit"] { width: 28px; height: 25px; background: url(../img/common/btn_top_search.png) no-repeat center; cursor: pointer; }
#header .outer .mainMenu { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; }
#header .outer .mainMenu .hamMenu { display: none; cursor: pointer; }
#header .outer .mainMenu .logo { position: relative; padding-left: 10px; width: 25%; }
#header .outer .mainMenu .logo .white { display: inline; }
#header .outer .mainMenu .logo .origin { display: none; }
#header.menuhover .outer .mainMenu .logo .white { display: none; }
#header.menuhover .outer .mainMenu .logo .origin { display: inline; }
#header .outer .mainMenu .menuBx { position: relative; display: flex; flex-flow: row nowrap; flex: 1; height: 61px; }
#header .outer .mainMenu .menuBx > li { position: relative; padding-left: 30px; width: 16.6%; height: 100%; }
#header .outer .mainMenu .menuBx > li a { display: flex; justify-content: flex-start; align-items: center; height: 100%; }
#header .outer .mainMenu .menuBx > li a span { display: block; font-size: 17px; font-family: 'PreGOV_Me'; font-weight: 500; color: #fff; text-align: center; }
#header.menuhover .outer .mainMenu .menuBx > li a span { color: #000; }

/* 2depth menu */
#header .outer .mainMenu ul li ol { position: absolute; left: 0; display: none; padding-top: 10px; width: 100%; height: 399px; background-color: #fff; z-index: 7000; }
#header.menuhover .outer .mainMenu ul li ol { display: block; }
#header .outer .mainMenu ul li ol:hover { background-color: #004087; }
#header .outer .mainMenu ul li ol .list2nd { position: relative; }
#header .outer .mainMenu ul li ol .list2nd a { position: relative; padding: 10px 5px 10px 24px; }
#header .outer .mainMenu ul li ol .list2nd a:hover { background-color: #0d67c8; }
#header .outer .mainMenu ul li ol .list2nd a em { display: block; font-size: 15px; font-family: 'PreGOV_Re'; font-weight: 400; color: #000; font-style: normal; line-height: 1.2; letter-spacing: -0.1px; }
#header .outer .mainMenu ul li ol:hover .list2nd a em { color: #fff; }

/* 2depth menu bg */
#header .headerBg { position: absolute; display: none; top: 105px; left: 0; width: 100%; height: 400px; background-color: #fff; z-index: 5000; }
#header .headerBg::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #004087; z-index: 8000; }
#header.menuhover .headerBg { display: block;  }
@media all and (max-width: 1260px){
    #header .outer { max-width: 1140px; }
    #header .outer .mainMenu .logo { width: 23%; }
    #header .outer .lanBx .lang .searchBx { padding-right: clamp(20px, 4.76vw, 60px); }
}
@media all and (max-width: 1024px){
    #header .outer .mainMenu .logo { width: 20%; }
    #header .outer .lanBx .lang .searchBx { padding-right: clamp(20px, 4.39vw, 45px); }
    #header .outer .mainMenu ul li ol .list2nd a em {font-size: 14px; }
}
@media all and (max-width: 991px){
    #header { background-color: #004087; }
    #header .outer .lanBx { display: none; }
    #header .outer .mainMenu { justify-content: center; height: var(--header-height); }
    #header .outer .mainMenu .hamMenu { position: absolute; top: 0; left: 0; display: block; }
    #header .outer .mainMenu .logo { display: flex; justify-content: center; align-items: center; width: auto; max-width: 50%; }
    #header .outer .mainMenu .logo img { width: 100%; max-width: clamp(90px, 14.13vw, 140px); }
    #header .outer .mainMenu .menuBx { display: none; }
}

/*  hamburger menu & site map */
#header .sitemap { position: fixed; left: 0; top: 60px; display: none; padding: 0 20px; width: 70%; height: 100vh; color: #fff; background-color: var(--mainClr); border-right: 4px solid #406084; }
#header .sitemap.active { display: block; }
#header .sitemap ul > li { position: relative; padding: 5px 0; border-bottom: 1px solid #fff; }
#header .sitemap ul > li a { position: relative; display: block; padding: 5px 0; font-size: 16px; color: #fff; font-family: 'PreGOV_Bo'; font-weight: 700; }
#header .sitemap ul > li a i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#header .sitemap ul .moMenu ol { display: none; }
#header .sitemap ul .moMenu.active ol { display: block; }
#header .sitemap ul li ol li { position: relative; padding: 5px 0 5px 20px; }
#header .sitemap ul li ol li a { position: relative; display: block; padding: 5px 0; font-size: 16px; color: #fff; font-family: 'PreGOV_Re'; font-weight: 400; }
#header .sitemap .langBtn { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; }
#header .sitemap .langBtn a { position: relative; display: block; padding: 10px 15px; font-size: 16px; color: #fff; font-family: 'PreGOV_Re'; font-weight: 400; }
#header .sitemap .langBtn a:first-child::after { position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 2px; height: 16px; background-color: #fff; }

/* footer */
#footer { position: relative; padding: 50px 10px 70px 10px; background-color: #E2E2E2; }
#footer .outline { position: relative; display: flex; flex-flow: row wrap; margin: 0 auto; width: 100%; max-width: 1260px; }
#footer .logoBx { width: 15%; }
#footer .address { flex: 1; }
#footer .address li { font-size: 16px; color: #444; line-height: 1.6em; }
#footer .address li:last-child { color: #a5a5a5; }
#footer .decoBx { width: 42%; max-width: 310px; transform: translateY(25px); }
#footer .decoBx .dropDown { position: relative; padding-left: 16px; margin: 0 auto 10px; width: 230px; font-size: 15px; color: #444; text-align: center; border: 1px solid #c0c1c0; }
#footer .decoBx .dropDown .dropdownContent { position:absolute; left:0; bottom:100%;width:100%; background:#fff; border:1px solid #ddd; overflow:hidden; max-height:0; opacity:0; visibility:hidden; transition: max-height .4s ease, opacity 0s ease, visibility 0s ease; z-index:100; }
#footer .decoBx .dropDown .dropdownContent a { padding: 6px 15px 6px 21px; font-size: 14px; color: #444; text-decoration:none; }
#footer .decoBx .dropDown.active .dropdownContent { max-height:500px; opacity:1; visibility:visible; }
#footer .decoBx .dropDown.active .dropdownContent a { display:block; }
#footer .decoBx .dropDown.active .dropdownContent a:last-child { border-bottom:none; }
#footer .decoBx .dropDown.active .dropdownContent a:hover { background:#f5f5f5; }
#footer .decoBx .dropDown button { position: relative;  width: 100%; height: 30px; cursor: pointer; }
#footer .decoBx .dropDown button i { display: inline-block; margin-left: 5px; }
#footer .decoBx ol { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; }
#footer .decoBx ol li a { position: relative; display: block; padding: 6px 7px; font-size: 14px; color: #444; }
#footer .decoBx ol li a::after { position: absolute; content: ""; top: 50%; right: -1px; transform: translateY(-50%); width: 1px; height: 10px; background-color: #444; }
#footer .decoBx ol li:last-child a::after { display: none; }
@media all and (max-width: 991px){
    #footer { padding-left: 20px; padding-right: 20px; padding-top: 80px; padding-bottom: 100px; }
    #footer .outline { flex-flow: column; }
    #footer .logoBx { margin-bottom: 20px; width: 100%; max-width: 100%; }
    #footer .decoBx { width: 100%; max-width: 100%; }
    #footer .decoBx .dropDown { display: none; }
    #footer .decoBx ol { justify-content: flex-start; transform: translateX(-7px); width: 100%; }
    #footer .decoBx ol li:last-child { display: none; }
    #footer .decoBx ol li:nth-child(2) a::after { display: none; }
}

/* 사이트 맵 */
#centersitemap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; width: 1153px; background-color: #fff; z-index: 3000; }
#centersitemap .outBx { position: relative; }
#centersitemap .outBx h4 { position: relative; padding: 15px 10px 18px 30px; background-color: var(--mainClr); }
#centersitemap .outBx button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; }
#centersitemap .inBx { position: relative; padding: 30px; background-color: #fff; }
#centersitemap .inBx ul { display: flex; flex-flow: row nowrap; gap: 15px; margin-bottom: 50px; }
#centersitemap .inBx ul > li { position: relative; width: calc(16.6666% - 75px / 6); }
#centersitemap .inBx ul > li > strong { display: block; margin-bottom: 10px; padding-bottom: 10px; font-size: 19px; font-family: 'PreGOV_Bo'; font-weight: 700; color: var(--mainClr); width: 100%; border-bottom: 2px solid var(--mainClr); }
#centersitemap .inBx ul li ol li { border-bottom: 1px solid #ccc; }
#centersitemap .inBx ul li ol li a { position: relative; display: block; padding: 10px; font-size: 16px; color: #272727; font-family: 'PreGOV_Re'; font-weight: 400; width: 100%; box-sizing: border-box; }
#centersitemap .inBx .lanLinkBx { position: absolute; right: 30px; bottom: 30px; }
#centersitemap .inBx .lanLinkBx a { position: relative; display: block; padding: 5px 30px; font-size: 16px; font-family: 'PreGOV_Me'; font-weight: 500; color: #fff; text-align: center; text-transform: uppercase; background-color: #656565; }
#centersitemap .inBx .lanLinkBx a:first-child { margin-bottom: 15px; }
@media all and (max-width: 1279px){
    #centersitemap { width: 95vw; }
    #centersitemap .inBx { padding: 15px; }
    #centersitemap .outBx h4 { padding: 10px 10px 10px 20px; }
    #centersitemap .outBx h4 img.logo { width: 120px; height: auto; }
    #centersitemap .inBx ul { flex-flow: row wrap; align-items: flex-start; gap: 20px 10px; margin-bottom: 10px; }
    #centersitemap .inBx ul > li { width: calc(25% - 30px / 4); }
    #centersitemap .inBx ul > li > strong { margin-bottom: 5px; padding-bottom: 5px; font-size: 17px; }
    #centersitemap .inBx ul li ol li a { padding: 5px; font-size: 14px; }
}
@media all and (max-width: 991px){
    #centersitemap { display: none !important; }
}

/* 이메일무단 수집거부 */
#email { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; width: 740px; background-color: #fff; z-index: 3000; }
#email .outBx { position: relative; }
#email .outBx h4 { position: relative; padding: 15px 10px 18px 30px; font-size: 20px; font-family: 'PreGOV_Bo'; font-weight: 700; color: #fff; background-color: var(--mainClr); }
#email .outBx button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; }
#email .outBx .inBx { position: relative; display: flex; flex-flow: row nowrap; }
#email .outBx .inBx .bx { flex: 1; padding: 10px 10px 20px 30px; }
#email .outBx .inBx .bx h5 { margin-bottom: 6px; font-size: 26px; font-family: 'PreGOV_Re'; font-weight: 400; color: #000; }
#email .outBx .inBx .bx p { font-size: 18px; color: #323232; font-family: 'PreGOV_Li'; font-weight: 300; line-height: 1.5; }
#email .outBx .inBx .bx span { position: relative; display: block; padding-left: 15px; padding-top: 10px; font-size: 15px; color: #666; font-family: 'PreGOV_Li'; font-weight: 300; }
#email .outBx .inBx .bx span em { position: absolute; left: 0; }
@media all and (max-width: 768px){
    #email { width: 90vw; }
    #email .outBx h4 { padding: 15px 10px 18px 25px; font-size: 18px; }
    #email .outBx .inBx .bx h5 { font-size: 22px; }
    #email .outBx .inBx .bx p { font-size: 16px; }
}
@media all and (max-width: 767px){
    #email .outBx .inBx figure { display: none; }
}

/* common bg */
#commonBg { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; background-color: rgba(0,0,0,.8); z-index: 1000; }

/* table */
.tableWrap { position: relative; }
.tableWrap table { border-top: 1px solid var(--mainClr); }
.tableWrap table tr th { padding: 10px 5px; font-size: 16px; color: #fff; font-family: 'PreGOV_Me'; font-weight: 500; text-align: center; background-color: var(--mainClr); border-right: 1px solid #fff; }
.tableWrap table tr th:last-child { border-right: 0px solid #fff; }
.tableWrap table tr td { padding: 10px 5px; font-size: 17px; border-bottom: 1px solid #d6d6d6; border-right: 1px solid #d6d6d6; }
.tableWrap table tr td:last-child { border-right: 0px solid #d6d6d6; }

/* tab menu */
#tabMenu { position: relative; display: flex; flex-flow: row nowrap; gap: 0; }
#tabMenu a { display: flex; justify-content: center; align-items: center; padding: 15px; font-size: 17px; font-family: 'PreGOV_Me'; font-weight: 500; text-align: center; line-height: 1.3; border: 1px solid #ddd; border-right: none; }
#tabMenu a:last-child { border-right: 1px solid #ddd; }
#tabMenu a:hover,
#tabMenu a.active { color: #fff; background-color: #4589cf; }
#tabMenuMo { position: relative; display: none; color: #fff; background-color: #575757; }
#tabMenuMo button { position: relative; display: block; padding: 5px 10px; font-size: 18px; font-family: 'PreGOV_Me'; font-weight: 500; width: 100%; box-sizing: border-box; }
#tabMenuMo button i { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; font-size: 24px; color: inherit; }
#tabMenuMo .dropdownContent { position: absolute; top: 100%; left: 0; display: none; width: 100%; background-color: #fff; border: 1px solid #ccc; border-top: none; z-index: 500; }
#tabMenuMo.active .dropdownContent { display: block; }
#tabMenuMo .dropdownContent a { position: relative; display: block; padding: 5px 10px; font-size: 18px; font-family: 'PreGOV_Me'; font-weight: 500; color: #272727; width: 100%; box-sizing: border-box; }
#tabMenuMo .dropdownContent a.active,
#tabMenuMo .dropdownContent a:hover { color: #fff; background-color: #4589cf; }
@media all and (max-width: 767px){
    #tabMenu { display: none; }
    #tabMenuMo { display: block; }
}

/* 실적 등 thumb포함 리스트 */
#thumbListWrap { margin-top: 30px; }
#thumbListWrap .listWrap { position: relative; display: flex; flex-flow: row wrap; gap: 30px 20px; }
#thumbListWrap .listWrap li { width: calc(33.3333% - 40px / 3); border: 1px solid #ccc; }
#thumbListWrap .listWrap li a { display: block; }
#thumbListWrap .listWrap li a figure { position: relative; width: 100%; aspect-ratio: 1 / 0.6; background-color: #e9e9e9; }
#thumbListWrap .listWrap li a figure img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
#thumbListWrap .listWrap li a h6 { position: relative; padding: 10px; font-size: 15px; font-family: 'PreGOV_Me'; font-weight: 500; color: #666; background-color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#thumbListWrap .pgBtn { position: relative; display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 30px; }
#thumbListWrap .pgBtn li a { display: inline-block; padding: 10px; font-size: 20px; color: #999; }
#thumbListWrap .pgBtn li a.on,
#thumbListWrap .pgBtn li a:hover { font-family: 'PreGOV_Bo'; font-weight: 700; color: #4589cf; }
#thumbListWrap .pgBtn li a i { color: #000; }
#thumbListWrap .pgBtn li a:hover i { color: #4589cf; font-family: 'PreGOV_Re'; font-weight: 400; }

/* 인증서 only */
#thumbListWrap.type02 .listWrap { gap: 20px 10px; }
#thumbListWrap.type02 .listWrap li { width: calc(25% - 30px / 4); }
#thumbListWrap.type02 .listWrap li a { position: relative; display: block; padding: 10% 15%; aspect-ratio: 1 / 1.22; background-color: #f0f0f0; }
#thumbListWrap.type02 .listWrap li a h6 { position: absolute; left: 0; bottom: 0; color: #fff; width: 100%; background-color: rgba(128, 128, 128, 0.7); z-index: 10; }
#thumbListWrap.type02 .listWrap li a figure { aspect-ratio: inherit; background-color: #f0f0f0; }
@media all and (max-width: 991px){
    #thumbListWrap .listWrap li { width: calc(50% - 20px / 2); }
}
@media all and (max-width: 767px){
    #thumbListWrap.type02 .listWrap li { width: calc(50% - 10px / 2); }
}
@media all and (max-width: 599px){
    #thumbListWrap .listWrap li { width: 100%; }
    #thumbListWrap.type02 .listWrap li { width: 100%; }
    #thumbListWrap .pgBtn { margin-top: 20px; }
}

/* list sub page(공통) */
#subcommon { position: relative; }
#subcommon .inBx { position: relative; }
#subcommon .inBx h5 { position: relative; padding: 20px; font-size: 20px; font-family: 'PreGOV_Bo'; font-weight: 700; color: #000; line-height: 1.2; background-color: #f0f0f0; border: 1px solid #ccc; }
#subcommon .inBx #conBx { padding: 20px; }
#subcommon .inBx .btmLink { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
#subcommon .inBx .btmLink li { display: flex; flex-flow: row nowrap; align-items: center; padding: 15px; border-bottom: 1px solid #ccc; }
#subcommon .inBx .btmLink li:last-child { border-bottom: none; }
#subcommon .inBx .btmLink li span { display: inline-block; font-size: 17px; font-family: 'PreGOV_Bo'; font-weight: 700; width: 130px; }
#subcommon .inBx .btmLink li span i { position: relative; display: inline-block; margin-right: 3px; }
#subcommon .inBx .btmLink li a { display: inline-block; flex: 1; font-size: 17px; color: #555; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#subcommon .inBx .btmLink li a:hover { color: var(--mainClr); }
#subcommon .inBx .listViewBtnWrap { position: relative; margin-top: 30px; text-align: right; }
#subcommon .inBx .listViewBtnWrap a { position: relative; padding: 8px 40px; font-size: 20px; color: #fff; background-color: #458ACF; border-radius: 3px; }
@media all and (max-width: 991px){
    #subcommon .inBx .btmLink li span { width: 100px; }
}
@media all and (max-width: 599px){
    #subcommon .inBx #conBx { padding: 20px 10px; }
}
@media all and (max-width: 480px){
    #subcommon .inBx .btmLink li span { width: 80px; }
}

/* num_list */
ul.num { position: relative; counter-reset: listNum 0; }
ul.num li { position: relative; padding-left: 22px; font-size: 18px; }
ul.num li::before { position: absolute; left: 0; counter-increment: listNum;  content: counter(listNum)"."; }
@media all and (max-width: 599px){
    ul.num li { font-size: 17px; }
}

/* Link button */
.btnWrap { position: relative; }
.btnWrap a { position: relative; display: inline-block; padding: 6px 15px; color: #fff; text-align: left; font-family: 'PreGOV_Me'; font-weight: 500; background-color: #656565; width: 160px; box-sizing: border-box; }
.btnWrap a i { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; }

/* 인증서 */
#certificationImg .imgWrap figure { text-align: center; }
#certificationImg .imgWrap figure img { width: 100%; max-width: 636px; }

/* 게시물 레이아웃 */
/* 이 부분은 관리자페이지에서 html / css / js를 개별 업데이트 할 소스임 */
/* 전력사업 - 대표실적 */
#postLayout01 { position: relative; font-size: 18px; }
#postLayout01 .infoBx { position: relative; }
#postLayout01 .infoBx .type01 { position: relative; }
#postLayout01 .infoBx .type01 li { position: relative; padding-left: 120px; font-size: 18px; }
#postLayout01 .infoBx .type01 > li + li { margin-top: 5px; }
#postLayout01 .infoBx .type01 li span { position: absolute; left: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 3px 6px 5px; width: 90px; border-radius: 5px; background-color: #004187; border: 1px solid blue; }
#postLayout01 .infoBx .type01 li span i { font-size: 0.9em; font-family: 'PreGOV_Me'; font-weight: 500; color: #fff; line-height: 1em; }
#postLayout01 .infoBx .type01 li > ul.num li { padding-left: 22px !important; }
#postLayout01 .imgsBx { position: relative; display: flex; flex-flow: row wrap; gap: 20px; margin-top: 30px; }
#postLayout01 .imgsBx img { width: calc(50% - 20px / 2); }
@media all and (max-width: 599px){
    #postLayout01 .infoBx .type01 li { padding-left: 0; font-size: 17px; line-height: 1.6; }
    #postLayout01 .infoBx .type01 > li + li { margin-top: 12px; }
    #postLayout01 .infoBx .type01 li span { position: relative; left: auto; margin-bottom: 3px; }
}
/* 공지사항 - 일반 게시물 01 */
/* p태그 내에서 줄바꿈은 br로 처리 */
#normal01 { position: relative; }
#normal01 p { position: relative; font-size: 20px; text-align: left; line-height: 2em; word-break: keep-all; }
@media all and (max-width: 767px){
    #normal01 p { font-size: 18px; }
}