/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

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

/*세팅*/
:root{
	--main: #c92830;
	--sub: #ededed;
}


@media (max-width:1024px){
	html,body,#wrap{height:auto;}
	html{font-size:17px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;}
}
@media (max-width:768px){
	html,body,#wrap{height:auto;}
	html{font-size:17px;}
    body{font-size:1rem; position:relative;}	
	.mob{display:block;}
	.web{display:none;}
}
@media (max-width:390px){
	html{font-size: 16px;}
    body{font-size: 1rem}
}


/********************************************************
■ 헤더
********************************************************/
#header{ width:100%; z-index:100;position:absolute;top:0; background:rgba(255,255,255,0.87); border-bottom:1px solid #dadada;}
#header .header_inner{display:flex;align-items: center;justify-content: space-between;margin: 0 auto;padding-right:9.4rem;width:75rem; height:4.2rem; text-align:center; position:relative; }
#header .header_inner h1 img {width:7.4rem;}

/*탑메뉴*/
#header .header_inner .nav_inner {display:flex; gap: 1.8rem;}
#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; width: auto; float:none; vertical-align:top;}
#header .header_inner #nav ul li div > a{display: flex; align-items: center; justify-content: center; position:relative; color:#000; font-weight:500; width:8rem; height:4.2rem; font-size: 0.9rem;}
#header .header_inner #nav ul li a strong{font-weight: 600;}

#header .header_inner #nav > ul > li > ul {z-index: 10; position: absolute;  width:100%; left:0; top:calc(4.2rem + 1px); box-sizing:border-box; text-align:center; background:#fff;  height:auto;   display: none; box-shadow: rgba(193, 193, 193, 1) 0px 0px 0 1px; border-top: none;}
#header .header_inner #nav > ul > li > ul > li {display:block; }
#header .header_inner #nav > ul > li > ul > li a{display: flex; justify-content: center; align-items: center;  padding: 0 0.2rem; width: 100%;  height: 3.4rem;  background:#fff; color:#828282; font-weight:500;transition:all 0.3s; font-size: 0.9rem;}
#header .header_inner #nav > ul > li > ul > li a.on,
#header .header_inner #nav > ul > li > ul > li a:hover{background-color:#ececec; color:#ff0000;}
#header .header_inner #nav > ul > li > ul > li > a strong,
#header .header_inner #nav > ul > li > ul > li > ul > li > a strong {color:#ff0000;}
#header .header_inner #nav > ul > li > ul > li > ul{width: 100%; position:absolute;  right:calc(-8rem - 1px); top:0; box-shadow: rgba(193, 193, 193, 1) 0px 0px 0 1px;}
#header .header_inner #nav > ul > li > ul > li > ul > li{display:block; }


