#vivo-high-wrap{width: 100%; position: relative; z-index: 3;}
#vivo-high{width: 100%; height: 500px; overflow: hidden; position: fixed; left: 0; top: 0; background-color: #f2f2f2;z-index: 3;}
.pf-mb #vivo-high{position: relative;}
.vivo-high-box{width: 100%; height: 100%; position: relative; overflow: hidden;}
.vivo-high-box ul{display: block; height: 100%; position: relative; overflow: hidden; z-index: 1; -webkit-transition-timing-function: ease; transition-timing-function: ease;}
.vivo-high-box ul li{display: block; width: 100%; height: 100%; position: relative; float: left; overflow: hidden; background-color: #000; background-position: center center; background-repeat: no-repeat; background-size: cover; top: 0; left: 0;}
.vivo-high-box ul li .vivo-h-stage{width: 50%; height: 50%; position: absolute; top: 0; left: 0; z-index: 2;}
.vivo-high-box ul li .figure{position: absolute; }
.vivo-high-box ul li .figure img{width: auto; height: 100%;}
.vivo-high-box ul li .title{position: absolute; z-index: 9;}
.vivo-high-box ul li .title h2{display: block; position: relative; width: 100%; text-align: center;}
.vivo-high-box ul li .title img{width: auto; height: 100%;}
.vivo-high-box ul li .title .more{ position: relative; text-align: center; margin: auto; display: block; margin-top: 75px;}
.vivo-high-box ul li .title .more span{ display: inline-block; font-size: 15px; line-height: 36px; width: 120px; height: 36px; border-radius: 36px; border: 1px #008cd6 solid; color: #008fd5; box-sizing2: border-box;}
.big .vivo-high-box ul li .title .more{ margin-top: 100px;}
.big .vivo-high-box ul li .title .more span{ font-size: 16px; line-height: 40px; width: 130px; height: 40px; border-radius: 50px; }
.small .vivo-high-box ul li .title .more{ margin-top: 60px;}
.small .vivo-high-box ul li .title .more span{ font-size: 14px; line-height: 32px; width: 100px; height: 32px; border-radius: 32px; }
.mini .vivo-high-box ul li .title .more{ margin-top: 50px;}
.mini .vivo-high-box ul li .title .more span{ font-size: 13px; line-height: 30px; width: 90px; height: 30px; border-radius: 30px; }
.vivo-high-box ul li .title .more span:after{width: 7px; height: 13px; display: inline-block; content: '';  background: url(/images/vivo-high-ico.png); background-size: 100px 100px; vertical-align: -1px; margin-left: 8px; -webkit-transition: all .3s cubic-bezier(.73, .03, .31, 1);  -moz-transition: all .3s cubic-bezier(.73, .03, .31, 1);  transition: all .3s cubic-bezier(.73, .03, .31, 1);}
.small .vivo-high-box ul li .title .more span:after{width: 4px; height: 8px; vertical-align: 1px; margin-left: 6px;}
.mini .vivo-high-box ul li .title .more span:after{width: 4px; height: 8px; vertical-align: 1px; margin-left: 6px;}
.vivo-high-box ul li .title .more span:hover:after{ -webkit-animation:gogogo 1.2s infinite ease; -moz-animation:gogogo 1.2s infinite ease; animation:gogogo 1.2s infinite ease;}
.vivo-high-box ul li a{display: block; position: relative; width: 100%; height: 100%;}
.vivo-high-box .vivo-h-dot{position: absolute; width: 100%; left: 0; bottom: 20px; text-align: center; z-index: 2;}
@-webkit-keyframes gogogo {
    0%{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 0;}
    10%{opacity: 1;}
    60%{opacity: 1;}
    70%{-webkit-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
    100%{-webkit-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
}
@-moz-keyframes gogogo {
    0%{-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 0;}
    10%{opacity: 1;}
    60%{opacity: 1;}
    70%{-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
    100%{-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
}
@keyframes gogogo {
    0%{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 0;}
    10%{opacity: 1;}
    60%{opacity: 1;}
    70%{-webkit-transform: translate3d(12px,0,0);-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
    100%{-webkit-transform: translate3d(12px,0,0);-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
}
.vivo-h-dot a{width: 12px; height: 12px; overflow: hidden; display: inline-block; margin: 0 6px; background-color: #d9d9d9; border-radius: 50%; -webkit-transform: scale(.82); -moz-transform: scale(.82); -ms-transform: scale(.82); transform: scale(.82); -webkit-transition: all .3s cubic-bezier(.73, .03, .31, 1); -moz-transition: all .3s cubic-bezier(.73, .03, .31, 1); transition: all .3s cubic-bezier(.73, .03, .31, 1);}
.vivo-h-dot a:hover,.vivo-h-dot a.current{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); background-color: #008cd6;}
@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
 .vivo-high-box ul li .title .more span:after{background-image: url(/images/vivo-high-ico-x2.png);}
}
/*-----*/

/*x7black*/
.vivo-high-box .vivo-x7black{background: #b08e7c url(../img/bg1.jpg) center center no-repeat; background-size: cover; }
.vivo-high-box .vivo-x7black img{width: auto; height: 100%; }
.vivo-high-box .vivo-x7black .title{width: 304px; height: auto; bottom: -110px; right: -500px; text-align: center;}
.vivo-high-box .vivo-x7black .title h2{ height: 160px;}
.vivo-high-box  ul li.vivo-x7black .title .more span:after{background-position: -5px -13px;}
.vivo-high-box .vivo-x7black .title .more span{ border: 1px #fff solid; color: #fff; }
.vivo-high-box .vivo-x7black .figure{ position: absolute; bottom: -380px; right: -780px; width: 1015px; height: 722px; }
.vivo-high-box .vivo-x7black .figure em{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*big*/
.big .vivo-high-box .vivo-x7black{background: #b08e7c url(../img/bg1.jpg) center center no-repeat; background-size: cover;}
.big .vivo-high-box .vivo-x7black .title{width: 400px; height: auto; bottom: -120px; right: 270px; }
.big .vivo-high-box .vivo-x7black .title h2{ height: 210px;}
.big .vivo-high-box .vivo-x7black .figure{ bottom: -620px; right: -1000px; width: 1335px; height: 955px; }
/*small*/
.small .vivo-high-box .vivo-x7black .title{width: 240px; height: auto; bottom: -70px; right: 180px;}
.small .vivo-high-box .vivo-x7black .title h2{ height: 126px;}
.small .vivo-high-box .vivo-x7black .title .more span:after{background-position: 0 -13px;}
.small .vivo-high-box .vivo-x7black .figure{ bottom: -370px; right: -800px; width: 801px; height: 570px; }
/*mini*/
.mini .vivo-high-box .vivo-x7black .title{width: 200px; height: auto; bottom: -60px; right: 150px; }
.mini .vivo-high-box .vivo-x7black .title h2{ height: 105px;}
.mini .vivo-high-box .vivo-x7black .title .more span:after{background-position: 0 -13px;}
.mini .vivo-high-box .vivo-x7black .figure{ bottom: -290px; right: -720px; width: 668px; height: 475px; }

@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    .vivo-high-box .vivo-x7black{background: #b08e7c url(../img/bg1.jpg) center center no-repeat; background-size: cover; }
    .big .vivo-high-box .vivo-x7black{background: #b08e7c url(../img/bg1.jpg) center center no-repeat; background-size: cover; }
    .small .vivo-high-box .vivo-x7black{background: #b08e7c url(../img/bg1.jpg) center center no-repeat; background-size: cover; }
    .mini .vivo-high-box .vivo-x7black{background: #b08e7c url(../img/bg1.jpg) center center no-repeat; background-size: cover; }
}
/*x7black*/

/*recruit*/
 .vivo-high-box  .vivo-recruit{background:url(../img/sye.png) center center no-repeat; background-size: cover; }
.vivo-high-box .vivo-recruit .figure{ position: absolute; bottom: -217px; right: -552px; }

/*big*/
.big .vivo-high-box .vivo-recruit .figure{ position: absolute; bottom: -200px; right: -450px;  }

/*small*/
.small .vivo-high-box .vivo-recruit .figure{ position: absolute; bottom: -160px; right: -370px;  }

/*mini*/
.mini .vivo-high-box .vivo-recruit .figure{ position: absolute; bottom: -100px; right: -225px;  }

/*recruit*/


/*x7sale*/
.vivo-high-box .vivo-x7sale{background: #000; }
.vivo-high-box .vivo-x7sale .title{width: 350px; height: auto; bottom: -110px; right: 110px; }
.vivo-high-box .vivo-x7sale .title h2{ height: 120px;}
.vivo-high-box  ul li.vivo-x7sale .title .more span:after{background-position: -5px -26px;}
.vivo-high-box .vivo-x7sale .title .more span{ border: 1px #fff solid; color: #fff; }
.vivo-high-box .vivo-x7sale .figure{ position: absolute; bottom: -400px; right: -490px; width: 624px; height: 696px; }
.vivo-high-box .vivo-x7sale .figure i{background: #5594e1 url(../img/vm-h-x7sale-bg1.jpg) center center no-repeat; background-size: auto 100%; height: 1080px; width: 2560px; display: block; position: absolute; top: 50%; left: 50%; margin-left: -1460px; margin-top: -590px; z-index: -1;}
.vivo-high-box .vivo-x7sale .figure em{ position: absolute; top: 0; left: 0; width: 100%;height: 100%; }
/*big*/
.big .vivo-high-box .vivo-x7sale .title{width: 350px; bottom: -150px; right: 140px; }
.big .vivo-high-box .vivo-x7sale .title h2{ height: 150px;}
.big .vivo-high-box .vivo-x7sale .figure{ bottom: -520px; right: -700px; width: 780px; height: 870px; }
.big .vivo-high-box .vivo-x7sale .figure i{ height: 1300px; width: 2780px; margin-left: -1620px; margin-top: -700px; background-image: url(../img/vm-h-x7sale-bg-big1.jpg); background-size: 2780px 1300px;}
/*small*/
.small .vivo-high-box .vivo-x7sale .title{width: 350px; bottom: -120px; right: 80px; }
.small .vivo-high-box .vivo-x7sale .title h2{ height: 90px;}
.small .vivo-high-box .vivo-x7sale .title .more span:after{background-position: 0 -26px;}
.small .vivo-high-box .vivo-x7sale .figure{ bottom: -330px; right: -350px; width: 468px; height: 522px; }
.small .vivo-high-box .vivo-x7sale .figure i{ height: 900px; margin-top: -525px;  margin-left: -1420px; background-image: url(../img/vm-h-x7sale-bg-small1.jpg);}
/*mini*/
.mini .vivo-high-box .vivo-x7sale .title{width: 350px; bottom: -100px; right: 20px; }
.mini .vivo-high-box .vivo-x7sale .title h2{ height: 75px;}
.mini .vivo-high-box .vivo-x7sale .title .more span:after{background-position: 0 -26px;}
.mini .vivo-high-box .vivo-x7sale .figure{ bottom: -290px; right: -320px; width: 390px; height: 435px; }
.mini .vivo-high-box .vivo-x7sale .figure i{ height: 800px; margin-top: -480px;  margin-left: -1400px; background-image: url(../img/vm-h-x7sale-bg-mini1.jpg);}
@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    .vivo-high-box .vivo-x7sale .figure i{background-image: url(../img/vm-h-x7sale-bg1-x2.jpg);}
    .big .vivo-high-box .vivo-x7sale .figure i{background-image: url(../img/vm-h-x7sale-bg-big1-x2.jpg);}
    .small .vivo-high-box .vivo-x7sale .figure i{background-image: url(../img/vm-h-x7sale-bg-small1-x2.jpg);}
    .mini .vivo-high-box .vivo-x7sale .figure i{background-image: url(../img/vm-h-x7sale-bg-mini1-x2.jpg);}
}




/*xplay5*/
.vivo-high-box .vivo-xplay5{background:url(../img/bgbbb.png)  center center no-repeat; background-size: cover;}
.vivo-high-box .vivo-xplay5 .title{width: 350px; height: auto; bottom: -70px; right: 450px; }
.vivo-high-box .vivo-xplay5 .title h2{ height: 88px;}
.vivo-high-box  ul li.vivo-xplay5 .title .more span:after{background-position: -5px -13px;}
.vivo-high-box .vivo-xplay5 .title .more span{ border: 1px #008cd6 solid; color: #008fd5; }
.vivo-high-box .vivo-xplay5 .figure{width: 1520px; height: 1152px; bottom: -850px; right: -1560px; }
.vivo-high-box .vivo-xplay5 .figure .t1{   }
.vivo-high-box .vivo-xplay5 .figure .t2{ }

/*big*/
.big .vivo-high-box .vivo-xplay5 .title{ bottom: -50px; right: 480px; }
.big .vivo-high-box .vivo-xplay5 .title h2{ height: 110px;}
.big .vivo-high-box .vivo-xplay5 .figure{width: 1900px; height: 1440px; bottom: -950px; right: -1800px; }
/*small*/
.small .vivo-high-box .vivo-xplay5 .title{ bottom: -60px; right: 260px; }
.small .vivo-high-box .vivo-xplay5 .title h2{ height: 66px;}
.small .vivo-high-box .vivo-xplay5 .title .more span:after{background-position: 0 -13px;}
.small .vivo-high-box .vivo-xplay5 .figure{width: 1140px; height: 864px; bottom: -560px; right: -1100px; }
/*mini*/
.mini .vivo-high-box .vivo-xplay5 .title{ bottom: -50px; right: 280px; }
.mini .vivo-high-box .vivo-xplay5 .title h2{ height: 55px;}
.mini .vivo-high-box .vivo-xplay5 .title .more span:after{background-position: 0 -13px;}
.mini .vivo-high-box .vivo-xplay5 .figure{width: 950px; height: 720px; bottom: -540px; right: -1050px; }


/*x6s*/
.vivo-high-box .vivo-x6s{background:url(../img/in7.png) center center no-repeat; background-size: cover;}
.vivo-high-box .vivo-x6s .title{width: 400px; height: auto; bottom: -140px; right: -460px; }
.vivo-high-box .vivo-x6s .title h2{ height: 108px;}
.vivo-high-box  ul li.vivo-x6s .title .more span:after{background-position: -5px -13px;}
.vivo-high-box .vivo-x6s .title .more span{ border: 1px #fff solid; color: #fff; }
.vivo-high-box .vivo-x6s .figure{width: 480px; height: 696px; bottom: -380px; right: 0;}
.vivo-high-box .vivo-x6s .figure em{width: 100%; height: 100%; position: absolute; top: 0; left: 0;  background-size: 480px 696px;}

.vivo-high-box .vivo-x6s .figure em.f2{ z-index:1000; left:-40px; top:0px; }
.vivo-high-box .vivo-x6s .figure em.f3{z-index:10; left:220px; top:-30px; }
/*big*/
.big .vivo-high-box .vivo-x6s .title{width: 500px; height: auto; bottom: -160px; right: -630px; }
.big .vivo-high-box .vivo-x6s .title h2{ height: 135px;}
.big .vivo-high-box .vivo-x6s .figure{width: 600px; height: 870px; bottom: -460px; right: 0;}
.big .vivo-high-box .vivo-x6s .figure em.f1{ z-index:100; left:-180px; top:0px; }
.big .vivo-high-box .vivo-x6s .figure em.f2{ z-index:1000; left:-40px; top:20px; }
.big .vivo-high-box .vivo-x6s .figure em.f3{z-index:10; left:220px; top:0px; }
/*small*/
.small .vivo-high-box .vivo-x6s .title{width: 300px; height: auto; bottom: -120px; right: -420px; }
.small .vivo-high-box .vivo-x6s .title h2{ height: 81px;}
.small .vivo-high-box .vivo-x6s .title .more span:after{background-position: 0 -13px;}
.small .vivo-high-box .vivo-x6s .figure{width: 360px; height: 522px; bottom: -290px; right: 0;}
.small .vivo-high-box .vivo-x6s .figure em.f1{ z-index:100; left:-180px; top:0px; }
.small .vivo-high-box .vivo-x6s .figure em.f2{ z-index:1000; left:-40px; top:0px; }
.small .vivo-high-box .vivo-x6s .figure em.f3{z-index:10; left:150px; top:0px; }
/*mini*/
.mini .vivo-high-box .vivo-x6s .title{width: 300px; height: auto; bottom: -100px; right: -400px; }
.mini .vivo-high-box .vivo-x6s .title h2{ height: 68px;}
.mini .vivo-high-box .vivo-x6s .title .more span:after{background-position: 0 -13px;}
.mini .vivo-high-box .vivo-x6s .figure{width: 300px; height: 435px; bottom: -240px; right: 0;}
.mini .vivo-high-box .vivo-x6s .figure em.f1{ z-index:100; left:-180px; top:0px; }
.mini .vivo-high-box .vivo-x6s .figure em.f2{ z-index:1000; left:-40px; top:0px; }
.mini .vivo-high-box .vivo-x6s .figure em.f3{z-index:10; left:160px; top:0px; }