@charset "utf-8";

/* header */
#header{position:fixed; top:0; left:0; width:100%; z-index:80;}

#header .top_banner .box{display:flex; position:relative; padding:0 2%; align-items:center; justify-content:center; height:43px; width:100%;}
#header .top_banner .box a{display:flex; align-items:center; justify-content:center; margin-right:10px; color:#fff; font-size:15px;}
#header .top_banner .box a em{display:inline-block; margin-right:50px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#header .top_banner .box .btn{padding:5px; width:25px; height:25px; cursor:pointer;}
#header .top_banner .box .btn a img{width:100%;}
#header .top_banner .box .btn.close{padding:6px; transition:0.3s ease; opacity:0.6;}
#header .top_banner .box .btn.close:hover{opacity:1;}
#header .top_banner.active{display:none;}

#header .bottom{position:relative; height:100px;}
#header .bottom:before{content:''; display:block; position:absolute; top:0; left:0; width:1000px; height:100%; background:#fff; transition:1.2s ease;}
#header.fixed .bottom:before{width:100%;}
#header .bottom .inr{position:relative; display:flex; padding:0 80px; align-items:center; width:100%; height:100%;}
#header .logo{margin-right:80px; font-size:0;}
#header .logo > a{display:block; width:93px;}
#header .logo > a img{width:100%;}
#header nav .gnb{font-size:0;}
#header nav .gnb > ul{white-space: nowrap;}
#header nav .gnb > ul > li{display:inline-block; margin-left:50px; position:relative;}
#header nav .gnb > ul > li:first-child{margin-left:0px;}
#header nav .gnb > ul > li > a{display:block; padding:0 15px; height:100px; line-height:100px; font-size:20px; color:#111; transition:0.3s ease; font-family:'Marcellus', 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:100px; left:50%; transform:translateX(-50%); z-index:90; width:100%; min-width:160px; box-sizing:border-box; padding:20px; background:#fff; text-align:left; box-shadow:0 0 20px rgba(0,0,0,0.1);}
#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;}
#header nav .gnb > ul > li > ul > li > a:hover{color:#aaa;}
#header nav .gnb > ul > li > ul > li > ul{display:none;}

