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

:root{
	--area-padding: 60px;	
}

@media all and (max-width:1280px){
	:root{
		--area-padding: 30px;	
		--header-height:100px;
	}
}

/*@media all and (max-width:1024px){
	:root{
		--header-height:100px;
	}
}*/


/* ****************** 공통레이아웃 ********************** */
@media all and (max-width:1660px){	/* max-width : (area-box width) + 20px */
	.area-box {padding:0 var(--area-padding); max-width:none;}
	.bs-br {display:none;}
}

@media all and (max-width:1450px){
	.area {padding:0 var(--area-padding); max-width:none;}
}

@media all and (max-width:1280px){
	.pc-br{display:none;}
}


/* ****************** HEADER ********************** */
@media all and (max-width:1880px){
	#gnb.open > ul > li {width: 170px;}
}

@media all and (max-width:1760px){
	.main-wrap #headerInner {padding:0 var(--area-padding);}
	.main-wrap #gnb {padding-left:260px;}
	.main-wrap #gnb > ul > li > a {padding-top:0;}
}

@media all and ( max-width: 1660px ){
	/* -------- Header :: GNB(PC) -------- */	
	#gnb.open > ul > li {width: 160px;}
	#headerInner {padding:0 var(--area-padding);}
	.sub-wrap #gnb {padding-left:260px;}
	#gnb > ul > li > a {padding-top:0;}
}

@media all and (max-width:1430px){
	#gnb {display:none;}
}


@media all and ( max-width: 1024px ){	/* 1024까지 레이아웃유지가 안될시 max-width: 컨텐츠너비+20px */
	/* #header,#headerInnerWrap{height:110px;} */
	/* #headerInner{padding:0 15px;} */
	#header .logo{padding:27px 0;}	/* padding값 적절히 바꿔주세요 */
	
	
	/* -------- Header :: UTIL BOX -------- */
	.header-lang > ul {top:35px;}
	/* 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:9999;}	
	#gnbM{ 
		display:block; 
		position:fixed; 
		top:0px; 
		right:-82%;
		width:80%; 
		height:100%;  
		max-width:335px; 
		background-color:#fff; 
		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);  
		visibility:hidden;
	}
	#gnbM.open{
		right:0px; 
		visibility:visible;
	}
	/* GNB Mobile :: 레이아웃 */
	.gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding:80px 40px 0; overflow-y:auto;
	background:url("/images/layout/gnb_m_bg.jpg"); background-size:cover;}	/* padding-top : Header 높이값 */
	.header-util-menu-box + .gnb-navigation-wrapper{padding-top:0}
	
	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation > li{}
	#navigation > li > a {position:relative; display:block; padding:15px 0; color:#3d3d3d; font-size:26.5px; font-weight:600; border-bottom:1px solid #e7e7e7;}
	#navigation > li.has-2dep > a:before{font-family:xeicon; content: "\e943"; position:absolute; top:50%; right:15px; font-size:1.1em; color: #979797; font-weight:300;  transform:translateY(-50%);}
	#navigation > li.has-2dep.active > a:before{content: "\e946";}
	#navigation > li.active a {border-color:#026bfa; border-width:2px;}
	#navigation > li.active > a,
	#navigation > li.active > a:before {color:#026bfa;}
	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep{display:none; padding:15px 0; }
	#navigation > li .gnb-2dep > li{height:auto !important;}
	#navigation > li .gnb-2dep > li > a{display:block; color:#979797; font-size:15px; padding:10px 0; }
	#navigation > li .gnb-2dep > li.on > a{}
	/* 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;}
	
	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn{
		/* display:block; */ position:fixed; top:24px;  right:15px; z-index:10000; 
		height:30px;
		-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	}
	.nav-open-btn .line{
		display:block; width:28px; height:3px; background-color:#565656; border-radius:5px; margin: 4px auto;
		-webkit-transition: all 0.3s ease-in-out;
	     transition: all 0.3s ease-in-out;
	}
	.nav-open-btn.active {right:40px;}
	.nav-open-btn.active .line{background-color:#3d3d3d; height:2px;}
	.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);
		  transform: translateY(7px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-5px) rotate(-45deg);
		  transform: translateY(-5px) rotate(-45deg);
	}
	
	/* #header.top-fixed {background: #fff;} */
	#header.top-fixed .logo img.logo_off {display: none;}
	#header.top-fixed .logo img.logo_on {display: block;}
	#header.top-fixed .nav-open-btn .line{background-color:#333}
	#header.top-fixed .header-lang .lang-open-btn {color:#000;}
	#header.top-fixed .header-lang .lang-open-btn .arrow {background: url(/images/layout/language_arrow_on.png) no-repeat;}
	#header.top-fixed .sitemap-line-btn .line.line2 {background: #000;}
	#header.top-fixed .header-icon-cs {background-color:#f1f1f1;}
}

