@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 screen and (max-width: 1400px) {
    .con-area {padding: 0 20px;}
}
@media screen and (max-width: 1024px) {
    .con-area {padding: 0 15px;}
}


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


/* 닫기 버튼 */
#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);}

/*-------------------------------------------------------------------
	@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 .txt-wrap {display: block; max-width: 1400px; margin: 0 auto;}
#header .top-banner .txt-wrap .txt {display: block; line-height: 40px; font-weight: 500; font-size: 14px;}
#header .top-banner .txt-wrap .txt > img {display:inline-block; vertical-align: middle;}
#header .top-banner .txt-wrap .txt > span {display:inline-block; line-height: 1; vertical-align: middle;}

@media screen and (max-width: 600px) {
    #header .top-banner .txt-wrap {text-align: center;}
}
@media screen and (max-width: 375px) {
    #header .top-banner .txt-wrap .txt {font-size: 12px;}
    #header .top-banner .txt-wrap .txt > img {height: 14px;}
}
@media screen and (max-width: 320px) {
    #header .top-banner .txt-wrap .txt {font-size: 10px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 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; 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: 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 {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; position: absolute; top: 0; left: 0; width: 100%; text-align: center;}
#header .header-area .header-wrap .gnb-wrap #gnb {display: inline-block; vertical-align: middle;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu {display: block; text-align: left;}
#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: block; float: left;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a {display: block; position: relative;text-align: center; padding: 0 40px; 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.1875rem; 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 {display:none; position: absolute; top:100%; left: 0; z-index: 90; box-shadow: 0 10px 10px 0 #98AFC540; font-family: 'Pretendard'; }
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box {display:table; max-width: 1400px; width: 100%; min-height: 300px; border-radius: 0 0 10px 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: 0 0 0 10px; background: linear-gradient(128.36deg, #003863 34.51%, #E4032E 175.33%); vertical-align: top;}
#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; font-size: 0.875rem; color:#fff;}

#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu {display:table-cell; padding: 20px; border-radius:0 0 10px 0; border-width: 1px 1px 1px 0; border-style: solid; border-color: #B4CBE0; vertical-align: top;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li {display:block; width: 33.333%; padding: 0 10px;}
#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 .tit-wrap {display: block; width: 100%; padding: 10px 0px;}
#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: 10px 10px 10px 10px; border: 1px solid #E5E5E5;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a > span {display: block; padding-right: 20px; background-image: url('../images/layout/i_menu_arr.svg'); background-position: center right; background-repeat: no-repeat; line-height: 20px; font-weight: 600; font-size: 1.0625rem; color:#000; text-align: left;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a.link > span {background-image: url('../images/layout/i_gnb_link.svg');}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a{transition: border 0.3s, background-color 0.3s;}
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li:hover .tit-wrap > a,
#header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a:focus{border: 1px solid #3D55A5; background-color: #3D55A5;}

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

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a {padding: 0 35px;}

    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap:after{top:auto; bottom:10px; right: 30px;}
    #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: 1200px) {
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li > a {padding: 0 20px;}

    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-tit-wrap:after {bottom: 10px; right:10px;}
    #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 {float: right; position: relative; z-index: 1; 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-global {display: block; padding: 0 15px; height: 45px; border-radius: 45px; background: #3D55A5; color: #ffffff; text-align: center;}
#header .header-area .header-wrap .utils .list-wrap > li .btn-global > span {display: block; line-height: 45px; font-weight: 500; font-size: 1rem;}

#header .header-area .header-wrap .utils .list-wrap > li .btn-search {display: block; width: 35px; height: 35px; margin-top: 5px; 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.4s;}
#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: #0775DB;}
#header .header-area .header-wrap .utils .list-wrap > li .btn-search.on {background-image: url(../images/layout/i_search_close.svg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li{padding: 0 10px;}
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li .tit-wrap > a{padding: 10px;}
}
@media screen and (max-width: 1200px) {
    #header .header-area .header-wrap .gnb-wrap #gnb .menu > li .sub-wrap .sub-box .sub-menu .sub-01 > li{width: 50%;}
}
@media screen and (max-width: 1024px) {
    #header .header-area .header-wrap .utils {padding-top: 17.5px;}
    #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 {padding-top: 15px;}
    #header .header-area .header-wrap .utils .list-wrap > li .btn-global {height: 30px; padding: 0 10px; line-height: 30px;}
    #header .header-area .header-wrap .utils .list-wrap > li .btn-global > span {line-height: 30px;}

    #header .header-area .header-wrap .utils .list-wrap > li .btn-search {width: 30px; height: 30px; margin-top: 0;}

    #header .header-area .header-wrap .utils .list-wrap > li .btn-menu {width: 30px; height: 30px; margin-top: 0;}
}
@media screen and (max-width: 425px) {
    #header .header-area .header-wrap .utils .list-wrap > li.item-global {display: none;}
}


/*-------------------------------------------------------------------
	분류그룹 : header > search modal
-------------------------------------------------------------------*/
#header #search-modal {display:block; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; padding: 50px 0; background-color: #ffffff; box-shadow: 0 0 8px 0 rgba(0,0,0,0.3);}
#header #search-modal .search-wrap {display: block; position: relative; max-width: 500px; margin: 0 auto;}
#header #search-modal .search-wrap::before {content:''; position: absolute; top: calc(50% - 57px); left: 100%; width: 80px; height: 113px; background:url(../images/layout/bg_search.png) no-repeat center; background-size: contain;}
#header #search-modal .search-wrap::after {content:''; display: block; clear: both;}
#header #search-modal .search-wrap .search-box {display: table; float: left; position: relative; width: calc(100% - 50px);}
#header #search-modal .search-wrap .search-box .txt-cell {display: table-cell; width: 99%; vertical-align: middle;}
#header #search-modal .search-wrap .search-box .txt-cell .search-txt {display: block; width: 100%; height: 50px; padding: 2px 15px; border: 1px solid #04407E; background-color: #04407E; line-height: 44px; font-weight: 400; font-size: 1rem; color: #ffffff;}
#header #search-modal .search-wrap .search-box .txt-cell .search-txt::placeholder {color: #ffffff; opacity: 1;}
#header #search-modal .search-wrap .search-box .txt-cell .search-txt:-ms-input-placeholder {color: #ffffff;}
#header #search-modal .search-wrap .search-box .btn-cell {display: table-cell; width: 1%; vertical-align: middle;}
#header #search-modal .search-wrap .search-box .btn-cell .btn-submit {display: block; width: 50px; height: 50px; background-color: #04407E; background-image: url(../images/layout/i_search_wh.svg); background-repeat: no-repeat; background-position: center; background-size: 25px;}

