@charset "utf-8";

/* root 설정  */
:root{
	--color-base:#333; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#268d92;
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--font-eng:'Noto Serif KR', serif;
	--font-kor:'SUIT', serif;
	--font-combine:'Noto Serif KR', 'SUIT', serif;
	--page-pad:50px;
}
	/* root 설정 반응형 */
@media screen and (max-width:1500px){
	:root{
		--page-pad:30px;
	}
}
@media screen and (max-width:1024px){
	:root{
		--page-pad:20px;
	}
}

/* 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:rgba(38,141,146,0.5); color:#fff; text-shadow:none;}
::-moz-selection{background:rgba(38,141,146,0.5); color:#fff; text-shadow:none;}
::-webkit-selection{background:rgba(38,141,146,0.5); color:#fff; text-shadow:none;}

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

/* header */
#header{position:relative;}
#header .inr{display:flex; justify-content:space-between; flex-wrap:wrap; max-width:1625px; padding:0 var(--page-pad); margin:0 auto;}
	/* logo */
#header .logo{width:115px; margin:15px 0;}
#header .logo a{display:block;}
#header .logo img{max-width:100%;}
	/* header 반응형 */
@media screen and (max-width:1300px){
	#header .inr{height:100px;}
	#header .logo{position:absolute; left:50%; top:50%; margin:0; transform:translate(-50%, -50%);}
}
@media screen and (max-width:768px){
	#header .logo{width:100px;}
}
@media screen and (max-width:580px){
	#header .inr{height:80px;}
}
@media screen and (max-width:390px){
	#header .logo{width:80px;}
}

/* gnb */
#header nav{position:absolute; top:50%; left:50%; z-index:10; transform:translate(-50%, -50%);}
#header nav .gnb{--sizeGnb:80px; display:flex; align-items:center; gap:var(--sizeGnb); height:var(--sizeGnb);}
#header nav .gnb a{display:inline-flex; align-items:center; height:100%; transition:opacity 0.3s, color 0.3s;}
#header nav .gnb > li{position:relative; height:100%;}
#header nav .gnb > li > a{font-size:18px; font-weight:600; color:#444;}
#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; font-weight:500;}
#header nav .gnb .box ul:hover > li a:not(:hover){opacity:0.5;}
#header nav .gnb .box ul > li a:hover{color:var(--color-point);}
#header nav .gnb > li.active > a{color:var(--color-point);}
	/* active */
#header nav .gnb li.active .box{opacity:1; visibility:visible;}
	/* gnb menu control */
.gnb-btn__open{display:none; /* 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:1400px){
	#header nav .gnb{--sizeGnb:55px;}
}
@media screen and (max-width:1300px){
	#header nav{left:var(--page-pad); transform:translateY(-50%);}
	#header nav .gnb{display:none;}
	.gnb-btn__open{display:flex;}
	.area_util{margin-left:auto;}
}
@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:0; border-width:0; transform:translateY(-50%);}
	.gnb-btn__open span{width:20px;}
}
@media screen and (max-width:390px){
	.gnb-btn__open{left:-10px; min-width:45px; height:45px;}
}

/* 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:30px; margin:0 auto; padding:calc(var(--sizePad) - 10px) var(--page-pad); border-top:1px solid #e8e8e8;}
.gnb-mob .gnb > ul{display:flex; flex-wrap:wrap; align-items:stretch; gap:35px 0; margin-left:var(--sizePad);}
.gnb-mob .gnb > ul > li{flex:1 1 auto; 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 20px; padding:6px 0;}
.util-list{display:flex; align-items:center; gap:0 25px; font-size:16px; color:#999; line-height:1cap;}
[data-util="basket"]{display:inline-flex !important; align-items:center; gap:2px;}
.basket-count{display:inline-block; margin-top:-1px; padding:2px 5px; border-radius:50px; background-color:var(--color-point); font-size:11px; line-height:1.2; font-weight:600; color:var(--color-white);}
	/* util-search */
.search-util{margin-left:auto;}
.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; font-size:20px;}
.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:block; width:50px; height:50px; background-color:transparent; font-size:0;}
.search-util__control i{font-size:25px;}
	/* util-search active */