#header.top-fixed.sitemap-open .logo img.logo_on {display:block;}
#header.top-fixed.sitemap-open .logo img.logo_off {display:none;}

@media all and ( max-width: 800px ){
	/* Header :: 로고 */
	#header .logo a.logo-pc-ver {display: none;}
	#header .logo a.logo-m-ver {display: block;}
	/* Header :: 외국어 선택 */
	.header-lang {width: 80px; }
	.header-lang .lang-open-btn {padding:0 18px;}
	/* Header :: 사이트맵버튼 */
	.sitemap-line-btn {width: 44px; margin-left: 0;}
}
@media all and ( max-width: 480px ){
	/* #header,#headerInnerWrap{height:60px;} */
	#header .logo{padding:20.75px 0;}	/* padding값 적절히 바꿔주세요 */
	#header .logo a.logo-m-ver {position: relative; height: 0; width: 115px; padding-top:16.53%;}
	#header .logo img {height:19px; position:absolute; top:0; left:0; width: 100%; height: 100%; margin: auto;}
	/* -------- Header :: UTIL BOX -------- */
	/* .header-util-box {padding-right:20px;} */
	.header-lang {width:70px;}
	.header-lang .lang-open-btn {padding:0 15px;}
	.header-lang .lang-open-btn .arrow {right: 10px;}
	/* .header-icon {width:20px; background-position:center; background-size: 20px auto; margin-left:10px;} */
	/* 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);
		  transform: translateY(6px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-6px) rotate(-45deg);
		  transform: translateY(-6px) rotate(-45deg);
	}
	/* Header :: GNB(Mobile) */
	.gnb-navigation-wrapper{padding-top:60px} /* padding-top : Header 높이값 */

	/* 230523 헤더 cs 아이콘사이즈수정 YJ */
	/* .header-icon-cs {width: 21px; height: 21px; background-size:cover; margin-left:10px;} */

}

/* ****************** FOOTER ********************** */
@media all and (max-width:1760px){
	#footerTop {padding:0 var(--area-padding);}
	#footerMiddle .footer-middle-container {padding:0 var(--area-padding);}
	#footerBottom {padding:50px var(--area-padding) 0;}
}

@media all and (max-width:1560px){
	#footerMiddle .footer-left-con .info-list li {margin-right: 30px;}
}

@media all and (max-width:1280px){
	#footer {padding:50px 0;}
	#footerMiddle {padding:40px 0 50px;}
	#footerMiddle .footer-middle-container {flex-direction: column;}
	#footerMiddle .footer-left-con {width: 100%; align-self: initial; margin-bottom: 40px;}
	#footerMiddle .footer-left-con .info-list {flex-direction:column;}
	#footerMiddle .footer-left-con .info-list li {margin-right: 0; margin-top: 20px;}
	#footerMiddle .footer-left-con .info-list li:first-of-type {margin-top: 0;}
	#footerMiddle .footer-right-con {width: auto; }
	.footer-btn-box {display:flex; justify-content:flex-start;}
	#footerMiddle .footer-btn-box .footer-btn-item:last-child {margin-top: 0; margin-left: 10px;}
	.footer-btn-item {width: 170px;}
	.footer-bottom-container {flex-direction:column; align-items: flex-start;}
	#footerBottom .footer-right-con {flex-direction:column; align-items: flex-start;}
	#footerBottom .footer-right-con .footer-logo-list {padding:20px 0 25px;}
}

@media all and (max-width:1366px) and (min-width:801px) , (max-width:480px){
	/* Footer :: 정보 style02 */
	.footer-address-list dl {margin-top:5px;}
	.footer-address-list dl dt ,
	.footer-address-list dl dd {display:block;}
	.footer-address-list dl dd {padding-left:0;}
	.footer-address-list dl dd:before {display:none;}
}

@media all and (max-width:800px){
	/* -------- FOOTER :: 레이아웃 -------- */
	#footer{ padding:40px 0;}
	#footerBottom{text-align:center;}
	#footerTop .footer-left-con,
	#footerTop .footer-right-con{float:none; }
	#footerTop .area {display:flex; flex-direction: column-reverse; }
	#footerBottom .area {display:block;}
	#footerBottom .footer-left-con {width:100%;}
	#footerBottom .footer-right-con {width:100%;}
	/* Footer :: 푸터메뉴 */
	.foot-menu {float:none; display:flex;}
	.foot-menu li {float:none; margin-left:25px}
	.foot-menu li:before{left:12px}
	.foot-menu li a{font-size:14px;}
	/* Footer :: SNS 리스트 */
	.foot-sns-menu{margin-bottom:20px;}
	.foot-sns-menu ul{display:inline-block;}
	.foot-sns-menu li a i{font-size:20px; line-height:25px;}
	/* Footer :: 정보 style02 */
	.footer-address-list dl{font-size:12px;}
	.footer-address-list dl:first-child dt {vertical-align:top;}
	.footer-address-list dl dd:before {top:6px;}
	.footer-address-list dl dd span {display:block; margin-right:0;}
	/* Footer :: 패밀리사이트 */
	/* .footer-btn-box{justify-content: center; margin-top:35px;} */
	.footer-btn-item{width:150px;}
	.footer-btn-item .footer-open-btn{ font-size:13px; height:40px; line-height:40px;}
	.footer-btn-item .footer-open-btn:after{font-size:15px}
}

