/* BASIC css start */
body {background: #FFF;}
#headerBanner {position: fixed;z-index: 1000;}


.wrapper {box-sizing:border-box; width:100%; position:relative; }
.swiper {overflow:hidden; position:relative}
.dn {display:none !important;}
button {background:none; border:none; }
img {max-width:100%}




.header_box {position:fixed; left:0; width:100%; display:block; text-align:center; box-sizing:border-box; z-index:1000;mix-blend-mode: difference;top: 30px;}
.header_box .wrapper {height:100%; padding:20px 0;align-items: center;display: grid;}

.header_box .icon {width:20px; height:20px; position:absolute; text-align:center; line-height:20px;}
.header_box .icon svg {vertical-align:middle;}
.header_box .menu_btn {position:absolute; left:10px; top:calc(50% - 10px); text-align:center;}
.header_box .menu_btn span { display: block; width:100%; height: 2px; background:#000; margin-bottom:4px; }
.header_box .menu_btn span:last-child {margin-bottom:0}
.header_box .menu_btn img {display:block; height:16px}

.header_box .search_btn {right:42px; top:calc(50% - 10px);}


.header_box .logo {display:inline-block;width: 97px;margin: 0 auto;    height: 21px;}
.header_box .logo img {height:20px}
.header_box .basket_btn { position:absolute; top:calc(50% - 10px); right:15px;}
.header_box .basket_btn .count {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 8px;
    text-align: center;
    line-height: 16px;
}

.menu_box {position:fixed;top:0;left:-100%;transition: all 0.3s;animation-direction: reverse;z-index:100001;-webkit-overflow-scrolling: touch;width:100%;height:100%;box-sizing:border-box;background:#fff;padding: 45px 10px 32px;overflow-y:auto;}
.menu_box.active {left:0; }
.menu_box .aside_logo {position:absolute; top:23px; left:10px;}
.menu_box .aside_logo img {height:23px;}
.menu_hd_box { position:relative; text-align:center; }
.menu_logo {display:inline-block; width:200px; }
.menu_closed {position:absolute;top:26px;right:10px;padding-left: 20px;}
.menu_closed img {display:inline-block}
.menu_box .tab_box {margin:32px 0; font-size:0; border-bottom: 1px solid rgba(158, 158, 158, 0.5);}
.menu_box .tab_box a {display:inline-block;width:33.33%; height:50px; line-height:50px; text-align:center; box-sizing:border-box; font-size: 13px; position:relative; border:none; color: #9E9E9E;}
.menu_box .tab_box .tab.active {color: #000; font-size: 13px;}
.menu_box .tab_box .tab.active:after {content:"";display:inline-block;width:100%;height: 2px;position:absolute;left:0;bottom:0px;background: #C5AB85;}
.menu_list {margin-bottom:16px; }
.menu_list:last-child {margin-bottom:0}
.menu_box .tab_con { display:none; }
.menu_box .tab_con.active {display:block; }


.menu_slide_box {margin-top:64px; padding-left:15px }
.menu_lb {font-size:18px;font-weight:500;margin-bottom:20px;letter-spacing: 1px;}
.menu_slide_box .swiper-slide {width:80%; }
.menu_slide_box .swiper-slide a { display: inline-block;}
.menu_slide_box .swiper-slide a span {display:block; text-align:center; margin:0 auto; }
.menu_slide_box .swiper-slide a span.img img {border-radius:100%}
.menu_slide_box .swiper-slide a span.tit { margin-top:4px; text-align:center; font-size:12px;   }
.menu_slide_box .swiper-pagination {position:static; display:flex;align-items:center; justify-content: center; margin-top:24px; }
.menu_slide_box .swiper-pagination-bullet {margin:0 !important; width:20%; height:2px; border-radius:0; background-color:#dfdfdf; opacity:1;}
.menu_slide_box .swiper-pagination-bullet-active {background:#000}

.login_btm {text-align:center; margin-top:42px;font-size:0 }
.login_btm a {display:inline-block;font-size:14px;color: #9e9e9e;height:16px;line-height:16px;padding:0 16px; border-right:1px solid #9e9e9e; }
.login_btm a:last-child {border:none}



.animated { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 


#header.slideDown .animated{ -webkit-animation-name:slideDown; animation-name:slideDown; } 
#header.slideUp .animated { -webkit-animation-name:slideUp; animation-name:slideUp; } 

#header.headroom--not-top .animated { top:0}
#header.headroom--not-top .tenCoupon {display:none!important;}
/* SlideDown for headroom */ 
@-webkit-keyframes slideDown { 
	0% {-webkit-transform:translateY(-100%)} 
	100% {-webkit-transform:translateY(0)} 
} 
@keyframes slideDown{ 
	0% {transform:translateY(-100%)} 
	100% {transform:translateY(0)} 
} 

/* SlideUp for headroom */ 
@-webkit-keyframes slideUp{ 
	0% {-webkit-transform:translateY(0)} 
	100% {-webkit-transform:translateY(-100%)} 
} 
@keyframes slideUp{ 
	0% {transform:translateY(0)} 
	100% {transform:translateY(-100%)} 
} 

.top_menu_list {margin-top:20px;}
.top_menu_list li a {font-family:'FranklinGothicCondITC Medi'; font-size:22px; line-height:32px; font-weight:500}

.sub_list_wrap {overflow:hidden; margin-top:20px; padding-top:30px; border-top:1px solid #ccc;}
.sub_list_wrap h4 {font-family: 'FranklinGothicCondITC Medi'; font-size: 22px; line-height: 32px; font-weight: 500; margin-bottom:10px;}
.sub_list_wrap .sub_list {width:50%; float:left;}
.sub_list_wrap .sub_list li {line-height:26px;}
.sub_list_wrap .sub_list li a {font-size:14px; font-weight:400; display:block; line-height:2;}
.login_box {margin-top:30px; padding-bottom:30px; border-bottom:1px solid #ccc;}
.login_box a {font-family: 'FranklinGothicCondITC Medi'; font-size: 22px; line-height: 32px; font-weight: 500; display:block;}

.aside_lang a{font-size:14px; display:block; line-height:16px;width: 50%;}
.aside_lang a.active svg {transform:rotate(180deg);}
.aside_lang .languageList {display:none; padding:20px; background:#f7f7f7; margin-top:10px;}
.aside_lang .languageList dd {display:inline-block; margin-right:10px;}
/* BASIC css end */