@charset "utf-8";

/* *************************************************************************************
*
* 누리집 & 부속 사이트 
* 
* **************************************************************************************/
.nuri_txt {height: 4rem; padding:0.6rem; background:#edf1f5;}
.nuri_txt span {position:relative;display:inline-block;padding-left:2em;font-size: .75em;}
.nuri_txt span:before {content:'';position:absolute;left:0;top:50%;margin-top: -.5em;width: 1.5em;height: 1em;background:url(/common/img/common/ico_flag.svg) no-repeat center center;background-size:100% auto;}

.gnbWrap {display:block;position:fixed;top:0;left:0;right:0;height: 8.6rem;background-color: #fff; border-bottom:1px solid #DFE4EF; font-size: 20px; z-index: 11;} /* 20260609 */
.gnbWrap .fL,
.gnbWrap .fR {display: flex; flex-wrap:nowrap; align-items:center; height: 4.5rem;}
.gnbWrap .fL > *,
.gnbWrap .fR > * {display:block; position:relative;}
.gnbWrap .inner {max-width: none;}
.gnbWrap .inner:after {content:""; display:block; clear:both;}

@media all and (max-width:1024px) {
	.gnbWrap {font-size: 18px;}
}

@media all and (max-width:480px) {
	.gnbWrap {font-size: 17px;}
}

.gnb-dropdown {position:relative; z-index:5;}
.gnb-dropdown button {display:block; position:relative; font-size:.75em; width:100%; height:4.5rem; z-index:0; padding:0 1.564705882352941em 0 .25em; background:url(/portal/img/common/ico_gnb_dropdown.svg) no-repeat top 50% right 0; background-size:1.176470588235294em auto;}
.gnb-dropdown button.close {position:absolute; top:0; left:0; z-index:2; overflow:hidden; text-indent:-9999px; background:transparent; background:url(/portal/img/common/ico_gnb_dropdown_close.svg) no-repeat top 50% right 0; background-size:1.176470588235294em auto;}
.gnb-dropdown.on button.open {background:transparent;}
.gnb-dropdown > ul {display:block; position:absolute; font-size:.75em; width: 100%; min-width:8.5em; left:0; top:100%; margin-top:-.35em; background:#fff; border:1px solid #DFE4EF; border-radius:.5em; padding:.5em .75em; z-index:0; transition:.3s all; -webkit-transition:.3s all;}
.gnb-dropdown ul li + li {border-top:1px solid #DFE4EF;}
.gnb-dropdown ul a {display:block; position:relative; padding:.625em 0;color:#333;}
.gnb-dropdown ul a .selected {display:none;}
.gnb-dropdown ul a:hover,
.gnb-dropdown ul a:focus,
.gnb-dropdown ul a.on {font-weight:800; color:#003876;}
.gnb-dropdown ul a.on .selected {display:block;}
.gnb-dropdown:not(.on) button.close {visibility:hidden;}
.gnb-dropdown:not(.on) > ul {visibility:hidden; opacity:0; margin-top:-2em;}

@media all and (min-width:1560px) {
	.gnb-dropdown.show-full-pc button {display:none;}
	.gnb-dropdown.show-full-pc > ul {display:flex; flex-wrap:nowrap; align-items:center; position:relative; top:auto; margin-top:0 !important; border:none; border-radius:0; padding:0; visibility:visible !important; opacity:1 !important; font-size:.75em; height:4.5rem; z-index:1; background:transparent;}
	.gnb-dropdown.show-full-pc li {position:relative; padding-right:.5em;}
	.gnb-dropdown.show-full-pc + *,
	.gnb-dropdown.show-full-pc li + li {padding-left:.4em; border:none;}
	.gnb-dropdown.show-full-pc li + li:before,
	.gnb-dropdown.show-full-pc + *:before {content:""; display:block; position:absolute; width:2px; height:.65em; top:50%; left:-1px; margin-top:-.325em; background:#E5E5E5;}
	.gnb-dropdown.show-full-pc ul a {padding:0;}
	.gnb-dropdown.show-full-pc ul a:hover,
	.gnb-dropdown.show-full-pc ul a:focus {text-decoration:underline; font-weight:inherit; color:inherit;}
	.gnb-dropdown.show-full-pc ul a.on {padding:.29em .7058823em; border-radius:9em; color:#fff; font-weight:800; background:#F15656;}
	.gnb-dropdown.show-full-pc + * button {padding-left:0;}
}

@media all and (max-width:1560px) {
	.gnb-dropdown {border:0px solid #DFE4EF; padding:0 .6em;}
	.gnb-dropdown > ul {top:100%; margin-top:0 !important; border-top-left-radius:0; border-top-right-radius:0;}
	
	.gnbWrap .fL .gnb-dropdown {border-right-width:1px;}
	.gnbWrap .fR .gnb-dropdown {border-left-width:1px;}
	.gnb-dropdown.gnb-lang > ul {left:auto; right:0;}
}
@media all and (max-width:420px) {
	.gnb-dropdown {border:0px solid #DFE4EF; padding:0 .2em;}
	.gnb-dropdown button {padding:0 1.3em 0 .25em;}
}

.gnb-flag a {display:block; position:relative; font-size:.8em; color:#333; padding-left:3.125em; margin-right:.7em; font-weight:600;}
.gnb-flag a:before {content:""; display:block; position:absolute; top:50%; left:0; font-size:1.25em; width:2.1em; height:1.4em; background:url(/portal/img/common/ico_flag.svg) no-repeat 50% 50%; background-size:contain; transform:translateY(-50%); -webkit-transform:translateY(-50%);}


.zoom_list ul {display:table; margin-right:.3em;}
.zoom_list li {display:table-cell; padding:0 .2em; vertical-align:middle;}
.zoom_list .txt {font-size:.8em; font-weight:600;}
.zoom_list a {display:block; width:1.2em; height:1.2em; color:#888; text-align:center; line-height:1.1em; border:1px solid #ddd; border-radius:50%; box-sizing:content-box; transition:.3s;}
.zoom_list a:hover {border-color:#003876;}


.gnb-lang button {padding-left:1.5em;}
.gnb-lang button:before {content:""; display:block; position:absolute; top:50%; left:0; width:1.176470588235294em; height:1.176470588235294em; background:url(/portal/img/common/ico_lang.svg) no-repeat 50% 50%; background-size:contain; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.gnb-lang button.close:before {display:none;}
.gnb-lang button strong {font-size:.9411764705882353em; font-weight:600;}

.gnb-fav {margin-left:.3em;}
.gnb-fav button {display:block; position:relative; background:#E7F2FF; border-radius:9em; height:1.9em; padding:0 1em;}
.gnb-fav button span {display:block; font-size:.8em; color:#003876; font-weight:600;}

@media all and (max-width:1600px){
	.gnb-flag a {margin-right:1em;}
	.gnb-fav {margin-left:.5em;}
	.gnb-fav button {height:1.6em;}
	.gnb-fav button span {font-size:.75em;}
}
@media all and (max-width:1024px) {
	.gnb-flag,
	.gnb-fav {display:none !important;}
}

@media all and (max-width:520px) {
	.zoom_list .txt {display:none;}
}


/* *************************************************************************************
*
* layout 공통
* 
* **************************************************************************************/
.container {padding-top: 8.6rem;}
.content {position: relative; padding-bottom: 10rem;}
.content:has(.page_content) {padding-top: 3rem; background-color: #f4f6fd;}

.inner {max-width: 1640px; margin: 0 auto; padding: 0 2rem; box-sizing: border-box;}
.skip_nav {position: absolute; width: 100%; left: 0; z-index: 999; top: -50px;}
.skip_nav a:focus, .skip_nav a:active {position: absolute; left: 0;	top: 50px; height: 50px; line-height: 50px; width: 100%; z-index: 999; text-align: center; color: #fff; background:#333; overflow: visible; clip: unset;}

/*header*/
h1.logo {font-size: 2.5rem; color: #fff; font-weight: 800; z-index: -1;} /* 20260609 */
.headerWrap {position: fixed; top: 8.6rem; left: 0; right: 0; width: 100%; height: 12rem; background-color: rgba(0, 0, 0, 0.3); z-index: 10;} /* 20260609 */
.headerWrap > .inner {height: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.headerWrap .nav {max-width: 100rem; width: 100%; height: 100%;}
.headerWrap.fixed {background-color: #fff; box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1);}
.headerWrap.fixed .logo {color: #222;}
.headerWrap.fixed .header_gnb > li > a {color: #222;}
.headerWrap.is-active {background-color: #fff; box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1);}
.headerWrap.is-active .logo {color: #222;}
.headerWrap.is-active .header_gnb > li > a {color: #222;}
.headerWrap .nav_dim {display: none; position: absolute; left: 0; top: 12rem; width: 100%; height: 24.5rem; background-color: #fff; box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1); content: ''; z-index: -1;}

/* gnb */
.header_gnb {height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4.5rem;}
.header_gnb > li {position: relative; width: 100%; height: 100%;}
.header_gnb > li > a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 2rem; text-align: center;}
.header_gnb .depth2 {display: none; position: absolute; left: 0; top: 12rem; width: 100%; font-family: 'AritaDotum';} 
.header_gnb .depth2 > li > a {display: block; width: 100%; height: 100%; padding: 1.5rem; color: #333; background-color: #fff; border: 1px solid #ddd; border-radius: 0.5rem; text-align: center; font-size: 1.9rem; font-weight: 600;}
.header_gnb .depth3 {padding: 1.5rem;}
.header_gnb .depth3 > li + li {margin-top: 1rem;}
.header_gnb .depth3 > li > a {position: relative; padding-left: 1.5rem; color: #555; font-size: 1.7rem; font-weight: 600;}
.header_gnb .depth3 > li > a::before {position: absolute; left: 0; top: 0.8rem; width: 4px; height: 4px; background-color: #959595; border-radius: 50%; content: '';}

/* mobile gnb */
.mobile_menu {display: none;}
.mobile_menu .menu_bar {position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);}
.mo_nav {display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); overflow-y: auto; z-index: 99;} /* 20260609 */
.mo_nav .close_btn {position: absolute; right: 1rem; top: 2rem;}
.mo_gnb {position: relative; width: 32rem; height: 100%; margin-left: auto; background-color: #fff;}
.mo_gnb > strong {display: block; padding: 2rem; color: #fff; background-color: #161270; font-size: 2.6rem; font-weight: 600; font-family: 'AritaDotum';}
.mo_gnb_list {background-color: #fff;}
.mo_gnb_list > li > a {display: block; width: 100%; height: 100%; padding: 1.5rem 2rem; font-size: 2.2rem; font-weight: 600; color: #333;}
.mo_gnb_list .depth2 > li > a {position: relative; display: block; width: 100%; height: 100%; padding: 2rem 3.5rem; font-size: 2rem; color: #555; background-color: #f5f6f6;}
.mo_gnb_list .depth2 > li > a::before {position: absolute; left: 2rem; top: 3rem; width: 5px; height: 2px; background-color: #555; content: '';}
.mo_gnb_list .depth2 .currunt {color: #5966c6;}
.mo_gnb_list .depth3 {padding: 2rem 3rem; background-color: #5966c6;}
.mo_gnb_list .depth3 > li + li {margin-top: 1rem;}
.mo_gnb_list .depth3 > li > a {position: relative; display: block; padding-left: 1.5rem; color: #fff; font-size: 1.9rem; font-weight: 500;}
.mo_gnb_list .depth3 > li > a::before {position: absolute; left: 0; top: 1rem; width: 3px; height: 3px; border-radius: 50%; background-color: #fff; content: '';}

/*footer*/
.footerWrap {background-color: #4b4b4b; color: #fff;}
.footerWrap .topArea {padding: 2.5rem 0; border-bottom: 1px solid #a5a5a5;}
.footerWrap .topArea .inner {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3rem 2rem;}
.footerWrap .bottomArea {padding: 5rem 0;}
.footerWrap .bottomArea .inner {display: flex; flex-wrap: wrap; gap: 2rem 4rem;}
.footerWrap .bottomArea .logo {display:block; width:30rem; height:6.5rem; background:url("../img/common/logo_footer.svg") no-repeat 0 50%; background-size:26rem; font-size: 0; overflow:hidden;}                     
.footerWrap .bottomArea .con p {margin-bottom: 0.6rem; font-weight: 300; line-height: 1.4;}
.footerWrap .bottomArea .con strong {font-weight: 300;}

.footerLinks {width: calc(100% - 62rem);}
.footerLinks > ul {display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; overflow: hidden;} 
.footerLinks > ul > li {position: relative; font-weight: 300;}
.footerLinks > ul > li::before {position: absolute; left: -1.5rem; top: 1rem; width: 2px; height: 2px; background-color: #fff; content: '';}
.footerFamilySites {width: 58.5rem;}
.footerFamilySites .familysite {display: flex; flex-wrap: wrap; gap: 1.5rem;}
.footerFamilySites .familysite > li {position: relative; width: calc(100% / 3 - 1rem);}
.footerFamilySites .btn_dept {display: block; width: 100%; padding: 1.8rem 2rem; border-radius: 0.5rem; background-color: #fff; color: #4b4b4b; background-image: url("../img/icon/down_arr.png"); background-position: right 2rem center; background-repeat: no-repeat;}
.footerFamilySites .detail {display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;}
.footerFamilySites .detail h4 {display:block; position:absolute; width:0; height:0; text-indent:-999px; overflow:hidden;}
.footerFamilySites .detail .btn_close {display:block; position:relative; width: 100%; height: 100%; padding:0 2.222223em 0 1.1111112em; color:#222; font-size:.9em; background:url(../img/common/btn_familysite_off.svg) no-repeat top 50% right 1.33334em #fff; background-size:.88888889em auto; font-weight:600;}
.footerFamilySites .detail .btn_close {text-indent:-999px; background:transparent; border:none; overflow:hidden;}
.footerFamilySites .detail-list {display:block; position:absolute; right:0; bottom:100%; margin-bottom:.5em; width:34.5em; height:17.3em; padding:.75em; overflow:auto; border:1px solid #DFE4EF; border-radius:.25em; background:#fff; z-index:5;}
.footerFamilySites .detail-list > ul {display:flex; flex-wrap:wrap;}
.footerFamilySites .detail-list > ul > li {display:block; position:relative; flex-grow:1; padding:.75em; width:50%;}
.footerFamilySites .detail-list .half-grid > li {width:50%; float:left;}
.footerFamilySites .detail-list p {display:block; position:relative; text-align:center; padding:.75em; background:#6000c2; border-radius:.25em; margin-bottom:1em;}
.footerFamilySites .detail-list p strong {display:block; position:relative; font-size:1.1em; color:#fff; font-weight:600;}
.footerFamilySites .detail-list > ul ul:after {content:""; display:block; clear:both;}
.footerFamilySites .detail-list > ul ul li {display:block; position:relative; margin-bottom:.6em;}
.footerFamilySites .detail-list > ul ul li a {display:block; position:relative; font-size:.9em; padding-left:1.38888em; line-height:1.2em; color: #4b4b4b;}
.footerFamilySites .detail-list > ul ul li a:before {content:""; display:block; position:absolute; top:.6em; left:.5555556em; width:4px; height:4px; margin:-2px 0 0 -2px; background:#222;}
.footerFamilySites .detail-list > ul ul li a:hover,
.footerFamilySites .detail-list > ul ul li a:focus {color:#2c0a95; text-decoration:underline; font-weight:600;}
.footerFamilySites .detail-list > ul ul li a:hover:before,
.footerFamilySites .detail-list > ul ul li a:focus:before {background:#2c0a95;}

/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/
/* Only PC */
@media all and (min-width:1280px){
    .header_gnb .depth2 > li > a:hover {color: #4e55d5; background-color: #f8f5ff; border-color: #4e55d5;}
    .header_gnb .depth3 > li > a:hover {color: #4e55d5;}
}

/* Laptop */
@media all and (max-width:1280px){
    .headerWrap .nav {max-width: 80rem;}
}

/* Tablet */ 
@media all and (max-width:1024px){
    .headerWrap {height: 8rem; background-color: #fff; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
    h1.logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3rem; background: linear-gradient(to bottom, #b477ff 10%, #e9c7ff); background-clip: text; -webkit-background-clip: text; color: transparent !important;} /* 20260609 */
    .nav {display: none;}
    .mobile_menu {display: block;}

    .footerLinks {width: 100%;}
    .footerFamilySites {width: 100%;}
    .footerWrap .bottomArea {padding: 2rem 0;}

	.container {padding-top: 16.6rem;}
}

/* Mobile */
@media all and (max-width:780px){
    .gnbWrap .inner {padding: 0;}
	.footerWrap .bottomArea .logo {background-size: 22rem;}
    .footerFamilySites .familysite > li {width: 100%;}
    .footerFamilySites .detail-list {width: 100%;}

}

@media all and (max-width:480px){ 

}