@charset "utf-8";

#wrap{background:#faf7f3;}

/* header */
#header{position:absolute; top:0; left:0; z-index:100; width:100%;}
#header .inr{position:relative; width:95%; margin:0 auto; padding:30px 0; border-bottom:1px solid rgba(255,255,255,0.5);}
#header .logo{}
#header .logo > a{display:block; width:202px;}
#header .logo > a img{width:100%;}
#header .logo_main{display:block;}
#header .logo_sub{display:none;}

#header nav{position:absolute; top:20px; left:50%; transform:translateX(-50%);}
#header nav .gnb{font-size:0;}
#header nav .gnb > ul{white-space: nowrap;}
#header nav .gnb > ul > li{display:inline-block; margin-left:80px; position:relative;}
#header nav .gnb > ul > li:first-child{margin-left:0px;}
#header nav .gnb > ul > li > a{display:block; padding:10px 15px 30px; font-size:18px; color:#fff; font-weight:600; transition:0.3s ease; font-family:'Cormorant Infant', serif;}
#header nav .gnb > ul > li > a:hover{opacity:0.7;}
/*#header nav .gnb > ul > li > a.on{color:#118d9c;}*/
#header nav .gnb > ul > li > ul{display:none; position:absolute; top:62px; left:50%; transform:translateX(-50%); z-index:90; width:100%; min-width:160px; box-sizing:border-box; padding:20px; background:#fff; text-align:left;}
#header nav .gnb > ul > li > ul > li{padding:2px 0px; margin:5px 0;}
#header nav .gnb > ul > li > ul > li > a{position:relative; display:block; font-size:16px; color:#222; transition:0.3s ease; font-weight:500; font-family:'Cormorant Infant', serif;}
#header nav .gnb > ul > li > ul > li > a:hover{color:#aaa;}
#header nav .gnb > ul > li > ul > li > ul{display:none;}
/*#header nav .gnb > ul > li.active > ul{opacity:1; visibility:visible;}*/

.ico_down_arrow{display:block; position:absolute; left:50%; transform:translateX(-50%); top:40px; width:15px; transition:0.3s ease;}
.ico_down_arrow img{width:100%;}

