/* BASIC css start */
.depth_wrap{}
.depth_wrap .page_location {  display: flex; align-items: center; border-top: 1px solid #E2E2E2; border-bottom: 1px solid #E2E2E2; padding: 0 30px;  margin-bottom: 60px; }
.depth_wrap .page_location .SMScategoryName { width: 104px;}
.depth_wrap .page_location .cate2_name{display: flex; align-items: center; }
.depth_wrap .page_location .cate2_name li{  padding: 10px 16px; display: inline-block; }
.depth_wrap .page_location .cate2_name li a.eng{ font-size: 15px;}
.depth_wrap .page_location .cate2_name li a.on{ border-bottom: 1px solid #000; font-weight: 500;}

.eventBanner{ width: 100%; margin: -60px 0 20px;}

.list_desc_box{ }
.list_desc_box .SMS_Category_list{ margin-bottom: 40px;}
.list_desc_box .SMS_Category_list .CateInBody{}
.list_desc_box .SMS_Category_list .CateInBody ul{ display: flex; align-items: flex-end; justify-content: center;}
.list_desc_box .SMS_Category_list .CateInBody ul li a{ margin: 0 10px; display: block; text-align: center; font-size: 15px;}
.list_desc_box .SMS_Category_list .CateInBody ul li a :is(div, p, span){display: flex; align-items: center; justify-content: center;  border-radius: 80px; text-align: center; }
.list_desc_box .SMS_Category_list .CateInBody ul li a p{width: 74px; height: 74px; margin-bottom: 20px; background: #F6F6F6; position: relative;}
.list_desc_box .SMS_Category_list .CateInBody ul li a p img{ width: 80%;}
.list_desc_box .SMS_Category_list .CateInBody ul li a span{ background: #f6f6f6; width: 100%; height: 100%; color: #000;}
.list_desc_box .SMS_Category_list .CateInBody ul li a.sel p::after{ display: block; content: ""; position: absolute; left: -6px; top: -6px; width: calc(100% + 10px); height: calc(100% + 10px); border: 1px solid #000; border-radius: 100px;}

.list_desc_box .shopbrandTitle{ text-align: center; font-size: 18px; line-height: 1.5; margin-bottom: 50px;}


.sort_area{ display: flex; align-items: center; margin-bottom: 20px; padding: 0 30px;}
.sort_area li{margin-right: 10px;}
.sort_area li a{display: block; padding: 8px 12px; background: #EFEFEF; border-radius: 50px;}
.sort_area li a.active{ background: #000; color:#fff;}


.promotion_box{ width: 1000px; margin: 0 auto;}
.promotion_box img{ width: 100%}

.page-body{ padding: 0 30px;}


.prd_info > a > img{width: 8px;
    vertical-align: -2px;
    margin: 0 0 0 6px;}


.collection p{font-size:15px;}
.collection a{margin-top:16px; padding:5px 14px; border:solid 1px #000; display:inline-block; border-radius:14px;}
.collection a > img{width: 6px; margin-top: 3px; margin-left: 3px;}

/* class-list */
#productClass .cate-wrap { overflow:hidden }
#productClass .cate-wrap .bcate { padding-bottom:10px; font-size:18px; color:#202020; font-weight:bold; border-bottom:1px solid #e3e3e3 }
#productClass .cate-wrap .class-list ul { border-bottom:1px solid #e3e3e3;  *zoom:1 }
#productClass .cate-wrap .class-list ul:after { display:block; clear:both; content:'' }
#productClass .cate-wrap .class-list ul li { padding:15px 30px 16px 0; float:left }
#productClass .cate-wrap .class-list ul li a { display:block; font-size:13px; color:#919191 }


/* best-item */
#productClass .best-item { padding-top: 20px; padding-bottom: 10px; border-top: 2px solid #5c5c5c; border-bottom: 2px solid #5c5c5c; background-color: #f8f8f8; }

/* total-sort */
#productClass .total-sort { padding-top: 30px; }



/*.alertPop{ display:none; position: fixed; bottom: 3%; left: 50%; transform: translateX(-50%); width: fit-content; background: #393939; 
    padding: 13px 50px; color:#fff; font-size: 16px; border-radius: 5px; z-index: 10;
    transition: transform 0.3s ease-in-out;
}*/
.shopbrandTitle .bf_popup { display:none; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index:15; width:500px; }
.shopbrandTitle .bf_popup img{width:100%; border: 1px solid rgba(0, 0, 0, 0.1);}
.shopbrandTitle .bf_popup .bf_popup_close { position: absolute; right:0; top:0; width:80px; height: 80px; z-index:1;}


.promotion_wrap{width:900px; margin:0 auto; font-size:0; line-height:0;}
.promotion_wrap a{display:inline-block; width:100%;}
.promotion_wrap img{width:100%; display:inline-block;}
.promotion_wrap .wd50{width:50%;}
.promotion_wrap .wd33{width:33.33%;}

.promotion_wrap .menu{background:#fff; width:100%;}
.promotion_wrap .menu ul{display:flex; width:900px; margin:0 calc((100% - 900px) / 2);}
.promotion_wrap .menu ul li{font-size:15px; border:solid 1px #d8d8d8; padding:10px 18px 8px; display:inline-block; border-radius:22px; margin-right:18px;}
.promotion_wrap .menu ul li.active{border:solid 1px #000;}
.promotion_wrap .menu ul li span{color:#BF214B; font-size:11px; vertical-align: text-top; margin-left: 4px;}

.promotion_wrap .tab_con{display:none; font-size:0;}
.promotion_wrap .tab_con.on{display:block;}
.promotion_wrap .tab_con .img_viewer{position:relative;}
.promotion_wrap .tab_con .img_viewer .imgBox{position:absolute; top:30px; left:50%; transform:translateX(-50%); display:flex; justify-content:space-between; flex-direction:row; flex-wrap:wrap; width: 90%; max-width: 1500px;}
.promotion_wrap .tab_con .img_viewer .imgBox > img{width:79%;}
.promotion_wrap .tab_con .img_viewer .imgBox > ul{display:flex; flex-direction:column; justify-content:space-between; width:18%;}


/* xcode=014 */

.promotion_wrap .swiper_container {position:relative;}
.promotion_wrap .swiper_container .promo_swiper {position: absolute; top: 38%; width: 44%; left: 6%;}
.promotion_wrap .swiper_container .promo_swiper2 {position: absolute; top: 10.5%; width: 44%; left: 6%;}
.promotion_wrap .swiper_container .promo_swiper3 {position: absolute; top: 11.9%; width: 44%; left: 6%;}
.promotion_wrap .swiper_container .promo_swiper4 {position: absolute; top: 36%; width: 44%; left: 6%;}
.prd-benefit{width:15%;}

.promotion_wrap .popup{position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.3); z-index:99;}
.promotion_wrap .popup_con{width:30%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.promotion_wrap .popup_con .close{position:absolute; top:18px; right:18px; width:16px;}


/* ÇÊÅÍ */
.filter_box{position:relative;}
.filter-wrap{margin-bottom:40px;}
.filter-wrap .layer-filter-wrap .opt-box > li {padding:16px 0; border-bottom:1px solid #E2E2E2; font-size:15px; font-weight:bold; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); text-align:center;}
.filter-wrap .layer-filter-wrap .opt-box > li:first-child{padding-top:0;}
.filter-wrap .layer-filter-wrap .opt-box > li.acco > span{background-image:url(/design/jmomall/ECHO/uiux/icon/arrow_bottom.svg); background-repeat: no-repeat; background-position:right center; background-size:auto 7px; display:inline-block; padding-right:20px;}
.filter-wrap .layer-filter-wrap .opt-box > li.acco.active > span {background-image:url(/design/jmomall/ECHO/uiux/icon/arrow_top.svg);}
.filter-wrap .layer-filter-wrap .opt-box > li.acco.active > .chk-box, 
.filter-wrap .layer-filter-wrap .opt-box > li.acco.active > .chk-color-code,
.filter-wrap .layer-filter-wrap .opt-box > li.acco.bra.active > .bra_opt_clone{display:flex; flex-wrap:wrap; column-gap:8px; row-gap:6px; justify-content: center; max-width:360px; margin:15px auto 0 auto;}
.filter-wrap .layer-filter-wrap .opt-box > li > span{font-size:15px; font-weight:500; color:#000;}

.filter-wrap .layer-filter-wrap .layer-filter .opt-box li > div {margin-top:15px;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li.acco > div{display:none;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li input[type="checkbox"]{display:none;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-box input[type="checkbox"] + label{display:none;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-box p{padding:7px 14px; display:inline-block; cursor:pointer;  border-radius:17px; border:solid 1px #E2E2E2; font-size:15px; font-weight:normal; color:#000;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-box p > span{display:none;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-box input[type="checkbox"]:checked + label + p{background:#000; border:solid 1px #000; color:#fff;}

.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div{padding:7px 12px; display:inline-block; cursor:pointer;  border-radius:17px; border:solid 1px #E2E2E2; display:flex; height:fit-content; background:#fff; align-items: center;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div label{box-shadow:none; width:16px; height:16px; margin-right:10px; display:inline-block; border-radius:50%; }
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div label[style="background-color:#ffffff;"]{border:solid 1.5px #e2e2e2; }
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div p{ font-size:15px; font-weight:normal; color:#000; height:fit-content;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div p > span{display:none;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div:has(input[type="checkbox"]:checked){background:#000;}
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div:has(input[type="checkbox"]:checked) label{border:solid 1.5px #e2e2e2; }
.filter-wrap .layer-filter-wrap .layer-filter .opt-box li .chk-color-code div:has(input[type="checkbox"]:checked) p{color:#fff;}

.filter-wrap .layer-filter-wrap .layer-filter .select-filter {display:flex; flex-wrap:wrap; justify-content: center; column-gap:14px; row-gap:6px; margin:20px auto 20px auto; max-width:500px;}
.filter-wrap .layer-filter-wrap .layer-filter .select-filter li {display:flex; align-items:center; padding:7px 10px; background:#f8f8f8; border-radius:5px; font-size:13px;}
.filter-wrap .layer-filter-wrap .layer-filter .select-filter li .btn-del {width:13px; height:10px; margin-left:13px; background:url(/design/jmomall/ECHO/uiux/icon/icon_close.svg) no-repeat right center; font-size:0px; border:0;}
.filter-wrap .layer-filter-wrap .layer-filter .select-filter li .color-code[style*="background-color:#"] {width:16px; height:16px; border:solid 2px #e2e2e2; margin-right:10px; display:inline-block; border-radius:50%; margin-right:7px;}
.filter-wrap .layer-filter-wrap .layer-filter .select-filter li .filter-text {font-size:13px; font-weight:400; color:#000;}

.filter-wrap .layer-filter-wrap .layer-filter .btn-wrap {display:flex; justify-content: center; padding-bottom:40px; width:354px; margin:0 auto;}
.filter-wrap .layer-filter-wrap .layer-filter .btn-wrap button {width:auto; padding:14px 0; text-align:center; background:#fff;}
.filter-wrap .layer-filter-wrap .layer-filter .btn-wrap button.btn-reset {width:130px; border:solid 1px #DEDEDE; border-radius:4px 0 0 4px;}
.filter-wrap .layer-filter-wrap .layer-filter .btn-wrap button.btn-search {width:calc(100% - 130px); background:#000000; border:solid 1px #000; border-radius:0 4px 4px 0;}
.filter-wrap .layer-filter-wrap .layer-filter .btn-wrap button span {color:#000; font-size:14px; font-weight:400; visibility:visible;}
.filter-wrap .layer-filter-wrap .layer-filter .btn-wrap button span.fc-fff {color:#fff;}

.filter-wrap .layer-filter-wrap .opt-box > li.bra.acco > .chk-box{display:none;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone{}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul{display:flex; justify-content: space-between;  column-gap:6px;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li{width:174px; position:relative; z-index:98;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li > span{display:block; color:#a2a2a2; font-size:14px; font-weight:400; border-radius:5px; border:solid 1px #dedede; padding:12px 40px 12px 20px; background-image:url(/design/jmomall/ECHO/uiux/icon/arrow_bottom.svg); background-repeat: no-repeat; background-position:right 1.3rem  top 17px; background-size:auto 7px; text-align:left;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li > span.active{color:#000; border:solid 1px #000;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li > ul{display:none; position:absolute; top:100%; left:0; background:#fff;width:100%; border:solid 1px #dedede; border-top:0; max-height:210px; overflow-y:auto;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li > ul.active{display:block;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li > ul > li{text-align:left; padding:10px 40px 10px 20px;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li > ul > li:last-child{border-bottom:0;}

.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist{padding-top:40px; display:none; width:100%;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist > p{color:#3182F7; font-size:15px; padding-bottom:16px;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist > p > img{width:18px;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul{width:354px; margin:0 auto;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul li{display:flex; margin-bottom:8px; padding:14px 16px; justify-content: space-between; border:solid 1px #DEDEDE; border-radius:6px; margin-left:32px; position:relative;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul li:last-child{margin-bottom:0;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul li::before{content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); left:-33px; width:22px; height:22px; background-image:url(/design/jmomall/ECHO/uiux/icon/filter_plus.svg); background-position:center center; background-repeat:no-repeat; background-size:contain;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul li.active{border:solid 1px #000;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul li.active::before{background-image:url(/design/jmomall/ECHO/uiux/icon/filter_plus_on.svg)}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul li span:first-child{color:#000; font-size:14px;}
.filter-wrap .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone .sist ul li span:last-child{color:#3182F7; font-size:14px; text-decoration: underline; text-decoration-color: #DEDEDE; text-underline-offset: 4px;}


/* Æ˾÷ÇÊÅÍ */
.filter_box{position:relative;}
.filter_box .btn-filter-wrap{position:absolute; right:30px; top:50%; transform:translateY(-50%);}
.filter_box .btn-filter-wrap .btn-filter{ display:flex; width:51px; justify-content: space-between; align-items: center;}
.filter_box .btn-filter-wrap .btn-filter img{width:26px;}
.filter_box .btn-filter-wrap .btn-filter span{font-size:15px; font-weight:400; color:#000;}
.filter-wrap.popup_filter{display:none;}
.filter-wrap.popup_filter .layer-filter-wrap{position:fixed; right:0; top:0; width:540px; height:100%; background:#fff; z-index:99999; overflow:auto; padding:140px 74px 0 74px; }
.filter-wrap.popup_filter .layer-filter-wrap .layer-filter .tit{position:absolute; top:50px; right:30px;}
.filter-wrap.popup_filter .layer-filter-wrap .layer-filter .tit a{width:21px; height:21px; background:none; border:0; display:block;}
.filter-wrap.popup_filter .layer-filter-wrap .layer-filter .tit a img{width:100%}

.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.acco > span{width:100%; text-align:left;}
.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.acco.active > .chk-box, 
.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.acco.active > .chk-color-code, 
.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.acco.bra.active > .bra_opt_clone{justify-content: flex-start;}
.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.acco.active > .chk-box, .filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.acco.active > .chk-color-code, 
.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.acco.bra.active > .bra_opt_clone{max-width:unset;}
.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul{width:100%;}
.filter-wrap.popup_filter .layer-filter-wrap .opt-box > li.bra > .bra_opt_clone > ul > li{width:calc(50% - 3px);}
.filter-wrap.popup_filter .layer-filter-wrap .layer-filter .select-filter{justify-content: flex-start;}

/* BASIC css end */