@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:#111; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#c99e67;
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--font-nanum:'Nanum Myeongjo', serif;
}

/* 2) 폰트설정 - 디자인 맞게 변경하면 됩니다. */
body{font-size:var(--font-base, 16rem);}
@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%;}
.inr_1462{max-width:1502rem; box-sizing:border-box; margin:0 auto; padding:0 20rem;}

/* header */
#header{display:flex; flex-direction:column; position:absolute; top:0; left:0; z-index:50; width:100%;}
#header .logo{order:1;}
#header nav{order:3;}
#header .area_util{order:2;}

#header .logo{width:122rem; height:108rem; margin:0 auto;}
#header .logo a{display:block; width:100%; height:100%; background:url(../images/common/logo_white.svg) no-repeat 50% 50%; background-size:auto 100%; font-size:0;}
#header .logo img{max-width:100%;}

@media screen and (max-width:480px){
	#header .logo{height:70rem;}
}


/* gnb */

#header .inr_1462{position:relative; width:100%; padding-top:30rem;}
#header nav{margin-top:45rem;}
#header nav > div[class*="inr"]{display:flex; align-items:stretch;}
#header nav .gnb{--sizeGnb:80rem; display:flex; justify-content:center; align-items:center; gap:var(--sizeGnb);}
#header nav .gnb a{display:inline-flex; align-items:center; height:100%; transition:opacity 0.3s;}
#header nav .gnb > li{position:relative; height:100%;}
#header nav .gnb > li > a{padding-bottom:10rem; font-size:20rem; font-weight:500; color:var(--color-white);}
#header nav .gnb .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;}
#header nav .gnb .box ul > li{margin:10rem 0; font-size:16rem;}
#header nav .gnb .box ul > li a:hover{opacity:0.5;}
	
