@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

html {font-size: 0.040083333vw;}
html,body{font-size: 6.25%;}
body{font-size:16rem; word-break:keep-all; overflow-y:overlay;}

.inr {position: relative; width: 1380rem; max-width: 92%; margin:0 auto;}
.font_serif {font-family: 'Noto Serif KR', serif;}
:root {
	--primary: #46b270;
}

/* header */
#header {position: relative; height: 90rem; text-align: center; background:#fff; z-index: 1000;}
#header .logo {position:absolute; left:50rem; top:50%; transform:translateY(-50%);}
#header .logo > a {display:inline-block; width:255rem; height:52rem; background:url(../images/common/logo.svg) no-repeat center / contain; font-size:0px; vertical-align:middle;}
#header nav {display: inline-block;}
#header nav .gnb > li {display:inline-block; position:relative; margin: 32rem 30rem 0;}
#header nav .gnb > li > a{display:inline-block; padding-bottom:20rem; font-size:17rem; color: #000; font-weight:500;}
#header nav .gnb > li > a.on{color:var(--primary);}
#header nav .gnb > li:first-child > a{margin-left:0px;}
#header nav .gnb > li > ul {opacity:0; visibility:hidden; position:absolute; left:50%; top: 40rem; z-index:90; width:100%; min-width:180rem; box-sizing:border-box; padding:20rem 10rem;  background:#fff; border:1px solid #e1e1e1; border-radius: 5rem; text-align:left; transition:0.3s ease; transform: translate(-50%, 0);}
#header nav .gnb > li > ul > li {padding:5rem 0; text-align: center;}
#header nav .gnb > li > ul > li > a {display:inline-block; font-size:15rem; color:#444; transition:0.3s ease;}
#header nav .gnb > li > ul > li > a:hover{color:var(--primary); text-decoration: underline;}
#header nav .gnb > li > ul > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}

