@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;}
	.area-sub {max-width: none; width: 100%; float: none;}
}
/* ****************** HEADER ********************** */
@media all and ( max-width: 1440px ){
	/* -------- Header :: GNB(PC) -------- */
	#gnb > ul > li > a{font-size:16px;}
	#gnb > ul > li .gnb-2dep ul li a{font-size:13px;}
}
@media all and ( max-width: 1220px ){
	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right: 0; right: auto; left: 15px;}
	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn, .sitemap-custom-btn{display:none;}

	/* -------- Header :: GNB(Pc) -------- */
	#gnb{position: absolute; top: 130px; left: 15px; width: calc(100% - 30px);}
	.gnb-overlay-bg{display:none;}
	/* -------- Header :: GNB(Mobile) -------- */
	.gnb-overlay-bg-m{display:none; position:fixed; top:85px; left:0; width:100%; height:calc(100% - 85px); background:rgba(0,0,0,0.5); z-index:101;}	
	#gnbM{ 
		display:block; 
		overflow-y:auto; 
		position:fixed; 
		top:85px; 
		right:-88%;
		width:87%; 
		height:calc(100% - 85px);  
		max-width:350px; 
		background-color:#fff; 
		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{
		right:0px; 
		visibility:visible;
	}
	#gnbM #navigation{}	/* Header 높이값 */
	/* GNB Mobile :: 1차 */
	#gnbM #navigation > li{background-color: #fff;}
	#gnbM #navigation > li > a {position:relative; display:block; padding:20px 25px; color:#555; font-size:20px; margin: 0 15px; border-top: 1px solid #ddd;}
	#gnbM #navigation > li:first-child a{border-top: none;}
	#gnbM #navigation > li.active{background-color: #f5f5f5;}
	#gnbM #navigation > li.active > a{border-top-color: #f5f5f5;}
	#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:-8px;}
	#gnbM #navigation > li .gnb-icon i{font-size:16px; color: #af222b;}
	/* GNB Mobile :: 2차 */
	#gnbM #navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#fff;}
	#gnbM #navigation > li .gnb-2dep > li{}
	#gnbM #navigation > li .gnb-2dep > li > a{display:block; color:#555; font-weight: 400; font-size:16px; padding:10px 30px;}
	#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;}
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#555;}
	#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:absolute; top:50px;  right:15px; z-index:9998; 
		width: 32px; height:32px;
		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:18px; 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(7px) rotate(45deg);
		  -ms-transform: translateY(7px) rotate(45deg);
		  -o-transform: translateY(7px) rotate(45deg);
		  transform: translateY(7px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-7px) rotate(-45deg);
		  -ms-transform: translateY(-7px) rotate(-45deg);
		  -o-transform: translateY(-7px) rotate(-45deg);
		  transform: translateY(-7px) rotate(-45deg);
	}
	
	#header.fixed-header .nav-open-btn .line{background-color:#fff}
}
@media all and ( max-width: 1220px ){	
	#header{background: #af222b;}
	#headerInnerWrap{height:85px;}
	#headerInner{height:85px;}
	/* 모바일 로고변경 */
	#header .logo {padding: 26.5px 0;}
	#header .logo img.pc-logo{display: none;}
	#header .logo img.m-logo{display: block; height: 32px;}
	/* 모바일 네비 */
	.nav-open-btn {top: 50%; margin-top: -16px;}
	/* 창업문의 이미지 */
	.qna-img{display: none;}
	/* gnb */
	#gnb{display: none;}
	/* 모바일 헤더 하단 이미지 */
	.m-hdr-img{text-align: center; margin-top: 125px; margin-bottom: 40px;}
	.m-hdr-img span{display: inline-block; height: 45px;}
	.m-hdr-img span img{height: 100%;}
}
@media all and ( max-width: 800px ){
	#headerInnerWrap, #headerInner{height:60px;}
	#header .logo{padding:19.5px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo img.m-logo{height:22.5px;}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right:28px;}
	/* Header :: 검색버튼 */
	.header-search-box{margin-left:5px;}
	.header-search-inner{position:fixed; left:0; top:60px; height:30px; width:calc(100% - 60px); padding:10px 45px 10px 15px; background-color:#444; text-align:left;}
	.header-search-inner .header-search-inner-box{background-color:#fff; -webkit-border-radius:15px;-moz-border-radius:15px; -o-border-radius:15px;border-radius:15px;}
	.header-search-inner .header-search-word{text-indent:10px; color:#555;}
	.header-search-inner .header-search-word::placeholder{color:#555}
	.header-search-inner .header-search-btn{top:10px;right:50px;}
	.header-search-inner .header-search-btn i{color:#333;}
	.header-search-inner .header-search-close-btn{top:50%; right:8px; margin-top:-16px; border:0; background:none;}
	/* Header :: 언어선택 */
	.header-lang{width:60px; margin-left:5px}
	.header-lang strong{display:none;}
	.header-lang > ul{border-color:#ccc;}
	.header-lang > ul > li > a{padding:0; text-align:center;}
	/* 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) */
	.gnb-overlay-bg-m{top:60px; height:calc(100% - 60px);}	
	#gnbM{top:60px; height:calc(100% - 60px);}
	#gnbM #navigation{}	/* Header 높이값 */
	#gnbM #navigation > li > a {font-size:15px;}
	#gnbM #navigation > li .gnb-2dep > li > a{font-size:13px;}
}
@media all and (max-width:480px){
	#gnbM{max-width:280px;}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:1020px){
	#footerTop{padding:35px 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
	#footerTop, #footerBottom{text-align:center;}
	.footer-left-con,.footer-right-con{float:none;}

	/* Footer :: 푸터메뉴 */
	.foot-menu{float:none;}
	.foot-menu li{float:left; padding-left:50px; line-height: 1;}
	.foot-menu li a{font-size:14.5px;}

	/* -------- FOOTER :: 하단 -------- */
	#footerBottom{padding:25px 0 35px;}
	#footerBottom > .area{position: relative;}
	/* Footer :: 왼쪽정보 */
	.footer-address p{text-align: left; font-size:14.5px; line-height:1.6; padding-bottom:25px; border-bottom: 1px solid rgba(255,255,255,0.1);}
	.footer-address p br{display: none;}
	.footer-address span, .footer-address a{display: block; margin-right:0;}
	.footer-address span:nth-child(1),.footer-address span:nth-child(2){display: inline-block;}
	.footer-address span:nth-child(1){margin-right:15px;}
	.footer-address a{color:inherit}

	.footer-copyright{float: none; font-size:14.5px; text-align: center; line-height: 1.6;}
	.footer-copyright br{display: block;}

	/* Footer :: 푸터로고 */
	.foot-logo{position: static; margin: 35px auto 15px;}
	.foot-logo img{height: 29px;}

	/* Footer :: SNS 리스트 */
	.foot-sns-menu{display: none;}

	/* Footer :: 패밀리사이트 */
	.family-site-box{display: none;}
}
@media all and (max-width:800px){
	#footerTop{padding:10px 0;}

	/* Footer :: 푸터메뉴 */
	.foot-menu{text-align: left;}
	.foot-menu br{display: block;}
	.foot-menu li{float: none; display: inline-block; padding-left:30px;}
	.foot-menu br + li{padding-left: 0;}
	.foot-menu br + li ~*{margin-top: 10px;}
	.foot-menu li a{font-size:12px;}

	/* -------- FOOTER :: 하단 -------- */
	#footerBottom{padding:10px 0 20px;}
	#footerBottom > .area{position: relative;}
	/* Footer :: 왼쪽정보 */
	.footer-address p{font-size:12px; line-height:1.6; padding-bottom:10px;}
	.footer-address span:nth-child(1){margin-right:10px;}
	.footer-address a{color:inherit}

	.footer-copyright{font-size:12px; line-height: 1.6;}
	/* Footer :: 푸터로고 */
	.foot-logo{margin: 20px auto 10px;}
	.foot-logo img{height: 20px;}
}

/* ****************** SUB LAYOUT ********************** */
@media all and (max-width:1220px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:210px;}
	#visual .visual-txt-con{width: calc(100% - 30px);}
	#visual .visual-tit{font-size:17px; padding-bottom: 0;}
	/*  SUB LAYOUT :: 비주얼 :: bg텍스트 */
	#visual .visual-txt-con-bg{display: none;}
	/*  SUB LAYOUT ::  서브메뉴 */
	#sideMenu,
	#sideMenuList{display:none;}
	#sideMenuM{display:block; position:relative; height:60px; background-color: #333; margin: 0 -15px;}
	#sideMenuM .menu-location{position:relative; width: 100%;}
	#sideMenuM .menu-location > .cur-location{position:relative; display:block; height:60px;}
	#sideMenuM .menu-location > .cur-location span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:60px; color:#fff; font-weight:500; font-size:14px; padding-left: 15px;}
	#sideMenuM .menu-location > .cur-location .arrow{position:absolute; top:50%; right:10px; width:30px; height:30px; margin-top:-15px; font-size:30px; color: #fff;}
	#sideMenuM .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-15px;}
	#sideMenuM .menu-location .location-menu-con{display:none; position:absolute; top:60px; left:-1px; width:calc(100% - 1px); border:1px solid #ddd; background-color:#fff; z-index:11; padding: 5px 0;}
	#sideMenuM .menu-location .location-menu-con li a{display:block; padding:10px; font-size:14px;}
	#sideMenuM .menu-location .location-menu-con li.on{position:relative;}
	#sideMenuM .menu-location .location-menu-con li.on a{padding-left:25px; color:#af222b; font-weight:500;}
	#sideMenuM .menu-location .location-menu-con li.on a:before{content:""; position:absolute; top:50%; left:10px; width:7px; height:3px; margin-top:-2px; background-color:#af222b}

	/*  SUB LAYOUT :: 상단정보 */
	#contentInfoCon{display: none;}

	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content{padding-bottom:50px}
}
@media all and (max-width:800px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:150px; background: none !important; position: relative;}
	#visual .m-visual-bg{display: block; width: 100%; height: 100%;}
	#visual .m-visual-bg img{width: 100%; height: 100%; -webkit-background-size: cover; background-size: cover;}
	#visual .visual-tit{display: none;}
	#visual .visual-tit-m{display: block; font-size: 25px; color: #333;}
	#visual .visual-txt-con{position: absolute; top: 0; left: 0;}
}

/* ****************** 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}
}