/**
 * Powered by uimix.com;
 * Vivo product project - 产品库页面开发框架;
 * Version: 3.10.5;
 * Released on: 2021-09-29;
 */

@charset "UTF-8";

.hide {
  display: none;
}

@media (max-width:720px) {
  .gb-lang-np .y11-kv .bg:before {
    background-image: url("../img/y11-kv-bg-mb.jpg");
    background-size: 525px 560px;
    background-position: center;
    background-repeat: no-repeat;
    width: 525px;
    height: 560px;
    left: 50%;
    margin-left: -262px;
  }
}

@media only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:720px) and (min-resolution:1.5dppx),(max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:720px) and (min-resolution:144dpi) {
  .gb-lang-np .y11-kv .bg:before {
    background-image: url("../img/y11-kv-bg-mb-x2.jpg");
  }
}

.gb-lang-np .y11-kv .figure {
  position: absolute;
  z-index: 1;
  overflow: visible;
  width: 539px;
  height: 126px;
  left: 50%;
  margin-left: -269px;
  margin-left: -653px;
  margin-top: -7px;
  top: 342px;
}

@media (min-width:1921px) {
  .gb-lang-np .y11-kv .figure {
    width: 710px;
    height: 166px;
    margin-left: -355px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-kv .figure {
    width: 426px;
    height: 99px;
    margin-left: -213px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-kv .figure {
    width: 298px;
    height: 69px;
    margin-left: -149px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-kv .figure {
    width: 284px;
    height: 66px;
    margin-left: -142px;
  }
}

@media (min-width:1921px) {
  .gb-lang-np .y11-kv .figure {
    margin-left: -860px;
    margin-top: -10px;
    top: 450px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-kv .figure {
    margin-left: -516px;
    margin-top: -6px;
    top: 270px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-kv .figure {
    margin-left: -361px;
    margin-top: -4px;
    top: 189px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-kv .figure {
    margin-left: -344px;
    margin-top: -4px;
    top: 180px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-kv .figure {
    margin-top: 50px;
    margin-left: -144px;
    margin-bottom: 150px;
    top: 50px;
  }
}

.gb-lang-np .y11-kv .figure figure {
  position: absolute;
}

.gb-lang-np .y11-kv .figure figure.f1 {
  background-image: url("../img/y11-kv-title.png");
  background-size: 539px 126px;
  width: 539px;
  height: 126px;
  background-position: center;
  background-repeat: no-repeat;
}

@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-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-x2.png");
  }
}

@media (min-width:1921px) {
  .gb-lang-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-lg.png");
    background-size: 710px 166px;
    width: 710px;
    height: 166px;
  }
}

@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-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-lg-x2.png");
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-md.png");
    background-size: 426px 99px;
    width: 426px;
    height: 99px;
  }
}

@media only screen and (max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1440px) and (min-resolution:1.5dppx),(max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1440px) and (min-resolution:144dpi) {
  .gb-lang-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-md-x2.png");
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-sm.png");
    background-size: 298px 69px;
    width: 298px;
    height: 69px;
  }
}

@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-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-sm-x2.png");
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-sm.png");
    background-size: 284px 66px;
    background-position: center;
    background-repeat: no-repeat;
    width: 284px;
    height: 66px;
    left: 50%;
    margin-left: -142px;
    top: 0;
  }
}

@media only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:720px) and (min-resolution:1.5dppx),(max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:720px) and (min-resolution:144dpi) {
  .gb-lang-np .y11-kv .figure figure.f1 {
    background-image: url("../img/y11-kv-title-sm-x2.png");
  }
}

.gb-lang-np .y11-unlocking {
  background-color: #f1fbff;
}

.gb-lang-np .y11-unlocking .section {
  position: relative;
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .section {
    z-index: 1;
    position: relative;
  }
}

