@media (min-width:768px) and (max-width:991px){.login-container .block{width:25%}
}
#tempImg{max-width:1000%}
.banner{width:100%;height:auto}
.alert-window.try-on-box{position:fixed;width:100%;height:100%;z-index:100001;top:0;left:0;background-color:rgba(0,0,0,.5)}
.try-content{max-width:850px;position:absolute;background-color:#f5f5f5;padding:30px;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:10px}
.try-left-box{width:250px;float:right;box-sizing:border-box}
.glasses-list{width:100%;height:480px;overflow-y:auto;margin-bottom:38px}
.try-head-loading{position:absolute;width:40px;height:40px;left:calc(50% - 20px);top:calc(50% - 20px)}
.glasses-list::-webkit-scrollbar{width:20px}
.glasses-list::-webkit-scrollbar-track{width:20px;box-shadow:none;border-radius:0;background:#e6e6e6}
.glasses-list::-webkit-scrollbar-thumb{border-radius:20px;box-shadow:none;background:#a7a7a7}
.glasses-item{width:220px;height:120px;margin-right:5px;margin-bottom:15px;border:1px solid transparent;text-align:center;padding:15px 4px}
.glasses-item.active{border-color:#e6e6e6}
.glasses-item-img{max-width:200px;max-height:100px;width:auto;height:auto}
.title-box .title{font-size:32px;font-weight:600;color:var(--theme);text-align:center;margin:100px 0 10px}
.title-box .sub-title{color:var(--theme);font-size:var(--size18);text-align:center;padding:0;text-transform:unset}
.note-info{color:var(--theme);text-align:center;font-size:var(--size13)}
.note-info span.help-icon{display:inline-block;border:1px solid var(--theme);margin-left:5px;width:18px;height:18px;border-radius:50%;line-height:16px;font-size:var(--size16);cursor:pointer}
.try-left-icon{display:inline-block;width:24px;height:24px;cursor:pointer}
.try-on-box .toolbar:after{clear:both;content:"";display:block}
.try-on-box .toolbar{margin-top:24px}
.try-on-box .toolbar .try-scale{width:49%;float:left;max-width:200px}
.try-on-box .toolbar .try-rotate{width:49%;float:right;max-width:200px}
.try-on-box .toolbar .try-swiper-box{position:relative;display:inline-block;width:calc(100% - 80px);height:12px;background:0 0;margin:6px 9px;border-radius:6px;border:0;outline:0;background-size:30% 100%}
.try-swiper-input{position:absolute;margin:0;width:100%}
.try-swiper-input,.try-swiper-input::-webkit-slider-runnable-track,.try-swiper-input::-webkit-slider-thumb{-webkit-appearance:none;outline:0}
.try-swiper-input:focus,.try-swiper-input:focus::-moz-range-thumb,.try-swiper-input:focus::-moz-range-track,.try-swiper-input:focus::-ms-thumb,.try-swiper-input:focus::-ms-track,.try-swiper-input:focus::-webkit-slider-runnable-track,.try-swiper-input:focus::-webkit-slider-thumb{outline:0;border:0}
.try-swiper-input::-webkit-slider-thumb{background-color:var(--theme);width:25px;height:25px;border:2px solid #fff;border-radius:50%;margin-top:-6px}
.try-swiper-input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--theme) 0,var(--theme) 50%,#fff 0,#fff 100%);height:12px;border-radius:6px}
.try-swiper-input::-moz-range-thumb{background-color:var(--theme);width:20px;height:20px;border:2px solid #fff;border-radius:50%;margin-top:-9px}
.try-swiper-input::-moz-range-track{background-color:#fff;height:12px;border-radius:6px}
.try-swiper-input::-moz-range-progress{background-color:var(--theme);height:12px;border-radius:6px}
.try-swiper-input::-ms-thumb{background-color:var(--theme);width:20px;height:20px;border:2px solid #fff;border-radius:50%;margin-top:-9px}
.try-swiper-input::-ms-track{background-color:var(--theme);height:12px;border-radius:6px}
.try-swiper-input::-ms-fill-lower{background-color:var(--theme);height:12px;border-radius:6px}
.try-swiper-input::-ms-fill-upper{background-color:#fff;height:12px;border-radius:6px}
.try-right-box{vertical-align:top;width:500px;padding-right:15px;float:left;box-sizing:border-box}
.try-right-head-box{width:100%;margin:0 auto 5pt;position:relative;height:480px}
.try-right-head{width:100%;height:auto;max-width:100%;max-height:100%;margin:20px 0 0;position:static;display:block;opacity:1}
.try-right-glasses{position:absolute;z-index:99;width:40%;left:36%;top:32%}
.try-right-head-tool{position:relative;width:100%;height:90px;top:-90px;text-align:right}
.try-right-head-tool img{width:70px;height:70px;margin-right:20px;cursor:pointer}
.try-content:after{clear:both;content:"";display:block}
.help-wrapper{position:absolute;width:100%;left:0;top:0;height:100%;background-color:rgba(0,0,0,.1)}
.help-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background-color:#fff;padding:20px;width:500px;z-index:99}
.help-content img{display:block;width:100%}
.help-content .ok{display:block;margin:20px auto 0;display:block;margin:20px auto 0;color:var(--theme);font-size:var(--size18);text-align:center;text-decoration:underline;cursor:pointer;background:0 0;border:none}
.video-box{position:fixed;top:0;left:0;background:rgba(0,0,0,.5);width:100%;height:100%;z-index:10003}
#video{background-color:#fff;margin-top:30px;margin-left:auto;margin-right:auto;display:block;height:486px;object-fit:cover}
#video.hide{display:none}
canvas#canvas{position:static;margin:30px auto 0;opacity:1;display:none}
canvas#canvas.show{display:block}
.toolbar-wrapper{width:486px;margin:20px auto}
.productionList_li .productionList_li_content .btn-wrapper{text-align:center;opacity:0;display:flex}
.productionList_li:hover .productionList_li_content .btn-wrapper{opacity:1}
.btn-wrapper .try-right-upload-btn{display:block;margin-bottom:10px;margin-top:0}
#save{display:none}
#snap{display:none}
.productFilter{position:relative}
.productFilter .layui-btn:hover{background:#0898a7}
.productFilter_title{display:flex;align-items:center;flex-wrap:wrap;border-bottom:1px solid #ccc}
.productFilter_title .li{position:relative;font-size:var(--size16);color:var(--color-almost-black);margin-right:50px;cursor:pointer}
.productFilter_title .li::after{content:'';position:absolute;display:inline-block;right:-15px;top:6px;transform:rotate(135deg);width:10px;height:10px;border-width:2px 2px 0 0;border-color:#ccc;border-style:solid}
.productFilter_title .li:last-child{margin-right:0}
.productFilter_content{width:100%;position:absolute;left:0;top:100%;border:1px solid #ccc;border-top:transparent;background:#fff;z-index:99}
.productFilter_content .li{display:none;align-items:center;flex-wrap:wrap}
.productFilter_content .li .img{width:20px;height:20px;border-radius:50%;margin-right:10px}
.li_label .checkbox{width:30px;height:30px;display:inline-block}
.li_label{display:flex;align-items:center;min-width:100px;padding:10px 0}
.contentActive{display:flex!important}
.layui-form-checked[lay-skin=primary] i{border-color:var(--theme)!important;background-color:#fff!important;color:var(--theme)!important;font-weight:700}
.layui-form-radio>i:hover,.layui-form-radioed>i{color:var(--theme)!important}
.layui-form-checkbox[lay-skin=primary]{min-width:20px;min-height:20px;padding-top:10px;padding-bottom:10px}
.layui-form-checkbox[lay-skin=primary] i{width:20px;height:20px;font-size:var(--size16);top:11px}
.layui-form-checkbox[lay-skin=primary] span{line-height:20px}
.checkall{display:flex;align-items:center;font-size:var(--size16)}
#commonProduct{width:78%;margin:0 auto}
.productionList{position:relative;display:flex;flex-wrap:wrap}
.productionList_li{position:relative;cursor:pointer}
.productionList_li:last-child{margin-right:auto}
.productionList_li.static .productionList_li_content .circleColor{display:none}
.productionList_li.static .productionList_img .productionList_img_li .img{display:none}
.productionList_li.static .productionList_img .productionList_img_li .gimg{position:absolute}
.productionList_li .productionList_li_content .glasses-box{display:none}
.product-try-right-head{position:static;display:block;opacity:1;width:100%;height:auto;max-width:100%;max-height:100%}
.mode-box{display:flex;align-items:flex-end}
.mode-box .mode-btn{padding:.8rem 1rem;border:1px solid var(--theme);cursor:pointer;font-weight:700;border-radius:5px}
.mode-box .mode-btn.try{margin-left:5px}
.mode-btn-status{background-color:var(--theme);color:#fff}
.productionList_li .wrapper{display:block;border:1px solid #f5f5f5}
.productionList_li:hover .wrapper{box-shadow:0 0 6px 2px #ccc;transition:all .3s}
.productionList_img{position:relative;width:100%;overflow:hidden}
.productionList_img_li{position:static;left:-100%;top:0;width:100%;height:100%;display:none}
.productionList_img_li.productionListActive{display:block;text-align:center}
.productionList_img_li.static .img{position:static;width:100%}
#productInfo_related .productionList_imgLoad{width:80%}
.productionList_li_content{width:100%}
.productionList_li_content .title{text-align:center;font-size:var(--size18);font-weight:700}
#blue_light .circleColor,.home_shop_gift_slide_txtwrapper .circleColor,.productionList_li_content .circleColor{white-space:nowrap;overflow-x:auto;text-align:center;padding-top:4px}
#shop_gift .circleColor{width:180px;overflow-x:auto;text-align:left;white-space:nowrap}
#shop_gift .circleColor::-webkit-scrollbar{width:10px;height:5px}
#shop_gift .circleColor::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:#535353}
#shop_gift .circleColor::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 1px transparent;border-radius:10px;background:#ccc}
.circleColor .circleColor_li{display:inline-block;width:2rem;height:2rem;padding:.2rem;border:1px solid #ccc;margin-right:10px;border-radius:50%;overflow:hidden;cursor:pointer}
.circleColor .circleColor_li:last-child{margin-right:0}
.circleColor_li .img{width:100%;height:100%;border-radius:50%;vertical-align:unset}
.productionList_li_content .price{position:relative;display:flex;align-items:center;justify-content:center}
.price .price_new{position:relative;font-size:1.6rem;font-weight:700}
.price .price_new:hover,.productionList_li_content .title:hover{color:#999!important}
.price .price_old{position:absolute;right:-100%;top:0;font-size:1.6rem;color:#e00}
.price ._favourites{position:absolute;right:0;bottom:5px;display:none}
._favourites .glyphicon{color:var(--theme);font-size:1.8rem}
.productionList_li:hover ._favourites{display:block}
.productionListActive{left:0;transition:all .5s}
.circleColorActive{border:1px solid var(--color-almost-black)!important}
button.shop-now{position:relative;width:calc((100% - 20px)/ 2);margin-left:20px;height:3.7rem;line-height:3.7rem;transform:translateZ(0);text-decoration:none;text-align:center;overflow:hidden;cursor:pointer;transition:all .4s;box-sizing:border-box;background-color:#7fcf20;border:1px solid #7fcf20;color:#fff;border-radius:4px}
button.tryon{position:relative;width:calc((100% - 20px)/ 2);height:3.7rem;line-height:3.7rem;background:#fff;transform:translateZ(0);text-decoration:none;text-align:center;overflow:hidden;cursor:pointer;transition:all .6s;border:1px solid #666;transition:all .4s;box-sizing:border-box;background-color:var(--theme);border-color:var(--theme);color:#fff;border-radius:4px}
.tryon:hover{color:var(--theme);background-color:#fff}
.shop-now:hover{color:#7fcf20;background-color:#fff}
button.tryon span{position:absolute;z-index:1;top:0;left:0;width:100%;transition:transform .5s ease}
button.tryon span:first-child{color:#fff;transform:translateY(24px)}
button.tryon:hover span:first-child{transform:translateY(0)}
button.tryon span:last-child{color:var(--color-almost-black);transform:translateY(0)}
button.tryon:hover span:last-child{transform:translateY(-40px)}
.showMore_box{width:100%;text-align:center;display:none}
.showMore,.toLink{width:35rem;color:#fff;font-size:var(--size18);border-radius:5px;background:var(--theme);margin:0 auto;cursor:pointer;font-weight:700}
.showMore:hover,.toLink_txt:hover{color:rgba(255,255,255,.9)}
.eye-window{max-width:unset;width:unset;box-sizing:border-box}
.eye-window .try-right-box{padding-left:5px;padding-right:5px;border:1px dashed #999}
.swiper-alert-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}
.swiper-alert-head{width:100%;height:10rem;padding-top:25px}
.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:border-box}
.product-try-on-list:after{clear:both;content:"";display:block}
.product-try-on-list>.try-right-upload-btn{float:left;width:30%}
.product-try-on-list .btn-wrapper .note-info,.product-try-on-list .try-right-upload-btn .note-info{text-align:left;color:var(--color-almost-black);margin-bottom:20px}
.product-try-on-list .btn-wrapper .note-info{margin-top:0}
.product-try-on-list .swiper-head{min-height:12rem;overflow:hidden;width:60%;margin-left:auto;margin-right:unset}
.swiper-alert-head .swiper-wrapper .swiper-slide .swiper-slide-img,.swiper-head .swiper-wrapper .swiper-slide .swiper-slide-img{width:100%;height:auto;max-width:100%;max-height:1000%}
.swiper-alert-head .swiper-button-next,.swiper-alert-head .swiper-button-prev{width:1.7rem;height:7.5rem;background-color:rgba(255,255,255,.8);top:25px;right:0;margin:0;color:rgba(255,255,255,.6)}
.swiper-head .swiper-button-next,.swiper-head .swiper-button-prev{width:3rem;height:100%;background-color:rgba(255,255,255,.8);top:0;right:0;margin:0;color:#000}
.swiper-head .swiper-button-next.swiper-button-disabled,.swiper-head .swiper-button-prev.swiper-button-disabled{color:rgba(0,0,0,.6)}
.swiper-alert-head .swiper-button-next,.swiper-alert-head .swiper-button-prev{background-color:rgba(255,255,255,.8);color:#000}
.swiper-alert-head .swiper-button-next:after,.swiper-alert-head .swiper-button-prev:after{font-size:var(--size16);font-weight:600}
.swiper-alert-head .swiper-button-prev,.swiper-head .swiper-button-prev{left:0}
.swiper-head .swiper-button-next:after,.swiper-head .swiper-button-prev:after{font-size:var(--size24);content:unset}
.swiper-alert-head .swiper-button-next:after,.swiper-alert-head .swiper-button-prev:after{font-size:var(--size16);content:unset}
.try-alert-right-file-btn{position:absolute;right:40px;bottom:86px}
.try-alert-right-upload-btn,.try-right-upload-btn{height:4rem;margin-top:20px;position:relative;margin-left:auto;margin-right:auto;z-index:9}
.common-alert-btn,.common-btn{width:100%;height:4rem;background-color:var(--theme);border-radius:6px;color:#fffefe;font-size:var(--size15);text-align:center;font-weight:700;cursor:pointer}
.try-alert-right-upload-btn .common-alert-btn,.try-right-upload-btn .common-btn{line-height:4rem}
.try-alert-right-file,.try-right-file{width:100%;height:5.4rem;margin-top:-54px;opacity:0}
.alert-btn-wrapper:after{clear:both;content:"";display:block}
.alert-btn-wrapper .alert-use-webcam{background-color:var(--theme);width:100%;height:4rem;padding-left:0;box-sizing:border-box;line-height:40px;margin-top:20px;color:#fffefe;font-size:var(--size15);text-align:center;font-weight:700;border-radius:6px;cursor:pointer}
.alert-btn-wrapper .try-alert-right-upload-btn{width:100%;margin-top:10px}
.video-box{position:fixed;top:0;left:0;background:rgba(0,0,0,.5);width:100%;height:100%;z-index:10003}
#video{background-color:#fff;margin-top:30px;margin-left:auto;margin-right:auto;display:block;height:486px;object-fit:cover}
#video.hide{display:none}
canvas#canvas{position:static;margin:30px auto 0;opacity:1;display:none}
canvas#canvas.show{display:block}
.toolbar-wrapper{width:48.6rem;margin:20px auto}
.productionList_li .productionList_li_content .btn-wrapper{text-align:center;opacity:0}
.productionList_li:hover .productionList_li_content .btn-wrapper{opacity:1}
.btn-wrapper .try-right-upload-btn{display:block;margin-bottom:10px;margin-top:0}
#save{display:none}
#snap{display:none}
#apply,#snap,#start{width:18rem;color:var(--color-almost-black);border:1px solid var(--color-almost-black);border-radius:5px;font-size:var(--size16);padding-top:10px;padding-bottom:10px;background-color:#fff}
#apply:hover,#snap:hover,#start:hover{background-color:var(--theme);color:#fff;border:1px solid var(--theme)}
.btn-wrapper .use-webcam{background-color:var(--theme);border-radius:6px;color:#fffefe;font-size:var(--size15);text-align:center;font-weight:700;cursor:pointer;line-height:40px;display:block;height:40px}
.product-try-on-list{display:flex;align-items:center;flex-wrap:wrap}
.try_Online_upload{width:35%}
#eye-position{position:static;display:block;opacity:1;margin-top:20px}
.position-img-box{position:relative}
.position-img-box .red-btn{position:absolute;width:30px;height:30px;top:30%;left:30%;cursor:pointer}
.position-img-box .right-eye.red-btn{left:60%}
.position-img-box .red-btn:before{content:"";width:100%;height:2px;background-color:red;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.position-img-box .red-btn:after{content:"";width:2px;height:100%;background-color:red;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.webcam-box .red-btn{display:none}
.webcam-box .move .red-btn{display:block}
.try-glass{background:#2fabe0;color:#fff;border-color:#2fabe0;padding:10px}
.try-glass:hover{border-color:#2fabe0;background:#2fabe0;color:#fff}
#eye-window .toolbar-box{text-align:center;margin-top:20px;margin-bottom:20px}
#questionMore{display:inline-block;width:150px;color:var(--color-almost-black);border-radius:5px;background:#eee;height:25px;line-height:25px}
@media (max-height:900px) and (min-width:768px){.try-alert-right-file-btn{right:10px;bottom:60px}
.try-content{padding:10px}
.eye-window{padding:20px}
.try-on-box .toolbar{margin-top:0}
.swiper-alert-head{padding-top:0;height:auto;margin-bottom:5px}
.swiper-alert-head .swiper-button-next,.swiper-alert-head .swiper-button-prev{top:0}
.alert-btn-wrapper .alert-use-webcam,.try-alert-right-upload-btn,.try-right-upload-btn{height:40px}
.alert-btn-wrapper .alert-use-webcam,.try-alert-right-upload-btn .common-alert-btn{line-height:40px}
.try-alert-right-upload-btn .common-alert-btn{padding:0}
.swiper-alert-head .swiper-wrapper .swiper-slide .swiper-slide-img-close,.swiper-head .swiper-wrapper .swiper-slide .swiper-slide-img-close{right:0;top:0}
.title-box .title{margin-top:45px}
.glasses-list{margin-bottom:0}
}
@media (max-width:767px){#eye-position{width:100%}
button.tryon{width:100%}
button.shop-now{width:100%;margin-top:10px;margin-left:0}
.mode-box{position:static;justify-content:center}
.product-try-on-list{width:calc(100% - 40px);margin-left:20px}
.product-try-on-list .swiper-head{width:100%;padding-top:10px}
.product-try-on-list .btn-wrapper,.product-try-on-list>.try-right-upload-btn{width:100%;margin-top:10px;height:auto}
.try-icon{float:left;width:25pt;height:25pt;cursor:pointer}
.alert-window.try-on-box{background-color:#fff}
.try-content{position:static;height:100%;transform:translate(0)}
.try-right-head-box{height:auto;margin-bottom:5pt}
.try-right-head-tool{display:none}
.try-base-tool{position:absolute;z-index:9;bottom:5pt;width:calc(100% - 34pt);margin:0 17pt}
.try-base-tool-left{width:100%;height:65pt;text-align:left;display:inline-block;margin-top:5pt;position:relative;overflow:hidden}
.try-base-tool-left .try-icon{position:absolute}
.try-base-tool-right{display:none}
.alert-btn-webcam,.try-alert-right-upload-btn,.try-right-upload-btn{width:90%;height:32pt;margin:5pt auto}
.alert-use-webcam,.try-alert-right-upload-btn .common-alert-btn,.try-right-upload-btn .common-btn{line-height:32pt;padding:0;font-size:12pt}
.alert-use-webcam{width:100%;height:40px;background-color:var(--theme);border-radius:6px;color:#fffefe;font-size:12pt;text-align:center;font-weight:700;line-height:40px;cursor:pointer}
.swiper-glasses{margin-top:20pt}
.swiper-alert-head .swiper-button-next,.swiper-glasses .swiper-button-next,.swiper-head .swiper-button-next{right:-5pt;display:none}
.swiper-alert-head .swiper-button-prev,.swiper-glasses .swiper-button-prev,.swiper-head .swiper-button-prev{left:-5pt;display:none}
.help-wrapper{z-index:100}
.help-content{width:90%}
.note-info{margin-top:0;font-size:12pt}
}
@media (min-width:320px) and (max-width:640px){.mode-box{position:static;justify-content:center;align-items:center;width:100%}
.alert-window.try-on-box{overflow:auto}
.try-right-box{width:100%}
#commonProduct{width:100%}
.productionList{justify-content:space-between;margin:0}
.productionList_li .wrapper{padding:5px}
.productionList_li_content .price{padding-left:20px;padding-right:20px}
.price .price_old{left:5px;top:15px;font-size:var(--size13)}
.price ._favourites{right:25px;bottom:5px}
.showMore{padding:10px 0;border-radius:30px}
.productFilter_content .layui-form-checkbox[lay-skin=primary]{margin-bottom:10px}
.use-webcam{width:100%;height:40px;background-color:var(--theme);border-radius:6px;color:#fffefe;font-size:var(--size18);text-align:center;font-weight:700;cursor:pointer;line-height:40px}
.common-btn{margin-bottom:10px;line-height:40px}
.product-try-on-list .swiper-head{height:100%}
#apply{margin-right:0!important;margin-bottom:10px!important}
}
.swiper-alert-head .swiper-button-prev,.swiper-head .swiper-button-prev{left:0}
.cms-blue-light .mode-box,.cms-blue-light-reading .mode-box{margin:0 auto}