@media all and (max-width:580px){
	#footerBottom .footer-right-con .footer-logo-list {height: 25px;}
}

@media all and (max-width:480px){
	.footer-address-list span {margin-right:0;}
	.footer-address-list dl dd {padding-right:0;}
	.footer-btn-item .footer-open-btn {padding:0 10px;}
	/* .footer-btn-item {margin-left:10px;} */
}

/* ****************** SUB LAYOUT ********************** */
@media all and (max-width:1410px){
	/*  SUB LAYOUT :: 비주얼 */
	/* #visual .visual-txt-con{padding:0} */
	/*  SUB LAYOUT :: 서브메뉴(스타일2,3,4) */
	#topMenu02 .area,
	#topMenu03 .area,
	#topMenu04 .area{padding:0;}
	#topMenu02 .area,
	#topMenu03 .area{margin:0 -1px}
	/*  SUB LAYOUT :: 서브메뉴(스타일2) */
	#topMenu02 .side-menu-inner ul{display:table}
	#topMenu02 .side-menu-inner ul:after{display:none;}
	#topMenu02 .side-menu-inner ul li{display:table-cell; vertical-align:middle;}
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content:not(.wide){padding:70px 15px}
	#content.wide{padding:70px 0 0 0}
}

@media all and (max-width:800px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:350px;}
	#visual .visual-tit{font-size:4.125em;}
	#visual .visual-sub-txt{font-size:18px; line-height:1.667em; padding-top:15px}
	/* SUB LAYOUT :: 위치정보(location) */
	.location li{font-size:12px;}
	.location li:before{margin:0 6px 0 4px; top:0px;}
	.location li i{margin-top:0px; font-size:16px;}
	/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
	.sub-page-controls-btn .sub-page-name{display:none}
	/*  SUB LAYOUT ::  서브메뉴(스타일1,2,3) */
	#topMenu01,
	#topMenu02,
	#topMenu03{display:none}
	/*  SUB LAYOUT :: 서브메뉴(스타일4) */
	#topMenu04{height:45px;}
	#topMenu04 .side-menu-inner{height:44px; padding-left:44px; width:auto;}
	#topMenu04 .location-to-home-btn{position:absolute; width:44px; height:44px; left:0px; top:0px; border:0;}
	#topMenu04 .location-to-home-btn i{font-size:20px; line-height:44px;}
	#topMenu04 .menu-location{width:50%;}
	#topMenu04 .menu-location > .cur-location{height:44px; border-right:0; border-left:1px solid #ddd; padding:0 10px 0 10px}
	#topMenu04 .menu-location > .cur-location span{line-height:44px;font-size:15px;}
	#topMenu04 .menu-location .location-menu-con{top:44px; left:0; padding-bottom:10px}
	#topMenu04 .menu-location .location-menu-con li a{font-size:14px; padding:7px 10px;}
	#topMenu04 .menu-location > .cur-location .arrow{right:10px;}


	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content {font-size:13px;}
	#content:not(.wide){padding:50px 15px}
	#content.wide{padding:50px 0 0 0}
}
@media all and ( max-width: 480px ){
	/*  SUB LAYOUT :: 비주얼 */
	#visual{height:555px}
}
/* ****************** 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;}
}

/* ****************** 사이트맵 ********************** */
@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:1280px){
	/* #header.top-fixed.sitemap-open ~ #siteMapCon06 {padding-top:var(--header-height);} */	
	#siteMapCon06 .cm-sitemap-container {padding-top:var(--header-height);}
}

@media all and ( max-width: 1024px ){
	/* -------- 사이트맵 02 -------- */
	/* 사이트맵 02 :: Layout */
	#sitemapContent,
	#sitemapContent.open{display:none;}
}
@media all and ( max-width: 800px ){
	
	/* #header.top-fixed ~ #siteMapCon06 .cm-sitemap-container {padding-top:0;} */
	/* -------- 사이트맵 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;}
}

/* top-btn */
@media all and (max-width:1280px){
	/* .main-top-btn {display:none;} */
}