@charset "UTF-8";
.hidden {
  display: none;
  font-size: 0;
  text-indent: -999em; }

html, body {
  width: 100%;
  overflow: auto;
  margin: 0 auto; }

picture {
  display: block; }

picture img {
  width: 100%;
  height: 100%;
  background-size: 100% 100%; }

br {
  opacity: 0;
  font-size: 0; }

/* IOS禁止微信调整字体大小 */
body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important; }

.section {
  position: relative;
  z-index: 3;
  margin: 0 auto; }

.oc-footer {
  background-color: #FFFFFF; }

#product-nav {
  position: fixed;
  top: 0; }

.all-hide {
  display: none !important; }

/* 视频弹窗 S*/
video {
  display: inline-block;
  vertical-align: baseline; }

.win-product-warp {
  display: none;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888; }

.product-cont {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -42%);
          transform: translate(-50%, -42%); }

.product-vid {
  width: 69vw;
  height: 39vw;
  position: relative; }

.btn-product-close {
  color: #FFFFFE;
  font-size: 70px;
  text-align: center;
  line-height: 29px;
  position: absolute;
  top: 0;
  right: -70px; }

.fadeIn {
  -webkit-animation: fadeIn 1s .2s ease both;
  animation: fadeIn 1s .2s ease both;
  -moz-animation: fadeIn 1s .2s ease both; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/* 视频弹窗 E*/
@media only screen and (min-width: 1441px) {
  .sec-title {
    width: 100%;
    font-size: 2.5vw;
    color: #ffffff;
    line-height: 3.1vw;
    margin: 0 auto 0.6vw;
    font-family: NewOPPOSansBold; }
  .sec-tit {
    width: 100%;
    font-size: 1.5625vw;
    color: #ffffff;
    line-height: 1.8vw;
    margin: 0 auto 2vw;
    font-family: NewOPPOSansMedium; }
  .sec-text {
    width: 100%;
    font-size: 1.09375vw;
    color: #ffffff;
    line-height: 1.76vw;
    margin: 0 auto 3.2vw;
    font-family: NewOPPOSansMedium; }
  .sec-tip {
    width: 100%;
    font-size: 0.83333vw;
    color: #d6dae6;
    line-height: 1.2vw;
    font-family: NewOPPOSans;
    padding-left: 2.91667vw;
    position: absolute;
    bottom: 2.4vw;
    left: 0; }
  .sec-tip p {
    position: relative; }
  .sec-tip span {
    display: inline-block;
    width: 2.91667vw;
    position: absolute;
    top: 0;
    left: 0; }
  .sec-data-box {
    width: 100%;
    margin: 0 auto 3.3vw; }
  .sec-data {
    width: 12vw;
    display: inline-block;
    vertical-align: top; }
  .data-desc {
    font-size: 2.5vw;
    line-height: 2.60417vw;
    color: #63c45d;
    margin-bottom: 0.4vw;
    font-family: NewOPPOSansBold; }
  .data-desc span {
    font-size: 1.30208vw;
    line-height: 1.45833vw;
    color: #333333;
    padding-left: 0.8vw;
    font-family: NewOPPOSansMedium; }
  .data-text {
    font-size: 1.09375vw;
    color: #333333;
    line-height: 1.25vw;
    font-family: NewOPPOSans; }
  .btn-learnmore {
    display: inline-block;
    padding: 0 1.6vw;
    font-size: 1.1vw;
    color: #ffffff;
    line-height: 2.4vw;
    border: 1px solid #ffffff;
    border-radius: 10vw;
    text-align: center;
    font-family: NewOPPOSansBold; }
  .section-1 {
    width: 100%;
    height: 52.08333vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .wrapper {
    width: 100vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 11; }
  .watch-title {
    width: 100vw;
    height: 9.89583vw;
    background: url(../png/watch-title-428e36102010d786d4864f32a03a4a18.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 22vw;
    left: 0;
    transition: all 1s .6s;
    opacity: 0; }
  .watch-bg {
    width: 100vw;
    height: 49.73958vw;
    background: url(../png/watch-bg-626e62140535be0fa4d927cee9fd503d.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -6.3vw;
    left: 0;
    z-index: 2;
    transition: all 1s .2s;
    opacity: 0; }
  .section-1.on .watch-title {
    top: 18.9vw;
    opacity: 1; }
  .section-1.on .watch-bg {
    bottom: -2.3vw;
    opacity: 1; }
  .section-2 {
    width: 100%;
    height: 43.07292vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .btn-playvideo {
    display: block;
    width: 15.10417vw;
    height: 1.5625vw;
    font-size: 1.09375vw;
    color: #ffffff;
    line-height: 1.5625vw;
    text-align: center;
    margin: 0 auto;
    font-family: NewOPPOSansMedium; }
  .btn-playvideo span {
    display: inline-block;
    border-bottom: 1px solid #ffffff;
    vertical-align: top; }
  .icon-play {
    display: inline-block;
    width: 1.19792vw;
    height: 1.35417vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA0CAMAAADCKvr4AAAABGdBTUEAALGPC/xhBQAAAP9QTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////jRvcfgAAAFR0Uk5TQ5LvB9169hZV+/10vsYziNjLRp5f0Lb63y2FHG2owQ/g0mev+MTlO4ZZOrya1fATLPfskAYMwNPirZdeMPl5cRiBG7Cd8iUBIf4L6vEFRVH89e4Aji2orQAAAPhJREFUSMe11kdCAkEQRuExIiZQMaAoKJgjIOYASkZghHf/szhH4C2c9beY7q6qv4J6MDOe/AumG1PN1uR8RDg7FxMc5tdSXcHhZ2vQFxx69bThbO/s7gkOv5uZrOBwczm8FxxK+xeGE+bKTcGhePhRFRwaD68VwWH0PGgJTufp5U1weH+stQWPnu3g6FbwqPLyw77gcHJ1ajjh9dmd4FA4/vwSPDrz93lX8Kh5NtYNp5NMrAoO8ZWltuCwuLzwb1z9jDuqukj1TKoIXImpAlbtoZpPtbYbHGosqaGnRqob2CoOVNioKHNBqWJYhbxaIdSCItcft1z9AZ6Q7090NAAsAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    margin-right: 0.5vw;
    vertical-align: top;
    position: relative;
    top: 0.15vw; }
  .section-2 .sec-tit {
    padding-top: 10.9vw;
    margin: 0 auto 0.6vw;
    font-family: NewOPPOSansBold;
    text-align: center; }
  .section-2 .sec-title {
    margin: 0 auto 3.6vw;
    font-family: NewOPPOSansMedium;
    text-align: center; }
  .section-2 .sec-text {
    font-size: 1.51042vw;
    line-height: 2.8vw;
    margin: 0 auto 8vw;
    text-align: center; }
  .section-2 .sec-tip {
    text-align: center;
    padding-left: 0;
    color: #a8adb1; }
  .section-2 .sec-tip span {
    position: relative;
    text-align: left; }
  .sec2-bg {
    width: 100vw;
    height: 43.07292vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-3 {
    width: 100%;
    height: 46.875vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-3 .wrapper {
    width: 36vw;
    position: absolute;
    top: 0;
    left: 16.3vw; }
  .section-3 .sec-title {
    padding-top: 8vw;
    margin: 0 auto 0.8vw; }
  .section-3 .sec-tip {
    color: #d6dae6;
    padding-left: 0; }
  .section-3 .sec-tip p {
    padding-left: 1.5vw; }
  .section-3 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-3 .sec-tip span {
    width: 1.5vw; }
  .sec3-bg {
    width: 100vw;
    height: 46.875vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-4 {
    width: 100%;
    height: 59.375vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-4 .wrapper {
    width: 39vw;
    position: absolute;
    top: 0;
    left: 16.3vw; }
  .section-4 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 1.6vw;
    color: #333333; }
  .section-4 .sec-tit {
    color: #333333; }
  .section-4 .sec-text {
    color: #868686;
    margin: 0 auto 2vw; }
  .section-4 .btn-learnmore {
    color: #333333;
    border: 0.05208vw solid #333333; }
  .section-4 .sec-tip {
    width: 50vw;
    color: #a4a4a4; }
  .section-4 .sec-title1 {
    width: 42vw;
    color: #63c45d;
    padding-top: 0;
    margin: 0 auto; }
  .section-4 .sec-text1 {
    color: #333333;
    font-family: NewOPPOSans;
    margin: 0 auto 2.6vw; }
  .section-4 .sec4-img1 {
    width: 28.64583vw;
    height: 34.19271vw;
    position: absolute;
    top: 7.5vw;
    left: 69.5vw; }
  .section-4 .sec4-img2 {
    width: 29.24479vw;
    height: 32.13542vw;
    position: absolute;
    top: 22.8vw;
    left: 55.6vw; }
  .section-4 .sec-data-box {
    height: 7.8vw;
    margin: 0 auto; }
  .section-5 {
    width: 100%;
    height: 46.875vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-5 .wrapper {
    width: 48vw;
    position: absolute;
    top: 0;
    left: 16.3vw;
    padding-top: 5.5vw; }
  .section-5 .sec-tit {
    width: 15.98958vw;
    height: 1.82292vw;
    margin: 0 0 1.8vw;
    background: url(../png/sec5-tit-f9333668e9d5e27b665f28554123b6e8.png) no-repeat;
    background-size: 100%; }
  .section-5 .sec-title {
    padding-top: 0;
    margin: 0 auto 1.8vw; }
  .section-5 .sec-text {
    margin: 0 auto 1.6vw; }
  .section-5 .sec-tip {
    bottom: 2.2vw;
    color: #d3d1d2; }
  .section-5 .sec-data-box {
    width: 54vw;
    height: 8.6vw;
    margin: 0; }
  .section-5 .sec-data {
    width: 6.1vw;
    height: 8vw;
    vertical-align: top; }
  .section-5 .data-text {
    width: 6.2vw;
    color: #fefefe;
    font-family: NewOPPOSansMedium;
    font-size: 0.83333vw;
    line-height: 1.09375vw;
    word-wrap: break-word;
    word-break: break-all; }
  .section-5 .icon-data {
    width: 2.65625vw;
    height: 2.8125vw;
    background: url(../png/icon-data5-0e5cd46ca6050321cd0933476ee7b061.png) no-repeat;
    background-size: 46.35417vw; }
  .section-5 .icon-data1 {
    background-position: 0 0; }
  .section-5 .icon-data2 {
    background-position: -6.27604vw 0; }
  .section-5 .icon-data3 {
    background-position: -12.26562vw 0; }
  .section-5 .icon-data4 {
    background-position: -18.4375vw 0; }
  .section-5 .icon-data5 {
    background-position: -24.45312vw 0; }
  .section-5 .icon-data6 {
    background-position: -30.23438vw 0; }
  .section-5 .icon-data7 {
    background-position: -36.01562vw 0; }
  .section-5 .icon-data8 {
    background-position: -42.21354vw 0; }
  .section-5 .sec5-bg {
    width: 100vw;
    height: 46.875vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-6 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-6 .wrapper {
    width: 36vw;
    position: relative;
    margin-left: 49.2vw;
    padding-bottom: 16vw; }
  .section-6 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 0.9vw;
    color: #333333; }
  .section-6 .sec-tit {
    color: #333333;
    margin: 0 auto 2.7vw; }
  .section-6 .sec-text {
    margin: 0 auto 2vw;
    color: #868686; }
  .section-6 .sec-text span {
    color: #63c45d; }
  .section-6 .sec-data-box {
    width: 37vw;
    height: auto;
    margin: 0 auto; }
  .section-6 .sec-data {
    width: auto;
    margin-bottom: 3vw;
    margin-right: 4.4vw; }
  .section-6 .data-desc {
    font-size: 1.5625vw;
    color: #333333;
    font-family: NewOPPOSansMedium;
    line-height: 2.2vw; }
  .section-6 .data-desc span {
    font-size: 2.96875vw;
    color: #63c45d;
    padding-left: 0;
    font-family: NewOPPOSansBold; }
  .section-6 .btn-learnmore {
    color: #333333;
    border: 0.05208vw solid #333333; }
  .section-6 .sec-tip {
    width: 36vw;
    color: #a2a2a2;
    padding-left: 0; }
  .section-6 .sec-tip p {
    padding-left: 1.5vw; }
  .section-6 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-6 .sec-tip span {
    width: 1.5vw; }
  .section-6 .sec6-img1 {
    width: 23.98438vw;
    height: 42.34375vw;
    position: absolute;
    top: 50%;
    margin-top: -21.17188vw;
    left: 16.2vw;
    background: url(../png/sec6-img1-e18227e3997d668ff11a0ad628768c6e.png) no-repeat;
    background-size: 100%; }
  .icon-jb {
    font-style: normal;
    position: relative;
    top: 0.3vw; }
  .section-7 {
    width: 100%;
    height: 61.17188vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-7 .wrapper {
    width: 36vw;
    position: absolute;
    top: 0;
    left: 49.2vw; }
  .section-7 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 1.8vw; }
  .section-7 .sec-text {
    margin: 0 auto 2vw; }
  .section-7 .sec-data-box {
    width: 42vw;
    margin: 0 auto; }
  .section-7 .sec-data {
    width: 20vw;
    height: 8vw; }
  .section-7 .data-desc {
    font-size: 2.96875vw;
    margin-bottom: 0.6vw; }
  .section-7 .data-desc span {
    font-size: 1.5625vw;
    color: #ffffff; }
  .section-7 .data-text {
    color: #ffffff; }
  .section-7 .sec-tip {
    color: #d2d3d5; }
  .section-7 .sec-bg7 {
    width: 100vw;
    height: 61.17188vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-8 {
    width: 100%;
    height: auto;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden; }
  .section-8 .wrapper {
    padding-bottom: 38vw;
    text-align: center; }
  .section-8 .sec-title {
    width: 60vw;
    padding-top: 5vw;
    margin: 0 auto 1.8vw;
    color: #333333; }
  .section-8 .sec-text {
    width: 60vw;
    margin: 0 auto 2vw;
    color: #868686; }
  .section-8 .btn-learnmore {
    margin: 0 auto;
    color: #333333;
    border: 0.05208vw solid #333333; }
  .section-8 .sec-data-box {
    width: 100%;
    margin: 0 auto 3.3vw; }
  .section-8 .sec-data {
    width: auto;
    display: inline-block;
    margin: 0 1.4vw; }
  .section-8 .icon-data {
    width: 2.1875vw;
    height: 2.1875vw;
    margin: 0 auto 0.6vw;
    background: url(../png/icon-data8-e45b92bbe082f9df1bffd3447cda13e6.png) no-repeat;
    background-size: 22.76042vw; }
  .section-8 .icon-data1 {
    background-position: 0 0; }
  .section-8 .icon-data2 {
    background-position: -6.77083vw 0; }
  .section-8 .icon-data3 {
    background-position: -13.85417vw 0; }
  .section-8 .icon-data4 {
    background-position: -20.85938vw 0; }
  .section-8 .data-text {
    font-size: 0.72917vw;
    color: #333333;
    line-height: 0.9375vw; }
  .section-8 .sec8-img {
    width: 51.30208vw;
    height: 35.05208vw;
    position: absolute;
    bottom: 0;
    left: 23.2vw; }
  .section-9 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    padding-bottom: 6vw; }
  .notes-list {
    width: 66.92708vw;
    margin: 0 auto;
    padding-top: 4.8vw; }
  .notes-list li {
    font-size: 1.04167vw;
    color: #959595;
    line-height: 1.9vw;
    padding-left: 2vw;
    position: relative;
    opacity: 0.4;
    font-family: NewOPPOSansMedium; }
  .notes-list li.li-notes {
    padding-left: 0; }
  .notes-list li span {
    width: 1.04167vw;
    position: absolute;
    top: 0;
    left: 0; } }

@media only screen and (min-width: 1221px) and (max-width: 1440px) {
  .section-1 {
    width: 100%;
    height: 52.56944vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .wrapper {
    width: 100vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 11; }
  .watch-title {
    width: 100vw;
    height: 9.89583vw;
    background: url(../png/watch-title-8cc784b674caa0851249c3106eed864b.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 24.9vw;
    left: 0;
    transition: all 1s .6s;
    opacity: 0; }
  .watch-bg {
    width: 100vw;
    height: 45.59028vw;
    background: url(../png/watch-bg-8c11bd4850637345e497f6cae7eed571.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -8.3vw;
    left: 0;
    z-index: 2;
    transition: all 1s .2s;
    opacity: 0; }
  .section-1.on .watch-title {
    top: 20.9vw;
    opacity: 1; }
  .section-1.on .watch-bg {
    bottom: -2.3vw;
    opacity: 1; }
  .sec-title {
    width: 100%;
    font-size: 2.5vw;
    color: #ffffff;
    line-height: 3.1vw;
    margin: 0 auto 0.6vw;
    font-family: NewOPPOSansBold; }
  .sec-tit {
    width: 100%;
    font-size: 1.5625vw;
    color: #ffffff;
    line-height: 1.8vw;
    margin: 0 auto 2vw;
    font-family: NewOPPOSansMedium; }
  .sec-text {
    width: 100%;
    font-size: 0.90278vw;
    color: #ffffff;
    line-height: 1.76vw;
    margin: 0 auto 3.2vw;
    font-family: NewOPPOSansMedium; }
  .sec-tip {
    width: 100%;
    font-size: 0.76389vw;
    color: #d6dae6;
    line-height: 1.52778vw;
    font-family: NewOPPOSans;
    padding-left: 3.1vw;
    position: absolute;
    bottom: 2.4vw;
    left: 0; }
  .sec-tip span {
    display: inline-block;
    width: 3.1vw;
    position: absolute;
    top: 0;
    left: 0; }
  .sec-tip p {
    position: relative; }
  .sec-data-box {
    width: 100%;
    margin: 0 auto 3.3vw; }
  .sec-data {
    width: 14.23611vw;
    display: inline-block;
    vertical-align: top; }
  .data-desc {
    font-size: 3.33333vw;
    line-height: 3.47222vw;
    color: #63c45d;
    margin-bottom: 0.4vw;
    font-family: NewOPPOSansBold; }
  .data-desc span {
    font-size: 1.73611vw;
    line-height: 1.94444vw;
    color: #333333;
    padding-left: 0.8vw;
    font-family: NewOPPOSansMedium; }
  .data-text {
    font-size: 1.11111vw;
    color: #333333;
    line-height: 1.66667vw;
    font-family: NewOPPOSans; }
  .btn-learnmore {
    display: inline-block;
    padding: 0 1.8vw;
    font-size: 1vw;
    color: #ffffff;
    line-height: 2.4vw;
    border: 0.06944vw solid #ffffff;
    border-radius: 10vw;
    text-align: center;
    font-family: NewOPPOSansBold; }
  .section-2 {
    width: 100%;
    height: 43.09028vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .btn-playvideo {
    display: block;
    width: 20.13889vw;
    height: 2.08333vw;
    font-size: 1.07639vw;
    color: #ffffff;
    line-height: 2.08333vw;
    text-align: center;
    margin: 0 auto;
    font-family: NewOPPOSansMedium; }
  .btn-playvideo span {
    display: inline-block;
    border-bottom: 1px solid #ffffff;
    vertical-align: top; }
  .icon-play {
    display: inline-block;
    width: 1.18056vw;
    height: 1.31944vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA0CAMAAADCKvr4AAAABGdBTUEAALGPC/xhBQAAAP9QTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////jRvcfgAAAFR0Uk5TQ5LvB9169hZV+/10vsYziNjLRp5f0Lb63y2FHG2owQ/g0mev+MTlO4ZZOrya1fATLPfskAYMwNPirZdeMPl5cRiBG7Cd8iUBIf4L6vEFRVH89e4Aji2orQAAAPhJREFUSMe11kdCAkEQRuExIiZQMaAoKJgjIOYASkZghHf/szhH4C2c9beY7q6qv4J6MDOe/AumG1PN1uR8RDg7FxMc5tdSXcHhZ2vQFxx69bThbO/s7gkOv5uZrOBwczm8FxxK+xeGE+bKTcGhePhRFRwaD68VwWH0PGgJTufp5U1weH+stQWPnu3g6FbwqPLyw77gcHJ1ajjh9dmd4FA4/vwSPDrz93lX8Kh5NtYNp5NMrAoO8ZWltuCwuLzwb1z9jDuqukj1TKoIXImpAlbtoZpPtbYbHGosqaGnRqob2CoOVNioKHNBqWJYhbxaIdSCItcft1z9AZ6Q7090NAAsAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    margin-right: 0.5vw;
    vertical-align: top;
    position: relative;
    top: 0.4vw; }
  .section-2 .sec-tit {
    padding-top: 9.58333vw;
    margin: 0 auto 0.6vw;
    font-family: NewOPPOSansBold;
    text-align: center;
    font-size: 1.5625vw; }
  .section-2 .sec-title {
    margin: 0 auto 3.6vw;
    font-family: NewOPPOSansMedium;
    text-align: center;
    font-size: 2.5vw; }
  .section-2 .sec-text {
    font-size: 2.01389vw;
    line-height: 2.8vw;
    margin: 0 auto 6.14583vw;
    text-align: center;
    font-size: 1.66667vw; }
  .section-2 .sec-tip {
    text-align: center;
    padding-left: 0;
    font-size: 0.76389vw;
    color: #a8adb1; }
  .section-2 .sec-tip span {
    position: relative;
    text-align: left; }
  .sec2-bg {
    width: 100vw;
    height: 43.09028vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-3 {
    width: 100%;
    height: 45.86806vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-3 .wrapper {
    width: 42vw;
    position: absolute;
    top: 0;
    left: 4.3vw; }
  .section-3 .sec-title {
    padding-top: 10.2vw;
    margin: 0 auto 0.8vw; }
  .section-3 .sec-tip {
    color: #d6dae6;
    padding-left: 0; }
  .section-3 .sec-tip p {
    padding-left: 1.5vw; }
  .section-3 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-3 .sec-tip span {
    width: 1.5vw; }
  .sec3-bg {
    width: 100vw;
    height: 45.86806vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-4 {
    width: 100%;
    height: 61.11111vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-4 .wrapper {
    width: 46vw;
    position: absolute;
    top: 0;
    left: 4.375vw; }
  .section-4 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 0.8vw;
    color: #333333; }
  .section-4 .sec-tit {
    color: #333333;
    margin-bottom: 3.02083vw; }
  .section-4 .sec-text {
    color: #868686;
    margin: 0 auto 2.5vw; }
  .section-4 .btn-learnmore {
    color: #333333;
    border: 0.06944vw solid #333333; }
  .section-4 .sec-tip {
    color: #a4a4a4;
    width: 120%; }
  .section-4 .sec-title1 {
    color: #63c45d;
    padding-top: 0;
    margin: 0 auto; }
  .section-4 .sec-text1 {
    color: #333333;
    font-family: NewOPPOSans;
    margin: 0 auto 2.6vw; }
  .section-4 .sec4-img1 {
    width: 29.44444vw;
    height: 35.20833vw;
    position: absolute;
    top: 7.29167vw;
    left: 65.52083vw; }
  .section-4 .sec4-img2 {
    width: 30.10417vw;
    height: 33.05556vw;
    position: absolute;
    top: 23.19444vw;
    left: 50.69444vw; }
  .section-4 .sec-data-box {
    height: 9.8vw;
    margin: 0 auto; }
  .section-5 {
    width: 100%;
    height: 52.74306vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-5 .wrapper {
    width: 56vw;
    position: absolute;
    top: 0;
    left: 4.375vw;
    padding-top: 5.5vw; }
  .section-5 .sec-tit {
    width: 21.31944vw;
    height: 2.43056vw;
    margin: 0 0 1.6vw;
    background: url(../png/sec5-tit-f9333668e9d5e27b665f28554123b6e8.png) no-repeat;
    background-size: 100%; }
  .section-5 .sec-title {
    padding-top: 0;
    margin: 0 auto 2.2vw; }
  .section-5 .sec-text {
    margin: 0 auto 2.53472vw; }
  .section-5 .sec-tip {
    bottom: 2.2vw;
    color: #d3d1d2; }
  .section-5 .sec-data-box {
    width: 62vw;
    height: 8.6vw;
    margin: 0; }
  .section-5 .sec-data {
    width: 7.4vw;
    height: 8vw;
    vertical-align: top; }
  .section-5 .data-text {
    width: 7vw;
    color: #fefefe;
    font-family: NewOPPOSansMedium;
    font-size: 0.97222vw;
    line-height: 1.45833vw; }
  .section-5 .icon-data {
    width: 3.54167vw;
    height: 3.75vw;
    background: url(../png/icon-data5-0e5cd46ca6050321cd0933476ee7b061.png) no-repeat;
    background-size: 61.80556vw; }
  .section-5 .icon-data1 {
    background-position: 0 0; }
  .section-5 .icon-data2 {
    background-position: -8.36806vw 0; }
  .section-5 .icon-data3 {
    background-position: -16.35417vw 0; }
  .section-5 .icon-data4 {
    background-position: -24.58333vw 0; }
  .section-5 .icon-data5 {
    background-position: -32.60417vw 0; }
  .section-5 .icon-data6 {
    background-position: -40.3125vw 0; }
  .section-5 .icon-data7 {
    background-position: -48.02083vw 0; }
  .section-5 .icon-data8 {
    background-position: -56.28472vw 0; }
  .section-5 .btn-learnmore {
    margin-top: 1.2vw; }
  .section-5 .sec5-bg {
    width: 100vw;
    height: 52.74306vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-6 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-6 .wrapper {
    width: 48vw;
    position: relative;
    margin-left: 47vw;
    padding-bottom: 20vw; }
  .section-6 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 0.9vw;
    color: #333333; }
  .section-6 .sec-tit {
    color: #333333;
    margin: 0 auto 2.7vw; }
  .section-6 .sec-text {
    margin: 0 auto 2vw;
    color: #868686; }
  .section-6 .sec-text span {
    color: #63c45d; }
  .section-6 .sec-data-box {
    height: 8vw;
    margin: 0 auto; }
  .section-6 .sec-data {
    width: auto;
    margin-right: 2vw; }
  .section-6 .data-desc {
    font-size: 1.31944vw;
    margin-bottom: 0.8vw;
    color: #333333;
    font-family: NewOPPOSansMedium;
    line-height: 1.5vw; }
  .section-6 .data-desc span {
    font-size: 2.60417vw;
    color: #63c45d;
    padding-left: 0;
    font-family: NewOPPOSansBold; }
  .section-6 .btn-learnmore {
    color: #333333;
    border: 0.06944vw solid #333333; }
  .section-6 .sec-tip {
    color: #a2a2a2;
    padding-left: 0; }
  .section-6 .sec-tip p {
    padding-left: 1.5vw; }
  .section-6 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-6 .sec-tip span {
    width: 1.5vw; }
  .section-6 .sec6-img1 {
    width: 23.99306vw;
    height: 42.39583vw;
    position: absolute;
    top: 50%;
    margin-top: -21.19792vw;
    left: 12.4vw;
    background: url(../png/sec6-img1-fd13cdb1dc79e37c6e650b50bedfc103.png) no-repeat;
    background-size: 100%; }
  .icon-jb {
    font-style: normal;
    position: relative;
    top: 0.3vw; }
  .section-7 {
    width: 100%;
    height: 58.19444vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-7 .wrapper {
    width: 47vw;
    position: absolute;
    top: 0;
    left: 50vw; }
  .section-7 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 1.8vw; }
  .section-7 .sec-text {
    margin: 0 auto 2vw; }
  .section-7 .sec-data-box {
    margin: 0 auto; }
  .section-7 .sec-data {
    width: 18vw;
    height: 8vw; }
  .section-7 .data-desc {
    font-size: 2.60417vw;
    margin-bottom: 0.8vw;
    line-height: 2.6vw; }
  .section-7 .data-desc span {
    font-size: 1.31944vw;
    color: #ffffff; }
  .section-7 .data-text {
    width: 18vw;
    color: #ffffff; }
  .section-7 .sec-tip {
    color: #d2d3d5; }
  .section-7 .sec-bg7 {
    width: 100vw;
    height: 58.19444vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-8 {
    width: 100%;
    height: auto;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden; }
  .section-8 .wrapper {
    padding-bottom: 40.4vw;
    text-align: center; }
  .section-8 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 1.8vw;
    color: #333333; }
  .section-8 .sec-text {
    width: 60vw;
    margin: 0 auto 2vw;
    color: #868686; }
  .section-8 .btn-learnmore {
    margin: 0 auto;
    color: #333333;
    border: 0.06944vw solid #333333; }
  .section-8 .sec-data-box {
    width: 100%;
    margin: 0 auto 3.3vw; }
  .section-8 .sec-data {
    width: auto;
    display: inline-block;
    margin: 0 1.2vw; }
  .section-8 .icon-data {
    width: 2.91667vw;
    height: 2.91667vw;
    margin: 0 auto 0.6vw;
    background: url(../png/icon-data8-e45b92bbe082f9df1bffd3447cda13e6.png) no-repeat;
    background-size: 30.34722vw; }
  .section-8 .icon-data1 {
    background-position: 0 0; }
  .section-8 .icon-data2 {
    background-position: -9.02778vw 0; }
  .section-8 .icon-data3 {
    background-position: -18.47222vw 0; }
  .section-8 .icon-data4 {
    background-position: -27.8125vw 0; }
  .section-8 .data-text {
    font-size: 0.97222vw;
    color: #333333;
    line-height: 1.25vw; }
  .section-8 .sec8-img {
    width: 50.41667vw;
    height: 34.47917vw;
    position: absolute;
    bottom: 0;
    left: 23.2vw; }
  .section-9 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    padding-bottom: 6vw; }
  .notes-list {
    width: 90.97222vw;
    margin: 0 auto;
    padding-top: 7.43056vw; }
  .notes-list li {
    font-size: 0.76389vw;
    color: #959595;
    line-height: 1.9vw;
    padding-left: 1.5vw;
    position: relative;
    opacity: 0.4;
    font-family: NewOPPOSansMedium; }
  .notes-list li.li-notes {
    padding-left: 0; }
  .notes-list li span {
    width: 1.5vw;
    position: absolute;
    top: 0;
    left: 0; } }

@media only screen and (min-width: 1024px) and (max-width: 1220px) {
  .product-vid {
    width: 80vw;
    height: 48vw; }
  .btn-product-close {
    font-size: 1.5rem;
    position: absolute;
    top: -0.9rem;
    right: -0.3rem; }
  .section-1 {
    width: 100%;
    height: 70.11719vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .wrapper {
    width: 100vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 11; }
  .watch-title {
    width: 100vw;
    height: 10.00977vw;
    background: url(../png/watch-title-4439be231952ce14f789889fa8059963.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 30.6vw;
    left: 0;
    transition: all 1s .6s;
    opacity: 0; }
  .watch-bg {
    width: 100vw;
    height: 70.11719vw;
    background: url(../png/watch-bg-be73da8a2106fe6c71097b934650a752.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -4vw;
    left: 0;
    z-index: 2;
    transition: all 1s .2s;
    opacity: 0; }
  .section-1.on .watch-title {
    top: 26.6vw;
    opacity: 1; }
  .section-1.on .watch-bg {
    bottom: 0vw;
    opacity: 1; }
  .sec-title {
    width: 100%;
    font-size: 4.78516vw;
    color: #ffffff;
    line-height: 7.1vw;
    margin: 0 auto 0.6vw;
    font-family: NewOPPOSansBold; }
  .sec-tit {
    width: 100%;
    font-size: 3.02734vw;
    color: #ffffff;
    line-height: 5.8vw;
    margin: 0 auto 2vw;
    font-family: NewOPPOSansMedium; }
  .sec-text {
    width: 100%;
    font-size: 4.15039vw;
    color: #ffffff;
    line-height: 4.76vw;
    margin: 0 auto 3.2vw;
    font-family: NewOPPOSansMedium; }
  .sec-tip {
    width: 100%;
    font-size: 1.75781vw;
    color: #d6dae6;
    line-height: 2.14844vw;
    font-family: NewOPPOSans;
    padding-left: 5.9vw;
    position: absolute;
    bottom: 4.73633vw;
    left: 0; }
  .sec-tip span {
    display: inline-block;
    width: 5.9vw;
    position: absolute;
    top: 0;
    left: 0; }
  .sec-tip p {
    position: relative; }
  .sec-data-box {
    width: 100%;
    margin: 0 auto 3.3vw; }
  .sec-data {
    width: 20.01953vw;
    display: inline-block;
    vertical-align: top; }
  .data-desc {
    font-size: 4.6875vw;
    line-height: 4.88281vw;
    color: #63c45d;
    margin-bottom: 0.4vw;
    font-family: NewOPPOSansBold; }
  .data-desc span {
    font-size: 2.44141vw;
    line-height: 2.73438vw;
    color: #333333;
    padding-left: 0.8vw;
    font-family: NewOPPOSansMedium; }
  .data-text {
    font-size: 1.5625vw;
    color: #333333;
    line-height: 2.34375vw;
    font-family: NewOPPOSans; }
  .btn-learnmore {
    display: inline-block;
    padding: 0 4.8vw;
    font-size: 3.2vw;
    color: #ffffff;
    line-height: 8vw;
    border: 0.09766vw solid #ffffff;
    border-radius: 10vw;
    text-align: center;
    font-family: NewOPPOSansBold; }
  .section-2 {
    width: 100%;
    height: 96.14258vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .btn-playvideo {
    display: block;
    width: 33vw;
    height: 2.92969vw;
    font-size: 3.41797vw;
    color: #ffffff;
    line-height: 5.9vw;
    text-align: center;
    margin: 0 auto;
    font-family: NewOPPOSansMedium;
    position: absolute;
    top: 67vw;
    left: 35vw; }
  .btn-playvideo span {
    display: inline-block;
    border-bottom: 1px solid #ffffff;
    vertical-align: top; }
  .icon-play {
    display: inline-block;
    width: 3.66211vw;
    height: 4.10156vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA0CAMAAADCKvr4AAAABGdBTUEAALGPC/xhBQAAAP9QTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////jRvcfgAAAFR0Uk5TQ5LvB9169hZV+/10vsYziNjLRp5f0Lb63y2FHG2owQ/g0mev+MTlO4ZZOrya1fATLPfskAYMwNPirZdeMPl5cRiBG7Cd8iUBIf4L6vEFRVH89e4Aji2orQAAAPhJREFUSMe11kdCAkEQRuExIiZQMaAoKJgjIOYASkZghHf/szhH4C2c9beY7q6qv4J6MDOe/AumG1PN1uR8RDg7FxMc5tdSXcHhZ2vQFxx69bThbO/s7gkOv5uZrOBwczm8FxxK+xeGE+bKTcGhePhRFRwaD68VwWH0PGgJTufp5U1weH+stQWPnu3g6FbwqPLyw77gcHJ1ajjh9dmd4FA4/vwSPDrz93lX8Kh5NtYNp5NMrAoO8ZWltuCwuLzwb1z9jDuqukj1TKoIXImpAlbtoZpPtbYbHGosqaGnRqob2CoOVNioKHNBqWJYhbxaIdSCItcft1z9AZ6Q7090NAAsAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    margin-right: 0.5vw;
    vertical-align: top;
    position: relative;
    top: 0.8vw; }
  .section-2 .sec-tit {
    font-family: NewOPPOSansBold;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0vw;
    top: 53vw; }
  .section-2 .sec-title {
    font-family: NewOPPOSansMedium;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0vw;
    top: 59vw; }
  .section-2 .sec-text {
    line-height: 5.8vw;
    margin: 0 auto 8.64258vw;
    text-align: center;
    width: 69.67773vw;
    position: absolute;
    top: 7.27539vw;
    left: 13.81836vw; }
  .section-2 .sec-text span {
    display: none; }
  .section-2 .sec-tip {
    width: 81.93359vw;
    left: 6.34766vw;
    padding-left: 5.9vw;
    bottom: 5.4vw;
    color: #a8adb1; }
  .section-2 .sec-tip span {
    text-align: left; }
  .sec2-bg {
    width: 100vw;
    height: 96.14258vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-3 {
    width: 100%;
    height: 138.67188vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-3 .wrapper {
    width: 81.93359vw;
    position: absolute;
    top: 0;
    left: 6.34766vw; }
  .section-3 .sec-title {
    padding-top: 10.2vw;
    margin: 0 auto 0.8vw; }
  .section-3 .sec-text {
    font-size: 2.34375vw;
    line-height: 3.76vw;
    margin: 0 auto 4.8vw; }
  .section-3 .sec-tip {
    color: #d6dae6;
    padding-left: 0; }
  .section-3 .sec-tip p {
    padding-left: 2.4vw; }
  .section-3 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-3 .sec-tip span {
    width: 2.4vw; }
  .sec3-bg {
    width: 100vw;
    height: 138.67188vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-4 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-4 .wrapper {
    width: 89vw;
    margin: 0 auto;
    padding-bottom: 114vw; }
  .section-4 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 0.8vw;
    color: #333333; }
  .section-4 .sec-tit {
    color: #333333;
    margin-bottom: 4.24805vw; }
  .section-4 .sec-text {
    color: #868686;
    margin: 0 auto 2.5vw;
    font-size: 2.34375vw; }
  .section-4 .btn-learnmore {
    color: #333333;
    border: 0.09766vw solid #333333; }
  .section-4 .sec-tip {
    color: #a4a4a4;
    width: 99%; }
  .section-4 .sec-title1 {
    color: #63c45d;
    padding-top: 0;
    margin: 0 auto; }
  .section-4 .sec-text1 {
    color: #333333;
    font-family: NewOPPOSans;
    margin: 0 auto 2.6vw; }
  .section-4 .sec4-img1 {
    width: 57.8125vw;
    height: 69.0918vw;
    position: absolute;
    bottom: 36vw;
    left: 36.81641vw; }
  .section-4 .sec4-img2 {
    width: 59.0332vw;
    height: 64.89258vw;
    position: absolute;
    bottom: 10vw;
    left: 8.39844vw; }
  .section-4 .sec-data-box {
    height: 12.8vw;
    margin: 0 auto; }
  .section-4 .data-text {
    font-size: 2.09961vw; }
  .section-4 .sec-data {
    width: 27.01vw; }
  .section-5 {
    width: 100%;
    height: 152.09961vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-5 .wrapper {
    width: 87.20703vw;
    position: absolute;
    top: 0;
    left: 6.34766vw;
    padding-top: 5.5vw; }
  .section-5 .sec-tit {
    width: 29.98047vw;
    height: 3.41797vw;
    margin: 0 0 3.71094vw;
    background: url(../png/sec5-tit-f9333668e9d5e27b665f28554123b6e8.png) no-repeat;
    background-size: 100%; }
  .section-5 .sec-title {
    padding-top: 0;
    margin: 0 auto 4.19922vw; }
  .section-5 .sec-text {
    margin: 0 auto 3.56445vw;
    font-size: 2.34375vw; }
  .section-5 .sec-tip {
    bottom: 4.4vw;
    color: #d3d1d2; }
  .section-5 .sec-data-box {
    width: 54vw;
    height: auto;
    margin: 0; }
  .section-5 .sec-data {
    width: 12.9vw;
    height: 12vw;
    vertical-align: top; }
  .section-5 .data-text {
    width: 12vw;
    color: #fefefe;
    font-family: NewOPPOSansMedium;
    font-size: 1.75781vw;
    line-height: 2.24609vw; }
  .section-5 .icon-data {
    width: 4.98047vw;
    height: 5.27344vw;
    background: url(../png/icon-data5-0e5cd46ca6050321cd0933476ee7b061.png) no-repeat;
    background-size: 86.91406vw; }
  .section-5 .icon-data1 {
    background-position: 0 0; }
  .section-5 .icon-data2 {
    background-position: -11.76758vw 0; }
  .section-5 .icon-data3 {
    background-position: -22.99805vw 0; }
  .section-5 .icon-data4 {
    background-position: -34.57031vw 0; }
  .section-5 .icon-data5 {
    background-position: -45.84961vw 0; }
  .section-5 .icon-data6 {
    background-position: -56.68945vw 0; }
  .section-5 .icon-data7 {
    background-position: -67.5293vw 0; }
  .section-5 .icon-data8 {
    background-position: -79.15039vw 0; }
  .section-5 .btn-learnmore {
    margin-top: 5.85938vw; }
  .section-5 .sec5-bg {
    width: 100vw;
    height: 152.09961vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-6 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-6 .wrapper {
    width: 87.64648vw;
    margin: 0 auto;
    padding-bottom: 116vw; }
  .section-6 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 0.9vw;
    color: #333333; }
  .section-6 .sec-tit {
    color: #333333;
    margin: 0 auto 2.7vw; }
  .section-6 .sec-text {
    margin: 0 auto 2vw;
    color: #868686;
    font-size: 2.34375vw; }
  .section-6 .sec-text span {
    color: #63c45d; }
  .section-6 .sec-data-box {
    height: 8vw;
    margin: 0 auto 4.8vw; }
  .section-6 .sec-data {
    width: auto;
    margin-right: 3vw; }
  .section-6 .data-desc {
    font-size: 4.88281vw;
    color: #333333;
    margin-bottom: 0.8vw;
    font-size: 2.58789vw;
    font-family: NewOPPOSansMedium;
    line-height: 3vw; }
  .section-6 .data-desc span {
    font-size: 4.6875vw;
    line-height: 4.88281vw;
    color: #63c45d;
    font-family: NewOPPOSansBold; }
  .section-6 .data-text {
    font-size: 2.09961vw; }
  .section-6 .btn-learnmore {
    color: #333333;
    border: 0.09766vw solid #333333; }
  .section-6 .sec-tip {
    color: #a2a2a2;
    padding-left: 0; }
  .section-6 .sec-tip p {
    padding-left: 2.4vw; }
  .section-6 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-6 .sec-tip span {
    width: 2.4vw; }
  .section-6 .sec6-img1 {
    width: 44.9707vw;
    height: 79.39453vw;
    position: absolute;
    bottom: 28vw;
    left: 26.85547vw;
    background: url(../png/sec6-img1-fd13cdb1dc79e37c6e650b50bedfc103.png) no-repeat;
    background-size: 100%; }
  .icon-jb {
    font-style: normal;
    position: relative;
    top: 0.3vw; }
  .section-7 {
    width: 100%;
    height: 137.98828vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-7 .wrapper {
    width: 87.10938vw;
    position: absolute;
    top: 0;
    left: 6.00586vw; }
  .section-7 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 1.8vw; }
  .section-7 .sec-text {
    margin: 0 auto 2vw;
    font-size: 2.34375vw; }
  .section-7 .sec-data-box {
    width: 93%;
    margin-left: 0;
    margin-bottom: 3.3vw; }
  .section-7 .sec-data {
    width: 36vw;
    height: 13vw; }
  .section-7 .data-desc {
    font-size: 4.88281vw;
    margin-bottom: 0.8vw; }
  .section-7 .data-desc span {
    font-size: 2.58789vw;
    color: #ffffff; }
  .section-7 .data-text {
    width: 18vw;
    color: #ffffff; }
  .section-7 .sec-tip {
    color: #d2d3d5; }
  .section-7 .sec-bg7 {
    width: 100vw;
    height: 137.98828vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-8 {
    width: 100%;
    height: auto;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden; }
  .section-8 .wrapper {
    width: 83.83789vw;
    margin: 0 auto;
    padding-bottom: 50vw; }
  .section-8 .sec-title {
    padding-top: 5vw;
    margin: 0 auto 1.8vw;
    color: #333333;
    text-align: left; }
  .section-8 .sec-text {
    width: 100%;
    margin: 0 auto 2vw;
    color: #868686;
    text-align: left;
    font-size: 2.34375vw; }
  .section-8 .btn-learnmore {
    color: #333333;
    border: 0.09766vw solid #333333; }
  .section-8 .sec-data-box {
    width: 100%;
    text-align: left;
    margin: 0 auto 5.2vw; }
  .section-8 .sec-data {
    width: auto;
    display: inline-block;
    text-align: center;
    margin-right: 3vw; }
  .section-8 .icon-data {
    width: 4.39453vw;
    height: 4.4vw;
    margin-bottom: 0.6vw;
    background: url(../png/icon-data8-e45b92bbe082f9df1bffd3447cda13e6-2.png) no-repeat;
    background-size: 42.67578vw; }
  .section-8 .icon-data1 {
    background-position: 0 0; }
  .section-8 .icon-data2 {
    background-position: -12.69531vw 0; }
  .section-8 .icon-data3 {
    background-position: -25.97656vw 0; }
  .section-8 .icon-data4 {
    background-position: -39.11133vw 0; }
  .section-8 .data-text {
    font-size: 1.75781vw;
    color: #333333;
    line-height: 2.4vw;
    text-align: left; }
  .section-8 .sec8-img {
    width: 62.54883vw;
    height: 42.77344vw;
    position: absolute;
    bottom: 0;
    left: 11.2vw; }
  .section-9 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    padding-bottom: 6vw; }
  .notes-list {
    width: 90.9668vw;
    padding-top: 8.74023vw;
    margin-left: 5.41992vw; }
  .notes-list li {
    font-size: 1.75781vw;
    color: #959595;
    line-height: 2.9vw;
    padding-left: 2.8vw;
    position: relative;
    opacity: 0.4;
    font-family: NewOPPOSansMedium; }
  .notes-list li.li-notes {
    padding-left: 0; }
  .notes-list li span {
    width: 1.95312vw;
    position: absolute;
    top: 0;
    left: 0; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .product-vid {
    width: 80vw;
    height: 55vw; }
  .btn-product-close {
    font-size: 1.5rem;
    position: absolute;
    top: -0.9rem;
    right: -0.3rem; }
  .wrapper {
    width: 83.33333vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 11; }
  .sec-title {
    width: 100%;
    font-size: 5.46875vw;
    color: #ffffff;
    line-height: 8.6vw;
    padding-top: 11vw;
    margin: 0 auto 0.7vw;
    font-family: NewOPPOSansBold; }
  .sec-tit {
    width: 100%;
    font-size: 3.38542vw;
    color: #ffffff;
    line-height: 4.4vw;
    margin: 0 auto 4.8vw;
    font-family: NewOPPOSansMedium; }
  .sec-text {
    width: 100%;
    font-size: 3.125vw;
    color: #ffffff;
    line-height: 4.8vw;
    margin: 0 auto 3.1vw;
    font-family: NewOPPOSansMedium; }
  .sec-tip {
    width: 100%;
    font-size: 0.95486vw;
    color: #d6dae6;
    line-height: 2.8vw;
    font-family: NewOPPOSans;
    padding-left: 6vw;
    position: absolute;
    bottom: 5.6vw;
    left: 0; }
  .sec-tip span {
    display: inline-block;
    width: 6vw;
    position: absolute;
    top: 0;
    left: 0; }
  .sec-tip p {
    position: relative; }
  .sec-data-box {
    width: 100%;
    margin: 0 auto; }
  .sec-data {
    width: 29vw;
    display: inline-block;
    vertical-align: top; }
  .data-desc {
    font-size: 5.20833vw;
    line-height: 6vw;
    color: #2ec84d;
    margin-bottom: 0.4vw;
    font-family: NewOPPOSansBold; }
  .data-desc span {
    font-size: 2.73438vw;
    line-height: 3vw;
    color: #333333;
    padding-left: 0.8vw;
    font-family: NewOPPOSansMedium; }
  .data-text {
    font-size: 2.08333vw;
    color: #333333;
    line-height: 2.4vw;
    font-family: NewOPPOSans; }
  .btn-learnmore {
    display: inline-block;
    width: auto;
    font-size: .32rem;
    padding: .2rem .5rem;
    line-height: .45rem;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 1rem;
    text-align: center;
    font-family: NewOPPOSansBold; }
  .section-1 {
    width: 100%;
    height: 80vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .watch-title {
    width: 100vw;
    height: 74.60938vw;
    background: url(../png/watch-title-bb414495a0c8a892f6e14b1a0fe25b34.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -4vw;
    left: -8.33333vw;
    transition: all 1s .6s;
    opacity: 0; }
  .watch-bg {
    width: 100vw;
    height: 74.60938vw;
    background: url(../png/watch-bg-e1565badcdd3be24a3c38ae21912cba1.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -4vw;
    left: -8.33333vw;
    z-index: 2;
    transition: all 1s .2s;
    opacity: 0; }
  .section-1.on .watch-title {
    bottom: 0vw;
    opacity: 1; }
  .section-1.on .watch-bg {
    bottom: 0vw;
    opacity: 1; }
  .section-2 {
    width: 100%;
    height: 122.85156vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .btn-playvideo {
    display: block;
    width: 37.76042vw;
    height: 3.90625vw;
    font-size: 2.92969vw;
    color: #ffffff;
    line-height: 3.8vw;
    text-align: center;
    margin: 0 auto;
    font-family: NewOPPOSansMedium; }
  .btn-playvideo span {
    display: inline-block;
    border-bottom: 1px solid #ffffff;
    vertical-align: top; }
  .icon-play {
    display: inline-block;
    width: 3.125vw;
    height: 3.51562vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA0CAMAAADCKvr4AAAABGdBTUEAALGPC/xhBQAAAP9QTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////jRvcfgAAAFR0Uk5TQ5LvB9169hZV+/10vsYziNjLRp5f0Lb63y2FHG2owQ/g0mev+MTlO4ZZOrya1fATLPfskAYMwNPirZdeMPl5cRiBG7Cd8iUBIf4L6vEFRVH89e4Aji2orQAAAPhJREFUSMe11kdCAkEQRuExIiZQMaAoKJgjIOYASkZghHf/szhH4C2c9beY7q6qv4J6MDOe/AumG1PN1uR8RDg7FxMc5tdSXcHhZ2vQFxx69bThbO/s7gkOv5uZrOBwczm8FxxK+xeGE+bKTcGhePhRFRwaD68VwWH0PGgJTufp5U1weH+stQWPnu3g6FbwqPLyw77gcHJ1ajjh9dmd4FA4/vwSPDrz93lX8Kh5NtYNp5NMrAoO8ZWltuCwuLzwb1z9jDuqukj1TKoIXImpAlbtoZpPtbYbHGosqaGnRqob2CoOVNioKHNBqWJYhbxaIdSCItcft1z9AZ6Q7090NAAsAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    margin-right: 1vw;
    vertical-align: top;
    position: relative;
    top: 0.55vw; }
  .section-2 .sec-tit {
    padding-top: 73.5vw;
    font-size: 3.38542vw;
    line-height: 4vw;
    margin: 0 auto 0.2vw;
    text-align: center; }
  .section-2 .sec-title {
    padding-top: 0;
    margin: 0 auto 11.6vw;
    font-size: 5.46875vw;
    line-height: 6.6vw;
    text-align: center; }
  .section-2 .sec-text {
    font-size: 3.77604vw;
    line-height: 8.8vw;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top: 15.4vw;
    left: 0; }
  .section-2 .sec-text span {
    display: none; }
  .section-2 .sec-tip {
    width: 100%;
    color: #a8adb1; }
  .sec2-bg {
    width: 100vw;
    height: 122.85156vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-3 {
    width: 100%;
    height: 181.3151vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-3 .sec-text {
    margin: 0 auto 6.1vw; }
  .section-3 .sec-tip {
    color: #d6dae6;
    padding-left: 0; }
  .section-3 .sec-tip p {
    padding-left: 2.4vw; }
  .section-3 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-3 .sec-tip span {
    width: 2.4vw; }
  .sec3-bg {
    width: 100vw;
    height: 181.3151vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-4 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-4 .wrapper {
    padding-bottom: 100vw; }
  .section-4 .sec-title {
    color: #333333; }
  .section-4 .sec-tit {
    color: #333333; }
  .section-4 .sec-text {
    color: #333333;
    margin: 0 auto 5vw; }
  .section-4 .btn-learnmore {
    color: #333333;
    border: 0.13021vw solid #333333; }
  .section-4 .sec-tip {
    color: #a4a4a4; }
  .section-4 .sec-title1 {
    color: #2ec84d;
    padding-top: 0;
    margin: 0 auto;
    font-size: 5.20833vw;
    line-height: 6.4vw; }
  .section-4 .sec-text1 {
    color: #333333;
    font-family: NewOPPOSans;
    margin: 0 auto 3.6vw;
    font-size: 2.08333vw;
    line-height: 3vw; }
  .section-4 .sec4-img1 {
    width: 100vw;
    height: 56.90104vw;
    position: absolute;
    bottom: 35.7vw;
    left: 0; }
  .section-4 .sec4-img2 {
    width: 100vw;
    height: 53.51562vw;
    position: absolute;
    bottom: 13.8vw;
    left: 0; }
  .section-4 .sec-data-box {
    width: 90vw;
    height: 14.6vw; }
  .section-5 {
    width: 100%;
    height: 188.67188vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-5 .wrapper {
    padding-top: 12.9vw; }
  .section-5 .sec-tit {
    width: 39.97396vw;
    height: 4.49219vw;
    margin: 0 0 1.1vw;
    background: url(../png/sec5-tit-1de2f636bbe5b454a9b0b0aff1728be8.png) no-repeat;
    background-size: 100%; }
  .section-5 .sec-title {
    padding-top: 0;
    margin: 0 auto 3.2vw; }
  .section-5 .sec-text {
    margin: 0 auto 1.1vw; }
  .section-5 .sec-tip {
    bottom: 5.8vw;
    color: #d3d1d2; }
  .section-5 .sec-data-box {
    width: 64vw;
    height: 40.8vw;
    margin: 0; }
  .section-5 .sec-data {
    width: 13.2vw;
    height: 17.4vw;
    vertical-align: top; }
  .section-5 .data-text {
    color: #fefefe;
    font-family: NewOPPOSansMedium;
    font-size: 1.69271vw; }
  .section-5 .icon-data {
    width: 12vw;
    height: 10.5vw;
    background: url(../png/icon-data5-f947da82871860c4f94fb1e32806d618.png) no-repeat;
    background-size: 52.92969vw; }
  .section-5 .icon-data1 {
    background-position: 0 2.5vw; }
  .section-5 .icon-data2 {
    background-position: -14.0625vw 2.5vw; }
  .section-5 .icon-data3 {
    background-position: -27.27865vw 2.5vw; }
  .section-5 .icon-data4 {
    background-position: -40.88542vw 2.5vw; }
  .section-5 .icon-data5 {
    background-position: 0 -14.4vw; }
  .section-5 .icon-data6 {
    background-position: -14.1276vw -14.4vw; }
  .section-5 .icon-data7 {
    background-position: -27.27865vw -14.4vw; }
  .section-5 .icon-data8 {
    background-position: -40.88542vw -14.4vw; }
  .section-5 .sec5-bg {
    width: 100vw;
    height: 188.67188vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-6 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-6 .wrapper {
    padding-bottom: 102vw; }
  .section-6 .sec-title {
    padding-top: 11vw;
    margin: 0 auto 0.7vw;
    color: #333333; }
  .section-6 .sec-tit {
    color: #333333;
    margin: 0 auto 4.8vw; }
  .section-6 .sec-text {
    margin: 0 auto 4.4vw;
    color: #868686; }
  .section-6 .sec-text span {
    color: #63c45d; }
  .section-6 .sec-data-box {
    width: 92vw;
    height: 15.2vw;
    margin: 0 auto; }
  .section-6 .sec-data {
    width: auto;
    margin-right: 2vw; }
  .section-6 .data-desc {
    font-size: 2.73438vw;
    color: #333333;
    font-family: NewOPPOSansMedium;
    line-height: 4vw; }
  .section-6 .data-desc span {
    font-size: 5.20833vw;
    color: #63c45d;
    font-family: NewOPPOSansBold; }
  .section-6 .btn-learnmore {
    color: #333333;
    border: 0.13021vw solid #333333; }
  .section-6 .sec-tip {
    color: #a2a2a2;
    bottom: 6vw;
    padding-left: 0; }
  .section-6 .sec-tip p {
    padding-left: 2.4vw; }
  .section-6 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-6 .sec-tip span {
    width: 2.4vw; }
  .section-6 .sec6-img1 {
    width: 33.39844vw;
    height: 59.04948vw;
    position: absolute;
    bottom: 30vw;
    left: 32vw;
    background: url(../png/sec6-img1-245a395c04ff9063bd07c74e339d8ae5.png) no-repeat;
    background-size: 100%; }
  .icon-jb {
    font-style: normal;
    position: relative;
    top: 0.3vw; }
  .section-7 {
    width: 100%;
    height: auto;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-7 .wrapper {
    padding-bottom: 111vw; }
  .section-7 .sec-title {
    margin: 0 auto 3.4vw; }
  .section-7 .sec-text {
    margin: 0 auto 4.6vw; }
  .section-7 .sec-data-box {
    width: 100%;
    height: 27vw;
    margin: 0; }
  .section-7 .sec-data {
    width: 38vw;
    height: 12vw; }
  .section-7 .data-desc span {
    color: #ffffff; }
  .section-7 .data-text {
    color: #ffffff; }
  .section-7 .sec-tip {
    color: #d2d3d5;
    bottom: 4vw; }
  .section-7 .sec-bg7 {
    width: 100vw;
    height: 211.32812vw;
    position: absolute;
    bottom: 0;
    left: 0; }
  .section-8 {
    width: 100%;
    height: auto;
    background-color: #fafafa;
    position: relative;
    overflow: visible;
    z-index: 5; }
  .section-8 .wrapper {
    padding-bottom: 70vw; }
  .section-8 .sec-title {
    color: #333333;
    margin: 0 0 3.8vw; }
  .section-8 .sec-text {
    color: #868686;
    line-height: 4.6vw;
    margin: 0 auto 6.1vw; }
  .section-8 .btn-learnmore {
    color: #333333;
    border: 0.13021vw solid #333333; }
  .section-8 .sec-data-box {
    width: 90vw;
    height: 16.7vw; }
  .section-8 .sec-data {
    width: auto;
    display: inline-block;
    margin-right: 6vw; }
  .section-8 .icon-data {
    width: 5.85938vw;
    height: 6vw;
    background: url(../png/icon-data8-bcb6df189a9c081d5c763434168a47ed.png) no-repeat;
    background-size: 68.16406vw; }
  .section-8 .icon-data1 {
    background-position: 0 0; }
  .section-8 .icon-data2 {
    background-position: -20.76823vw 0; }
  .section-8 .icon-data3 {
    background-position: -42.2526vw 0; }
  .section-8 .icon-data4 {
    background-position: -63.54167vw 0; }
  .section-8 .data-text {
    font-size: 1.69271vw;
    font-family: NewOPPOSansMedium; }
  .section-8 .sec8-img {
    width: 100vw;
    height: 63.93229vw;
    position: absolute;
    bottom: 0;
    left: -8.33333vw; }
  .section-9 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .notes-list {
    width: 100%;
    margin: 0 auto;
    padding: 12.4vw 0 18vw; }
  .notes-list li {
    font-size: 0.95486vw;
    color: #868686;
    line-height: 2.4vw;
    padding-left: 3.4vw;
    position: relative;
    opacity: 0.4;
    font-family: NewOPPOSans;
    margin-bottom: 0.1vw; }
  .notes-list li.li-notes {
    padding-left: 0; }
  .notes-list li span {
    width: 3.4vw;
    position: absolute;
    top: 0;
    left: 0; } }

@media only screen and (max-width: 767px) {
  .product-vid {
    width: 80vw;
    height: 55vw; }
  .btn-product-close {
    font-size: 1.5rem;
    position: absolute;
    top: -0.9rem;
    right: -0.3rem; }
  .block-360 {
    display: block !important; }
  .wrapper {
    width: 88.88889vw;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 11; }
  .sec-title {
    width: 100%;
    font-size: 6.94444vw;
    color: #ffffff;
    line-height: 9.4vw;
    padding-top: 15vw;
    margin: 0 auto 5.8vw;
    font-family: NewOPPOSansBold; }
  .sec-tit {
    width: 100%;
    font-size: 4.35185vw;
    color: #ffffff;
    line-height: 4.4vw;
    margin: 0 auto 6.4vw;
    font-family: NewOPPOSansMedium; }
  .sec-text {
    width: 100%;
    font-size: 3.7037vw;
    color: #ffffff;
    line-height: 6.7vw;
    margin: 0 auto 3.1vw;
    font-family: NewOPPOSansMedium; }
  .sec-tip {
    width: 100%;
    font-size: 2.03704vw;
    color: #d6dae6;
    line-height: 2.8vw;
    font-family: NewOPPOSans;
    padding-left: 7vw;
    position: absolute;
    bottom: 7.6vw;
    left: 0; }
  .sec-tip span {
    display: inline-block;
    width: 7vw;
    position: absolute;
    top: 0;
    left: 0; }
  .sec-tip p {
    position: relative; }
  .sec-data-box {
    width: 100%;
    margin: 0 auto; }
  .sec-data {
    width: 28.88889vw;
    display: inline-block;
    vertical-align: top; }
  .data-desc {
    font-size: 5.18519vw;
    line-height: 6vw;
    color: #63c45d;
    margin-bottom: 0.4vw;
    font-family: NewOPPOSansBold; }
  .data-desc span {
    font-size: 2.59259vw;
    line-height: 3vw;
    color: #333333;
    padding-left: 0.8vw;
    font-family: NewOPPOSansMedium; }
  .data-text {
    font-size: 2.03704vw;
    color: #333333;
    line-height: 2.4vw;
    font-family: NewOPPOSans; }
  .btn-learnmore {
    display: inline-block;
    padding: 0 4.8vw;
    font-size: 3.05556vw;
    color: #ffffff;
    padding-bottom: 1px;
    line-height: 7.40741vw;
    border: 1px solid #ffffff;
    border-radius: 10vw;
    text-align: center;
    font-family: NewOPPOSansBold; }
  .section-1 {
    width: 100%;
    height: 78vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .watch-title {
    width: 100vw;
    height: 75.64815vw;
    background: url(../png/watch-title-014aae0f5faa78a608c71608ad109fa4.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -4vw;
    left: -5.55556vw;
    transition: all 1s .6s;
    opacity: 0; }
  .watch-bg {
    width: 100vw;
    height: 75.64815vw;
    background: url(../png/watch-bg-469b9cd32b56873291c3fe20843bb422.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -4vw;
    left: -5.55556vw;
    z-index: 2;
    transition: all 1s .2s;
    opacity: 0; }
  .section-1.on .watch-title {
    bottom: 0vw;
    opacity: 1; }
  .section-1.on .watch-bg {
    bottom: 0vw;
    opacity: 1; }
  .section-2 {
    width: 100%;
    height: 133.42593vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .btn-playvideo {
    display: block;
    width: 80.55556vw;
    height: 8.33333vw;
    font-size: 2.96296vw;
    color: #ffffff;
    line-height: 4.44444vw;
    text-align: center;
    margin: 0 auto;
    font-family: NewOPPOSansMedium; }
  .btn-playvideo span {
    display: inline-block;
    border-bottom: 1px solid #ffffff;
    vertical-align: top; }
  .icon-play {
    display: inline-block;
    width: 3.14815vw;
    height: 3.51852vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAA0CAMAAADCKvr4AAAABGdBTUEAALGPC/xhBQAAAP9QTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////jRvcfgAAAFR0Uk5TQ5LvB9169hZV+/10vsYziNjLRp5f0Lb63y2FHG2owQ/g0mev+MTlO4ZZOrya1fATLPfskAYMwNPirZdeMPl5cRiBG7Cd8iUBIf4L6vEFRVH89e4Aji2orQAAAPhJREFUSMe11kdCAkEQRuExIiZQMaAoKJgjIOYASkZghHf/szhH4C2c9beY7q6qv4J6MDOe/AumG1PN1uR8RDg7FxMc5tdSXcHhZ2vQFxx69bThbO/s7gkOv5uZrOBwczm8FxxK+xeGE+bKTcGhePhRFRwaD68VwWH0PGgJTufp5U1weH+stQWPnu3g6FbwqPLyw77gcHJ1ajjh9dmd4FA4/vwSPDrz93lX8Kh5NtYNp5NMrAoO8ZWltuCwuLzwb1z9jDuqukj1TKoIXImpAlbtoZpPtbYbHGosqaGnRqob2CoOVNioKHNBqWJYhbxaIdSCItcft1z9AZ6Q7090NAAsAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    margin-right: 1vw;
    vertical-align: top;
    position: relative;
    top: 0.55vw; }
  .section-2 .sec-tit {
    padding-top: 79.2vw;
    font-size: 3.7037vw;
    line-height: 4vw;
    margin: 0 auto 1.3vw;
    text-align: center; }
  .section-2 .sec-title {
    padding-top: 0;
    margin: 0 auto 13.6vw;
    font-size: 5.92593vw;
    line-height: 6.6vw;
    text-align: center; }
  .section-2 .sec-text {
    font-size: 5.18519vw;
    line-height: 9.1vw;
    margin: 0 auto 8vw;
    text-align: center;
    position: absolute;
    top: 14vw;
    left: 0; }
  .section-2 .sec-text span {
    display: none; }
  .section-2 .sec-tip {
    color: #a8adb1; }
  .sec2-bg {
    width: 100vw;
    height: 133.42593vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-3 {
    width: 100%;
    height: 237.68519vw;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-3 .sec-title {
    margin: 0 auto 2.4vw; }
  .section-3 .sec-text {
    margin: 0 auto 8.5vw; }
  .section-3 .sec-tip {
    color: #d6dae6;
    padding-left: 0; }
  .section-3 .sec-tip p {
    padding-left: 2.8vw; }
  .section-3 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-3 .sec-tip span {
    width: 2.8vw; }
  .sec3-bg {
    width: 100vw;
    height: 237.68519vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-4 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-4 .wrapper {
    padding-bottom: 120vw; }
  .section-4 .sec-title {
    margin: 0 auto 2.4vw;
    color: #333333; }
  .section-4 .sec-tit {
    color: #333333; }
  .section-4 .sec-text {
    color: #868686;
    margin: 0 auto 5vw; }
  .section-4 .btn-learnmore {
    color: #333333;
    border: 0.27778vw solid #333333; }
  .section-4 .sec-tip {
    color: #a4a4a4; }
  .section-4 .sec-title1 {
    color: #2ec84d;
    padding-top: 0;
    margin: 0 auto;
    font-size: 5.18519vw;
    line-height: 6.4vw; }
  .section-4 .sec-text1 {
    color: #333333;
    font-family: NewOPPOSans;
    margin: 0 auto 3.6vw;
    font-size: 2.03704vw;
    line-height: 3vw; }
  .section-4 .sec4-img1 {
    width: 47.96296vw;
    height: 57.03704vw;
    position: absolute;
    bottom: 50.5vw;
    left: 36.5vw; }
  .section-4 .sec4-img2 {
    width: 48.7963vw;
    height: 53.61111vw;
    position: absolute;
    bottom: 28vw;
    left: 13vw; }
  .section-4 .sec-data-box {
    height: 19vw; }
  .section-5 {
    width: 100%;
    height: auto;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-5 .wrapper {
    padding-top: 16.7vw;
    padding-bottom: 56.6vw; }
  .section-5 .sec-tit {
    width: 56.85185vw;
    height: 6.66667vw;
    margin: 0 0 2.4vw;
    background: url(../png/sec5-tit-1de2f636bbe5b454a9b0b0aff1728be8-2.png) no-repeat;
    background-size: 100%; }
  .section-5 .sec-title {
    padding-top: 0;
    margin: 0 auto 5.2vw; }
  .section-5 .sec-text {
    margin: 0 auto 1.6vw; }
  .section-5 .sec-tip {
    bottom: 5.4vw;
    color: #d3d1d2; }
  .section-5 .sec-data-box {
    width: 70vw;
    height: 51vw;
    margin: 0; }
  .section-5 .sec-data {
    width: 15.8vw;
    height: 20.8vw;
    vertical-align: top; }
  .section-5 .data-text {
    color: #fefefe;
    font-family: NewOPPOSansMedium;
    font-size: 2.03704vw;
    line-height: 2.8vw; }
  .section-5 .icon-data {
    width: 12vw;
    height: 11.6vw;
    background: url(../png/icon-data5-4b43dd0c07b8e802ce99bbbf6b06bb62.png) no-repeat;
    background-size: 63.61111vw; }
  .section-5 .icon-data1 {
    background-position: 0 2.5vw; }
  .section-5 .icon-data2 {
    background-position: -16.94444vw 2.5vw; }
  .section-5 .icon-data3 {
    background-position: -32.77778vw 2.5vw; }
  .section-5 .icon-data4 {
    background-position: -49.16667vw 2.5vw; }
  .section-5 .icon-data5 {
    background-position: 0 -18.4vw; }
  .section-5 .icon-data6 {
    background-position: -16.94444vw -18.4vw; }
  .section-5 .icon-data7 {
    background-position: -32.77778vw -18.4vw; }
  .section-5 .icon-data8 {
    background-position: -49.16667vw -18.4vw; }
  .section-5 .sec5-bg {
    width: 100vw;
    height: 215.74074vw;
    position: absolute;
    bottom: 0;
    left: 0; }
  .section-6 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .section-6 .wrapper {
    padding-bottom: 108vw; }
  .section-6 .sec-title {
    padding-top: 15vw;
    margin: 0 auto 1.9vw;
    color: #333333; }
  .section-6 .sec-tit {
    color: #333333;
    margin: 0 auto 6.4vw; }
  .section-6 .sec-text {
    margin: 0 auto 5.4vw;
    color: #868686; }
  .section-6 .sec-text span {
    color: #63c45d; }
  .section-6 .sec-data-box {
    height: 18.5vw;
    margin: 0 auto; }
  .section-6 .sec-data {
    width: auto;
    margin-right: 2.6vw; }
  .section-6 .data-desc {
    font-size: 2.59259vw;
    color: #333333;
    font-family: NewOPPOSansMedium;
    line-height: 5vw; }
  .section-6 .data-desc span {
    font-size: 5.18519vw;
    color: #63c45d;
    font-family: NewOPPOSansBold; }
  .section-6 .btn-learnmore {
    color: #333333;
    border: 0.27778vw solid #333333; }
  .section-6 .sec-tip {
    color: #a2a2a2;
    padding-left: 0; }
  .section-6 .sec-tip p {
    padding-left: 2.8vw; }
  .section-6 .sec-tip p.notes-p {
    padding-left: 0; }
  .section-6 .sec-tip span {
    width: 2.8vw; }
  .section-6 .sec6-img1 {
    width: 33.42593vw;
    height: 59.07407vw;
    position: absolute;
    bottom: 38vw;
    left: 32vw;
    background: url(../png/sec6-img1-a8904ed1183a1b820b7ee41350aa9535.png) no-repeat;
    background-size: 100%; }
  .icon-jb {
    font-style: normal;
    position: relative;
    top: 0.3vw; }
  .section-7 {
    width: 100%;
    height: 242.77778vw;
    background-color: #000000;
    position: relative;
    overflow: hidden; }
  .section-7 .sec-title {
    margin: 0 auto 5.2vw; }
  .section-7 .sec-text {
    margin: 0 auto 5vw; }
  .section-7 .sec-data-box {
    width: 82vw;
    height: 33vw;
    margin: 0; }
  .section-7 .sec-data {
    width: 36vw;
    height: 14vw; }
  .section-7 .data-desc span {
    color: #ffffff; }
  .section-7 .data-text {
    color: #ffffff; }
  .section-7 .sec-tip {
    color: #d2d3d5; }
  .section-7 .sec-bg7 {
    width: 100vw;
    height: 242.77778vw;
    position: absolute;
    top: 0;
    left: 0; }
  .section-8 {
    width: 100%;
    height: auto;
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden; }
  .section-8 .wrapper {
    padding-bottom: 78vw; }
  .section-8 .sec-title {
    width: 80vw;
    color: #333333;
    margin: 0 0 5.8vw; }
  .section-8 .sec-text {
    color: #868686;
    margin: 0 auto 3.1vw; }
  .section-8 .btn-learnmore {
    color: #333333;
    border: 0.27778vw solid #333333; }
  .section-8 .sec-data-box {
    width: 100vw;
    height: 24vw; }
  .section-8 .sec-data {
    width: 21.6vw;
    display: inline-block; }
  .section-8 .icon-data {
    width: 10.55556vw;
    height: 7.8vw;
    background: url(../png/icon-data8-52c4658bc9838cfd506532870b9938c3.png) no-repeat;
    background-size: 72.96296vw; }
  .section-8 .icon-data1 {
    background-position: 0 0; }
  .section-8 .icon-data2 {
    background-position: -22.22222vw 0; }
  .section-8 .icon-data3 {
    background-position: -44.81481vw 0; }
  .section-8 .icon-data4 {
    background-position: -67.31481vw 0; }
  .section-8 .data-text {
    color: #333333;
    line-height: 2.8vw; }
  .section-8 .sec8-img {
    width: 100vw;
    height: 65.18519vw;
    position: absolute;
    bottom: 0;
    left: -5.55556vw; }
  .section-9 {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: relative;
    overflow: hidden; }
  .notes-list {
    width: 100%;
    margin: 0 auto;
    padding: 16.4vw 0 20vw; }
  .notes-list li {
    font-size: 2.03704vw;
    color: #868686;
    line-height: 3.2vw;
    padding-left: 3.4vw;
    position: relative;
    opacity: 0.4;
    font-family: NewOPPOSansMedium;
    margin-bottom: 0.14vw; }
  .notes-list li.li-notes {
    padding-left: 0; }
  .notes-list li span {
    width: 3.4vw;
    position: absolute;
    top: 0;
    left: 0; } }