@charset "UTF-8";
@media (-webkit-min-device-pixel-ratio:2) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    -o-transform: scaleY(0.5);
    transform: scaleY(0.5)
  }
}
@media (-webkit-min-device-pixel-ratio:3) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.3333);
    -moz-transform: scaleY(0.3333);
    -ms-transform: scaleY(0.3333);
    -o-transform: scaleY(0.3333);
    transform: scaleY(0.3333)
  }
}
@media (max-width:768px) {
  .banner-pc {
    /*display: none !important*/
  }
}
@media (min-width:769px) {
  .banner-wap {
    display: none !important
  }
}
.public.banner-wrap * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box
}
@media (-webkit-min-device-pixel-ratio:2) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    -o-transform: scaleY(0.5);
    transform: scaleY(0.5)
  }
}
@media (-webkit-min-device-pixel-ratio:3) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.3333);
    -moz-transform: scaleY(0.3333);
    -ms-transform: scaleY(0.3333);
    -o-transform: scaleY(0.3333);
    transform: scaleY(0.3333)
  }
}
@font-face {
  font-family: vivo-icons;
  src: url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_ee3e354.eot);
  src: url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_ee3e354.eot?#iefix) format("eot"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_dd4803c.woff2) format("woff2"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_f58f036.woff) format("woff"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_05a8c26.ttf) format("truetype"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_d76fe20.svg#vivo-icons) format("svg")
}
.home-source-package-container-big {
  font-size: 0;
  height: 47.8125vw;
  max-height: 1227px;
  position: relative
}
@media screen and (max-width:768px) {
  .home-source-package-container-big {
    height: 181.51042vw;
    max-height: none
  }
}
.home-banner-large {
  font-size: 0;
  height: 47.8125vw;
  max-height: 1227px;
  position: relative
}
.home-banner-large .banner-large-link {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0
}
.home-banner-large .banner-large-link .banner-large-bg {
  position: absolute;
  width: 100%;
  z-index: 0
}
.home-banner-large .banner-large-link .banner-large-bg img {
  width: 100%;
  position: relative
}
.home-banner-large .banner-large-content {
  position: relative;
  pointer-events: none;
  top: 45.7%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  color: #242933
}
.home-banner-large .banner-large-content .banner-large-product {
  display: inline-block;
  width: 530px;
  height: 50px;
  margin-bottom: 12px
}
.home-banner-large .banner-large-content .banner-large-product img {
  height: 100%
}
.home-banner-large .banner-large-content .banner-large-title {
  width: 530px;
  font-size: 32px;
  line-height: 36px;
  margin-bottom: 66px
}
.home-banner-large .banner-large-content .banner-large-links {
  pointer-events: auto;
  width: 530px
}
.home-banner-large .banner-large-content .banner-large-links a {
  display: inline-block;
  -webkit-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  color: #242933
}
.home-banner-large .banner-large-content .banner-large-links a span {
  display: inline-block;
  vertical-align: top;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  transition: all .5s cubic-bezier(0.33, 0, .67, 1)
}
.home-banner-large .banner-large-content .banner-large-links a i {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 28px;
  margin-left: 6px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border: solid 2px #242933;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  transition: all .5s cubic-bezier(0.33, 0, .67, 1)
}
.home-banner-large .banner-large-content .banner-large-links a i:before {
  font-family: vivo-icons !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\D003";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 1;
  font-size: 12px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -o-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -moz-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s
}
.home-banner-large .banner-large-content .banner-large-links a i:after {
  font-family: vivo-icons !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\D004";
  position: absolute;
  left: 60%;
  -webkit-transform: translateX(-60%);
  -moz-transform: translateX(-60%);
  -ms-transform: translateX(-60%);
  -o-transform: translateX(-60%);
  transform: translateX(-60%);
  opacity: 0;
  font-size: 12px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .83, 1);
  -o-transition: all .33s cubic-bezier(0.33, 0, .83, 1);
  -moz-transition: all .33s cubic-bezier(0.33, 0, .83, 1);
  transition: all .33s cubic-bezier(0.33, 0, .83, 1)
}
.home-banner-large .banner-large-content .banner-large-links a:hover {
  -webkit-transform: scaleX(1.04);
  -moz-transform: scaleX(1.04);
  -ms-transform: scaleX(1.04);
  -o-transform: scaleX(1.04);
  transform: scaleX(1.04)
}
.home-banner-large .banner-large-content .banner-large-links a:hover span {
  -webkit-transform: scaleX(1.04);
  -moz-transform: scaleX(1.04);
  -ms-transform: scaleX(1.04);
  -o-transform: scaleX(1.04);
  transform: scaleX(1.04);
  color: #415fff
}
.home-banner-large .banner-large-content .banner-large-links a:hover i {
  border-color: #415fff;
  -webkit-transform: scale(1.2) translateX(6px);
  -moz-transform: scale(1.2) translateX(6px);
  -ms-transform: scale(1.2) translateX(6px);
  -o-transform: scale(1.2) translateX(6px);
  transform: scale(1.2) translateX(6px)
}
.home-banner-large .banner-large-content .banner-large-links a:hover i:before {
  opacity: 0;
  color: #415fff;
  -webkit-transform: translateX(7px) scale(0.3);
  -moz-transform: translateX(7px) scale(0.3);
  -ms-transform: translateX(7px) scale(0.3);
  -o-transform: translateX(7px) scale(0.3);
  transform: translateX(7px) scale(0.3);
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .33s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .33s cubic-bezier(0.33, 0, .67, 1);
  transition: all .33s cubic-bezier(0.33, 0, .67, 1)
}
.home-banner-large .banner-large-content .banner-large-links a:hover i:after {
  opacity: 1;
  color: #415fff;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -o-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -moz-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s
}
@media screen and (max-width:1080px) {
  .home-banner-large .banner-large-content .banner-large-links a i::before {
    font-size: 10px;
    line-height: 1.75vw
  }
  .home-banner-large .banner-large-content .banner-large-links a i::after {
    font-size: 10px;
    line-height: 1.75vw
  }
}
.home-banner-large .banner-large-content .banner-large-links a span {
  font-size: 24px
}
.home-banner-large .banner-large-content .banner-large-links a span.no-flip-over {
  -webkit-transform-origin: unset;
  -moz-transform-origin: unset;
  -ms-transform-origin: unset;
  -o-transform-origin: unset;
  transform-origin: unset
}
.home-banner-large .banner-large-content .banner-large-links a i {
  width: 40px;
  height: 26px;
  border: solid 3px #242933
}
.home-banner-large .banner-large-content .banner-large-links a i::before {
  line-height: 26px
}
.home-banner-large .banner-large-content .banner-large-links a i::after {
  line-height: 26px
}
.home-banner-large .banner-large-content .banner-large-links a:nth-child(2) {
  margin-left: 38px
}
.home-banner-large .banner-large-content.white {
  color: #fff
}
.home-banner-large .banner-large-content.white .banner-large-links a span {
  color: #fff
}
.home-banner-large .banner-large-content.white .banner-large-links a i {
  border-color: #fff
}
.home-banner-large .banner-large-content.white .banner-large-links a i::before {
  color: #fff
}
.home-banner-large .banner-large-content.white .banner-large-links a:hover {
  color: #415fff
}
.home-banner-large .banner-large-content.white .banner-large-links a:hover span {
  color: #415fff
}
.home-banner-large .banner-large-content.white .banner-large-links a:hover i {
  border-color: #415fff
}
.home-banner-large .banner-large-content.white .banner-large-links a:hover i::before {
  color: #415fff
}
@-webkit-keyframes home-button-bottom {
  0%, 25%, 50%, 75% {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  6.25%, 31.25%, 56.25%, 81.25% {
    opacity: 1
  }
  12.5%, 24.99%, 37.5%, 49.99%, 62.5%, 74.99%, 87.5%, 99.99% {
    -webkit-transform: translateY(22px);
    transform: translateY(22px)
  }
  100% {
    opacity: 0
  }
}
@-moz-keyframes home-button-bottom {
  0%, 25%, 50%, 75% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0)
  }
  6.25%, 31.25%, 56.25%, 81.25% {
    opacity: 1
  }
  12.5%, 24.99%, 37.5%, 49.99%, 62.5%, 74.99%, 87.5%, 99.99% {
    -webkit-transform: translateY(22px);
    -moz-transform: translateY(22px);
    transform: translateY(22px)
  }
  100% {
    opacity: 0
  }
}
@-o-keyframes home-button-bottom {
  0%, 25%, 50%, 75% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  6.25%, 31.25%, 56.25%, 81.25% {
    opacity: 1
  }
  12.5%, 24.99%, 37.5%, 49.99%, 62.5%, 74.99%, 87.5%, 99.99% {
    -webkit-transform: translateY(22px);
    -o-transform: translateY(22px);
    transform: translateY(22px)
  }
  100% {
    opacity: 0
  }
}
@keyframes home-button-bottom {
  0%, 25%, 50%, 75% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  6.25%, 31.25%, 56.25%, 81.25% {
    opacity: 1
  }
  12.5%, 24.99%, 37.5%, 49.99%, 62.5%, 74.99%, 87.5%, 99.99% {
    -webkit-transform: translateY(22px);
    -moz-transform: translateY(22px);
    -o-transform: translateY(22px);
    transform: translateY(22px)
  }
  100% {
    opacity: 0
  }
}
.home-banner-large .home-button-wrap {
  position: absolute;
  line-height: 28px;
  font-size: 0;
  left: 50%;
  bottom: 72px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%)
}
.home-banner-large .home-button-wrap.text-dir-rtl {
  -webkit-transform: translateX(-50%) scaleX(-1) !important;
  -moz-transform: translateX(-50%) scaleX(-1) !important;
  -ms-transform: translateX(-50%) scaleX(-1) !important;
  -o-transform: translateX(-50%) scaleX(-1) !important;
  transform: translateX(-50%) scaleX(-1) !important
}
.home-banner-large .home-button-wrap .home-button-label {
  font-size: 24px;
  display: inline-block;
  margin-right: 12px;
  line-height: 28px;
  -webkit-animation: home-button-bottom;
  -moz-animation: home-button-bottom;
  -o-animation: home-button-bottom;
  animation: home-button-bottom;
  -webkit-animation-duration: 8s;
  -moz-animation-duration: 8s;
  -o-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}
