@charset "utf-8";

.sub-visual {position:relative; background:center /cover no-repeat;}
.sub-visual .cover {width:100%; height:100%; background:rgba(0,0,0,0.7); left:0;top:0; position:absolute;}
	
.sub-visual {background-image:url(/images/common/bg_products.WEBP);}
.sub-visual.product {background-image:url(/images/common/bg_products.WEBP);}

@media (min-width: 1200px) {
	
	/* 헤더 */
	header {z-index:9999; position:absolute; top:0; width:100%; height:120px; overflow:hidden; transition:var(--ani);}
	header:after {width:100%; height:1px; background:var(--gray1); left:0; top:120px; position:absolute; display:block; content:'';}
	header .header-wrap {height:100%; display:flex; position:relative;}
	header h1.logo {height:120px; position:relative; z-index:9; display:flex; align-items:center;}

	header .headAside {display:flex; height:120px; gap:25px; align-items:center;}
	header .headAside .searchBox {}
	header .headAside .inputWrap {
		padding:10px 20px; display: flex; width: 250px; height: 40px; padding:10px 20px; align-items: center;
		border-radius: 100px; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px);
	}
	header .headAside .inputWrap input {border:0; width:calc(100% - 16px); height:100%; color:#fff; background:transparent;}
	header .headAside .inputWrap input::placeholder {color:#fff;}
	header .headAside .inputWrap .img {width:16px; height:16px;}
	header .headAside .inputWrap .img img {}
	header .headAside a {width:35px; height:25px; background:50% no-repeat;}
	header .headAside a.login {background-image:url(/images/common/icon_aside_login_white.svg);}
	header .headAside a.logout {background-image:url(/images/common/icon_aside_logout_white.svg);}
	header .headAside a.favorite {background-image:url(/images/common/icon_aside_favorite_white.svg);}
	header .headAside a.cart {background-image:url(/images/common/icon_aside_cart_white.svg);}
	header .headAside a.order {background-image:url(/images/common/icon_aside_deliver_white.svg);}
	
	header img.white {display:block;}
	header.on img.white {display:none;}
	header img.color {display:none;}
	header.on img.color {display:block;}
	
	/* .headerH {height:100%;} */

	/* gnb */
	nav.pc {padding-left:80px; height:100%; overflow:hidden;flex-grow:1;}
	nav.pc .gnb {height:100%; display:flex;}
	nav.pc .gnb .dep1 {height:120px; display:flex; align-items:center;}
	nav.pc .gnb .dep1>li {position:relative;}
	nav.pc .gnb .dep1>li+li {padding-left:15px; margin-left:15px;}
	nav.pc .gnb .dep1>li+li:before {width:1px; height:16px; background:var(--gray2); left:0; top:6px; position:absolute; display:block; content:'';}
	nav.pc .gnb .dep1>li>a {padding:10px 0; color: #fff;font-size: var(--fs22);font-weight: 600;line-height: normal; position:relative;}
	nav.pc .gnb .dep1>li>a:before {width:5px; height:5px; background:var(--base1); border-radius:50%; left:50%; bottom:0; position:absolute; display:block; content:''; opacity:0; transform:translateX(-50%);}
	nav.pc .gnb .dep1>li:hover>a {color:var(--base1);}
	nav.pc .gnb .dep1>li.on>a {color:var(--base1);}
	nav.pc .gnb .dep1>li.on>a:before {opacity:1;}
	
	nav.pc .gnb .dep2 {position:absolute; top:70px;}
	nav.pc .gnb .dep2>li {}
	nav.pc .gnb .dep2>li+li {}
	nav.pc .gnb .dep2>li a {border-bottom:2px solid transparent; color: #333; font-size: var(--fs17); line-height: 200%; display:inline-block;}
	nav.pc .gnb .dep2>li:hover a {color:var(--base1);}
	nav.pc .gnb .dep2>li.on a {color:var(--base1); border-color:var(--base1);}
	
	
	/* 헤더온 */
	header.on {height:310px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);background:#fff;}
	header.on h1.logo img.off {display:none;}
	header.on h1.logo img.on {display:block;}
	header.on nav {}
	header.on nav .gnb {}
	header.on nav .gnb .dep1 {}
	header.on nav .gnb .dep1>li {}
	header.on nav .gnb .dep1>li>a {color:#000;}
	header.on nav .gnb .dep1>li:hover>a {color:var(--base1);}
	header.on nav .gnb .dep1>li.on>a {color:var(--base1);}
	
	header.on .headAside .inputWrap {background:rgba(0, 0, 0, 0.3);}
	
	header.on .headAside a.login {background-image:url(/images/common/icon_aside_login.svg);}
	header.on .headAside a.logout {background-image:url(/images/common/icon_aside_logout.svg);}
	header.on .headAside a.favorite {background-image:url(/images/common/icon_aside_favorite.svg);}
	header.on .headAside a.cart {background-image:url(/images/common/icon_aside_cart.svg);}
	header.on .headAside a.order {background-image:url(/images/common/icon_aside_deliver.svg);}
	
	/* header .gnbCover {background:rgba(0,0,0,.9); width:100%; height:100vh; left:0; top:0; position:absolute; } */

	
	.sub-visual-wrap {padding:200px 0 40px; position:relative;}
	.sub-visual-wrap h2 {color: #FFF; text-align: center;font-size: var(--fs40);font-weight: 700;line-height: normal;}
	

}





@media (max-width: 1199px) {
	/*헤더*/
	.headerH {}
	header {z-index:999; width:100%; left:0; top:0; position:absolute;}
	header .gnbView {width:60px; height:60px; background:url(/images/common/icon_aside_menu_white.svg)0 50% no-repeat;right:0; top:0;  position:absolute;}
	header .searchBtn {width:60px; height:60px; background:url(/images/common/icon_aside_search_white.svg)0 50% no-repeat;right:60px; top:0;  position:absolute;}
	/* header .gnbCover {background:rgba(0,0,0,.5); width:100%; height:100vh; left:0; top:0; position:absolute;} */
	
	header .headAside {display:flex; flex-direction:column; gap:10px; align-items:center; position:fixed; right:30px; bottom:210px;}
	header .headAside a {width:50px; height:50px; line-height:46px; background:#333 50% no-repeat; border-radius:50%;}
	header .headAside a.login {background-image:url(/images/common/icon_aside_login_white.svg);}
	header .headAside a.logout {background-image:url(/images/common/icon_aside_logout_white.svg);}
	header .headAside a.favorite {background-image:url(/images/common/icon_aside_favorite_white.svg);}
	header .headAside a.cart {background-image:url(/images/common/icon_aside_cart_white.svg);}
	header .headAside a.order {background-image:url(/images/common/icon_aside_deliver_white.svg);}
	
	header h1 {height:60px; display:flex; align-items:center;}
	header h1 a {height:100%; display:flex; align-items:center;}
	header h1 a img {height:23px}
	
	
	
	header .gnbCover {display:none; background:rgba(0,0,0,.9); width:100%; height:100vh; left:0; top:0; position:fixed; transition:var(--ani);}
	
	/*gnb*/
	nav.mobile {transform:translateX(100%); z-index:9999; position:fixed; right:0; top:0; width:600px; max-width:80%; min-width:320px; height:100%; overflow:hidden; background:#fff; transition:var(--ani);}
	nav.mobile.active {transform:translateX(0);}
	nav.mobile .closeWrap {padding-left:20px; display:flex; gap:10px; align-items:center; position:relative; height:60px; border-bottom: 1px solid rgba(0,0,0,.15); overflow:hidden; font-weight : 500; } 
	nav.mobile .closeWrap a {font-size:var(--fs14);}
	nav.mobile .closeWrap .gnbClose {
		position:absolute; right:0; top:0;
		width:60px; height:60px; background:url(/images/common/i-close.png)center no-repeat; background-size:20px; border-left:1px solid rgba(0,0,0,.15);
	}		
	nav.mobile .closeWrap .link { float:left; padding:0 20px; line-height:60px; font-size:12px; } 
	nav.mobile .closeWrap .link+.link { padding-left:0; } 
	nav.mobile .gnb { position:relative; width:100%; height:calc(100% - 60px); overflow-y:auto; text-align:left !important; font-weight : 400; } 
	nav.mobile .gnb * { width:100% !important; } 
	/* nav.mobile .gnb .home { display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333; } */
	nav.mobile .gnb .dep1>li { clear:both; position:relative; border-bottom:1px solid #e5e5e5; } 
	nav.mobile .gnb .dep1>li>a { display:block; padding:20px; font-size:17px; } 
	nav.mobile .gnb .dep1>li>a span { font-size:14px; color:#999; padding-left:5px; } 
	nav.mobile .gnb .dep1>li.on { border-color:var(--base1); } 
	nav.mobile .gnb .dep1>li.on>a { background:var(--base1); color:#fff; } 
	nav.mobile .gnb .dep1>li.on>a span { color:#fff; } 
	
	nav.mobile .gnb .dep2 {display:none;}
	nav.mobile .gnb .dep2>li {position:relative; border-top: 1px solid #eee; } 
	nav.mobile .gnb .dep2>li a { display:block; padding:15px 40px; font-size:15px; letter-spacing:-.8px; background:#fff; } 
	nav.mobile .gnb .dep2>li a span { font-size:14px; color:#999; padding-left:5px; } 
	nav.mobile .gnb .dep2>li:last-child a { border-color:#e0e0e0; } 
	nav.mobile .gnb .dep2>li a:hover { color:#000; background-color:#f5f5f5; } 
	nav.mobile .gnb .dep2>li.on a { color:var(--base1); font-weight:700; } 
	nav.mobile .gnb .dep2>li.on a span { color:var(--base1); } 
	nav.mobile .gnb>.side { display:none; } 
	
	/* nav.mobile .gnb .dep1>li.on .dep2 {display:block;} */
	
	
	.sub-visual-wrap {padding:120px 0 40px; position:relative;}
	.sub-visual-wrap h2 {color: #FFF; text-align: center;font-size: var(--fs40);font-weight: 700;line-height: normal;}
	
	
	
	
	
}

@media (max-width: 767px) {
	
	header h1 a img {height:19px}
	header .gnbView {background-size:30px;}
	header .searchBtn {background-size:30px; right:50px;}
	
	header .headAside {right:10px; bottom:155px; gap:5px;}
	header .headAside a {width:40px; height:40px; background-size:24px;}
	
	.sub-visual {}
	
	
	
	
	
	
	
	
	
}