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

/* ****************** 공통레이아웃 ********************** */
@media all and (max-width:1860px){	/* max-width : (area-box width) + 60px */
	.area-box{padding:0 30px; max-width:none;}
}
@media all and (max-width:1406px){ /* max-width : (area width) + 60px */ 
	.area{padding:0 30px; max-width:none;}
}
@media all and (max-width:1024px){
	.area-box,
	.area{padding:0 15px}
}

/* ****************** HEADER ********************** */
@media all and ( max-width: 1860px ){
	/* -------- Header :: Layout -------- */
	#headerInner{padding:0 30px}
	/* -------- Header :: GNB(PC) -------- */
	#gnb {left:30px; right:30px; padding-left:156px;}
	.header-util-box {right:30px;}
	.sitemap-line-btn {margin-right:30px;}
}
@media all and ( max-width: 1024px ){	/* 1024까지 레이아웃유지가 안될시 max-width: 컨텐츠너비+20px */
	#header,#headerInnerWrap{height:80px;}
	#headerInnerWrap{position:fixed; z-index:99;}
	#headerInner{padding:0 15px;}
	#header .logo {padding:28.5px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo img {height:23px;}
	#header.top-fixed #headerInnerWrap{background-color:#fff; border-bottom:1px solid #eee;}
	

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{ padding-right:45px; top:6px; }
	/* -------- Header :: GNB(Pc) -------- */
	#gnb{display:none;}
	.sitemap-line-btn {position:fixed; right:15px; width:35px; height:35px; margin-top:22.5px; margin-right:0;}
	.sitemap-line-btn .line {width:20px; height:2px; margin:3px auto;}
	.sitemap-line-btn.active {background:#1ca7bb;}
	.sitemap-line-btn.active .line:nth-child(1){
	 -webkit-transform: translateY(5px) rotate(45deg);
	  transform: translateY(5px) rotate(45deg);
	}
	.sitemap-line-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-5px) rotate(-45deg);
		  transform: translateY(-5px) rotate(-45deg);
	}
	
	#gnbM {right:-50%; max-width:320px; width:80%;}
	#gnbM .header-lang-list {display:block; position:absolute; right: 70px; top:33px; opacity:0; transition: opacity 0.4s; float:none; margin:0;}
	#gnbM .header-lang-list a {color: #fff;}
	#gnbM .header-lang-list li a:after {background-color:#fff;}
	#gnbM.open .header-lang-list {opacity:1;}
	.gnb-navigation-wrapper {padding-top:80px;}
	.gnb-navigation-inner {/* height:100%; display:flex; align-items:center; margin-top:-80px; */ margin-top:0; height:calc(100% - 240px);}
	#navigation {width:100%; padding:0 30px; margin-top:0; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box; }
	#navigation > li > a {font-size:17px; padding:15px 0;}
	.gnb-navigation-inner .mCSB_inside > .mCSB_container {margin-right:0;}
	.gnb-info-box {left:30px; right: 30px; }
}

@media all and ( max-width: 480px ){
	#header,#headerInnerWrap{height:60px;}
	#header .logo{padding:19.5px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo img{height:21px;}
	.header-util-box{  top:-4px; }
	.sitemap-line-btn {margin-top:12.5px;}
	#gnbM .header-lang-list {top:22px;}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:800px){
	.footer-con {font-size:11px; padding:30px 15px; }
	.footer-con .copyright {margin-top:10px}
}

/* ****************** SUB LAYOUT ********************** */
@media all and (max-width:800px){
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content {font-size:13px;}
	#content.board {padding:100px 0;}
	.cm-board-top-container {margin:0 0 30px;}
	.cm-board-top-container .tit {font-size:40px;}
}
@media all and ( max-width: 480px ){

}
/* ****************** MODAL LAYERPOPUP ********************** */
@media all and ( max-width: 800px ){
	/* modal layer content */
	.footer-modal-content{width:auto; margin:50px 15px}
	.footer-modal-content h1{font-size:18px; text-align:left; padding:0 30px 15px 0}
	.modal-close-btn{right:-3px; top:-3px;}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
}