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


/* ****************** 공통클래스 ********************** */
@media all and (max-width:1720px){
	.area-box{padding:0 15px;}
}
@media all and (max-width:1315px){
	.area02{padding:0 15px;}
}
@media all and (max-width:1220px){
	.area{padding:0 15px;}
}
@media all and (max-width:800px){
	html{font-size:18px;}
}
@media all and (max-width:480px){
	html{font-size:13px;}
}

/* ****************** HEADER ********************** */
@media all and (max-width:1620px){
	/* -------- Header :: UTIL BOX -------- */
	/* Header :: 유저메뉴 */
	.user-menu-box li{margin-left:8px;}
	.user-menu-box li a span{display:none;}
	/* Header :: 언어선택 */
	.header-lang{margin-left:15px}

	/* -------- Header :: GNB(PC) -------- */
}
@media all and ( max-width: 1440px ){
	/* -------- Header :: GNB(PC) -------- */
	#header .logo{padding:18px 0 0 15px;}
}
@media all and ( max-width: 1220px ){
	#header, #headerInnerWrap, #headerInner{height:90px; }
	#headerInnerWrap{position:fixed; border-bottom:1px solid rgba(255,255,255,0.15);}
	#header.fixed #headerInnerWrap{background-color:#333; border-bottom-color:transparent;}
	#header .logo{padding:24px 0;}
	#header .logo img {height:43.4px;}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right:58px;}
	/* Header :: 언어선택 */
	.header-lang a{line-height:90px;}

	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn, .sitemap-custom-btn{display:none;}

	/* -------- 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:0px; 
		right:-75%;
		width:75%; 
		height:100%;  
		background-color:#fff; 
		z-index:999; 
		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{
		right:0px; 
		visibility:visible;
	}

	/* User Menu Mobile */
	.user-menu-mobile{overflow:hidden; padding:35px 25px; margin-right:70px}
	.user-menu-mobile li{float:left; width:48%; margin-right:2%;}
	.user-menu-mobile li a{display:block; text-align:center; height:50px; line-height:50px; color:#fff; font-size:15px; background-color:#000;}
	.user-menu-mobile li a i{margin:-2px 5px 0 0; font-size:15px;}
	#gnbM #navigation{margin-top:90px}	/* Header 높이값 */
	/* GNB Mobile :: 1차 */
	#gnbM #navigation > li{border-bottom:1px solid rgba(0,0,0,0.2);}
	#gnbM #navigation > li > a {position:relative; display:block; padding:15px 25px; color:#333; font-size:22px;  }
	#gnbM #navigation > li.active > a{color:#00a79d;}
	#gnbM #navigation > li.has-2dep > a{}
	#gnbM #navigation > li.has-2dep.active > a{}
	#gnbM #navigation > li .gnb-icon{position:absolute; top:50%; right:25px; margin-top:-10px; color:#00a79d}
	#gnbM #navigation > li .gnb-icon i{font-size:17px;}
	/* GNB Mobile :: 2차 */
	#gnbM #navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#eee; }
	#gnbM #navigation > li .gnb-2dep > li{}
	#gnbM #navigation > li .gnb-2dep > li > a{display:block; color:#333; font-size:18px; padding:10px 25px; }
	#gnbM #navigation > li .gnb-2dep > li.on > a{}
	/* GNB Mobile :: 3차 */
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:10px 20px; background-color:#aaa; box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .3);}
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:12px; color:#fff;}
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}
	
	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn{
		display:block; position:fixed; top:0;  right:0; z-index:9998; 
		height:90px;
		width:90px;
		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);
		-webkit-animation: Gradient 15s ease infinite;
		-moz-animation: Gradient 15s ease infinite;
		animation: Gradient 15s ease infinite;
		outline:none;
	}
	.nav-open-btn.active{background:none;}
	.nav-open-btn .line{
		display:block; width:40px; height:2px; background-color:#fff; margin: 6px 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:#333;}
	.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(8px) rotate(45deg);
		  -ms-transform: translateY(8px) rotate(45deg);
		  -o-transform: translateY(8px) rotate(45deg);
		  transform: translateY(8px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-8px) rotate(-45deg);
		  -ms-transform: translateY(-8px) rotate(-45deg);
		  -o-transform: translateY(-8px) rotate(-45deg);
		  transform: translateY(-8px) rotate(-45deg);
	}
	
}
@media all and ( max-width: 480px ){
	#header, #headerInnerWrap, #headerInner{height:60px;}
	#header .logo{padding:16.5px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo img{height:28px;}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right:35px;}
	/* Header :: 언어선택 */
	.header-lang a{line-height:62px; font-size:11px;}

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

}

/* ****************** FOOTER ********************** */
@media all and (max-width:1366px){
	.footer-menu {display:none;}
	.footer-address-box {float:none;}
	.footer-top-box {float:left; width:40%;}
	.footer-bottom-box {float:right; width: 60%; padding:0 20px; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;  }
	.footer-bottom-box br {display:none;}
}
@media all and (max-width:1220px){
}
@media all and (max-width:800px){
	#footer {word-break:keep-all;}
	.footer-logo {margin:0 0 20px;}
	.footer-logo img {height: 40px;}

	.footer-top-box {float:none; width:100%; text-align:center;}
	.footer-btn-list {display:inline-block;}
	
	.footer-address-box {padding:30px 0;}
	.footer-address  {font-size: 12px; line-height: 24px;}
	.footer-bottom-box {float:none; width:100%; padding:0; text-align:center; margin-top:20px;}
	.footer-tel {font-size:14px; line-height: 26px; margin:0 0 15px;}
	.footer-tel span {margin-right:7px;}
	
}
@media all and (max-width:480px){
	/* Footer :: 메뉴 */
	.footer-btn-list {width:100%; margin:0 -0.5%;}
	.footer-btn-list li {width: 32%; margin:0 0.5%}
	.footer-btn a{font-size:12px; width:auto;}
}

