/*通用*/
@import "https://use.typekit.net/waq0blg.css";
body{min-width: 1250px;font-family: Roboto,arial,sans-serif;font-size: 14px;--f7-theme-color:#f10081;}
canvas{cursor: default !important;}
.system-txt-color{color: var(--f7-theme-color);}
.system-bg-color{background-color: var(--f7-theme-color);}
.system-btn{background-color: var(--f7-theme-color);border-color: var(--f7-theme-color);color: #fff;}
.system-btn:hover{opacity: 0.9;color: #fff;}
.system-btn-outline{background-color: #fff;border-color: var(--f7-theme-color);color: var(--f7-theme-color);}
.system-btn-outline:hover{background-color: var(--f7-theme-color);border-color: var(--f7-theme-color);color: #fff;}
ul,li{list-style-type: none; margin: 0; padding: 0;}
.fs12{font-size: 12px;}
.fs13{font-size: 13px;}
.fs14{font-size: 14px;}
.fs15{font-size: 15px;}
.fs16{font-size: 16px;}
.fs18{font-size: 18px;}
.fs20{font-size: 20px;}
.fs22{font-size: 22px;}
.fs24{font-size: 24px;}
.fs26{font-size: 26px;}
.fs28{font-size: 28px;}
.fs30{font-size: 30px;}
.fs32{font-size: 32px;}
.fs34{font-size: 34px;}
.fs36{font-size: 36px;}
.maxwbig{max-width: 1920px;}
.maxw{max-width: 1400px;}
a{color: #000;}
a:hover{color: var(--f7-theme-color);text-decoration: none;}
.mauto{margin: 0 auto;}
.mt0{margin-top: 0;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mb0{margin-bottom: 0;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}

.p0{padding:0;}
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt35 {padding-top: 35px;}
.pt40 {padding-top: 40px;}
.pt45 {padding-top: 45px;}
.pt50 {padding-top: 50px;}
.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb35 {padding-bottom: 35px;}
.pb40 {padding-bottom: 40px;}
.pb45 {padding-bottom: 45px;}
.pb50 {padding-bottom: 50px;}

.cur-point{cursor: pointer;}

.c000{color: #000;}
.cfff{color: #fff;}
.c333{color: #333;}
.c666{color: #666;}
.c999{color: #999;}

.dnone{display: none;}
.clear{clear:both;}

.bl-none{border-left:none;}
.br-none{border-right:none;}
.bt-none{border-top:none;}
.bb-none{border-bottom:none;}

.relative{position: relative;}

/*top所有*/
#top_all{z-index: 1000;}

/*旋转特效*/
@keyframes spin{
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(900deg);
		-ms-transform: rotate(900deg);
		transform: rotate(900deg);
	}
}

/*灰底栏*/
.topgrey{background: #f1f1f1;width: 100%;height: 35px;line-height: 35px;}
.topgrey .topgrey-flex,.topwhite .topwhite-flex{width: 98%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
.topgrey .topgrey-flex .topFreeShippingTip,.topgrey .topgrey-flex .topCouponTip{left: 0px;top: 25px;position: absolute;width: 245px;height: 90px;background: rgb(255, 255, 255);font-size: 11px;line-height: 23px;padding: 18px;box-shadow: rgba(0, 0, 0, 0.11) 0px 3px 6px 0px;box-sizing: content-box;z-index: 1;display: none;}
.topgrey .topgrey-flex .icon-zhuanpanshezhi{-webkit-animation: spin 5s linear infinite;animation: spin 5s linear infinite;}
.topgrey .topgrey-flex #userDropdown img,#helpDropdown img{width: 15px;}
.topgrey .topgrey-flex .helpdiv{cursor:pointer;position: relative;}
.topgrey .topgrey-flex .dropdown-menu-user{top: 33px;right: 0;left: auto;min-width: 225px;font-size: 14px;padding: 10px 20px;border: unset;text-align: right;}
.topgrey .topgrey-flex .dropdown-menu-help{top: 33px;right: -70px;left: auto;min-width: 200px;font-size: 14px;padding: 10px 20px;border: unset;}
.topgrey .topgrey-flex .helpdiv .dropdown-menu>li>a{line-height: 35px;}
.topgrey .topgrey-flex .helpdiv .dropdown-menu>li>a:hover{color: var(--f7-theme-color);}
.topgrey .topgrey-flex .helpdiv .serviceCount{color: var(--f7-theme-color);font-weight: bold;font-size: 75%}

/*白底栏*/
.topwhite{background: #fff;border-bottom: 1px solid #dddddd;width: 100%;position: relative;}
.topwhite .topwhite-flex .topwhite-flex-left{display: inline-flex;align-items: flex-end;}
.topwhite .topwhite-flex .topwhite-flex-left .logo{height: 40px;margin: 15px 10px 5px 0;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu{cursor: pointer;border-bottom: 3px solid transparent;padding-bottom: 7px;font-size: 15px;line-height: 30px;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .dropdown-menu{width: 100%;box-shadow: 1px 1px 5px #e6e6e6;border: none;top: 97%;font-size: 14px;}
.topwhite .topwhite-flex .topwhite-flex-left .topwhite-border-bottom{border-bottom: 3px solid var(--f7-theme-color) !important;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .dropflexdiv{width:100%;max-width:1400px;margin: 0 auto;display: flex;justify-content: space-between;padding-top: 20px;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .eyeglasses-flex img{border-radius: 50%;width: 80%;display: block;margin-left: 10%;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu img+p{margin: 15px 0;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu dt{text-transform: uppercase;font-size: 16px;color: #444;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu dt,.topwhite .topwhite-flex .topwhite-flex-left .topmenu dd{margin-bottom: 5px;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .lenses-flex .lenses-flex-1{width: 13%;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .lenses-flex .lenses-flex-2{width: 25%;text-align: center;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .featured-flex dl{width: 18%;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .featured-flex span{text-align: center;margin-left: 1%;width: 14%;}
.topwhite .topwhite-flex .topwhite-flex-left .topmenu .featured-flex img{width: 100%;display: block;}

.topwhite .topwhite-flex .topwhite-flex-right #topSearch{height: 28px;width: 150px;font-size: 14px;}
.topwhite .topwhite-flex .topwhite-flex-right #topSearchImg{position: absolute;right: 5px;top: 50%;transform: translateY(-50%);color: #999;font-size: 18px;cursor: pointer;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch{background: #fff;position:absolute;top:31px;right: 0;width:630px;padding:30px 70px 40px 60px;z-index:1000;text-align: left;box-shadow:1px 1px 5px #e6e6e6;border-radius: 4px;display: none;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .search-item{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .search-worddiv{background: #f1f1f1;display: inline-table;padding: 5px 10px;margin-right: 12px;margin-top: 13px;font-size: 14px;border: 1px solid #f1f1f1;color: #555;line-height: 16px;display: flex;align-items: center;cursor: pointer;border-radius: 4px;text-transform: capitalize;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .search-active{border: 1px solid var(--f7-theme-color);color: var(--f7-theme-color);}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .search-content{margin: 15px 0 0;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .search-content-item{display:flex;align-items: center;flex-wrap: wrap;justify-content:space-between;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .psc-div{width: 32%;text-align: center;padding-bottom: 10px;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .psc-del{color: #999;padding-right: 5px;font-size: 13px;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .psc-goods{width: 88%;display:flex;align-items: center;flex-wrap: wrap;justify-content:space-between}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .psc-more{width: 12%;text-align: right;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .psc-more a{font-size: 14px;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .recently-searched{margin-bottom: 20px;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .recently-searched-title{display: flex;align-items: center;}
.topwhite .topwhite-flex .topwhite-flex-right #recSearch .recently-searched-remove{margin-left: 8px;cursor: pointer;}

.topwhite .topwhite-flex .topwhite-flex-right .iconfont{color: #666;vertical-align: sub;}

/*二级导航*/
.top_radius{border-radius: 8.5px 8.5px 0 0; font-size: 0; width:100%;}
.top_radius_txt { background-color: var(--f7-theme-color); padding: 6px 0; color: #fff; text-transform: capitalize; border-radius: 0 0 8.5px 8.5px;}

/*直达顶部*/
#totopnew{position: fixed;bottom: 50px;right: 50px;cursor: pointer;z-index: 100;display: none;font-size: 40px;}

/*轮播圆圈*/
.swiper-button-prev, .swiper-button-next{background: rgb(0 0 0 / 60%);height: 50px;width: 50px;border-radius: 50%;color: #fff;}
.swiper-button-prev:hover, .swiper-button-next:hover {background: rgb(0 0 0 / 80%);}
.swiper-button-prev .swiper-button-disabled, .swiper-button-next .swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}


/*产品颜色背景*/
/*.probg_blue{background: #ebf3ff}
.probg_green{background: #def6ea}
.probg_gold{background: #f7f1ea}
.probg_brown{background: #ffe3d3}
.probg_purple{background: #ede6f4}
.probg_yellow{background: #fff9e5}
.probg_pink{background: #fff3f1}
.probg_red{background: #fee8eb}
.probg_orange{background: #fedec8}
.probg_white,.probg_black,.probg_grey,.probg_other,.probg_tortoiseshell,.probg_silver,.probg_clear,.probg_floral,.probg_multicolor{background: #fafafa}*/

.probg_blue,.probg_green,.probg_gold,.probg_brown,.probg_purple,.probg_yellow,.probg_pink,.probg_red,.probg_orange,.probg_white,.probg_black,.probg_grey,.probg_other,.probg_tortoiseshell,.probg_silver,.probg_clear,.probg_floral,.probg_multicolor{background: #fafafa;}


/*翻页*/
.pagination{justify-content: center; align-items: center;text-align: center;}
.pagination>li>a,.pagination>li>span{
    font-size: 16px;
    background-color: #ffffff;
    color: #000;
    border-radius: 50%;
    border: 1px solid #919191;
    margin: 0 7px;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 43px;
}

.pagination>li>a:hover{
    background: #ff0077;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{
	background-color:var(--f7-theme-color);
	border-color:var(--f7-theme-color);
	color: #fff; 
	border-radius: 50%;
	width: 50px;
    height: 50px;
	line-height: 46px;
    font-size: 20px;
}
.pagination .dots{
	border: none;
    background: no-repeat;
    line-height: 34px;
}

.pagination .prevbtn,.pagination .prevbtn-dots{    
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.pagination .nextbtn,.pagination .prevbtn{    
    background: #000000;
    color: #ffffff;
    line-height: 43px;
}
.pagination .nextbtn:hover,.pagination .prevbtn:hover{
    background: #000000;
    color: #ffffff;
    border: 1px solid #919191;
}

.pagination .nextbtn-dots,.pagination .prevbtn-dots{    
    background: #cccccc;
    color: #ffffff;
    line-height: 43px;
}
.pagination .nextbtn-dots:hover,.pagination .prevbtn-dots:hover{    
    background: #cccccc;
    color: #ffffff;
}


.pagination .nextbtn .icon,.pagination .nextbtn-dots .icon,.pagination .prevbtn .icon,.pagination .prevbtn-dots .icon{    
	font-size: 26px;
}



.successToastDiv{left: 50%;top: 40%;width: 300px;margin-left: -150px;z-index: 9999999}


#newcustomerModal .modal-dialog{width:600px;max-width: 600px;}
#newcustomerModal .modal-content{background-color: #fbcfdf;text-align: center;}
#newcustomerModal .icon-guanbi2{position:absolute;right: 10px;top: 5px;color: #fff;cursor: pointer;font-size: 26px;}
#newcustomerModal .topdiv{margin-bottom: 120px;}
#newcustomerModal .topdiv img{border-radius: 0.25rem 0.25rem 0 0;}
#newcustomerModal .discountbg{border-radius: 8.5px;background-color: #005432;width: 62%;position: absolute;left: 19%;bottom: -96px;box-shadow: 1px 1px 4px #e7e4e4;color: #fff;}
#newcustomerModal .discount{font-size: 26px;font-weight: bold;border-bottom: 1px dashed;text-transform: capitalize;margin: 7px 20px;padding: 5px;}
#newcustomerModal .discountbg .justify-content-around{margin: 15px;}
#newcustomerModal .discountnum{color: #ffbf02;font-size: 68px;text-transform: uppercase;font-weight: bold;line-height: 30px;}
#newcustomerModal .bottom1{width: 64%;margin: 0 auto 15px;}
#newcustomerModal .w20{border-radius: 50%;border: 1px solid #fff;width: 14%;}
#newcustomerModal .w20:not(:first-child) {margin-left: -4%;}
#newcustomerModal .w340{width: 340px;margin: 10px auto;}
#newcustomerModal .code{display: inline-block;background: #fff;color: #666;font-size: 26px;font-weight: bold;letter-spacing: 10px;text-align: center;padding: 7px 50px 5px 58px;border: 1px dashed;margin: 10px 0;}
#newcustomerModal .code_btn{display: inline-block;background: var(--f7-theme-color);color: #fff;padding: 16px 20px;font-size: 14px;vertical-align: super;margin-left: -4px;cursor: pointer;}

#newcustomerModal .modal-content-new{background-color: #8ebba4 !important;text-align: center;border-radius: 12.5px}
#newcustomerModal .topdiv1{background-color: #8ebba4;border-radius: 12.5px}
#newcustomerModal .pop-bogo-txt{padding-top: 40px;line-height: 120px}
#newcustomerModal .pop-bogo-1{color:#f70863;font-size: 42px;text-transform: uppercase;line-height: 42px}
#newcustomerModal .pop-bogo-2{color:#f70863;font-size: 100px;text-transform: uppercase;font-weight: bold;padding-left: 20px}
#newcustomerModal .pop-bogo-3{font-size: 26px;}
#newcustomerModal .pop-bogo-4{width: auto;font-size: 26px;text-align: center;width:360px;margin:25px auto;}
#newcustomerModal .pop-bogo-4-txt{padding: 6px 0;color: #fff;width: 70%;text-align: center;border-radius: 12.5px 0 0 12.5px;border: 2px dashed #fff;}
#newcustomerModal .pop-bogo-4-btn{padding: 6px 0;background: #fff;color: #000;width: 30%;text-align: center;border-radius:0 12.5px  12.5px 0;border: 2px solid #fff;cursor: pointer;}
#newcustomerModal .pop-bogo-5{width: 50%;margin:40px auto 10px;}
#newcustomerModal .pop-bogo-6{color: #fff}
#newcustomerModal .pop-bogo-7{width: 90%;margin:-20px auto 0;}
#newcustomerModal .pop-bogo-txt-color{color:#f70863;}

/*页面loading框*/
.wl_load{position: fixed;height: 100%;width: 100%;z-index: 99999;background-color: rgba(255,255,255,0.9);}
.wl_load .wl_load_div{width:500px;height:500px;position:absolute;top:50%;left: 50%;z-index: 13;text-align: center;margin: -250px 0 0 -250px;}
.wl_load .spinner{display: flex;align-items: center;justify-content: center;}
.wl_load .wl_load_img_div{border-radius: 50%;width:300px;height:300px;background-color:#e3e3e3;overflow: hidden;position: relative;}
.wl_load .wl_load_img_div::before{content: "WhereLight";color: var(--f7-theme-color);font-size: 26px;font-weight: bold;display: flex;align-items: center;justify-content: center;align-content: center;height: 100%;}
.wl_load .wl_load_img{width: 100%;-webkit-animation: loadin 1s;position:absolute;top: 0;left: 0;border-radius: 50%;}
.wl_load .spinner .loader{
    height: 320px;
    width: 320px;
    position: absolute;
    left: 90px;
    top: -10px;
    opacity: 1;
}
.wl_load .wl_load_txt{text-align:center;margin-top:450px;}
.wl_load .spinner .loader {background-color: transparent;-webkit-animation: rotation .7s infinite linear;-moz-animation: rotation .7s infinite linear;-o-animation: rotation .7s infinite linear;animation: rotation .7s infinite linear;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 5px solid transparent;border-top: 5px solid #e6157f;border-radius: 100%}
@-webkit-keyframes rotation {
    from {
    -webkit-transform: rotate(0)
    } to {
    -webkit-transform: rotate(359deg)
    }
}
@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0)
    }to {
        -moz-transform: rotate(359deg)
    }
}
@-o-keyframes rotation {
    from {
        -o-transform: rotate(0)
    }to {
        -o-transform: rotate(359deg)
    }
}
@keyframes rotation {
    from {
        transform: rotate(0)
    }to {
        transform: rotate(359deg)
    }
}

@-webkit-keyframes loadin {
    from {
        transform: translate3d(0, 100%, 0px);
    } to {
        transform: translate3d(0, 0, 0px);
    }
}