@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_products2.webp);}
.sub-visual.product {background-image:url(/images/common/bg_products2.webp);}

@media (min-width: 1200px) {

	/* 헤더 */
	header {z-index:9999; position:absolute; top:0; width:100%; height:120px;}
	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; width:454px; height:120px; gap:25px; align-items:center; justify-content:end; position: absolute; right: 0; top: 0;}
	header .headAside .searchBox {}
	header .headAside .inputWrap {
		padding:0 12px; display: flex; height: 40px; align-items: center;
		border-radius: 100px; background:#fff; backdrop-filter: blur(5px);
	}
	header .headAside .inputWrap input {width:170px; padding:0 15px; border:0; color:#999; height:100%; background:transparent; transition:all .3s;}
	header .headAside .inputWrap input::placeholder {color:#999;}
	header .headAside .inputWrap button {width:16px; height:16px; cursor:pointer;}
	header .headAside .inputWrap button img {}
	/* header .headAside .inputWrap.active {padding:0 20px;} */
	/* header .headAside .inputWrap.active input {display:block;} */
	header .headAside .inputWrap input:focus {outline:0 !important; border:0 !important; background:none !important;}
	
	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);}


	/* .headerH {height:100%;} */

	/* gnb */
	nav.pc {position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;width: 100%;}
	nav.pc .gnb {height:100%; display:flex; justify-content:end;}
	nav.pc .gnb .dep1 {height:120px; display:flex; gap:0; align-items:center;}
	nav.pc .gnb .dep1>li {height:100%; position:relative;}
	nav.pc .gnb .dep1>li>a {height:100%; display:flex; align-items: center; padding:10px 25px; color: #fff;font-size: var(--fs20);font-weight: 500;line-height: normal;}
	nav.pc .gnb .dep1>li.on>a {color:var(--base2);}
	nav.pc .gnb .dep1>li.on>a:before {opacity:1;}

	nav.pc .gnb .dep2 {
		padding:20px; display:none; flex-direction:column; gap:10px; background:#fff; border-radius:10px;
		position:absolute; left:50%; top:90px; text-align:center; transform:translateX(-50%); box-shadow:0 10px 10px rgba(0,0,0,.1);
	}
	nav.pc .gnb .dep2:after {
		width:10px; height:10px; background:#fff; border-radius:2px; display:block; content:'';
		left:50%; top:0; position:absolute; transform:rotate(45deg) translateX(-50%);
	}
	nav.pc .gnb .dep2>li {}
	nav.pc .gnb .dep2>li a {color: #000;text-align: center; line-height: normal; white-space:nowrap;}
	nav.pc .gnb .dep2>li.on a {color:var(--base1); border-color:var(--base1);}


	nav.pc .gnb .dep1>li:hover>a {color:var(--base2);}
	nav.pc .gnb .dep1>li.active .dep2 {display:flex;}
	/* 헤더온 */
	/* header nav .gnb .dep1>li:hover .dep2 {display:block;} */

	/* header .gnbCover {background:rgba(0,0,0,.9); width:100%; height:100vh; left:0; top:0; position:absolute; } */


	.sub-visual-wrap {display:flex; justify-content:space-between; padding:200px 0 40px; position:relative; align-items:center; flex-wrap:wrap;}
	.sub-visual-wrap h2 {color: #FFF; font-size: var(--fs40);font-weight: 700;line-height: normal; }
	.sub-visual-wrap .site-route {display:flex; gap:5px 45px;}
	.sub-visual-wrap .site-route li {position:relative; font-size:14px; color:#9A9AB5;} 
	.sub-visual-wrap .site-route li+li:before {content:""; display:block; width:7px; height:10px; background:url(/images/common/route-arrow.svg) no-repeat center / contain; position:absolute; top:8px; left:-25px;}
	
	.lnbH {height:60px;}
		
	.lnb {position:absolute; left:0; top:287px; width:100%; border-bottom:1px solid var(--border1); background:#fff; z-index:9;}
	.lnb.fixOn {position:fixed; left:0; top:0; z-index:99;}
	.lnb .lnbWrap {display:flex; height:60px; align-items:center; position:relative;}
	.lnb .lnbWrap .home {width:60px; height:100%; border-width:0 1px; border-style:solid; border-color:var(--border1);}
	.lnb .lnbWrap .home img {width:100%; height:100%; object-fit:scale-down;}
	.lnb .lnbWrap .lnb-gotop {
		width:60px; height:100%; background:url(/images/common/icon_lnb_gotop.svg)center no-repeat;
		position:absolute; right:0; top:0; border-width:0 1px; border-style:solid; border-color:var(--border1);
	}
	
	.lnb.type1 ul {padding-left:50px; display:flex; gap:50px;}
	.lnb.type1 ul li {}
	.lnb.type1 ul li a {
		color: #000; font-size:var(--fs18); font-weight: 600; line-height: normal;
		display:flex; height:60px; border-bottom:3px solid transparent;
		align-items:center;
	}
	.lnb.type1 ul li.on a {color:var(--base5); border-color:inherit;}
	
	.lnb.type2 .buyTit {padding:0 30px; color: #000;font-weight: 600;line-height: normal;}

	.lnb.type2 .lnbMenu {width:180px; height:60px;border-width:0 1px; border-style:solid; border-color:var(--border1); position:relative;}
	.lnb.type2 .lnbMenu>a {
		padding:0 0 0 30px; width:100%; height:100%; display:flex; align-items:center; 
		color: var(--base5); font-weight: 600; line-height: normal;
		background:url(/images/common/icon_lnb_arrow.svg)calc(100% - 15px) 50% no-repeat;
	}
	.lnb.type2 .lnbMenu ul {display:none; width:100%; border:1px solid var(--border1);}
	.lnb.type2 .lnbMenu ul li {}
	.lnb.type2 .lnbMenu ul li+li {border-top:1px solid var(--border1);}
	.lnb.type2 .lnbMenu ul li a {padding:0 30px; line-height:50px; color:#000; display:block; background:#fff;}
	.lnb.type2 .lnbMenu ul li:hover a {background:#f1f1f1;}
	.lnb.type2 .lnbMenu ul li.on a {color:var(--base5)}
	
	.lnb.type2 .lnbMenu:hover ul {display:block;}




}





@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:195px;}
	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:40px}

	

	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;}
	
	.sub-visual-wrap {display:flex; flex-direction:column; justify-content:space-between; position:relative; align-items:center; flex-wrap:wrap; gap:5px;}
	.sub-visual-wrap .site-route {display:flex; gap:5px 45px;}
	.sub-visual-wrap .site-route li {position:relative; font-size:14px; color:#9A9AB5;} 
	.sub-visual-wrap .site-route li+li:before {content:""; display:block; width:7px; height:10px; background:url(/images/common/route-arrow.svg) no-repeat center / contain; position:absolute; top:8px; left:-25px;}




}

@media (max-width: 767px) {

	header h1 a img {height:35px}
	header .gnbView {background-size:30px;}
	header .searchBtn {background-size:30px; right:50px;}

	header .headAside {right:10px; bottom:165px; gap:5px;}
	header .headAside a {width:40px; height:40px; background-size:24px;}

	.sub-visual {}









}