#header .right{position:absolute; display:flex; align-items:center; top:50%; right:80px; transform:translateY(-50%);}
.area_util_mo{display:none !important;}
.area_util{margin-left:5px;}
.area_util ul{display:flex;}
.area_util ul li{margin-left:30px;}
.area_util ul li a{display:block; position:relative; padding:5px; width:34px; height:34px;}
.area_util ul li a img{width:100%; transition:0.3s ease;}
.area_util ul li a img:hover{opacity:0.7;}
.area_util ul li a i{display:block; position:absolute; bottom:0; right:0; width:19px; height:19px; color:#fff; background:var(--primary); font-size:11px; line-height:18px; text-align:center; border-radius:50%; font-family:'Marcellus', serif;}
.search_wrap .box{position:relative; width:200px;}
.search_wrap input{background:none; outline:none; border:none;}
.search_wrap input[type="text"]{margin:0; padding:0 24px 5px 0; border-bottom:1px solid #111; font-size:15px; color:#444; width:100%; height:24px; border-radius:0;}
.search_wrap input[type="text"]::placeholder{color:rgba(119,119,119,0.3);}
.search_wrap input[type="submit"]{position:absolute; right:0; top:0; width:18px; height:18px; background:url(../images/common/icon_search.svg)no-repeat center/contain;}
.search_wrap_mo{display:none;}



#header .btn_menu{display:none; position:absolute; top:50%; right:1.5%; z-index:91; width:42px; height:42px; font-size:0px; text-align:center; transform:translateY(-50%); transition:0.5s ease-in-out; border-radius:50%;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:25px; height:14px; 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:25px;}
#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{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:6px; width:28px; 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{background:#fff;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-25px);}
#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 .f_box{display:none;}

/* 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 .top{}
#footer .top .box{display:flex; justify-content:center; position:relative; padding:0 2%; height:43px; line-height:46px;}
#footer .top .box.story{background:#947243;}
#footer .top .box.notice{background:#004757;}
#footer .top h2{font-size:14px; font-weight:normal; font-family:'Marcellus', serif; color:#fff; width:100px;}
#footer .top h2 i{display:inline-block; margin:-4px 8px 0 0; vertical-align:middle; width:11px; height:11px;}
#footer .top h2 i img{width:100%;}
#footer .top .swiper{display:flex; justify-content:space-between; width:490px; margin: 0;}
#footer .top .swiper ul{width:390px;}
#footer .top .swiper a{display:block; font-size:14px; color:#fff; opacity:0.85; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:0.3s ease; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#footer .top .swiper a:hover{opacity:0.6;}
#footer .top .control{display:flex; flex-direction:row-reverse; position:relative;}
#footer .top .control:before{content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1px; height:18px; background:rgba(255,255,255,0.5);}
#footer .top .control .swiper-button-next{margin-left:25px;}
#footer .top .control .swiper-button-next,
#footer .top .control .swiper-button-prev{position:relative; margin-top:0; top:auto; right:auto !important; left:auto !important; transition:0.3s ease; height:100%;}
#footer .top .control .swiper-button-next:hover,
#footer .top .control .swiper-button-prev:hover{opacity:0.6;}
#footer .top .control .swiper-button-next:after, 
#footer .top .control .swiper-button-prev:after{font-size:0; width:8px; height:14px;}
#footer .top .control .swiper-button-next:after{background:url(/images/common/arrow_next_s_w.svg)no-repeat center/contain;}
#footer .top .control .swiper-button-prev:after{background:url(/images/common/arrow_prev_s_w.svg)no-repeat center/contain;}
#footer .bottom{position:relative; background:#161f21;}
#footer .bottom .inr{display:flex; padding:100px 80px; flex-direction:row-reverse; justify-content:flex-end; width:100%;}
.f_box{margin-right:150px;}
.f_box h3{margin-bottom:35px; font-weight:normal; font-family:'Marcellus', serif; font-size:28px; color:#fff;}
.f_box.sns ul li+li{margin-top:20px;}
.f_box.sns ul li a{display:block; font-size:14px; color:#fff; opacity:0.8; transition:0.3s ease;}
.f_box.sns ul li a:hover{opacity:1;}
.f_box.sns ul li a img{display:inline-block; margin:-2px 14px 0 0; vertical-align:middle; width:21px;}
.f_box.contact .tel{display:block; font-weight:normal; font-family:'Marcellus', serif; color:#fff; font-size:32px; line-height:initial;}
.f_box.contact ul{font-size:0;}
.f_box.contact ul li{display:inline-block; margin-right:20px; color:#fff; font-size:14px;}
.f_box.contact .box01{margin:18px 0 30px;}
.f_box.contact .box01 li{opacity:0.85;}
.f_box.contact .box01 li a{display:inline-block; color:#fff;}
.f_box.contact ul em{display:inline-block; margin-right:5px;}
.f_box.contact .box02 li{margin-bottom:3px; opacity:0.6;}
.f_box.info .link{display:flex;}
.f_box.info .link li+li{margin-left:25px;}
.f_box.info .link li a{display:block; font-size:14px; color:#fff;}
.f_box.info .copy{margin:25px 0 25px; font-size:0;}
.f_box.info .copy span{display:inline-block; margin:0 20px 6px 0; color:rgba(255,255,255,0.6); font-size:13px;}
.f_box.info .copy span em{display:inline-block; margin-right:5px; color:rgba(255,255,255,0.35);}
.f_box.info p{color:rgba(255,255,255,0.35); font-size:12px;}
.f_box.info p b{color:#fff; font-weight:500;}
#footer .btn_top{display:block; position:absolute; top:50%; right:80px; transform:translateY(-50%); width:80px; height:80px; border-radius:50%; border:1px solid #fff; font-weight:600; font-size:16px; color:#fff; text-align:center; font-family:'Marcellus', serif; font-weight:normal;}
#footer .btn_top img{display:block; margin:21px auto 6px; width:13px;}

.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:1600px){
    #header .bottom{height:90px;}
    #header .bottom:before{width:750px;}
    #header .bottom .inr{padding:0 2%;}
    #header .logo{margin-right:45px;}
    #header .logo > a{width:80px;}
    #header nav .gnb > ul > li{margin-left:30px;}
    #header nav .gnb > ul > li > a{font-size:18px; height:90px; line-height:90px;}
    #header nav .gnb > ul > li > ul{top:90px;}
    #header .right{right:2%;}
    .search_wrap .box{width:180px;}
    
    #footer .bottom .inr{padding:80px 2%;}
    .f_box{margin-right:80px;}
    .f_box.info{width:455px;}
    .f_box.contact{width:367px;}
    .f_box.contact .box02 li{display:block;}
    .f_box.sns{width:98px;}
    .f_box h3{font-size:24px;}
    #footer .btn_top{right:2%;}
}

@media screen and (max-width:1280px){
    #header .bottom:before{width:700px;}
    #header .logo{margin-right:36px;}
    #header nav .gnb > ul > li{margin-left:22px;}
    .area_util{margin-left:4px;}
    .area_util ul li{margin-left:20px;}
    .area_util ul li a{padding:4px; height:30px; width:30px;}
    .search_wrap .box{width:160px;}
    .search_wrap input[type="submit"]{top:2px; width:16px; height:16px;}
    
    .f_box{margin-right:60px;}
    .f_box.contact{width:200px;}
    .f_box.contact .tel{font-size:28px;}
    .f_box.contact ul li{display:block; margin-right:0;}
    .f_box.contact .box01 li+li{margin-top:4px;}
    #footer .btn_top{top:auto; bottom:40px; transform:none; width:70px; height:70px; font-size:15px;}
    #footer .btn_top img{margin:16px auto 3px; width:11px;}
}

@media screen and (max-width:1024px){
    #header .top_banner .box{height:38px;}
    #header .top_banner .box a{font-size:14px;}
    #header .top_banner .box a em{margin-right:30px;}
    #header .top_banner .box .btn{padding:3px; width:20px; height:20px;}
    #header .top_banner .box .btn.close{padding:4px;}
    
    #header .bottom{height:70px;}
    #header .bottom:before{width:60%;}
    #header .logo > a{width:70px;}
	#header .btn_menu{display:block;}
    #header .right{display:none;}
    .search_wrap_mo{display:block;}
    .search_wrap_mo .box{width:100%;}
    .search_wrap_mo .box:after{content:''; display:block; position:absolute; top:0; right:46px; height:100%; width:1px; background:#111;}
    .search_wrap_mo input[type="text"]{padding:10px 46px 10px 15px; height:46px;}
    .search_wrap_mo input[type="submit"]{top:50%; transform:translateY(-50%); right:15px; width:18px; height:18px;}
    .area_util_mo{display:block !important; margin-left:0; padding:25px 15px; border-bottom:1px solid #111;}
    .area_util_mo ul{justify-content:center;}
    .area_util_mo ul li{margin-left:0;}
    .area_util_mo ul li+li{margin-left:30px;}
	
	#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 .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:100%; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
	#header .area_menu_all .gnb{overflow-y:auto; position:absolute; top:0px; left:-80%; z-index:10; width:500px; height:100%; background:#f7f6f1; transition:0.7s ease;}
    #header .area_menu_all .gnb > ul{margin-top:25px;}
	#header .area_menu_all .gnb > ul li{position:relative;}
	#header .area_menu_all .gnb > ul > li{display:block; padding:0px; margin-left:0;}
    #header .area_menu_all .gnb > ul > li+li{margin-top:10px;}
	#header .area_menu_all .gnb > ul > li > a{float:none; display:block; width:auto; padding:10px 46px 10px 15px; margin-left:0px; font-size:17px; text-align:left; height:auto;
    line-height:inherit;}
	#header .area_menu_all .gnb > ul > li > ul{float:none; opacity:1; visibility:visible; position:static; width:calc(100% - 30px); margin:auto; padding:10px 0; background:#fff; border-width:0px; transition:none; transform:none; box-shadow:none;}
	#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:#444;}
	#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:var(--primary);}
	#header .area_menu_all .gnb > ul > li > ul > li > a{display:block; width:auto; padding:6px 45px 6px 15px; font-size:15px;}
	#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;}
	#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:#111;}
	#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;}
    
    #header .f_box{display:block; width:100% !important; padding:25px 15px; margin-right:0; border-top:1px solid #111;}
    #header .f_box h3{color:#111; font-size:17px; margin-bottom:18px;}
    #header .f_box.sns{margin-top:25px;}
    #header .f_box.sns h3{display:none;}
    #header .f_box.sns ul{display:flex; justify-content:center;}
    #header .f_box.sns ul li+li{margin-top:0; margin-left:20px;}
    #header .f_box.sns ul li a{display:flex; align-items:center; justify-content:center; font-size:0; width:40px; height:40px; border-radius:50%; background:var(--primary); opacity:1 !important;}
    #header .f_box.sns ul li a img{margin:0; width:18px;}
    #header .f_box.contact .tel{color:#111; font-size:24px;}
    #header .f_box.contact ul li{color:#444;}
    #header .f_box.contact .box01{margin:18px 0 18px}
    #header .f_box.contact .box01 li{opacity:1; font-size:15px;}
    #header .f_box.contact .box01 li a{color:#444;}
    #header .f_box.contact .box02 li{opacity:0.7; font-size:14px;}
    
    .lnb{margin:0 auto 30px;}
    
    #footer .top .box{height:38px; line-height:40px;}
    #footer .f_box.sns,
    #footer .f_box.contact{display:none;}
    #footer .bottom .inr{padding:60px 2%;}
    #footer .f_box{margin-right:0;}
    #footer .f_box h3{display:none;}
    .f_box.info{width:calc(100% - 90px);}
    #footer .btn_top{top:50%; transform:translateY(-50%);}
}

@media screen and (max-width:767px){
    #header .top_banner .box{justify-content:space-between; height:34px;}
    #header .top_banner .box a{margin-top:2px; justify-content:flex-start; width:calc(100% - 35px); font-size:13px; }
    #header .top_banner .box a em{display:block; margin-right:0; width:100%;}
    #header .top_banner .box a .btn{display:none;}
    
    #header .bottom{height:52px;}
    #header .logo > a{width:60px;}
    
    #footer .top .box{justify-content:flex-start;}
    #footer .top h2{width:80px;}
    #footer .top h2 i{margin-right:5px;}
    #footer .top .swiper{width:calc(100% - 80px);}
    #footer .top .swiper ul{width:calc(100% - 85px);}
    #footer .top .control{width:72px;}
    #footer .top .control .swiper-button-next{margin-left:18px;}
}

@media screen and (max-width:580px){
    #header .area_menu_all .gnb{width:82%;}
}