/**
 * Powered by ;
 * vivo-product-2023 - ;
 * Version: 1.47.9;
 * Released on: 2026-04-08;
 */

@charset "UTF-8";

.hide {
  display: none;
}

.gb-lang-id .y31d-kv .umx-figure-box {
  width: 100vw;
  height: 47.91667vw;
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-kv .umx-figure-box {
    width: 100vw;
    height: 181.33333vw;
  }
}

.gb-lang-id .y31d-os {
  height: 200vh;
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-os {
    height: auto;
  }
}

.gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure1 {
  width: 450px;
  height: 426px;
}

@media (max-width:1470px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure1 {
    width: 337.5px;
    height: 319.5px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure1 {
    width: 87.2vw;
    height: auto;
  }

  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure1 .f-box .umx-img-box {
    height: 80vw;
  }
}

.gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure3 {
  width: 450px;
  height: 360px;
}

@media (max-width:1470px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure3 {
    width: 337.5px;
    height: 270px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure3 {
    width: 87.2vw;
    height: 96vw;
  }

  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure3 .f-box .umx-img-box {
    height: 96vw;
  }
}

.gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure4 {
  width: 450px;
  height: 354px;
  margin-top: -83px;
}

@media (max-width:1470px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure4 {
    width: 337.5px;
    height: 265.5px;
    margin-top: -62.25px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure4 {
    width: 87.2vw;
    height: auto;
    margin-top: 0;
  }

  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure4 .f-box .umx-img-box {
    height: 64vw;
  }
}

.gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure6 {
  width: 450px;
  height: 420px;
  margin-top: -150px;
}

@media (max-width:1470px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure6 {
    width: 337.5px;
    height: 315px;
    margin-top: -112.5px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure6 {
    width: 87.2vw;
    height: 96vw;
    margin-top: 0;
  }

  .gb-lang-id .y31d-ksp .umx-figure-box .umx-figure.umx-figure6 .f-box .umx-img-box {
    height: 96vw;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-ksp .umx-order-mb-3 {
    -webkit-box-ordinal-group: 5!important;
    -ms-flex-order: 4!important;
    order: 4!important;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-ksp .umx-order-mb-4 {
    -webkit-box-ordinal-group: 4!important;
    -ms-flex-order: 3!important;
    order: 3!important;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-camera .umx-figure-box .line-box .umx-txt-box p {
    font-size: 12px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-ai .umx-txt-box p {
    font-size: 14px!important;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-color .umx-p-tips {
    line-height: 1.2;
    bottom: 6px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-camera .umx-figure-box .line-box .umx-txt-box.txt-box1 i {
    top: 32px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-camera .umx-figure-box .line-box .umx-txt-box.txt-box2 i {
    top: 20px;
  }
}

.gb-lang-id .y31d-battery-bottom-id .umx-main-title span {
  display: inline-block;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.gb-lang-id .y31d-cpu-top .umx-s1,
.gb-lang-id .y31d-water-top .umx-s1 {
  padding: 250px 0 140px 0;
  overflow: hidden;
}

@media (max-width:1600px) {
  .gb-lang-id .y31d-cpu-top .umx-s1,
  .gb-lang-id .y31d-water-top .umx-s1 {
    padding: 187.5px 0 105px 0;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-cpu-top .umx-s1,
  .gb-lang-id .y31d-water-top .umx-s1 {
    padding: 100px 0 100px 0;
  }
}

.gb-lang-id .y31d-cpu-top .umx-s1 .umx-title,
.gb-lang-id .y31d-water-top .umx-s1 .umx-title {
  text-align: center;
  width: 100%;
}

.gb-lang-id .y31d-cpu-top .umx-s1 .umx-title .umx-main-title,
.gb-lang-id .y31d-water-top .umx-s1 .umx-title .umx-main-title {
  margin-bottom: 0;
}

.gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
  display: block;
  background-image: url("../img/y31d-color-img1-lg.png");
  background-size: 1094px 492px;
  background-position: center;
  background-repeat: no-repeat;
  width: 1094px;
  height: 492px;
}

@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-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
    background-image: url("../img/y31d-color-img1-lg-x2.png");
  }
}

.webp .gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
  background-image: url("../img/y31d-color-img1-lg.png.webp");
}

@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) {
  .webp .gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
    background-image: url("../img/y31d-color-img1-lg-x2.png.webp");
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
    background-image: url("../img/y31d-color-img1-mb.png");
    background-size: 192px 427px;
    background-position: center;
    background-repeat: no-repeat;
    width: 192px;
    height: 427px;
  }
}

@media only screen and (max-width:1000px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1000px) and (min-resolution:1.5dppx),(max-width:1000px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1000px) and (min-resolution:144dpi) {
  .gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
    background-image: url("../img/y31d-color-img1-mb-x2.png");
  }
}

@media (max-width:1000px) {
  .webp .gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
    background-image: url("../img/y31d-color-img1-mb.png.webp");
  }
}

@media only screen and (max-width:1000px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1000px) and (min-resolution:1.5dppx),(max-width:1000px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1000px) and (min-resolution:144dpi) {
  .webp .gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
    background-image: url("../img/y31d-color-img1-mb-x2.png.webp");
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-color .umx-color-wrapper .swiper-wrapper .swiper-slide figure.umx-f1 {
    background-size: 46.08vw 102.48vw;
    width: 46.08vw;
    height: 102.48vw;
    display: block;
  }
}

.gb-lang-id .y31d-photo .umx-s1 {
  margin-top: 160px;
}

@media (min-width:1921px) {
  .gb-lang-id .y31d-photo .umx-s1 {
    margin-top: 213.44px;
  }
}

@media (max-width:1600px) {
  .gb-lang-id .y31d-photo .umx-s1 {
    margin-top: 120px;
  }
}

@media (max-width:1470px) {
  .gb-lang-id .y31d-photo .umx-s1 {
    margin-top: 160px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-photo .umx-s1 {
    margin-top: 0;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-wide .umx-figure-box {
    border-radius: 8px;
  }
}

@media (max-width:1000px) {
  .gb-lang-id .y31d-wide .umx-figure-box .umx-f1 {
    border-radius: 8px;
  }
}