#header #search-modal .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: 0 0 10px 10px; background-color: #ffffff; box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.15);}
#header #search-modal .search-wrap .search-box .auto-complete.on {display: block;}
#header #search-modal .search-wrap .search-box .auto-complete .list-wrap {display: block; overflow-x: hidden; overflow-y: auto;}
#header #search-modal .search-wrap .search-box .auto-complete .list-wrap > li {display: block;}
#header #search-modal .search-wrap .search-box .auto-complete .list-wrap > li:last-child {border-bottom: 0;}
#header #search-modal .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-modal .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-modal .search-wrap .search-box .auto-complete .list-wrap > li .btn-word > span {display: inline-block; vertical-align: middle;}
#header #search-modal .search-wrap .search-box .auto-complete .list-wrap > li .btn-word:focus,
#header #search-modal .search-wrap .search-box .auto-complete .list-wrap > li .btn-word:hover {background-color: #F4F5F9;}
#header #search-modal .search-wrap .btn-wrap {display: block; float: left; width: 50px; height: 50px; background-color: #fff;}
#header #search-modal .search-wrap .btn-wrap .btn-search-close {display: block; float: left; width: 50px; height: 50px; background-color: #fff;}
#header #search-modal .search-wrap .btn-wrap .btn-search-close .icon {margin: 0 auto;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header #search-modal {visibility: hidden; opacity: 0; transition: visibility 0s 0.4s, top 0.4s, opacity 0.4s;}
#header #search-modal.on {visibility: visible; top: 100%; opacity: 1; transition: visibility 0s 0s, top 0.4s, opacity 0.4s;}

