/*--a-reset--*/
::-moz-selection{background:#008cd6; color:#fff; text-shadow:none;}
::selection{background:#008cd6; color:#fff; text-shadow:none;}
a{color:#666; text-decoration:none; cursor:pointer; outline: 0 none;}
a:hover{color:#008cd6; text-decoration:none;}
a:focus{-moz-outline-style:none; border:0px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0; padding:0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
ol,li,ul,dl,dt,dd{list-style:none;}

.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .cl{ zoom:1;}
html{overflow: hidden; overflow-y: auto;}
body{overflow: hidden; font: 100%; font-family:"","",sans-serif; color:#666; background: #fff; overflow: hidden; position: relative; font-weight: 200;}
html.fly-layer,html.fly-layer body{overflow: hidden; width: 100%; height: 100%; position: relative;}
/*--z-reset--*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

a {
  background: transparent;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

::selection {
  background: #2aad6f;
  color: #FFF;
}

::-moz-selection {
  background: #2aad6f;
  color: #FFF;
}


img {
  border: 0;
  vertical-align: middle;
  max-width:100%;
  max-height:100%

  height: auto;
}

iframe {
  max-width: 100%;
}

figure {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*------------------------------------*\
    $BASE
\*------------------------------------*/
/* Tipos */
/* Global */
html {
  font-size: 100%;
  overflow-x: hidden;
}

body {
  background: #fff;
  color: #393939;
  font-family: "", ,宋体, sans-serif;
  font-size: 100%;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* disable user select */

section, p, article, img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  
}
/* Block Content */
/* Inline Content */
a {
  color: inherit;
  text-decoration: none;
}

a:focus {
  outline: none;
}

p a {
  color: #1f8657;
}
/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
.wrapper {
  padding: 0 0.75rem;
  max-width: 1200px;
  margin: 0 auto;
}
.wrapper:after {
  clear: both;
  content: '';
  display: table;
}

.col-left {
  float: left;
}

.col-right {
  float: right;
}
/*------------------------------------*\
    $UTILITIES
\*------------------------------------*/
.hidden {
  display: none !important;
}
/*background*/

.contain{ background:#fff; padding:10px; padding-top:70px; min-height:600px; width:1200px; margin:0 auto;} 
@media screen and (max-width:420px){
.contain{ background:#fff; padding-top:70px; min-height:600px; width:86%;} 
}

.vc-p-video a:after,b.v-gb-ico,.v-gb-ico:before,.v-gb-ico:after{background-image: url(../images/vivo-gb-ico.png); background-size: 600px 400px; background-repeat: no-repeat; display: inline-block; overflow: hidden; vertical-align: middle; position: relative; content: '';}
#vivo-airbox {
    width: 100%;
    height: auto;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
}
#v-gotop {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 10px;
    overflow: hidden;
    border-radius: 5px;
    display: none;
    -webkit-transform: translateY(200%);
    -moz-transform: translateY(200%);
    -ms-transform: translateY(200%);
    transform: translateY(200%);
    -webkit-transition: -webkit-transform .3s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1);
    -moz-transition: -moz-transform .3s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1);
    transition: transform .3s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1);
}
#v-gotop a {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background-color: #999;
    background-color: rgba(0,0,0,.3);
    -webkit-transition: background-color .8s cubic-bezier(0.316967, 0.989541, 0.310022, 1);
    -moz-transition: background-color .8s cubic-bezier(0.316967, 0.989541, 0.310022, 1);
    transition: background-color .8s cubic-bezier(0.316967, 0.989541, 0.310022, 1);
}

@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    a.vivo-h-logo{background-image: url(../images/logo_en.png); background-size: 171px 55px;}
    .v_h_search .search-box a.vh-sear-logo{background-image: url(../images/vh-sear-logo-x2.png);}
    .vc-p-video a:after,b.v-gb-ico,.v-gb-ico:before,.v-gb-ico:after{background-image: url(../images/vivo-gb-ico-x2.png);}
}
/*background*/
#vivo-airbox,#airbox{width: 100%; height: auto; position: fixed; z-index: 999; left: 0; top: 0;}
#vivo-wrap{width: 100%; height: auto; position: relative; z-index: 1;}
#vivo-contain,#mobile-contain,#vivo-foot{width: 100%; position: relative; z-index: 2;}
#vivo-head-wrap{width: 100%; position: fixed; z-index: 99;  background-color: rgba(34,34,34,.97); background:#000; border-bottom: 0px #f2f2f2 solid; box-sizing: border-box;}

#v-gotop{width: 50px; height: 50px; position: absolute; right: 10px; overflow: hidden; border-radius: 5px; display: none; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); -webkit-transition: -webkit-transform .3s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1); -moz-transition: -moz-transform .3s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1); transition: transform .3s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1);}
#v-gotop a{width: 100%; height: 100%; display: block; overflow: hidden; background-color:#999; background-color: rgba(0,0,0,.3); -webkit-transition: background-color .8s cubic-bezier(0.316967, 0.989541, 0.310022, 1); -moz-transition: background-color .8s cubic-bezier(0.316967, 0.989541, 0.310022, 1); transition: background-color .8s cubic-bezier(0.316967, 0.989541, 0.310022, 1);}
#v-gotop a:hover{background-color: #008cd6;}
#v-gotop a:after{width: 45px; height: 45px; display: block; content: ''; overflow: hidden; background-position: -120px 0; margin: 2px;}
#v-gotop.show{-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0); -webkit-transition: -webkit-transform .5s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1); -moz-transition: -moz-transform .5s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1); transition: transform .5s .1s cubic-bezier(0.316967, 0.989541, 0.310022, 1);}






/*vivo-menu*/
.vivo-menu-series{position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 98; display: none;}
#mobile-wrap .vivo-menu-series{position: absolute;}
.vivo-menu-series .vms-bigbox{width: 100%; min-height: 100px; position: relative; top: 60px; background-color: #fff; background-color: rgba(255,255,255,.97);}
.vivo-menu-series  .vms-bigbox .vms-box{width: 1000px; margin: auto; padding: 30px 0;}
.vms-box dl{float: left; width: 20%;}
.vms-box dl dt{font-size: 16px; color: #333; padding-bottom: 30px;}
.vms-box dl dt a{display: block; color: #333; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; transition: color .3s ease;}
.vms-box dl dt a:after{width: 6px; height: 10px; background-position: -70px 0; vertical-align: 1px; margin-left: 6px;}
.vms-box dl dt a:hover{color: #008cd6;}
.vms-box dl dt a:hover:after{background-position: -78px 0;}
.vms-box dl dd a{display: block; font-size: 14px; color: #666; height: 2.5em; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; transition: color .3s ease; width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.vms-box dl dd a:hover{color: #008cd6;}

.vivo-menu-series,.vivo-menu-series .vms-bigbox{-webkit-transition: background-color .3s .3s ease;-moz-transition: background-color .3s .3s ease;transition: background-color .3s .3s ease;}
.vms-box dl dt,.vms-box dl dd{-webkit-transform: translate3d(20px,0,0);-moz-transform: translate3d(20px,0,0);transform: translate3d(20px,0,0); -webkit-transition: -webkit-transform .3s ease,opacity .3s ease; -moz-transition: -moz-transform .3s ease,opacity .3s ease; transition: transform .3s ease,opacity .3s ease; opacity: 0;}
.vms-box dl dt{-webkit-transition-delay: .22s;-moz-transition-delay: .22s;transition-delay: .22s}
.vms-box dl dd:nth-child(1){-webkit-transition-delay: .24s;-moz-transition-delay: .24s;transition-delay: .24s}
.vms-box dl dd:nth-child(2){-webkit-transition-delay: .26s;-moz-transition-delay: .26s;transition-delay: .26s}
.vms-box dl dd:nth-child(3){-webkit-transition-delay: .28s;-moz-transition-delay: .28s;transition-delay: .28s}
.vms-box dl dd:nth-child(4){-webkit-transition-delay: .3s;-moz-transition-delay: .3s;transition-delay: .3s}
.vms-box dl dd:nth-child(5){-webkit-transition-delay: .32s;-moz-transition-delay: .32s;transition-delay: .32s}
.vms-box dl dd:nth-child(6){-webkit-transition-delay: .34s;-moz-transition-delay: .34s;transition-delay: .34s}
.vms-box dl dd:nth-child(7){-webkit-transition-delay: .36s;-moz-transition-delay: .36s;transition-delay: .36s}
.vms-box dl dd:nth-child(8){-webkit-transition-delay: .38s;-moz-transition-delay: .38s;transition-delay: .38s}
.vms-box dl dd:nth-child(9){-webkit-transition-delay: .4s;-moz-transition-delay: .4s;transition-delay: .4s}

.OpenNavproduct .vivo-menu-series{ background-color: #000; background-color: rgba(0,0,0,.1); -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; transition: background-color .3s ease;}
/*.OpenNavproduct .vivo-menu-series .vms-bigbox{ background-color: #fff; transition: background-color .3s ease;}*/
.OpenNavproduct .vms-box dl dt,.OpenNavproduct .vms-box dl dd{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0); -webkit-transition: -webkit-transform .3s ease,opacity .3s ease; -moz-transition: -moz-transform .3s ease,opacity .3s ease; transition: transform .3s ease,opacity .3s ease; opacity: 1;}
/*.OpenNavproduct .vms-box dl dt{transition-delay: .3s}*/
.OpenNavproduct .vms-box dl dd:nth-child(1){-webkit-transition-delay: .02s;-moz-transition-delay: .02s;transition-delay: .02s}
.OpenNavproduct .vms-box dl dd:nth-child(2){-webkit-transition-delay: .04s;-moz-transition-delay: .04s;transition-delay: .04s}
.OpenNavproduct .vms-box dl dd:nth-child(3){-webkit-transition-delay: .06s;-moz-transition-delay: .06s;transition-delay: .06s}
.OpenNavproduct .vms-box dl dd:nth-child(4){-webkit-transition-delay: .08s;-moz-transition-delay: .08s;transition-delay: .08s}
.OpenNavproduct .vms-box dl dd:nth-child(5){-webkit-transition-delay: .1s;-moz-transition-delay: .1s;transition-delay: .1s}
.OpenNavproduct .vms-box dl dd:nth-child(6){-webkit-transition-delay: .12s;-moz-transition-delay: .12s;transition-delay: .12s}
.OpenNavproduct .vms-box dl dd:nth-child(7){-webkit-transition-delay: .14s;-moz-transition-delay: .14s;transition-delay: .14s}
.OpenNavproduct .vms-box dl dd:nth-child(8){-webkit-transition-delay: .16s;-moz-transition-delay: .16s;transition-delay: .16s}
.OpenNavproduct .vms-box dl dd:nth-child(9){-webkit-transition-delay: .18s;-moz-transition-delay: .18s;transition-delay: .18s}

/*vivo-menu*/
/*video*/
#video_layer{position: fixed; top: 0; left: 0; width: 100%; min-height: 300px; z-index: 1; background-color: #fff; background-color: rgba(255,255,255,.98);}
#video_layer a.vdl-colse{display: inline-block; width: 30px; height: 30px; position: absolute; top: 25px; right: 25px; z-index: 9; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease;}
#video_layer a.vdl-colse:hover{opacity: .7;}
#video_layer a.vdl-colse:before{width: 30px; height: 30px; position: absolute; top: 0; left: 0; background-position: -130px -125px;}
#video_layer .vdl-box{position: absolute; top: 50%; left: 50%; z-index: 1;}
/*video*/

/*search*/
.v_h_search{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; background: rgba(0,0,0,.9); z-index: 99; display: none;}
.v_h_search .search-box{}
.v_h_search .search-box .vh-sear-nav{height: 80px; border-bottom: #313131 1px solid; position: relative;}
.v_h_search .search-box .vh-sear-nav .nav-box{width: 1400px; margin: auto;}
.v_h_search .vh-sear-nav a.vh-sear-logo{width: 95px; height: 25px; float: left; position: absolute; top: 50%; margin-top: -13px;}
.v_h_search .vh-sear-nav ul{margin-left: 20%; padding-top: 26px; position: relative;}
.v_h_search .vh-sear-nav ul li{display: inline-block;}
.v_h_search .vh-sear-nav ul li.input input{width: 500px; height: 30px; border: none; background: none; color: #fff; font-size: 18px;}
.v_h_search .vh-sear-nav ul li.sear-tool{position: absolute; right: 0; top: 26px;}
.v_h_search .vh-sear-nav ul li.sear-tool a{display: inline-block; margin-left: 13px; width: 30px; height: 30px; position: relative; vertical-align: middle; float: left;}
.v_h_search .vh-sear-nav ul li.sear-tool a:hover{opacity: .7; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease;}
.v_h_search .vh-sear-nav ul li.sear-tool a.search:before{width: 30px; height: 30px; background-position: 0 -125px;}
.v_h_search .vh-sear-nav ul li.sear-tool a.close:before,.v_h_search .vh-sear-nav ul li.sear-tool a.close:after{width: 30px; height: 30px; position: absolute; top: 0; left: 0;}
.v_h_search .vh-sear-nav ul li.sear-tool a.close:before{background-position: -60px -125px;}
.v_h_search .vh-sear-nav ul li.sear-tool a.close:after{background-position: -90px -125px;}
.v_h_search .vh-sear-cont{width: 100%; margin: auto; overflow: hidden; overflow-y: auto;}
.v_h_search .vh-sear-cont .cont-box{width: 1200px; margin: auto; overflow: hidden;}
.v_h_search .vh-sear-cont dl{font-size: 14px; color: #666; margin-top: 20px;}
.v_h_search .vh-sear-cont dl dt{height: 48px; line-height: 48px; background: #000; background: rgba(0,0,0,.9); font-size: 18px; color: #ccc; }
.v_h_search .vh-sear-cont dl dt p{ padding-left: 15%;}
.v_h_search .vh-sear-cont dl dt span{font-size: 14px; color: #666; padding-left: 10px;}
.v_h_search .vh-sear-cont dl dd a{display: block; padding:15px 15.5%; -webkit-transition: background .3s ease,color .3s ease; -moz-transition: background .3s ease,color .3s ease; transition: background .3s ease,color .3s ease;}
.v_h_search .vh-sear-cont dl dd a:hover{background: #008cd6; color: #fff;}
.v_h_search .vh-sear-cont dl dd h4{ font-size: 18px; color: #fff; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v_h_search .vh-sear-cont dl dd h4:before{width: 19px; height: 24px; margin-right: 10px; margin-left: 5px;}
.v_h_search .vh-sear-cont dl dd p{padding-left: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.v_h_search .vh-sear-cont dl.vhs-pro dd h4:before{background-position: 0 -80px;}
.v_h_search .vh-sear-cont dl.vhs-data dd h4:before{background-position: -40px -80px;}
.v_h_search .vh-sear-cont dl.vhs-news dd h4:before{background-position: -80px -80px;}
.v_h_search .vh-sear-cont dl.vhs-pro dd a:hover h4:before{background-position: -20px -80px;}
.v_h_search .vh-sear-cont dl.vhs-data dd a:hover h4:before{background-position: -60px -80px;}
.v_h_search .vh-sear-cont dl.vhs-news dd a:hover h4:before{background-position: -100px -80px;}

.vivo-h-nav li.current{ -webkit-transition: background-color .3s .4s ease; -moz-transition: background-color .3s .4s ease; transition: background-color .3s .4s ease;}
.vivo-h-nav li a{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1); opacity: 1; -webkit-transform-origin: 80% 50%; -moz-transform-origin: 80% 50%; -ms-transform-origin: 80% 50%; transform-origin: 80% 50%;}
.vivo-h-nav li:nth-child(1) a{ -webkit-transition: color .3s ease,-webkit-transform .3s .41s ease,opacity .3s .41s ease; -moz-transition: color .3s ease,-moz-transform .3s .41s ease,opacity .3s .41s ease; transition: color .3s ease,transform .3s .41s ease,opacity .3s .41s ease;}
.vivo-h-nav li:nth-child(2) a{ -webkit-transition: color .3s ease,-webkit-transform .3s .42s ease,opacity .3s .42s ease; -moz-transition: color .3s ease,-moz-transform .3s .42s ease,opacity .3s .42s ease; transition: color .3s ease,transform .3s .42s ease,opacity .3s .42s ease;}
.vivo-h-nav li:nth-child(3) a{ -webkit-transition: color .3s ease,-webkit-transform .3s .43s ease,opacity .3s .43s ease; -moz-transition: color .3s ease,-moz-transform .3s .43s ease,opacity .3s .43s ease; transition: color .3s ease,transform .3s .43s ease,opacity .3s .43s ease;}
.vivo-h-nav li:nth-child(4) a{ -webkit-transition: color .3s ease,-webkit-transform .3s .44s ease,opacity .3s .44s ease; -moz-transition: color .3s ease,-moz-transform .3s .44s ease,opacity .3s .44s ease; transition: color .3s ease,transform .3s .44s ease,opacity .3s .44s ease;}
.vivo-h-nav li:nth-child(5) a{ -webkit-transition: color .3s ease,-webkit-transform .3s .45s ease,opacity .3s .45s ease; -moz-transition: color .3s ease,-moz-transform .3s .45s ease,opacity .3s .45s ease; transition: color .3s ease,transform .3s .45s ease,opacity .3s .45s ease;}
.vivo-h-nav li:nth-child(6) a{ -webkit-transition: color .3s ease,-webkit-transform .3s .46s ease,opacity .3s .46s ease; -moz-transition: color .3s ease,-moz-transform .3s .46s ease,opacity .3s .46s ease; transition: color .3s ease,transform .3s .46s ease,opacity .3s .46s ease;}
.vivo-h-nav li:nth-child(7) a{ -webkit-transition: color .3s ease,-webkit-transform .3s .47s ease,opacity .3s .47s ease; -moz-transition: color .3s ease,-moz-transform .3s .47s ease,opacity .3s .47s ease; transition: color .3s ease,transform .3s .47s ease,opacity .3s .47s ease;}
.v_h_search{-webkit-transition: opacity .2s .3s ease;-moz-transition: opacity .2s .3s ease;transition: opacity .2s .3s ease; opacity: 0;}
.v_h_search .vh-sear-nav ul li.sear-tool a.close:after,.v_h_search .vh-sear-nav ul li.sear-tool a.close:before{-webkit-transition: -webkit-transform .3s ease,opacity .25s ease;-moz-transition: -moz-transform .3s ease,opacity .25s ease;transition: transform .3s ease,opacity .25s ease; opacity: 0;}
.v_h_search .vh-sear-nav ul li.sear-tool a.close:after{ -webkit-transform: rotate(45deg) ; -moz-transform: rotate(45deg) ; -ms-transform: rotate(45deg) ; transform: rotate(45deg) ; -webkit-transform-origin: 100% 70%; -moz-transform-origin: 100% 70%; -ms-transform-origin: 100% 70%; transform-origin: 100% 70%;}
.v_h_search .vh-sear-nav ul li.sear-tool a.close:before{ -webkit-transform: rotate(-45deg) ; -moz-transform: rotate(-45deg) ; -ms-transform: rotate(-45deg) ; transform: rotate(-45deg) ; -webkit-transform-origin: 0 70%; -moz-transform-origin: 0 70%; -ms-transform-origin: 0 70%; transform-origin: 0 70%;}
.v_h_search .vh-sear-cont dl dt p,.v_h_search .vh-sear-cont dl dd,.v_h_search .vh-sear-nav ul li.input{-webkit-transition: -webkit-transform .3s ease,opacity .3s ease;-moz-transition: -moz-transform .3s ease,opacity .3s ease;transition: transform .3s ease,opacity .3s ease; -webkit-transform: translate3d(5%,0,0); -moz-transform: translate3d(5%,0,0); transform: translate3d(5%,0,0); opacity: 0;}
.v_h_search .vh-sear-nav ul li.input{ -webkit-transition-delay: .02s; -moz-transition-delay: .02s; transition-delay: .02s;}
.v_h_search .vh-sear-cont dl dt p{ -webkit-transition-delay: .04s; -moz-transition-delay: .04s; transition-delay: .04s;}
.v_h_search .vh-sear-cont dl dd:nth-child(2){ -webkit-transition-delay: .06s; -moz-transition-delay: .06s; transition-delay: .06s;}
.v_h_search .vh-sear-cont dl dd:nth-child(3){ -webkit-transition-delay: .08s; -moz-transition-delay: .08s; transition-delay: .08s;}
.nav-tool a{opacity: 1; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease;}

#vivo-wrap.SearchOpen .vivo-h-nav li.current{background-color: transparent; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; transition: background-color .3s ease;}
#mobile-wrap.SearchOpen .vivo-h-nav li.current{background-color: transparent; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; transition: background-color .3s ease;}
#vivo-wrap.SearchOpen .vivo-h-nav li a{-webkit-transform: scale(.8);-moz-transform: scale(.8);-ms-transform: scale(.8);transform: scale(.8); opacity: 0; -webkit-transition: -webkit-transform .3s ease,opacity .3s ease; -moz-transition: -moz-transform .3s ease,opacity .3s ease; transition: transform .3s ease,opacity .3s ease;}
#mobile-wrap.SearchOpen .vivo-h-nav li a{-webkit-transform: scale(.8);-moz-transform: scale(.8);-ms-transform: scale(.8);transform: scale(.8); opacity: 0; -webkit-transition: -webkit-transform .3s ease,opacity .3s ease; -moz-transition: -moz-transform .3s ease,opacity .3s ease; transition: transform .3s ease,opacity .3s ease;}
#vivo-wrap.SearchOpen .v_h_search{opacity: 1; -webkit-transition: opacity .3s .3s ease; -moz-transition: opacity .3s .3s ease; transition: opacity .3s .3s ease;}
#mobile-wrap.SearchOpen .v_h_search{opacity: 1; -webkit-transition: opacity .3s .3s ease; -moz-transition: opacity .3s .3s ease; transition: opacity .3s .3s ease;}
.clearSearchDelay .vh-sear-nav ul li.sear-tool a.close:after,.clearSearchDelay .vh-sear-nav ul li.sear-tool a.close:before{-webkit-transition-delay: 0s;-moz-transition-delay: 0s;transition-delay: 0s;}

/*search*/
/*common*/
#vivo-contain{z-index: 9; background-color: #f6f7f8; overflow: hidden; padding-top1: 80px;}
.vivopro-page #vivo-contain{padding-top: 90px; background: #fafafa; min-height: 750px;}
.mainfth-page #vivo-contain{padding-top: 80px;}
.mainservice-page #vivo-contain{padding-top: 80px;}
.mainstore-page #vivo-contain{padding-top: 80px; background-color: #fff;}

/* crubms */
.v-crumbs{width: 1100px; margin: auto; color: #999; font-size: 12px; padding: 10px 0 0 0;}
.v-crumbs a{-webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.v-crumbs a:hover{color: #008cd6;}
/*common*/
/*foot*/
#vivo-foot-wrap{height: 300px; width: 100%; position: relative; background-color: #080404;   z-index: 200; }

#vivo-foot{height: 230px; width: 1200px;  margin:0 auto; z-index: 200; color: #999; font-size: 14px;}
.bordi{width: 100%;border-bottom:1px solid #c1c0c0;}
.pf-mb #vivo-foot{position: relative; left: 0; bottom: auto;}
#vivo-foot .vf-f-sitelinks{text-align: center;}
.vf-f-sitelinks p{ font-size: 13px; line-height: 24px; color: #666; }

/*foot*/


@media screen and (max-width:1420px){
    .vivo-head{width: 100%;}
    .vivo-head a.vivo-h-logo{left: 2em;}
    .vivo-head .nav-tool{right: 2em;}
}

@media screen and (max-width:1400px){
    .v_h_search .search-box .vh-sear-nav .nav-box{width: 100%;}
    .v_h_search .vh-sear-nav a.vh-sear-logo{left: 2em;}
    .v_h_search .vh-sear-nav ul li.sear-tool{right: 2em;}
}
@media screen and (max-width:1200px){
    .v_h_search .vh-sear-cont .cont-box{width: 100%;}
}
@media screen and (max-width:1100px){
    .vivo-menu-series .vms-bigbox .vms-box{width: calc(100% - 4em);}
}
@media screen and (max-width:1000px){
    .v_h_search .vh-sear-cont dl dt p{padding-left: 10%;}
    .v_h_search .vh-sear-cont dl dd a{padding: 15px 10%;}
    .vivo-menu-series .vms-bigbox .vms-box{width: calc(100% - 4em);}
}

.no-foot-ant #vivo-foot-wrap{z-index: 11;}/*去掉foot叠盖效果*/
.no-foot-ant #vivo-foot{position: relative;}



/*产品页*/

/*------------------------------------*\
    $BREADCRUMB
\*------------------------------------*/
.breadcrumb {
  display: none;
}
@media only screen and (min-width: 61.875em) {
  .breadcrumb {
    display: block;
    padding: 19px 0 14px;
  }
  .breadcrumb:after {
    clear: both;
    content: '';
    display: table;
  }
  .breadcrumb li {
    float: left;
    color: #7b7b7b;
    font-size: 14px;
    font-size: 0.875rem;
  }
  .breadcrumb a {
    display: block;
  }
  .breadcrumb a span {
    padding: 0 10px;
  }
  .breadcrumb .current {
    color: #000;
  }
}
@media only screen and (max-width: 61.87438em) {
  .breadcrumb {
    display: block;
    padding: 19px 0 14px;
  }
  .breadcrumb:after {
    clear: both;
    content: '';
    display: table;
  }
  .breadcrumb li {
    float: left;
    color: #7b7b7b;
    font-size: 14px;
    font-size: 0.875rem;
  }
  .breadcrumb a {
    display: block;
  }
  .breadcrumb a span {
    padding: 0 10px;
  }
  .breadcrumb .current {
    color: #000;
  }
}

/* transform Translate */
/* Transition */
.product-index {
  background-color: #f7f7f7;
  font-family: '';
}
@media only screen and (min-width: 61.875em) {
  .product-index {
    /* font-family: 'FZLTXHJW'; */
    font-family: '';
  }
}

.font-normal {
  font-family: '';
}

.main-flagship {
  display: none;
  height: 736px;
}
@media only screen and (min-width: 61.875em) {
  .main-flagship {
    display: block;
  }
}

.hover-box {
  display: block;
  overflow: hidden;
}

.hover-box:hover .hover-animation {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: transform 1s ease;
  -moz-transition: transform 1s ease;
  -o-transition: transform 1s ease;
  -ms-transition: transform 1s ease;
  transition: transform 1s ease;
}

.hover-animation {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: transform 1s ease;
  -moz-transition: transform 1s ease;
  -o-transition: transform 1s ease;
  -ms-transition: transform 1s ease;
  transition: transform 1s ease;
}

.left-up {
  position: relative;
  width: 770px;
  height: 364px;
}
.left-up .left-up-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 770px;
}
.left-up .left-up-text {
  position: absolute;
  width: 770px;
  top: 0;
  left: 0;
  z-index: 2;
}

.left-down {
  position: relative;
  width: 770px;
  height: 364px;
  margin-top: 10px;
}
.left-down .left-down-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 770px;
}
.left-down .left-down-text {
  position: absolute;
  width: 770px;
  top: 0;
  left: 0;
  z-index: 2;
}

.whole-right {
  position: relative;
  overflow: hidden;
  width: 396px;
  height: 738px;
}
.whole-right .whole-right-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 396px;
  height: 738px;
}
.whole-right .whole-right-text {
  position: absolute;
  width: 396px;
  height: 738px;
  top: 0;
  left: 0;
  z-index: 2;
}

.flagship-mobile {
  display: block;
}
@media only screen and (min-width: 61.875em) {
  .flagship-mobile {
    display: none;
  }
}

.box-products .wrapper, .oppo-feature .wrapper {
  width: 100%;
  padding: 0;
}
@media only screen and (min-width: 61.875em) {
  .box-products .wrapper, .oppo-feature .wrapper {
    max-width: 1200px;
    padding: 0 0.75rem;
    margin: 0 auto;
    margin-top: 90px;
  }
}

.desk-title {
  display: none;
}
@media only screen and (min-width: 61.875em) {
  .desk-title {
    display: block;
    text-align: center;
    font-size: 23px;
    font-size: 1.4375rem;
    height: 30px;
     font-weight:500;
    width: 1176px;
 color:#000;
   background: url("../img/title-bg.png") no-repeat center;

  }
  .desk-title .ico{ display:inline-block; background:url(../img/LOGO_03.png) no-repeat; width:120px; height:20px; background-position:center center; background-size:86px 20px; }
}

.icon-more img {
  margin-top: -4px;
}

.brick-name {
  display: none;
}
@media only screen and (min-width: 61.875em) {
  .brick-name {
    display: block;
    margin-top: 20px;
    margin-bottom: 15px;
  }
  .brick-name .serial-slogan {
    color: #787878;
  }
  .brick-name .serial-slogan .serial-name {
    color: #1e1e1e;
     font-weight:500;
  }
  .brick-name:after {
    clear: both;
    content: '';
    display: table;
  }
  .brick-name span {
    display: inline-block;
    line-height: 20px;
    height: 20px;
    font-size: 18px;
    font-size: 1.125rem;
  }
  .brick-name span img {
    width: 20px;
  }
}

.brick-list:after {
  clear: both;
  content: '';
  display: table;
}

.brick-item {
  background-color: #fff;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 6px;
  border-bottom: #e3e2e2 solid 1px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.brick-item:after {
  clear: both;
  content: '';
  display: table;
}
@media only screen and (min-width: 61.875em) {
  .brick-item {
    float: left;
    background-color: #fff;
    width: 286px;
    padding: 60px 10px 45px;
    margin-right: 10px;
    border-bottom: none;
    box-shadow: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
  }
  .brick-item:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, -2px, 0);
    -moz-transform: translate3d(0, -2px, 0);
    -o-transform: translate3d(0, -2px, 0);
    -ms-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
  }
}

.brick-item-last {
  margin-right: 0;
  margin-bottom: 0;
}

.brick-img {
  float: left;
  width: 45%;
  padding-left: 20px;
  padding-right: 20px;
}
@media only screen and (min-width: 61.875em) {
  .brick-img {
    float: none;
    width: 100%;
    padding-left: 52.5px;
    padding-right: 52.5px;
  }
}

.brick-content {
  float: left;
  width: 55%;
  padding-left: 0px;
  padding-right: 20px;
}
@media only screen and (min-width: 61.875em) {
  .brick-content {
    float: none;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.brick-title {
  text-align: center;
  color: #141414;
  font-size: 16px;
  font-size: 1rem;
  /* font-weight: 600; */
  margin-top: 35px;
  line-height: 20px;
}
@media only screen and (min-width: 61.875em) {
  .brick-title {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
  }
}

.brick-desc {
  text-align: center;
  color: #a0a0a0;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 18px;
  margin-top: 4px;
}
@media only screen and (min-width: 61.875em) {
  .brick-desc {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
  }
}

.brick-learn-more {
  display: block;
  text-align: center;
  color: #00925f;
  font-size: 13px;
  width: 60%;
  padding: 5px;
  margin: 0 auto;
  margin-top: 15px;
  border: 1px solid #00925f;
  border-radius: 4px;
}
@media only screen and (min-width: 61.875em) {
  .brick-learn-more {
    display: none;
  }
}

.brick-mobile-more {
  display: block;
  background-color: #fff;
  text-align: center;
  color: #3c3c3c;
  line-height: 60px;
  width: 100%;
  margin-bottom: 12px;
  border-bottom: #e3e2e2 solid 1px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 61.875em) {
  .brick-mobile-more {
    display: none;
  }
}

.other-link {
  display: block;
  color: #1f8657;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.other-link a {
  width: 23.5%;
  text-align: center;
  display: block;
  float: left;
}
.other-link span {
  float: left;
}
@media only screen and (min-width: 61.875em) {
  .other-link {
    display: none;
  }
}

.tabs-blank {
  display: block;
}
@media only screen and (min-width: 61.875em) {
  .tabs-blank {
    display: none;
  }
}

.tabs-mobile {
  display: block;
  width: 100%;
  position: relative;
}
.tabs-mobile:after {
  clear: both;
  content: '';
  display: table;
}
.tabs-mobile.active {
  position: fixed;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 61.875em) {
  .tabs-mobile {
    display: none;
  }
}

.tabs-mobile li {
  float: left;
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-size: 1rem;
  color: #3c3c3c;
  background-color: #f7f7f7;
  height: 50px;
  line-height: 50px;
}

.tabs-mobile li.active {
  color: #008b56;
  font-weight: bold;
  border-bottom: #008b56 solid 2px;
}




/*------------------------------------*\
  $WHATS NEW
\*------------------------------------*/
.whats-new .message-box + .message-box {
  margin: 40px 0 0;
}


/* -----------------------------------*\
  $GROUP BUYING DETAIL
\*------------------------------------*/
.product-title {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 300;
  margin: 10px 0;
}
@media only screen and (min-width: 46.875em) {
  .product-title {
    font-size: 24px;
    font-size: 1.5rem;
    margin: 20px 0;
  }
}
@media only screen and (min-width: 61.875em) {
  .product-title {
    font-size: 26px;
    font-size: 1.625rem;
    margin: 20px 0 0;
  }
}
.word-break {
  word-wrap: break-word;
  word-break: break-all;
}
.align-right {
  text-align: right;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.product-view-tabs{
background-color: rgba(0, 0, 0, 0);
background-origin: padding-box;
background-size: auto;
box-sizing: border-box;
color: rgb(57, 57, 57);
display: block;
font-size: 16px;
height: 55px;
line-height: normal;
width: 1361px; margin:0 auto; }
.product-view-tabs ul{ padding-top:10px; }
.product-view-tabs ul li{ 
float: left;
height: 51px;
line-height: 21px;
text-align: left;
}
.product-view-tabs ul li a{
color: rgb(155, 155, 155);
cursor: pointer;
display: inline-block;
font-family: '', Arial;
font-size: 16px;
height: 50px;
line-height: 50px;
outline-color: rgb(155, 155, 155);
position: relative;
text-align: center;
width: 160px;
}
.product-view-tabs ul li.y-tab-active{
float: left;
font-family: '', Arial;
font-size: 14px;
height: 51px;
line-height: 21px;
 border-bottom:2px solid rgb(0, 140, 214);
}
.product-view-tabs ul li.y-tab-active a{
color: rgb(0, 140, 214);
cursor: pointer;
display: inline-block;
font-family: '', Arial;
font-size: 16px;
}
.y-tab-frame{  display:none;   }
.y-tab-frame table{ margin:0 auto;text-align:center; }
.tab-item-active{ display:block; }
.cl{ clear:both; }

.vil{ width:536px;  height:259px; padding-top:30px; }
.vil h1{ color:#fff; font-size:14px; padding-bottom:20px; }
.vil h1 span{color:#fff; font-size:14px; display:inline-block; margin-left:20px;margin-right:20px; }
.vil h1 a{color:#fff; font-size:14px; display:inline-block;}       
.vil ul{ clear:both; display:block }
.vil ul li{  margin-top:8px;color:#fff; font-size:14px; line-height:18px; margin-bottom:8px; overflow:hidden; clear:both; display:block}
.vil ul li.comname{}
.vil ul li.tel{ padding-left:32px; background:url(../images/dibu17_06.jpg) no-repeat; background-size:24px 24px; background-position:center left; height:32px; line-height:32px; }
.vil ul li .fax{ display:inline-block; padding-left:32px; background:url(../images/dibu17_09.jpg) no-repeat;background-size:24px 24px; background-position:center left; height:32px; line-height:32px; }
.vil ul li .skey{display:inline-block; margin-left:50px; padding-left:32px; background:url(../images/dibu17_11.jpg) no-repeat;background-size:24px 24px; background-position:center left; height:32px; line-height:32px; }
.vil ul li.email{ padding-left:32px; background:url(../images/dibu17_11-05.jpg) no-repeat;background-size:24px 24px; background-position:center left; height:32px; line-height:32px; }
.vil ul li.address{ padding-left:32px; background:url(../images/dibu17_13.jpg) no-repeat;background-size:24px 24px; background-position:center left; height:32px; line-height:32px; }

.vir{  margin-top:40px; position:relative; width:564px; height:259px; }
.vir .erweima{ display:inline-block; width:260px; height:299px; position:absolute; bottom:-25px; left:130px; background-size:260px 229px;  }

.hei60{ height:60px; }
.searchx{ margin-top:10px;  position:relative; height:28px; margin-right:275px;  }
.searchx .fl1{ height:30px; width:0px; overflow:hidden;
transition-duration: .5s; 
-moz-transition-duration: .5s; /* Firefox 4 */
-webkit-transition-duration: .5s; /* Safari 和 Chrome */
-o-transition-duration: .5s; /* Opera */
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width;   }
.searchx .fl1 input{transition-duration: .5s; 
-moz-transition-duration: .5s; /* Firefox 4 */
-webkit-transition-duration: .5s; /* Safari 和 Chrome */
-o-transition-duration: .5s; /* Opera */
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width;  border:0px; color:#000;  font-family:;  height:28px;  width:0px; line-height:28px;}
.searchx .fl2{transition-duration: .5s; 
-moz-transition-duration: .5s; /* Firefox 4 */
-webkit-transition-duration: .5s; /* Safari 和 Chrome */
-o-transition-duration: .5s; /* Opera */
transition-property:left;
-moz-transition-property: left; /* Firefox 4 */
-webkit-transition-property:left; /* Safari 和 Chrome */
-o-transition-property:left;  cursor:pointer; display:inline-block; position:absolute; left:-110px; top:7px; background:url(../images/vivo-head-ico.png) no-repeat; background-position:-10px -10px; width:20px; height:20px; }
.searchx.on .fl1{ width:124px; display:block }
.searchx.on .fl1 input{  width:100px;padding-left:6px; border:1px solid #666; }
.searchx.on .fl1 input:hover { border-color: #666; outline: none; }
.searchx.on .fl1 input:focus { border-color: #666; outline: none;box-shadow: 0 0 5px #666; }

.searchx.on .fl2{  left:125px;  }
.page{ padding-top:20px; padding-bottom:20px; text-align:center; }