@charset "utf-8";

/* root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#caa958;
	--color-point2:#572d0d;
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
    --font-subkor:'SOGANGUNIVERSITYTTF', Gulim, Sans-serif;;
	--font-eng:'EB Garamond', serif;
	--font-kor:'Pretendard', serif;
	--font-combine:'EB Garamond', 'Pretendard', serif;
	--page-pad:3.646vw/* 70px */;
	--color-gradient:linear-gradient(90deg, #caa958, #572d0d);
}
	/* root 설정 반응형 */
@media screen and (max-width:1500px){
	:root{
		--page-pad:2vw/* 30px */;
	}
}
@media screen and (max-width:768px){
	:root{
		--page-pad:15px;
	}
}


/* custom scrollbar */
@media (min-width:1025px){
	::-webkit-scrollbar {width:18px;}
	::-webkit-scrollbar-thumb {border:5px solid #f7f7f7; border-radius:20px; background:#c5c5c5;}
	::-webkit-scrollbar-track {background:#f7f7f7;}
}

/* custom selection */
::selection{background:#ecdbb2; color:#fff; text-shadow:none;}
::-moz-selection{background:#ecdbb2; color:#fff; text-shadow:none;}
::-webkit-selection{background:#ecdbb2; color:#fff; text-shadow:none;}

/* 공통설정 */
#content img{max-width:100%;}
.inr_1400{max-width:1400px; margin:0 auto; padding:0 20px;}

/* header */
#header{position:relative;}
#header .inr{display:flex; justify-content:space-between; flex-wrap:wrap; padding:0 var(--page-pad);}
	/* 구조 */
.area_util{order:2;}
	/* logo */
#header .logo{width:277px; margin:15px 0;}
#header .logo a{display:block;}
#header .logo img{max-width:100%;}
    /* home link */
    #header .home_link{display:none; width:34px; height:34px; position:absolute; right:52px; top:22px;}
	/* header 반응형 */
@media screen and (max-width:1024px){
	#header .logo{width:230px; margin-left:50px;}
}
@media screen and (max-width:520px){
	#header .logo{width:180px;}
}
@media screen and (max-width:480px){
    #header .home_link{display:block;}
}
@media screen and (max-width:320px){
	#header .logo{width:150px; margin-left:40px;}
}

/* gnb */
#header nav{display:flex; justify-content:space-between; align-items:stretch; box-sizing:border-box; padding:0 var(--page-pad); border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
#header nav .gnb{--sizeGnb:60px; display:flex; align-items:center; gap:var(--sizeGnb); height:var(--sizeGnb); margin-left: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{font-size:17px; font-weight:500;}
#header nav .gnb .box{opacity:0; visibility:hidden; position:absolute; left:50%; z-index:60; min-width:150px; box-sizing:border-box; padding:15px 20px; background:var(--color-white); border:1px solid #e8e8e8; transform:translateX(-50%); transition:opacity 0.3s, visibility 0.3s;}
#header nav .gnb .box ul > li{margin:10px 0; font-size:15px;}
#header nav .gnb .box ul > li a:hover{opacity:0.5;}
	/* active */
#header nav .gnb li.active .box{opacity:1; visibility:visible;}
	/* gnb menu control */
.gnb-btn__open{display:flex; justify-content:center; align-items:center; min-width:50px; background-color:var(--color-white);}
.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:4px; width:18px;}
.gnb-btn__open span:before,
.gnb-btn__open span:after,
.gnb-btn__open span i{content:''; display:block; width:100%; height:2px; background:#444; 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 i{animation-delay:0.2s;}
.gnb-btn__open:hover span:after{animation-delay:0.3s;}
	/* animation */
@keyframes gnbShow{
	0%{transform:translateX(0);}
	50%{transform:translateX(150%);}
	100%{transform:translateX(0%);}
}
	/* gnb 반응형 */
@media screen and (max-width:1200px){
	#header nav .gnb{gap:var(--sizeGnb) 35px; margin-left:30px;}
	#header nav .gnb > li > a{font-size:16px;}
}
@media screen and (max-width:1024px){
	#header nav{border-width:0;}
	#header nav .gnb{display:none;}
		/* gnb menu control */
	.gnb-btn__open{position:absolute; height:50px; top:50%; left:10px; border-width:0; transform:translateY(-50%);}
	.gnb-btn__open span{width:20px;}
}
@media screen and (max-width:480px){
	.gnb-btn__open{left: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); border-bottom:1px solid #e8e8e8; transition:opacity 0.3s, visibility 0.3s;}
.gnb-mob .util{display:none;}
.gnb-mob .gnb{--sizePad:50px; margin:0 auto; padding:calc(var(--sizePad) - 10px) var(--page-pad);}
.gnb-mob .gnb > ul{display:flex; flex-wrap:wrap; align-items:stretch; gap:35px 0; margin-left:var(--sizePad);}
.gnb-mob .gnb > ul > li{width:calc(100% / 6); box-sizing:border-box; padding:0 var(--sizePad); font-size:17px;}
.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:10px;}
.gnb-mob .gnb > ul > li > .box > ul > li{padding:7px 0;}
.gnb-mob .gnb > ul > li > .box a{font-size:16px;}
.gnb-mob .gnb button.open{display:none; position:absolute; top:10px; right:10px; width:40px; height:40px; box-sizing:border-box; padding:10px; background-color:transparent; font-size:0;}
.gnb-mob .gnb button.open:before,
.gnb-mob .gnb button.open:after{content:''; display:block; position:absolute; width:11px; height:1px; background-color:#999; border-radius:2px; transform-origin:50% 50%; transition:transform 0.2s cubic-bezier(0.86,0,0.07,1);}
.gnb-mob .gnb button.open:before{margin-left:1px; transform:rotate(45deg);}
.gnb-mob .gnb button.open:after{margin-left:9px; 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;}
	/* close */
.gnb-mob__close{display:block; position:absolute; right:20px; top:20px; width:35px; height:35px; background-color:transparent; font-size:0;}
.gnb-mob__close i{font-size:35px; transition:transform 0.3s;}
.gnb-mob__close:hover i{transform:rotate(90deg);}
	/* active */
.gnb-mob.active{opacity:1; visibility:visible;}
	/* 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 30px;}
	.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:20px; border-bottom:1px solid #f0f0f0; font-size:18px;}
	.gnb-mob .gnb > ul > li > .box{display:none; margin-top:0; padding:20px; background-color:#f8f8f8;}
	.gnb-mob .gnb > ul > li > .box a{padding:7px 0; font-size:16px;}
	.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:15px; padding:0 20px;}
	.gnb-mob .util ul > li a{display:block; padding:15px 0;}
		/* hover */
	.gnb-mob .gnb > ul > li a:hover{opacity:1;}
		/* close */
	.gnb-mob__close i{color:var(--color-white);}
}

/* util */
.area_util{display:flex; align-items:center; gap:0 50px; padding:6px 0;}
.util-list{display:flex; align-items:center; gap:0 30px; font-size:14px; color:#666; line-height:1cap;}
[data-util="basket"]{display:inline-flex !important; align-items:center; gap:2px;}
.basket-count{display:inline-block; padding:2px 5px; border-radius:50px; background-color:var(--color-point2); font-size:11px; line-height:1.2; font-weight:600; color:var(--color-white);}
	/* 도매문의 */
.util-inquiry{display:flex; align-items:center; gap:0 10px; min-height:45px; box-sizing:border-box; padding:3px 25px; background-image:linear-gradient(90deg, var(--color-point), var(--color-point2)); border-radius:50rem; color:var(--color-white); line-height:1cap;}
.util-inquiry i{font-size:14px; font-weight:600;}
.util-inquiry a{display:inline-block; font-size:20px; font-weight:700;}
	/* util-search */
.search-util{margin-left:auto; border-left:1px solid #e5e5e5;}
.search-util form{height:100%;}
.search-util .box{position:relative; width:550px; height:100%;}
.search-util input[type="text"]{width:100%; height:100%; margin:0; padding-left:30px; border:0;}
.search-util input::placeholder{color:#c1c1c1;}
.search-util .btn_search{display:block; position:absolute; right:0; top:50%; width:28px; height:100%; background-color:transparent; transform:translateY(-50%);}
.search-util .btn_search i{font-size:25px;}
.search-util .btn_search span{font-size:0;}
.search-util__control{display:none; position:absolute; top:50%; right:10px; width:50px; height:50px; background-color:transparent; font-size:0; transform:translateY(-50%);}
.search-util__control i{font-size:25px;}
	/* util 반응형 */
@media screen and (max-width:1500px){
	.search-util .box{width:350px;}
}
@media screen and (max-width:1024px){
	.area_util{padding:0; border-width:0;}
	.util-list{display:none;}
		/* 도매문의 */
	.util-inquiry{margin-right:50px;}
		/* util-search */
	.search-util{border-left-width:0;}
	.search-util .box{display:none; position:absolute; right:0; top:100%; z-index:10; width:100%; height:auto; padding:5px 20px; box-sizing:border-box; background-color:var(--color-white); border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;}
	.search-util .box.active{display:block;}
	.search-util input[type="text"],
	.search-util .btn_search{height:60px;} 
	.search-util input[type="text"]{padding-left:15px; padding-right:65px;}
	.search-util .btn_search{right:20px; width:60px; background-size:20px 20px;}
	.search-util__control{display:block;}
	.search-util__control.active i:before{content:'\e921';}
}
@media screen and (max-width:650px){
		/* 도매문의 */
	.util-inquiry{min-height:40px; padding:3px 15px;}
	.util-inquiry i{display:none;}
	.util-inquiry a{font-size:15px;}
}
@media screen and (max-width:480px){
		/* 도매문의 */
	.util-inquiry{display:none;}
		/* util-search */
	.search-util__control{right:0;}
	.search-util .box{padding:5px 10px;}
	.search-util .btn_search,
	.search-util input[type="text"]{height:50px;} 
	.search-util .btn_search{right:10px; width:50px;}
	.search-util input[type="text"]{padding-right:55px;}
}

/* quick */
.quick-menu{opacity:0; visibility:hidden; position:fixed; right:20px; top:50%; z-index:90; 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:5px;}
.quick-menu__list li{position:relative;}
.quick-menu__list .btn{--sizeBtn:70px; display:flex; justify-content:center; align-items:center; width:var(--sizeBtn); height:var(--sizeBtn); box-sizing:border-box; background-color:rgba(255,255,255,0.3); border:1px solid rgba(0,0,0,0.1); border-radius:100%; font-size:0; aspect-ratio:1/1;}
.quick-menu__list div.btn{flex-direction:column; justify-content:space-evenly;}
.quick-menu__list [data-sns="kakao"]{background-color:#fae100; border-color:#fae100; color:#3c1d1e;}
.quick-menu__list [data-sns="kakao"] span{font-size:40px;}
.quick-menu__list [class*="btn_"] span{opacity:0.5; font-size:23px; transition:opacity 0.5s ease 0s;}
.quick-menu__list [class*="btn_"]:hover span{opacity:1;}
.quick-menu__list [data-quick="tel"] .btn{flex-wrap:wrap; align-content:center; background-color:var(--color-point2); border-color:var(--color-point2); color:rgba(255,255,255,0.8); font-size:12px; font-weight:500; transition:color 0.3s;}
.quick-menu__list [data-quick="tel"] .btn span{width:100%; font-size:20px; text-align:center;}
.quick-menu__list [data-quick="tel"]:hover .btn{color:rgba(255,255,255,1);}
.quick-tel_hover{opacity:0; visibility:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; position:absolute; top:0; right:0; z-index:5; width:305px; height:100%; box-sizing:border-box; padding:5px 15px; background:var(--color-white); border:1px solid var(--color-point2); border-radius:50rem; color:#582e0e; line-height:1cap; box-shadow:0 30px 20px rgba(0,0,0,0.1); transition:0.3s; transition-property:opacity, visibility;}
.quick-tel_hover span{display:flex; justify-content:center; align-items:center; width:38px; background-color:#e8e3d3; border-radius:100%; aspect-ratio:1/1; font-size:25px;}
.quick-tel_hover em{font-size:15px; font-weight:500;}
.quick-tel_hover a{margin-left:10px; font-size:20px; font-weight:700;}
.quick-menu__list [data-quick="tel"]:hover .quick-tel_hover{opacity:1; visibility:visible;}
	/* quick 반응형 */
@media screen and (max-width:768px){
	.quick-menu{right:10px;}
	.quick-menu__list .btn{--sizeBtn:50px;}
	.quick-menu__list [data-sns="kakao"] span{font-size:30px;}
}
@media screen and (max-width:480px){
	.quick-menu{top:auto; bottom:5%; transform:translateY(0);}
	.quick-menu__list li:last-child{display:none;}
	.quick-menu__list [data-quick="tel"] .btn{font-size:0;}
}

/* footer */
#footer{border-top:1px solid #e5e5e5;}
#footer h2{margin-bottom:5px; font-size:15px; font-weight:500; color:var(--color-base);}
.footer-inr{display:grid; grid-template:"a b c" "d d d" / 13% 55% 1fr; gap:50px 20px; align-items:flex-start; padding:60px var(--page-pad) 20px; font-size:15px; color:var(--color-base);}
	/* footer link */
.footer-info .link{display:flex; align-items:center; margin-bottom:30px;}
.footer-info .link{gap:5px 30px;}
.footer-info .link a{display:inline-block; font-size:16px; font-weight:500;}
	/* footer logo */
.footer-logo{grid-area:a;}
.footer-logo span{display:block; padding-left:38px;}
.footer-logo img{width:71px;}
	/* footer info */
.footer-info{grid-area:b;}
.footer-info span{display:inline-flex; align-items:baseline; gap:0 5px; margin-right:25px; padding:3px 0;}
.footer-info p{margin-top:30px;}
	/* footer cs center */
.footer-cs{grid-area:c;}
.footer-cs .tel{display:inline-block; margin:10px 0 5px; font-size:30px; font-weight:700;}
	/* footer copyright */
.footer-copyright{grid-area:d; display:flex; align-items:center; height:80px; box-sizing:border-box; padding:5px 50px; background-color:#f5f5f5; border-radius:50rem; font-size:15px; font-weight:300; color:#999;}
	/* footer bank */
.footer-bank{grid-area:name;}
	/* footer address */
.footer-address{grid-area:name;}
	/* footer 반응형 */
@media screen and (max-width:1300px){
	.footer-inr{grid-template:"a b" "a c" "d d"/ 13% 1fr;}
}
@media screen and (max-width:1024px){
	.footer-inr{grid-template:"a" "b" "c" "d"/ 1fr; gap:20px 0;}
	.footer-logo span{padding-left:10px;}
	.footer-logo img{width:61px;}
	.footer-cs h2{display:none;}
	.footer-info span{flex-wrap:wrap;}
}
@media screen and (max-width:580px){
	.footer-logo{margin-bottom:10px;}
	.footer-logo img{width:51px;}
	.footer-info .link{margin-bottom:20px;}
	.footer-info .link a{font-size:15px;}
	.footer-cs .tel{font-size:25px;}
	.footer-copyright{height:auto; padding:10px 20px; font-size:13px;}
}

/* button motion */
.primary-button{overflow:hidden; display:inline-flex; justify-content:center; align-items:center; position:relative;}/* size별도선언할것 */
.primary-button:hover,
.primary-button:hover span{color:#fff;}
.primary-button .round{position:absolute; top:5px; left:10px; z-index:-1; background-image:var(--color-gradient); border-radius:50%; animation:scale-down 0.2s forwards;}
.primary-button.animate .round{animation:scale-up 0.5s forwards;}
@keyframes scale-up{
    to{transform:scale(700);}
}
@keyframes scale-down{
    from{transform:scale(700);}
    to{ransform:scale(0);}
}