#header #search-modal .search-wrap .search-box .btn-cell .btn-submit {transition: background 0.3s;}
#header #search-modal .search-wrap .search-box .btn-cell .btn-submit:focus,
#header #search-modal .search-wrap .search-box .btn-cell .btn-submit:hover {background-color: #033365;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    #header #search-modal {padding: 30px 15px;}
    #header #search-modal .search-wrap {max-width: none;}
    #header #search-modal .search-wrap::before {display: none;}
}



/*-------------------------------------------------------------------
	분류그룹 : 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;}
#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:25%; 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 > .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.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 .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
-------------------------------------------------------------------*/
@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; padding-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-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: 20px; font-weight: 600; font-size: 1.0625rem; 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; 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 > .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,
#mobile .con-body .mo-menu-list > li > a.tit:hover,
#mobile .con-body .mo-menu-list > li.active > a.tit {color: #ffffff;}

/* 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 > 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 > 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 {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 {padding-top: 15px;}
    #mobile .con-head .logo > img {height: 30px;}

    #mobile .con-body .mo-menu-list > li > a.tit {padding: 20px 15px;}
    #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 60px 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 {padding-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; padding:30px 0; border-top: 1px solid #e9e9e9; background: #fff;}
#footer .footer-wrap{max-width: 1400px;width: 100%;margin: 0 auto;}

#footer .footer-wrap .footer-info {}
#footer .footer-wrap .footer-info::after {content: ''; display: block;clear: both;}
#footer .footer-wrap .footer-info .footer-logo {float: left; width: 250px;}
#footer .footer-wrap .footer-info .footer-logo > img {display: inline-block; height: 40px; vertical-align: middle;}
#footer .footer-wrap .footer-info .footer-con{overflow: hidden;}
#footer .footer-wrap .footer-info .footer-con::after {content: '';display: block;clear: both;}
#footer .footer-wrap .footer-info .footer-con {display: block;}
#footer .footer-wrap .footer-info .footer-con .info {display: block;}
#footer .footer-wrap .footer-info .footer-con .info::after {content: '';display: block;clear: both;}
#footer .footer-wrap .footer-info .footer-con .info > li {display: block; float: left; margin-right: 20px; margin-bottom: 10px;}
#footer .footer-wrap .footer-info .footer-con .info > li .txt {display: block; font-weight: 400;color:#565C68;font-size: 0.875rem;}
#footer .footer-wrap .footer-info .footer-con .copyright {display: block; width: 100%; font-weight: 400;color:#565C68;font-size: 0.875rem;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1400px) {
    #footer{padding: 20px;}
    #footer .footer-wrap .footer-info .footer-logo {width: 200px;}
    #footer .footer-wrap .footer-info .footer-con .txt {margin-bottom: 5px;}
}
@media screen and (max-width: 1024px) {
    #footer .footer-wrap .footer-info .footer-logo {display: none;}
    #footer .footer-wrap .footer-info .footer-con {text-align: center;}
    #footer .footer-wrap .footer-info .footer-con .info > li {float: none;}
}
@media screen and (max-width: 600px) {
    #footer {padding: 15px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 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(80, 114, 230, 0.3);}
#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::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 screen and (max-width: 800px) {
    #topBtn {right: 15px;}
}
@media screen and (max-width: 425px) {
    #topBtn {bottom: 15px;}
    #topBtn::after {width: 40px; height: 40px;}
}