/*링크만 연결된 메뉴*/
a.newBlank{padding-right:1.2rem; position:relative;}
a.newBlank:after{ content : "\e980"; display : block;font-size:0.9rem; font-weight:500; position : absolute; right:0px; top:50%;transform:translateY(-50%); font-family:'xeicon';  }
a.newBlank:hover:before{background:#fff;}



/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{display:none; position:absolute; right:1rem; top:0; width:2.15rem; height:4.2rem; cursor:pointer; text-align:center; -webkit-transition: all 0.25s; transition: all 0.25s;}

#header .btnAll {position:relative; display:block; width:100%; height:1.2rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { right:0; display: inline-block; width: 100%; height: 3px; position: absolute; background-color: #000; -webkit-transition: all 0.25s; transition: all 0.25s; border-radius:1rem;}
#header .btnAll > span:nth-child(1) { top: 0; z-index: 1;}
#header .btnAll > span:nth-child(2) { top: 0.45rem; background:var(--main);}
#header .btnAll > span:nth-child(3) { top: 0.95rem; }
#header.open .btnAll > span{background:#000;}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); background:var(--main);}
#header.open .btnAll > span:nth-child(2) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); background:#000;}
#header.open .btnAll > span:nth-child(3) {opacity:0;}
#header.open .btn-gnb-menu:after{transform:scale(80) translate(-20%, 10%); }



/*-----언어별-----*/
.select_btn{position: relative; color:#000; font-weight:500; height:4.2rem; gap:10px; display: flex; align-items: center; justify-content: center; font-size:0.8rem; }
.select_btn i{display:inline-block; width:0.95rem; height:0.6rem; background:url('/images/default/main/lang_arr_ov.png') no-repeat right center; background-size:100% auto;}
.select_btn.open i{transform: rotate(180deg);}

.option_list { display:none; position: absolute; top: calc(4.2rem + 1px); right:8.7rem; z-index:1000; background: var(--sub);  padding: 15px 25px; }
.option_list li { margin-top: 5px;}
.option_list li a { display: block;  font-size: 15px;  font-weight:600; color: #000; 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.over,
#header.scroll{background:#fff; box-shadow: 1.2px 3.8px 22.8px 1.2px rgb(0 0 0 / 4%);}
#header.scroll .header_inner h1 img {content:url('/images/default/main/logo_g.png') !important;}
#header.over .header_inner #nav ul li a,
#header.scroll .header_inner #nav ul li a,
#header.over a,
#header.scroll a{color:#444;}
#header.over .select_btn{color:#444;}
#header.over .select_btn i, #header.scroll .select_btn i {background: url('/images/default/main/lang_arr_ov.png') no-repeat right center !important;}
#header.scroll .btnAll span {background-color:#333;}

/*사이트맵*/
#menuAll {position:absolute; text-align:left; font-family: 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'sans-serif';}
#header #navi{background:#fff; position:fixed; top:-100%; left:0; width:100%; height:0; padding-top:0; overflow:hidden;  z-index:100; transition:top 0.45s;  overflow-y: auto;}
#header.open #navi{transition:top 0.45s; top:0px;}


@media (max-width:1500px){
	#header .header_inner {width:100%; padding-left:1rem; padding-right:3.5rem;}

	.option_list {right: 3rem;}
}
@media (max-width:1024px){
	/*헤더*/
	#header .header_inner,
	#header .btn-gnb-menu{height:4rem;}
	#header .btn-gnb-menu {right:1.5rem;}
	#header .header_inner {padding:0 1rem;}

	.option_list{display:none;}
	
	.select_btn{display:none;}
	#header .header_inner #nav {display: none;}
	

	#header #navi{top:0; left:auto; right:-100%; width:100%; transition:right 0.45s;  height:100%;}
	#header.open #navi{transition:right 0.45s; top:0px; right:0; padding-bottom: 4rem;}

	#menuAll .siteAllMenu{width:100%; }
	#menuAll .siteAllMenu h2{display: flex; align-items: center; padding:0 1.2rem; height: 4.4rem; border-bottom:2px solid #dfdfdf;}
	#menuAll .siteAllMenu h2 img{vertical-align:middle; width:6.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 2rem;  height:4.5rem; line-height:4.5rem; border-bottom:1px solid #ededed; font-size:1.1rem; font-weight:500; color:#000; position:relative;}
	#menuAll .siteAllMenu > ul > li > ul{ background:#EDEDED; padding:1rem 3rem 1.5rem 3.6rem; border-top:1px solid #DFDFDF;}
	#menuAll .siteAllMenu > ul > li > ul > li:not(:first-child){margin-top:1.62rem;}
	#menuAll .siteAllMenu > ul > li > ul > li > a{ font-size:1.1rem; color:#555; font-weight:500;}
	#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 1rem 0; }
	#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.88rem; color:#555;}
	#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:#555;}
	#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: "\e943";  display:block;position:absolute; right:1.5rem; top:0px; font-weight:700; font-size:2.2rem;  font-family: 'xeicon' !important; color:#000;}
	#menuAll .siteAllMenu ul li.open_li > a:after{content: "\e946";}
	
	#menuAll .option{margin-top:1.5rem; padding-left: 2rem;}
	#menuAll .option dd{display:inline-block;}
	#menuAll .option dd a{ color:#555; font-weight: 500; font-size: 1.1rem;}
	#menuAll .option dd:not(:nth-of-type(1)){margin-left:0.5rem; padding-left:0.75rem;  position:relative;}
	#menuAll .option dd:not(:nth-of-type(1)):before{content:''; position:absolute; left:0px; top:0.35em;width:2px; height:1em; background:#555;}


	/*-----사이트맵 버튼-----*/
	#header .btn-gnb-menu{display:block;} 
}
@media (max-width:768px){
	#header .header_inner,
	#header .btn-gnb-menu{height: 4.6rem;}
	#header .btn-gnb-menu {width:2.125rem;}
	#menuAll .siteAllMenu h2 img,
	#header .header_inner h1 img {width: auto; height: 1.64rem;}


	#menuAll .siteAllMenu > ul > li > a {font-size: 1.3rem;}
	#menuAll .siteAllMenu > ul > li > ul > li > a {font-size:1.1rem;}
}


/********************************************************
■ 푸터
********************************************************/
#footer{position:relative; padding:3.4rem 0 3rem 7.8%; color:#49494b; z-index:1; background:#efefef; border-top:1px solid #eaeaea;}
#footer .inner{display: flex; gap:2rem 5%;margin: 0 auto; width:75rem; position:relative;}
#footer .inner h3 {flex-shrink:0;}
#footer .inner h3 img {width:7.75rem;}
#footer .inner .related{display:flex; gap:6px; position:absolute; right:0; top:0; }
#footer .inner .related button{display:block; width:1.85rem; height:1.85rem; background:url('/images/default/main/top.png')no-repeat 50% 50%; background-size:100% auto; text-indent:-9999px; flex-shrink:0; }
#footer .address {font-weight:600; line-height:1.34;  font-size: 0.8rem; padding-right: 25%;}
#footer .address span{padding:0 10px;}
#footer .address .copy{margin-top:1rem;}


/*----- 관련 사이트 -----*/
.site_select{position:relative;}
.site_select .site_btn a{display:block; text-align:left; position:relative; color:#49494b; width:10.5rem; height:1.85rem; line-height:1.85rem; padding:0 10px; border:1px solid #49494b;-webkit-transition: all .3s ease-in-out;  transition: all .3s ease-in-out; }
.site_select .site_btn a:after{content : ""; display : block; position : absolute; right:10px; top:0.7em; width :0.85rem; height : 0.45rem; background:url(/images/default/main/select_arr.png) no-repeat 0 0; background-size:100% auto; -webkit-transition: all .3s ease-in-out;  transition: all .3s ease-in-out;}
.site_select .site_btn.active a:after{transform: rotate(180deg);}
.site_select #site_all{position:absolute;left:0;top:1.85rem; width:100%;background:#fff;border:1px solid #dfdfdf;}
.site_select #site_all ul{text-align:left; border-bottom:0 none;}
.site_select #site_all ul li{}
.site_select #site_all ul li a{color:#666;font-size:0.8rem; display:block; height:37px; line-height:35px; padding:0 10px; }

@media (max-width:1680px){
	#footer {padding: 3.4rem 0 3rem;}
}
@media (max-width:1500px){
	#footer {padding: 3.4rem 1rem 3rem;}
	#footer .inner {width:100%; gap:2rem 5%;}
}
@media (max-width:1440px){
	#footer .inner .ft_con {display: flex;flex-direction: column; gap:1rem;}
	#footer .address {padding-right:0;font-size: 0.88rem;}

	/*----- 관련 사이트 -----*/
	#footer .inner .related{position:relative; right: auto; top:auto;}
	.site_select #site_all {top:auto; bottom:1.85rem;}
}
@media (max-width:768px){	
	#footer .inner{flex-direction: column;  align-items: center; text-align: center;}
	#footer .inner h3 img {width: auto; height: 1.64rem;}
	#footer .inner .related{justify-content: center; margin:0;}
	#footer .address span{display:none;}
	#footer .address .copy{font-size:0.88rem;}

	/*----- 관련 사이트 -----*/
	.site_select .site_btn a {font-size:0.88rem;}
}



/********************************************************
■ 팝업 롤링 추가
********************************************************/
.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:1024px){
	.layerPopup {left:50% !important;  transform:translateX(-50%);}
}
@media (max-width:768px){
	.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;}
}