/**
 * Powered by uimix.com;
 * Vivo product project - 产品库页面开发框架;
 * Version: 3.20.2;
 * Released on: 2020-11-03;
 */

@charset "UTF-8";

.hide {
  display: none;
}

@font-face {
  font-family: ClanOT-WideBold;
  src: url("../css/ClanOT-WideBold.eot");
  src: url("../css/ClanOT-WideBold.eot?#ie-fixed") format("embedded-opentype"),url("../css/ClanOT-WideBold.woff2") format("woff2"),url("../css/ClanOT-WideBold.woff") format("woff"),url("../css/ClanOT-WideBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: Avenir-Next-Medium;
  src: url("../css/Avenir-Next-Medium.eot");
  src: url("../css/Avenir-Next-Medium.eot?#ie-fixed") format("embedded-opentype"),url("../css/Avenir-Next-Medium.woff2") format("woff2"),url("../css/Avenir-Next-Medium.woff") format("woff"),url("../css/Avenir-Next-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
}

.gb-lang-vn .stage1 {
  font-family: Avenir-Next-Medium!important;
}

.gb-lang-vn .stage1 .title .main-title,
.gb-lang-vn .stage1 .title .sub-title {
  font-family: ClanOT-WideBold;
}

.gb-lang-vn .stage1 .title .description-text,
.gb-lang-vn .stage1 .title .tips-text {
  font-family: Avenir-Next-Medium;
}

.gb-lang-vn .stage1 .data-items ul li strong {
  font-family: Avenir-Next-Medium;
}

.gb-lang-vn .stage1 .data-items ul li p {
  font-family: Avenir-Next-Medium;
}

.gb-lang-vn .product-nav-tab .product-nav-wrapper .product-nav-content ul li a {
  font-family: Avenir-Next-Medium;
}

.gb-lang-vn .dark-mode .section .title .main-title,
.gb-lang-vn .dark-mode .section .title .sub-title {
  color: #fff;
}

.gb-lang-vn .dark-mode .section .title .main-title.main-title-lighter,
.gb-lang-vn .dark-mode .section .title .sub-title.main-title-lighter {
  color: rgba(255,255,255,.5);
}

.gb-lang-vn .dark-mode .section .title .description-text {
  color: rgba(255,255,255,.8);
}

@media (max-width:1080px) {
  .gb-lang-vn .dark-mode .section .title .description-text {
    color: rgba(255,255,255,.6);
  }
}

.gb-lang-vn .dark-mode .section .title .tips-text {
  color: rgba(255,255,255,.4);
}

.gb-lang-vn .dark-mode .section .title .data-items ul li p {
  color: rgba(255,255,255,.6);
}

.gb-lang-vn .dark-mode .section .title .data-items ul li strong {
  color: #fff;
}

.gb-lang-vn .v20se-highlight-detail-1 {
  position: relative;
  overflow: hidden;
  background-image: -webkit-gradient(linear,left top,right top,from(#f2f6fd),color-stop(#fff),to(#f6faff));
  background-image: -webkit-linear-gradient(left,#f2f6fd,#fff,#f6faff);
  background-image: linear-gradient(to right,#f2f6fd,#fff,#f6faff);
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-highlight-detail-1 {
    height: auto;
  }
}

.gb-lang-vn .v20se-highlight-detail-1 .figure-box {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 1920px;
  height: 1080px;
}

@media (max-width:1300px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box {
    width: 1344px;
    height: 756px;
  }
}

@media (min-width:1921px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box {
    width: 2560px;
    height: 1300px;
  }
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 40px;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

.gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure {
  position: relative;
  z-index: 1;
  width: 1920px;
  height: 1080px;
}

@media (max-width:1300px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure {
    width: 1344px;
    height: 630px;
  }
}

@media (min-width:1921px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure {
    width: 2560px;
    height: 1300px;
  }
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure {
    margin-left: 0;
    width: 100vw;
    height: 165.33333vw;
  }
}

.gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure {
  position: absolute;
}

.gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
  background-image: url("../img/v20se-highlight-detail-1-img1-lg.jpg");
  background-size: 1920px 1080px;
  background-position: center;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    background-image: url("../img/v20se-highlight-detail-1-img1-lg-x2.jpg");
  }
}

@media (max-width:1300px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    background-image: url("../img/v20se-highlight-detail-1-img1-lg.jpg");
    background-size: 1344px 756px;
    background-position: center;
    background-repeat: no-repeat;
    width: 1344px;
    height: 756px;
  }
}

@media only screen and (max-width:1300px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1300px) and (min-resolution:1.5dppx),(max-width:1300px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1300px) and (min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    background-image: url("../img/v20se-highlight-detail-1-img1-lg-x2.jpg");
  }
}

@media (min-width:1921px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    background-image: url("../img/v20se-highlight-detail-1-img1-xl.jpg");
    background-size: 2560px 1300px;
    background-position: center;
    background-repeat: no-repeat;
    width: 2560px;
    height: 1300px;
  }
}

@media only screen and (min-width:1921px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-width:1921px) and (min-resolution:1.5dppx),(min-width:1921px) and (-webkit-min-device-pixel-ratio:1.5),(min-width:1921px) and (min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    background-image: url("../img/v20se-highlight-detail-1-img1-xl-x2.jpg");
  }
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    background-image: url("../img/v20se-highlight-detail-1-img1-mb.jpg");
    background-size: 375px 620px;
    background-position: center;
    background-repeat: no-repeat;
    width: 375px;
    height: 620px;
  }
}