.home-banner-large .home-button-wrap .home-button-label.white {
  color: #fff
}
.home-banner-large .home-button-wrap .home-button-bottom {
  display: inline-block;
  text-align: center;
  line-height: 28px;
  vertical-align: top;
  -webkit-animation: home-button-bottom;
  -moz-animation: home-button-bottom;
  -o-animation: home-button-bottom;
  animation: home-button-bottom;
  -webkit-animation-duration: 8s;
  -moz-animation-duration: 8s;
  -o-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out
}
.home-banner-large .home-button-wrap .home-button-bottom::after {
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  max-width: 20px;
  height: 26px;
  max-height: 26px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAMAAACAXYxPAAAA2FBMVEUAAAAAAAAAAAAAAAAAAFUAAEBAQEAzMzMrKyskJCQcHDkcOTkzMzMrKysnJycnJzsiIjMeLS0oKDYjLi4hLDcgKzUnJzEmJjkgKDAoKDAnJzYkKzEkKi8mKzEmKzQiKzMlKTEkKDUjJzMmKTUkKzIiKTQkKDIjKTMlKDIkKzQjKTUkJzIkKjIjKTQlKDIkKjQkKTQjKDIkKTIkKTMkKDQkKTIkKDMkKjQkKTMkKTIkKTMkKTMkKTMkKTMkKDMjKTMkKTMkKTMkKTMkKTMkKTMkKTMkKTP///+SAzPaAAAARnRSTlMAAQIDAwQEBQYHCQkKDA0NDxETFhcYGhsgICEqKy82PD4/QURHSk1QUlRXW1xeYGJjZmuanqKrsrrAzc7T2uPm5+vv9fj+y1Lx6QAAAAFiS0dER2C9yXsAAADuSURBVCjPZZLbUgJBEEMzqCuKAuoqF/GCq4C4CkG8ICIqkP//JB+Gqe3Ffpmuk+pUUjUo49+UMWwX8qjQHoK83bFsKyFBslPMWLFDEinJXimwUo9kitqAZL/iWaVPclADTh5JpscAcPRA8uk0txo5HNXr1mhtT5K8P8iC7N55ZsP5yKZGwwEA3DV54wu7BpbjyKutln+j8RLS27412nuVsJIm1YxVJ9IKc0nTOLB4KmmOZCFp1vSsOZO0SIDLH0nfFwBw/iXp9yq3GjkcdbvWCIg/tJ7PsyzI4btnNpyPvFkD2H6WXqLNH+BGIxf2P+dxL2DBsg7aAAAAAElFTkSuQmCC");
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%
}
.home-banner-large .home-button-wrap .home-button-bottom.white::after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAMAAABOmSgnAAAAk1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ROyVeAAAAMHRSTlMAZgVhCWP8Iw1cRxn4VvRPTC0dExHo4FlTQ0AxFvDWyb6woDo22XIf0baqjogo0Hm6R4ZaAAABb0lEQVQ4y42S63KCMBBGdxEEBOTmHUTFa6u2+/5P18yEGENi6PmTmc1JJpv94F/k+ZBR5YC4sTsb9JiEE8firJkAaLWcCQoJM+eDk6GUMHWNTopc8vi6Mljuiu95kCAnCfpO8NqCK3Ysg56zxI4rgO8hJ5y9O7MQOZ4PjEJYo1o6peIwopGwIoB+qTCW9GPmy6/yAcZn4lNrxdTw6aR/isBNsEcSGIegOtZxaiPXgiHIBiKGg2E1O5dLL/aMtVL6vcCYWuXYEfGoPKGlGIjooFhlqTjfTABifLkfWzmQkGgfmB13T1KiXWlyZjviUszXW6079Y3vxdAQ51z0neJMnAbSMXEWvur4C+KMU4BQWPP83cnnwgmBkcXE2Z6kUwknXnWjmBJn+prHcStKE2NJP6Zfrj1A8ny1MgJYaq1oDT8e+qcIooYE8ns16h/VaSLbOMXIrcHowmOPmCWGMqxdoC1WS4zWATt3ojsMUlVa6Q9RCEDlLxTvDAAAAABJRU5ErkJggg==")
}
@media screen and (max-width:1600px) {
  .home-banner-large .banner-large-content {
    width: 100%;
    margin: 0 80px
  }
  .home-banner-large .banner-large-content .banner-large-product {
    width: 33vw;
    height: 3.125vw;
    margin-bottom: 1vw
  }
  .home-banner-large .banner-large-content .banner-large-title {
    font-size: 2vw;
    line-height: 2.2vw;
    letter-spacing: 0vw;
    margin-bottom: 4vw;
    width: 33vw
  }
  .home-banner-large .banner-large-content .banner-large-links {
    width: 33vw
  }
  .home-banner-large .banner-large-content .banner-large-links a span {
    font-size: 1.5vw
  }
  .home-banner-large .banner-large-content .banner-large-links a i {
    width: 2.625vw;
    height: 1.75vw;
    margin-left: 8px
  }
  .home-banner-large .banner-large-content .banner-large-links a i:before {
    line-height: 1.75vw
  }
  .home-banner-large .banner-large-content .banner-large-links a i:after {
    line-height: 1.75vw
  }
  .home-banner-large .banner-large-content .banner-large-links a:hover i {
    -webkit-transform: scale(1.2) translateX(10%);
    -moz-transform: scale(1.2) translateX(10%);
    -ms-transform: scale(1.2) translateX(10%);
    -o-transform: scale(1.2) translateX(10%);
    transform: scale(1.2) translateX(10%)
  }
  .home-banner-large .banner-large-content .banner-large-links a:hover i:after {
    -webkit-transform: translateX(-20%);
    -moz-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%)
  }
  .home-banner-large .banner-large-content .banner-large-links a:nth-child(2) {
    margin-left: 2.375vw
  }
  .home-banner-large .home-button-wrap {
    bottom: 4.5vw
  }
  .home-banner-large .home-button-wrap .home-button-label {
    font-size: 1.5vw;
    margin-right: .75vw;
    line-height: 1.75vw
  }
  .home-banner-large .home-button-wrap .home-button-bottom {
    width: auto;
    line-height: 1.75vw
  }
  .home-banner-large .home-button-wrap .home-button-bottom::after {
    width: 1.25vw;
    height: 1.65vw
  }
}
@media screen and (max-width:1199px) {
  .home-banner-large .banner-large-content .banner-large-product {
    height: 3vw;
    margin-bottom: 1vw
  }
  .home-banner-large .banner-large-content .banner-large-title {
    font-size: 2vw;
    line-height: 2vw;
    margin-bottom: 4vw
  }
  .home-banner-large .banner-large-content .banner-large-links a i {
    border-width: 2px
  }
  .home-banner-large .banner-large-content .banner-large-links a i:before {
    font-size: 1vw;
    -webkit-transform: translateX(-50%) scale(0.7);
    -moz-transform: translateX(-50%) scale(0.7);
    -ms-transform: translateX(-50%) scale(0.7);
    -o-transform: translateX(-50%) scale(0.7);
    transform: translateX(-50%) scale(0.7)
  }
  .home-banner-large .home-button-wrap .home-button-label {
    font-size: 1.5vw;
    line-height: 1.75vw
  }
  .home-banner-large .home-button-wrap .home-button-bottom {
    width: auto;
    line-height: 1.75vw
  }
  .home-banner-large .home-button-wrap .home-button-bottom::after {
    width: 1.25vw;
    height: 1.65vw
  }
}
@media screen and (max-width:768px) {
  .home-source-big-banner {
    height: 181.51042vw;
    max-height: none
  }
  .home-banner-large {
    height: 181.51042vw;
    max-height: none
  }
  .home-banner-large .banner-large-link .banner-large-bg {
    width: 100%
  }
  .home-banner-large .banner-large-content {
    top: -webkit-calc(7vw + 60px);
    top: -moz-calc(7vw + 60px);
    top: calc(7vw + 60px);
    width: 88vw;
    margin: 0 auto;
    text-align: center;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  .home-banner-large .banner-large-content .banner-large-product {
    height: 5.55556vw;
    margin-bottom: 3.33333vw;
    width: unset
  }
  .home-banner-large .banner-large-content .banner-large-title {
    font-size: 5vw;
    width: 100%;
    line-height: 5vw;
    letter-spacing: 0vw;
    margin-bottom: 7.22222vw;
    text-align: center
  }
  .home-banner-large .banner-large-content .banner-large-links {
    font-size: 3vw;
    line-height: 3vw;
    letter-spacing: 0vw;
    width: unset
  }
  .home-banner-large .banner-large-content .banner-large-links a {
    line-height: 3.125vw
  }
  .home-banner-large .banner-large-content .banner-large-links a span {
    font-size: 3.125vw;
    vertical-align: middle
  }
  .home-banner-large .banner-large-content .banner-large-links a i {
    width: 6.398vw;
    height: 4.44vw;
    margin-left: .833vw;
    border: solid 2px #242933;
    vertical-align: middle;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px
  }
  .home-banner-large .banner-large-content .banner-large-links a i:before {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    line-height: 4.7vw;
    font-size: 8px;
    left: 52%;
    -webkit-transition: unset;
    -o-transition: unset;
    -moz-transition: unset;
    transition: unset
  }
  .home-banner-large .banner-large-content .banner-large-links a i::after {
    content: none
  }
  .home-banner-large .banner-large-content .banner-large-links a:hover span {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    color: #242933
  }
  .home-banner-large .banner-large-content .banner-large-links a:hover i {
    border-color: #242933;
    -webkit-transform: scale(1) translateX(0);
    -moz-transform: scale(1) translateX(0);
    -ms-transform: scale(1) translateX(0);
    -o-transform: scale(1) translateX(0);
    transform: scale(1) translateX(0)
  }
  .home-banner-large .banner-large-content .banner-large-links a:hover i:before {
    opacity: 1;
    color: #242933;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: unset;
    -o-transition: unset;
    -moz-transition: unset;
    transition: unset
  }
  .home-banner-large .banner-large-content .banner-large-links a:hover i:after {
    content: none
  }
  .home-banner-large .banner-large-content .banner-large-links a:nth-child(2) {
    margin-left: 4.44vw
  }
  .home-banner-large .banner-large-content.white .banner-large-links a i:before {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: unset;
    -o-transition: unset;
    -moz-transition: unset;
    transition: unset
  }
  .home-banner-large .banner-large-content.white .banner-large-links a i::after {
    content: none
  }
  .home-banner-large .banner-large-content.white .banner-large-links a:hover span {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    color: #fff
  }
  .home-banner-large .banner-large-content.white .banner-large-links a:hover i {
    -webkit-transform: scale(1) translateX(0);
    -moz-transform: scale(1) translateX(0);
    -ms-transform: scale(1) translateX(0);
    -o-transform: scale(1) translateX(0);
    transform: scale(1) translateX(0);
    border-color: #fff
  }
  .home-banner-large .banner-large-content.white .banner-large-links a:hover i:before {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: unset;
    -o-transition: unset;
    -moz-transition: unset;
    transition: unset;
    color: #fff
  }
  .home-banner-large .banner-large-content.white .banner-large-links a:hover i:after {
    content: none
  }
  .home-banner-large .home-button-wrap {
    position: absolute;
    line-height: 7vw;
    font-size: 0;
    top: 79vh;
    bottom: unset
  }
  .home-banner-large .home-button-wrap .home-button-label {
    font-size: 4.4vw;
    margin-right: 1.8vw;
    line-height: 4.4vw
  }
  .home-banner-large .home-button-wrap .home-button-bottom::after {
    width: 3.6vw;
    height: 4.4vw;
    margin-top: .4vw
  }
}
@media (-webkit-min-device-pixel-ratio:2) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    -o-transform: scaleY(0.5);
    transform: scaleY(0.5)
  }
}
@media (-webkit-min-device-pixel-ratio:3) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.3333);
    -moz-transform: scaleY(0.3333);
    -ms-transform: scaleY(0.3333);
    -o-transform: scaleY(0.3333);
    transform: scaleY(0.3333)
  }
}
@font-face {
  font-family: vivo-icons;
  src: url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_ee3e354.eot);
  src: url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_ee3e354.eot?#iefix) format("eot"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_dd4803c.woff2) format("woff2"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_f58f036.woff) format("woff"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_05a8c26.ttf) format("truetype"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_d76fe20.svg#vivo-icons) format("svg")
}
.home-source-package-container-mid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  position: relative
}
@media screen and (max-width:1199px) {
  .home-source-package-container-mid {
    padding: 60px 40px 40px
  }
}
@media screen and (max-width:768px) {
  .home-source-package-container-mid {
    padding: 8.33333vw 5.55556vw
  }
}
.bannner-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  position: relative
}
.bannner-container .banner-mid-wraper {
  width: 100%
}
.bannner-container .banner-mid-wraper .banner-mid-title {
  font-size: 40px;
  color: #242933
}
.bannner-container .banner-mid-wraper .banner-mid-box {
  position: relative;
  width: 100%;
  height: 640px;
  margin-top: 40px;
  background-color: #e9edf5;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  overflow: hidden
}
.bannner-container .banner-mid-wraper .banner-mid-box:hover .banner-mid-img {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
  transform: scale(1.04)
}
.bannner-container .banner-mid-wraper .banner-mid-box.banner-mid-box-right {
  text-align: right
}
.bannner-container .banner-mid-wraper .banner-mid-box.banner-mid-box-right .banner-mid-content {
  margin-right: 180px;
  margin-left: 0
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 0;
  -webkit-transition: -webkit-transform ease-in .5s;
  transition: -webkit-transform ease-in .5s;
  -o-transition: -o-transform ease-in .5s;
  -moz-transition: transform ease-in .5s, -moz-transform ease-in .5s;
  transition: transform ease-in .5s;
  transition: transform ease-in .5s, -webkit-transform ease-in .5s, -moz-transform ease-in .5s, -o-transform ease-in .5s;
  transition: transform ease-in .5s, -webkit-transform ease-in .5s
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-img a {
  display: unset
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-img img {
  width: 100%;
  height: 100%
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content-box {
  height: 100%;
  display: inline-block;
  width: auto;
  text-align: left;
  vertical-align: top
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content {
  height: 100%;
  margin-left: 180px;
  opacity: 0;
  color: #242933;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-direction: column;
  flex-direction: column;
  pointer-events: none
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content.white {
  color: #fff
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content.white .mid-btn a {
  color: #fff
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content.white .mid-btn a i {
  border-color: #fff
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-name {
  height: 32px;
  margin-bottom: 12px
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-name img {
  display: inline-block;
  height: 100%;
  max-width: 450px
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-title {
  font-size: 28px;
  line-height: 32px;
  max-width: 450px
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-title.text-dir-rtl span {
  text-align: right
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn {
  margin-top: 50px;
  font-size: 20px;
  pointer-events: auto
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a {
  display: inline-block;
  -webkit-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  color: #242933
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a span {
  display: inline-block;
  vertical-align: top;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  transition: all .5s cubic-bezier(0.33, 0, .67, 1)
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 28px;
  margin-left: 6px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border: solid 2px #242933;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .5s cubic-bezier(0.33, 0, .67, 1);
  transition: all .5s cubic-bezier(0.33, 0, .67, 1)
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:before {
  font-family: vivo-icons !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\D003";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 1;
  font-size: 12px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -o-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -moz-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:after {
  font-family: vivo-icons !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\D004";
  position: absolute;
  left: 60%;
  -webkit-transform: translateX(-60%);
  -moz-transform: translateX(-60%);
  -ms-transform: translateX(-60%);
  -o-transform: translateX(-60%);
  transform: translateX(-60%);
  opacity: 0;
  font-size: 12px;
  line-height: 24px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .83, 1);
  -o-transition: all .33s cubic-bezier(0.33, 0, .83, 1);
  -moz-transition: all .33s cubic-bezier(0.33, 0, .83, 1);
  transition: all .33s cubic-bezier(0.33, 0, .83, 1)
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover {
  -webkit-transform: scaleX(1.04);
  -moz-transform: scaleX(1.04);
  -ms-transform: scaleX(1.04);
  -o-transform: scaleX(1.04);
  transform: scaleX(1.04)
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover span {
  -webkit-transform: scaleX(1.04);
  -moz-transform: scaleX(1.04);
  -ms-transform: scaleX(1.04);
  -o-transform: scaleX(1.04);
  transform: scaleX(1.04);
  color: #415fff
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i {
  border-color: #415fff;
  -webkit-transform: scale(1.2) translateX(6px);
  -moz-transform: scale(1.2) translateX(6px);
  -ms-transform: scale(1.2) translateX(6px);
  -o-transform: scale(1.2) translateX(6px);
  transform: scale(1.2) translateX(6px)
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i:before {
  opacity: 0;
  color: #415fff;
  -webkit-transform: translateX(7px) scale(0.3);
  -moz-transform: translateX(7px) scale(0.3);
  -ms-transform: translateX(7px) scale(0.3);
  -o-transform: translateX(7px) scale(0.3);
  transform: translateX(7px) scale(0.3);
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .67, 1);
  -o-transition: all .33s cubic-bezier(0.33, 0, .67, 1);
  -moz-transition: all .33s cubic-bezier(0.33, 0, .67, 1);
  transition: all .33s cubic-bezier(0.33, 0, .67, 1)
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i:after {
  opacity: 1;
  color: #415fff;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -o-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  -moz-transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s;
  transition: all .33s cubic-bezier(0.33, 0, .67, 1) .17s
}
@media screen and (max-width:1080px) {
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i::before {
    font-size: 10px;
    line-height: 1.75vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i::after {
    font-size: 10px;
    line-height: 1.75vw
  }
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:before {
  font-size: 10px
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i::after {
  font-size: 10px
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a span.no-flip-over {
  -webkit-transform-origin: unset;
  -moz-transform-origin: unset;
  -ms-transform-origin: unset;
  -o-transform-origin: unset;
  transform-origin: unset
}
.bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:nth-child(1) {
  margin-right: 32px
}
.bannner-container .banner-mid-wraper div:first-child .banner-mid-box {
  margin-top: 0
}
@media screen and (max-width:1600px) {
  .bannner-container .banner-mid-wraper .banner-mid-box {
    height: 38.583vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box.banner-mid-box-right .banner-mid-content {
    margin-right: 10.833vw;
    margin-left: 0
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content {
    margin-left: 10.833vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-name {
    height: 2vw;
    margin-bottom: 1vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-name img {
    max-width: 33.75vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-title {
    max-width: 27vw;
    font-size: 1.75vw;
    line-height: 1.3
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn {
    margin-top: 2.833vw;
    font-size: 1.5vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a span {
    font-size: 1.25vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i {
    width: 2.5vw;
    height: 1.75vw;
    border: solid 2px #242933
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:before {
    line-height: 1.5vw;
    -webkit-transform: translateX(-45%) scale(0.8);
    -moz-transform: translateX(-45%) scale(0.8);
    -ms-transform: translateX(-45%) scale(0.8);
    -o-transform: translateX(-45%) scale(0.8);
    transform: translateX(-45%) scale(0.8)
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:after {
    line-height: 1.5vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i {
    -webkit-transform: scale(1.2) translateX(10%);
    -moz-transform: scale(1.2) translateX(10%);
    -ms-transform: scale(1.2) translateX(10%);
    -o-transform: scale(1.2) translateX(10%);
    transform: scale(1.2) translateX(10%)
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i:before {
    -webkit-transform: translateX(-55%);
    -moz-transform: translateX(-55%);
    -ms-transform: translateX(-55%);
    -o-transform: translateX(-55%);
    transform: translateX(-55%)
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i:after {
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    -ms-transform: translateX(-30%);
    -o-transform: translateX(-30%);
    transform: translateX(-30%)
  }
}
@media screen and (max-width:1199px) {
  .bannner-container {
    padding: 60px 40px 40px
  }
  .bannner-container .banner-mid-wraper .banner-mid-box {
    height: 41.204vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box.banner-mid-box-right .banner-mid-content {
    margin-right: 11.574vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content {
    margin-left: 11.574vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-name {
    height: 1.8vw;
    margin-bottom: .5vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-title {
    font-size: 1.7vw;
    line-height: 1.8vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn {
    margin-top: 3.148vw;
    font-size: 1.5vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a span {
    font-size: 1.5vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:before {
    font-size: 2.4vw;
    -webkit-transform: translateX(-50%) scale(0.3);
    -moz-transform: translateX(-50%) scale(0.3);
    -ms-transform: translateX(-50%) scale(0.3);
    -o-transform: translateX(-50%) scale(0.3);
    transform: translateX(-50%) scale(0.3)
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:after {
    font-size: 2.4vw;
    -webkit-transform: translateX(-30%) scale(0.3);
    -moz-transform: translateX(-30%) scale(0.3);
    -ms-transform: translateX(-30%) scale(0.3);
    -o-transform: translateX(-30%) scale(0.3);
    transform: translateX(-30%) scale(0.3)
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn:hover i:before {
    font-size: 2.4vw;
    -webkit-transform: translateX(-50%) scale(0.3) !important;
    -moz-transform: translateX(-50%) scale(0.3) !important;
    -ms-transform: translateX(-50%) scale(0.3) !important;
    -o-transform: translateX(-50%) scale(0.3) !important;
    transform: translateX(-50%) scale(0.3) !important
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn:hover i:after {
    font-size: 2.4vw;
    -webkit-transform: translateX(-40%) scale(0.3) !important;
    -moz-transform: translateX(-40%) scale(0.3) !important;
    -ms-transform: translateX(-40%) scale(0.3) !important;
    -o-transform: translateX(-40%) scale(0.3) !important;
    transform: translateX(-40%) scale(0.3) !important
  }
}
@media screen and (max-width:768px) {
  .bannner-container {
    padding: 8.33333vw 20px
  }
  .bannner-container .banner-mid-wraper .banner-mid-title {
    font-size: 6.66667vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box {
    height: 116.66667vw;
    margin-top: 5.55556vw;
    -webkit-border-radius: 3.33333vw;
    -moz-border-radius: 3.33333vw;
    border-radius: 3.33333vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content {
    display: block;
    position: absolute;
    width: 116.66667vw;
    left: 10.55556vw;
    top: 10.83333vw;
    margin-left: 0
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-name {
    height: 5vw;
    margin-bottom: 2.5vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-name img {
    max-width: 67.77778vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-title {
    font-size: 4.44444vw;
    line-height: 1.2;
    max-width: 67.77778vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn {
    margin-top: 5.55556vw;
    max-width: 67.77778vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a, .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a span, .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover span {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    font-size: 3.88889vw;
    line-height: -webkit-calc(4.44444vw + 6px);
    line-height: -moz-calc(4.44444vw + 6px);
    line-height: calc(4.44444vw + 6px)
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:nth-child(1), .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover:nth-child(1) {
    margin-right: 5.55556vw
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a span.no-flip-over {
    -webkit-transform-origin: unset;
    -moz-transform-origin: unset;
    -ms-transform-origin: unset;
    -o-transform-origin: unset;
    transform-origin: unset
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i {
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover, .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover span, .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i:before {
    color: inherit
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i {
    border-color: inherit
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i, .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    display: inline-block;
    width: 6.38889vw;
    height: 4.44444vw;
    margin-left: 1.11111vw;
    text-align: center;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i:before, .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:before {
    line-height: 4.72222vw;
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(0.6);
    -moz-transform: translateX(-50%) scale(0.6);
    -ms-transform: translateX(-50%) scale(0.6);
    -o-transform: translateX(-50%) scale(0.6);
    transform: translateX(-50%) scale(0.6)
  }
  .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a:hover i:after, .bannner-container .banner-mid-wraper .banner-mid-box .banner-mid-content .mid-btn a i:after {
    display: none
  }
}
@media (-webkit-min-device-pixel-ratio:2) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    -o-transform: scaleY(0.5);
    transform: scaleY(0.5)
  }
}
@media (-webkit-min-device-pixel-ratio:3) {
  .border-rpx:after {
    -webkit-transform: scaleY(0.3333);
    -moz-transform: scaleY(0.3333);
    -ms-transform: scaleY(0.3333);
    -o-transform: scaleY(0.3333);
    transform: scaleY(0.3333)
  }
}
@font-face {
  font-family: vivo-icons;
  src: url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_ee3e354.eot);
  src: url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_ee3e354.eot?#iefix) format("eot"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_dd4803c.woff2) format("woff2"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_f58f036.woff) format("woff"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_05a8c26.ttf) format("truetype"), url(//asia-exstatic.vivo.com/static/font/icon-font/dist/vivo-icons_d76fe20.svg#vivo-icons) format("svg")
}
.home-source-package-container-sm {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  position: relative
}
@media screen and (max-width:1199px) {
  .home-source-package-container-sm {
    padding: 60px 40px 40px
  }
}
@media screen and (max-width:768px) {
  .home-source-package-container-sm {
    padding: 8.33333vw 5.55556vw
  }
}
.sm-banner-container {
  background: #fafafa
}
.bannner-container .banner-sm-wraper {
  width: 100%
}
.bannner-container .banner-sm-wraper .banner-sm-title {
  font-size: 40px;
  color: #242933;
  margin-bottom: 40px
}
.bannner-container .banner-sm-wraper .banner-sm-box {
  position: relative;
  text-align: center;
  height: auto;
  font-size: 24px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item {
  width: 456px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  color: #242933
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item.white {
  color: #fff
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item > div {
  height: 100%;
  background: #fff;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  opacity: 0;
  overflow: hidden
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:hover .banner-sm-img picture img {
  -webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -ms-transform: scale(1.04);
  -o-transform: scale(1.04);
  transform: scale(1.04)
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) {
  position: absolute;
  left: 0;
  height: 510px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) {
  position: relative;
  height: 510px;
  display: inline-block
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) {
  position: absolute;
  top: 0;
  right: 0;
  height: 510px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img {
  height: 340px;
  -webkit-border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img video {
  -webkit-border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-content {
  height: 170px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-direction: column;
  flex-direction: column;
  bottom: 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-content .white {
  color: #fff
}

.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-img {
  height: 340px;
  -webkit-border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img video {
  -webkit-border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-content {
  height: 170px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-direction: column;
  flex-direction: column;
  bottom: 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-content .white {
  color: #fff
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) {
  position: absolute;
  left: 0;
  height: 450px;
  top: 376px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-img {
  height: 280px;
  -webkit-border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-img video {
  -webkit-border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-content {
  height: 170px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-direction: column;
  flex-direction: column;
  bottom: 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) {
  position: absolute;
  right: 0;
  height: 340px;
  top: 546px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-img {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  overflow: hidden;
  cursor: pointer
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-img a {
  display: unset
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-img img {
  width: 100%;
  height: 100%;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -o-transition: -o-transform .5s;
  -moz-transition: transform .5s, -moz-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s, -moz-transform .5s, -o-transform .5s;
  transition: transform .5s, -webkit-transform .5s
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-img .coverImg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  transition: all .2s ease-in;
  opacity: 1
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-img .coverImg.cover-hide {
  opacity: 0
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-img video {
  width: 100%;
  height: 100%;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -o-object-fit: fill;
  object-fit: fill
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 44px;
  width: 100%;
  bottom: 44px;
  font-size: 18px;
  text-align: left;
  opacity: 0;
  z-index: 2;
  pointer-events: none
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content.text-dir-rtl {
  text-align: right
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content p + p {
  margin-top: 4px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content .banner-sm-name {
  font-size: 18px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content .banner-sm-desc {
  line-height: 1.2;
  font-size: 24px
}
.bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content .white {
  color: #FFF
}
@media screen and (max-width:1600px) {
  .bannner-container .banner-sm-wraper {
    width: 100%
  }
  .bannner-container .banner-sm-wraper .banner-sm-box {
    position: relative;
    text-align: center;
   /* height: 55.6vw;*/
    font-size: 24px
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item {
    width: 31.6%
  }
/*  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) {
    height: 21.25vw
  }*/
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) {
    height: 31.875vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) {
    height: 31.875vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img {
    height: 21.25vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-content {
    height: 10.625vw
  }
    
    .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) {
    height: 31.875vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-img {
    height: 21.25vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-content {
    height: 10.625vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) {
    height: 28.125vw;
    top: 23.5vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-img {
    height: 17.5vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-content {
    height: 10.625vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) {
    height: 21.25vw;
    top: 34.188vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content {
    padding: 0 2.667vw;
    bottom: 2.667vw;
    font-size: 1.083vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content p + p {
    margin-top: 4px
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content .banner-sm-name {
    font-size: .962vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content .banner-sm-desc {
    font-size: 1.443vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content .white {
    color: #FFF
  }
}
@media screen and (max-width:768px) {
  .bannner-container .banner-sm-wraper .banner-sm-title {
    font-size: 6.66667vw;
    margin-bottom: 5.55556vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box {
    height: auto
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item {
    display: block;
    position: static;
    width: 100%;
    -webkit-border-radius: 3.33333vw;
    -moz-border-radius: 3.33333vw;
    border-radius: 3.33333vw;
    height: 88.88889vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item > div {
    -webkit-border-radius: 3.33333vw;
    -moz-border-radius: 3.33333vw;
    border-radius: 3.33333vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1), .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2), .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3), .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4), .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) {
    display: block;
    position: relative;
    top: 0;
    height: 88.88889vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) .banner-sm-img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) .banner-sm-img {
    height: 58.33333vw;
    -webkit-border-radius: 3.33333vw 3.33333vw 0 0;
    -moz-border-radius: 3.33333vw 3.33333vw 0 0;
    border-radius: 3.33333vw 3.33333vw 0 0
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-img video, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) .banner-sm-img video, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-img video, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-img video, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) .banner-sm-img img, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) .banner-sm-img video {
    -webkit-border-radius: 3.33333vw 3.33333vw 0 0;
    -moz-border-radius: 3.33333vw 3.33333vw 0 0;
    border-radius: 3.33333vw 3.33333vw 0 0
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-content, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) .banner-sm-content, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-content, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-content, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) .banner-sm-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 7.22222vw;
    bottom: 0;
    height: 30.55556vw;
    font-size: 3.33333vw;
    color: #242933
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-content .banner-sm-name, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) .banner-sm-content .banner-sm-name, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-content .banner-sm-name, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-content .banner-sm-name, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) .banner-sm-content .banner-sm-name {
    font-size: 3.33vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-content .banner-sm-desc, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) .banner-sm-content .banner-sm-desc, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-content .banner-sm-desc, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-content .banner-sm-desc, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) .banner-sm-content .banner-sm-desc {
    font-size: 5vw
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(1) .banner-sm-content .white, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(2) .banner-sm-content .white, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(3) .banner-sm-content .white, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(4) .banner-sm-content .white, .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item:nth-child(5) .banner-sm-content .white {
    color: #242933
  }
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item + .banner-sm-item {
    margin-top: 5.55556vw
  }
}
@media screen and (min-width:2000px) {
  .bannner-container .banner-sm-wraper .banner-sm-box .banner-sm-item .banner-sm-content .banner-sm-desc {
    margin-top: 8px;
    line-height: 1.2vw
  }
}