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

/* ****************** 공통레이아웃 ********************** */
@media all and (max-width:1770px){	/* max-width : (area-box width) + 20px */
	.area{padding:0 30px;}
}
@media all and (max-width:1680px){
	.sub-area{ padding:0 30px;} 
}
@media all and (max-width:1220px){
	.area{padding:0 30px;}
}
@media all and (max-width:1024px){
	.area-box,
	.area,
	.sub-area{padding:0 15px}
}
@media all and (max-width:1024px){
	#wrap.sub-wrapper{margin-top:75px}
}
@media all and (max-width:480px){
	#wrap.sub-wrapper{margin-top:66px}
}

/* ****************** HEADER ********************** */
@media all and ( max-width: 1366px ){
	/* -------- Header :: Layout -------- */
	/* -------- Header :: GNB(PC) -------- */
	#gnb > ul > li > a{font-size:18px; padding:0 40px}
	#gnb > ul > li .gnb-2dep ul li a{font-size:14px; }
}
@media all and (max-width:1220px){
	
}
@media all and ( max-width: 1024px ){
	.sub-wrapper #header{height:74px; border-bottom:1px solid #e5e5e5; background-color:#fff;}
	#headerInner{width:auto; height:auto; padding:20px 15px;}
	#headerInner .menu-open-btn{margin-left:15px;}
	/* Fixed */
	#headerInner .logo a{transition:all .2s ease-out;}
	#headerInner .menu-open-btn{margin-top:4px}
	#headerInner .menu-open-btn .line{margin:4px 0}
	.sub-wrapper #headerInner .logo a{background-image:url(../images/common/logo.svg); background-size:auto 34px; }
	.sub-wrapper #headerInner .menu-open-btn .line{background:#8a847e;}
	#header.fixed{border-bottom-color:transparent; background-color:transparent}
	#header.fixed .logo a{width:0;}
	#header.fixed .menu-open-btn .line{background-color:#bbb;}

	/* -------- Header :: GNB -------- */
	#gnb{min-height:auto; overflow-y:auto; overflow-x:hidden;}
	.sub-wrapper #gnb{transform:translateX(-100%)}
	.gnb-wrapper{}
	#gnb.open{transform:translateX(0)}
	.gnb-dim-bg{display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:9996;}	
}
@media all and ( max-width: 480px ){
	.sub-wrapper #header{height:65px}
	#headerInner .logo a{width:108px; height:25px; background-size:108px 25px;}
	.sub-wrapper #headerInner .logo a{background-size:auto 25px;}
	#headerInner .menu-open-btn{margin-top:2px}
	#header.fixed .menu-open-btn{margin-left:5px;}

	/* -------- Header :: GNB -------- */
	#gnb{width:180px; transition: all .2s ease-out 0s; }
	#gnb .gnb-logo{height:74px; line-height:74px; text-align:left; padding:0 15px;}
	#gnb .gnb-logo img{width:108px;}
	/* GNB :: Menu */
	#gnb .gnb-menu-list{margin:2vh 0 40px}
	#gnb .gnb-menu-list > li{}
	#gnb .gnb-menu-list > li > a{height:34px; line-height:34px; font-size:15px; padding:0 15px;}

	/* -------- GNB :: 하단 Util Box -------- */
	.gnb-util-box{padding:15px;}
	/* 서브메뉴 */
	.gnb-util-sub-list{margin-bottom:4vh}
	.gnb-util-sub-list li a{font-size:12px;}
	/* 언어선택 */
	.gnb-util-language-list{margin-bottom:4vh}
	.gnb-util-language-list li a{font-size:13px;}
	/* 검색영역 */
	.gnb-util-search-box{margin-bottom:5vh}
	.gnb-util-search-box label i{font-size:20px}
	.gnb-util-search-inner{padding-left:25px;}
	.gnb-util-search-box input{height:25px;}
	.gnb-util-search-box .gnb-search-btn i{font-size:20px;}
	/* SNS리스트 */
	.gnb-util-sns-list li{margin-left:15px;}
	.gnb-util-sns-list li a{font-size:20px;}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:1024px){
	/* -------- FOOTER :: 레이아웃 -------- */
	.footer-left-con,.footer-right-con{float:none; }
	/* -------- FOOTER :: 상단 -------- */
	#footerTop{padding:25px 0; margin:0 15px;}
	#footerTop .area{padding:0;}
	/* Footer :: 푸터메뉴 */
	.foot-menu{float:none; margin-bottom:20px}
	/* Footer :: 무단사용/배포금지 */
	.footer-caution-txt{line-height:1.5;}
	/* -------- FOOTER :: 하단 -------- */
	#footerBottom{padding:25px 0;}
}

