@charset "utf-8";
/* *******************************************************
 * filename : layout_responsive.css
 * description : 전체 레이아웃 반응형 CSS
 * date : 2019-02-01
******************************************************** */

/* ****************** 공통클래스 ********************** */
@media all and (max-width:1620px){
	.area-box{padding:0 15px;}	
}
@media all and (max-width:1220px){
	.area{padding:0 15px;}
}
/* ****************** HEADER ********************** */
@media all and ( max-width: 1440px ){
	
}
@media all and ( max-width: 1220px ){
	#header, #headerInnerWrap, #headerInner{height:80px;}
	#headerInnerWrap{position:fixed; z-index:9998; background-color: rgba(21,23,32,0.7);}
	.sub-wrap #headerInnerWrap{background-color: transparent;}
	#header .logo{padding:28px 0;}	/* padding값 적절히 바꿔주세요 */
	#header.fixed #headerInnerWrap{background-color: rgba(21,23,32,0.7);}
	#header .logo{padding:15px 0;}

	/* -------- Header :: GNB(Pc) -------- */
	#gnb{display:none;}
	.gnb-overlay-bg{display:none}
	/* -------- Header :: GNB(Mobile) -------- */
	.gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:101;}	
	#gnbM{ 
		display:block; 
		overflow-y:auto; 
		position:fixed; 
		top:-102%; 
		left:0;
		width:100%; 
		height:100%;  
		/* max-width:280px; */ 
		background-color:#151720; 
		z-index:999; 
		box-shadow:-2px 1px 11px rgba(0, 0, 0, .3);
		transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
		-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);  
		-oz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
		-ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);		/* gnb OPEN 속도 */
		visibility:hidden;
	}
	#gnbM.open{
		top:0; 
		visibility:visible;
	}
	#gnbM #navigation{margin-top:80px;}	/* Header 높이값 */
	/* GNB Mobile :: 1차 */
	#gnbM #navigation > li{border-bottom:1px solid rgba(255,255,255,0.2);}
	#gnbM #navigation > li > a {position:relative; display:block; padding:28px 0; color:#fff; font-size:16px; font-weight: 400; text-align: center;}
	#gnbM #navigation > li.active > a{color:#fff;}
	
	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn{
		display:block; position:fixed; top:25px; right:15px; z-index:9998; 
		height:30px;
		transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
		-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);  
		-oz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
		-ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
	}
	.nav-open-btn .line{
		display:block; width:28px; height:2px; background-color:#fff; border-radius:5px; margin: 4px auto;
		-webkit-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
	}
	.nav-open-btn.active .line{background-color:#fff;}
	.nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4){opacity: 0;}
	.nav-open-btn.active .line:nth-child(1){
		 -webkit-transform: translateY(6px) rotate(45deg);
		  -ms-transform: translateY(6px) rotate(45deg);
		  -o-transform: translateY(6px) rotate(45deg);
		  transform: translateY(6px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-6px) rotate(-45deg);
		  -ms-transform: translateY(-6px) rotate(-45deg);
		  -o-transform: translateY(-6px) rotate(-45deg);
		  transform: translateY(-6px) rotate(-45deg);
	}
	
	#header.fixed-header .nav-open-btn .line{background-color:#fff}
}
@media all and ( max-width: 800px ){
	#header, #headerInnerWrap, #headerInner{height:60px;}
	#header.fixed, #header.fixed #headerInnerWrap, #header.fixed #headerInner{height:60px;}
	#header.fixed .logo {padding-top: 11.5px;}
	#header .logo{padding:11.5px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo img{height:37px;}

	/* Header :: 사이트맵, 네비게이션 버튼 */
	.nav-open-btn{top:15px; margin-top:0;}
	.nav-open-btn .line{width:20px; height:2px;}
	.nav-open-btn.active .line:nth-child(1){
		 -webkit-transform: translateY(6px) rotate(45deg);
		  -ms-transform: translateY(6px) rotate(45deg);
		  -o-transform: translateY(6px) rotate(45deg);
		  transform: translateY(6px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-6px) rotate(-45deg);
		  -ms-transform: translateY(-6px) rotate(-45deg);
		  -o-transform: translateY(-6px) rotate(-45deg);
		  transform: translateY(-6px) rotate(-45deg);
	}
	/* Header :: GNB(Mobile) */
	#gnbM #navigation{margin-top:60px;}	/* Header 높이값 */
	#gnbM #navigation > li > a {font-size:15px;}
	#gnbM #navigation > li.on.has-2dep.active > a{/* padding-bottom: 15px; */}

	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep{display:none; padding-bottom: 15px; text-align: center;}
	#navigation > li .gnb-2dep > li{height:auto !important;}
	#navigation > li .gnb-2dep > li > a{display:block; color:#fff; font-size:13px; font-weight: 300; padding:10px 15px; opacity: 0.7;}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:800px){
	#footer{text-align: center;}
	#footerInner{padding: 13px 15px;}
	.footer-copyright{font-size:13px; -ms-word-break: keep-all; word-break: keep-all; line-height: 1.4;}
}

/* ****************** SUB LAYOUT ********************** */
@media all and (max-width:1220px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual .visual-txt-con{padding:0 15px;}
}

@media all and (max-width:800px){
	.location {padding-top: 30px; padding-bottom: 15px;}
	.location li{font-size:11px;}
	.location li i{font-size:16px; margin-top:-2px;}
	.location li:before{margin:0px 6px; font-size:11px;}
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:180px;}
	#visual .visual-txt-con {padding: 0 40px;}
	#visual .visual-tit{padding-top: 30px; font-size:25px;}
	#visual .visual-img img{width: 800px; margin-left: -400px; height: 180px;}
	#visual .visual-img img.pc-img{display: none;}
	#visual .visual-img img.m-img{display: block;}

	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content{padding-bottom:50px}
}

/* ****************** MODAL LAYERPOPUP ********************** */
@media all and ( max-width: 800px ){
	/* modal layer content */
	.footer-modal-content h1{height:46px; line-height:46px; font-size:18px; text-align:left; padding:0 15px}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
	/* 사이트맵  */
	.sitemap-wrapper{padding:15px}
}