@media only screen and (max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1080px) and (min-resolution:1.5dppx),(max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1080px) and (min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    background-image: url("../img/v20se-highlight-detail-1-img1-mb-x2.jpg");
  }
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f1 {
    margin-left: 0;
    background-size: 100vw 165.33333vw;
    width: 100vw;
    height: 165.33333vw;
  }
}

.gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
  top: 400px;
  left: 1150px;
  background-image: url("../img/v20se-highlight-detail-1-img2-lg.png");
  background-size: 451px 120px;
  background-position: center;
  background-repeat: no-repeat;
  width: 451px;
  height: 120px;
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    background-image: url("../img/v20se-highlight-detail-1-img2-lg-x2.png");
  }
}

@media (max-width:1300px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    background-image: url("../img/v20se-highlight-detail-1-img2-lg.png");
    background-size: 315px 84px;
    background-position: center;
    background-repeat: no-repeat;
    width: 315px;
    height: 84px;
    top: 300px;
    left: 780px;
  }
}

@media only screen and (max-width:1300px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1300px) and (min-resolution:1.5dppx),(max-width:1300px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1300px) and (min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    background-image: url("../img/v20se-highlight-detail-1-img2-lg-x2.png");
  }
}

@media (min-width:1921px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    background-image: url("../img/v20se-highlight-detail-1-img2-xl.png");
    background-size: 552px 147px;
    background-position: center;
    background-repeat: no-repeat;
    width: 552px;
    height: 147px;
    top: 500px;
    left: 1440px;
  }
}

@media only screen and (min-width:1921px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-width:1921px) and (min-resolution:1.5dppx),(min-width:1921px) and (-webkit-min-device-pixel-ratio:1.5),(min-width:1921px) and (min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    background-image: url("../img/v20se-highlight-detail-1-img2-xl-x2.png");
  }
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    background-image: url("../img/v20se-highlight-detail-1-img2-mb.png");
    background-size: 293px 78px;
    background-position: center;
    background-repeat: no-repeat;
    width: 293px;
    height: 78px;
  }
}

@media only screen and (max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1080px) and (min-resolution:1.5dppx),(max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1080px) and (min-resolution:144dpi) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    background-image: url("../img/v20se-highlight-detail-1-img2-mb-x2.png");
  }
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-highlight-detail-1 .figure-box .figure figure.f2 {
    left: 50%;
    margin-left: -39.06667vw;
    top: 80px;
    background-size: 78.13333vw 20.8vw;
    width: 78.13333vw;
    height: 20.8vw;
  }
}

.gb-lang-vn .v20se-design-detail-2 .section4 {
  top: 40%;
}

@media (min-width:1921px) {
  .gb-lang-vn .v20se-design-detail-2 .section4 {
    top: 48%;
  }
}

.gb-lang-vn .v20se-camera-detail-7 .svg-box {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transform-origin: 52.1% 45.2%;
  -ms-transform-origin: 52.1% 45.2%;
  transform-origin: 52.1% 45.2%;
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-camera-detail-7 .svg-box {
    -webkit-transform-origin: 53.5% 48%;
    -ms-transform-origin: 53.5% 48%;
    transform-origin: 53.5% 48%;
  }
}

.gb-lang-vn .v20se-camera-detail-7 .svg-box img {
  width: 2000px;
}

@media (min-width:1921px) {
  .gb-lang-vn .v20se-camera-detail-7 .svg-box img {
    width: 2600px;
  }
}

@media (max-width:1080px) {
  .gb-lang-vn .v20se-camera-detail-7 .svg-box img {
    width: 101vw;
    height: auto;
  }
}

.gb-lang-vn .v20se-camera-detail-10 .figure-box .figure .button-box .button {
  font-family: Avenir-Next-Medium;
}