.gb-lang-np .y11-unlocking .section .content {
  width: 1000px;
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .section .content {
    width: 1200px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .section .content {
    width: 800px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .section .content {
    width: 580px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .section .content {
    width: auto;
  }
}

.gb-lang-np .y11-unlocking .section .title {
  padding-top: 92px;
  margin-left: 0;
  width: 1000px;
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .section .title {
    padding-top: 120px;
    margin-left: 0;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .section .title {
    padding-top: 72px;
    margin-left: 0;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .section .title {
    padding-top: 51px;
    margin-left: 0;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .section .title {
    padding-top: 48px;
    margin-left: 0;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .section .title {
    padding-top: 48px;
  }
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .section .title {
    width: 1200px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .section .title {
    width: 800px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .section .title {
    width: 580px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .section .title {
    width: auto;
  }
}

.gb-lang-np .y11-unlocking .section .title h2 {
  text-align: left;
}

.gb-lang-np .y11-unlocking .section .title p.intro {
  text-align: left;
  width: 1000px;
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .section .title p.intro {
    width: 1200px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .section .title p.intro {
    width: 800px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .section .title p.intro {
    width: 580px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .section .title p.intro {
    width: auto;
  }
}

.gb-lang-np .y11-unlocking .figure {
  position: relative;
  z-index: 1;
  overflow: visible;
  width: 538px;
  height: 655px;
  left: 50%;
  margin-left: -269px;
  margin-top: 114px;
  margin-left: 0;
  bottom: 0;
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .figure {
    width: 708px;
    height: 863px;
    margin-left: -354px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .figure {
    width: 424px;
    height: 517px;
    margin-left: -212px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .figure {
    width: 297px;
    height: 362px;
    margin-left: -148px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure {
    width: 212px;
    height: 258px;
    margin-left: -106px;
  }
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .figure {
    margin-top: 150px;
    margin-left: 0;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .figure {
    margin-top: 90px;
    margin-left: 0;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .figure {
    margin-top: 63px;
    margin-left: 0;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure {
    margin-top: 60px;
    margin-left: 0;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure {
    margin-top: 50px;
    margin-left: -106px;
  }
}

.gb-lang-np .y11-unlocking .figure figure {
  position: absolute;
}

.gb-lang-np .y11-unlocking .figure figure.f1 {
  z-index: 3;
  left: -85%;
  background-image: url("../img/y11-unlocking-img1.png");
  background-size: 538px 655px;
  width: 538px;
  height: 655px;
  background-position: center;
  background-repeat: no-repeat;
}

@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-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-x2.png");
  }
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-lg.png");
    background-size: 708px 863px;
    width: 708px;
    height: 863px;
  }
}

@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-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-lg-x2.png");
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-md.png");
    background-size: 424px 517px;
    width: 424px;
    height: 517px;
  }
}

@media only screen and (max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1440px) and (min-resolution:1.5dppx),(max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1440px) and (min-resolution:144dpi) {
  .gb-lang-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-md-x2.png");
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-sm.png");
    background-size: 297px 362px;
    width: 297px;
    height: 362px;
  }
}

@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-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-sm-x2.png");
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-sm.png");
    background-size: 212px 258px;
    background-position: center;
    background-repeat: no-repeat;
    width: 212px;
    height: 258px;
    left: 43%;
  }
}

@media only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:720px) and (min-resolution:1.5dppx),(max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:720px) and (min-resolution:144dpi) {
  .gb-lang-np .y11-unlocking .figure figure.f1 {
    background-image: url("../img/y11-unlocking-img1-sm-x2.png");
  }
}

.gb-lang-np .y11-unlocking .figure figure.f2 {
  top: auto;
  left: -14%;
  margin-left: 0;
  bottom: 0;
  background-image: url("../img/y11-unlocking-img2.png");
  background-size: 532px 654px;
  width: 532px;
  height: 654px;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    margin-left: 0;
    bottom: 0;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    margin-left: 0;
    bottom: 0;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    margin-left: 0;
    bottom: 0;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    margin-left: 0;
    bottom: 0;
  }
}

@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-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-x2.png");
  }
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-lg.png");
    background-size: 700px 861px;
    width: 700px;
    height: 861px;
  }
}

@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-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-lg-x2.png");
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-md.png");
    background-size: 420px 516px;
    width: 420px;
    height: 516px;
  }
}

@media only screen and (max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:1440px) and (min-resolution:1.5dppx),(max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:1440px) and (min-resolution:144dpi) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-md-x2.png");
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-sm.png");
    background-size: 294px 361px;
    width: 294px;
    height: 361px;
  }
}

@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-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-sm-x2.png");
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-sm.png");
    background-size: 210px 258px;
    background-position: center;
    background-repeat: no-repeat;
    width: 210px;
    height: 258px;
    left: 36%;
  }
}

@media only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),only screen and (max-width:720px) and (min-resolution:1.5dppx),(max-width:720px) and (-webkit-min-device-pixel-ratio:1.5),(max-width:720px) and (min-resolution:144dpi) {
  .gb-lang-np .y11-unlocking .figure figure.f2 {
    background-image: url("../img/y11-unlocking-img2-sm-x2.png");
  }
}

.gb-lang-np .y11-unlocking .figure .circle-line {
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  margin-left: -40px;
  left: 190px;
  top: 228px;
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    width: 106px;
    height: 106px;
    margin-left: -53px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    width: 63px;
    height: 63px;
    margin-left: -31px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    width: 44px;
    height: 44px;
    margin-left: -22px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    width: 28px;
    height: 28px;
    margin-left: -14px;
  }
}

@media (min-width:1921px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    left: 250px;
    top: 300px;
  }
}

@media (max-width:1440px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    left: 150px;
    top: 180px;
  }
}

@media (max-width:1080px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    left: 105px;
    top: 126px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    left: 100px;
    top: 120px;
  }
}

@media (max-width:720px) {
  .gb-lang-np .y11-unlocking .figure .circle-line {
    left: 180px;
    top: 90px;
  }
}

.gb-lang-np .y11-unlocking .figure .circle-line i {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-box-shadow: inset 0 0 50px #00eaff;
  box-shadow: inset 0 0 50px #00eaff;
  border: 2px solid #00eaff;
  border-radius: 50%;
}

.gb-lang-np .y11-unlocking .figure .circle-line i:nth-child(1) {
  -webkit-animation: unlocking-ant linear infinite 3s 0s;
  animation: unlocking-ant linear infinite 3s 0s;
}

.gb-lang-np .y11-unlocking .figure .circle-line i:nth-child(2) {
  -webkit-animation: unlocking-ant linear infinite 3s 1s;
  animation: unlocking-ant linear infinite 3s 1s;
}

.gb-lang-np .y11-unlocking .figure .circle-line i:nth-child(3) {
  -webkit-animation: unlocking-ant linear infinite 3s 2s;
  animation: unlocking-ant linear infinite 3s 2s;
}