/********************************************************
■ 기본
********************************************************/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden; font-size: .9rem;}
#wrap img { border:none; }
#wrap i{vertical-align:middle;}

/*세팅*/
:root{
	--main: #0480ff;
	--sub: #215c98 ;
	--nav:#3362AB;
	--black:#000;
}

.fs36{font-size:1.8rem;}
.fs34{font-size:1.7rem;}
.fs30{font-size:1.5rem;}
.fs24{font-size:1.2rem;}
.fs20{font-size:1rem;}

@media (max-width:1030px){
	html{font-size:17px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;} /*태블릿 부터 바뀜*/
	.web{display:none;} /*태블릿*/
}

@media (max-width:767px){
	html,body,#wrap{height:auto;}
	html{font-size:16px;}
    body{font-size:1rem; position:relative;}	
	.mob{display:block;}
}
@media (max-width:375px){
	html{font-size:15px;}
}

/********************************************************
■ 헤더
********************************************************/
#header{ width:100%; z-index:100;position:fixed;top:0; border-bottom:1px solid rgba(228,220,207,0.5); }

#header .header_inner{position:relative; max-width:60rem; height:5rem; text-align:right; margin:0 auto; padding-right:12rem; box-sizing:border-box;} 
#header .header_inner:after{content:""; display:block; clear:both;}
#header .header_inner h1{position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:10;}
#header .header_inner h1 a{display:block; width:5.3rem; height:3rem; background:url('/images/default/main/logo_w.png')no-repeat 0 50% ; background-size:100% 100%; font-size:0;}

/*탑메뉴*/
#header .header_inner #nav ul {clear:both; position:relative; box-sizing:border-box; height:auto; }
#header .header_inner #nav ul li {position:relative;text-align:center;  display:inline-block; vertical-align:top;}
#header .header_inner #nav ul li div a{position:relative; color:#fff; font-size:.9rem; display:inline-block; padding:0 2rem;  height:5rem; line-height:5rem; text-transform: uppercase; box-sizing:border-box;}
#header .header_inner #nav ul li a strong{font-weight: 600;}
#header .header_inner #nav ul li.active div a{font-weight:600;}

#header .header_inner #nav > ul > li > ul {z-index: 10; position: absolute;  width:100%; left:50%; top:5.05rem; width:8rem; box-sizing:border-box; text-align:center; background:#fff;  height:auto;   display: none;	box-shadow:0 3px 5px rgba(0,0,0,0.15); transform: translate(-50%, 0);}
#header .header_inner #nav > ul > li > ul > li {display:block; }
#header .header_inner #nav > ul > li > ul > li > a{display:block;  width:100%; color:#000; font-size:0.8rem; padding:0; min-height:2.5rem; line-height:2.5rem;  letter-spacing:0em; }
#header .header_inner #nav > ul > li > ul > li > a.on {color:#13AE67;}
#header .header_inner #nav > ul > li > ul > li > a:before{content:""; display:block; clear:both;}
#header .header_inner #nav > ul > li > ul > li > a:hover{background-color:var(--nav); color:#fff;}
#header .header_inner #nav > ul > li > ul > li > ul{display:none;}
#header .header_inner #nav ul li div a:hover{ color:var(--nav);}


/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{display:none; position:absolute; left:1.25rem; top:0; width:4rem; height:4rem; cursor:pointer; text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;}
#header .btnAll {position:relative; display:block; width:1.85rem; height:1.25rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { display: inline-block; width: 100%; height: 2px; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; right:0;}
#header .btnAll > span:nth-child(2) { top: 0.55rem; right:0;}
#header .btnAll > span:nth-child(3) { top: 1.15rem; right:0;}
#header.open .btnAll > span{background:var(--sub); height:4px;}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
#header.open .btnAll > span:nth-child(2) {display:none}
#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
#header.open .btn-gnb-menu:after{transform:scale(80) translate(-20%, 10%); }


