/* BASIC css start */
#header .WH {display:block !important; } 
#header .BK {display:none !important; }
#header.headroom--not-top .WH {display:none!important; }
#header.headroom--not-top .BK {display:block!important; }

#footer  {margin-top:0 !important}
#container {padding-top:0 !important}

.swiper .swiper-slide img { width:100%}

.visual_box {margin-bottom:64px; }
.visual_box .img img {width:100%}
.visual_box .txt {position:absolute;bottom: 52px;left:0;text-align:center;width: 100%;}
.visual_box .txt .tt {font-size:18px;font-weight:400;line-height:1.4;color:#fff;margin-bottom: 10px;}
.visual_box .txt .des {font-size:14px;font-weight:300;line-height:1;color:#fff;}

.visual_box .video {position:relative;}
.visual_box .video:after {content:""; display:block; position:absolute; top:0 ;left:0; width:100%; height:100%;}
.visual_box .video img {width:100%; }
.visual_box .video iframe {position:absolute; top:0; left:0; width:100%;height:100%; border:0}

.visualSwiper {}
.visualSwiper .swiper-slide {position:relative; }
.visualSwiper .swiper-slide .img:before {  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(360deg, #000000, transparent); opacity: .6; }
.visualSwiper .swiper-button-prev, .visualSwiper .swiper-button-next {position: absolute; margin: 0; top: 50%; transform: translateY(-50%); z-index: 10; width: 64px; height: 64px; display:none; }
.visualSwiper .swiper-button-prev { left: 10px; background: url("/design/jsmbeauty/img/icon_prev.svg") no-repeat center/24px auto;}
.visualSwiper .swiper-button-next {right: 10px; background: url("/design/jsmbeauty/img/icon_next.svg") no-repeat center/24px auto;}
.visualSwiper .swiper-page-box {position:absolute;left:50%;bottom: 24px;width: 192px;transform: translate(-50%,0%);z-index: 10; display:none; }
.visualSwiper .swiper-page {position:relative;padding: 0px 28px;}
.visualSwiper .swiper-pagination {position:static;height:2px !important;background: rgba(255,255,255,0.5);}
.visualSwiper .swiper-pagination-progressbar-fill {background:#fff !important;}
.visualSwiper .swiper-no {position:absolute;top: -6px;font-size: 14px;line-height: 1;}
.visualSwiper .swiper-current {left:0;color: #fff;}
.visualSwiper .swiper-total {right:0;color:rgba(255,255,255,0.5);}

.visual_box.show .swiper-button-prev, .visual_box.show  .swiper-button-next, .visual_box.show .swiper-page-box {display:block; }


.section {position:relative; margin-bottom:64px }
.sect_tt {text-align:center; margin-bottom:32px; }
.sect_tt .tt {font-size:24px; font-weight:bold; }

.section .swiper-button-prev, .section .swiper-button-next {width:32px; height:32px; background-repeat:no-repeat; background-size:100% auto; background-position:center }
.section .swiper-button-prev {left:16px; background-image: url("/design/jsmbeauty/img/icon_prev.svg") }
.section .swiper-button-next  {right:16px; background-image: url("/design/jsmbeauty/img/icon_next.svg")}
.section .swiper .swiper-pagination {position:static;width:60% !important;display:flex;align-items: center;justify-content: center;box-sizing: border-box;margin: 0 auto;}
.section .swiper .swiper-pagination-bullet{cursor: pointer;height:2px !important;border-radius:0;opacity:1;background:#f0f0f0;margin:0 !important; margin-top:32px !important; width: 100%;transition: all ease 0.5s;}
.section .swiper .swiper-pagination-bullet-active{background:#000 !important;width: 100%;} 
.section .prod_list .swiper  .item {margin-bottom:0}

.tab_box {display:flex;align-items: center;justify-content: flex-start;overflow-x: auto;padding: 0 10px 32px;box-sizing: border-box;}
.tab_box::-webkit-scrollbar {display: none;}
.tab_box a {box-sizing:border-box;display:flex;justify-content: center;align-items: center;height: 38px;border-radius:30px;padding: 0px 20px;border:1px solid #E0E0E0;margin-right:8px;color: #666;font-size: 12px;line-height: 1;}
.tab_box a:last-child {margin-right:0}
.tab_box a.active {background: #202020; color:#fff; }

.tab_con_box {}
.tab_con {display:none; }
.tab_con.active {display:block;; }

.eventSwiper .txt {padding: 24px 10px; box-sizing:border-box; }
.eventSwiper .txt .lb {display:inline-block;line-height:1;padding: 6px 12px;border-radius:30px;background:#000;color:#fff; font-size:12px; }
.eventSwiper .txt .tt {font-size:18px; margin:12px 0; font-weight:bold; color:#000}
.eventSwiper .txt .date {font-size:14px; color:#666}

#NEW .imgSwiper {margin-bottom:6px}
#NEW .imgSwiper .swiper-pagination {position:absolute;bottom:16px; width:100% !important;}
#NEW .imgSwiper .swiper-pagination-bullet{border-radius:100%;width:8px !important;height:8px !important;margin: 0  4px!important;}

#PICK .sect_con {}
#PICK .video_box {position:relative;padding-bottom: 56%;width: 100%;}
#PICK .video_box iframe {width: 100%;position:absolute;top:0;left:0;height: 100%;}
#PICK .prod_box {box-sizing:border-box;}
#PICK .pickSwiper {height:242px; }
#PICK .pickSwiper .swiper-slide {height:121px !important;  box-sizing:border-box; }

.prod_list.grid_row .item {width:100%;margin:0;border-bottom:1px solid #E0E0E0;box-sizing:border-box;display:flex;justify-content: flex-start;align-items: stretch;}
.prod_list.grid_row .item .preview_box {display:none; }
.prod_list.grid_row .item .thumb_box {width: 120px;}
.prod_list.grid_row .item .info_box {width:calc(100% - 120px);box-sizing:border-box;padding: 0;}
.prod_list.grid_row .item .info_box a {display:flex;justify-content: center;flex-direction: column;height: 100%;padding: 0 16px;}
.prod_list.grid_row .item .info_box .name {height:auto; margin:0 }
.prod_list.grid_row .item .info_box .des {display:none; }


#EVENT .eventSwiper .swiper-slide  a {display:inline-block; width:100%; }

#BRAND  {margin-bottom:0}
#BRAND .brand_box {}
#BRAND .brand_box .img_box { }
#BRAND .brand_box .txt_box { box-sizing:border-box; padding:32px 24px 42px; min-height: 381px; height: 100%; }
#BRAND .brand_box .txt_box .sut_tt {font-size:14px;color:rgba(255,255,255,0.7);display:block;margin-bottom:16px;line-height: 1.2;}
#BRAND .brand_box .txt_box .tt {font-size:20px;; font-weight:500; color:#fff; margin-bottom:24px; line-height: 1.2; }
#BRAND .brand_box .txt_box .des {font-size: 14px; color:rgba(255,255,255,0.7); line-height:1.8; font-weight:300 }
#BRAND .brand_box .txt_box .view {display: flex;flex-direction: row;justify-content: center;align-items: center;border: 2px solid #FFFFFF;width:114px;height:40px;font-size:12px;color:#fff;margin-top: 32px;}
#BRAND .swiper .swiper-pagination {position:absolute;bottom:16px; width:100% !important;}
#BRAND .swiper .swiper-pagination-bullet{border-radius:100%;width:8px !important;height:8px !important;margin: 0  4px!important;}



#BRAND #JSM {background:#222222}
#BRAND #BEGINS {background:#45cae7}
#BRAND #SALONZIP {background:#787845}
#BRAND #KIDS {background:#d1ab9e}




/* BASIC css end */