/* area_util */
.area_util {position:absolute; right:50rem; top:50%; display: flex; align-items: center; height: 100%; transform:translateY(-50%); z-index: 1000;}
.area_util .search_wrap {display: flex; align-items: center; margin: 0 8rem;}
.area_util .search_wrap form {position: relative; opacity: 0; visibility: hidden; height: 45rem; margin-right: 7rem; transition: all .5s ease;}
.area_util .search_wrap form input {width: 0; height: 100%; font-size: 13rem; border-radius: 50rem; border: 1px solid #ddd; transition: all 0.5s ease;}
.area_util .search_wrap form button {opacity: 0; visibility: hidden; position:absolute; right:0; top: 0; width: 50rem; height: 100%; font-weight: 600; font-size: 12rem; color: #abcc60; background: none; transition: all 0.5s ease 0.2s;}
.area_util .search_wrap button[data-util="search"] {position: relative; background: none; transition: all 0.5s ease;}
.area_util .search_wrap button[data-util="search"] span {position: relative; display:block; width:25rem; height:25rem; font-size: 0; background: url(/images/common/i_h_search.svg) no-repeat center / 20rem; border-radius: 100%; transition: all 0.3s ease;}
.area_util .search_wrap button[data-util="search"]::before {opacity: 0; visibility: hidden; position:absolute; left:50%; top:50%; content:''; width:30rem; height:30rem; border-radius: 100%; background: #abcc60; transform: translate(-50%, -50%);}
.area_util .search_wrap.active form {opacity: 1; visibility: visible;}
.area_util .search_wrap.active form input {width: 235rem; padding: 0 50rem 0 15rem;}
.area_util .search_wrap.active form button {opacity: 1; visibility: visible; }
.area_util .search_wrap.active button[data-util="search"] span {background-image:url(/images/common/i_close.svg); background-size: 12rem !important;}
.area_util .search_wrap.active button[data-util="search"]::before {opacity: 1; visibility: visible;}
.area_util ul {display: flex; align-items: center;}
.area_util ul > li {position: relative; display:inline-block; margin:0 10rem;}
.area_util ul > li > a {position:relative; display: block; position:relative; width: 25rem; height: 25rem; font-size: 0; background-repeat: no-repeat; background-position: center;}
.area_util ul > li > a[data-util="logout"] {background-image: url(/images/common/i_h_unlock.svg);}
.area_util ul > li > a[data-util="login"] {background-image: url(/images/common/i_h_lock.svg);}
.area_util ul > li > a[data-util="mypage"] {background-image: url(/images/common/i_h_mypage.svg);}
.area_util ul > li > a[data-util="basket"] {background-image: url(/images/common/i_h_cart.svg);}
.area_util ul > li > a[data-util="basket"] i {position:absolute; right:-8rem; top:-3rem; display: block; width: 16rem; height: 16rem; text-align: center; border-radius: 100%; font-size: 8rem; font-weight: 700; color: #fff; background: #46b270;}

/* fullmenu */
.btn_all_menu {position: relative; display: inline-block; width: 30rem; height: 30rem; margin-left: 15rem;}
.btn_all_menu i {position:absolute; left:50%; top:50%; display: block; width: 18rem; height:18rem; transform: translate(-50%, -50%);transition: all .3s ease; }
.btn_all_menu i[data-util="menu_open"] span { opacity: 1; visibility: visible;  position: absolute; left:0; top:0; width: 6rem; height:6rem; background-color: #000;transition: all .3s ease; }
.btn_all_menu i[data-util="menu_open"] span:nth-child(2) {left:auto; right:0;}
.btn_all_menu i[data-util="menu_open"] span:nth-child(3) {top:auto; bottom:0;}
.btn_all_menu i[data-util="menu_open"] span:nth-child(4) {left:auto; right:0; top:auto; bottom:0;}
.btn_all_menu.open i {width: 20rem; height: 20rem; background: url(/images/common/i_close.svg) no-repeat center / contain;}
.btn_all_menu.open i span {opacity: 0; visibility: hidden;}

#fullmenu {opacity: 0; visibility: hidden; position: fixed; right:-100%; top:0; width: 40%; height:100%; padding: 80rem; transition: .7s ease; box-sizing: border-box; z-index: 10; background: var(--primary);}
#fullmenu .menu {opacity: 0; visibility: hidden; display: flex; height:100%; flex-wrap: wrap; align-content: center; justify-content: flex-start; text-align: left; transition:none;}
#fullmenu .menu > li {flex-basis: 100%; margin: 15rem 0;}
#fullmenu .menu > li > a {display: inline-block; margin-bottom: 3rem; font-size: 35rem; font-weight: 700; color: #fff;}
#fullmenu .menu > li > ul li {display: inline-block; margin: 3rem 0; margin-right: 20rem;}
#fullmenu .menu > li > ul li a {display: inline-block; font-size: 18rem; color: #fff; opacity: .5; transition: .3s;}
#fullmenu .menu > li > ul li a:hover {opacity: 1; text-decoration: underline;}
#fullmenu.open {opacity: 1; visibility: visible; right: 0;}
#fullmenu.open .menu {opacity: 1; visibility: visible;}

.btn_all_close {opacity: 0; visibility: hidden; position:fixed; left:0; top:0; width:100%; height:100%; font-size: 0; background:rgba(0, 0, 0, .5); z-index: 1; transition: .3s ease;}
body.open .btn_all_close {opacity: 1; visibility: visible;}
body.open {overflow: hidden;}
body.open .btn_all_close {opacity: 1; visibility: visible;}
body.open {overflow: hidden;}
body.open .area_util .search_wrap button[data-util="search"] span,
body.open .area_util > ul {filter: invert(1);}
body.open .area_util ul > li > a[data-util="basket"] i {background: #000;}

/* btn_menu */
#header .btn_menu{display:none; position:absolute; top:50%; right:0px; z-index:91; width:58px; height:58px; font-size:0px; text-align:center; transform:translateY(-50%); transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:19px; height:12px; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2px; background:#222; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:19px;}
#header .btn_menu span:after{content:''; width:19px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:5px; width:19px; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .btn_menu em{display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:19px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(19px); transition:transform 0.5s ease 0.5s;}
#header .btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#222; transform:rotate(0);}
#header .btn_menu em i:nth-of-type(1){top:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
#header .btn_menu em i:nth-of-type(2){bottom:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
#header .btn_menu:hover span i{opacity:0;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-19px);}
#header .btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
#header .btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
#header .btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
#header .btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
#header .btn_menu.active em i:nth-of-type(1){top:6px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:8px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}

/* shop */
 *[data-shop-list="default"] > li > a .percent{padding:10px 15px !important; margin-top:0px !important;}
 *[data-shop-list="default"] > li > a > em{font-size:18px;}

/* footer */
#footer {margin-top:125rem; padding: 60rem 0; font-size: 14rem; background: #111;}
#footer .family {position:absolute; right:0; top:0;}
#footer .family p {position:relative; width: 250rem; max-width: 100%; padding: 12rem 0; font-weight: 600; color: #fff; border-bottom: 1px solid #fff; cursor: pointer;}
#footer .family p::after {position:absolute; right:10rem; top:50%; content:''; width:8rem; height:8rem; background: url(/images/common/i_arrow.svg) no-repeat center / contain; filter: invert(1); transform: translate(0, -50%) rotate(90deg);}
#footer .family ul {opacity: 0; visibility: hidden; position:absolute; left:0; bottom:50rem; width:100%; overflow: hidden; border: 1px solid #ddd; transition: .5s ease;}
#footer .family ul li {background:#fff; border-bottom: 1px solid #ddd;}
#footer .family ul li:last-child {border-bottom: none;}
#footer .family ul li a {display: block; padding: 15rem 20rem;}
#footer .family.active ul {opacity: 1; visibility: visible;}
#footer .link {display: flex; align-items: center; margin-bottom: 30rem;}
#footer .link li {margin-right: 10rem;}
#footer .link li a {display: inline-block; padding: 12rem 20rem; color: rgba(255, 255, 255, .8); background:rgba(255, 255, 255, .1);}
#footer address span {position: relative; display: inline-block; padding-right: 15rem; margin: 2rem 10rem; margin-left: 0; color: #666;}
#footer address span::after {position:absolute; right:0; top:50%; content:''; width:1px; height:12rem; background:#fff; transform: translateY(-50%); opacity: .2;}
#footer address span:nth-child(3)::after,
#footer address span:last-child::after,
#footer address span.last::after {display: none;}
#footer address a {display: inline-block; color: #666; transition: all 2s;}
#footer address .sns{width:120px; float:right; text-align:right; margin-top:-15rem; }
#footer address .sns > a{display:inline-block; width:45px; height:45px; line-height:45px; font-size:0; background:#292929; background-repeat:no-repeat; background-position:center center; cursor: pointer;}
#footer address .sns > a.insta{background-image: url(../images/common/icon_sns_insta.png);}
#footer address .sns > a.youtube{background-image: url(../images/common/icon_sns_youtube.png);}
#footer address .sns > a:hover{opacity:.6;}
#footer .copy {margin-top: 30rem; padding-top: 30rem; font-size: 12rem; letter-spacing: 2rem; color: #666; border-top: 1px solid rgba(255, 255, 255, .1);}

/* lnb */
.lnb{max-width:1200px; margin:0 auto 50px;}
.lnb > ul{text-align:center;}
.lnb > ul > li{display:inline-block; margin:0 5px;}
.lnb > ul > li > a{display:inline-block; display:flex; flex-direction:column; justify-content:center; min-width:140px; height:50px; box-sizing:border-box; border:1px solid #e7e7e7; font-size:14px; text-align:center;}
.lnb > ul > li > a.on{border-color:#222; color:#222;}

@media (min-width:2000px){
	html, html.safari.desktop {font-size:0.05254860746190225vw;}
}

@media screen and (max-width:1500px){
	#header nav .gnb > li {margin: 32rem 25rem 0;}
	.area_util .search_wrap.active form input {width: 200rem;}
}

@media (max-width:1480px){
	html, html.safari.desktop {font-size:0.06756756756756757vw;}
}

@media screen and (max-width:1380px){
	#header .logo {left: 30rem;}
	.area_util {right: 30rem;}
	#footer {margin-top: 100rem;}
}

@media screen and (max-width:1280px){
	body {overflow-x: hidden;}

	#fullmenu {width: 45%; padding: 60rem;}

	.area_util .search_wrap > div {opacity: 0; visibility: hidden; position:absolute; top:90rem; right:-30rem; width: 0; background-color: #fafafa; transition: all .5s ease;}
	.area_util .search_wrap form {width: 100%; margin: 0;}
	.area_util .search_wrap.active > div {opacity: 1; visibility: visible; right: -30rem; width: 100%; padding: 15rem 20rem; border-top: 1px solid #efefef;}
	.area_util .search_wrap.active form input {width: 100%;}
}

@media screen and (max-width:1024px){
	html, html.safari.desktop {font-size:0.09775171065493645vw;}
	body {overflow: auto;}

	#header  {height: 80rem; z-index: 999;}
	#header .btn_menu{display:block;}
	#header .inr{padding:10px 0px;}
	.btn_all_menu {display: none;}

	#header .logo {left: 20rem;}
	#header .logo > a {width: 210rem; height: 42rem;}

	.area_util {z-index: 99;}
	.area_util .search_wrap form {margin-right: 5rem;}
	.area_util .search_wrap.active form input {width: 220rem;}
	
	#header .area_menu_all {display:block; opacity:0; visibility:hidden; position:fixed; top:0px; right: -50%; z-index:90; width: 50%; height:100%;  padding: 80rem 30rem 0; background:transparent; border-width:0px; box-sizing: border-box; transition:0.7s ease; background:var(--primary); }	
	#header .area_menu_all .area_util {display: none;}
	#header .area_menu_all > ul > li:not(.gnb_cate){display:block;}
	#header .area_menu_all .gnb{overflow-y:auto; z-index:10; width:100%; height:100%; box-sizing: border-box;}
	#header .area_menu_all > ul li{position:relative;}
	#header .area_menu_all > ul > li{display:block; padding:0px; margin: 0; border-bottom:1px solid rgba(255, 255, 255, .3);}
	#header .area_menu_all > ul > li > a{display:block; padding:20rem 50rem 20rem 0; font-size:18rem; color: #fff; text-align:left; box-sizing: border-box;}
	#header .area_menu_all > ul > li > ul{opacity:1; visibility:visible; position:static; padding:10rem 20rem; background:rgba(0, 0, 0, .03); border-width:0px; transition:none; transform: none; border-radius: 0;}
	#header .area_menu_all > ul > li > ul > li{display:block; margin:0px; padding: 0; text-align: left;}
	#header .area_menu_all > ul > li > ul > li:hover > a,
	#header .area_menu_all > ul > li > ul > li:focus > a{color:#fff;}
	#header .area_menu_all > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul > li > ul > li.active > a,
	#header .area_menu_all > ul > li > ul > li.active:hover > a,
	#header .area_menu_all > ul > li > ul > li.active:focus > a{color:#fff;}
	#header .area_menu_all > ul > li > ul > li > a{display:block; width:auto; padding: 7rem 0; color: #eee; font-size: 13rem;}
	#header .area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all .open {display:block; position:absolute; right:5rem; top:15rem; width:35rem; height:35rem; background:transparent; font-size:0px;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:8rem; height:2px; margin-top:-4rem; background:#fff;}
	#header .area_menu_all .open:before{margin-left:-4rem; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-3rem;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}
	#header .area_menu_all.active {opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active {right: 0;}
	#header .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
	body.active #header .btn_close {opacity:1; visibility:visible; transition-delay:0s;}
	.btn_all_menu,
	#fullmenu {display: none;}
    #header nav .gnb > li > a.on{color:#fff;}
	body.active .area_util,
	body.active .area_util .search_wrap,
	body.active .area_util .search_wrap button[data-util="search"] span {filter: invert(1);}
	body.active .area_util ul > li > a[data-util="basket"] i {background-color: #000;}
	body.active #header .btn_menu em i {background: #fff;}
	
	.area_util{right:60px;}
	.area_util ul > li > a span{display:none;}

	.lnb{margin:0 auto 30px;}
}

@media (max-width:860px){
	html, html.safari.desktop {font-size:0.13020833333333335vw;}
	#header .logo > a {width: 200rem;}
	.area_util {flex-wrap: wrap; height: auto;}
	.area_util ul > li {margin: 0 7rem;}
	.area_util ul > li > a {width: 22rem; height: 22rem;}
	.area_util .search_wrap {margin: 0 5rem;}
	.area_util .search_wrap button[data-util="search"] span {width: 22rem; height: 22rem; background-size: 17rem;}
	.area_util .search_wrap button[data-util="search"]::before {width: 25rem; height: 25rem;}
	.area_util .search_wrap form {height: 40rem; margin-right: 5rem;}
	.area_util .search_wrap form button {width: 40rem; line-height: 43rem;}
	.area_util .search_wrap.active form input {width: 180rem; padding: 0 40rem 0 10rem; font-size: 12rem;}
	.area_util .search_wrap.active button[data-util="search"] span {background-size: 10rem !important;}	
	#footer address {position: relative; padding-right: 130rem;}
	#footer address .sns {position: absolute; right: 0; bottom: 0;}
	#footer address .sns > a {width: 40rem; height: 40rem; background-size: 20rem;}
}

@media screen and (max-width:650px){
	#header > .area_util {display: none;}
	#header .area_menu_all {width: 55%; padding: 30rem 20rem;}
	#header .area_menu_all .area_util {position: relative; top:auto; right: auto; display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: flex-start; transform: none;}
	#header .area_menu_all > ul > li > a {font-size: 16rem; }
	#header .area_menu_all > ul > li > ul {padding: 10rem 15rem;}

	.area_util .search_wrap {width: 100%; margin: 20rem 0 15rem;}
	.area_util .search_wrap form {opacity: 1; visibility: visible; height: 45rem; margin-right: 0;}
	.area_util .search_wrap form input {width: 100%; padding: 10rem 50rem 10rem 15rem; font-size: 13rem;}
	.area_util .search_wrap form button {opacity: 1; visibility: visible; width: 50rem; line-height: 48rem;}
	.area_util .search_wrap button[data-util="search"] {display: none;}

	#footer .family p {width: 180rem; }
}

@media screen and (max-width:540px){
	html, html.safari.desktop {font-size:0.26666666666666665vw;}
	body {font-size: 14rem;}
	#header {height: 60rem;}
	#header .logo {left: 15rem;}
	#header .logo > a {width: 170rem;}

	#header .area_menu_all {width: 70%; padding: 20rem;}
	#header .area_menu_all > ul > li > a {padding: 15rem 30rem 15rem 0;}
	#header .area_menu_all .open {right: 0; top: 10rem;}
	.area_util .search_wrap {margin: 20rem 0 15rem;}
	.area_util ul > li > a[data-util="basket"] i {line-height: 16rem;}

	#footer {margin-top: 55rem; padding: 45rem 0;}
	#footer .link {margin-bottom: 22rem;}
	#footer .link li {margin-right: 5rem;}
	#footer .link li a {padding: 8rem 15rem 5rem; font-size: 13rem;}
	#footer .family {position: relative; right: auto; top: auto; margin-bottom: 20rem;}
	#footer .family p {width: 100%; padding: 15rem 30rem 15rem 15rem; color: rgba(255, 255, 255, .5); font-weight: 300; border: none; box-sizing: border-box; background: rgba(0, 0, 0, .3);}
	#footer .family p::after {right: 15rem;}
	#footer .family ul li a {font-size: 13rem; padding: 12rem 15rem;}
	#footer .copy {padding-top: 20rem; letter-spacing: 0;}
	#footer address {padding-right: 0; font-size: 12rem;}
	#footer address span {padding-right: 10rem; margin: 2rem 5rem;}
	#footer address span::after {height: 10rem;}
	#footer address span:nth-child(2)::after,
	#footer address span:nth-child(5)::after,
	#footer address span:nth-child(7)::after {display: none;}
	#footer address .sns {position: relative; right: auto; bottom: auto; display: flex; float: none; margin-top: 20rem;}
	#footer address .sns > a {width: 35rem; height: 35rem; margin-right: 5rem; background-size: 15rem;}
}

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

}