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

/* ****************** 공통클래스 ********************** */
@media all and (max-width:1520px){
	.area-box{padding:0 15px;}
}
@media all and (max-width:1220px){
	.area{padding:0 15px;}
}
/* ****************** HEADER ********************** */
@media all and ( max-width: 1800px ){
	#gnb > ul > li > a{padding: 0 40px;}
	/* GNB :: 2차 전체메뉴 */
	#gnb > ul > li .gnb-2dep ul{padding-left: 40px;}
}
@media all and ( max-width: 1680px ){
	#gnb > ul > li.gnb1 {margin-left: 40px;}
	#gnb > ul > li > a{padding: 0 30px; font-size: 19px;}
	/* GNB :: 2차 전체메뉴 */
	#gnb > ul > li .gnb-2dep ul{padding-left: 30px;}
	#gnb > ul > li .gnb-2dep ul li a {font-size: 15px;}
}
@media all and (max-width:1536px){
	#headerInner{padding:0 25px;}
	.header-util-box{right:25px;}
	#gnb > ul > li.gnb1 {margin-left: 0;}
	#gnbBg{background:rgba(255,255,255,0.93) url("/images/layout/gnb_bg.jpg") no-repeat -55px 0;}
	#gnbBg .gnb-inner-box {left: 155px;}
}
@media all and ( max-width: 1480px ){
	#gnb > ul > li.gnb1 {margin-left: 0;}
	#gnbBg{background:rgba(255,255,255,0.93) url("/images/layout/gnb_bg.jpg") no-repeat -110px 0;}
	#gnbBg .gnb-inner-box {left: 100px;}
	.header-lang {margin-right: 10px;}
	.header-sns {margin-right: 10px;}
}
@media all and (max-width:1380px){
	#gnb > ul > li.gnb1 {margin-left: -20px;}
	#gnbBg{background:rgba(255,255,255,0.93) url("/images/layout/gnb_bg.jpg") no-repeat -170px 0;}
	#gnbBg .gnb-inner-box {left: 40px;}
	#gnb > ul > li > a{font-size: 18px;}
}
@media all and (max-width:1280px){
	#gnb > ul > li.gnb1 {margin-left: -50px;}
	#gnbBg{background:rgba(255,255,255,0.93) url("/images/layout/gnb_bg.jpg") no-repeat -200px 0;}
	#gnbBg .gnb-inner-box {left: 10px;}
}
@media all and ( max-width: 1220px ){
	#headerInnerWrap{height:80px;}
	#headerInnerWrap{position:fixed; z-index:99;}
	#header .logo{padding:6px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo img{height: 68px;}
	#header.fixed #headerInnerWrap{background-color:#fff; border-bottom:1px solid #eee;}
	
	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right:45px; margin-top: -21.5px;}
	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn, .sitemap-custom-btn, .header-lang{display:none;}
	.header-sns {margin-right: 10px;}

	/* -------- 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:9998;}	
	#gnbM{ 
		display:block; 
		position:fixed; 
		top:0px; 
		right:-82%;
		width:80%; 
		height:100%;  
		max-width:280px; 
		background-color:rgba(0,149,218,0.95); 
		z-index:9999; 
		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;
	}
	/* GNB Mobile :: 레이아웃 */
	.gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:80px; overflow-y:auto;}	/* padding-top : Header 높이값 */
	.header-util-menu-box + .gnb-navigation-wrapper{padding-top:40px;}
	
	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation > li{}
	#navigation > li:first-child{}
	#navigation > li > a {position:relative; display:block; padding:15px 40px; color:#fff; font-size:16px; font-weight:400; text-align: right;}
	#navigation > li.active > a{color:#fff;}
	#navigation > li.has-2dep > a{font-family: 'S-CoreDream-4Regular';}
	#navigation > li.has-2dep.active > a{}
	#navigation > li .gnb-icon{position:absolute; top:50%; right:15px; margin-top:-8px;}
	#navigation > li .gnb-icon i{font-size:16px; font-family: 'S-CoreDream-3Light';}
	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep{display:none; text-align: right;}
	#navigation > li .gnb-2dep > li{height:auto !important;}
	#navigation > li .gnb-2dep > li > a{display:block; color:#fff; font-size:13px; padding:8px 40px; opacity:0.7;filter:Alpha(opacity=70); font-family: 'S-CoreDream-3Light';}
	#navigation > li .gnb-2dep > li > a br{display:none}
	#navigation > li .gnb-2dep > li.on > a{opacity:1.0;filter:Alpha(opacity=100);}
	/* GNB Mobile :: 메뉴영역 ::  3차 */
	#navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:10px; background-color:#aaa; margin:0 10px}
	#navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;}
	#navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}

	
	/* -------- GNB Mobile :: 언어선택 및 회원메뉴 -------- */
	.header-util-menu-box{height:80px;}
	/* 언어선택 */
	.header-util-menu-box .lang-select{padding:19px 10px;}
	.header-util-menu-box .lang-select li{float:left; margin-left:-1px}
	.header-util-menu-box .lang-select li:first-child{margin-left:0;}
	.header-util-menu-box .lang-select li > a{position:relative; display:block; min-width:18px; text-align:center; height:40px; line-height:40px; padding:0 12.5px; color:rgba(255,255,255,0.35); font-size:12px; font-weight:500;}	
	.header-util-menu-box .lang-select li > a:before{position: absolute; top: 50%; margin-top: -4px; left: 0; display: block; content: ''; width: 1px; height: 8px; background-color: rgba(255,255,255,0.35);}
	.header-util-menu-box .lang-select li:first-child > a:before{display: none;}
	.header-util-menu-box .lang-select li.cur{}
	.header-util-menu-box .lang-select li.cur a{color:#fff; z-index:1;}
	
	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn{
		display:block; position:fixed; top:0; right:0; z-index:10000; 
		width: 80px; height: 80px;
		transition:all 0.5s 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 i{font-size: 30px;}
	.nav-open-btn .n-open{display: block; color: #222;}
	.nav-open-btn .open{display: none;}

	.nav-open-btn.active .n-open{display: none;}
	.nav-open-btn.active .open{display: block; color: #fff;}
	
	#header.fixed-header .nav-open-btn i{/* color: #fff; */}
}
@media all and ( max-width: 1024px ){	
	#topMenu01 .side-menu-inner ul li > a br{display:none}
}

@media all and ( max-width: 800px ){
	#header,#headerInnerWrap{height:75px;}
	#header .logo{padding:15px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo img{height:45px;}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right:40px; margin-top: -12.5px;}
	/* Header :: sns버튼 */
	.header-sns{margin-right: 0;}
	.header-sns ul li{margin: 0 5px;}
	.header-sns ul li a, .header-sns ul li a img{height: 25px;}

	/* Header :: GNB(Mobile) */
	.gnb-navigation-wrapper{padding-top:75px} /* padding-top : Header 높이값 */
	#navigation > li > a{font-size:15px;}
	#navigation > li .gnb-2dep > li > a{font-size:13px;}
	.nav-open-btn {top: 7.5px; right: 7.5px; width: 60px; height: 60px;}
	.nav-open-btn i{font-size: 23px;}

	/* Header :: 언어선택 및 회원메뉴 */
	.header-util-menu-box{height:75px;}
	/* 언어선택 */
	.header-util-menu-box .lang-select{padding:10px; }
	.header-util-menu-box .lang-select li > a{height:38px; line-height:38px}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:1220px){
	/* Footer :: 푸터메뉴 */
	.foot-menu{float:none; display:inline-block;}
	#footerTop, #footerBottom{text-align:center;}
	.footer-left-con,.footer-right-con{float:none; width: 100%; text-align:center}
	/* Footer :: 파트너사 리스트 */
	.foot-partner-list li{float:none; display: inline-block; margin:0 17px}
	.foot-partner-list li:first-child{margin-left:17px;}
	.foot-partner-list li img{height:35px;}
	/* Footer :: 푸터로고 */
	.foot-logo{float:none; display:block; padding-right:0; margin-bottom:25px;}
	/* Footer :: 왼쪽정보 */
	.footer-address{float: none; margin-top: 20px;}
}
@media all and (max-width:800px){
	/* -------- Footer :: 상단 -------- */
	#footerTop {padding: 20px 0;}
	/* Footer :: 푸터로고 */
	.foot-logo img{height:73px;}
	/* Footer :: 푸터메뉴 */
	.foot-menu li {padding:0 17px; line-height: 1;}
	.foot-menu li:first-child {padding-left: 17px;}
	.foot-menu li.m-none{display: none;}
	.foot-menu li:before{left:12px}
	.foot-menu li a{font-size:12px;}
	/* Footer :: 파트너사 리스트 */
	.foot-partner-list{margin-top: 20px;}
	.foot-partner-list li{margin:0 10px}
	.foot-partner-list li:first-child{margin-left:10px;}
	.foot-partner-list li img{height:20px;}
	
	/* -------- Footer :: 하단 -------- */
	#footerBottom {padding: 20px 0 30px;}
	/* Footer :: 푸터로고 */
	.foot-logo{margin-bottom: 20px;}
	/* Footer :: 하단정보 */
	.footer-address p{font-size:13px; line-height:22px; padding-bottom: 20px;}
	.footer-address span{display:inline-block;}
	.footer-address span.address{display: block; width: 100%;}
	.footer-address a{display:block;}
	.footer-copyright{font-size:11px; line-height: 1.2; -ms-word-break: keep-all; word-break: keep-all;}
}

/* ****************** SUB LAYOUT ********************** */
@media all and (max-width:1536px){
	.sub-page-controls-btn.sub-prev-page-btn{left: -50px;}
	.sub-page-controls-btn.sub-next-page-btn{right: -50px;}
}
@media all and (max-width:1366px){
	.sub-page-controls-btn.sub-prev-page-btn{left: 15px;}
	.sub-page-controls-btn.sub-next-page-btn{right: 15px;}
}
@media all and (max-width:1520px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual .visual-txt-con{padding:0}
	#topMenu01 .side-menu-inner ul{width: 100%;}
	#topMenu01 .side-menu-inner ul li {width: 15%;}
	#topMenu01 .side-menu-inner ul.sub-menu-product li{width:13.5%;}
	#topMenu01 .side-menu-inner ul li > a > span {padding: 0 15px;}
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content{padding:70px 15px;}
}
@media all and (max-width:1220px){
	#topMenu01 .side-menu-inner ul li {width: 19%;}
}
@media all and (max-width:800px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:215px;}
	#visual .visual-tit{font-size:28px; }
	#visual .visual-sub-txt{font-size:13px; line-height:18px; padding-top:15px}
	/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
	.sub-page-controls-btn{display:none;}
	/*  SUB LAYOUT ::  서브메뉴(스타일1,2) */
	#topMenu01,
	#topMenu02{display:none}
		
	/*  SUB LAYOUT :: 서브메뉴 모바일 (스타일2) */
	#topMenuM02{display:block; position:relative; height:50px; background-color: rgba(29,169,233,0.7); margin-top: -50px; z-index: 2;}
	#topMenuM02 .side-menu-inner{height:50px;}
	#topMenuM02 .menu-location{position:relative;}
	#topMenuM02 .menu-location > .cur-location{position:relative; display:block; height:50px; padding:0 40px 0 20px;}
	#topMenuM02 .menu-location > .cur-location span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:50px; color:#fff; font-weight:400; font-size:14px;}
	#topMenuM02 .menu-location > .cur-location .arrow{position:absolute; top:50%; right:20px; width:20px; height:20px;margin-top:-10px; font-size:20px; color: #fff;}
	#topMenuM02 .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-10px;}
	#topMenuM02 .menu-location .location-menu-con{display:none; padding: 12.5px 0; position:absolute; top:50px; left:0px; width:100%; border-bottom:2px solid #0095da; border-top:0; background-color:#fff; z-index:11;}
	#topMenuM02 .menu-location .location-menu-con li a{display:block; padding:7px 20px; font-size:14px; line-height:1.3; word-break:keep-all;}
	#topMenuM02 .menu-location .location-menu-con li.on{position:relative;}
	#topMenuM02 .menu-location .location-menu-con li.on a{color:#1da9e9;}
	#topMenuM02 .menu-location .location-menu-con li.on a br{display:none}

	/*  SUB LAYOUT :: 상단정보 (공통) */
	#contentInfoCon{margin:0 auto 15px;}
	#contentInfoCon .content-tit{font-size:21px;}
	/*  SUB LAYOUT :: 상단정보(스타일01) */
	#contentInfoCon.content-info-style01{text-align:center; padding-bottom:15px;}
	#contentInfoCon.content-info-style01:before{width:12px; height:2px; margin: 0 auto 15px;}

	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content{padding:35px 15px}
}
@media all and (max-width:480px){
	#contentInfoCon{display: none;}

}

/* ****************** 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}
	.sitemap-wrapper > ul > li{float:none; width:auto; margin-bottom:15px;}
	.sitemap-wrapper > ul > li > h2{font-size:16px; margin:0; margin-bottom:5px;}
	.sitemap-wrapper > ul > li .sitemap-2dep{overflow:hidden; margin:0 -1%; padding:0;}
	.sitemap-wrapper > ul > li .sitemap-2dep li{float:left; position:relative; width:31.33%; margin:1%; word-break:keep-all;}
	.sitemap-wrapper > ul > li .sitemap-2dep li:before{position:absolute; top:0px; left:0; bottom:0px; width:1px; background-color:#eee; content:"";}
	.sitemap-wrapper > ul > li .sitemap-2dep li:nth-child(3n+1){clear:both;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{padding:7px; border:1px solid #eee; font-weight:300; }

}
@media all and ( max-width: 480px ){
	/* 사이트맵  */
	.sitemap-wrapper > ul > li .sitemap-2dep li{width:48%;}
}

@media all and ( max-width: 800px ){
	#visual.sub-visual-project .visual-txt-con,
	#visual.sub-visual-customer .visual-txt-con{height:100% !important}
}