@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('unable/shop.css');
@import url('custom_shop.css');

/*
 * layout.css.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) 레이아웃설정 - 커스텀
 *
 */

/* 1) root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#1754ed;
	--color-white:#fff;
	--color-black:#000;	   	
	
	--headerHig:80rem;

	--font-xe:'xeicon';
	--font-eng:'Outfit', serif;

	--font-base:16rem;
	--font15:15rem;
	--font16:16rem;
	--font17:17rem;
	--font18:18rem;
	--font20:20rem;
	--font22:22rem;
	--font23:23rem;
	--font25:25rem;
	--font30:30rem;
	--font35:35rem;
	--font36:36rem;
	--font40:40rem;
	--font45:45rem;
	--font60:60rem;
	--font70:70rem;
	
	@media (max-width:1024px){
		--headerHig:70rem;
	
		--font-base:clamp(14rem, 1.563vw, 16rem);
		--font15:clamp(14rem, 1.465vw, 15rem);
		--font16:clamp(14rem, 1.563vw, 15rem);
		--font17:clamp(15rem, 1.66vw, 17rem);
		--font18:clamp(16rem, 1.758vw, 18rem);
		--font20:clamp(18rem, 1.953vw, 20rem);
		--font22:clamp(18rem, 2.148vw, 22rem);
		--font23:clamp(18rem, 2.246vw, 23rem);
		--font25:clamp(20rem, 2.441vw, 25rem);
		--font30:clamp(22rem, 2.93vw, 30rem);
		--font35:clamp(22rem, 3.418vw, 35rem);
		--font36:clamp(23rem, 3.516vw, 36rem);
		--font40:clamp(25rem, 3.906vw, 40rem);
		--font45:clamp(28rem, 4.395vw, 45rem);
		--font60:clamp(35rem, 5.859vw, 60rem);
		--font70:clamp(45rem, 6.836vw, 70rem);
	}
	@media (max-width:480px){
		--headerHig:60rem;
	}
}

/* 2) 폰트설정 - 디자인 맞게 변경하면 됩니다. */
body{font-size:var(--font-base, 16rem); background-color:#f0f7ff;}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1500px){
	html{font-size:0.067vw /* 1px */;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}
}
@media (max-width:480px){
    html{font-size:0.271vw /* 1.3px */;}	
}


/* 3) 레이아웃설정 - 커스텀 영역으로 디자인 변경시 삭제 또는 수정 작업하시면 됩니다. */

/* 공통설정 */
#content img{max-width:100%;}

/* header */
#header{
	&{position:relative; z-index:50; width:100%; height:var(--headerHig); background-color:var(--color-point);}
	.inr-1200{display:flex; align-items:center; height:100%;}
	.logo{order:2;}
	nav{order:1;}
	.area_util{order:2;}
	
	.logo{position:absolute; left:50%; top:50%; width:175rem; height:25rem; transform:translate(-50%, -50%);}
	.logo a{display:block; width:100%; height:100%; background:url(../images/common/logo.svg) no-repeat 50% 50%; background-size:auto 100%; font-size:0;}
	.logo img{max-width:100%;}
	
	@media screen and (max-width:480px){
		.logo{width:135rem; height:20rem;}
	}
}

/* gnb */
#header{
	.inr-1400{position:relative; width:100%; padding-top:30rem;}
	nav{
		.gnb{
			&{--sizeGnb:60rem; display:flex; justify-content:center; align-items:center; gap:var(--sizeGnb);}
			a{display:inline-flex; align-items:center; height:100%; transition:opacity 0.3s;}
			> li{position:relative; height:100%;}
			> li > a{padding:15rem 0; font-size:var(--font16); font-weight:500; color:var(--color-white);}
			.box{opacity:0; visibility:hidden; position:absolute; left:50%; z-index:60; min-width:150rem; box-sizing:border-box; padding:15rem 20rem; background:var(--color-white); border:1rem solid #e8e8e8; transform:translateX(-50%); transition:opacity 0.3s, visibility 0.3s;}
			.box ul > li{margin:10rem 0; font-size:var(--font16);}
			.box ul > li a:hover{opacity:0.5;}
		}
		/* active */
		.gnb{
			 li.active .box{opacity:1; visibility:visible;}
		}
	}
	
	@media screen and (max-width:1024px){
		.inr-1400{padding-top:10rem;}
		nav{
			&{margin-top:0;}
			.gnb{display:none;}
		}
	}
}
	
