@charset "utf-8";
@import url('../share/css/font/Paperlogy.css');
@import url('../share/css/font/pretendard-gov.css');

:root {
	--font-family-base: 'Pretendard GOV', 'Malgun Gothic', '맑은고딕', sans-serif;
	--font-paper: 'Paperlogy', sans-serif;
	--font-ttangs: 'Ttangsbudaejjigae', sans-serif;
	--font-estab: 'establishRetrosans', sans-serif;
	--main-color:#0172ba;
	--sub-color:#01a3af;
	--mix-color:#0189b5;
	--main-gra:linear-gradient(113deg, var(--main-primary-80)  7.97%, var(--main-primary-95) 92.25%);
	--sub-gra:linear-gradient(96deg, var(--sub-color)  7.97%, var(--main-primary-60) 92.25%);
}

* {font-family: var(--font-family-base); word-break:keep-all;}

/* skip_nav */
#skipnav {position:absolute; top:0; left:0; width:200px;z-index:9999;}
#skipnav a, #skipMap{position:absolute; display:block; height:1px; overflow:hidden; color:#333; z-index:9999;}
#skipnav a:hover, #skipnav a:focus, #skipnav a:active, #skipMap:hover, #skipMap:focus, #skipMap:active{width:auto; height:auto; color:#333; font-weight:bold;}
#skipnav_intro {position:absolute; top:0; left:0; width:20rem; z-index:9999;}
#skipnav_intro a {position:absolute; display:block; height:1px; overflow:hidden; color:#333; z-index:9999;}
#skipnav_intro a:hover, #skipnav_intro a:focus, #skipnav_intro a:active {width:auto; height:auto; color:#333; font-weight:bold;}

body.noScroll {position:fixed; top:0; width:100%; height:100%; overflow:hidden;}

.wrap {position:relative; max-width:120rem; margin:auto;}

