/* BASIC css start */
#header {position: fixed; top: 0; left: 0; }
#header .WH {display:block !important; } 
#header .BK {display:none !important; }
#header .header_btm #hd_menu, #header .header_top .gnb li #hd_search_box .search_close_btn{color:#fff !important; }
#header .header_top .gnb li #hd_search_box input {border-color:#fff !important}
#header.headroom--not-top .WH {display:none!important; }
#header.headroom--not-top .BK {display:block!important; }
#header.headroom--not-top  .header_btm #hd_menu, #header.headroom--not-top  .header_top .gnb li #hd_search_box .search_close_btn{color:#000 !important; }
#header.headroom--not-top  .header_top .gnb li #hd_search_box input {border-color:#000 !important}

#footer  {margin-top:-1px !important}

.visual_box {margin-bottom:144px; }
.visual_box .swiper-slide  a {display:inline-block; width:100%}
.visual_box .swiper-slide  a img {width:100%}
.visual_box .txt { position:absolute; top: 50%; transform: translateY(-50%); }
.visual_box .txt .tt {font-size:56px; font-weight:400; line-height:1.2; color:#000; margin-bottom:40px;  }
.visual_box .txt .ttbk {font-size:56px; font-weight:400; line-height:1.2; color:#000; margin-bottom:40px;  }
.visual_box .txt .des {font-size:20px; font-weight:400; line-height:1; color:#000; margin-bottom:48px;}
.visual_box .txt .desbk {font-size:20px; font-weight:400; line-height:1; color:#000; margin-bottom:48px;}
.visual_box .txt .view {width:173px;height:54px;border:1px solid #000;box-sizing:border-box;font-size:14px;color:#000;display:flex;align-items: center;justify-content: center;}
.visual_box .txt .viewbk {width:173px;height:54px;border:1px solid #000;box-sizing:border-box;font-size:14px;color:#000;display:flex;align-items: center;justify-content: center;}
.visual_box .txt.left {left:240px; }
.visual_box .txt.right {/*right:253px;*/ right:0; width:40%;  }




.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-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:58px;width:360px;transform: translate(-50%,0%);z-index: 10; display:none; }
.visualSwiper .swiper-page {position:relative;padding: 0 34px;}
.visualSwiper .swiper-pagination {position:static;height:2px !important;background: rgba(255,255,255,0.5);}
.visualSwiper .swiper-pagination-progressbar-fill {background:#000 !important;}
.visualSwiper .swiper-no {position:absolute;top: -10px;font-size: 20px;line-height: 1;}
.visualSwiper .swiper-current {left:0;color: #222;}
.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:200px }
.sect_tt {text-align:center; margin-bottom:70px; }
.sect_tt .tt {font-size:34px; font-weight:bold; }
.section .prod_list .item  {margin-right:15px; }
.section .prod_list .item:nth-child(4n) {margin-right:0}
.section .prod_list.grid2 .item:nth-last-child(-n+2) {margin-bottom:0}
.section .prod_list.grid4 .item {width: calc(25% - 11.3px);}

.has_sticky {width: 100%; position: relative;}
.has_sticky .sticky_con {display:flex; }
.has_sticky .img_box {width: 50%;position: sticky;top: 0px;height: 100vh;}
.has_sticky .imgSwiper { height: 100vh;}
.has_sticky .img_box img {width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%;}
.has_sticky .prod_box {width: 50%;box-sizing:border-box}

.section .swiper-button-prev, .section .swiper-button-next {width: 27px;height: 50px;background-repeat:no-repeat;background-size:100% auto;background-position:center}
.section .swiper-button-prev {left:32px; background-image: url("/design/jsmbeauty/img/icon_prev.svg") }
.section .swiper-button-next  {right:32px; background-image: url("/design/jsmbeauty/img/icon_next.svg")}

.section .swiper-pagination {bottom: 20px !important;}
.section .swiper-pagination-bullet { background:rgba(255,255,255,0.5); border-radius: 100%; width: 8px; height: 8px; opacity:1}
.section .swiper-pagination-bullet-active { background:#000; margin-top: 0 !important }


.tab_box {display:flex;align-items: center;justify-content: center; padding-bottom:64px}
.tab_box a {box-sizing:border-box;display:flex;justify-content: center;align-items: center;height:50px;border-radius:30px;padding:0px 24px;border: 2px solid #E0E0E0;margin-right:8px;color:#666;font-size: 16px;}
.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;; }

#EVENT  {display:inline-block; width:100%}
#EVENT .swiper-slide {position:relative; display:block; }
#EVENT .img img {width: 100%;}
#EVENT .txt {position:absolute; top:0; left:0%; width:100%; height:100%  }
#EVENT .txt .wrapper {width:100%;height:100%;display:flex;flex-direction: column;align-items: flex-start;justify-content: center; box-sizing:border-box; padding:0 100px}
#EVENT .txt .sub {display:inline-block;  padding: 12px 24px; background: #FFFFFF; font-size:16px;  font-weight:500; border-radius: 24px;}
#EVENT .txt .tt {font-size:40px; color:#000; margin:16px 0 24px}
#EVENT .txt .des {font-weight: 400;font-size: 20px; opacity: 0.7; color:#000; margin-bottom:40px; }
#EVENT .txt .link {color: #000; width: 173px; height: 54px; border: 2px solid #000; display: flex;flex-direction: row;justify-content: center;align-items: center;  font-weight: 500; font-size: 14px;}

#EVENT .txt .ttw {font-size:40px; color:#fff; margin:16px 0 24px}
#EVENT .txt .desw {font-weight: 400;font-size: 20px; opacity: 0.7; color:#fff; margin-bottom:40px; }
#EVENT .txt .linkw {color: #fff; width: 173px; height: 54px; border: 2px solid #fff; display: flex;flex-direction: row;justify-content: center;align-items: center;  font-weight: 500; font-size: 14px;}

#NEW .prod_box { padding-left:15px; }

#PICK .sect_con {display:flex;align-items: flex-start;justify-content: space-between;}
#PICK .video_box {width: 62.5%;position:relative;padding-bottom: 35.14%;}
#PICK .video_box iframe {width: 100%;position:absolute;top:0;left:0;height: 100%;}
#PICK .prod_box {width: 37.5%;height:675px;box-sizing:border-box;padding-right:15px;overflow: hidden;}
#PICK .pickSwiper {height:100%}
#PICK .pickSwiper .swiper-slide {border:1px solid #E0E0E0; box-sizing:border-box; }
.prod_list.grid_row .item {width:100%; height:100%; margin:0; box-sizing:border-box; overflow: hidden;}
.prod_list.grid_row .item  {display:flex;justify-content: flex-start;align-items: center;}
.prod_list.grid_row .item .thumb_box {width: 33%;}
.prod_list.grid_row .item .preview_box {display:none; }
.prod_list.grid_row .item .info_box {width: 67%;box-sizing:border-box;padding: 0 25px; }
.prod_list.grid_row .item .info_box a {border:none;  padding:0}
.prod_list.grid_row .item .info_box .name {height:auto; max-height:45px; margin:0 }
.prod_list.grid_row .item .info_box .des {height:auto; max-height:40px; }

#BRAND {margin-bottom:0}
#BRAND .brand_box {display:flex;align-items: center;justify-content: space-between;}
#BRAND .brand_box .img_box {width: 58.4%;}
#BRAND .brand_box .img_box img {width:100%}
#BRAND .brand_box .txt_box {width:41.6%; box-sizing:border-box; padding-left:64px}
#BRAND .brand_box .txt_box .sut_tt {font-size: 20px; color:rgba(255,255,255,0.7); display:block; margin-bottom:24px}
#BRAND .brand_box .txt_box .tt {font-size: 40px;; font-weight:500; color:#fff; margin-top:32px;  }
#BRAND .brand_box .txt_box .des {font-size: 20px; color:rgba(255,255,255,0.7); line-height:1.8; margin:24px 0 48px; }
#BRAND .brand_box .txt_box .view {display: flex; flex-direction: row; justify-content: center; align-items: center; border: 2px solid #FFFFFF; width:173px; height:54px; font-size:14px; color:#fff  }
#BRAND .swiper-button-next {left:calc(58.4% - 59px);right:auto;}

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




@media screen and (max-width:1700px) {
    #BRAND .brand_box .txt_box .sut_tt {font-size:16px;  margin-bottom:16px}
    #BRAND .brand_box .txt_box .tt {font-size:32px; margin:16px 0 24px}
    #BRAND .brand_box .txt_box .des {font-size:16px;  }

}


/* BASIC css end */