/* gnb menu control */
.gnb-btn__open{
	&{display:none; /* display:flex; */ justify-content:center; align-items:center; min-width:50rem; background-color:transparent;}
	i{font-size:0;}
	span{
		&{overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4rem; width:18rem;}
		&:before,
		&:after,
		i{content:''; display:block; width:100%; height:2rem; background:#fff; transform:translateX(0);}
	}
	&:hover span{
		&:before,
		&:after,
		i{animation:gnbShow 0.5s ease forwards;}
		&:before{animation-delay:0.1s;}
		&:after{animation-delay:0.3s;}
		i{animation-delay:0.2s;}
	}
	
	@media screen and (max-width:1024px){
		&{display:flex; position:absolute; height:50rem; top:50%; left:10rem; border-width:0; transform:translateY(-50%);}
		span{width:20rem;}
	}
	@media screen and (max-width:480px){
		&{left:0;}
	}
}

/* animation */
@keyframes gnbShow{
	0%{transform:translateX(0);}
	50%{transform:translateX(150%);}
	100%{transform:translateX(0%);}
}

/* gnb all & mobile */
.gnb-mob{
	&{opacity:0; visibility:hidden; position:absolute; top:100%; left:0; z-index:60; width:100%; background-color:var(--color-white); transition:opacity 0.3s, visibility 0.3s;}
	.util{display:none;}
	.basket-count{position:relative; top:auto; right:auto; background-color:var(--color-point); color:#fff;}
	.gnb{
		&{--sizePad:50rem; max-width:1260rem; margin:0 auto; padding:calc(var(--sizePad) - 10rem) 20rem;}
		> ul{display:flex; flex-wrap:wrap; align-items:stretch; gap:35rem 0; margin-left:var(--sizePad);}
		> ul > li{width:calc(100% / 6); box-sizing:border-box; padding:0 var(--sizePad); font-size:var(--font15);}
		> ul > li a{display:inline-block; transition:opacity 0.3s;}
		> ul > li > a{font-weight:600;}
		> ul > li > .box{margin-top:10rem;}
		> ul > li > .box > ul > li{padding:7rem 0;}
		> ul > li > .box a{font-size:14rem;}
		
		button.open{
			&{display:none; position:absolute; top:10rem; right:10rem; width:40rem; height:40rem; box-sizing:border-box; padding:10rem; background-color:transparent; font-size:0;}
			&:before,
			&:after{content:''; display:block; position:absolute; width:11rem; height:1rem; background-color:#999; border-radius:2rem; transform-origin:50% 50%; transition:transform 0.2s cubic-bezier(0.86,0,0.07,1);}
			&:before{margin-left:1rem; transform:rotate(45deg);}
			&:after{margin-left:9rem; transform:rotate(-45deg);}
			&.active:before{transform:rotate(-45deg);}
			&.active:after{transform:rotate(45deg);}
		}
		/* hover */
		> ul > li a:hover{opacity:0.5;}
	}
	
	/* active */
	&.active{opacity:1; visibility:visible;}
}
	/* close */
.gnb-mob__close{display:block; position:absolute; right:20rem; top:20rem; width:35rem; height:35rem; background-color:transparent; font-size:0;}
.gnb-mob__close i{font-size:35rem; transition:transform 0.3s;}
.gnb-mob__close:hover i{transform:rotate(90deg);}

	/* gnb all & mobile 반응형 */
@media screen and (max-width:1024px){
	body{overflow:inherit; position:relative;}
	body.active{overflow:hidden; position:fixed; width:100%;}
	.gnb-mob{
		&{top:0; display:flex; flex-direction:column; align-items:flex-start; height:calc(var(--vh, 1vh) * 100); background-color:rgba(0,0,0,0.7);}
		.util,
		.gnb{width:80%; box-sizing:border-box; margin:0; background-color:var(--color-white);}
		.gnb{
			&{overflow-y:auto; flex:auto; padding:0 0 30rem;}
			> ul{display:block; margin-left:0;}
			> ul > li{position:relative; width:100%; padding:0;}
			> ul > li a{display:block;}
			> ul > li > a{padding:20rem; border-bottom:1rem solid #f0f0f0; font-size:var(--font18);}
			> ul > li > .box{display:none; margin-top:0; padding:20rem; background-color:#f8f8f8;}
			> ul > li > .box a{padding:7rem 0; font-size:var(--font16);}
			> ul > li > .box > ul > li{padding:0;}
			button.open{display:block;}
		}
		
		.util{
			&{flex:none; display:block; background-color:#f8f8f8; border-bottom:1px solid #f0f0f0;}
			ul{display:flex; align-items:center; gap:15rem; padding:0 20rem;}
			ul > li a{display:block; position:relative; padding:15rem 0;}
		}
			/* hover */
		.gnb > ul > li a:hover{opacity:1;}
			/* close */
		.gnb-mob__close i{color:var(--color-white);}
	}
}

/* util */
.area_util{
	&{margin-left:auto;}
	.util-list{
		&{display:flex; align-items:center; gap:25rem; height:42rem; padding:0 30rem;}
		> li{display:flex; align-items:center; position:relative;}
		[data-util] span{display:block; width:25rem; height:22rem; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 100%; font-size:0;}
		[data-util="mypage"] span{background-image:url(../images/common/util_mypage.svg);}
		[data-util="login"] span{background-image:url(../images/common/util_login.svg);}
		[data-util="logout"] span{background-image:url(../images/common/util_logout.svg);}
		[data-util="basket"] span{background-image:url(../images/common/util_basket.svg);}
	}

	@media screen and (max-width:1024px){
		.area_util{padding:0; border-width:0;}
	}
	@media screen and (max-width:768px){
		.util-list{padding-left:0; padding-right:15rem;}
		.util-list li:not(:last-child){display:none;}
	}
	@media screen and (max-width:480px){
		.util-list{padding-right:0;}
	}
}

[data-util="basket"]{display:inline-flex !important; gap:2rem;}
.basket-count{display:flex; align-items:center; position:absolute; right:-10rem; top:-5rem; padding:2rem 5rem; line-height:1cap; background-color:var(--color-white); border-radius:100%; font-size:12rem; font-weight:600; color:var(--color-point); aspect-ratio:1/1;}
	/* util-search */
.search-util{
	&{display:none !important;}
	.box{position:relative; width:190rem; height:28rem;}
	input[type="text"]{width:100%; height:100%; margin:0; border:1px solid #e3e3e3;}
	.btn_search{display:block; position:absolute; right:0; top:50%; width:28rem; height:100%; background-color:transparent; transform:translateY(-50%);}
	.btn_search i{opacity:0.4; font-size:15rem;}
	.btn_search span{font-size:0;}

	.search-util__control{display:none; position:absolute; top:50%; right:10rem; width:50rem; height:50rem; background-color:transparent; font-size:0; transform:translateY(-50%);}
	.search-util__control i{font-size:25rem;}

	@media screen and (max-width:1024px){
		.box{display:none; position:absolute; right:0; top:100%; z-index:10; width:100%; height:auto; padding:20rem; box-sizing:border-box; background-color:var(--color-white); border-top:1rem solid #f0f0f0;}
		.box.active{display:block;}
		input[type="text"],
		.btn_search{height:60rem;} 
		input[type="text"]{padding-left:15rem; padding-right:65rem;}
		.btn_search{right:20rem; width:60rem;}
		.btn_search i{font-size:25rem;}
		.search-util__control{display:block;}
		.search-util__control.active i:before{content:'\e921';}	
	}

	@media screen and (max-width:480px){
		.box{padding:15rem 10rem;}
		.btn_search,
		input[type="text"]{height:50rem;} 
		.btn_search{right:10rem; width:50rem;}
		input[type="text"]{padding-right:55rem;}
		.search-util__control{right:0;}
	}
}

/* quick */
.quick-menu{
	&{opacity:0; visibility:hidden; position:fixed; right:20rem; top:50%; z-index:50; transform:translateY(-50%); transition:0.5s ease 0s; transition-property:opacity, visibility;}
	&.show{opacity:1; visibility:visible;}

	.quick-menu__list{
		&{display:flex; flex-direction:column; gap:5rem;}
		a{display:inline-flex; justify-content:center; align-items:center; width:50rem; height:50rem; box-sizing:border-box; border-radius:100%; font-size:0;}
		[data-sns="kakao"]{background-color:#fae100; color:#3c1d1e;}
		[data-sns="kakao"] span{font-size:30rem;}
		[class*="btn_"]{background-color:rgba(255,255,255,0.3); border:1rem solid rgba(0,0,0,0.1);}
		[class*="btn_"] span{opacity:0.5; font-size:var(--font23); transition:opacity 0.5s ease 0s;}
		[class*="btn_"]:hover span{opacity:1;}
	}

	@media screen and (max-width:768px){
		&{right:10rem;}
		.quick-menu__list a{width:40rem; height:40rem;}
		.quick-menu__list [data-sns="kakao"] span{font-size:22rem;}
	}

	@media screen and (max-width:480px){
		&{top:auto; bottom:5%; transform:translateY(0);}	
	}
}

/* footer */
#footer{
	.inr-1200{display:grid; grid-template-columns:180rem auto; gap:50rem;}
	.logo{display:block; width:92rem; height:58rem; background:url(../images/common/logo_blue.svg) no-repeat 50% 50%; background-size:auto 100%; font-size:0;}
	[class*="footer-inr__"]{display:flex; flex-direction:column; padding:40rem 0;}
	.footer-inr__left{
		&{justify-content:space-between; border-top:2px solid var(--color-point);}
		> div{display:flex; justify-content:space-between; align-items:flex-end;}
		.logo{flex:none;}
		a{display:flex; justify-content:center; align-items:center; height:46rem; background-color:var(--color-point); color:#fff; font-weight:700; text-transform:uppercase;}
	}
	.footer-inr__right{
		&{gap:20rem; border-top:2px solid #1f2534; font-size:14rem;}
	}
	.sns{
		&{display:flex; align-items:center; gap:5rem;}
		[data-sns]{display:block; width:24rem; height:24rem; background:url(../images/common/sns_instar.svg) no-repeat 50% 50%; background-size:100% auto;}
		[data-sns] span{font-size:0;}
		[data-sns="youtube"]{width:34rem; background-image:url(../images/common/sns_youtube.svg);}
	}
	
	@media screen and (max-width:768px){
		.inr-1200{grid-template-columns:150rem auto; gap:20rem;}
		.footer-inr__left > div{flex-wrap:wrap; gap:20rem;}
		.sns{flex:0 1 100%;}
	}
	@media screen and (max-width:480px){
		[class*="footer-inr__"]{padding-top:30rem;}
		.inr-1200{grid-template-columns:1fr;}
		.logo{width:74rem; height:46rem;}
		.footer-inr__left{gap:20rem 0; padding-bottom:0;}
		.footer-inr__left > div{flex-wrap:nowrap;}
		.sns{flex:0 1 0;}
	}
}
	/* footer link */
.footer-link{
	&{display:flex; align-items:center; gap:5rem 50rem;}
	a{opacity:0.6; display:inline-block;}	
	
	@media screen and (max-width:768px){
		&{gap:5rem 30rem;}
	}
	@media screen and (max-width:480px){
		&{flex-wrap:wrap; gap:5rem 20rem;}
	}
}
	/* footer sns */
.footer-sns{
	&{display:flex; align-items:center; gap:5rem 10rem;}
	[data-sns]{display:inline-flex; justify-content:center; align-items:center; overflow:hidden; width:40rem; height:40rem; padding:10rem 0; font-size:0;}
	[data-sns] i{opacity:0.5; transition:opacity 0.3s ease;}
	[data-sns] i:before{font-size:22rem;}
	[data-sns="facebook"] i:before{font-size:20rem;}
	[data-sns]:hover i{opacity:1;}

	@media screen and (max-width:480px){
		&{flex-wrap:wrap; justify-content:center;}
		[data-sns]{width:35rem; height:35rem; padding:0;}
	}
}	  
	/* footer info */
.footer-info{
	span{display:inline-flex; align-items:baseline; gap:0 10rem; margin-right:30rem; padding:4rem 0; color:rgba(0,0,0,0.8);}
	span i{opacity:0.4; color:rgba(0,0,0,1);}
	.biz-pop{font-size:0.85em;}
	p{opacity:0.4; margin-top:30rem; text-transform:uppercase;}

	@media screen and (max-width:1024px){
		br{display:none;}
	}
	@media screen and (max-width:480px){
		&{display:flex; flex-direction:column; gap:3rem;}
		span{margin-right:0;}
		span i{min-width:80rem;}
	}
}
	/* footer cs center */
.footer-cs{
	&{grid-area:b;}
	.tel{display:inline-block; margin:10rem 0 15rem; font-size:25rem; font-weight:600; color:var(--color-point);}

	@media screen and (max-width:1024px){
		&{padding-left:20rem;}
	}
	@media screen and (max-width:480px){
		&{padding-right:20rem; padding-left:20rem;}
	}
}
	/* footer bank */
.footer-bank{
	&{grid-area:c;}
	@media screen and (max-width:1024px){
		&{padding-right:20rem;}
	}	
	@media screen and (max-width:480px){
		&{padding-right:20rem; padding-left:20rem;}
	}
}
	/* footer address */
.footer-address{
	&{grid-area:d;}
	@media screen and (max-width:1024px){
		&{padding-right:20rem;}
	}
	@media screen and (max-width:480px){
		&{padding-right:20rem; padding-left:20rem;}
	}
}

/* sub layout구성 */
[data-sublayout=""],
[data-sublayout="product"],
[data-sublayout="product"] + .area_lnb{display:none;}
.area-subVisual{display:none !important;}

/* lnb */
.area_lnb{
	&{margin-top:60rem; margin-bottom:60rem;}
	ul{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:5rem;}
	li{min-height:65rem;}
	a{display:flex; justify-content:center; align-items:center; min-width:215rem; height:100%; box-sizing:border-box; background-color:var(--color-white); border:2rem solid #eee; font-size:var(--font18); color:#999; font-weight:600;}
	a.on{position:relative; z-index:3; border-color:var(--color-point); color:var(--color-point); box-shadow:0 20rem 30rem rgba(0,0,0,0.1);}	

	@media screen and (max-width:768px){
		.lnb.full{
			a{min-width:180rem;}
		}
	}
	@media screen and (max-width:480px){
		&{margin-top:40rem; margin-bottom:30rem;}
		li{min-height:45rem;}
		a{min-width:150rem; font-size:var(--font16);}
		.lnb.full{
			a{min-width:100rem; padding:0 10rem;}
		}
	}
}