@media all and (max-width:800px){
	/* -------- Footer :: 상단 -------- */
	/* Footer :: 푸터메뉴 */
	.foot-menu li {padding-left:25px}
	.foot-menu li a{font-size:12px;}
	/* Footer :: 무단사용/배포금지 */
	.footer-caution-txt{font-size:10px;}
	/* -------- Footer :: 하단 -------- */
	/* Footer :: 왼쪽정보 style02 */
	.footer-address-list dl{font-size:12px;}
	/* Footer :: Copyright */
	.footer-copyright{font-size:10px;}
	/* Footer :: 푸터로고 */
	.foot-logo img{height:20px;}
	.footer-right-con .foot-logo{text-align:left; padding:25px 0 15px;}
	/* Footer :: 오른쪽정보 :: 파트너리스트 */
	.footer-partner-list{text-align:left;}
	.footer-partner-list img{height:15px;}
}

/* ****************** SUB LAYOUT ********************** */
@media all and (max-width:1366px){
	#topMenu .side-menu-inner ul li > a{font-size:16px;}
}
@media all and (max-width:1024px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual .visual-txt-con{padding:0}
	#visual .visual-tit{font-size:50px}
	/*  SUB LAYOUT :: 서브메뉴 */
	#topMenu,
	#topMenu .side-menu-inner{height:60px;}
	#topMenu .sub-area{padding:0; margin-left:-1px}
	#topMenu .side-menu-inner ul li > a{font-size:14px; height:59px;}
	#topMenu .side-menu-inner ul li > a > span{padding:0 5px}
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#middleArea{padding:6% 0 10%;}
}
@media all and (max-width:800px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual{display:none;}
	#topMenu{display:none;}
	/*  SUB LAYOUT :: 서브메뉴 모바일 (1차메뉴) */
	#topMenuM{display:block; position:relative; /* margin-bottom:6% */}
	#topMenuM .side-menu-inner{height:74px; border-bottom:1px solid #ddd; }
	#topMenuM .menu-location{position:relative;}
	#topMenuM .menu-location > .cur-location{position:relative; display:block; width:100%; text-align:left; height:100%; padding:0 30px 0 15px; }
	#topMenuM .menu-location > .cur-location span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:74px; color:#000;font-size:20px; font-weight:700;}
	#topMenuM .menu-location > .cur-location .arrow{position:absolute; top:50%; right:20px; width:20px; height:20px;margin-top:-12px; font-weight:700; font-style:none;}
	#topMenuM .menu-location > .cur-location .arrow:before{font-family: xeicon; font-size:24px; line-height:1; content: "\e942"; color:#000; font-style:normal;}
	#topMenuM .menu-location.open > .cur-location .arrow:before{ content: "\e945"; }
	#topMenuM .menu-location .location-menu-con{display:none; position:absolute; top:74px; left:0px; width:calc(100% - 2px); border:1px solid #ddd; border-top:0; background-color:#fff; z-index:11; padding:0 0 10px 0; }
	#topMenuM .menu-location.location1 .location-menu-con{width:calc(100% - 1px)}
	#topMenuM .menu-location .location-menu-con li a{display:block; padding:7px 15px; font-size:14px; line-height:1.5; word-break:keep-all;}
	#topMenuM .menu-location .location-menu-con li.on{position:relative;}
	#topMenuM .menu-location .location-menu-con li.on a{position:relative; color:#645c54; font-weight:700; padding-left:30px;}
	#topMenuM .menu-location .location-menu-con li.on a:before{
		position:absolute; 
		top:50%;
		left:15px;
		width:7px;
		height:11px;
		background-color:#62bb46;
		transform:skew(-30deg);
		margin-top:-5px;
		content:"";
	}

	/*  SUB LAYOUT :: 서브메뉴 모바일 (2차메뉴) */
	#topMenuM2dep{display:block; position:relative; padding:6% 0; border-bottom:1px solid #ddd;}
	#topMenuM2dep .side-menu-inner{position:relative; height:49px; margin:0 15%;  border:1px solid #ddd; }
	#topMenuM2dep .menu-location{position:relative;}
	#topMenuM2dep .menu-location > .cur-location{position:relative; display:block; width:100%; text-align:left; height:100%; padding:0 30px 0 15px; }
	#topMenuM2dep .menu-location > .cur-location span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:49px; color:#000;font-size:15px; font-weight:500;}
	#topMenuM2dep .menu-location > .cur-location .arrow{position:absolute; top:50%; right:20px; width:20px; height:20px;margin-top:-12px; font-weight:700; font-style:none;}
	#topMenuM2dep .menu-location > .cur-location .arrow:before{font-family: xeicon; font-size:24px; line-height:1; content: "\e942"; color:#000; font-style:normal;}
	#topMenuM2dep .menu-location.open > .cur-location .arrow:before{ content: "\e945"; }
	#topMenuM2dep .menu-location .location-menu-con{display:none; position:absolute; top:49px; left:-1px; right:-1px; border:1px solid #ddd; border-top:0; background-color:#fff; z-index:11; }
	#topMenuM2dep .menu-location.location1 .location-menu-con{width:calc(100% - 1px)}
	#topMenuM2dep .menu-location .location-menu-con li{border-top:1px solid rgba(0,0,0,0.1);}
	#topMenuM2dep .menu-location .location-menu-con li a{display:block; padding:10px 15px; font-size:13px; line-height:1.5; word-break:keep-all;}
	#topMenuM2dep .menu-location .location-menu-con li.on{position:relative;}
	#topMenuM2dep .menu-location .location-menu-con li.on a{color:#5bb531; font-weight:500;}

	
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#topMenuM2dep + #middleArea{/* padding-top:0 */}

}
@media all and ( max-width: 480px ){
	/*  SUB LAYOUT :: 서브메뉴 모바일 (1차메뉴) */
	#topMenuM .side-menu-inner{height:60px;}
	#topMenuM .menu-location > .cur-location span{line-height:60px}
	#topMenuM .menu-location .location-menu-con{top:60px;}

	/*  SUB LAYOUT :: 서브메뉴 모바일 (2차메뉴) */
	#topMenuM2dep .side-menu-inner{height:40px}
	#topMenuM2dep .menu-location > .cur-location span{line-height:40px}
	#topMenuM2dep .menu-location .location-menu-con{top:40px;}
}
/* ****************** 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:6px; top:-11px; line-height:60px; }
	.modal-close-btn i{font-size:24px}
	.modal-close-btn,
	.modal-close-btn:before{width:50px; height:60px;}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}

}

/* ****************** 사이트맵 ********************** */
@media all and ( max-width: 1366px ){
	/* -------- 사이트맵 02 -------- */
	/* 사이트맵 02 :: 메뉴 */
	.sitemap-wrapper-style02 > ul > li > h2{margin:80px 20px 20px; font-size:16px;}
	.sitemap-wrapper-style02 > ul > li .sitemap-2dep a{padding:15px 5px 15px 20px; font-size:13px; }
}
@media all and ( max-width: 1024px ){
	/* -------- 사이트맵 02 -------- */
	/* 사이트맵 02 :: Layout */
	#sitemapContent,
	#sitemapContent.open{display:none;}
}
@media all and ( max-width: 800px ){
	/* -------- 사이트맵 01 -------- */
	/* 사이트맵 01 */
	.sitemap-wrapper{padding:15px}
	.sitemap-wrapper > ul{display:block;}
	.sitemap-wrapper > ul > li{float:none; display:block; 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:""; display:none;}
	.sitemap-wrapper > ul > li .sitemap-2dep li:nth-child(3n+1){clear:both;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{padding:7px; font-weight:300; }
}
@media all and ( max-width: 480px ){
	/* -------- 사이트맵 01 -------- */
	/* 사이트맵 01 */
	.sitemap-wrapper > ul > li .sitemap-2dep li{width:48%;}
	.sitemap-wrapper > ul > li .sitemap-2dep li:nth-child(3n+1){clear:none;}
	.sitemap-wrapper > ul > li .sitemap-2dep li:nth-child(odd){clear:both;}
}