.area_util_mo{display:none !important;}
.area_util{display:flex; position:absolute; right:0px; top:50%; transform:translateY(-50%);}
.area_util ul{display:flex; margin-left:40px;}
.area_util ul > li+li{margin-left:40px;}
.area_util ul > li > a{display:block; position:relative; width:18px; height:18px;}
.area_util ul > li > a img{width:100%;}
.area_util [data-util="logout"]{margin-top:-3px; width:auto !important; font-size:16px; color:#fff; font-family:'Cormorant Infant', serif;}
.area_util .util_main{display:block;}
.area_util .util_sub{display:none;}

.search_wrap{position:relative;}
.search_wrap > span{display:block; width:18px; height:18px; cursor:pointer; transition:0.3s ease;}
.search_wrap > span:hover{opacity:0.7;}
.search_wrap > span > img{width:100%;}
.search_wrap .btn_search{background:url(/images/module/icon_search.png)no-repeat 50% 50%;}
.search_wrap .form_wrap{position:absolute; display:none; top:50px; left:50%; transform:translateX(-50%); width:280px; background:#fff; padding-left:20px; height:97px;}
.search_wrap .form_wrap form{position:relative; margin-top:30px; width:calc(100% - 58px);}
.search_wrap .form_wrap input[type="text"]{padding:6px 35px 6px 6px; width:100%; outline:none; font-size:16px; color:#333; background:#f3efe8; border:none;}
.search_wrap .form_wrap .btn_search,
.search_wrap_mo .form_wrap .btn_search{position:absolute; top:9px; right:8px; width:18px; height:18px; background:url(../images/common/icon_search_b.png)no-repeat center/contain; border:none; outline:none;}
.search_wrap .form_wrap .close{position:absolute; top:38px; right:20px; margin-top:1px; cursor:pointer;}
/*.search_wrap .ico_down_arrow{opacity:0; visibility:hidden;}*/
/*.search_wrap.open .ico_down_arrow{opacity:1; visibility:visible;}*/
.search_wrap .ico_main,
.search_wrap .close_main{display:block;}
.search_wrap .ico_sub,
.search_wrap .close_sub{display:none;}
.search_wrap_mo{display:none;}


#header .btn_menu{display:none; position:absolute; margin-top:-9px; top:50%; right:-5px; z-index:91; width:40px; height:40px; 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:30px; height:18px; 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:#fff; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:30px;}
#header .btn_menu span:after{content:''; width:25px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{right:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; right:0px; top:8px; width:20px; 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.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-30px);}
#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;}

#header.fixed .btn_menu span i,
#header.fixed .btn_menu span:before,
#header.fixed .btn_menu span:after{background:#21201e}

/* 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:45px;}*/
#footer .inr{margin:0 auto; max-width:1600px; width:96%;}
#footer .top{position:relative; margin-bottom:268px; padding:120px 0 240px; background:#111110; overflow:hidden; }
#footer .top .inr{display:flex; justify-content:space-between;}
#footer .top > i{display:block; position:absolute; bottom:-130px; left:0; text-align:center; width:100%; font-size:240px; color:#fff; opacity:0.05; font-family:'Cormorant Infant', serif; font-weight:500;}
#footer h3{margin-bottom:35px; font-size:28px; color:#fff; font-family:'Cormorant Infant', serif; font-weight:500;}
#footer .copy{padding-right:22%;}
#footer .copy .info{padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #666;}
#footer .copy .info span{display:inline-block; margin:0 25px 5px 0; color:#fff; opacity:0.8; font-size:14px;}
#footer .copy .info span a{color:#fff;}
#footer .copy .info span em{display:inline-block; margin-right:5px; color:#bbb;}
#footer .copy p{font-size:12px; color:#fff; opacity:0.3;}
#footer .link ul{margin-top:-15px;}
#footer .link ul li{border-bottom:1px solid #ddd;}
#footer .link ul li a{display:block; padding:15px 0; position:relative; font-size:14px; color:rgba(255,255,255,0.8); width:270px; transition:0.3s ease;}
#footer .link ul li a:hover{opacity:0.6;}
#footer .link ul li a:after{content:''; display:block; position:absolute; right:0; top:20px; width:30px; height:10px; background:url(../images/common/arrow_st01_w.png)no-repeat center/contain;}
#footer .sns ul li+li{margin-top:20px;}
#footer .sns ul li a{display:block; font-size:14px; color:#fff; opacity:0.8; transition:0.3s ease;}
#footer .sns ul li a:hover{opacity:1;}
#footer .sns ul li a img{display:inline-block; margin:-2px 14px 0 0; vertical-align:middle; width:21px;}
#footer .bottom{position:fixed; bottom:0; left:0; width:100%; z-index:-1; padding:60px 0; background:url(../images/common/img_contact_bg.jpg)no-repeat center/cover;}
#footer .bottom .inr{display:flex; justify-content:space-between; align-items:center;}
#footer .bottom .txt .tel{display:block; font-size:32px; color:#fff; font-family:'Cormorant Infant', serif; font-weight:500; line-height:22px;}
#footer .bottom .txt > ul{display:flex; margin-top:25px;}
#footer .bottom .txt > ul li{position:relative; color:#fff; opacity:0.8; font-size:16px;}
#footer .bottom .txt > ul li em{display:inline-block; margin-right:8px;}
#footer .bottom .txt > ul li+li{margin-left:55px;}
#footer .bottom .txt > ul li:before{content:''; display:block; position:absolute; top:4px; left:-27px; width:1px; height:14px; background:#fff; opacity:0.5;}
#footer .bottom .txt > ul li:first-child:before{display:none;}
#footer .btn_top{display:block; width:80px; height:80px; border-radius:50%; border:1px solid #fff; font-weight:600; font-size:16px; color:#fff; text-align:center; font-family:'Cormorant Infant', serif; font-weight:500;}
#footer .btn_top img{display:block; margin:21px auto 6px; width:13px;}
#footer .mo_link{display:none;}


@media screen and (max-width:1920px){
    #header nav .gnb > ul > li{margin-left:60px;}
}

@media screen and (max-width:1700px){
    #header nav .gnb > ul > li{margin-left:40px;}
}

@media screen and (max-width:1640px){
    #footer .top{padding:120px 0 14%;}
    #footer .top > i{font-size:14vw; bottom:-16%;}
}

@media screen and (max-width:1600px){
    #header .inr{width:96%;}
    #header .logo > a{width:180px;}
    #header nav .gnb > ul > li{margin-left:40px;}
    #header nav .gnb > ul > li > a{padding:10px 6px 30px; font-size:16px;}
    #header nav .gnb > ul > li > ul{top:60px;}
    .area_util ul{margin-left:30px;}
    .area_util ul > li+li{margin-left:30px;}
    .search_wrap .form_wrap{top:49px;}
    
    #footer .copy{padding-right:0;}
    #footer .link ul li a{width:200px;}
}


@media screen and (max-width:1400px){
/*    #header .nav_pc{display:none;}*/
    
    #header{transition:0.3s ease;}
    #header.fixed{position:fixed; background:#faf7f3 !important; top:0; left:0;}
    #header.fixed .inr{border-bottom:none !important;}
    #header.fixed .logo_main,
    #header.fixed .area_util .util_main,
    #header.fixed .search_wrap .ico_main,
    #header.fixed .search_wrap .close_main{display:none;}
    #header.fixed .logo_sub,
    #header.fixed .area_util .util_sub,
    #header.fixed .search_wrap .ico_sub,
    #header.fixed .search_wrap .close_sub{display:block;}
    #header .btn_menu{display:block;}
    #header .btn_menu.active{border-radius:50%; background:#faf7f3;}
    #header .area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100vh; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
    
    #header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0; z-index:90; width:100%; height:100vh; padding:0px; background:rgba(0,0,0,0.5); border-width:0px; transition:0.3s ease 0.7s;}
    #header nav{position:relative; top:0; left:0; transform:none;}
    #header .area_menu_all .gnb{overflow-y:auto; position:absolute; top:0px; left:-80%; z-index:10; width:80%; height:100%; background:#faf7f3; transition:0.7s ease;}
    #header .area_menu_all .gnb > ul li{position:relative; margin-left:0;}
	#header .area_menu_all .gnb > ul > li{display:block; padding:0px;}
	#header .area_menu_all .gnb > ul > li > a{display:block; width:auto; padding:10px 40px 10px 15px; margin-left:0px; font-size:17px; text-align:left; color:#21201e;}
	#header .area_menu_all .gnb > ul > li > ul{opacity:1; visibility:visible; position:static; width:auto; margin:0 15px 15px; padding:0; border-width:0px; transition:none; transform:none; box-shadow:none; background:transparent !important; border-top:rgba(33,32,30,0.3);}
	#header .area_menu_all .gnb > ul > li > ul > li{display:block; margin:0px;}
	#header .area_menu_all .gnb > ul > li > ul > li:hover > a,
	#header .area_menu_all .gnb > ul > li > ul > li:focus > a{color:#aaa;}
	#header .area_menu_all .gnb > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all .gnb > ul > li > ul > li.active > a,
	#header .area_menu_all .gnb > ul > li > ul > li.active:hover > a,
	#header .area_menu_all .gnb > ul > li > ul > li.active:focus > a{color:#aaa;}
	#header .area_menu_all .gnb > ul > li > ul > li > a{display:block; width:auto; padding:5px 40px 5px 13px; font-size:15px; color:#4f4f4f;}
	#header .area_menu_all .gnb > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all .gnb > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all .gnb > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all .gnb > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all .gnb > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all .gnb > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
	#header .area_menu_all .open{display:block; position:absolute; right:5px; top:5px; width:35px; height:35px; 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:12px; height:2px; margin-top:-6px; background:#cfcece;}
	#header .area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-5px;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,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active .gnb{left:0px;}
	
    .area_util{display:none}
    .area_util_mo{display:block !important; position:static; padding:30px 15px; transform:none; border-bottom:1px solid rgba(33,32,30,0.2); margin-bottom:20px;}

    .m_btn_homepage{display:block;}
    .btn_homepage{margin:30px auto 0; padding:14px 12px; width:80%; height:50px;} 
    .btn_homepage img{padding-top:7px; width:20px;}
    
    .search_wrap_mo{display:block; background:#21201e; padding:15px;}
    .search_wrap_mo .form_wrap .btn_search{background:url(../images/common/icon_search.png)no-repeat center/contain;}
    .search_wrap_mo .form_wrap{width:80%; position:relative; margin:auto;}
    .search_wrap_mo input[type="text"]{color:#fff; width:100%; padding:5px 35px 5px 10px; background:rgba(255,255,255,0.15); border:none;}
    .area_util ul{margin-right:0; justify-content:center; margin-left:0;}
    .area_util [data-util="logout"]{color:#21210e;}
}

@media screen and (max-width:1024px){
    #header .inr{padding:20px 0;}
    #header .logo > a{width:140px;}
    
    #header .btn_menu{margin-top:-7px; width:35px; height:35px; right:5px;}
    #header .btn_menu span{width:25px; height:15px;}
    #header .btn_menu span:before{content:''; width:25px;}
    #header .btn_menu span:after{content:''; width:20px;}
    #header .btn_menu span i{top:6px; width:15px;}
    #header .btn_menu.active span i,
    #header .btn_menu.active span:before,
    #header .btn_menu.active span:after{transform:translateX(-30px);}
/*    #header .btn_menu.active em{margin-top:-6px;}*/
    
    #footer .top .inr{flex-direction:column-reverse;}
    #footer .top{padding:80px 0; margin-bottom:236px;}
    #footer .top > i{display:none;}
    #footer h3{margin-bottom:20px; font-size:22px; }
    #footer .top h3{text-align:center;}
    #footer .link{display:none;}
    #footer .mo_link{display:flex; margin-bottom:14px; justify-content:center;}
    #footer .mo_link li+li{margin-left:20px;}
    #footer .mo_link li a{display:block;}
    #footer .mo_link li a span{font-size:13px; color:rgba(255,255,255,0.8);}
    #footer .copy .info{margin-bottom:13px; padding-bottom:13px; text-align:center; opacity:0.8;}
    #footer .copy .info > br{display:none;}
    #footer .copy .info span{font-size:12px; margin:0 6px 2px;}
    #footer .copy p{text-align:center;}
    #footer .sns{margin-bottom:50px;}
    #footer .sns ul{display:flex; justify-content:center;}
    #footer .sns ul li+li{margin-top:0; margin-left:25px;}
    #footer .sns ul li a{font-size:0;}
    #footer .sns ul li a img{margin:0;}
    #footer .bottom .txt .tel{font-size:25px;}
    #footer .bottom .txt > ul{margin-top:20px;}
    #footer .bottom .txt > ul li{font-size:14px;}
    #footer .bottom .txt > ul li+li{margin-left:39px;}
    #footer .bottom .txt > ul li:before{left:-19px;}
    
    #footer .btn_top{width:70px; height:70px; font-size:13px;}
    #footer .btn_top img{margin:19px auto 5px; width:11px;}
}

@media screen and (max-width:767px){
    .search_wrap_mo{padding:10px;}
    .search_wrap_mo .form_wrap{width:100%;}
    .search_wrap_mo input[type="text"]{background:none;}
    
    #header .area_menu_all .gnb > ul > li > a{font-size:16px;}
    #header .area_menu_all .gnb > ul > li > ul > li > a{font-size:14px;}
    
    #footer .top{padding:45px 0; margin-bottom:233px;}
    #footer h3{margin-bottom:15px; font-size:16px;}
    #footer .sns{margin-bottom:30px;}
/*    #footer .sns ul li a img{width:18px;}*/
    #footer .mo_link{margin-bottom:12px;}
    #footer .copy .info{margin-bottom:10px; padding-bottom:10px;}
    #footer .bottom{padding:45px 0;}
    #footer .bottom .txt .tel{font-size:22px;}
    #footer .bottom .txt > ul{display:block;}
    #footer .bottom .txt > ul li+li{margin-left:0;}
    #footer .bottom .txt > ul li:before{display:none;}
    
    #footer .btn_top{width:50px; height:50px; font-size:12px;}
    #footer .btn_top img{margin:12px auto 3px; width:9px;}
}