.animated{
    -webkit-animation-duration:.5s;
    animation-duration:.5s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
.animated.infinite{
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite
}
.animated.hinge{
    -webkit-animation-duration:2s;
    animation-duration:2s
}
@-webkit-keyframes bounceInRight{
    0%,60%,75%,90%,to{
        -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
        transition-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(3000px,0,0);
        transform:translate3d(3000px,0,0)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(-25px,0,0);
        transform:translate3d(-25px,0,0)
    }
    75%{
        -webkit-transform:translate3d(10px,0,0);
        transform:translate3d(10px,0,0)
    }
    90%{
        -webkit-transform:translate3d(-5px,0,0);
        transform:translate3d(-5px,0,0)
    }
    to{
        -webkit-transform:none;
        transform:none
    }
}
@keyframes bounceInRight{
    0%,60%,75%,90%,to{
        -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
        transition-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(3000px,0,0);
        -ms-transform:translate3d(3000px,0,0);
        transform:translate3d(3000px,0,0)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(-25px,0,0);
        -ms-transform:translate3d(-25px,0,0);
        transform:translate3d(-25px,0,0)
    }
    75%{
        -webkit-transform:translate3d(10px,0,0);
        -ms-transform:translate3d(10px,0,0);
        transform:translate3d(10px,0,0)
    }
    90%{
        -webkit-transform:translate3d(-5px,0,0);
        -ms-transform:translate3d(-5px,0,0);
        transform:translate3d(-5px,0,0)
    }
    to{
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }
}
.bounceInRight{
    -webkit-animation-name:bounceInRight;
    animation-name:bounceInRight
}
@-webkit-keyframes zoomInUp{
    0%{
        -webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19);
        opacity:0;
        -webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)
    }
    60%{
        -webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);
        animation-timing-function:cubic-bezier(.175,.885,.32,1);
        opacity:1;
        -webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);
        transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)
    }
}
@keyframes zoomInUp{
    0%{
        -webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19);
        opacity:0;
        -webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        -ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)
    }
    60%{
        -webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);
        animation-timing-function:cubic-bezier(.175,.885,.32,1);
        opacity:1;
        -webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);
        -ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);
        transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)
    }
}
.zoomInUp{
    -webkit-animation-name:zoomInUp;
    animation-name:zoomInUp
}
@-webkit-keyframes bounceInUp{
    0%,60%,75%,90%,to{
        -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
        transition-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,3000px,0);
        transform:translate3d(0,3000px,0)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(0,-20px,0);
        transform:translate3d(0,-20px,0)
    }
    75%{
        -webkit-transform:translate3d(0,10px,0);
        transform:translate3d(0,10px,0)
    }
    90%{
        -webkit-transform:translate3d(0,-5px,0);
        transform:translate3d(0,-5px,0)
    }
    to{
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
@keyframes bounceInUp{
    0%,60%,75%,90%,to{
        -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
        transition-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,3000px,0);
        -ms-transform:translate3d(0,3000px,0);
        transform:translate3d(0,3000px,0)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(0,-20px,0);
        -ms-transform:translate3d(0,-20px,0);
        transform:translate3d(0,-20px,0)
    }
    75%{
        -webkit-transform:translate3d(0,10px,0);
        -ms-transform:translate3d(0,10px,0);
        transform:translate3d(0,10px,0)
    }
    90%{
        -webkit-transform:translate3d(0,-5px,0);
        -ms-transform:translate3d(0,-5px,0);
        transform:translate3d(0,-5px,0)
    }
    to{
        -webkit-transform:translateZ(0);
        -ms-transform:translateZ(0);
        transform:translateZ(0)
    }
}
.bounceInUp{
    -webkit-animation-name:bounceInUp;
    animation-name:bounceInUp
}
@-webkit-keyframes bounceIn{
    0%,20%,40%,60%,80%,to{
        -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
        transition-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    20%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    40%{
        -webkit-transform:scale3d(.9,.9,.9);
        transform:scale3d(.9,.9,.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
        -webkit-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)
    }
    to{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes bounceIn{
    0%,20%,40%,60%,80%,to{
        -webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
        transition-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        -ms-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    20%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        -ms-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    40%{
        -webkit-transform:scale3d(.9,.9,.9);
        -ms-transform:scale3d(.9,.9,.9);
        transform:scale3d(.9,.9,.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        -ms-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
        -webkit-transform:scale3d(.97,.97,.97);
        -ms-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)
    }
    to{
        opacity:1;
        -webkit-transform:scaleX(1);
        -ms-transform:scaleX(1);
        transform:scaleX(1)
    }
}
.bounceIn{
    -webkit-animation-name:bounceIn;
    animation-name:bounceIn
}
@-webkit-keyframes zoomIn{
    0%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    50%{
        opacity:1
    }
}
@keyframes zoomIn{
    0%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        -ms-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    50%{
        opacity:1
    }
}
.zoomIn{
    -webkit-animation-name:zoomIn;
    animation-name:zoomIn
}
@-webkit-keyframes slideInRight{
    0%{
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
        visibility:visible
    }
    to{
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
@keyframes slideInRight{
    0%{
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
        visibility:visible
    }
    to{
        -webkit-transform:translateZ(0);
        -ms-transform:translateZ(0);
        transform:translateZ(0);
        -moz-transform:translateZ(0);
        -o-transform:translateZ(0)
    }
}
.slideInRight{
    -webkit-animation-name:slideInRight;
    animation-name:slideInRight
}
@-webkit-keyframes flip{
    0%{
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) rotateY(-1turn);
        transform:perspective(400px) rotateY(-1turn)
    }
    40%{
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);
        transform:perspective(400px) translateZ(150px) rotateY(-190deg)
    }
    50%{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);
        transform:perspective(400px) translateZ(150px) rotateY(-170deg)
    }
    80%{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) scale3d(.95,.95,.95);
        transform:perspective(400px) scale3d(.95,.95,.95)
    }
    to{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px);
        transform:perspective(400px)
    }
}
@keyframes flip{
    0%{
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) rotateY(-1turn);
        -ms-transform:perspective(400px) rotateY(-1turn);
        transform:perspective(400px) rotateY(-1turn)
    }
    40%{
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);
        -ms-transform:perspective(400px) translateZ(150px) rotateY(-190deg);
        transform:perspective(400px) translateZ(150px) rotateY(-190deg)
    }
    50%{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);
        -ms-transform:perspective(400px) translateZ(150px) rotateY(-170deg);
        transform:perspective(400px) translateZ(150px) rotateY(-170deg)
    }
    80%{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) scale3d(.95,.95,.95);
        -ms-transform:perspective(400px) scale3d(.95,.95,.95);
        transform:perspective(400px) scale3d(.95,.95,.95)
    }
    to{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px);
        -ms-transform:perspective(400px);
        transform:perspective(400px)
    }
}
.animated.flip{
    -webkit-animation-name:flip;
    animation-name:flip;
    -webkit-backface-visibility:visible;
    -ms-backface-visibility:visible;
    backface-visibility:visible
}
@-webkit-keyframes pulse{
    0%{
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
    50%{
        -webkit-transform:scale3d(1.05,1.05,1.05);
        transform:scale3d(1.05,1.05,1.05)
    }
    to{
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes pulse{
    0%{
        -webkit-transform:scaleX(1);
        -ms-transform:scaleX(1);
        transform:scaleX(1)
    }
    50%{
        -webkit-transform:scale3d(1.05,1.05,1.05);
        -ms-transform:scale3d(1.05,1.05,1.05);
        transform:scale3d(1.05,1.05,1.05)
    }
    to{
        -webkit-transform:scaleX(1);
        -ms-transform:scaleX(1);
        transform:scaleX(1)
    }
}
.pulse{
    -webkit-animation-name:pulse;
    animation-name:pulse
}
@-webkit-keyframes shake{
    0%,to{
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
    10%,30%,50%,70%,90%{
        -webkit-transform:translate3d(-10px,0,0);
        transform:translate3d(-10px,0,0)
    }
    20%,40%,60%,80%{
        -webkit-transform:translate3d(10px,0,0);
        transform:translate3d(10px,0,0)
    }
}
@keyframes shake{
    0%,to{
        -webkit-transform:translateZ(0);
        -ms-transform:translateZ(0);
        transform:translateZ(0)
    }
    10%,30%,50%,70%,90%{
        -webkit-transform:translate3d(-10px,0,0);
        -ms-transform:translate3d(-10px,0,0);
        transform:translate3d(-10px,0,0)
    }
    20%,40%,60%,80%{
        -webkit-transform:translate3d(10px,0,0);
        -ms-transform:translate3d(10px,0,0);
        transform:translate3d(10px,0,0);
        -moz-transform:translate3d(10px,0,0);
        -o-transform:translate3d(10px,0,0)
    }
}
.shake{
    -webkit-animation-name:shake;
    animation-name:shake
}
@-webkit-keyframes slideInLeft{
    0%{
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0);
        visibility:visible
    }
    to{
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
@keyframes slideInLeft{
    0%{
        -webkit-transform:translate3d(-100%,0,0);
        -ms-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0);
        visibility:visible
    }
    to{
        -webkit-transform:translateZ(0);
        -ms-transform:translateZ(0);
        transform:translateZ(0)
    }
}
.slideInLeft{
    -webkit-animation-name:slideInLeft;
    animation-name:slideInLeft
}
@-webkit-keyframes fadeIn{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes fadeIn{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
.fadeIn{
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn
}
@-webkit-keyframes fadeInRight{
    0%{
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@keyframes fadeInRight{
    0%{
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none;
        -moz-transform:none;
        -o-transform:none
    }
}
.fadeInRight{
    -webkit-animation-name:fadeInRight;
    animation-name:fadeInRight
}
@-webkit-keyframes fadeInDown{
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,-100%,0);
        transform:translate3d(0,-100%,0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@keyframes fadeInDown{
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,-100%,0);
        -ms-transform:translate3d(0,-100%,0);
        transform:translate3d(0,-100%,0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }
}
.fadeInDown{
    -webkit-animation-name:fadeInDown;
    animation-name:fadeInDown
}
@-webkit-keyframes rotate{
    0%{
        -webkit-transform:rotate(-200deg);
        transform:rotate(-200deg);
        -webkit-transform-origin:center;
        transform-origin:center
    }
    to{
        -webkit-transform:none;
        transform:none;
        -webkit-transform-origin:center;
        transform-origin:center
    }
}
@keyframes rotate{
    0%{
        -webkit-transform:rotate(-200deg);
        -ms-transform:rotate(-200deg);
        transform:rotate(-200deg);
        -webkit-transform-origin:center;
        -ms-transform-origin:center;
        transform-origin:center
    }
    to{
        -webkit-transform:none;
        -ms-transform:none;
        transform:none;
        -webkit-transform-origin:center;
        -ms-transform-origin:center;
        transform-origin:center
    }
}
.rotate{
    -webkit-animation-name:rotate;
    animation-name:rotate
}
@-webkit-keyframes tada{
    0%{
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
    10%,20%{
        -webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);
        transform:scale3d(.9,.9,.9) rotate(-3deg)
    }
    30%,50%,70%,90%{
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);
        transform:scale3d(1.1,1.1,1.1) rotate(3deg)
    }
    40%,60%,80%{
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
        transform:scale3d(1.1,1.1,1.1) rotate(-3deg)
    }
    to{
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes tada{
    0%{
        -webkit-transform:scaleX(1);
        -ms-transform:scaleX(1);
        transform:scaleX(1)
    }
    10%,20%{
        -webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);
        -ms-transform:scale3d(.9,.9,.9) rotate(-3deg);
        transform:scale3d(.9,.9,.9) rotate(-3deg)
    }
    30%,50%,70%,90%{
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);
        -ms-transform:scale3d(1.1,1.1,1.1) rotate(3deg);
        transform:scale3d(1.1,1.1,1.1) rotate(3deg)
    }
    40%,60%,80%{
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
        -ms-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
        transform:scale3d(1.1,1.1,1.1) rotate(-3deg)
    }
    to{
        -webkit-transform:scaleX(1);
        -ms-transform:scaleX(1);
        transform:scaleX(1)
    }
}
.tada{
    -webkit-animation-name:tada;
    animation-name:tada
}
.fixed{
    position:fixed!important
}
.product{
    padding-top:1px
}
.product,.product-occupy{
    position:relative
}
.product-nav{
    background-color:#222;
    display:none;
    height:65px;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:11
}
.product-nav-cnt{
    color:#fff;
    line-height:35px;
    margin:0 auto;
    padding-bottom:15px;
    padding-top:15px;
    width:900px
}
.pro-name{
    font-size:24px
}
.product-nav-cnt ul{
    display:flex;
    float:right
}
.product-nav-cnt li{
    font-weight:400;
    margin-right:50px
}
.product-nav-cnt li.active{
    color:#0f0
}
.buy{
    background-color:#0f0;
    border-radius:17.5px;
    float:right;
    height:35px;
    padding:0 22px
}
.buy,.buy:active,.buy:focus,.buy:hover,.buy:link,.buy:visited{
    color:#000
}
.cover{
    height:100vh;
    left:0;
    overflow:hidden;
    padding-top:18vh;
    position:absolute;
    text-align:center;
    top:0;
    width:100%
}
.cover h1{
    font-size:2.86vw;
    line-height:2.86vw
}
.cover h1,.slogan{
    position:relative;
    z-index:2
}
.slogan{
    color:#999;
    display:block;
    font-size:1.24vw;
    font-weight:400;
    margin-top:2vh
}
.btns{
    margin-top:3vh;
    position:relative;
    z-index:2
}
.btns a{
    border:.05vw solid #0f0;
    border-radius:.91vw;
    color:#0f0;
    display:inline-block;
    font-size:1.04vw;
    font-weight:400;
    height:1.88vw;
    line-height:1.78vw;
    min-width:7.81vw
}
.exhibit-btn{
    margin-right:1vw
}
.info-img{
    margin-top:-3vh;
    width:76%
}
.cover-img{
    left:27.5%;
    position:absolute;
    top:54vh;
    width:45%
}
.view-color{
    backdrop-filter:blur(5px);
    background-color:rgba(0,0,0,.85);
    display:none;
    height:100vh;
    left:0;
    padding-top:70px;
    position:absolute;
    top:0;
    width:100%;
    z-index:20
}
.view-cls{
    height:2.24vw;
    position:absolute;
    right:33%;
    top:8vw;
    width:2.24vw
}
.product-main .img-box,.product-main .rotate-box{
    height:65vh;
    margin:0 auto;
    text-align:center;
    touch-action:none;
    width:25%
}
.product-img .img-box,.product-img .rotate-box{
    height:65vh;
    margin:0 auto;
    text-align:center;
    touch-action:none;
    width:50%
}
.img-360{
    background-position:50%;
    background-repeat:no-repeat;
    background-size:100%;
    height:88%;
    width:100%
}
.range{
    -webkit-appearance:none;
    background:transparent;
    border:0;
    display:block;
    margin:0 auto;
    width:100%
}
.range:focus{
    outline:none
}
.range::-webkit-slider-runnable-track{
    background:hsla(0,0%,100%,.15);
    border:0;
    border-radius:0;
    box-shadow:none;
    cursor:pointer;
    height:2px;
    width:100%
}
.range:focus::-webkit-slider-runnable-track{
    background:hsla(0,0%,100%,.15)
}
.range::-webkit-slider-thumb{
    -webkit-appearance:none;
    background:#fff;
    border:0;
    border-radius:.21vw;
    box-shadow:none;
    cursor:pointer;
    height:.47vw;
    margin-top:-.235vw;
    width:10%
}
.range:focus::-webkit-slider-thumb{
    outline:0;
    outline-offset:2px
}
.range::-moz-range-track{
    background:hsla(0,0%,100%,.15);
    border:0;
    border-radius:0;
    box-shadow:none;
    cursor:pointer;
    height:2px;
    width:100%
}
.range::-moz-range-thumb{
    -webkit-appearance:none;
    background:#fff;
    border:0;
    border-radius:.21vw;
    box-shadow:none;
    cursor:pointer;
    height:.47vw;
    margin-top:-.235vw;
    width:10%
}
.range:focus::-moz-range-thumb{
    outline:0;
    outline-offset:2px
}
.img360-info{
    color:#999;
    font-size:.83vw
}
.color-list{
    font-size:0
}
.color-list a{
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:50%;
    display:inline-block;
    height:1.6vw;
    margin-right:1vw;
    position:relative;
    width:1.6vw
}
.color-list a:last-child{
    margin-right:0
}
.color-list a:before{
    border:2px solid transparent;
    border-radius:50%
}
.color-list a:after,.color-list a:before{
    bottom:-1px;
    content:"";
    left:-1px;
    position:absolute;
    right:-1px;
    top:-1px;
    transition:all .3s
}
.color-list a:after{
    border:1px solid transparent;
    border-radius:50%;
    z-index:2
}
.black{
    border:1px solid #333
}
.color-list a.active:before{
    border-color:#fff
}
.color-list a.active:after{
    border-color:#0f0
}
.color-info{
    font-size:.94vw;
    font-weight:400;
    margin-top:3vh
}
.basic{
    margin-top:100vh;
    position:relative;
    z-index:4
}
.basic-info{
    height:63vh;
    position:relative;
    width:100%
}
.basic-box{
    left:0;
    position:absolute;
    top:0;
    width:100%
}
.basic-box,.msrp{
    text-align:center
}
.msrp{
    font-size:1.25vw
}
.msrp span{
    color:#0f0
}
.basic-info p{
    font-size:.94vw;
    font-weight:400;
    line-height:1.46vw;
    margin:3vh auto 0;
    width:32%
}
.introduce{
    height:85vh;
    position:relative;
    width:100%
}
.introduce ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    left:50%;
    top:0;
    transform:translate3d(-50%,0,0);
    width:28%
}
.introduce ul li{
    font-size:.94vw;
    font-weight:400;
    letter-spacing:-.02vw;
    margin-bottom:8vh;
    text-align:center;
    width:40%
}
.introduce ul img{
    margin-bottom:2vh;
    width:85%
}
.video{
    font-size:.94vw;
    font-weight:400;
    height:49vw;
    position:relative;
    text-align:center;
    width:100%
}
.video video{
    height:100%;
    left:0;
    min-width:100%;
    object-fit:cover;
    overflow:hidden;
    position:absolute;
    top:0;
    width:auto
}
.video-box{
    left:50%;
    position:absolute;
    top:50%;
    transform:translate3d(-50%,-50%,0);
    width:37%
}
.video-box p{
    font-size:.94vw;
    line-height:1.46vw
}
.video-play{
    border:.05vw solid #0f0;
    border-radius:1vw;
    color:#0f0;
    display:inline-block;
    height:1.88vw;
    line-height:1.78vw;
    margin-top:1.5vw;
    position:relative;
    width:11.46vw
}
.video-play:after{
    border:.5vw solid transparent;
    border-left:.7vw solid #0f0;
    content:"";
    position:absolute;
    right:0;
    top:.39vw;
    transition:all .3s;
    z-index:2
}
.video-play:hover:after{
    border-left-color:#000
}
.highlights{
    bottom:0;
    left:0;
    z-index:2
}
.banner{
    height:50.52vw;
    position:relative
}
.banner,.sticky{
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    overflow:hidden;
    width:100%
}
.sticky{
    height:100vh;
    left:0;
    padding-top:65px;
    position:sticky;
    top:0
}
.banner-bg{
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    width:100%
}
.banner-bg,.banner-cnt{
    position:absolute
}
.banner h3{
    font-size:2.08vw;
    line-height:2.08vw
}
.banner p{
    color:#aaa;
    font-size:1.04vw;
    line-height:1.52vw;
    margin-top:1.2vw
}
.product .intro-list{
    background-color:#222;
    padding:13vw 7.5%;
    text-align:center
}
.intro-list ul{
    display:flex;
    justify-content:space-between
}
.intro-list ul img{
    width:100%
}
.intro-list ul li{
    will-change:transform,opacity
}
.intro-list li span{
    display:block;
    font-size:1.56vw;
    line-height:2vw;
    margin-top:1.5vw
}
.intro-list p{
    color:#a9a9a9;
    font-size:.94vw;
    line-height:1.56vw;
    margin-top:.5vw
}
.pro-styles{
    height:300vh;
    position:relative;
    width:100%
}
.pro-styles li img{
    width:100%
}
.banner-fllow{
    cursor:pointer;
    height:100vh
}
.fllow-fixed{
    height:100vh;
    left:0;
    top:0;
    width:100%;
    z-index:2
}
.banner-fllow .banner-cnt{
    bottom:15vh;
    font-size:1.56vw;
    line-height:2.08vw;
    text-align:center;
    width:100%
}
.ins-tag{
    color:#0f0
}
.ins-icon{
    margin-right:2%;
    width:2.08vw
}
.pro-styles h3{
    font-size:2.08vw;
    margin-top:5vh;
    text-align:center
}
.pro-styles ul{
    height:auto;
    margin:22vh auto 0
}
.pro-styles li{
    will-change:transform,opacity
}
.pro-styles li:last-child,.pro-styles li:last-child span{
    opacity:1!important
}
.pro-styles span{
    color:#aaa;
    display:block;
    font-size:.94vw;
    font-weight:400;
    margin-top:5vh
}
.spec{
    position:relative;
    z-index:3
}
.configure{
    background-color:#111;
    padding:11vw 0
}
.configure h2{
    font-size:2.34vw;
    text-align:center
}
.configure ul{
    display:flex;
    flex-wrap:wrap;
    margin:5vw auto 0;
    width:62%
}
.configure li{
    border-right:1px solid hsla(0,0%,100%,.1);
    padding:1vw 1.5vw 2.5vw;
    width:25%
}
.configure li:nth-child(4n){
    border-right:0
}
.lastline{
    border-top:1px solid hsla(0,0%,100%,.1)
}
.configure label{
    color:#aaa;
    display:block;
    font-size:.94vw;
    font-weight:400
}
.configure span{
    display:block;
    font-size:1.04vw;
    line-height:1.4vw;
    margin-top:.5vw
}
.pro-fade{
    background-color:#000;
    height:300vh;
    position:relative
}
.exploded-view{
    opacity:0
}
.exploded-box{
    margin:0 auto;
    position:relative
}
.exploded-text{
    display:flex;
    font-size:1.04vw;
    font-weight:400;
    line-height:1.04vw;
    opacity:0;
    position:absolute;
    transition:opacity .6s ease-out;
    white-space:nowrap
}
.exploded-text.left:before,.exploded-text.right:after{
    border:.04vw solid #aaa;
    content:"";
    height:.04vw;
    margin-left:.5vw;
    margin-top:.5vw;
    width:4.5vw
}
.exploded-text.left:before{
    margin-left:0;
    margin-right:.5vw
}
.pro-mark ul{
    display:block;
    height:200vh;
    position:relative;
    text-align:center
}
.pro-mark li{
    height:100%;
    left:0;
    padding-top:12vh;
    position:absolute;
    top:0
}
.pro-mark h3{
    color:#fdfdfd;
    font-size:2.08vw;
    margin-bottom:6vw
}
.swiper-box{
    margin:0 auto;
    padding:0 2.5vw;
    position:relative;
    width:79%
}
.swiper-box .swiper-container{
    border-radius:1.04vw
}
.swiper-box .swiper-button-next,.swiper-box .swiper-button-prev{
    background-size:cover;
    height:2.66vw;
    margin-top:-.7vw;
    width:1.41vw
}
.swiper-box .swiper-button-prev{
    background-image:url(https://www.vaporesso.com/hubfs/imgs/2022/index/pc/r.png);
    left:0
}
.swiper-box .swiper-button-next{
    background-image:url(https://www.vaporesso.com/hubfs/imgs/2022/index/pc/l.png);
    right:0
}
.replacement{
    background-color:#000;
    height:auto;
    margin:0 auto;
    top:0
}
.replacement-fixed{
    left:0;
    padding-top:2vw;
    top:0;
    width:100%;
    z-index:2
}
.replacement h3{
    color:#fff;
    font-size:2.08vw;
    margin-bottom:5vw;
    text-align:center
}
.replacement li{
    background-color:#fff;
    border-radius:1.04vw;
    margin:0 auto;
    width:46%
}
.replacement img{
    background-color:#f0f0f0;
    border-radius:1.04vw 0 0 1.04vw;
    float:left;
    margin-right:1.5vw;
    width:14.58vw
}
.replacement span{
    color:#1f1f33;
    display:block;
    font-size:1.56vw;
    margin-top:2.5vw
}
.view-more{
    background-color:#000;
    border:0;
    border-radius:1.56vw;
    color:#0f0;
    float:left;
    font-size:1.04vw;
    height:3.18vw;
    line-height:3.18vw;
    margin-top:5vw;
    position:relative;
    text-align:center;
    width:9.43vw;
    z-index:2
}
.view-more:visited{
    color:#0f0
}
.view-more:hover{
    color:#000
}
.view-more:before{
    border-radius:1.56vw
}
.inthebox{
    background-color:#000;
    padding:11vw 0 12vw;
    position:relative;
    z-index:3
}
.inthebox h2{
    font-size:2.34vw;
    margin-bottom:5vw;
    text-align:center
}
.inthebox li{
    background-color:#f0f0f0;
    border-radius:1.04vw;
    min-height:20.89vw;
    padding:0;
    position:relative;
    vertical-align:middle
}
.inthebox li img{
    left:5%;
    position:absolute;
    top:50%;
    transform:translate3d(0,-50%,0);
    width:55%
}
.inthebox-info{
    background-color:#fff;
    border-left:none;
    float:right;
    height:22.69vw;
    padding:1.6vw 2vw;
    width:35%
}
.inthebox-info h3{
    color:#000;
    font-size:1.56vw
}
.inthebox-info p{
    color:#666;
    font-size:.94vw;
    font-weight:400;
    line-height:1.56vw;
    margin-top:1.2vw
}
@media screen and (min-width:1024px){
    .color-choose{
        display:flex;
        justify-content:space-between;
        margin:8vw auto;
        width:59vw
    }
    .color-left{
        text-align:left;
        width:21vw
    }
    .color-left-top{
        background-color:#222;
        border-radius:1.56vw;
        height:20.57vw;
        padding-left:2vw;
        padding-top:3vw;
        width:100%
    }
    .c-label{
        color:#ccc;
        display:block;
        font-size:1.25vw;
        font-weight:400
    }
    .c-value{
        display:block;
        font-size:2vw;
        font-weight:600;
        line-height:2.71vw;
        margin-top:.5vw;
        width:100%
    }
    .p-name{
        color:#ccc;
        display:block;
        font-size:.94vw;
        font-weight:400;
        margin-bottom:.8vw;
        margin-top:1.3vw
    }
    .color-left .color-list,.pro-marp{
        width:100%
    }
    .pro-marp{
        background-color:#222;
        border-radius:1.56vw;
        height:11.15vw;
        margin-top:1.88vw;
        padding-left:2vw;
        padding-top:2vw
    }
    .pro-marp label{
        color:#ccc;
        font-size:1.25vw;
        font-weight:400
    }
    .pro-marp span{
        display:block;
        font-size:2.5vw;
        font-weight:600;
        margin-top:.5vw
    }
    .color-right{
        background-color:#222;
        border-radius:1.56vw;
        height:33.65vw;
        width:34vw
    }
    .color-right img{
        object-fit:cover;
        width:100%
    }
    @keyframes bigIn{
        0%{
            opacity:0;
            transform:scale3d(4,4,4)
        }
        to{
            opacity:1;
            transform:scaleX(1)
        }
    }
    .bigIn{
        -webkit-animation-name:bigIn;
        animation-name:bigIn
    }
    .intro-list .row-x-3{
        width:22%
    }
    .intro-list .row-x-4{
        width:31%
    }
    .intro-list .row-x-6{
        width:47%
    }
    .specifications{
        background-color:#111;
        height:100vh;
        position:relative
    }
    .specifications h2{
        font-size:2.34vw;
        margin-top:14vh;
        text-align:center
    }
    .spec-box{
        list-style:none;
        margin:10vh auto 0;
        overflow:hidden;
        padding-left:13.5%;
        position:relative
    }
    .spec-cnt{
        display:flex;
        height:100%;
        position:relative;
        width:100%
    }
    .spec-cnt,.spec-img{
        transition-property:transform,-webkit-transform
    }
    .spec-img{
        background-color:#222;
        border-radius:1.04vw;
        flex-shrink:0;
        padding:1vh 0;
        text-align:center;
        width:26%
    }
    .spec-img img{
        height:40vh
    }
    .spec-info{
        transition-property:transform,-webkit-transform
    }
    .spec-info ul{
        display:flex
    }
    .spec-info li{
        flex-shrink:0;
        margin-left:1.82vw;
        width:23vw
    }
    .spec-info li>div{
        background-color:#222;
        border-radius:1.04vw;
        height:19vh;
        margin-bottom:4vh;
        padding:1vw 1.5vw 2.5vw;
        width:100%
    }
    .spec-info li>div:last-child{
        margin-bottom:0
    }
    .spec-info li label{
        color:#999;
        display:block;
        font-size:.94vw;
        font-weight:400
    }
    .spec-info li span{
        display:block;
        font-size:1.25vw;
        font-weight:600;
        margin-top:.5vw
    }
}
@media screen and (max-width:1023px){
    .color-choose{
        display:flex;
        justify-content:space-between;
        padding:.85rem .3rem;
        width:100%
    }
    .color-left{
        text-align:left;
        width:55%
    }
    .color-left-top{
        background-color:#222;
        border-radius:.3rem;
        height:3.95rem;
        padding-left:.3rem;
        padding-top:.3rem;
        width:100%
    }
    .c-label{
        color:#ccc;
        display:block;
        font-size:.24rem;
        font-weight:400
    }
    .c-value{
        display:block;
        font-size:.4rem;
        font-weight:600;
        line-height:.5rem;
        margin-top:.1rem
    }
    .p-name{
        color:#ccc;
        display:block;
        font-size:.24rem;
        font-weight:400;
        margin-bottom:.15rem;
        margin-top:.25rem
    }
    .color-left .color-list{
        width:100%
    }
    .color-left .color-list a{
        height:.3rem;
        margin-right:.16rem;
        width:.3rem
    }
    .pro-marp{
        background-color:#222;
        border-radius:.3rem;
        height:2.14rem;
        margin-top:.36rem;
        padding-left:.3rem;
        padding-top:.3rem;
        width:100%
    }
    .pro-marp label{
        color:#ccc;
        font-size:.24rem;
        font-weight:400
    }
    .pro-marp span{
        display:block;
        font-size:.48rem;
        font-weight:600;
        margin-top:.2rem
    }
    .color-right{
        height:6.45rem;
        overflow:hidden;
        width:35%
    }
    .color-right img{
        margin-left:-94%;
        max-width:none;
        object-fit:cover;
        width:280%
    }
    .product{
        padding:.88rem 0
    }
    .mask{
        cursor:pointer;
        z-index:5
    }
    .product-nav{
        height:1.2rem
    }
    .product-nav-cnt{
        padding:.35rem .3rem
    }
    .pro-name{
        cursor:pointer;
        display:inline-block;
        font-size:.36rem;
        width:80%
    }
    .pro-name:after{
        background:url(https://www.vaporesso.com/hubfs/imgs/2022/com/arrow.png) no-repeat 0 0/.8rem .22rem;
        content:"";
        float:right;
        height:.22rem;
        margin-top:.14rem;
        width:.4rem
    }
    .pro-name.active:after{
        background-position:-.4rem 0
    }
    .product-nav-cnt{
        line-height:.5rem;
        width:100%
    }
    .product-nav-cnt ul{
        background-color:#222;
        border-radius:0 0 .3rem .3rem;
        border-top:.03rem solid #333;
        display:block;
        display:none;
        left:0;
        padding:0 .3rem;
        position:absolute;
        top:1.2rem;
        width:100%
    }
    .product-nav-cnt li{
        border-bottom:.03rem solid #333;
        color:#aaa;
        font-size:.24rem;
        height:1rem;
        line-height:.985rem;
        margin:0;
        padding:0 .02rem
    }
    .product-nav-cnt li:last-child{
        border-bottom:0
    }
    .buy{
        border-radius:.25rem;
        font-size:.24rem;
        height:.5rem;
        line-height:.5rem;
        padding:0 .34rem
    }
    .cover{
        height:11rem;
        padding:0;
        position:static
    }
    .cover h1{
        font-size:.45rem;
        line-height:.45rem
    }
    .slogan{
        font-size:.24rem;
        margin-top:.28rem
    }
    .btns{
        margin-top:.35rem
    }
    .btns a{
        border-radius:.25rem;
        border-width:.01rem;
        font-size:.24rem;
        height:.5rem;
        line-height:.48rem;
        min-width:2rem
    }
    .exhibit-btn{
        margin-right:.49rem
    }
    .info-img{
        margin-top:-.6rem;
        width:100%
    }
    .rotate{
        left:0;
        top:5.6rem;
        transform:rotate(90deg);
        width:100%
    }
    .view-color{
        padding-top:1.5rem;
        position:fixed;
        top:0;
        z-index:20
    }
    .product-img .img-box,.product-img .rotate-box,.product-main .img-box,.product-main .rotate-box{
        height:65vh;
        width:76%
    }
    .img360-info{
        font-size:.23rem
    }
    .color-list{
        margin-top:.1rem
    }
    .color-list a{
        height:.43rem;
        margin-bottom:.3rem;
        margin-right:.2rem;
        width:.43rem
    }
    .color-info{
        font-size:.24rem;
        margin-top:.4rem
    }
    .view-cls{
        height:.62rem;
        left:50%;
        right:0;
        top:90vh;
        transform:translateX(-50%);
        width:.62rem
    }
    .basic{
        background-color:#111;
        margin:0
    }
    .basic-info{
        height:auto;
        padding:1.15rem 0
    }
    .msrp{
        font-size:.27rem
    }
    .basic-info p{
        font-size:.24rem;
        line-height:.32rem;
        margin-top:.32rem;
        width:92%
    }
    .introduce{
        height:auto
    }
    .basic-box{
        position:relative
    }
    .introduce ul{
        left:0;
        margin:0 auto;
        transform:translateZ(0);
        width:75%
    }
    .introduce ul li{
        font-size:.24rem;
        letter-spacing:-.005rem;
        margin-bottom:1.15rem
    }
    .introduce ul img{
        margin-bottom:.3rem;
        width:100%
    }
    .video{
        height:8.5rem
    }
    .video-box{
        width:90%
    }
    .video-box p{
        font-size:.24rem;
        line-height:.34rem
    }
    .video-play{
        border-radius:.25rem;
        font-size:.24rem;
        height:auto;
        line-height:.24rem;
        margin-top:.45rem;
        padding:.13rem 0;
        width:3rem
    }
    .video-play:after{
        border-width:.12rem .12rem .12rem .18rem;
        top:.12rem
    }
    .banner,.pro-styles{
        height:8.5rem
    }
    .pro-styles{
        background-position:50%;
        background-repeat:no-repeat;
        background-size:cover
    }
    .sticky{
        height:100%;
        padding:0
    }
    .banner-cnt{
        height:100%;
        left:0;
        padding:.9rem .3rem;
        text-align:center;
        top:0;
        width:100%
    }
    .banner h3,.pro-styles h3{
        font-size:.4rem;
        line-height:.48rem
    }
    .banner p{
        font-size:.24rem;
        line-height:.32rem;
        margin-top:.18rem
    }
    .intro-list li{
        font-weight:400
    }
    .intro-list li span{
        font-size:.35rem;
        line-height:.35rem;
        margin-top:.62rem
    }
    .intro-list li p{
        font-size:.24rem;
        line-height:.32rem;
        margin-top:.28rem;
        padding:0 .2rem
    }
    .product .mob-swiper .swiper-pagination-bullets{
        bottom:.5rem
    }
    .mob-swiper .swiper-pagination-bullet{
        background-color:#ccc;
        height:.18rem;
        margin-right:.13rem;
        width:.18rem
    }
    .mob-swiper .swiper-pagination-bullet-active{
        background-color:#0f0
    }
    .product .style-list{
        margin-top:1.6rem;
        padding:0 .8rem
    }
    .banner-fllow{
        height:5rem
    }
    .fllow-fixed{
        height:100%
    }
    .banner-fllow .banner-cnt{
        bottom:auto;
        height:auto;
        left:50%;
        padding:0;
        text-align:center;
        top:50%;
        transform:translate3d(-50%,-50%,0);
        width:50%
    }
    .ins-icon{
        width:.63rem
    }
    .banner-fllow span{
        display:block;
        font-size:.3rem;
        line-height:.38rem;
        margin-top:.3rem
    }
    .ins-tag{
        color:#fff;
        display:block
    }
    .configure{
        background-color:transparent;
        height:auto;
        padding:1.3rem .3rem 1rem
    }
    .configure h2{
        font-size:.45rem
    }
    .configure ul{
        margin-top:.85rem;
        width:100%
    }
    .configure li{
        border-bottom:1px solid hsla(0,0%,100%,.2);
        border-right:0;
        padding:.2rem;
        width:50%
    }
    .configure li:nth-child(odd){
        border-right:1px solid hsla(0,0%,100%,.2)
    }
    .configure li:last-child,.configure li:nth-last-child(2){
        border-bottom:0
    }
    .configure label{
        font-size:.24rem;
        line-height:.24rem
    }
    .configure span{
        font-size:.3rem;
        line-height:.36rem;
        margin-top:.15rem;
        min-height:1.08rem
    }
    .specifications{
        padding:.65rem .5rem
    }
    .specifications h2{
        font-size:.45rem;
        text-align:center
    }
    .spec-info{
        margin-top:.4rem
    }
    .spec-info li{
        display:flex;
        justify-content:space-between;
        margin-bottom:.2rem;
        min-height:2rem;
        width:100%
    }
    .spec-info li>div{
        background-color:#111;
        border-radius:.2rem;
        padding:.3rem .2rem;
        width:48.5%
    }
    .spec-info li label{
        color:#aaa;
        display:block;
        font-size:.24rem
    }
    .spec-info li span{
        display:block;
        font-size:.3rem;
        margin-top:.1rem
    }
    .pro-fade{
        height:auto
    }
    .pro-fade .pro-mark{
        padding:0 .5rem 1.04rem
    }
    .pro-mark ul{
        display:flex;
        height:auto
    }
    .pro-mark li{
        background-color:#111;
        border-radius:.2rem;
        padding:.5rem .1rem;
        position:static
    }
    .exploded-view{
        opacity:1
    }
    .pro-mark img{
        width:100%
    }
    .pro-mark h3{
        font-size:.4rem;
        margin-bottom:.9rem
    }
    .product .replacement{
        background-color:transparent;
        height:auto;
        padding-top:.5rem
    }
    .replacement-fixed{
        height:100%;
        padding:0
    }
    .swiper-box{
        padding:0;
        width:100%
    }
    .replacement .swiper-container{
        padding:0 .5rem
    }
    .replacement h3{
        margin-bottom:.6rem
    }
    .replacement li{
        border-radius:.2rem;
        width:100%
    }
    .replacement img{
        border-radius:.2rem 0 0 .2rem;
        margin-right:.32rem;
        width:2.69rem
    }
    .replacement span{
        font-size:.3rem;
        margin-top:.5rem
    }
    .view-more{
        border-radius:.28rem;
        font-size:.24rem;
        height:.6rem;
        line-height:.6rem;
        margin-top:.95rem;
        width:1.76rem
    }
    .inthebox{
        height:auto;
        padding:1.3rem 0
    }
    .inthebox h2{
        font-size:.45rem;
        margin-bottom:.55rem
    }
    .inthebox .swiper-container{
        padding:0 .5rem
    }
    .inthebox li{
        background-color:#f0f0f0;
        border-radius:.2rem;
        min-height:auto;
        padding:0 0 .75rem
    }
    .inthebox-info{
        background:#fff;
        border:0;
        border-top-left-radius:.2rem;
        border-top-right-radius:.2rem;
        float:none;
        height:auto;
        padding:.35rem;
        width:100%
    }
    .inthebox-info h3{
        font-size:.3rem
    }
    .inthebox-info p{
        font-size:.24rem;
        line-height:.33rem;
        margin-top:.3rem
    }
    .inthebox li img{
        margin-left:5%;
        margin-top:1.2rem;
        position:static;
        transform:none;
        width:90%
    }
}