/*-----언어별-----*/
.select_btn{position:absolute; left:0rem;color:#fff; font-weight:500; height:5rem; gap:10px; display: flex; align-items: center; justify-content: center; top:0; font-size:0.8rem; }
.select_btn i{display:inline-block; width:0.95rem; height:0.6rem; line-height: 0.6rem;}
.select_btn.open i{transform: rotate(180deg);}
.option_list { display:none; position: absolute;  top: 5rem; left:0; z-index:1000; background: var(--nav);   padding: 0.75rem 1rem; }
.option_list li { margin-top: 0.25rem;}
.option_list li a { display: block;  font-size: 0.75rem; color: #fff; letter-spacing:0.02em; text-align:center;}
.option_list li a:hover { text-decoration: underline !important;}
.option_list li:first-child { margin-top: 0;}



/* 헤더 오버스크롤 */
#header:is(.scroll, .over){background:#fff; }
#header:is(.scroll, .over) .header_inner h1 a {background-image:url('/images/default/main/logo_b.svg');}
#header:is(.scroll, .over) .header_inner #nav ul li a{color:var(--black);}
#header:is(.scroll, .over) .header_inner #nav ul li.active div a{color:var(--sub);}
#header:is(.scroll, .over) .select_btn{color:var(--black);}
#header:is(.scroll, .over) .btnAll span{background:var(--black)}


/*사이트맵*/
#header #navi{background:#fff; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:100; transition:right 0.45s;  overflow-y: auto;}
#header.open #navi{transition:right 0.45s; right:0px;}

@media (max-width:1260px){
	#header .header_inner h1{right:1rem;}
	#header .header_inner #nav ul li div a {padding: 0 1rem;}
	#header .header_inner #nav > ul > li > ul {width:6.9rem;}
	.select_btn {left:1rem;}
	.option_list {left:0.7rem;}
}
@media (max-width:1030px){
	#header .header_inner {padding-right: 9rem ;}
	#header .header_inner #nav ul > li:first-child > ul {left:58%}
	#header .header_inner #nav ul > li:first-child a {padding-right: 0;}
}

@media (max-width:767px){
	/*헤더*/
	html,body,#wrap{height:auto;}
	#header{position:fixed; top:0; left:0;}
	#header .header_inner{height:4rem;}
	#header .header_inner h1 a{width:4rem; height:2.5rem; background-size: contain;}
	#header .header_inner #nav > ul > li > ul{top:4rem;}
	
	.select_btn{display:none;}
	#header .header_inner #nav {display: none;}
	

	#menuAll .siteAllMenu{width:100%; }
	#menuAll .siteAllMenu h2{height:4.4rem; line-height:4.4rem; padding:0 2rem; border-bottom:1px solid #ededed;}
	#menuAll .siteAllMenu h2 img{vertical-align:middle; height:2.5rem;}

	#menuAll .siteAllMenu ul li ul{display:none;}
	#menuAll .siteAllMenu ul li.open_li ul{display:block;}
	#menuAll .siteAllMenu > ul > li > a{display:block; width:100%; padding:0 1.1rem;  height:4.4rem; line-height:4.4rem; border-bottom:1px solid #ededed; font-size:1.1rem; font-weight:800; position:relative;}
	#menuAll .siteAllMenu > ul > li > ul{ background:var(--nav); padding:1rem 1.1rem 1.5rem 3.6rem;}
	#menuAll .siteAllMenu > ul > li > ul > li:not(:first-child){margin-top:1rem;}
	#menuAll .siteAllMenu > ul > li > ul > li > a{font-size:1.1rem;  color:#fff;}
	#menuAll .siteAllMenu > ul > li > ul > li.on1 > a span{position:relative;}
	#menuAll .siteAllMenu > ul > li > ul > li.on1 > a span:before{content : ""; display : block; position : absolute; left : 0; bottom:0; width :100%; height : 1px; background : #828282;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul{padding:0.5rem 1.8rem 0;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li{}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li:not(:first-child){margin-top:0.3rem;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li > a{font-size:0.85rem; font-weight:700; color:#828282;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li > a strong{font-weight:700;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li.on2 > a span{position:relative;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li.on2 > a span:before{content : ""; display : block; position : absolute; left : 0; bottom:0; width :100%; height : 1px; background : #828282;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li >  ul{padding:0.3rem 1.8rem;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li >  ul > li > a{font-size:0.85rem; font-weight:400; color:#828282;}
	#menuAll .siteAllMenu > ul > li > ul > li > ul > li >  ul > li > a strong{font-weight:400;}

	#menuAll .siteAllMenu > ul > li:nth-of-type(7) > a{color:#579c3b;}
	#menuAll .siteAllMenu > ul > li:not(.nosub) > a:after{content: "\e944"; display:block;position:absolute; left:3rem; top:0px; font-weight:400; font-size:1.3rem;  font-family: 'xeicon' !important; color:#1D3362;}
	#menuAll .siteAllMenu ul li.open_li > a:after{content: "\e941"; }
	
	#menuAll .option{height:4.4rem; line-height:4.4rem; padding:0 1rem; }
	#menuAll .option dd{display:inline-block;}
	#menuAll .option dd a{ color:#000; font-weight: 700;}
	#menuAll .option dd:nth-of-type(2){margin-right:1.25rem; padding-right:1.25rem;  position:relative;}
	#menuAll .option dd:nth-of-type(2):before{content:''; position:absolute; right:0; top:50%; margin-top:-7px; width:2px; height:14px; background:#000;}



	/*-----사이트맵 버튼-----*/
	#header .btn-gnb-menu{display:block; height:4.4rem; left: 0;}

	.option_list {display: none !important;}
}



/********************************************************
■ 푸터
********************************************************/
#footer{clear:both; padding:2rem 0; color:#fafafa; font-size:.8rem; letter-spacing:0.02em; line-height:1.2; background: #484C4F; z-index:1;}
#footer .inner{max-width:60rem; margin:0 auto; display:flex;}
#footer .inner .logo{display: flex; align-items: center;  justify-content: center; width:17.5rem; }
#footer .inner .logo img{height:3.5rem;}
#footer .inner .copyright p:not(:first-child){margin-top:0.5rem; line-height: 1.6;}

@media (max-width:1260px){
	#footer .inner .logo{ width:10.5rem; }
}
@media (max-width:767px){
	#footer{text-align:center; line-height:1.5;}
	#footer .inner{display:block; }
	#footer .inner .logo{ width:100%; margin-bottom:1.75rem; }
	#footer .inner .copyright p span:nth-of-type(1){display:none; font-size:0;}
	#footer .inner .copyright p:not(:first-child){margin-top:1rem; padding: 0 1rem;}
	#footer .inner .copyright p > a {display:inline-block; margin-left: 0.5rem;}
}

/********************************************************
■ 팝업
********************************************************/
.layerPopup {position:absolute;top:230px;left:10rem; width:450px; background:#fff;line-height:auto;z-index:99999;border:10px solid #15334F;box-shadow:0 0 4px rgba(0,0,0,0.2); padding-bottom:40px;}
.layerPopWrap{position:relative; width:100%; height:100%;}
.layerPopup ul li img{width:100%;}


@media (max-width:1030px){
	.layerPopup {left:50% !important;  transform:translateX(-50%);}
}


@media (max-width:767px){
	.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
	.layerPopup img{width:100% !important;}
	.layerPopup {left:5% !important;  transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
	.chkvsb{font-size:0.7rem !important;}
}

/********************************************************
■ 높은 해상도 대비
********************************************************/

@media (min-width:2100px){
	html{font-size:22px;}
}
@media (min-width:2400px){
	html{font-size:25px;}
}
@media (min-width:2550px){
	html{font-size:26.5px;}
}
@media (min-width:2880px){
	html{font-size:30px;}
}
@media (min-width:3840px){
	html{font-size:40px;}
}
@media (min-width:5640px){
	html{font-size:59px;}
}
@media (min-width:7640px){
	html{font-size:79px;}
}