@charset "UTF-8";

/*-------------------------------------------------------------------
	분류그룹 : 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
html,body{height:100%;}
body.action,
body.open-sitemap,
body.open-mobile {overflow:hidden;height: 100%;}
*{line-height: 1.3;}
#wrap{overflow:hidden;position:relative;min-height:100%; background: #fff;}

/* no style */
.hidden {position:absolute;left:-10000px; top:auto; height:1px; overflow:hidden;}

.con-area {display:block; max-width:1400px; width:100%; margin:0 auto;}
.con-area:after{content:"";display:block;clear:both;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    .con-area {padding: 0 20px;}
}
@media screen and (max-width: 1024px) {
    .con-area {padding: 0 15px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 메인 팝업
	속성순서 : ''
	퍼블리싱 전달 후 팝업 관련 css 누락으로 인한 custom
-------------------------------------------------------------------*/
.popupwrap {display:inline-block;position:fixed;top:209px !important;left:300px;z-index:51;background:#003863;}
.main-popup{background:#ffffff;}
.popuphead{padding: 10px; background:#002644;}
.popuphead .tit{line-height: 22px; font-weight: 700; font-size: 1rem; color: #fff;}
.popupcontent{display: flex;flex-direction: column;}
.popupcontent > img{display: block;}
.popupfoot{padding:5px 0;background:#6a6a6a;}
.popupfoot:after{display:block;content:"";clear:both;}
.popupfoot .popfleft{float:left;margin-left:20px; color: #ffffff; line-height: 25px; font-size: 1rem;}
.popupfoot .popfleft .today{}
.popupfoot .popfleft > label{padding-left: 5px;}
.popupfoot .popfright{float:right;margin-right:20px;}
.popupfoot .popfright .btn-close{display: block; height: 25px; padding: 0 10px; border-radius: 3px; background-color: #404040;}
.popupfoot .popfright .btn-close > span{ color: #fff;}

.popup_0 {top:150px; left:40px;}
.popup_1 {top:150px; left:610px;}

@media screen and (max-width: 1400px) {
    .popupwrap {left: 0px !important;}
}
@media screen and (max-width: 1024px) {
    .popupwrap {top: 137px !important;}
    .popupcontent {width: 100% !important; height: auto !important;}
}
@media screen and (max-width: 800px) {
    .popupwrap {top: 127px !important;}
}
@media screen and (max-width: 600px) {
 /*   .popupwrap {top: 97px !important;} */
    .popupwrap {top: 137px !important;}
}

/*-------------------------------------------------------------------
	분류그룹 : 공통 > 가상키보드
-------------------------------------------------------------------*/
.keyboardModal {display: block; position: absolute; top: 100%; left: 0; z-index: 15; width: 100%; padding: 45px 10px 10px; border-radius: 0 0 8px 8px; background-color: #ffffff; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);}
.keyboardModal .btn-close {position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; background-color: transparent;}
.keyboardModal .btn-close::before,
.keyboardModal .btn-close::after {content:''; position: absolute; top: calc(50% - 1.5px); left: 0; width: 100%; height: 3px; border-radius: 3px; background-color: #000000;}
.keyboardModal .btn-close::before {transform: rotate(45deg);}
.keyboardModal .btn-close::after {transform: rotate(-45deg);}
.keyboardModal .keyboardzone {display: block; position: relative; width: 100%; height: 250px; border-radius: 8px;}
.keyboardModal .keyboardzone .keyboardzoneDiv {display: block; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 3px; border: 1px solid #e9e9e9; border-radius: 3px; font-size: 25px; background-color: #d9d9d9;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable {width : 100%; height: 20%; border: 0;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td {padding: 3px; vertical-align:middle; white-space:pre; font-family: 'Pretendard','Noto Sans KR', sans-serif;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn {display: block; width: 100%; height: 100%; border: 0; border-radius: 3px; background-color: #ffffff; font-weight: 500; font-size: 14px; transition: background 0.2s, color 0.2s; cursor: pointer;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn:focus,
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn:hover {background-color: #3D55A5; color: #ffffff;}
.keyboardModal.action .keyboardzone .keyboardzoneDiv {visibility: hidden !important;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.keyboardModal {display: none; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;}
.keyboardModal.on {display: block; opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s 0s;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 425px) {
    .keyboardModal {padding: 30px 0 0;}
    .keyboardModal .btn-close {top: 5px; right: 5px; width: 20px; height: 20px;}
    .keyboardModal .keyboardzone {height: 180px; border-radius: 0 0 3px 3px;}
    .keyboardModal .keyboardzone .keyboardzoneDiv {padding: 1px;}
    .keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td {padding: 1px;}
    .keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn {font-size: 12px;}
}


/*-------------------------------------------------------------------
	분류그룹 : header 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/*header  ui/ux 추가*/
#header {
    display: block;
    position: fixed;
    z-index: 100;
    background-color: #ffffff;
    width: 100%;
    top: 0;
	transition: transform 0.3s ease-in-out;
}
#wrap .header-hidden {transform:translateY(-100%);}

#container {
    position: relative;
    min-height: 100vh;
    margin-top: 203px;
}
@media screen and (max-width: 1025px) {
#container {margin-top: 137px;}
}
@media screen and (max-width: 985px) {
#container {margin-top: 177px;}
}
@media screen and (max-width: 800px) {
#container {margin-top: 127px;}
}
@media screen and (max-width: 600px) {
#container {margin-top: 97px;}
}

/* 닫기 버튼 */
#header .btn-close {display: block; border: 0; background-color: transparent; cursor: pointer;}
#header .btn-close .icon {display: block; position: relative; width: 30px; height: 30px;}
#header .btn-close .icon::before,
#header .btn-close .icon::after {content:""; position: absolute; top: 50%; left: 50%; width: 100%; height: 3px; border-radius: 1.5px; background-color: #343434;}
#header .btn-close .icon::before {transform: translate(-50%, -50%) rotate(45deg);}
#header .btn-close .icon::after {transform: translate(-50%, -50%) rotate(-45deg);}
#wrap .header-hidden{transform: translateY(-100%);}


/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .btn-close .icon::before,
#header .btn-close .icon::after {transition: transform 0.3s;}
#header .btn-close:hover .icon::before {transform: translate(-50%, -50%) rotate(30deg);}
#header .btn-close:hover .icon::after {transform: translate(-50%, -50%) rotate(-30deg);}


/*-------------------------------------------------------------------
	분류그룹 : header > top banner
-------------------------------------------------------------------*/
#header .top-banner {display: block; border-bottom: 1px solid #e9e9e9;}
#header .top-banner .ban-wrap {display: block; max-width: 1400px; margin: 0 auto; padding: 8px 0;}
#header .top-banner .ban-wrap::after {content: ""; display: block; clear: both;}
#header .top-banner .ban-wrap .l-con {float: left;}
#header .top-banner .ban-wrap .l-con::after {content: ""; display: block; clear: both;}
#header .top-banner .ban-wrap .l-con .page {display: block; line-height: 40px; font-weight: 500; font-size: 14px;}
#header .top-banner .ban-wrap .l-con .page > img {display:inline-block; vertical-align: middle;}
#header .top-banner .ban-wrap .l-con .page > span {display:inline-block; line-height: 1; vertical-align: middle;}

#header .top-banner .ban-wrap .r-con {float: right;}
#header .top-banner .ban-wrap .r-con::after {content: ""; display: block; clear: both;}
#header .top-banner .ban-wrap .r-con .list {display: block; float: left; margin-right: 20px;}
#header .top-banner .ban-wrap .r-con .list:last-child {margin-right: 0;}
#header .top-banner .ban-wrap .r-con .list .item {display: block; line-height: 1;}
#header .top-banner .ban-wrap .r-con .list .item img {display:inline-block; height: 40px; vertical-align: middle;}
#header .top-banner .ban-wrap .r-con .list .btn-global {display: block; height: 40px; padding: 0 15px; border-radius: 40px; background-color: #3D55A5; color: #ffffff; text-align: center;}
#header .top-banner .ban-wrap .r-con .list .btn-global > span {display: block; line-height: 40px; font-weight: 500; font-size: 1rem;}
#header .top-banner .ban-wrap .r-con .list .btn-global:focus {outline-width: 3px; outline-style: solid; outline-color: #000000;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    #header .top-banner .ban-wrap {padding: 8px 20px;}
}
@media screen and (max-width: 1024px) {
    #header .top-banner .ban-wrap {padding: 8px 15px;}
    #header .top-banner .ban-wrap .r-con .list {margin-right: 10px;}
}
@media screen and (max-width: 800px) {
    #header .top-banner .ban-wrap {text-align: center;}
    #header .top-banner .ban-wrap .l-con .page {line-height: 30px; font-size: 12px;}
    #header .top-banner .ban-wrap .r-con .list.v1 {display: none;}
    #header .top-banner .ban-wrap .r-con .list .item img {height: 30px;}
    #header .top-banner .ban-wrap .r-con .list .btn-global {height: 30px; padding: 0 10px; border-radius: 30px;}
    #header .top-banner .ban-wrap .r-con .list .btn-global > span {line-height: 30px;}
}
@media screen and (max-width: 600px) {
    #header .top-banner .ban-wrap {text-align: center;}
    #header .top-banner .ban-wrap .l-con {float: none;}
    #header .top-banner .ban-wrap .l-con .page {line-height: 20px;}
    #header .top-banner .ban-wrap .r-con {display: none;}
}
@media screen and (max-width: 320px) {
    #header .top-banner .ban-wrap .l-con .page > img {display: block; margin: 0 auto 5px;}
    #header .top-banner .ban-wrap .l-con .page > span {display: block;}
}

/* 상단 확대,되돌리기,축소 버튼 */
.r-menu {float: left;margin-top:3px;}
.r-menu > li {display:inline-block;margin-left: 5px;vertical-align: middle;}
.r-menu > li:first-child{margin: 0;}
.r-menu > li > .btn-util {display: block;width:35px;height: 35px;border-radius: 50%; background-color: #0775DB;background-repeat: no-repeat;background-position: center;}
.r-menu > li > .btn-util.zoom-out {background-image: url('/images/sub/i_plus_on.svg');}
.r-menu > li > .btn-util.zoom-out:focus,
.r-menu > li > .btn-util.zoom-out:hover {background-color: #003862; background-image: url('/images/sub/i_plus_on.svg');}
.r-menu > li > .btn-util.zoom-reset {background-image: url('/images/sub/i_reset_on.svg');}
.r-menu > li > .btn-util.zoom-reset:focus,
.r-menu > li > .btn-util.zoom-reset:hover {background-color: #003862; background-image: url('/images/sub/i_reset_on.svg');}
.r-menu > li > .btn-util.zoom-In {background-image: url('/images/sub/i_minus_on.svg');}
.r-menu > li > .btn-util.zoom-In:focus,
.r-menu > li > .btn-util.zoom-In:hover {background-color: #003862; background-image: url('/images/sub/i_minus_on.svg');}
.r-menu > li > .btn-util.zoom-out:focus, .r-menu > li > .btn-util.zoom-reset:focus, .r-menu > li > .btn-util.zoom-In:focus {outline: 2px dashed #000;}

/*-------------------------------------------------------------------
	분류그룹 : header > logo
-------------------------------------------------------------------*/
#header .header-area {display: block; position: relative; z-index: 10; border-bottom: 1px solid #e9e9e9; background: #ffffff;}
#header .header-area .header-wrap {display: block; position: relative; max-width: 1400px; height: 100px; margin: 0 auto;}
#header .header-area .header-wrap::after {content:''; display: block; clear: both;}
#header .header-area .header-wrap #logo {float: left; position: relative; z-index: 1; width: 161px; margin-right: 25px; padding-top: 32.5px;}
#header .header-area .header-wrap #logo > a {display: block; height: 35px;}
#header .header-area .header-wrap #logo > a > img {display: block; max-width: none; height: 100%;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    #header .header-area .header-wrap {padding: 0 20px;}
}
@media screen and (max-width: 1200px) {
    #header .header-area .header-wrap #logo {margin-right: 15px;}
}
@media screen and (max-width: 1024px) {
    #header .header-area .header-wrap {height: 80px; padding: 0 15px;}
    #header .header-area .header-wrap #logo {padding-top: 22.5px;}
}
@media screen and (max-width: 600px) {
    #header .header-area .header-wrap {height: 60px;}
    #header .header-area .header-wrap #logo {width: auto; margin-right: 10px; padding-top: 15px;}
    #header .header-area .header-wrap #logo > a {height: 30px;}
}
@media screen and (max-width: 375px) {
    #header .header-area .header-wrap #logo {padding-top: 17.5px;}
    #header .header-area .header-wrap #logo > a {height: 25px;}
}

/*-------------------------------------------------------------------
	분류그룹 : header > gnb
-------------------------------------------------------------------*/
#header .header-area .header-wrap .gnb-wrap {display: block; float: left; width: calc(100% - 186px); padding-right: 425px;}
#header .header-area .header-wrap .gnb-wrap #gnb {display: block;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu {display: table; width: 100%;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu::after {content:''; display: block; clear: both;}
/* 1차 메뉴 */
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li {display: table-cell;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a {display: block; position: relative;text-align: center; padding: 0 30px; line-height: 100px;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a > span {display: inline-block; position:relative; padding: 10px 0; line-height: 1; font-size: 1.375rem; font-weight: 700; color:#000; vertical-align: middle;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a > span::after {content: ''; position: absolute; bottom:0; left: 0; width:0; height: 5px; border-radius: 3px; background: #4254C1; transition: width .3s;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li.focus > a > span::after {width:100%;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li.active > a > span::after {width:100%;}

/* 서브메뉴 */
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap {position: absolute; top:100%; left: 0; z-index: 90; box-shadow: 0 10px 10px 0 #98AFC540;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box {display:table; max-width: 1400px; width: 100%; border-radius:10px; background: #fff; }
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap {display:table-cell; position:relative; z-index:1; width: 1%; border-radius:10px 0 0 10px; background: linear-gradient(128.36deg, #003863 34.51%, #E4032E 175.33%); }
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap .sub-tit {width:395px; padding:100px 0 0 70px; }
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap .sub-tit .tit{display: block; margin-bottom:20px; font-weight: 700; color:#fff; font-size: 1.875rem; }
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap .sub-tit > p{font-weight: 500; color:#fff; }

#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu {display:table-cell; padding: 20px 30px; border-radius:0 10px 10px 0; border-width: 1px 1px 1px 0; border-style: solid; border-color: #B4CBE0; vertical-align: middle; }
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 {display: block;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li {display:block; padding: 0 20px; border-bottom:1px solid #B4CBE0;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li:last-child {border-bottom: none;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li::after {content: ''; display: block; clear: both;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap {float:left; width: 230px; padding: 10px 0;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a {display: block; padding: 5px 5px; font-weight: 600; font-size: 1.125rem; color:#000;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a.link {padding: 5px 25px 5px 5px; background-image: url(/images/layout/i_gnb_tit_link.svg); background-repeat: no-repeat; background-position: center right 45%; background-size: 14px;}
 
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 {display:block; overflow: hidden; padding: 10px 0;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02::after {content:''; display: block; clear: both;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li {display: block; float: left; margin-right: 10px;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li:last-child {margin-right: 0;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a {display: block; padding: 5px 10px; font-weight: 500; font-size: 1.125rem; color:#565C68;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a.link {padding-right: 25px; background-image: url(/images/layout/i_gnb_link.svg); background-repeat: no-repeat; background-position: center right; background-size: 14px;}
/*2024 업무계획 추가*/
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a.link2{color:#000;padding-right: 25px; background-image: url(/images/layout/i_gnb_tit_link.svg); background-repeat: no-repeat; background-position: center right; background-size: 14px;}
/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap {visibility: hidden; opacity: 0; transition: visibility 0s 0.1s;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li.focus .sub-wrap,
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap.on {visibility: visible; opacity: 1; transition: visibility 0s 0s;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a {transition: color 0.3s;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a:focus,
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a:hover {color: #0775DB;}

#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a.link {transition: background 0.3s;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a.link:focus,
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a.link:hover {background-image: url(/images/layout/i_gnb_tit_link_on.svg);}

#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a {transition: background 0.3s, color 0.3s;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a:focus,
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a:hover {color: #0775DB;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a.link:focus,
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a.link:hover {background-image: url(/images/layout/i_gnb_link_on.svg);}
/*2024 업무계획 추가*/
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .sub-02 > li > a.link2:hover {background-image: url(/images/layout/i_gnb_link_on.svg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    #header .header-area .header-wrap .gnb-wrap {padding-right: 340px;}
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a {padding: 0 20px;}
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a > span {font-size: 1.25rem;}

    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap .sub-tit {width: 320px; padding: 70px 0 0 50px;}
}
@media screen and (max-width: 1300px) {
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a {padding: 0 15px;}
}
@media screen and (max-width: 1200px) {
    #header .header-area .header-wrap .gnb-wrap {width: calc(100% - 176px); padding-right: 320px;}
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a {padding: 0 5px;}
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a > span {font-size: 1.125rem;}
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap .sub-tit {width: 280px;}
}
@media screen and (max-width: 1024px) {
    #header .header-area .header-wrap .gnb-wrap {display: none;}
}


/*-------------------------------------------------------------------
	분류그룹 : header > utils
-------------------------------------------------------------------*/
#header .header-area .header-wrap .utils {position: absolute; top: 0; right: 0; z-index: 100; padding-top: 27.5px;}
#header .header-area .header-wrap .utils > .list-wrap {display: block;}
#header .header-area .header-wrap .utils > .list-wrap::after {content:''; display: block; clear: both;}
#header .header-area .header-wrap .utils > .list-wrap > li {display: block; float: left; margin-right: 10px;}
#header .header-area .header-wrap .utils > .list-wrap > li:last-child {margin-right: 0;}
#header .header-area .header-wrap .utils > .list-wrap > li .btn-search {display: none; width: 35px; height: 35px; border-radius: 50%; background: url(/images/layout/i_search.svg) no-repeat center; background-size: 25px;}

#header .header-area .header-wrap .utils > .list-wrap > li .btn-menu {display: none; width: 35px; height: 35px; margin-top: 5px; background: url(/images/layout/i_menu.svg) no-repeat center; background-size: 25px;}
#header .header-area .header-wrap .utils > .list-wrap > li .btn-menu.btn-sitemap {display: block;}
#header .header-area .header-wrap .utils > .list-wrap > li .btn-menu.btn-mobile {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .header-area .header-wrap .utils > .list-wrap > li .btn-global {transition: background 0.3s;}
#header .header-area .header-wrap .utils > .list-wrap > li .btn-global:focus,
#header .header-area .header-wrap .utils > .list-wrap > li .btn-global:hover {background-color: #4C72BD;}
#header .header-area .header-wrap .utils > .list-wrap > li .btn-search.on {background-color: #0775DB; background-image: url(/images/layout/i_search_close.svg); background-size: 20px;}

#header .header-area .header-wrap .utils > .list-wrap > li .btn-menu {transition: transform 0.3s;}
#header .header-area .header-wrap .utils > .list-wrap > li .btn-menu:focus,
#header .header-area .header-wrap .utils > .list-wrap > li .btn-menu:hover {transform: scale(1.1);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    #header .header-area .header-wrap .utils {float: right; position: static; width: calc(100% - 176px); }
    #header .header-area .header-wrap .utils {padding-top: 17.5px;}
    #header .header-area .header-wrap .utils > .list-wrap > li:first-child {width: calc(100% - 45px);}
    #header .header-area .header-wrap .utils > .list-wrap > li .btn-menu.btn-sitemap {display: none;}
    #header .header-area .header-wrap .utils > .list-wrap > li .btn-menu.btn-mobile {display: block;}
}
@media screen and (max-width: 600px) {
    #header .header-area .header-wrap .utils > .list-wrap > li:first-child {width: auto;}
    #header .header-area .header-wrap .utils {width: auto; padding-top: 12.5px;}
    #header .header-area .header-wrap .utils > .list-wrap > li .btn-search {display: block;}
    #header .header-area .header-wrap .utils > .list-wrap > li .btn-menu {margin-top: 0;}
}
@media screen and (max-width: 425px) {
    #header .header-area .header-wrap .utils > .list-wrap > li.item-global {display: none;}
}


/*-------------------------------------------------------------------
	분류그룹 : header > utils > search
-------------------------------------------------------------------*/
#header .search-wrap {display: block; position: relative; z-index: 100; width: 360px;}
#header .search-wrap .search-box {display: block; overflow: hidden; width: 100%; padding: 0 10px; border: 1px solid #3D55A5; border-radius: 45px; background-color: #F7F9FB;}
#header .search-wrap .search-box::after {content:''; display: block; clear: both;}
#header .search-wrap .search-box .cell {display: block; float: left;}
#header .search-wrap .search-box .cell.tit-cell {display: block; width: 80px; text-align: center;}
#header .search-wrap .search-box .cell.tit-cell .cell-select {display: block; position: relative; width: 100%; padding: 0 15px 0 10px; border: 0; margin-right: 10px; line-height: 43px; font-weight: 500; font-size: 14px; color: #000000; background: #F7F9FB url(../images/common/i_sel.svg) no-repeat center right 3px; background-size: 9px;}
#header .search-wrap .search-box .cell.tit-cell .cell-select:focus {outline: 2px solid #000000; border: 2px solid #000000; line-height: 39px;}
#header .search-wrap .search-box .cell.txt-cell {width: calc(100% - 150px);}
#header .search-wrap .search-box .cell.txt-cell .search-txt {display: block; width: 100%; height: 43px; padding: 0 5px; border: 0; background-color: #F7F9FB; line-height: 43px; font-weight: 500; font-size: 14px; color: #000000;}
#header .search-wrap .search-box .cell.txt-cell .search-txt:focus {outline: 2px solid #000000; border: 2px solid #000000; line-height: 39px;}
#header .search-wrap .search-box .cell.txt-cell .search-txt::placeholder {color: #5C6C82; opacity: 1;}
#header .search-wrap .search-box .cell.txt-cell .search-txt:-ms-input-placeholder {color: #5C6C82;}
#header .search-wrap .search-box .cell.btn-cell {width: 35px;}
#header .search-wrap .search-box .cell.btn-cell .btn-keyboard {display: block; width: 35px; height: 43px; background-color: transparent; background-image: url(/images/common/i_keyboard_mini.svg); background-repeat: no-repeat; background-position: center; background-size: 25px;}
#header .search-wrap .search-box .cell.btn-cell .btn-keyboard:focus {position: relative; outline-color: transparent;}
#header .search-wrap .search-box .cell.btn-cell .btn-keyboard:focus::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #000000; border-radius: 10px; box-sizing: border-box;}
#header .search-wrap .search-box .cell.btn-cell .btn-submit {display: block; width: 35px; height: 43px; background-color: transparent; background-image: url(/images/layout/i_search.svg); background-repeat: no-repeat; background-position: center; background-size: 20px;}
#header .search-wrap .search-box .cell.btn-cell .btn-submit:focus {position: relative; outline-color: transparent;}
#header .search-wrap .search-box .cell.btn-cell .btn-submit:focus::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #000000; border-radius: 10px; box-sizing: border-box;}

#header .search-wrap .search-box .cell .keyboardModal {left: auto; right: 0; z-index: 100; width: 500px; border-radius: 8px;}
#header .search-wrap .search-box .cell .keyboardModal .keyboardzone {height: 220px;}

#header .search-wrap .search-box .auto-complete {display: none; position: absolute; top: 100%; left: 0; width: 100%; z-index: 99; padding: 10px 0; border: 1px solid #F4F5F9; border-radius: 8px; background-color: #ffffff; box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.15);}
#header .search-wrap .search-box .auto-complete.on {display: block;}
#header .search-wrap .search-box .auto-complete .list-wrap {display: block; overflow-x: hidden; overflow-y: auto;}
#header .search-wrap .search-box .auto-complete .list-wrap > li {display: block;}
#header .search-wrap .search-box .auto-complete .list-wrap > li:last-child {border-bottom: 0;}
#header .search-wrap .search-box .auto-complete .list-wrap > li .btn-word {display: block; position: relative; padding: 5px 15px 5px 20px; font-weight: 400; font-size: 1rem; color: #000000;}
#header .search-wrap .search-box .auto-complete .list-wrap > li .btn-word::before {content:''; position: absolute; top: 12px; left: 10px; width: 4px; height: 4px; border-radius: 10px; background-color: #0a2f52;}
#header .search-wrap .search-box .auto-complete .list-wrap > li .btn-word > span {display: inline-block; vertical-align: middle;}
#header .search-wrap .search-box .auto-complete .list-wrap > li .btn-word:focus,
#header .search-wrap .search-box .auto-complete .list-wrap > li .btn-word:hover {background-color: #F4F5F9;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .search-wrap .search-box .cell.btn-cell .btn-submit {transition: background 0.3s;}
#header .search-wrap .search-box .cell.btn-cell .btn-submit:focus,
#header .search-wrap .search-box .cell.btn-cell .btn-submit:hover {background-image: url(/images/layout/i_search_on.svg);}

#header .search-wrap .search-box .cell.btn-cell .btn-keyboard {transition: background 0.3s;}
#header .search-wrap .search-box .cell.btn-cell .btn-keyboard:focus,
#header .search-wrap .search-box .cell.btn-cell .btn-keyboard:hover,
#header .search-wrap .search-box .cell.btn-cell .btn-keyboard.on {background-image: url(/images/common/i_keyboard_mini_on.svg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    #header .search-wrap {width: 300px;}
}
@media screen and (max-width: 1200px) {
    #header .search-wrap {width: 280px;}
}
@media screen and (max-width: 1024px) {
    #header .search-wrap {width: 100%;}
    #header .search-wrap .search-box .cell.tit-cell {display: block;}
    #header .search-wrap .search-box .cell.txt-cell {width: calc(100% - 150px);}
    #header .search-wrap .search-box .cell .keyboardModal {right: calc(50% - 250px);}
}
@media screen and (max-width: 800px) {
    #header .search-wrap .search-box .cell .keyboardModal {right: calc(50% - 200px); width: 400px;}
}
@media screen and (max-width: 600px) {
    #header .search-wrap {position: absolute; top: 100%; left: 0; padding: 10px 15px; border-top: 2px solid #e9e9e9; background-color: #F7F9FB; box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);}
    #header .search-wrap .search-box {border-radius: 8px; background-color: #ffffff;}
    #header .search-wrap .search-box .cell.tit-cell {display: block;}
    #header .search-wrap .search-box .cell.txt-cell .search-txt {background-color: #ffffff;}

    #header .search-wrap .search-box .cell .keyboardModal {right: 0; width: 100%;}

    /* interaction */
    #header .search-wrap {opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;}
    #header .search-wrap.on {opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s 0s;}
}
@media screen and (max-width: 425px) {
    #header .search-wrap .search-box .cell.tit-cell {display: none;}
    #header .search-wrap .search-box .cell.txt-cell {width: calc(100% - 70px);}

    #header .search-wrap .search-box .cell .keyboardModal .keyboardzone {height: 180px;}
}



/*-------------------------------------------------------------------
	분류그룹 : header > sitemap & mobile 공통
-------------------------------------------------------------------*/
#menu-modal {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#menu-modal.active {visibility: visible; transition: visibility 0s 0s;}
#menu-modal .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}
#menu-modal.active .bg {background-color: rgba(0,0,0,0.7);}


/*-------------------------------------------------------------------
	분류그룹 : header > sitemap
-------------------------------------------------------------------*/
#sitemap {position: absolute; top:0; left:0; z-index:100; width:100%; height:100%; background-color:#002D5E;}
#sitemap .content-box {position: relative; max-width: 1400px; width:100%; height: 100%; margin:0 auto;}
#sitemap .content-box .con-head {position:relative; height:120px;}
#sitemap .content-box .con-head .logo {display: block; padding-top: 40px;}
#sitemap .content-box .con-head .logo > img {display: block; max-width: none; height: 40px;}
#sitemap .content-box .con-body {display:block; overflow-y:auto; overflow-x:hidden; position:relative; height: calc(100% - 120px);}
#sitemap .content-box .con-body .sitemap-list {margin: 0 -40px; padding: 0 4px;}
#sitemap .content-box .con-body .sitemap-list::after {content:''; display: block; clear: both;}
#sitemap .content-box .con-body .sitemap-list > li {display: block; position: relative; float: left; width:20%; margin-bottom:35px; padding: 10px 40px;}
#sitemap .content-box .con-body .sitemap-list > li::before {content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #385275;}
#sitemap .content-box .con-body .sitemap-list > li:last-child::before {display: none;}
#sitemap .content-box .con-body .sitemap-list > li > .num {display:block; margin-bottom:10px; color:#42D4D6; font-size:15px; font-weight:bold;}
#sitemap .content-box .con-body .sitemap-list > li > .tit {display: block; margin-bottom:20px; font-size:25px; color:#ffffff; font-weight:bold;}
#sitemap .content-box .con-body .sitemap-list > li > .tit:focus {outline: 3px solid #ffffff;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 {display: block;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li {margin-bottom:5px;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > a {display:block; font-size:17px; color:#07B3EA;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > a:focus {outline: 3px solid #ffffff;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > a.link {padding-right: 20px; background-image: url(/images/layout/i_sitemap_link.svg); background-repeat: no-repeat; background-position: center right; background-size: 14px;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 {}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 > li {margin-bottom: 5px;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 > li:first-child {padding-top: 10px;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 > li:last-child {margin-bottom: 30px;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 > li > a {display:block; position:relative; padding-left:8px; color:#839FBF; font-size:15px;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 > li > a:before {content:""; position:absolute; left:0; top:50%; width:4px; height:1px; background-color:#839FBF; transform: translateY(-50%);}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 > li > a.link {padding-right: 20px; background-image: url(/images/layout/i_sitemap_link2.svg); background-repeat: no-repeat; background-position: center right; background-size: 12px;}
#sitemap .content-box .con-body .sitemap-list > li > .list-sub_02 > li > .list-sub_03 > li > a:focus {outline: 3px solid #ffffff;}

#sitemap .btn-sitemap-close {position:absolute; top: 40px; right: 0;}
#sitemap .btn-sitemap-close .icon {width:40px; height:40px;}
#sitemap .btn-sitemap-close .icon::before,
#sitemap .btn-sitemap-close .icon::after {height: 4px; border-radius: 2px; background-color: #ffffff;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sitemap {opacity: 0; transition: opacity 0.4s;}
#sitemap.on {opacity: 1;}

@media screen and (max-width: 1400px) {
    #sitemap .content-box .con-head {padding: 0 20px;}
    #sitemap .content-box .con-body {padding: 0 20px;}

    #sitemap .btn-sitemap-close {right: 20px;}
}
@media screen and (max-width: 1024px) {
    #sitemap {display: none;}
}




#mobile {position: absolute; top:0; right: -80%; z-index:100; width:80%; height:100%; background-color: #ffffff;}
#mobile .btn-mobile-close {position: absolute; top: 15px; right: 20px;}
#mobile .con-head {display:block; height: 61px; padding: 0 60px 0 20px; border-bottom: 1px solid #D9E6F2; background: #ffffff;}
#mobile .con-head::after {content:''; display: block; clear: both;}
#mobile .con-head .logo {display: block; float: left; margin-top: 12.5px;}
#mobile .con-head .logo > img {display: block; max-width: none; height: 35px;}
#mobile .con-head .utils {display: block; float: right; padding-top: 15px;}
#mobile .con-head .utils::after {content:''; display: block; clear: both;}
#mobile .con-head .utils > li {display: block; float: left; margin-right: 10px;}
#mobile .con-head .utils > li:last-child {margin-right: 0;}
#mobile .con-head .utils > li .btn-global {display: block; height: 30px; padding: 0 10px; border-radius: 30px; background-color: #3D55A5; line-height: 30px; font-weight: 500; color: #ffffff;}
#mobile .con-head .utils > li .btn-global:focus {outline: 3px solid #000000; background-color: #0775DB;}

#mobile .con-body {display: block; overflow-x: hidden; overflow-y: auto; position: relative; height: calc(100% - 61px);}
#mobile .con-body::before {content:''; position: absolute; top: 0; left: 0; width: 180px; height: 100%; background-color: #3D55A5;}
#mobile .con-body .mo-menu-list {display:block; position: relative;}
#mobile .con-body .mo-menu-list > li {display: block;}
#mobile .con-body .mo-menu-list > li > a.tit {display:block; position:relative; z-index:9; width:180px; padding: 15px; font-weight: 600; font-size: 1.125rem; color:#839FBF; word-break: break-all;}
#mobile .con-body .mo-menu-list > li > .mo-right {position:absolute; top:0; left:0; width:100%; padding-left: 180px; background-color: #3D55A5;}
/* #mobile .con-body .mo-menu-list > li > .mo-right .tit {display:block;}
#mobile .con-body .mo-menu-list > li > .mo-right .tit span {display:inline-block; position:relative; padding:15px 0 20px 5px; font-size:20px; color:#262626;}
#mobile .con-body .mo-menu-list > li > .mo-right .tit span:after {content:""; position: absolute; left:5px; bottom:15px; width:110%; height:2px; background-color:#262626;} */
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 {display:block; padding: 0 0 20px; background-color: #ffffff;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li {border-bottom:1px solid #D9E6F2;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a {display:block; position:relative; padding: 15px 45px 15px 20px; color:#000; font-weight:500; font-size: 1.125rem;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a:focus {outline-color: transparent;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a:focus::after {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #000000; box-sizing: border-box;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 {display:none; padding:10px; border-top:1px solid #D9E6F2; background-color:#E6F0F9;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li {display: block;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a {display:block; position:relative; padding:5px 20px; font-weight: 500; font-size:14px; color:#5C6C82;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a.active {color: #0775DB;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a::before {content:""; position:absolute; left:10px; top:50%; width:3px; height:3px; border-radius: 3px; background-color:#5C6C82; transform: translateY(-50%);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#mobile {opacity: 0; transition: right 0.4s, opacity 0.4s;}
#mobile.on {right: 0; opacity: 1;}

/* 1차메뉴 */
#mobile .con-body .mo-menu-list > li > a.tit {transition: color 0.3s;}
#mobile .con-body .mo-menu-list > li > a.tit:focus {outline-color: transparent; background-color: #ffffff; color: #000000;}
#mobile .con-body .mo-menu-list > li > a.tit:hover,
#mobile .con-body .mo-menu-list > li.active > a.tit {color: #ffffff;}
#mobile .con-body .mo-menu-list > li.active > a.tit:focus {outline-color: transparent; background-color: #ffffff; color: #000000;}
#mobile .con-body .mo-menu-list > li > a.tit:focus::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #000000; box-sizing: border-box;}

/* 2차메뉴 */
#mobile .con-body .mo-menu-list > li > .mo-right {visibility: hidden; opacity: 0;}
#mobile.on .con-body .mo-menu-list > li.active > .mo-right {visibility: visible; opacity: 1;}

#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li {transform: translateX(50%); opacity: 0; transition: all 0.5s;}
#mobile.on .con-body .mo-menu-list > li.action > .mo-right .mo-snb1 > li {transition-delay: 0s !important;}
#mobile.on .con-body .mo-menu-list > li.active > .mo-right .mo-snb1 > li {transform: translateX(0); opacity: 1;}

/* 하위메뉴 존재 */
#menu-modal.action #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li {transition-delay: 0s !important;}

#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a {transition: background 0.3s, color 0.3s;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a:focus,
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a:hover {color: #0775DB;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li.find.open > a {background-color: #0775DB; color: #ffffff;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li.find.open > a:focus {background-color: #ffffff; color: #0775DB;}

#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li.find > a::before {content:''; position: absolute; top: calc(50% - 2px); right: 20px; width: 6px; height: 6px; border-width: 2px 0 0 2px; border-style: solid; border-color: #000000; transform: rotate(45deg);}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li.find.open > a::before {top: calc(50% - 6px); border-width: 0 2px 2px 0; border-color: #ffffff;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li.find > a:focus::before {border-color: #000000;}

/* 링크 */
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a.link::before {content:''; position: absolute; top: calc(50% - 7px); right: 15px; width: 15px; height: 15px; background: url(/images/layout/i_mobile_link.svg) no-repeat center;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a.link::after {content:''; position: absolute; top: calc(50% - 6px); right: 4px; width: 12px; height: 12px; background: url(/images/layout/i_mobile_link2.svg) no-repeat center; background-size: contain;}

#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a {transition: color 0.3s;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a:focus,
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a:hover,
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a.active {color: #0775DB;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a::before {transition: background 0.3s;}
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a:focus::before,
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a:hover::before,
#mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > .mo-snb2 > li > a.active::before {background-color: #0775DB;}
 
/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    #mobile {right: -100%; width: 100%;}
    #mobile .con-head .logo {margin-top: 15px;}
    #mobile .con-head .logo > img {height: 30px;}

    #mobile .con-body .mo-menu-list > li > a.tit {padding: 15px 10px;}

    #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a {padding: 15px 40px 15px 15px;}
    #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li.find > a::before {right: 15px;}
    #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a.link::before {right: 12.5px;}
}
@media screen and (max-width: 475px) {
    #mobile .con-head {padding: 0 55px 0 15px;}
    #mobile .btn-mobile-close {right: 15px;}

    #mobile .con-body::before {width: 140px;}
    #mobile .con-body .mo-menu-list > li > a.tit {width: 140px;}
    #mobile .con-body .mo-menu-list > li > .mo-right {padding-left: 140px;}
    #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a {padding: 15px 30px 15px 10px;}
    #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li.find > a::before {right: 10px;}
    #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a.link::before {right: 7.5px;}
}
@media screen and (max-width: 320px) {
    #mobile .con-body::before {width: 120px;}
    #mobile .con-head .logo {margin-top: 20px;}
    #mobile .con-head .logo > img {height: 20px;}
    #mobile .con-head .utils > li .btn-global {font-size: 12px;}
    #mobile .con-body .mo-menu-list > li > a.tit {width: 120px; padding: 20px 5px; font-size: 1rem;}
    #mobile .con-body .mo-menu-list > li > .mo-right {padding-left: 120px;}
    #mobile .con-body .mo-menu-list > li > .mo-right .mo-snb1 > li > a {font-size: 1rem;}
}


/*-------------------------------------------------------------------
	분류그룹 : footer
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#footer {display: block; background-color: #ffffff;}

/*-------------------------------------------------------------------
	분류그룹 : footer > 관련사이트
-------------------------------------------------------------------*/
#footer .site-box-wrap {display: block; background-color: #3A3A3A;}
#footer .site-box-wrap .list-area {display: block; max-width: 1400px; margin: 0 auto;}
#footer .site-box-wrap .list-area .site-box-list {display: block; border-left: 1px solid rgba(255,255,255,0.2);}
#footer .site-box-wrap .list-area .site-box-list:after{content: ''; display: block; clear: both;}
#footer .site-box-wrap .list-area .site-box-list > li {float: left; width:25%; border-right: 1px solid rgba(255,255,255,0.2);}
#footer .site-box-wrap .list-area .site-box-list > li .site-box {position: relative; width: 100%; height: 55px;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site {display:block; position: relative; z-index: 50; width:100%; height: 55px; padding: 0 30px 0 20px; background-color: #3A3A3A; line-height: 55px; text-align: left; color:#ffffff; cursor: pointer;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site::before {content:""; position: absolute; top: calc(50% - 3.5px); right: 15px; width: 11px; height: 7px; background: url(/images/common/i_arr.png) no-repeat center; background-size: contain;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site > span {display: block; font-weight: 600; font-size: 15px; line-height:1; word-break: break-all;}

#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list {display: none; overflow-y: auto; position: absolute; bottom: 100%; left: 0; z-index: 51; width: 100%; max-height: 300px; border: 1px solid #e9e9e9; border-bottom: 0; background-color: #ffffff;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li {display:block; border-bottom: 1px solid #ccc;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li:last-child {border-bottom: 0;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li > a {display:block; min-height: 45px; padding: 5px 15px; background-color: #fff; line-height: 30px; color: #000;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li > a > span {display: inline-block; font-weight:500; font-size: 0.9375rem; line-height: 1; vertical-align: middle; word-break: break-all;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site.on {border-color: #3D55A5; color: #fff; background-color: #3D55A5;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site.on::before {transform: scale(-1); border-top-color: #fff;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site:focus {outline: 4px solid #000000;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site:focus::after {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px dashed #ffffff; box-sizing: border-box;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li > a {transition: background 0.3s, color 0.3s;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li > a:focus,
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li > a:hover {background-color: #F7F9FB; color: #0775DB;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li > a:focus {position: relative; outline: transparent;}
#footer .site-box-wrap .list-area .site-box-list > li .site-box .site-list > li > a:focus::after {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #000000; box-sizing: border-box;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    #footer .site-box-wrap .list-area .site-box-list > li {width: 50%; border-bottom: 1px solid rgba(255,255,255,0.2);}
    #footer .site-box-wrap .list-area .site-box-list > li .site-box {height: 45px;}
    #footer .site-box-wrap .list-area .site-box-list > li .site-box .btn-site {height: 45px; line-height: 45px;}
}
@media screen and (max-width: 425px) {
    #footer .site-box-wrap .list-area .site-box-list > li {float: none; width: 100%; border-right: 0;}
}


/*-------------------------------------------------------------------
	분류그룹 : footer > 사이트 정보
-------------------------------------------------------------------*/
#footer .footer-wrap {display: block; max-width: 1400px; margin: 0 auto; padding: 30px 0;}
#footer .footer-wrap::after {content:''; display: block; clear: both;}
#footer .footer-wrap .footer-logo {display: block; float: left; margin-top: 1rem; margin-right: 45px;}
#footer .footer-wrap .footer-logo > img {display: block; height: 35px;}

#footer .footer-wrap .footer-con {display: block; overflow: hidden; padding: 4px 2px;}
#footer .footer-wrap .footer-con .menu-wrap {display: block; margin-bottom: 20px;}
#footer .footer-wrap .footer-con .menu-wrap .footer-menu {display: block; margin: 0 -10px;}
#footer .footer-wrap .footer-con .menu-wrap .footer-menu::after {content:''; display: block; clear: both;}
#footer .footer-wrap .footer-con .menu-wrap .footer-menu > li {display: block; float: left; padding: 0 10px;}
#footer .footer-wrap .footer-con .menu-wrap .footer-menu > li .link {display: block; line-height: 1; font-weight: 600; font-size: 1rem; color: #000000;}
#footer .footer-wrap .footer-con .menu-wrap .footer-menu > li .link.privacy {color: #001e82; text-decoration: underline;}

#footer .footer-wrap .footer-con .footer-info {display: block;}
#footer .footer-wrap .footer-con .footer-info::after {content:''; display: block; clear: both;}
#footer .footer-wrap .footer-con .footer-info .l-box {display: block; float: left; max-width: 800px;}
#footer .footer-wrap .footer-con .footer-info .l-box .txt-box {display: block;}
#footer .footer-wrap .footer-con .footer-info .l-box .txt-box .txt {display: block; font-weight: 500; font-size: 0.9375rem; color: #747A82;}
#footer .footer-wrap .footer-con .footer-info .l-box .txt-box .txt.copyright {margin-top: 10px;}

#footer .footer-wrap .footer-con .footer-info .r-box {display: block; float: right;}
#footer .footer-wrap .footer-con .footer-info .r-box .banner-list {display: block; margin: 0 -15px;}
#footer .footer-wrap .footer-con .footer-info .r-box .banner-list::after {content:''; display: block; clear: both;}
#footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li {display: block; float: left; padding: 0 15px;}
#footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li.mobile {display: none;}
#footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li .item {display: block;}
#footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li .item > img {display: block; max-width: none; width: 80px;}

/* footer sns */
#footer .footer-wrap .footer-con .footer_box {display: flex; justify-content: space-between;align-items: center;}
.sns_icon ul li {float: left; padding: 0 5px;}
.sns_facebook {background-image: url(/images/common/face.png); width: 30px; height: 30px;display: inline-block;}
.sns_blog {background-image: url(/images/common/blog.png); width: 30px; height: 30px;display: inline-block;}
.sns_instagram {background-image: url(/images/common/insta.png); width: 30px; height: 30px;display: inline-block;}
.sns_youtube {background-image: url(/images/common/youtube.png); width: 30px; height: 30px;display: inline-block;}
.sns_twitter {background-image: url(/images/common/twitter.png); width: 30px; height: 30px;display: inline-block;}
@media screen and (max-width: 960px) {
    #footer .footer-wrap .footer-con .footer_box {flex-direction: column;align-items:flex-start;}
    .sns_icon {margin-top: 15px;}
    .sns_icon ul li:first-child {padding: 0 5px 0 0;}
}


/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px){
    #footer .footer-wrap {padding: 30px 20px;}
}
@media screen and (max-width: 1200px){
    #footer .footer-wrap .footer-con .footer-info .l-box {max-width: 500px;}
}
@media screen and (max-width: 1024px){
    #footer .footer-wrap {padding: 30px 15px;}
    #footer .footer-wrap .footer-con .footer-info .l-box {float: none; max-width: none; margin-bottom: 20px;}
    #footer .footer-wrap .footer-con .footer-info .r-box {float: none;}
}

@media screen and (max-width: 960px){
    #footer .footer-wrap .footer-con .footer_box { flex-direction: column;align-items:flex-start;}
    .sns_icon {margin-top: 15px;}
    .sns_icon ul li:first-child {padding: 0 5px 0 0;}
}

@media screen and (max-width: 800px){
    #footer .footer-wrap .footer-logo {display: none;}

    #footer .footer-wrap .footer-con .menu-wrap .footer-menu {margin: 0 -5px;}
    #footer .footer-wrap .footer-con .menu-wrap .footer-menu > li {padding: 0 5px;}

    #footer .footer-wrap .footer-con .footer-info .r-box .banner-list {margin: 0 -10px;}
    #footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li {padding: 0 10px;}
    #footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li .item > img {height: 30px;}
    #footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li.mobile {display: block;}
}

@media screen and (max-width: 600px){
    #footer .footer-wrap {padding: 20px 15px;}
    #footer .footer-wrap .footer-con .menu-wrap {margin-bottom: 10px;}
}


@media screen and (max-width: 425px){
    #footer .footer-wrap .footer-con .menu-wrap .footer-menu > li {width: 50%; text-align: center;}
    #footer .footer-wrap .footer-con .menu-wrap .footer-menu > li .link {padding: 5px 0;}

    #footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li .item > img {height: 25px;}
}
@media screen and (max-width: 320px){
    #footer .footer-wrap .footer-con .footer-info .r-box .banner-list > li .item > img {height: 20px;}
}


/*-------------------------------------------------------------------
	분류그룹 : footer > 탑버튼
-------------------------------------------------------------------*/
#topBtn {display: block; position:fixed; bottom:5vh; right:5vw; z-index:99; border-radius: 10px; transform: translateY(calc(5vh + 60px)); opacity: 0; transition: transform .3s ease-in-out, opacity .3s ease-in;}
#topBtn::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background-color:rgba(152, 205, 255, 0.5);}
#topBtn::after {content:""; display:block; position: relative; width: 50px; height: 50px; border-radius: 10px; background:#5072E6; background-image: url(/images/layout/i_btn_top_arr.svg); background-size: 15px; background-position: center; background-repeat: no-repeat;}
#topBtn.action {transform: translateY(0);opacity: 1;}


/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#topBtn:focus {outline: 3px solid #000000;}
#topBtn::before {animation: topBtn 1s; animation-direction: alternate; animation-iteration-count: infinite;}
@keyframes topBtn{
    0% {opacity: 0; transform: scale(1);}
    100% {opacity: 1; transform: scale(1.3);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    #topBtn {right: 15px;}
}
@media screen and (max-width: 425px) {
    #topBtn {bottom: 15px;}
    #topBtn::after {width: 40px; height: 40px;}
}

/*tab css*/
.tab{float:left; width:auto; height:auto;}
.tabnav{font-size:0; width:auto; border:1px solid #ddd;}
.tabnav li{display: inline-block; height:40px; text-align:center; border-right:1px solid #ddd; width:33.3%}
.tabnav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.tabnav li a.active:before{background:#c93387;}
.tabnav li a.active{border-bottom:1px solid #fff;}
.tabnav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 20px; line-height:40px; text-decoration:none; font-size:13px;}
.tabnav li a:hover,
.tabnav li a.active{background:#fff; color:#c93387; }
.tabcontent{height:auto; border:1px solid #ddd; border-top:none;}

.linkBtn img {position: relative;}
.tabLink {position: absolute;height: 30px;width: 206px;text-indent: -9999px;}
.moreLink {position: absolute;height: 32px;width: 131px;text-indent: -9999px;}
.linkBtn a:nth-of-type(1) {bottom:245px;left:47px;}
.linkBtn a:nth-of-type(2) {bottom:202px;left:47px;}
.linkBtn a:nth-of-type(3) {bottom:162px;left:47px;}
.linkBtn a:nth-of-type(4) {bottom:121px;left:47px;}
.linkBtn a:nth-of-type(5) {bottom:65px;left:136px;}

/* 퀵메뉴*/
.right_side_menu {
display: block;
position: fixed;
top: 288px;
right:1.6%;
z-index: 99;
border-radius: 12px;
padding: 10px;
animation: backColor 3s ease-in-out infinite;
}
.right_side_menu .close_btn2 {display: block; height: 25px; padding: 0 10px; border-radius: 3px; background-color: #fff; margin-left: 35%;}
.right_side_menu .close_btn2 > span{ color: #404040;}

@keyframes backColor {
0% {background-color: rgba(51, 51, 51, 0.2);}
50%{background-color: rgba(51, 51, 51, 0.6);}
100% {background-color: rgba(51, 51, 51, 0.2);}
}

.right_side_menu p {color: #fff;margin-bottom: 10px;text-shadow: 1px 1px 2px #333;}
.right_side_menu .rSide_01 {background-image: url(/images/mid_qik.png); background-size: contain; background-position: center; background-repeat: no-repeat; height: 60px; display: block; width: 160px; border-radius: 10px;margin-bottom: 10px;}
.right_side_menu .rSide_02 {background-image: url(/images/oceanpol.png); background-size: contain; background-position: center; background-repeat: no-repeat; height: 60px; display: block; width: 160px; border-radius: 10px;margin-bottom: 10px;}
.right_side_menu .rSide_03 {background-image: url(/images/mid_rdo.png); background-size: contain; background-position: center; background-repeat: no-repeat; height: 60px; display: block; width: 160px; border-radius: 10px;margin-bottom: 10px;}
.right_side_menu .rSide_04 {background-image: url(/images/faq01.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; height: 60px; display: block; width: 160px; border-radius: 10px;margin-bottom: 10px;}
.right_side_menu .rSide_05 {background-image: url(/images/qna01.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; height: 60px; display: block; width: 160px; border-radius: 10px;margin-bottom: 10px;}
.right_side_menu .rSide_06 {background-image: url(/images/230626-more.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; height: 60px; display: block; width: 160px; border-radius: 10px;}
/* .right_side_menu a:last-child {background-image: url(/images/qna01.png); background-size: contain; background-position: center; background-repeat: no-repeat; height: 60px; display: block; width: 160px; border-radius: 10px;} */
.top_qna_banner {display: inline-block;background-image: url(/images/radioactivity_info03.jpg);background-size: contain; background-position: center; background-repeat: no-repeat; height: 40px;  width: 107px; border-radius: 10px;margin-left: 15px;float: left; }
.top_qna_banner_m {display: none;}

.blind {position: absolute; width:1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }

@media screen and (max-width: 1200px) {
.right_side_menu {position: fixed; top:20.7%;}
}
@media screen and (max-width: 1024px) {
.right_side_menu {position: fixed; top:18.7%;}
}
@media screen and (max-width: 800px) {
.right_side_menu {right: 5px;top:14%}
}
@media screen and (max-width: 600px) {
.right_side_menu {right: 5px;top:12%}
.top_qna_banner {display: none;}
.top_qna_banner_m {display: inline-block;background-image: url(/images/radioactivity_info03.png);background-size: contain; background-position: center; background-repeat: no-repeat; height: 40px;  width: 107px; border-radius: 10px;margin-left: 5px;margin-top: 10px;float: left;}
}
@media screen and (max-width: 425px) {
.right_side_menu {padding: 7px;}
.right_side_menu a:nth-of-type(1) {height: 50px;width: 133px;}
.right_side_menu a:nth-of-type(2) {height: 50px;width: 133px;}
.right_side_menu a:nth-of-type(3) {height: 50px;width: 133px;}
.right_side_menu a:nth-of-type(4) {height: 50px;width: 133px;}
.right_side_menu a:nth-of-type(5) {height: 50px;width: 133px;}
.right_side_menu a:nth-of-type(6) {height: 50px;width: 133px;}
.right_side_menu a:last-child {height: 50px;width: 133px;}
}

.slogan_img {float: left;}

.table_w_01 tr th:nth-child(1) {width:13%;}
.table_w_01 tr th:nth-child(2) {width:20%;}
.table_w_01 tr th:nth-child(3) {width:20%;}
.table_w_01 tr th:nth-child(4) {width:20%;}
.table_w_01 tr th:nth-child(5) {width:7%;}

.table_w_03 tr th:nth-child(1) {width:40%;}
.table_w_03 tr th:nth-child(2) {width:30%;}
.table_w_03 tr th:nth-child(3) {width:15%;}
.table_w_03 tr th:nth-child(4) {width:15%;}

.table tr td {text-align: center; vertical-align: middle;}
.table tr th {text-align: center;vertical-align: middle;}

.table_w_02 tr th {width:25%;}

.table_w_04 tr th:nth-child(1) {width: 20%;}
.table_w_04 tr th:nth-child(2) {width: 23%;}
.table_w_04 tr th:nth-child(3) {width: 20%;}

.table_w_05 tr th:nth-child(1) {width: 30%;}
.table_w_05 tr th:nth-child(2) {width: 30%;}
.table_w_05 tr th:nth-child(3) {width: 30%;}
.table_w_05 tr th:nth-child(4) {width: 10%;}

.table_w_06 tr th {width: 20%;}

.table_w_07 tr:nth-child(1) th:nth-child(1) {width: 15%;}
.table_w_07 tr:nth-child(1) th:nth-child(2) {width: 13%;}
.table_w_07 tr:nth-child(1) th:nth-child(3) {width: 72%;}
.table_w_07 tr:nth-child(2) th:nth-child(1) {width: 30%;}
.table_w_07 tr:nth-child(2) th:nth-child(2) {width: 20%;}
.table_w_07 tr:nth-child(2) th:nth-child(3) {width: 30%;}
.table_w_07 tr:nth-child(2) th:nth-child(4) {width: 20%;}

.table_w_08 tr th:nth-child(1) {width: 20%;}
.table_w_08 tr th:nth-child(2) {width: 60%;}
.table_w_08 tr th:nth-child(3) {width: 20%;}

.table_w_09 tr th:nth-child(1) {width: 20%;}
.table_w_09 tr th:nth-child(2) {width: 30%;}
.table_w_09 tr th:nth-child(3) {width: 25%;}
.table_w_09 tr th:nth-child(4) {width: 25%;}

.li_bottom li:nth-child(2n) {margin-bottom: 20px;}

a.btn_bottom {margin-bottom: 20px;}


/* 방사능 */

.bottom_contents {order: 2;}
.right-cont, .left-cont {width: 100% !important;overflow: hidden;position: relative;height: 100%;box-shadow: 0px 0px 20px rgb(0 0 0 / 10%); background: #fff;}
.map_right {height: 100%; box-shadow: none;overflow: initial;background-color: transparent;}
.tab_map_box { display: block; position: relative; padding-bottom: 807px;}
.tab_map_box ul.tabs { display: flex; width: 100%; table-layout: fixed; border-bottom: 1px solid #eff2f3;}
.tab_map_box ul.tabs li { background: none; color: #222; display: block;}
.btn-map-tab { background-color: #eee;  border-radius: 20px 20px 0px 0px;  border: 0px;  padding: 10px 14px;  font-size: 13px;  position: relative;}
.btn-map-tab.current { background-color: #0775DB; color: #fff;}
.btn-map-tab.current::before { content: "•"; position: absolute; top: 0px; right: 11px;}
.btn-map-tab span { font-weight: 700; font-family: 'Pretendard', sans-serif;}
.tab-content.current { display: block;}
.tab-content {display: none; /*border-radius: 0px 0px 20px 20px; */position: absolute; bottom: 0; left: 0; width: 100%; height: 807px; box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);background: #cfe2f8;}
.contents_wrap { height: 100%;  overflow: hidden;}
.right-cont .contents_wrap .map { width: 100%; height: 100%; position: relative;}
.right-cont .contents_wrap .map .box {text-align: left;display: block; font-size: 12px; padding: 7px; line-height: 14px; background: rgba(255,255,255,.7); width: 100%; position: absolute;  top: 0;  left: 0;  border-radius: 0;  z-index: 999;  cursor: default;}
.right-cont .contents_wrap .map .text {text-align: left; top: 68px; left: 10px; position: absolute; font-size: 14px; color: #bf0000; font-weight: 600; z-index: 999;}
.detail-btn:hover { color: #fff; border: 1px solid #1e3c72; background: #1e3c72;}
.right-cont .detail-btn {position: absolute; top: 15px; padding: 0 26px 0 11px; background-image: url(/images/main/link_icon_w.png); background-repeat: no-repeat; background-position: 83% center; background-size: 13px;}
.detail-btn { display: inline-block;height: 32px; line-height: 30px; border-radius: 32px; padding: 0px 15px; border: 1px solid #0775DB; background: #0775DB; color: #fff !important; font-weight: 600; box-shadow: 0px 0px 7px rgb(0 0 0 / 7%); font-size: 14px;}
.maparea { height: 100%; cursor: default;}
.right-cont .contents_wrap .map { width: 100%; height: 100%; position: relative;}
.map .cir { background: #0a92d5; display: inline-block; vertical-align: middle; margin-right: 5px; width: 8px; height: 8px; border-radius: 8px;}
.rdoactvtyInfo { background: #DFECFA url(/images/main/mapBg.jpg) no-repeat center top; position: relative; height: 100%; overflow: hidden;padding-bottom: 126px;}
.rdoactvtyInfo .mapArea { position: relative; padding: 0; max-width: 440px; margin: 90px auto 0 auto;}
.rdoactvtyInfo .mapArea > img { max-width: 485px; width: 100%;}
.rdoactvtyInfo .ecolMap .point p { position: absolute; padding: 1px 6px; border-radius: 14px; font-size: 13px; font-weight: 600;  text-align: center;  transform: translate(-50%, 0);}
.rdoactvtyInfo .ecolMap .point .spot01 { left: 15%; top: 25.5%;}
.rdoactvtyInfo .ecolMap .point .spot02 { left: 15%; top: 50%;}
.rdoactvtyInfo .ecolMap .point .spot03 { left: 11%; top: 71%;}
.rdoactvtyInfo .ecolMap .point .spot04 { left: 32%; top: 71%;}
.rdoactvtyInfo .ecolMap .point .spot05 { left: 56%; top: 72%;}
.rdoactvtyInfo .ecolMap .point .spot06 { left: 80.5%; top: 61%;}
.rdoactvtyInfo .ecolMap .point .spot07 { left: 87%; top: 38%;}
.rdoactvtyInfo .ecolMap .point .spot08 { left: 79%; top: 9%;}
.rdoactvtyInfo .ecolMap .point .spot09 { left: 23%; top: 85%;}
.rdoactvtyInfo .ecolMap .point p::before { content: '안전'; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: rgb(43 182 135); border-radius: 100px; transition: 0.3s; margin: 0 auto 2px; color: #fff;}
.rdoactvtyInfo .beachMap .point p::before { content: '안전'; display: inline-block;  width: 38px; margin: 0 3px; background: rgb(43 182 135); border-radius: 100px; transition: 0.3s; color: #fff;}
.rdoactvtyInfo .beachMap .point p.rank1::before{content:'안전'; background: rgb(43 182 135); box-shadow: 0 0 0px 3px rgba(43, 182, 135, 0.3);color:#333;}
.rdoactvtyInfo .beachMap .point p.rank2::before{content:'관심'; background: rgb(255 158 0);box-shadow: 0 0 0px 3px rgba(255, 158, 0, 0.3);color:#333;}
.rdoactvtyInfo .beachMap .point p.rank3::before{content:'주의'; background: rgb(191 0 0);box-shadow: 0 0 0px 3px rgba(191, 0, 0, 0.3);}
.rdoactvtyInfo .ecolMap .point p.rank1::before{content:'안전'; background: rgb(43 182 135); box-shadow: 0 0 0px 3px rgba(43, 182, 135, 0.3);color:#333;}
.rdoactvtyInfo .ecolMap .point p.rank2::before{content:'관심'; background: rgb(255 158 0);box-shadow: 0 0 0px 3px rgba(255, 158, 0, 0.3);color:#333;}
.rdoactvtyInfo .ecolMap .point p.rank3::before{content:'주의'; background: rgb(191 0 0);box-shadow: 0 0 0px 3px rgba(191, 0, 0, 0.3);}
.rdoactvtyInfo .labelArea { position: absolute; bottom: 0; left: 0; right: 0; margin: 20px;}
.rdoactvtyInfo .labelBtn { display: flex; justify-content: flex-end;}
.rdoactvtyInfo .label { margin: 0; display: flex; justify-content: space-around; padding: 13px; border-radius: 5px; background: rgb(255 255 255 / 61%);}
.rdoactvtyInfo .labelBtn button {font-size: 15px; margin-bottom: 10px; padding: 10px; width: 90px; background: #fff; border: 1px solid #0775DB; font-weight: 600; color: #0775DB; border-radius: 3px 0 0 3px;}
.rdoactvtyInfo .labelBtn button.current { background: #0775DB; border-color: #0775DB; color: #fff; cursor: pointer;}
.rdoactvtyInfo .labelBtn button + button { margin-left: -1px; border-radius: 0 3px 3px 0; cursor: pointer;}
.rdoactvtyInfo .label li { padding: 3px 0 3px 44px; position: relative; font-size: 12px; line-height: 1.2; list-style: none;}
.rdoactvtyInfo .label li span { position: absolute; left: 0; color: #fff; padding: 1px 8px 1px; border-radius: 17px; font-size: 12px; font-weight: 600;}
.rdoactvtyInfo .label li span.rank1 {background: #4FD8A9;color:#333;}
.rdoactvtyInfo .label li span.rank2 {background: #ff9e00;color:#333;}
.rdoactvtyInfo .label li span.rank3 {background: #BF0000;}
.rdoactvtyInfo .beachMap .point p.lf { flex-flow: row-reverse;}
.rdoactvtyInfo .beachMap .point p.bt { flex-flow: column; align-items: center;}
.rdoactvtyInfo .beachMap .point p { position: absolute; display: flex; padding: 1px 6px 2px; border-radius: 14px; font-size: 13px; font-weight: 600; text-align: center; transform: translate(-50%, 0);}
.rdoactvtyInfo .beachMap .point .spot01 { left: 21%; top: 23%;}
.rdoactvtyInfo .beachMap .point .spot02 { left: 23%; top: 27%;}
.rdoactvtyInfo .beachMap .point .spot03 { left: 15%; top: 33.5%;}
.rdoactvtyInfo .beachMap .point .spot04 { left: 21%; top: 43%;}
.rdoactvtyInfo .beachMap .point .spot05 { left: 20%; top: 51%;}
.rdoactvtyInfo .beachMap .point .spot06 { left: 18%; top: 55.5%;}
.rdoactvtyInfo .beachMap .point .spot07 { left: 29%; top: 80%;}
.rdoactvtyInfo .beachMap .point .spot08 { left: 34%; top: 73%;}
.rdoactvtyInfo .beachMap .point .spot09 { left: 53%; top: 71.5%;}
.rdoactvtyInfo .beachMap .point .spot10 { left: 72%; top: 70.5%;}
.rdoactvtyInfo .beachMap .point .spot11 { right: 5%; top: 66%;}
.rdoactvtyInfo .beachMap .point .spot12 { right: 2%; top: 62.5%;}
.rdoactvtyInfo .beachMap .point .spot13 { right: 0%; top: 59%;}
.rdoactvtyInfo .beachMap .point .spot14 { right: -2%; top: 55%;}
.rdoactvtyInfo .beachMap .point .spot15 {right: -2%; top: 48%;}
.rdoactvtyInfo .beachMap .point .spot16 { right: 1%; top: 44%;}
.rdoactvtyInfo .beachMap .point .spot17 { right: 12%; top: 14%;}
.rdoactvtyInfo .beachMap .point .spot18 { right: 19%; top: 7%;}
.rdoactvtyInfo .beachMap .point .spot19 { left: 25%; top: 84%;}
.rdoactvtyInfo .beachMap .point .spot20 { left: 21.5%; top: 90%;}
.left-cont {max-height: 659px;overflow-y: auto;}
.left-cont h2, .right-cont h2 { font-size: 16px; font-weight: 700; padding: 10px 20px; height: 44px; position: relative; border-bottom: 1px solid #eff2f3;}
.left-cont h2 span {font-size: 13px;}
.left-cont .detail-btn { position: absolute; right: 20px; top: 10px; padding: 0 26px 0 11px;  background-image: url(/images/main/link_icon_w.png); background-repeat: no-repeat; background-position: 83% center; background-size: 13px;}
.result {  height: 150px; position: relative;}
.result h3 { margin-top: 10px; margin-bottom: -10px; position: relative;padding-left: 37px; font-size: 16px; font-weight: 700;}
.left-cont h3::after { content: ""; width: 8px; height: 8px;background: #fff; border-radius: 8px; border: 2px solid #0080f3; position: absolute; left: 25px; top: 50%; transform: translateY(-50%);}
.result .list {height: calc(100% - 20px);}
.result .today, .result .accrue { padding: 5px 20px; height: 50%;}
.result h4 { float: left; font-size: 14px; font-weight: 500; padding-left: 38px; position: relative; width: 160px; margin-top: 5px;}
.result h4 span { display: block; font-size: 13px; line-height: 13px; color: #888;}
.result .today h4::after {content: ""; position: absolute; left: 0; top: 5px; width: 26px; height: 33px; background-image: url(/images/main/count_icon01.png);}
.result .accrue h4::after {content: ""; position: absolute; left: 0; top: 5px; width: 30px; height: 28px; background-image: url(/images/main/count_icon02.png);}
.result ul { float: left; width: calc(100% - 165px);}
.result li {font-size: 18px; font-weight: 700; text-align: center; float: left; width: 33.3%;}
.result li span { display: block; font-size: 12px; font-weight: 400; color: #000;}
.result li.fit {color: #0080f3 !important;}
.result li.unfit { color: #bfc7cd !important;}
.result .accrue { background: #f6fafd;}
.safety { margin-top: 0; padding-top: 5px; position: relative;}
.ntc-text { display: block; color: #888; text-align: right; font-weight: 300; font-size: 13px; /* margin-bottom: 10px; */ position: absolute; right: 25px; top: 15px;}
.safety .ntc-text { display: inline-block; position: absolute; top: 5px;}
.safety h3 {position: relative; padding-left: 37px; font-size: 16px; font-weight: 700; margin-bottom: 5px;}
.contarea { padding: 0 25px 20px 25px;}
.cont-table { width: 100%;}
.cont-table table {font-size: 14px; border-top: 2px solid #053863;}
.cont-table thead th {text-align: center; padding: 4px; font-weight: bold; border-top: 1px solid #dde2e6; border-right: 1px solid #dde2e6; background: #f6fafd; position: relative; vertical-align: middle;}
.cont-table thead th::after {content: ""; width: 100%; border-bottom: 1px solid #053863; position: absolute; left: 0; bottom: 0;}
.cont-table td { padding: 5px 6px; font-weight: bold; border: 1px solid #dde2e6; background: #fff; border-left: 0; font-weight: normal; vertical-align: middle; text-align: center;  line-height: normal;}
.cont-table .cir { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #fff;}
.cont-table .cir.green { background: #08c5a8;}
table caption, .hidden { position: absolute !important; z-index: -1; width: 1px; height: 1px !important; margin: -1px; clip: rect(1px, 1px, 1px, 1px);  /* clip-path: inset(50%); */ overflow: hidden;}
.value {font-size: 14px; line-height: 21px; margin-top: 15px;}
.value li { position: relative; padding-left: 17px;}
.value li::after { content: ""; width: 10px; height: 10px; border-radius: 10px; background: #fff;  position: absolute; left: 0; top: 6px;}
.value li.green::after { background: #08c5a8;}
.value li.yellow::after { background: #eed14c;}
.value li.red::after { background: #f63527;}
.safety .box { margin-top: 10px;padding: 9px; border-radius: 10px; font-size: 13.9px; line-height: 19px; background: #f6fafd;}
.link-btn { display: inline-block; margin-top: 10px; height: 44px; line-height: 44px; border-radius: 44px; border: 1px solid #f1f3f4; background: #fff url(/images/main/link_icon.png) no-repeat 20px center; background-size: 14px; box-shadow: 0px 0px 7px rgb(0 0 0 / 7%); padding: 0px 20px 0px 40px; font-size: 16px; font-weight: 600;}
@media screen and (max-width: 425px) {
.popupwrap {width: 100%;}
}

/*방사능팝업*/
#rd-container {position: relative;width: 100%;min-height: 100%;padding: 0 10px;background-color: #fff;}
#rd-container .rd-main-content{max-width: 1400px; margin: auto;}
#rd-container .rd-left-cont {box-shadow: 0px 0px 20px rgb(0 0 0 / 10%); background: #fff;overflow: hidden;position: relative; height: auto;margin-bottom: 30px;float: none; width: 100%;}
#rd-container .rd-left-cont h2 {text-align: left; font-size: 20px; font-weight: 700; padding: 13px 20px; height: 50px; position: relative; border-bottom: 1px solid #eff2f3;}
#rd-container .rd-left-cont .detail-btn { position: absolute; top: 15px; padding: 0 26px 0 11px; background-image: url(/images/main/link_icon_w.png); background-repeat: no-repeat; background-position: 83% center; background-size: 13px;right: 15px;}
#rd-container .rd-left-cont h2 span { font-size: 13px;}
#rd-container .rd-main-content .result {width: 100%; height: auto;position: relative;}
#rd-container .rd-main-content .result h3, #rd-container .rd-main-content .safety h3 {text-align: left; margin-top: 5px;}
#rd-container .rd-main-content .result h3::after, #rd-container .rd-main-content .safety h3::after {content: ""; width: 8px; height: 8px; background: #fff; border-radius: 8px; border: 2px solid #0080f3;position: absolute;left: 25px; top: 50%;transform: translateY(-50%);}
#rd-container .rd-main-content .result .list { height: 100%;}
#rd-container .rd-main-content .result .list .today { padding: 5px 20px 0px; height: auto;}
#rd-container .rd-main-content .result h4 {display: inline-block; text-align: left; float: none;width: 100%;margin: 0;font-size: 16px;padding-left: 28px;position: relative; font-weight: 500;}
#rd-container .rd-main-content .result h4 span { display: inline-block;margin-left: 5px;}
#rd-container .rd-main-content .result ul {float: none;width: 100%;display: inline-block;}
#rd-container .rd-main-content .result ul li { line-height: 21px;}
#rd-container .rd-main-content .safety {padding-top: 6px;margin-bottom: 0;}
#rd-container .rd-main-content .safety .ntc-text {right: 0;margin-top: 10PX;}
#rd-container .rd-main-content .safety .contarea {margin-top: 2px;padding: 0px 20px 15px;}
#rd-container .rd-main-content .safety .contarea .value { margin-top: 7px;}
#rd-container .rd-main-content .safety .contarea .value ul li {text-align: left;}
.value li.yellow.triangle::after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #eed14c; background: transparent; border-radius: 0;}
.value li.red.square::after { border-radius: 0;background: #f63527;}
#rd-container .rd-main-content .safety .contarea .box {font-size: 13px;line-height: 16px;text-align: left;}
#rd-container .rd-main-content .cont-table td {padding: 4px;}
#rd-container .rd-main-content .result .today, #rd-container .rd-main-content .result .accrue {padding: 5px 20px 0px;}
#rd-container .rd-main-content .link-btn {font-size: 13px;height: 40px;line-height: 40px; margin-top: 7px; float: left;    margin-bottom: 5px;}
#rd-container .rd-main-content .link-btn:last-child {margin-top: 0px; margin-bottom: 10px;}


.krds-main-menu .gnb-toggle-wrap .gnb-sub-list {
    padding: 1.6rem 3.5rem 1.6rem 3.8rem;
 }
 .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul {
     grid-column-gap: 0.5rem;
 }
 .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul a, .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul button {
     gap: 0.2rem;
     padding: 0.7rem 0.1rem;
 }
 
 toggle-wrap .gnb-sub-list .gnb-sub-content .sub-title {
     padding: 0 0.1rem;
 }
 
 @media (min-width: 1024px) {
    .is-gnb-web.hasScrollY #krds-masthead, .is-gnb-web.hasScrollY #header .header-container, .is-gnb-web.hasScrollY #header .krds-main-menu, .is-gnb-web.hasScrollY #header .gnb-toggle-wrap, .is-gnb-web.hasScrollY #container, .is-gnb-web.hasScrollY #footer {
        padding-right: 0.85rem;
    }
   .is-gnb-web.hasScrollY #krds-masthead, .is-gnb-web.hasScrollY #header .identifier {
       padding-right: 1.3rem;
   }
}