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

/* ========================================================
 * SETTING
======================================================== */
@media all and (max-width:1260px){
	:root{
		--area-padding: 5%;
		--header-height: 80px;
	}
}
@media all and ( max-width: 480px ){
	:root{
		--header-height: 60px;
	}
}

/* ========================================================
 * LAYOUT
======================================================== */
/* ****************** 공통레이아웃 ********************** */
@media all and (max-width:1660px){	/* max-width : (area-box width) + 60px */
	.area-box{padding:0 var(--area-padding); max-width:none;}
}
@media all and (max-width:1360px){ /* max-width : (area width) + 60px */ 
	.area{padding:0 var(--area-padding);}
}
@media all and (max-width:1260px){
	.area{padding:0 var(--area-padding); max-width:none;}
}

/* ****************** HEADER ********************** */
@media all and ( max-width: 1260px ){
	#header{height: 81px;}
	#headerInner{height: 80px;}
	.header-wrap{width: 100%; z-index:100;}
	#header.fixed .header-wrap{position:fixed; top: 0; left: 0; background-color: #fff;}
	
	#header .logo img{height:35px;}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right: 50px;}
	.util-menu-list, .header-board{display: none;}
	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn, .sitemap-custom-btn{display:none;}

	/* Header :: 검색버튼 */
	.header-search-box .search-input-box{width:100%;}
	.mb-search-btn{display: block;}
	.mb-search-btn i{position: relative; top: 1px;}
	.header-util-box .header-search-open-btn,
	.header-util-box .header-search-close-btn{font-size:26px; color:#303030;}
	.header-util-box .header-search-close-btn{display:none;}

	/* HEADER SEARCH BOX */
	.header-search-box{
		margin-left: 0; position:absolute; top:100%; left:0px; right:0px; padding:7px; background-color:var(--main-color); z-index:999; 
		opacity: 0; visibility:hidden; 
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		 box-sizing: border-box; 
	}
	.header-search-box.open{opacity: 1; visibility:visible;}
	.header-search-box .search-word-box{position:relative; background-color:#fff;}
	.header-search-box .header-search-word{height:35px; border:0; width:calc( 100% - 40px ); background:transparent; border:0; text-indent:10px; color:#000; font-size:13px; } 
	.header-search-box .header-search-word:focus{color:#333;}
	.header-search-box .header-search-btn,
	.header-search-box .header-search-close-btn{position:absolute; top:50%; right:5px; margin:-16px 0 0 0;}
	.header-search-box i{font-size:24px; color:#000;}

	/* 헤더 :: 장바구니 */
	.header-cart-btn{display: none;}

	/* -------- Header :: GNB(Pc) -------- */
	#headerMenuCon{display: none;}
	#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.7); z-index:9998;}	
	#gnbM{ 
		display:block; 
		position:fixed; 
		top: 0;
		left:-102%;
		width:90%; 
		height:100%;  
		/* max-width:340px; */
		max-width:430px;
		background-color:#fff; 
		z-index: 10002;
		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{
		left:0px; 
		visibility:visible;
	}
	/* GNB Mobile :: 레이아웃 */
	.gnb-navigation-wrapper{padding: 0 20px; position:relative; height:100%; box-sizing:border-box; padding-top:0; height:calc(100% - 106px); overflow-y:auto;}	
	
	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation{padding: 20px 0;}
	#navigation > li{}
	#navigation > li > a {position:relative; display:block; padding:15px 0; color:#000; font-size:18px; font-weight:600;}
	#navigation > li > a span{position: relative;}
	#navigation > li.gnb1 > a span:after,
	#navigation > li.gnb2 > a span:after{position: absolute; top: 0; right: -10px; display: block; content: ''; width: 6px; height: 6px; background-color: #d85446; -webkit-border-radius: 100%; border-radius: 100%;}
	#navigation > li.active > a{/* color:var(--main-color); */}
	#navigation > li.has-2dep > a:before{font-family:xeicon; content: "\e942"; position:absolute; top:50%; right:var(--area-padding); font-size:1.3em; transform:translateY(-50%); font-weight: 400;}
	#navigation > li.has-2dep.active > a:before{content: "\e945";}
	#navigation > li.m-menu{padding-top: 10px; margin-top: 10px; border-top: 1px solid #e1e1e1;}
	#navigation > li.m-menu + li.m-menu{padding-top: 0; margin-top: 0; border-top: none;}
	#navigation > li.m-menu a{font-size: 16px; font-weight: 400;}
	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep{display:none; padding:5px 0;}
	#navigation > li .gnb-2dep .gnb-bg-con{display: none;}
	#navigation > li .gnb-2dep > ul > li{height:auto !important;}
	#navigation > li .gnb-2dep > ul > li > a{display:block; color:#6e6e6e; font-size:16px; padding:12px 0;}
	#navigation > li .gnb-2dep > ul > li.on > a{color:#000; font-weight:500;}
	
	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn,
	.nav-close-btn{
		display:block; position:absolute; top:24px; right:var(--area-padding); z-index:9999; 
		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); 
	}
	#header.fixed .nav-open-btn{position:fixed;}
	.nav-open-btn .line{
		display:block; width:28px; height:3px; background-color:#333; margin: 4px auto;
		-webkit-transition: all 0.3s ease-in-out;
	     transition: all 0.3s ease-in-out;
	}

	/* ****************** 모바일 헤더 상단 ********************** */
	.nav-close-btn{top: 35px; right: 20px;}
	.nav-close-btn i{font-size: 24px; color: #333;}

	#gnbM .header-cart-btn{display: block; position:absolute; top:40px; right: 60px;}

	.header-util-menu-box{padding: 35px 20px; border-bottom:1px solid #e1e1e1;}
	.gnb-mobile-link-list{}
	.gnb-mobile-link-list li{position:relative; display: inline-block; margin-left:10px;}
	.gnb-mobile-link-list li:first-child{margin-left:0;}
	.gnb-mobile-link-list li a{width: 90px; height: 35px; font-size:13px; color:#333; font-weight:600; letter-spacing: -0.65px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid #c9c9c9; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.gnb-mobile-link-list li:first-child a, .gnb-mobile-link-list li:nth-child(2) a{background-color: #333; color: #fff; border-color: #333;}
	
	/* ****************** RIGHT BAR ********************** */
	#rightQuickMenu,
	#rightQuickMenu.fixed {top:80px;}
}
@media all and ( max-width: 800px ){
	#rightQuickMenu,
	#rightQuickMenu.fixed{position: fixed; top: auto; bottom: 0; width: 200px; height: 100%; z-index: 9999;}
	#rightQuickMenu.close {right: -200px;}
	.right-quick-menu-left-box {position: absolute; bottom: 0px; right: 100%; width: 50px; z-index: 2;}
	.right-quick-menu-right-box{width: 200px; height: 100%; border-top: 0; border-bottom: 0; border-right: 0;}
	.right-menu-list li a, .right-menu-list li button{height: 50px; line-height: 50px;}
	.right-menu-list li.m-none{display: none;}
	.lately-list-wrapper{display: none;}
	/* RIGHT BAR :: 오른쪽 :: 메뉴 리스트*/
	.right-quick-menu{display: block;}
	/* -------- RIGHT BAR :: 메뉴 -------- */
	.right-quick-menu-inner{position:relative; z-index:2; background-color:#fff; height:100%; }
	/* RIGHT BAR :: 메뉴*/
	.right-quick-menu{height:calc(100% - 210px); overflow-y:auto;}
	.right-quick-menu ul li{border-bottom:1px solid #e8e8e8;}
	.right-quick-menu ul li a{display:block; position:relative; padding:15px 20px; color:#111; font-size:13px; letter-spacing:-0.5px;}
	.right-quick-menu ul li a i{position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:16px;}
	/* RIGHT BAR :: 고객센터 대표번호*/
	.right-quick-cs-center{padding:15px;}
	.right-quick-cs-center dl{margin-bottom:10px;}
	.right-quick-cs-center dl dt{color:#444; font-size:13px; letter-spacing:-0.25px; font-weight:300;}
	.right-quick-cs-center dl dd{color:#313896; font-size:16px; font-weight:600; letter-spacing:-0.25px; margin-top:5px;}
	.right-quick-cs-center .cs-center-time{font-size:12px; line-height:1.3; opacity:0.5}
	.right-quick-cs-center .cs-center-time span{display:inline-block;}
}
@media all and ( max-width: 480px ){
	#header{height: 61px;}
	#headerInner{height: 60px;}
	#header .logo img{height:24px;}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right:40px;}

	/* Header :: 사이트맵, 네비게이션 버튼 */
	.nav-open-btn{top:15px; margin-top:0;}
	.nav-open-btn .line{width:20px; height:2px;}
	
	/* Header :: GNB(Mobile) */
	/* #navigation > li > a{font-size:18px; padding:15px 0;}
	#navigation > li .gnb-2dep > ul > li > a{font-size:16px; padding: 10px 0;} */
	.gnb-mobile-link-list {display:flex; }
	.gnb-mobile-link-list li a {width: auto; padding: 10px 15px;} 
	.header-util-menu-box {padding: 70px 20px 30px;}
	.nav-close-btn {top: 20px; right: 20px;}
	#gnbM .header-cart-btn {top: 25px; right: 60px;}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:1260px){
	
}
@media all and (max-width:800px){
	/* -------- FOOTER :: 레이아웃 -------- */
	#footerBottom,
	#footerBottom .footer-right-con{text-align:center;}
	.footer-left-con,.footer-right-con{float:none; }

	/* -------- FOOTER :: 상단 -------- */
	#footerTop{}
	.footer-top-item{width: 100%; padding: 25px 0;}
	.footer-top-item + .footer-top-item{border-left: none;}
	.footer-top-tit{font-size: 15px;}
	.footer-top-inner{margin-top:15px;}
	/* 공지사항+거인소식 */
	.footer-top-tab li{padding-left: 20px;}
	.footer-top-tab li:before{left:10px; width:1px; height:10px; margin-top:-5px;}
	.footer-top-board li{padding-top: 7px;}
	.footer-top-board li a{padding-right: 70px; font-size: 13px;}
	.footer-top-board li a p{padding-left: 7px;}
	.footer-top-board li a .date{width: 70px;}
	/* 고객센터 대표번호 */
	.footer-top-inner .tel{margin-bottom: 7px; font-size: 24px;}
	.footer-top-inner .info{font-size: 13px;}
	/* 퀵메뉴 */
	.footer-top-quick{margin: -3px;}
	.footer-top-quick li{width: calc(50% - 6px); margin: 3px;}
	.footer-top-quick li a{padding: 0 25px 0 15px; font-size: 13px; height: 40px;}
	.footer-top-quick li a:after{right: 10px; font-size:14px;}

	/* -------- FOOTER :: 하단 -------- */
	#footerBottom{margin-top: 40px; padding:40px 0;}
	/* Footer :: 푸터메뉴 */
	.foot-menu{display: flex; flex-wrap:wrap; margin: -3px;}
	.foot-menu li{width: calc(33.33% - 6px); margin: 3px; float:none; padding-left:0;}
	.foot-menu li:nth-child(4),
	.foot-menu li:nth-child(5){width: calc(50% - 6px);}
	.foot-menu li:before{left:-10px; height:10px; margin-top:-5px; display: none;}
	.foot-menu li:nth-child(3n+1):before{display:none} 
	.foot-menu li a{font-size:13px; width: 100%; height: 40px; border: 1px solid #ececec; -webkit-box-sizing: border-box; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}

	/* Footer :: 푸터로고 */
	.foot-logo{margin-top: 30px;}
	.foot-logo img{height:30px;}

	/* Footer :: 정보 */
	.footer-address{margin-top:25px;}
	.footer-address .footer-address-txt{font-size:13px; margin:0 -8px;}
	.footer-address p{margin:0 8px;}

	/* Footer :: Copyright */
	.footer-copyright{margin-top: 25px; font-size:13px;}

	/* Footer :: 패밀리사이트 */
	.family-site-box{width:180px; margin: 30px auto 0;}
	.family-site-box .family-site-open-btn{height:40px; line-height:40px; padding:0 15px; font-size:13px;}
	.family-site-box .family-site-open-btn:after{right:10px; top:50%; margin-top: 1px;}
	.family-site-list{padding:10px 0;}
	.family-site-list a{padding:10px 15px; font-size:12px;}

	/* Footer :: INIPAY */
	.footer-pay-img-list{margin-top: 25px;}
	.footer-pay-img-list li{margin-left: 15px;}
	.footer-pay-img-list li img{height: 50px;}

	/* Footer :: SNS 리스트 */
	.foot-sns-menu{margin-top: 15px;}
	.foot-sns-menu li{margin-left:7px}
	.foot-sns-menu li a{width:30px; height:30px;}
	.foot-sns-menu li img{width:20px;}
}

/* ****************** SUB LAYOUT ********************** */
@media all and (max-width:1260px){
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content:not(.wide-area){padding:70px var(--area-padding)}
	#content.wide-area{padding:70px 0 0 0}
}
@media all and (max-width:800px){
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
	#content:not(.wide-area){padding:50px var(--area-padding)}
	#content.wide-area{padding:50px 0 0 0}
}

/* ****************** 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: 1360px ){
	.header-up-con{height: auto;}
	.header-up-con-inner{position: relative; left: 0; width: 100%; margin-left: 0; height: 0; padding-top: 6.61%; background-size: cover !important;}
	.bnr-close-btn{left: auto; right: 20px;}
	.bnr-close-btn img{width: 80%;}
}
@media all and ( max-width: 800px ){
	.header-up-con-inner{display: none;}
	.header-up-con-inner-m{display: block;}
	.header-up-con-inner-m img{width: 100%; height: auto;}
	.bnr-close-btn img{width: 20px;}
}