@charset "utf-8";

body *{word-break:keep-all; box-sizing:border-box;}
body{background:#f7f5f1;}

.layout_inr{position:relative; width:87.5%; margin:auto;}

/* header */
#header{position:relative;}
#header .top{padding:25px 0; border-bottom:1px solid #373836;}
#header .top .inr{position:relative;}
#header .logo{}
#header .logo > a{position:relative; display:block; margin:auto; width:158px;}
#header .logo > a img{width:100%;}

#header .search_wrap{position:absolute; left:0; top:50%; transform:translateY(-50%); width:220px;}
#header .search_wrap input[type="text"]{position:relative; right:0; top:0; padding:7px 30px 7px 0px; width:100%; height:40px; background:0; border:0; border-bottom:1px solid #373836; outline:0;}
#header .search_wrap .btn_search{position:absolute; right:0; bottom:10px; width:23px; height:23px; line-height:30px; background:url(/images/common/icon_search.png)no-repeat 50% 50%; border:0; font-size:0; background-size:contain;}

.area_util{position:absolute; right:0; top:50%; transform:translateY(-50%);}
.area_util ul > li{display:inline-block; margin:0 15px;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{opacity:0; position:absolute; bottom:-20px; left:50%; display:inline-block; padding:0 10px; background:#f1f1f1; border-radius:50rem; font-size:12px; color:#444; white-space:nowrap; transform:translateX(-50%) translateY(-20px); transition:0.3s ease;}
.area_util [data-util]:before{content:''; display:block; width:23px; height:23px; background-repeat:no-repeat; background-position:50% 0; background-size:contain}
.area_util [data-util="login"]:before{background-image:url(/images/common/icon_login.png);}
.area_util [data-util="logout"]:before{background-image:url(/images/common/icon_logout.png);}
.area_util [data-util="join"]:before{background-image:url(/images/common/icon_signup.png);}
.area_util [data-util="mypage"]:before{background-image:url(/images/common/icon_my.png);}
.area_util [data-util="basket"]:before{background-image:url(/images/common/icon_cart.png);}
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:-7px; top:-4px; width:17px; height:17px; background:#2f3b2f; border-radius:50%; font-size:11px; color:#fff; text-align:center; line-height:17px;}

#header nav{text-align:center; border-bottom:1px solid #373836; height:60px;}
#header nav .area_util, #header nav .search_wrap{display:none;}
#header .gnb{display:flex; justify-content:center; width:1400px; margin:auto;}
#header .gnb > li{position:relative;}
#header .gnb > li+li{margin-left:100px;}
#header .gnb > li > a{display:inline-block;  padding:15px 10px; font-size:20px; color:#1e1e1e; font-weight:400; font-family:'Playfair Display', serif; transition:0.3s ease;}
#header .gnb > li:hover > ul{display:block; transition:0.4s ease;}
#header .gnb > li > ul{display:none; position:absolute; padding:10px 0; top:59px; left:50%; transform:translateX(-50%); z-index:90; width:100%; min-width:150px; text-align:left; transition:0.4s ease;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; background:#fff; border:1px solid #373836; background:#f7f5f1;}
#header .gnb > li > ul > li{position:relative;}
#header .gnb > li > ul > li > a{display:block; padding:5px 20px; font-size:16px; color:#222; transition:0.3s ease;}
#header .gnb > li > ul > li > a:hover{color:#888;}
/*#header .gnb > li > a.on{color:#00b4cb}*/

#header .bg{display:block; width:100%; height:0; position:absolute; top:100px; left:0; z-index:1; background-color:#fff; border-bottom:1px solid #f1f1f1; transition: height 0.3s ease 0s;}
#header.active .bg{height:170px;}
#header.active .gnb > li > ul{height:280px; border:0;}
#header.active .gnb > li > ul > li > a{color:#000;}
#header.active nav .gnb > li > ul{min-width:auto; left:0;}

.btn_menu{position:absolute; z-index:90; width:24px; right:2%; top:14px; text-align:center; cursor:pointer;}
.btn_menu{display:none;}
.btn_menu span{display:block; width:24px; height:2px; margin: 0 auto; background:#222; text-align:center;}
.btn_menu span:nth-child(1){margin-top:0px;}
.btn_menu span:nth-child(2){margin-top:6px;}
.btn_menu span:nth-child(3){margin-top:6px;}

.m_gnb{z-index:999; overflow-y:auto; position:fixed; top:0px; right:-100%; width:300px; height:100%; background:#f7f5f1; transition:all 0.5s ease-out 0s;}
.m_gnb.active{right:0;}
.m_gnb > ul > li > a{display:block; position:relative; padding:10px 25px; color:#000; transition:all 0.3s ease 0s; font-weight:400; font-family:'Playfair Display', serif; font-size:18px;}
.m_gnb > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(/images/main/menu_button.png) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active{}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; }
/* .m_gnb > ul > li > ul > li{border-bottom:1px solid #555;} */
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:7px 35px; font-size:15px; color:#444; }
.gnb_mo{ margin:auto; padding:18px 0 0; box-sizing:border-box; width:100%; }

.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:25px; right:-100%; width:23px; height:23px; background:url(/images/common/btn_close.png) no-repeat 50% 0/contain; font-size:0px; transition:0.8s;}
.m_gnb.active .btn_close{opacity:1; right:15px;}

.cover{position: fixed; width: 100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, 0.6); z-index:89; display:none;}
.cover.active{display:block;}


/* 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{padding:80px 0; background:#2f3b2f; border-top:1px solid #373836;}
#footer .f_logo{position:absolute; right:0; top:50%; transform:translateY(-50%); }
#footer .f_logo a{display:block; width:120px;}
#footer .f_logo a img{width:100%;}
#footer .link{}
#footer .link > li{display:inline-block; position:relative;}
#footer .link > li+li{margin-left:30px;}
#footer .link > li:nth-of-type(1):before{display:none;}
#footer .link > li > a{display:inline-block; font-size:15px; color:#fff; font-weight:500; transition:0.3s ease; opacity:0.8;}
#footer .link > li > a:hover{opacity:0.4;}
#footer .link > li > a strong{font-weight:400;}
#footer .copy{margin-top:35px; color:#fff; opacity:0.6;}
#footer .copy span{display:inline-block; margin-right:20px; font-size:14px; font-weight:300;}
#footer .copy span a{display:inline-block; color:#fff;}
#footer .copy p{margin-top:35px; font-size:12px; color:#fff; opacity:0.6;}

.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 screen and (max-width:1400px){
	#header .inr{max-width:96%;}
	#header nav .gnb, #footer .wrap, .layout_inr{width:96%;}

}


@media screen and (max-width:1200px){
    #header{ position:fixed; top:0; left:0; width:100%; z-index:100; background:#f7f5f1;}
    #header .top{padding:20px 0; height:84px;}
    #header .logo > a{width:120px;} 
    
	#header .area_util, #header .search_wrap{display:none;}
	.btn_menu{display:block; top:32px;}
    .m_gnb .btn_close{top:18px;}
	#header nav{display:none;}
	#header .m_gnb .area_util, #header .m_gnb .search_wrap{display:block;}
	#header .area_util{position:static; padding:18px 25px; width:83%; transform:none; border-right:1px solid #373836; height:60px;}
    #header .area_util ul{display:flex; justify-content:space-around;}
    #header .area_util li{margin:0;}
	#header .area_util li a{padding:0; margin:0;}
    #header .search_wrap{position:relative; padding:10px 25px; top:auto; transform:none; width:100%; border-top:1px solid #373836; border-bottom:1px solid #373836;}
    #header .search_wrap input[type="text"]{padding:3px 30px 3px 0px; height:30px; border-bottom:none;}
    #header .search_wrap .btn_search{right:25px; bottom:16px;}
}

@media screen and (max-width:1024px){
    #header .top{padding:15px 0; height:64px;}
    #header .logo > a{width:90px;} 
    
    .btn_menu{top:23px; width:22px;}
    .btn_menu span{width:22px;}
    .btn_menu span:nth-child(2),
    .btn_menu span:nth-child(3){margin-top:5px;}
    .m_gnb .btn_close{top:15px; width:20px; height:20px;}
    
    #header .area_util{padding:15px 25px; height:50px;}
    .area_util [data-util]:before{width:20px; height:20px;}
    #header .search_wrap .btn_search{width:20px; height:20px;}
    #header .search_wrap input[type="text"]{margin:0;}
    
    #footer{padding:50px 0;}
    #footer .f_logo{display:none;}
    #footer .link{text-align:center;}
    #footer .link > li+li{margin-left:20px;}
    #footer .link > li > a{font-size:13px;}
    #footer .copy{margin-top:25px; text-align:center;}
    #footer .copy span{margin:0 5px; font-size:12px;}
    #footer .copy p{margin-top:25px;}
}


@media screen and (max-width:767px){
	div[class*="area_"] .title{font-size:22px;}

    #header .top{padding:12px 0; height:52px;}
    #header .logo > a{width:70px;}
    
    .btn_menu{top:18px;}
    .m_gnb{width:100%;}
    #header .area_util{width:calc(100% / 1 - 50px); -webkit-width:calc(100% / 1 - 50px);}
    
    #footer{padding:40px 0;}
    
    .lnb > ul > li > a{min-width:90px; height:40px;}

}


@media screen and (max-width:600px){
	#footer .footer_top ul li{margin-right:15px;}
}