/* active */
#header nav .gnb li.active .box{opacity:1; visibility:visible;}
@media screen and (max-width:1024px){
	#header .inr_1462{padding-top:10rem;}
	#header nav {margin-top:0;}
	#header nav .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;}
.gnb-btn__open i{font-size:0;}
.gnb-btn__open span{overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4rem; width:18rem;}
.gnb-btn__open span:before,
.gnb-btn__open span:after,
.gnb-btn__open span i{content:''; display:block; width:100%; height:2rem; background:#fff; transform:translateX(0);}
.gnb-btn__open:hover span:before,
.gnb-btn__open:hover span:after,
.gnb-btn__open:hover span i{animation:gnbShow 0.5s ease forwards;}
.gnb-btn__open:hover span:before{animation-delay:0.1s;}
.gnb-btn__open:hover span:after{animation-delay:0.3s;}
.gnb-btn__open:hover span i{animation-delay:0.2s;}


@media screen and (max-width:1024px){
.gnb-btn__open{display:flex; position:absolute; height:50rem; top:50%; left:10rem; border-width:0; transform:translateY(-50%);}
.gnb-btn__open span{width:20rem;}
}
@media screen and (max-width:480px){
.gnb-btn__open {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;}
.gnb-mob .util{display:none;}
.gnb-mob .basket-count{background-color:var(--color-point); color:#fff;}
.gnb-mob .gnb{--sizePad:50rem; max-width:1260rem; margin:0 auto; padding:calc(var(--sizePad) - 10rem) 20rem;}
.gnb-mob .gnb > ul{display:flex; flex-wrap:wrap; align-items:stretch; gap:35rem 0; margin-left:var(--sizePad);}
.gnb-mob .gnb > ul > li{width:calc(100% / 6); box-sizing:border-box; padding:0 var(--sizePad); font-size:15rem;}
.gnb-mob .gnb > ul > li a{display:inline-block; transition:opacity 0.3s;}
.gnb-mob .gnb > ul > li > a{font-weight:600;}
.gnb-mob .gnb > ul > li > .box{margin-top:10rem;}
.gnb-mob .gnb > ul > li > .box > ul > li{padding:7rem 0;}
.gnb-mob .gnb > ul > li > .box a{font-size:14rem;}
	
.gnb-mob .gnb 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;}
.gnb-mob .gnb button.open:before,
.gnb-mob .gnb button.open: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);}
.gnb-mob .gnb button.open:before{margin-left:1rem; transform:rotate(45deg);}
.gnb-mob .gnb button.open:after{margin-left:9rem; transform:rotate(-45deg);}
.gnb-mob .gnb button.open.active:before{transform:rotate(-45deg);}
.gnb-mob .gnb button.open.active:after{transform:rotate(45deg);}
	
/* hover */
.gnb-mob .gnb > ul > li a:hover{opacity:0.5;}

/* active */
.gnb-mob.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);}
	.gnb-mob .util,
	.gnb-mob .gnb{width:80%; box-sizing:border-box; margin:0; background-color:var(--color-white);}
	.gnb-mob .gnb{overflow-y:auto; flex:auto; padding:0 0 30rem;}
	.gnb-mob .gnb > ul{display:block; margin-left:0;}
	.gnb-mob .gnb > ul > li{position:relative; width:100%; padding:0;}
	.gnb-mob .gnb > ul > li a{display:block;}
	.gnb-mob .gnb > ul > li > a{padding:20rem; border-bottom:1rem solid #f0f0f0; font-size:18rem;}
	.gnb-mob .gnb > ul > li > .box{display:none; margin-top:0; padding:20rem; background-color:#f8f8f8;}
	.gnb-mob .gnb > ul > li > .box a{padding:7rem 0; font-size:16rem;}
	.gnb-mob .gnb > ul > li > .box > ul > li{padding:0;}
	.gnb-mob .gnb button.open{display:block;}
	.gnb-mob .util{flex:none; display:block; background-color:#f8f8f8; border-bottom:1px solid #f0f0f0;}
	.gnb-mob .util ul{display:flex; align-items:center; gap:15rem; padding:0 20rem;flex-wrap: wrap;}
	.gnb-mob .util ul > li a{display:block; padding:15rem 0;}
		/* hover */
	.gnb-mob .gnb > ul > li a:hover{opacity:1;}
		/* close */
	.gnb-mob__close i{color:var(--color-white);}
}

/* util */
.area_util{position:absolute; right:20rem; top:80rem;}
.area_util .util-list{display:flex; align-items:center; gap:25rem; height:42rem; padding:0 30rem; background-color:var(--color-point); border-radius:50em; font-size:14rem; color:var(--color-white);}
.area_util .util-list > li{display:flex; align-items:center; position:relative;}
.area_util .util-list > li:before{content:''; display:block; position:absolute; left:-12rem; top:2rem; width:1rem; height:15rem; background-color:#d7b589; transform:rotate(10deg);}
.area_util .util-list > li:first-child:before{display:none;}

@media screen and (max-width:1024px){
	.area_util{padding:0; border-width:0;}
	.area_util .util-list{display:none;}
}

[data-util="basket"]{display:inline-flex !important; gap:2rem;}
.basket-count{display:inline-flex; align-items:center; padding:2rem 5rem; line-height:1cap; background-color:var(--color-white); border-radius:100%; font-size:12rem; font-weight:600; color:var(--color-point);}
	/* util-search */
.search-util{display:none !important;}
.search-util .box{position:relative; width:190rem; height:28rem;}
.search-util input[type="text"]{width:100%; height:100%; margin:0; border:1px solid #e3e3e3;}
.search-util .btn_search{display:block; position:absolute; right:0; top:50%; width:28rem; height:100%; background-color:transparent; transform:translateY(-50%);}
.search-util .btn_search i{opacity:0.4; font-size:15rem;}
.search-util .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;}
	/* util 반응형 */
@media screen and (max-width:1024px){
	.search-util .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;}
	.search-util .box.active{display:block;}
	.search-util input[type="text"],
	.search-util .btn_search{height:60rem;} 
	.search-util input[type="text"]{padding-left:15rem; padding-right:65rem;}
	.search-util .btn_search{right:20rem; width:60rem;}
	.search-util .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){
	.search-util__control{right:0;}
	.search-util .box{padding:15rem 10rem;}
	.search-util .btn_search,
	.search-util input[type="text"]{height:50rem;} 
	.search-util .btn_search{right:10rem; width:50rem;}
	.search-util input[type="text"]{padding-right:55rem;}
}

/* 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;}
.quick-menu.show{opacity:1; visibility:visible;}
.quick-menu__list{display:flex; flex-direction:column; gap:5rem;}
.quick-menu__list a{display:inline-flex; justify-content:center; align-items:center; width:60rem; height:60rem; box-sizing:border-box; border-radius:100%; font-size:0;}
.quick-menu__list [data-sns="kakao"]{background-color:#fae100; color:#3c1d1e;}
.quick-menu__list [data-sns="kakao"] span{font-size:40rem;}
.quick-menu__list [class*="btn_"]{background-color:rgba(255,255,255,0.3); border:1rem solid rgba(0,0,0,0.1);}
.quick-menu__list [class*="btn_"] span{opacity:0.5; font-size:23rem; transition:opacity 0.5s ease 0s;}
.quick-menu__list [class*="btn_"]:hover span{opacity:1;}
	/* quick 반응형 */
@media screen and (max-width:768px){
	.quick-menu{right:10rem;}
	.quick-menu__list a{width:50rem; height:50rem;}
	.quick-menu__list [data-sns="kakao"] span{font-size:30rem;}
}
@media screen and (max-width:480px){
	.quick-menu{top:auto; bottom:5%; transform:translateY(0);}	
}

/* footer */
#footer{position:relative; min-height:540rem; background:url(../images/common/footer_bg.jpg) no-repeat 50% 0; background-size:cover;}
#footer .inr{display:flex; gap:99rem; position:relative; max-width:1462rem; margin:0 auto; padding:130rem 20rem 0;}
#footer .none-mob{display:none;}
.footer-cs,
.footer-bank,
.footer-address{display:none !important;}
.footer-logo{flex:none; width:171rem;}
.footer-logo img{width:100%;}
.footer-inr__top{display:flex; justify-content:space-between; align-items:center;}
.footer-inr__bottom{display:flex; flex-direction:column; gap:20rem 0; padding-top:40rem; padding-bottom:40rem; font-size:15rem; color:#857868;}
	/* footer link */
.footer-link{display:flex; align-items:center;flex-wrap: wrap;}
.footer-link{gap:5rem 30rem;}
.footer-link a{display:inline-block; padding:15rem 0; font-size:15rem; font-weight:500;}
.footer-link strong{font-weight:normal; color:#d3c3b0;}
	/* footer sns */
.footer-inr__top .sns{display:flex; align-items:center; gap:5rem 10rem;}
.footer-inr__top .sns [data-sns]{display:inline-flex; justify-content:center; align-items:center; overflow:hidden; width:40rem; height:40rem; padding:10rem 0; font-size:0;}
.footer-inr__top .sns [data-sns] i{opacity:0.5; transition:opacity 0.3s ease;}
.footer-inr__top .sns [data-sns] i:before{font-size:22rem;}
.footer-inr__top .sns [data-sns="facebook"] i:before{font-size:20rem;}
.footer-inr__top .sns [data-sns]:hover i{opacity:1;}
	/* footer info */
.footer-info{grid-area:a; position:relative;}
.footer-info span{display:inline-flex; align-items:baseline; gap:0 5rem; margin-right:25rem; padding:6rem 0; font-weight:500;}
.footer-info span i{flex:none;}
.footer-info p{margin-top:70rem;}
	/* footer cs center */
.footer-cs{grid-area:b;}
.footer-cs .tel{display:inline-block; margin:10rem 0 15rem; font-size:25rem; font-weight:600; color:var(--color-point);}
	/* footer bank */
.footer-bank{grid-area:c;}
	/* footer address */
.footer-address{grid-area:d;}
#footer .btn_top{display:block; position:absolute; right:20rem; top:220rem; width:80rem; height:80rem; border-radius:100%; background:var(--color-point) url(../images/common/top_arrow.svg) no-repeat 50% 50%; background-size:20rem 21rem; font-size:0; transition:background 0.3s;}
#footer .btn_top:hover{background-color:#857868;}
	/* 관련사이트 */
.relate-site{position:absolute; right:0; bottom:-15rem; max-width:260rem; width:100%;}
.relate-site__btn{position:relative; width:100%; height:55rem; box-sizing:border-box; padding:0 30rem 0 20rem; background-color:transparent; border:1rem solid rgba(255,255,255,0.2); font-size:15rem; font-weight:600; text-align:left; color:#d3c3b0; transition:0.3s ease;}
.relate-site__btn .xi-plus-min{position:absolute; right:20rem; top:50%; margin-top:-10rem; font-size:20rem; transition:transform 0.3s;}
.relate-site__btn.active{background-color:#c99e67; border-color:#c99e67; color:var(--color-white);}
.relate-site__btn.active .xi-plus-min{transform:rotate(45deg);}
.relate-site .list{display:none; position:absolute; bottom:100%; width:100%; box-sizing:border-box; padding:35rem 20rem; background:#c99e67; border-bottom:1rem solid rgba(255,255,255,0.1);}
.relate-site .list > li{margin-top:10rem;}
.relate-site .list > li:first-child{margin-top:0;}
.relate-site .list a{opacity:0.5; display:inline-block; font-size:14rem; font-weight:600; color:var(--color-white); transition:opacity 0.3s;}
.relate-site .list a:hover{opacity:1;}
	/* footer 반응형 */
@media screen and (max-width:1024px){
	#footer .inr{display:block; padding-top:100rem;}
	.footer-info p{margin-top:30rem;}
	.footer-info br{display:none;}
}
@media screen and (max-width:768px){
	#footer .btn_top{top:200rem; width:60rem; height:60rem;}
	#footer .inr{padding-top:70rem;}
}
@media screen and (max-width:480px){
	#footer .inr{padding-bottom:40rem;}
	#footer .btn_top{top:130rem;}
	.footer-logo{width:130rem;}
	.footer-info span{display:flex;}
	.footer-info p{margin-bottom:20rem;}
	.relate-site{position:relative; width:auto; max-width:100%;}
}

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

/* lnb */
.area_lnb{margin-top:50rem; margin-bottom:60rem;}
.area_lnb ul{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:5rem;}
.area_lnb li{min-height:65rem;}
.area_lnb 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:18rem; color:#999; font-weight:600;}
.area_lnb 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){
	.area_lnb li{min-height:55rem;}
	.area_lnb a{min-width:150rem; font-size:16rem;}
	.lnb.full a{min-width:100rem; padding:0 10rem;}
}

/* ready */
.ready-page { padding:80rem 0 50rem; text-align:center; }
.ready-page strong { display:block; font-size:35rem; }
.ready-page strong i { opacity:0.2; display:block; margin-bottom:10rem; font-size:45rem; }
.ready-page p { margin-top:20rem; font-size:18rem; line-height:1.4; }
/* ready-반응형 */
@media screen and (max-width:480px) {
 .ready-page { padding-top:20rem; }
.ready-pag strong { font-size:30rem; }
.ready-pag p { font-size:16rem; word-break:keep-all; }
.ready-pag p br { display:none; }
 }


/* update header lang */

.area_util { display: flex; gap: 20rem; }
#header .lang-selector{position: relative;translate: 0 1rem;font-size: 16rem;display: flex;}
#header .lang-selector .lang-btn{display: flex;align-items: center;color: #fff;font-weight: 600;font-size: 16rem;background: transparent;border: 1px solid;border-radius: 50rem;padding: 10rem 20rem;}
#header .lang-selector .arrow{ margin-left: 15rem; translate: 0 1rem; display: inline-block; width: 11rem; height: 6rem; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
#header .lang-selector .lang-list:not(.isExpanded){ opacity: 0; visibility: hidden; }
#header .lang-selector .lang-list{ position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8rem); padding: 16rem 30rem; background: #fff; border-radius: 8rem; box-shadow: var(--shadow); font: 15rem var(--font-pre); color: #444; }

@media screen and (max-width: 1024px) {
	#header .lang-selector .lang-btn { font-size: 13rem; padding: 7rem 15rem; }
	.area_util { top: 25rem; right: 10rem; }
}