#nuri-txt{background: #eef2f7;}
#nuri-txt>div{padding:0.7rem 0; background:url("../img/inc/header_flag.png") no-repeat 0 center / 2.8rem; font-size:1.4rem;}
#nuri-txt .nuri-txt {margin-left:3.5rem;}
header {padding:1.2rem 0 0}
header .gnb {display:flex; justify-content: flex-end; margin-bottom:0.4rem;}
header .gnb>ul {display:flex;}
header .gnb>ul a {position:relative; display:block; padding:0.5rem 0; padding-right:1.2rem; font-size:1.5rem; line-height:150%;}
header .gnb>ul a::after {position:absolute; right:0.2rem; top:1.2rem; width:0.6rem; height:0.6rem; border:solid #33363D; border-width:1px 1px 0 0; content:""; transform:rotate(45deg);}
header .hd-main {display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem;}
header h1 a {display:block;}
header .hd-btns {display:flex; gap:1rem;}
header .hd-btns>li>a {position:relative; display:block; padding:0 1.2rem 0 3.8rem; font-size:1.7rem; font-weight:700;}
header .hd-btns>li.allmenu-btn>a::before {position:absolute; left:1.2rem; top:0.6rem; width:1.6rem; height:0.2rem; background:#808185; box-shadow:0 0.5rem 0 #808185, 0 1rem 0 #808185; content:"";}
header #allmenu  {display:none; position:fixed; left:0; right:0; top:0; bottom:0; justify-content:center; align-items:center; background:rgba(0,0,0, .5); z-index:999999;}
header #allmenu.on {display:flex;} 
header #allmenu>div {position:relative; overflow-y:auto; display:flex; flex-direction:column; height:90vh; max-width:120rem; background:#fff; box-shadow:0 0.8rem 2.4rem rgba(0,0,0,.2);}
header #allmenu h2 {padding:3rem; border-bottom:1px solid #000}
header #allmenu>div>ul {flex:1 1 auto; position:relative; z-index:10;}
header #allmenu>div>ul::before {position:absolute; left:0; top:0; bottom:0; width:26rem; background:#EEF2F7; content:""; z-index:-1;}
header #allmenu>div>ul>li {display:flex; border-top:1px solid #ddd;}
header #allmenu>div>ul>li:first-child {border-top:0;} 
header #allmenu>div>ul>li>p {flex:0 0 26rem; padding:1.6rem 2.4rem; font-size:2.2rem; font-weight:600;}
header #allmenu>div>ul>li>ul {flex:1 1 auto; display:flex; gap:2rem; flex-wrap:wrap; padding:1.6rem 2.4rem;}
header #allmenu>div>ul>li>ul>li {display:flex; flex-direction:column; width:calc(25% - (2rem * 3 / 4)); position:relative; padding-left:1rem; font-size:1.8rem;}
header #allmenu>div>ul>li>ul>li::before {position:absolute; left:0; top:1.2rem; width:0.4rem; height:0.4rem; background:#333; content:"";}
header #allmenu>div>ul>li>ul>li>a {flex:0 0 auto;}
header #allmenu>div>ul>li>ul>li>ul {flex:1 1 auto; padding:1.5rem; border-radius:1rem; background:#f2f4f8;}
header #allmenu>div>ul>li>ul>li>ul>li:not(:first-child) {margin-top:0.8rem;}
header #allmenu>div>ul>li>ul>li>ul>li a {display:block; line-height:120%; font-size:1.6rem;}

header #allmenu a.close {display:block; position:absolute; right:3rem; top:3rem; width:4rem; height:4rem; overflow:hidden; text-indent:-500rem; font-size:0;}
header #allmenu a.close::before,
header #allmenu a.close::after {position:absolute; left:1.9rem; top:0rem; width:0.2rem; height:4rem; background:#33363D; transform:rotate(45deg); content:""; }
header #allmenu a.close::after { transform:rotate(-45deg); }

footer {position:relative; background:#F4F5F6;}
footer::before {position:absolute; top:0; left:0; right:0; height:5.6rem; border:solid #cdd1d5; border-width:1px 0; background:#fff; content:"";}
footer .shortcut>ul {display:flex; padding-top:1px; border-left:1px solid #cdd1d5;}
footer .shortcut>ul>li {flex:1; display:flex;}
footer .shortcut>ul>li>a {position:relative; display:flex; flex:1; height:5.6rem; align-items:center; padding:0 2.4rem; font-size:1.7rem; text-decoration:none; border-right:1px solid #cdd1d5; transition:.3s;}
footer .shortcut>ul>li>a::before,
footer .shortcut>ul>li>a::after {position:absolute; right:2.4rem; top:2rem; width:0.2rem; height:1.6rem; background:#808185; content:"";}
footer .shortcut>ul>li>a::after {transform:rotate(90deg);}
footer .shortcut>ul>li>a:hover  {background:#EEF2F7;}
footer .shortcut>ul>li>a:active {background:#D6E0EB;}
footer .shortcut>ul>li>div {display:none; position:absolute; left:0; right:0; padding:3rem 4rem; min-height:25rem; bottom:calc(100% + 1rem); border:1px solid #cdd1d5; border-radius:1.5rem; background:#fff; box-shadow:0 0.7rem 1.5rem rgba(0,0,0,.1); opacity:0; transition:.3s; z-index:999;}
footer .shortcut>ul>li.select>div {display:block;}
footer .shortcut>ul>li>div.on {opacity:1;}
footer .shortcut>ul>li>div h3 {font-size:2.4rem; font-weight:700; color:#25282c;}
footer .shortcut>ul>li>div h4 {font-size:2rem; margin-top:2rem; color:var(--main-color); padding-left:0; background:none;}
footer .shortcut>ul>li>div ul {display:flex; gap:0.7rem 1rem; flex-wrap:wrap; margin-top:2rem; padding-left:0.2rem;}
footer .shortcut>ul>li>div h4+ul {margin-top:1.3rem;}
footer .shortcut>ul>li>div ul>li {flex:0 0 calc((100% / 4) - ((1rem * 3) / 4));}
footer .shortcut>ul>li>div ul>li>a {position:relative; display:block; padding-left:0.8rem;}
footer .shortcut>ul>li>div ul>li>a::before {position:absolute; left:0; top:1rem; width:0.3rem; height:0.3rem; background:#33363D; content:"";}
footer .shortcut>ul>li>div ul>li>a::after {content:' '; display: inline-block; width:1.8rem; height:1.8rem; margin-left:0.4rem; background:#000; -webkit-mask-image: url('../img/inc/ico_go.svg'); mask-image: url('../img/inc/ico_go.svg'); -webkit-mask-size: 100%; mask-size: 100%; transform:translateY(0.3rem);}
footer .shortcut>ul>li>div a.close {position:absolute; top:4rem; right:4rem; width:2.4rem; height:2.4rem; font-size:0; overflow:hidden; text-indent:-500rem;}
footer .shortcut>ul>li>div a.close::before,
footer .shortcut>ul>li>div a.close::after {position:absolute; top:0; left:50%; width:0.2rem; height:2.4rem; background:#33363D; content:""; transform:translateX(-50%) rotate(45deg);}
footer .shortcut>ul>li>div a.close::after {transform:translateX(-50%) rotate(-45deg);}

#footer {display:flex; gap:4rem; flex-direction:column;padding-top:4rem; padding-bottom:2.4rem;}
#footer .ft-main {display:flex; gap:4rem; flex-direction:column;}
#footer .ft-main>div {display:flex; gap:2rem; justify-content:space-between;}
#footer .ft-main .sns {display:flex; gap:0.8rem;}
#footer .ft-copy {display:flex; gap:2rem; justify-content:space-between; padding-top:1.8rem; border-top:1px solid #CDD1D5;}
#footer .ft-copy * {font-size:1.5rem;}
#footer .ft-copy ul {display:flex; gap:0.8rem;}
#footer .ft-copy ul a {display:block; padding:0 0.2rem;}



/*pc*/
@media all and (min-width:801px){
	body {min-width:120rem;}
	body::before {position:absolute; top:15.5rem; left:0; right:0; border-top:1px solid #cdd1d5; content:"";}
	body:has( nav#lnb>div>ul>li.select) {position:fixed; top:0; width:100%; height:100%; overflow:hidden;}
	body:has( nav#lnb>div>ul>li.select)::after {position:absolute; top:22rem; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); z-index:9999; content:"";}

	header {position:relative; border-bottom:1px solid #cdd1d5;}
	nav#lnb>p{display:none;}
	nav#lnb>div>ul {display:flex; gap:0.8rem;}
	nav#lnb>div>ul>li>a {position:relative; display:flex; justify-content:center; align-items:center; height:5.6rem; font-size:1.9rem; font-weight:700; text-decoration:none; padding:0 1.6rem; padding-right:3.9rem; transition:.3s;}
	nav#lnb>div>ul>li>a::after {position:absolute; right:1.6rem; top:1.95rem; width:0.8rem; height:0.8rem; border:solid #33363D; border-width:0.2rem 0.2rem 0 0; transform:rotate(135deg); transition:.3s; content:"";} 
	nav#lnb>div>ul>li>a::before {position:absolute; left:50%; right:50%; bottom:-1px; height:4px; background:#063A74; transition:left .3s, right .3s, opacity .1s; content:"";}
	nav#lnb>div>ul>li>a:hover {background:#EEF2F7;}
	nav#lnb>div>ul>li>a:active {background:#D6E0EB;}
	nav#lnb>div>ul>li.select>a{color:#052B57;}
	nav#lnb>div>ul>li.select>a::after {top:2.3rem; transform:rotate(315deg);}
	nav#lnb>div>ul>li.select>a::before {left:0; right:0;}
	nav#lnb .submenu {display:none; position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:99999;}
	nav#lnb .select .submenu {display:block;}
	header span.navBg {display:none; position:absolute; top:calc(100% + 1px); left:0; right:0; background:#fff; z-index:99998;}
	header:has( nav#lnb>div>ul>li.select) span.navBg {display:block;}
	nav#lnb .submenu>ul {padding:3.2rem 0; display:flex; flex-wrap:wrap; gap:2rem;}
	nav#lnb .submenu>ul>li {flex:0 0 calc(100% / 4 - ((2.8rem * 3) / 4));}
	nav#lnb .submenu>ul>li>a {position:relative; display:block; padding:1.6rem 3rem 1.6rem 2rem; font-size:1.8rem; border-radius:0.8rem; background:#f2f4f8; transition:.3s;}
	nav#lnb .submenu>ul>li>a::before {position:absolute; right:2rem; top:50%; width:0.8rem; height:0.8rem; border:solid #33363D; border-width:1px 1px 0 0; transform:translateY(-50%) rotate(45deg); content:""; transition:.3s;}
	nav#lnb .submenu>ul>li:hover>a,
	nav#lnb .submenu>ul>li:has( *:focus-visible)>a {color:#fff; background:var(--main-color);}
	nav#lnb .submenu>ul>li:hover>a::before,
	nav#lnb .submenu>ul>li:has( *:focus-visible)>a::before {border-color:#fff;}
	nav#lnb .submenu>ul>li>ul {padding-top:0.5rem;}
	nav#lnb .submenu>ul>li>ul>li>a {position:relative; display:block; padding:1rem; padding-left:2rem; transition:.3s;}
	nav#lnb .submenu>ul>li>ul>li>a::before {position:absolute; content:""; left:1.1rem; top:2.1rem; width:0.3rem; height:0.3rem; background:#33363D; }
	nav#lnb .submenu>ul>li>ul>li>a:hover,
	nav#lnb .submenu>ul>li>ul>li>a:focus-visible {font-weight:600; color:var(--main-color);}

	
}


/*tablet*/
@media all and (max-width:800px){
	footer .shortcut>ul {flex-direction:column; border-left:0;}
	footer .shortcut>ul>li>a {border-right:0; border-bottom:1px solid #cdd1d5; background:#fff;}
	footer .shortcut>ul>li>div {min-height:auto;}
	footer .shortcut>ul>li>div ul>li {flex:1 1 auto;}
	#footer {padding:4rem 16px;}
	#footer .ft-main>div,
	#footer .ft-copy{flex-direction:column;}
	#footer .ft-main .sns,
	#footer .ft-copy ul{justify-content:center;}
	#footer .ft-copy p {text-align:center;}
	
	body:has(#lnb.on) {position:fixed; top:0; width:100%; height:100%; overflow:hidden;}
	header .wrap {position:static;}
	header .gnb,
	header .hd-btns {display:none;}
	
	header .hd-main {padding:2rem 16px; border-bottom:1px solid #ccc;}

	nav#lnb>p>a {position:absolute; top:7.7rem; right:16px; width:3.2rem ; height:3.2rem; z-index:999999;}
	nav#lnb>p>a::before {position:absolute; left:0; right:0; top:0.3rem; height:2px; background:#808185; box-shadow:0 1rem 0 #808185, 0 2rem 0 #808185; content:"";}
	nav#lnb.on>p>a::before {top:1.4rem; box-shadow:none; transform:rotate(45deg);}
	nav#lnb.on>p>a::after {position:absolute; left:0; right:0; top:1.4rem; height:2px; background:#808185; transform:rotate(-45deg); content:"";}
	nav#lnb>div {display:none; position:absolute; left:0; top:15.3rem; right:0; height:calc(100vh - 15.3rem); padding-right:64%; overflow-y:auto; border-top:1px solid #cdd1d5; background:#EEF2F7; z-index:99999;}
	nav#lnb.on>div {display:block;}
	nav#lnb>div>ul>li>a {position:relative; display:flex; align-items:center; padding:0 2rem; font-size:2rem; font-weight:600; height:7rem; line-height:120%;}
	nav#lnb>div>ul>li.select>a {color:var(--main-color); background:#fff;}
	nav#lnb .submenu {display:none; position:absolute; padding:2rem; left:calc(100% - 64%); right:0; top:0; bottom:0; overflow-y:auto; background:#fff;}
	nav#lnb .select .submenu {display:block;}
	nav#lnb .submenu>ul>li>a {position:relative; display:block; padding:1.6rem 1.2rem; padding-right:3rem; font-size:1.9rem; border-top:1px solid #ddd;}
	nav#lnb .submenu>ul>li:first-child>a {border-top:0;}
	nav#lnb .submenu>ul>li>a::after {position:absolute; right:1.2rem; top:50%; width:0.8rem; height:0.8rem; border:solid #33363D; border-width:1px 1px 0 0; transform:translateY(-50%) rotate(45deg); content:"";}
	nav#lnb .submenu>ul>li:has(.depth3)>a::after {top:calc(50% - 0.3rem); transform:translateY(-50%) rotate(135deg);}
	nav#lnb .submenu>ul>li>a.select,
	nav#lnb .submenu>ul>li:has(.depth3 a.select)>a {font-weight:bold;}
	nav#lnb .submenu>ul>li .depth3 {display:none; padding-bottom:1rem;}
	nav#lnb .submenu>ul>li.on>a {border-radius:1rem; background:#f2f4f8; border-top:0;}
	nav#lnb .submenu>ul>li.on:has(.depth3)>a::after {top:calc(50% + 0.3rem); transform:translateY(-50%) rotate(-45deg);}
	nav#lnb .submenu>ul>li.on+li>a {border-top-color:#fff;}
	nav#lnb .submenu>ul>li.on .depth3 {display:block; padding:0 1.2rem 1rem;}
	nav#lnb .submenu>ul>li.on .depth3 a {position:relative; display:block; padding:0.5rem; padding-left:1rem;}
	nav#lnb .submenu>ul>li.on .depth3 a::before {position:absolute; left:0; top:1.5rem; width:0.4rem; height:0.4rem; background:#000; content:"";}
	nav#lnb .submenu>ul>li.on .depth3 a.select {color:var(--main-color); text-decoration:underline;}
}


/*mobile*/
@media all and (max-width:640px){


}

/*mobile(small)*/
@media all and (max-width:361px){

}