.search-util .box{display:none; position:absolute; right:0; top:100%; width:100%; height:auto; padding:20px; box-sizing:border-box; background-color:var(--color-white); border-top:1px solid #ededed;}
.search-util .box.active{display:block;}
.search-util input[type="text"],
.search-util .btn_search{height:80px;} 
.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.active i:before{content:'\e921';}
#wrap.search{position:relative;}
#wrap.search #header{z-index:30; background-color:var(--color-white);}
#wrap.search:after{content:''; opacity:0.6; display:block; position:absolute; top:0; left:0; z-index:20; width:100%; height:100%; background:#000;}
	
	/* util 반응형 */
@media screen and (max-width:1024px){
	.area_util{padding:0; border-width:0;}
	.util-list{display:none;}
		/* util-search */
	.search-util input[type="text"],
	.search-util .btn_search{height:60px;}
	.search-util input[type="text"]{font-size:18px;}
}
@media screen and (max-width:580px){
		/* util-search */
	.search-util .box{padding-top:10px; padding-bottom:10px;}
}
@media screen and (max-width:480px){
		/* util-search */
	.search-util__control{right:0;}
	.search-util .box{padding:15px 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;}
}
@media screen and (max-width:390px){
		/* util-search */
	.search-util{margin-right:-10px;}
	.search-util__control{width:45px; height:45px;}
	.search-util input[type="text"]{padding-right:45px; font-size:16px;}
	.search-util .btn_search{width:45px;}
}

/* quick */
.quick-menu{opacity:0; visibility:hidden; position:fixed; right:20px; bottom:50px; z-index:90; 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,1); border:1px solid #ddd; 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 div.btn a{display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.quick-menu__list .btn_up:before{content:''; opacity:0.7; display:block; width:35px; height:24px; background:url(../images/main/slide_arrow.svg) no-repeat 50% 50%; background-size:100% auto; transform:rotate(-90deg); transition:opacity 0.3s;}
.quick-menu__list .btn_up:hover:before{opacity:1;}
.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;}
	.quick-menu__list .btn_up:before{width:25px;}
}
@media screen and (max-width:480px){
	.quick-menu{top:auto; bottom:5%; transform:translateY(0);}
	.quick-menu__list li:not(:first-child){display:none;}
}

/* footer */
#footer{background-color:#f1f1f1;}
#footer h2{margin-bottom:5px; font-size:15px; font-weight:500; color:var(--color-base);}
.footer-inr{display:grid; grid-template:"a b" "a d" / 20% 1fr; gap:20px; align-items:flex-start; max-width:1500px; padding:60px var(--page-pad) 30px; margin:0 auto; font-size:14px; color:#777;}
	/* footer link */
.footer-info strong{color:#444;}
.footer-info .link{display:flex; flex-wrap:wrap; align-items:center; margin-bottom:20px;}
.footer-info .link{gap:5px 10px;}
.footer-info .link a{display:inline-flex; justify-content:center; align-items:center; min-height:30px; box-sizing:border-box; padding:2px 15px; background:#999; font-size:15px; font-weight:500; color:var(--color-white); text-align:center; line-height:1.2em; transition:background 0.2s;}
.footer-info .link a:hover{background-color:#444;}
	/* footer logo */
.footer-logo{grid-area:a;}
.footer-logo span{display:block;}
.footer-logo img{width:164px;}
	/* footer info */
.footer-info{grid-area:b;}
.footer-info span{display:inline-flex; align-items:baseline; gap:0 5px; margin-right:40px; 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; font-size:13px; color:#9d9d9d;}
	/* footer bank */
.footer-bank{grid-area:name;}
	/* footer address */
.footer-address{grid-area:name;}
	/* footer 반응형 */
@media screen and (max-width:1024px){
	.footer-inr{grid-template:"a" "b" "d" / 1fr; gap:20px 0;}
	.footer-logo{margin-bottom:20px;}
	.footer-logo img{width:120px;}
	.footer-cs h2{display:none;}
	.footer-info span{flex-wrap:wrap; margin-right:30px;}
}
@media screen and (max-width:580px){
	.footer-logo{margin-bottom:10px;}
	.footer-logo img{width:100px;}
	.footer-info .link{gap:5px; margin-bottom:20px;}
	.footer-info .link a{font-size:14px;}
	.footer-cs .tel{font-size:25px;}
}

/* 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);}
}