/* ****************** SUB LAYOUT ********************** */
@media all and ( min-width: 1920px ){
	/*  SUB LAYOUT :: 비주얼 */
	.visual-img-con{background-size:cover !Important;}
}
@media all and ( max-width: 1440px ){
	/*  SUB LAYOUT :: 비주얼 */
	
}
@media all and (max-width:1220px){
	/* SUB LAYOUT :: 비주얼 */
	#visual{height:390px;}
	.visual-online-inquiry-box{display:none;}
	/*  SUB LAYOUT :: 서브메뉴(스타일2) */
	.side-menu-inner ul{padding:0 10px;}
	.side-menu-inner ul li{padding:0 20px;}
	.side-menu-inner ul li a{font-size:13px;}
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content{padding:50px 15px 100px;}
}

@media all and (max-width:800px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual .visual-img-con{ background-size:cover !important;}
	#visual .visual-tit {font-size: 21px;}
	#visual .visual-sub-txt{font-size:12px; line-height: 1.2; letter-spacing:10px;}
	/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
	.sub-page-controls-btn .sub-page-name{display:none}
	/*  SUB LAYOUT :: 서브메뉴(스타일2) */
	#topMenuConPC{display:none;}
	#topMenuConM{display:block;  position:relative; z-index:12; height:40px;margin-top:-20px; }
	#topMenuConM #topMenu{border-radius:30%;}
	#topMenuConM .menu-location{position:relative; float:left; width:50%;}
	#topMenuConM .menu-location.location1:after{position:absolute; top:0px; right:0px; width:1px; height:100%; background-color:#f4f4f4; content:"";}
	#topMenuConM .menu-location > .cur-location{position:relative; display:block; height:40px; background-color:#fff; padding-left:25px; z-index:12;}
	#topMenuConM .menu-location.location1 > .cur-location{border-radius:50px 0 0 50px}
	#topMenuConM .menu-location.location2 > .cur-location{border-radius:0 50px 50px 0}
	#topMenuConM .menu-location > .cur-location span{line-height:40px; color:#1b1b1b; font-weight:400; font-size:14px; letter-spacing:-0.75px;}
	#topMenuConM .menu-location > .cur-location .arrow{position:absolute; top:50%; right:10px; width:20px; height:20px;margin-top:-10px; font-size:20px; color:#000;}
	#topMenuConM .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-10px;}
	#topMenuConM .menu-location .location-menu-con{display:none; position:absolute; padding:30px 0; top:20px; /* left:-1px; width:calc(100% - 1px); */ width:100%;background-color:#fff; z-index:11; border-radius:0 0 50px 50px }
	#topMenuConM .menu-location .location-menu-con li a{display:block; padding:10px 25px; color:#1b1b1b; font-size:15px; letter-spacing:-0.75px;}
	#topMenuConM .menu-location .location-menu-con li.on{position:relative;}
	#topMenuConM .menu-location .location-menu-con li.on a{color:#00a79d; font-weight:500;}
	#topMenuConM .menu-location .location-menu-con li.on a:before{content:""; position:absolute; top:50%; left:10px; width:7px; height:3px; margin-top:-1px; background-color:#00a79d}
	#topMenuConM .sub-link-btn{float:right; height:47px; line-height:47px; width:150px; text-align:center; background-color:#fff; color:#1b1b1b; font-size:16px; font-weight:300; border-left:1px solid #dedede; border-right:1px solid #dedede; letter-spacing:-0.75px;}
	#topMenuConM .sub-link-btn i{margin:-2px 5px 0 0}
	/*  SUB LAYOUT :: 상단정보 (공통) */
	#contentInfoCon {padding:0 0 80px 0;}
	#contentInfoCon .content-tit {font-size:17px}
	#contentInfoCon .content-tit:before {height: 20px; margin-left: -0.5px;}
	#contentInfoCon .content-tit:after {width:10px; height:10px; margin-left: -5px; border-width:2px; top:60px;}
}
@media all and (max-width:480px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:195px;}
	#visual:before {display:none;}
	#visual .visual-txt-con{margin-top:0;}
	#visual .visual-tit{padding-top:0;padding-bottom:12px;}
	
	/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
	.sub-page-controls-btn{width:30px; height:30px; line-height:28px; margin-top:-15px;}
	/*  SUB LAYOUT :: 서브메뉴 */
	#topMenuConM{height:40px; margin-top:-20px }
	#topMenuConM .menu-location > .cur-location{height:40px; padding-left:15px;}
	#topMenuConM .menu-location > .cur-location span{line-height:40px; font-size:12px;}
	#topMenuConM .menu-location .location-menu-con{top:20px; padding:25px 0 10px ; border-radius:0 0 30px 30px}
	#topMenuConM .menu-location .location-menu-con li a{font-size:12px;}
	/*  SUB LAYOUT :: 상단정보 (공통) */
	#contentInfoCon .content-tit:before{height:24px; top:30px;}
	#contentInfoCon .content-tit:after{width:12px; height:12px; margin-left:-6px; top:52px; background-size:12px 12px;}
}
/* ****************** 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}
}