* {
  margin: 0;
  padding: 0;
  box-sizing: content-box; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%; }

em, b, i {
  font-style: normal; }

a {
  text-decoration: none; }

li {
  list-style: none; }

img {
  border: 0;
  width: 100%;
  vertical-align: middle;
  outline: none;
  -webkit-user-drag: none; }

button, input, select, textarea {
  font-size: 100%;
  outline: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  *zoom: 1; }

html, body {
  background: transparent;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-size: 0;
  background-color: #fff; }

@font-face {
  font-family: 'NewOPPOSansMedium';
  src: url("https://assorted.downloads.oppo.com/static/assets/opposans/OPPOSans-Medium.woff") format("woff"), url("https://assorted.downloads.oppo.com/static/assets/opposans/OPPOSans-Medium.ttf") format("truetype");
  /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: auto; }

@font-face {
  font-family: 'NewOPPOSansBold';
  src: url("https://assorted.downloads.oppo.com/static/assets/opposans/OPPOSans-Bold.woff") format("woff"), url("https://assorted.downloads.oppo.com/static/assets/opposans/OPPOSans-Bold.ttf") format("truetype");
  /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: auto; }

@font-face {
  font-family: 'NewOPPOSans';
  src: url("https://assorted.downloads.oppo.com/static/assets/opposans/OPPOSans-Regular.woff") format("woff"), url("https://assorted.downloads.oppo.com/static/assets/opposans/OPPOSans-Regular.ttf") format("truetype");
  /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: auto; }

b {
  font-family: 'NewOPPOSansBold';
  font-weight: normal; }

br {
  opacity: 0; }

picture {
  display: block; }

picture img {
  width: 100%;
  height: 100%; }

.section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'NewOPPOSans'; }

.section .fixed {
  position: fixed !important;
  pointer-events: none; }

/* width > 1920px */
@media screen and (min-width: 1921px) {
  .sec-3-phone1-pic.fixed {
    top: 1.6rem !important; } }

/* 1920px */
@media screen and (min-width: 1441px) {
  .section-center {
    width: 1170px; }
  h2 {
    color: #88ccc4;
    font-size: 80px;
    line-height: 110px;
    font-family: 'NewOPPOSansBold';
    font-weight: normal;
    letter-spacing: -2.666667px;
    background: -webkit-linear-gradient(219deg, #88ccc4, #c4f6de);
    background: linear-gradient(231deg, #88ccc4, #c4f6de);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 34px; }
  .ie h2 {
    background: none; }
  h2.nogradient {
    background: none;
    background-clip: border-box; }
  h3 {
    color: #333;
    font-size: 36px;
    line-height: 55px;
    letter-spacing: -1px;
    font-family: 'NewOPPOSansBold';
    font-weight: normal; }
  .default-text p, .default-text b {
    color: #333;
    font-size: 20px;
    line-height: 35px;
    font-weight: normal; }
  .small-text p, .small-text b {
    color: #000;
    font-size: 15px;
    line-height: 28px;
    font-weight: normal; }
  .default-text b, .small-text b {
    display: block; }
  .h2-c h2:first-child {
    padding-bottom: 40px;
    margin-bottom: -40px; }
  .h2-c h2:last-child {
    padding-bottom: 40px; }
  .section-1 {
    height: 706px;
    overflow: hidden; }
  .section-1 .section-center {
    position: relative; }
  .kv-phone {
    width: 1451px;
    height: 642px;
    position: absolute;
    bottom: 0;
    left: 92px; }
  .kv-slogan {
    position: absolute;
    top: 273px;
    left: 0; }
  .phone-model {
    width: 326px;
    height: 55px;
    margin-bottom: 12px; }
  h2.kv-slogan1 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #000;
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 30px;
    padding-bottom: 0;
    -webkit-text-fill-color: #000; }
  h3.kv-slogan2 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #222;
    font-size: 14px;
    line-height: 18px; }
  .section-2 {
    height: 500px;
    background-color: #f1f1f1; }
  .section-2 .section-center {
    overflow: hidden; }
  .sel-point {
    width: 100%;
    height: 315px;
    margin-top: 92px;
    position: relative; }
  .sel-point-item {
    position: absolute; }
  .sel-point-item:nth-child(1) {
    top: 0;
    left: 0; }
  .sel-point-item:nth-child(2) {
    top: 0;
    left: 50%;
    width: 246px;
    margin-left: -123px; }
  .sel-point-item:nth-child(3) {
    top: 0;
    right: 0;
    width: 274px; }
  .sel-point-item:nth-child(4) {
    bottom: 0;
    left: 0; }
  .sel-point-item:nth-child(5) {
    bottom: 0;
    left: 50%;
    width: 246px;
    margin-left: -123px; }
  .sel-point-item:nth-child(6) {
    bottom: 0;
    right: 0;
    width: 274px; }
  .sel-point-item picture {
    width: 76px;
    height: 49px;
    margin-bottom: 9px; }
  .sel-point-item b {
    display: block;
    font-size: 25px;
    line-height: 46px;
    font-weight: normal;
    letter-spacing: -0.3846154px;
    white-space: nowrap; }
  .sel-point-item span {
    display: block;
    font-size: 15px;
    line-height: 27px;
    font-weight: normal;
    letter-spacing: -0.2307692px;
    white-space: nowrap; }
  .section-3 .section-center {
    position: relative; }
  .section-3 h2 {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 798px;
    left: 50%;
    width: 862px;
    margin-left: -431px;
    mix-blend-mode: hard-light;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1 {
    padding-top: 140px;
    height: 986px;
    position: relative;
    z-index: 1; }
  .sec-3-phone1-pic, .sec-3-phone2-pic {
    width: 462px;
    height: 986px;
    margin: 0 auto; }
  .sec-3-phone1-pic {
    position: relative; }
  .sec-3-phone1-pic picture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1-pic picture.sec-3-phone1-pic0 {
    -webkit-transition: none;
    transition: none; }
  .sec-3-phone2-pic {
    opacity: 0; }
  .sec-3-phone1 h3 {
    width: 331px;
    position: absolute;
    left: 0;
    top: 320px; }
  .sec-3-phone1 .default-text {
    width: 260px;
    position: absolute;
    right: 0;
    top: 325px; }
  .screen-point {
    position: absolute;
    top: 492px;
    left: 0; }
  .scr-poi {
    margin-bottom: 38px; }
  .scr-poi small {
    display: block;
    font-size: 11px;
    line-height: 14px;
    font-weight: normal; }
  .scr-poi b {
    display: block;
    font-size: 28px;
    line-height: 38px;
    font-weight: normal; }
  .sec-3-phone2 {
    padding-top: 216px;
    position: relative; }
  .sec-3-phone2 h3 {
    width: 229px;
    position: absolute;
    left: 0;
    top: 452px; }
  .sec-3-phone2 .default-text {
    width: 260px;
    position: absolute;
    right: 0;
    top: 453px; }
  .icon-authentication {
    width: 48px;
    height: 48px;
    position: absolute;
    left: 0;
    top: 680px; }
  .authentication {
    padding-left: 73px;
    color: #000;
    font-family: 'NewOPPOSansBold';
    font-size: 15px;
    line-height: 21px;
    font-weight: normal;
    letter-spacing: -0.15px;
    width: 230px;
    position: absolute;
    left: 0;
    top: 683px; }
  .sec-3-phone3 {
    position: relative;
    padding-top: 438px; }
  .sec-3-phone3 h2 {
    width: 655px;
    margin-bottom: 45px; }
  .sec-3-phone3 .default-text {
    width: 490px;
    margin-bottom: 90px; }
  .sec-3-phone-swi-box {
    width: 182px;
    height: 90px;
    margin-bottom: 148px;
    position: relative; }
  .sec-3-phone-swi-box .phone-name {
    position: absolute;
    top: 0;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear; }
  .sec-3-phone-swi-box .phone-name.on {
    pointer-events: none; }
  .sec-3-phone-swi-box .phone-name:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  .sec-3-phone-swi-box .phone-name.on:hover {
    -webkit-transform: scale(1);
            transform: scale(1); }
  .sec-3-phone-swi-box .phone-name:nth-child(1) {
    left: 0; }
  .sec-3-phone-swi-box .phone-name:nth-child(2) {
    right: 0; }
  .sec-3-phone-swi-box .color-circle {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat; }
  .sec-3-phone-swi-box .color-circle.cc-1 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcqRVCAAAAGnRSTlMA3HRgRujArIOmJffz75KMZ1lAD6d5MC3HtvZFb0QAAAEdSURBVDjLnVRZsoMgEHzs4EaMqMnc/6CvBMyUZoSK/YNC1+zTf7fxHLn3fHwWSZMwbcd0cJp1rRHTFY/3bJD7jxxYz0maYExc3yAscMIH2POVU5JyI5U78V4NHXfzOjCt2nnN/GYASttlv1AWeQJkvg3wgVmzd8CMWM7jAQc8ckYsnfg1wwnz0c7UC7RH2RT9lOua4gMCKc5cdzPEI1BEE5+GdLQyGSSxxMTbOFddzoRCbmG3Td2YQnzTRJ2CHLfi5G+aqOKj3grkUzPhAilRvxFDneg8ulZl15iMLieD5bHl8mDBl0rBsYWm3EIcirU0FD+M2S+DW1+F7+VaDblc1LouVit6XesCcE9S6iJVl737QorS7AJK822xr+MfqdQ12aau7bMAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .color-circle.cc-2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAADP6+fP6+fQ7OfP6+jP6+fP6+jP6+fP6+fQ7OfQ7OjQ6+bQ7OjP7OfO6ufQ6+fQ6+fP6+fM5ubP6+fQ6+bP6uTM6OjO6ufP6+fQ6+bP6+dfdhRAAAAAGnRSTlMA3HRgpvVG6cCsgyXe75KMWUAPeWcwLce2ZhfIiNwAAAEaSURBVDjLnVTZEsIwCDT30fSwl8r/f6jT0sq0g4l2X5KQHcgS4HYZ9062rezuWVKvgjHCa+2FMUH133iyTo3dD7ZJtWRpSgiVtyAiSCYGxLNJO8uFsU6feI/qxqJ6HJjR7bxqeCYA5+O0G1wkngK7WTV8EOYtOpAisel4wQHjpkjgSrsBThiOfvpakT/Op6p7XBO+DxjgOxN6Cg1miCOG9arBxVh0yGJahZu1rgyvBBHR11J1HWp+8kSPurslObhPPNGtl35JUIufCV+AQtufiRTa5UOTGJ8XQ+mJ+fRQwqdCwukLQ/4LqSjmQlFQmY2ZMvuvcGk3FlqBmmsObHNx7TpF7/h2LQ+ASyOlPKTKY+/6IOVH8/VhX8Ybgpg101dVhVIAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .phone-name span {
    color: #c4c4c4;
    font-size: 15px;
    line-height: 20px;
    font-weight: normal; }
  .sec-3-phone-swi-box .phone-name.on span {
    color: #000; }
  .sec-3-phone-switch {
    width: 310px;
    height: 970px;
    overflow: hidden;
    position: absolute;
    top: 234px;
    right: 88px; }
  .sec-3-phone-switch .phone-img {
    width: 310px;
    height: 970px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone-switch .phone-img:nth-child(1) {
    opacity: 1; }
  .sec-3-phone-swiper {
    display: none; }
  .swiper-arrows {
    display: none; }
  .sec-3-phone4 {
    position: relative;
    padding-top: 534px; }
  .sec-3-phone4 h3 {
    width: 521px; }
  .sec-3-phone4 h3:nth-child(2) {
    margin-bottom: 19px; }
  .sec-3-phone4 .default-text {
    width: 480px;
    margin-bottom: 114px; }
  .sec-3-phone4 .small-text {
    width: 420px;
    padding-left: 65px;
    margin-bottom: 460px; }
  .icon-fingerprinticon {
    width: 40px;
    height: 40px;
    margin-bottom: -34px; }
  .sec-3-phone4-pic {
    width: 434px;
    height: 970px;
    position: absolute;
    right: 88px;
    top: 240px; }
  .section-4 {
    position: relative;
    padding-top: 1168px; }
  .section-4 .sec-title {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    min-width: 1920px;
    width: 100%;
    height: 1168px;
    background: -webkit-linear-gradient(top, #bde1d2, #e2f9ef);
    background: linear-gradient(180deg, #bde1d2, #e2f9ef);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden; }
  .section-4 .sec-title .section-center {
    padding-top: 507px; }
  .sec-4-tit-pic {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -85px;
    z-index: -1;
    width: 1073px;
    height: 1080px; }
  .section-4 h2 {
    padding-bottom: 44px;
    color: #333;
    font-size: 80px;
    font-weight: normal;
    line-height: 100px;
    letter-spacing: -2.666667px;
    -webkit-text-fill-color: #333; }
  .section-4 .default-text {
    width: 670px; }
  .camara-part {
    padding-top: 135px; }
  .camara-part:nth-child(4) {
    position: relative;
    z-index: 1; }
  .cp-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .cp-text.cp-block {
    display: block; }
  .camara-part:nth-child(1) .cp-text {
    margin-bottom: 45px; }
  .camara-part:nth-child(2) .cp-text {
    margin-bottom: 88px; }
  .camara-part:nth-child(3) .cp-text {
    margin-bottom: 41px; }
  .camara-part:nth-child(4) .cp-text {
    margin-bottom: -47px; }
  .cp-text h3 {
    width: 490px; }
  .camara-part:nth-child(3) .cp-text h3 {
    width: 540px; }
  .camara-part:nth-child(4) .cp-text h3 {
    width: 100%; }
  .camara-part:nth-child(4) .cp-text h3:nth-child(2) {
    margin-bottom: 43px; }
  .cp-text .default-text {
    width: 542px; }
  .camara-part:nth-child(3) .cp-text .default-text {
    width: 490px; }
  .camara-part:nth-child(4) .cp-text .default-text {
    width: 590px; }
  .sec-4-photo1 picture {
    display: none; }
  .sec-4-photo1 {
    height: 1020px; }
  .sec-4-photo2 {
    height: 780px; }
  .sec-4-photo3 {
    height: 555px; }
  .sec-4-photo3 .pic-box {
    position: relative;
    height: 100%; }
  .sec-4-photo3 picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-4-photo3 picture:nth-child(1) {
    opacity: 1; }
  .sec-4-photo3 .wide-switch {
    position: absolute;
    bottom: 24px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 240px;
    height: 28px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none; }
  .sec-4-photo3 .wide-switch span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    font-weight: normal;
    line-height: 28px;
    text-align: center;
    float: left;
    width: 50%;
    height: 100%;
    border-radius: 4px;
    background: rgba(192, 192, 192, 0.4); }
  .sec-4-photo3 .wide-switch span.on {
    color: #fff;
    background: none; }
  .sec-4-photo-position {
    position: relative;
    z-index: -1;
    width: 1124px;
    height: 1165px;
    margin: 0 auto 140px; }
  .sec-4-photo-position picture {
    position: absolute;
    width: 550px; }
  .sec-4-photo4-1 {
    height: 734px;
    top: 127px;
    left: 0; }
  .sec-4-photo4-2 {
    height: 410px;
    top: 0;
    right: 0; }
  .sec-4-photo4-3 {
    height: 734px;
    bottom: 0;
    right: 0; }
  .section-5 {
    background-color: #f1f1f1;
    overflow: hidden; }
  .section-5 .section-center {
    padding-top: 150px; }
  .section-5 .h2-c {
    text-align: center; }
  .section-5 .default-text {
    width: 900px;
    margin: 0 auto 130px;
    text-align: center; }
  .sec-5-phone {
    width: 2560px;
    height: 750px;
    margin-left: -695px; }
  .section-6 {
    overflow: hidden; }
  .section-6 .section-center {
    padding-top: 170px; }
  .section-6 .h2-c {
    text-align: center; }
  .section-6 .default-text {
    width: 1150px;
    margin: 0 auto 80px;
    text-align: center; }
  .sec-6-photo {
    width: 2560px;
    height: 1000px;
    margin-left: -695px; }
  .section-7 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-7 .section-center {
    padding-top: 560px; }
  .section-7 .h2-c {
    width: 950px;
    margin-bottom: 40px; }
  .section-7 .default-text {
    width: 860px;
    margin-bottom: 135px; }
  .sec-7-phone {
    width: 1285px;
    height: 1187px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -290px;
    z-index: -1; }
  .section-8 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-8 .section-center {
    padding-top: 190px; }
  .section-8 .h2-c {
    width: 660px;
    margin-bottom: 30px; }
  .section-8 .default-text {
    width: 450px;
    margin-bottom: 90px; }
  .tone-quality {
    width: 210px;
    margin-bottom: 290px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .icon-hi-res-audio {
    width: 48px;
    height: 48px; }
  .icon-dirac {
    width: 123px;
    height: 40px; }
  .sec-8-photo {
    width: 1368px;
    height: 1162px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -88px;
    z-index: -1; }
  .section-9 {
    height: 1098px;
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-9 .section-center {
    padding-top: 130px; }
  .section-9 h2 {
    color: #fff;
    font-size: 90px;
    font-weight: normal;
    line-height: 110px;
    letter-spacing: -3px;
    text-align: center;
    -webkit-text-fill-color: #fff; }
  .sec-9-phone {
    width: 2560px;
    height: 1098px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1280px;
    z-index: -1; }
  .section-10 {
    background: -webkit-linear-gradient(top, #7bc4ea, #baeec8);
    background: linear-gradient(180deg, #7bc4ea, #baeec8); }
  .section-10 .section-center {
    padding: 90px 0; }
  .sec-10-block {
    height: 460px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 30px;
    box-sizing: border-box;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden; }
  .sec-10-block:last-child {
    margin-bottom: 0; }
  .sec-10-text {
    width: 540px;
    height: 100%;
    padding-left: 68px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .sec-10-text h3 {
    margin-bottom: 20px; }
  .sec-10-text .default-text {
    width: 540px; }
  .sec-10-phone {
    width: 324px;
    height: 691px;
    position: absolute;
    top: 70px;
    right: 122px; }
  .sec-10-swiper {
    display: none; }
  .section-11 .section-center {
    padding: 70px 0 90px; }
  .section-11 h2 {
    color: #000;
    font-size: 15px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0;
    -webkit-text-fill-color: #000;
    padding-bottom: 15px; }
  .section-11 li {
    color: #000;
    font-size: 11px;
    font-weight: normal;
    line-height: 22px; }
  .section-11 li i {
    display: inline-block;
    width: 26px; }
  .sec-3-phone1-pic.fixed {
    top: -88px;
    left: 50%;
    margin-left: -231px; } }

/* 1440px */
@media screen and (max-width: 1440px) and (min-width: 1025px) {
  .section-center {
    width: 880px; }
  h2 {
    color: #88ccc4;
    font-size: 60px;
    line-height: 82px;
    font-family: 'NewOPPOSansBold';
    font-weight: normal;
    letter-spacing: -2px;
    background: -webkit-linear-gradient(219deg, #88ccc4, #c4f6de);
    background: linear-gradient(231deg, #88ccc4, #c4f6de);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 12px; }
  .ie h2 {
    background: none; }
  h2.nogradient {
    background: none;
    background-clip: border-box; }
  h3 {
    color: #333;
    font-size: 27px;
    line-height: 40px;
    letter-spacing: -0.75px;
    font-family: 'NewOPPOSansBold';
    font-weight: normal; }
  .default-text p, .default-text b {
    color: #333;
    font-size: 16px;
    line-height: 26px;
    font-weight: normal; }
  .small-text p, .small-text b {
    color: #000;
    font-size: 12px;
    line-height: 20px;
    font-weight: normal; }
  .default-text b, .small-text b {
    display: block; }
  .h2-c h2:first-child {
    padding-bottom: 40px;
    margin-bottom: -40px; }
  .h2-c h2:last-child {
    padding-bottom: 40px; }
  .section-1 {
    height: 580px;
    overflow: hidden; }
  .section-1 .section-center {
    position: relative; }
  .kv-phone {
    width: 1440px;
    height: 580px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -720px; }
  .kv-slogan {
    position: absolute;
    top: 234px;
    left: -90px; }
  .phone-model {
    width: 260px;
    height: 44px;
    margin-bottom: 10px; }
  h2.kv-slogan1 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #000;
    font-size: 25px;
    line-height: 33px;
    margin-bottom: 24px;
    padding-bottom: 0;
    -webkit-text-fill-color: #000; }
  h3.kv-slogan2 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #222;
    font-size: 11px;
    line-height: 15px; }
  .section-2 {
    height: 378px;
    background-color: #f1f1f1; }
  .section-2 .section-center {
    overflow: hidden; }
  .sel-point {
    width: 100%;
    height: 234px;
    margin-top: 73px;
    position: relative; }
  .sel-point-item {
    position: absolute; }
  .sel-point-item:nth-child(1) {
    top: 0;
    left: 0; }
  .sel-point-item:nth-child(2) {
    top: 0;
    left: 50%;
    width: 200px;
    margin-left: -100px; }
  .sel-point-item:nth-child(3) {
    top: 0;
    right: 0;
    width: 210px; }
  .sel-point-item:nth-child(4) {
    bottom: 0;
    left: 0; }
  .sel-point-item:nth-child(5) {
    bottom: 0;
    left: 50%;
    width: 200px;
    margin-left: -100px; }
  .sel-point-item:nth-child(6) {
    bottom: 0;
    right: 0;
    width: 210px; }
  .sel-point-item picture {
    width: 57px;
    height: 36px;
    margin-bottom: 6px; }
  .sel-point-item b {
    display: block;
    font-size: 19px;
    line-height: 35px;
    font-weight: normal;
    letter-spacing: -0.2923077px;
    white-space: nowrap; }
  .sel-point-item span {
    display: block;
    font-size: 11px;
    line-height: 20px;
    font-weight: normal;
    letter-spacing: -0.1692308px;
    white-space: nowrap; }
  .section-3 .section-center {
    position: relative; }
  .section-3 h2 {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 642px;
    left: 50%;
    width: 632px;
    margin-left: -316px;
    mix-blend-mode: hard-light;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1 {
    padding-top: 150px;
    height: 891px;
    position: relative;
    z-index: 1; }
  .sec-3-phone1-pic, .sec-3-phone2-pic {
    width: 347px;
    height: 741px;
    margin: 0 auto; }
  .sec-3-phone1-pic {
    position: relative; }
  .sec-3-phone1-pic picture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1-pic picture.sec-3-phone1-pic0 {
    -webkit-transition: none;
    transition: none; }
  .sec-3-phone1 h3 {
    width: 214px;
    position: absolute;
    left: 0;
    top: 266px; }
  .sec-3-phone1 .default-text {
    width: 198px;
    position: absolute;
    right: 0;
    top: 270px; }
  .screen-point {
    position: absolute;
    top: 387px;
    left: 0; }
  .scr-poi {
    margin-bottom: 33px; }
  .scr-poi small {
    display: block;
    font-size: 10px;
    line-height: 13px;
    font-weight: normal; }
  .scr-poi b {
    display: block;
    font-size: 22px;
    line-height: 30px;
    font-weight: normal; }
  .sec-3-phone2 {
    padding-top: 168px;
    position: relative; }
  .sec-3-phone2 h3 {
    width: 188px;
    position: absolute;
    left: 0;
    top: 345px; }
  .sec-3-phone2 .default-text {
    width: 198px;
    position: absolute;
    right: 0;
    top: 346px; }
  .icon-authentication {
    width: 48px;
    height: 48px;
    position: absolute;
    left: 0;
    top: 532px; }
  .authentication {
    padding-left: 68px;
    color: #000;
    font-family: 'NewOPPOSansBold';
    font-size: 12px;
    line-height: 20px;
    font-weight: normal;
    width: 186px;
    position: absolute;
    left: 0;
    top: 536px; }
  .sec-3-phone3 {
    position: relative;
    padding-top: 318px; }
  .sec-3-phone3 h2 {
    width: 510px;
    margin-bottom: 25px; }
  .sec-3-phone3 .default-text {
    width: 460px;
    margin-bottom: 70px; }
  .sec-3-phone-swi-box {
    width: 212px;
    height: 64px;
    margin-bottom: 148px;
    position: relative; }
  .sec-3-phone-swi-box .phone-name {
    position: absolute;
    top: 0;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear; }
  .sec-3-phone-swi-box .phone-name.on {
    pointer-events: none; }
  .sec-3-phone-swi-box .phone-name:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  .sec-3-phone-swi-box .phone-name.on:hover {
    -webkit-transform: scale(1);
            transform: scale(1); }
  .sec-3-phone-swi-box .phone-name:nth-child(1) {
    left: 0; }
  .sec-3-phone-swi-box .phone-name:nth-child(2) {
    right: 0; }
  .sec-3-phone-swi-box .color-circle {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    background-size: 100% 100%;
    background-repeat: no-repeat; }
  .sec-3-phone-swi-box .color-circle.cc-1 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcqRVCAAAAGnRSTlMA3HRgRujArIOmJffz75KMZ1lAD6d5MC3HtvZFb0QAAAEdSURBVDjLnVRZsoMgEHzs4EaMqMnc/6CvBMyUZoSK/YNC1+zTf7fxHLn3fHwWSZMwbcd0cJp1rRHTFY/3bJD7jxxYz0maYExc3yAscMIH2POVU5JyI5U78V4NHXfzOjCt2nnN/GYASttlv1AWeQJkvg3wgVmzd8CMWM7jAQc8ckYsnfg1wwnz0c7UC7RH2RT9lOua4gMCKc5cdzPEI1BEE5+GdLQyGSSxxMTbOFddzoRCbmG3Td2YQnzTRJ2CHLfi5G+aqOKj3grkUzPhAilRvxFDneg8ulZl15iMLieD5bHl8mDBl0rBsYWm3EIcirU0FD+M2S+DW1+F7+VaDblc1LouVit6XesCcE9S6iJVl737QorS7AJK822xr+MfqdQ12aau7bMAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .color-circle.cc-2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAADP6+fP6+fQ7OfP6+jP6+fP6+jP6+fP6+fQ7OfQ7OjQ6+bQ7OjP7OfO6ufQ6+fQ6+fP6+fM5ubP6+fQ6+bP6uTM6OjO6ufP6+fQ6+bP6+dfdhRAAAAAGnRSTlMA3HRgpvVG6cCsgyXe75KMWUAPeWcwLce2ZhfIiNwAAAEaSURBVDjLnVTZEsIwCDT30fSwl8r/f6jT0sq0g4l2X5KQHcgS4HYZ9062rezuWVKvgjHCa+2FMUH133iyTo3dD7ZJtWRpSgiVtyAiSCYGxLNJO8uFsU6feI/qxqJ6HJjR7bxqeCYA5+O0G1wkngK7WTV8EOYtOpAisel4wQHjpkjgSrsBThiOfvpakT/Op6p7XBO+DxjgOxN6Cg1miCOG9arBxVh0yGJahZu1rgyvBBHR11J1HWp+8kSPurslObhPPNGtl35JUIufCV+AQtufiRTa5UOTGJ8XQ+mJ+fRQwqdCwukLQ/4LqSjmQlFQmY2ZMvuvcGk3FlqBmmsObHNx7TpF7/h2LQ+ASyOlPKTKY+/6IOVH8/VhX8Ybgpg101dVhVIAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .phone-name span {
    color: #c4c4c4;
    font-size: 12px;
    line-height: 20px;
    font-weight: normal; }
  .sec-3-phone-swi-box .phone-name.on span {
    color: #000; }
  .sec-3-phone-swi-box .phone-name span br {
    display: none; }
  .sec-3-phone-switch {
    width: 234px;
    height: 734px;
    overflow: hidden;
    position: absolute;
    top: 157px;
    right: 0; }
  .sec-3-phone-switch .phone-img {
    width: 234px;
    height: 734px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone-switch .phone-img:nth-child(1) {
    opacity: 1; }
  .sec-3-phone-swiper {
    display: none; }
  .swiper-arrows {
    display: none; }
  .sec-3-phone4 {
    position: relative;
    padding-top: 367px; }
  .sec-3-phone4 h3 {
    width: 410px; }
  .sec-3-phone4 h3:nth-child(2) {
    margin-bottom: 35px; }
  .sec-3-phone4 .default-text {
    width: 388px;
    margin-bottom: 79px; }
  .sec-3-phone4 .small-text {
    width: 220px;
    padding-left: 54px;
    margin-bottom: 375px; }
  .icon-fingerprinticon {
    width: 40px;
    height: 40px;
    margin-bottom: -33px; }
  .sec-3-phone4-pic {
    width: 307px;
    height: 733px;
    position: absolute;
    right: 0;
    top: 152px; }
  .section-4 {
    position: relative;
    padding-top: 876px; }
  .section-4 .sec-title {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    min-width: 1440px;
    width: 100%;
    height: 876px;
    background: -webkit-linear-gradient(top, #bde1d2, #e2f9ef);
    background: linear-gradient(180deg, #bde1d2, #e2f9ef);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden; }
  .section-4 .sec-title .section-center {
    padding-top: 363px; }
  .sec-4-tit-pic {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 784px;
    height: 810px; }
  .section-4 h2 {
    padding-bottom: 25px;
    color: #333;
    font-size: 60px;
    font-weight: normal;
    line-height: 82px;
    letter-spacing: -2px;
    -webkit-text-fill-color: #333; }
  .section-4 .default-text {
    width: 486px; }
  .camara-part {
    padding-top: 130px; }
  .camara-part:nth-child(4) {
    position: relative;
    z-index: 1; }
  .cp-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .cp-text.cp-block {
    display: block; }
  .camara-part:nth-child(1) .cp-text {
    margin-bottom: 60px; }
  .camara-part:nth-child(2) .cp-text {
    margin-bottom: 60px; }
  .camara-part:nth-child(3) .cp-text {
    margin-bottom: 46px; }
  .camara-part:nth-child(4) .cp-text {
    margin-bottom: -36px; }
  .cp-text h3 {
    width: 388px; }
  .camara-part:nth-child(3) .cp-text h3 {
    width: 408px; }
  .camara-part:nth-child(4) .cp-text h3 {
    width: 100%; }
  .camara-part:nth-child(4) .cp-text h3:nth-child(2) {
    margin-bottom: 35px; }
  .cp-text .default-text {
    width: 440px; }
  .camara-part:nth-child(3) .cp-text .default-text {
    width: 360px; }
  .camara-part:nth-child(4) .cp-text .default-text {
    width: 432px; }
  .sec-4-photo1 picture {
    display: none; }
  .sec-4-photo1 {
    height: 768px; }
  .sec-4-photo2 {
    height: 570px; }
  .sec-4-photo3 {
    height: 418px; }
  .sec-4-photo3 .pic-box {
    position: relative;
    height: 100%; }
  .sec-4-photo3 picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-4-photo3 picture:nth-child(1) {
    opacity: 1; }
  .sec-4-photo3 .wide-switch {
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 170px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none; }
  .sec-4-photo3 .wide-switch span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: normal;
    line-height: 22px;
    text-align: center;
    float: left;
    width: 50%;
    height: 100%;
    border-radius: 4px;
    background: rgba(192, 192, 192, 0.4); }
  .sec-4-photo3 .wide-switch span.on {
    color: #fff;
    background: none; }
  .sec-4-photo-position {
    position: relative;
    z-index: -1;
    width: 880px;
    height: 894px;
    margin: 0 auto 120px; }
  .sec-4-photo-position picture {
    position: absolute;
    width: 433px; }
  .sec-4-photo4-1 {
    height: 578px;
    top: 98px;
    left: 0; }
  .sec-4-photo4-2 {
    height: 316px;
    top: 0;
    right: 0; }
  .sec-4-photo4-3 {
    height: 564px;
    bottom: 0;
    right: 0; }
  .section-5 {
    background-color: #f1f1f1;
    overflow: hidden; }
  .section-5 .section-center {
    padding-top: 90px; }
  .section-5 .h2-c {
    text-align: center; }
  .section-5 .default-text {
    width: 700px;
    margin: 0 auto 80px;
    text-align: center; }
  .sec-5-phone {
    width: 1440px;
    height: 570px;
    margin-left: -280px; }
  .section-6 {
    overflow: hidden; }
  .section-6 .section-center {
    padding-top: 120px; }
  .section-6 .h2-c {
    text-align: center; }
  .section-6 .default-text {
    width: 100%;
    margin: 0 auto 90px;
    text-align: center; }
  .sec-6-photo {
    width: 1440px;
    height: 800px;
    margin-left: -280px; }
  .section-7 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-7 .section-center {
    padding-top: 463px; }
  .section-7 .h2-c {
    width: 710px;
    margin-bottom: 25px; }
  .section-7 .default-text {
    width: 660px;
    margin-bottom: 120px; }
  .sec-7-phone {
    width: 950px;
    height: 936px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -238px;
    z-index: -1; }
  .section-8 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-8 .section-center {
    padding-top: 148px; }
  .section-8 .h2-c {
    width: 460px;
    margin-bottom: 25px; }
  .section-8 .default-text {
    width: 350px;
    margin-bottom: 70px; }
  .tone-quality {
    width: 160px;
    margin-bottom: 257px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .icon-hi-res-audio {
    width: 37px;
    height: 37px; }
  .icon-dirac {
    width: 92px;
    height: 30px; }
  .sec-8-photo {
    width: 778px;
    height: 894px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -58px;
    z-index: -1; }
  .section-9 {
    height: 950px;
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-9 .section-center {
    padding-top: 100px; }
  .section-9 h2 {
    color: #fff;
    font-size: 60px;
    font-weight: normal;
    line-height: 82px;
    letter-spacing: -2px;
    text-align: center;
    -webkit-text-fill-color: #fff; }
  .sec-9-phone {
    width: 1440px;
    height: 950px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -720px;
    z-index: -1; }
  .section-10 {
    background: -webkit-linear-gradient(top, #7bc4ea, #baeec8);
    background: linear-gradient(180deg, #7bc4ea, #baeec8); }
  .section-10 .section-center {
    padding: 80px 0; }
  .sec-10-block {
    height: 350px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; }
  .sec-10-block:last-child {
    margin-bottom: 0; }
  .sec-10-text {
    width: 430px;
    height: 100%;
    padding-left: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .sec-10-text h3 {
    margin-bottom: 20px; }
  .sec-10-text .default-text {
    width: 430px; }
  .sec-10-phone {
    width: 280px;
    height: 598px;
    position: absolute;
    top: 40px;
    right: 70px; }
  .sec-10-swiper {
    display: none; }
  .section-11 .section-center {
    padding: 70px 0 90px; }
  .section-11 h2 {
    color: #000;
    font-size: 15px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0;
    -webkit-text-fill-color: #000;
    padding-bottom: 15px; }
  .section-11 li {
    color: #000;
    font-size: 11px;
    font-weight: normal;
    line-height: 22px; }
  .section-11 li i {
    display: inline-block;
    width: 26px; }
  .sec-3-phone1-pic.fixed {
    top: 1.2rem;
    left: 50%;
    margin-left: -173.5px; } }

@media screen and (max-width: 1080px) and (min-width: 1025px) {
  .kv-slogan {
    left: calc(451px - 50vw); }
  .sec-3-phone1-pic.fixed {
    top: 0;
    left: 50%;
    margin-left: -173.5px; } }

/* 1024px */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .section-center {
    width: 700px; }
  h2 {
    color: #88ccc4;
    font-size: 46px;
    line-height: 62px;
    font-family: 'NewOPPOSansBold';
    font-weight: normal;
    letter-spacing: -1.533px;
    background: -webkit-linear-gradient(219deg, #88ccc4, #c4f6de);
    background: linear-gradient(231deg, #88ccc4, #c4f6de);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 20px; }
  .ie h2 {
    background: none; }
  h2.nogradient {
    background: none;
    background-clip: border-box; }
  h3 {
    color: #333;
    font-size: 21px;
    line-height: 32px;
    letter-spacing: -0.583px;
    font-family: 'NewOPPOSansBold';
    font-weight: normal; }
  .default-text p, .default-text b {
    color: #333;
    font-size: 12px;
    line-height: 21px;
    font-weight: normal; }
  .small-text p, .small-text b {
    color: #000;
    font-size: 10px;
    line-height: 16px;
    font-weight: normal; }
  .default-text b, .small-text b {
    display: block; }
  .h2-c h2:first-child {
    padding-bottom: 20px;
    margin-bottom: -20px; }
  .h2-c h2:last-child {
    padding-bottom: 20px; }
  .section-1 {
    height: 470px;
    overflow: hidden; }
  .section-1 .section-center {
    position: relative; }
  .kv-phone {
    width: 880px;
    height: 424px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -368px; }
  .kv-slogan {
    position: absolute;
    top: 183px;
    left: -81px; }
  .phone-model {
    width: 211px;
    height: 36px;
    margin-bottom: 7px; }
  h2.kv-slogan1 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #000;
    font-size: 21px;
    line-height: 28px;
    margin-bottom: 19px;
    padding: 0;
    -webkit-text-fill-color: #000; }
  h3.kv-slogan2 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #222;
    font-size: 9px;
    line-height: 12px; }
  .section-2 {
    height: 330px;
    background-color: #f1f1f1; }
  .section-2 .section-center {
    overflow: hidden; }
  .sel-point {
    width: 100%;
    height: 209px;
    margin-top: 61px;
    position: relative; }
  .sel-point-item {
    position: absolute; }
  .sel-point-item:nth-child(1) {
    top: 0;
    left: 0; }
  .sel-point-item:nth-child(2) {
    top: 0;
    left: 50%;
    width: 170px;
    margin-left: -85px; }
  .sel-point-item:nth-child(3) {
    top: 0;
    right: 0;
    width: 184px; }
  .sel-point-item:nth-child(4) {
    bottom: 0;
    left: 0; }
  .sel-point-item:nth-child(5) {
    bottom: 0;
    left: 50%;
    width: 170px;
    margin-left: -85px; }
  .sel-point-item:nth-child(6) {
    bottom: 0;
    right: 0;
    width: 184px; }
  .sel-point-item picture {
    width: 50px;
    height: 32px;
    margin-bottom: 6px; }
  .sel-point-item b {
    display: block;
    font-size: 17px;
    line-height: 31px;
    font-weight: normal;
    letter-spacing: -0.2923077px;
    white-space: nowrap; }
  .sel-point-item span {
    display: block;
    font-size: 10px;
    line-height: 18px;
    font-weight: normal;
    letter-spacing: -0.1538462px;
    white-space: nowrap; }
  .section-3 .section-center {
    position: relative; }
  .section-3 h2 {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 458px;
    left: 50%;
    width: 486px;
    margin-left: -243px;
    mix-blend-mode: hard-light;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1 {
    padding-top: 110px;
    height: 530px;
    position: relative;
    z-index: 1; }
  .sec-3-phone1-pic, .sec-3-phone2-pic {
    width: 244px;
    height: 520px;
    margin: 0 auto; }
  .sec-3-phone1-pic {
    position: relative; }
  .sec-3-phone1-pic picture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1-pic picture.sec-3-phone1-pic0 {
    -webkit-transition: none;
    transition: none; }
  .sec-3-phone1 h3 {
    width: 170px;
    position: absolute;
    left: 0;
    top: 173px; }
  .sec-3-phone1 .default-text {
    width: 152px;
    position: absolute;
    right: 0;
    top: 173px; }
  .screen-point {
    position: absolute;
    top: 268px;
    left: 0; }
  .scr-poi {
    margin-bottom: 23px; }
  .scr-poi small {
    display: block;
    font-size: 10px;
    line-height: 13px;
    font-weight: normal; }
  .scr-poi b {
    display: block;
    font-size: 18px;
    line-height: 25px;
    font-weight: normal; }
  .sec-3-phone2 {
    padding-top: 124px;
    position: relative; }
  .sec-3-phone2 h3 {
    width: 144px;
    position: absolute;
    left: 0;
    top: 248px; }
  .sec-3-phone2 .default-text {
    width: 150px;
    position: absolute;
    right: 0;
    top: 248px; }
  .icon-authentication {
    width: 38px;
    height: 38px;
    position: absolute;
    left: 0;
    top: 384px; }
  .authentication {
    color: #000;
    font-family: 'NewOPPOSansBold';
    font-size: 10px;
    line-height: 16px;
    font-weight: normal;
    width: 186px;
    position: absolute;
    left: 0;
    top: 436px; }
  .sec-3-phone3 {
    position: relative;
    padding-top: 318px; }
  .sec-3-phone3 h2 {
    width: 400px;
    margin-bottom: 10px; }
  .sec-3-phone3 .default-text {
    width: 292px;
    margin-bottom: 40px; }
  .sec-3-phone-swi-box {
    width: 194px;
    height: 62px;
    margin-bottom: 160px;
    position: relative; }
  .sec-3-phone-swi-box .phone-name {
    position: absolute;
    top: 0;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear; }
  .sec-3-phone-swi-box .phone-name.on {
    pointer-events: none; }
  .sec-3-phone-swi-box .phone-name:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  .sec-3-phone-swi-box .phone-name.on:hover {
    -webkit-transform: scale(1);
            transform: scale(1); }
  .sec-3-phone-swi-box .phone-name:nth-child(1) {
    left: 0; }
  .sec-3-phone-swi-box .phone-name:nth-child(2) {
    right: 0; }
  .sec-3-phone-swi-box .color-circle {
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    margin: 0 auto 12px;
    background-size: 100% 100%;
    background-repeat: no-repeat; }
  .sec-3-phone-swi-box .color-circle.cc-1 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcqRVCAAAAGnRSTlMA3HRgRujArIOmJffz75KMZ1lAD6d5MC3HtvZFb0QAAAEdSURBVDjLnVRZsoMgEHzs4EaMqMnc/6CvBMyUZoSK/YNC1+zTf7fxHLn3fHwWSZMwbcd0cJp1rRHTFY/3bJD7jxxYz0maYExc3yAscMIH2POVU5JyI5U78V4NHXfzOjCt2nnN/GYASttlv1AWeQJkvg3wgVmzd8CMWM7jAQc8ckYsnfg1wwnz0c7UC7RH2RT9lOua4gMCKc5cdzPEI1BEE5+GdLQyGSSxxMTbOFddzoRCbmG3Td2YQnzTRJ2CHLfi5G+aqOKj3grkUzPhAilRvxFDneg8ulZl15iMLieD5bHl8mDBl0rBsYWm3EIcirU0FD+M2S+DW1+F7+VaDblc1LouVit6XesCcE9S6iJVl737QorS7AJK822xr+MfqdQ12aau7bMAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .color-circle.cc-2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAADP6+fP6+fQ7OfP6+jP6+fP6+jP6+fP6+fQ7OfQ7OjQ6+bQ7OjP7OfO6ufQ6+fQ6+fP6+fM5ubP6+fQ6+bP6uTM6OjO6ufP6+fQ6+bP6+dfdhRAAAAAGnRSTlMA3HRgpvVG6cCsgyXe75KMWUAPeWcwLce2ZhfIiNwAAAEaSURBVDjLnVTZEsIwCDT30fSwl8r/f6jT0sq0g4l2X5KQHcgS4HYZ9062rezuWVKvgjHCa+2FMUH133iyTo3dD7ZJtWRpSgiVtyAiSCYGxLNJO8uFsU6feI/qxqJ6HJjR7bxqeCYA5+O0G1wkngK7WTV8EOYtOpAisel4wQHjpkjgSrsBThiOfvpakT/Op6p7XBO+DxjgOxN6Cg1miCOG9arBxVh0yGJahZu1rgyvBBHR11J1HWp+8kSPurslObhPPNGtl35JUIufCV+AQtufiRTa5UOTGJ8XQ+mJ+fRQwqdCwukLQ/4LqSjmQlFQmY2ZMvuvcGk3FlqBmmsObHNx7TpF7/h2LQ+ASyOlPKTKY+/6IOVH8/VhX8Ybgpg101dVhVIAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .phone-name span {
    color: #c4c4c4;
    font-size: 10px;
    line-height: 18px;
    font-weight: normal; }
  .sec-3-phone-swi-box .phone-name.on span {
    color: #000; }
  .sec-3-phone-swi-box .phone-name span br {
    display: none; }
  .sec-3-phone-switch {
    width: 212px;
    height: 663px;
    overflow: hidden;
    position: absolute;
    top: 100px;
    right: 0; }
  .sec-3-phone-switch .phone-img {
    width: 212px;
    height: 660px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone-switch .phone-img:nth-child(1) {
    opacity: 1; }
  .sec-3-phone-swiper {
    display: none; }
  .swiper-arrows {
    display: none; }
  .sec-3-phone4 {
    position: relative;
    padding-top: 272px; }
  .sec-3-phone4 h3 {
    width: 310px; }
  .sec-3-phone4 h3:nth-child(2) {
    margin-bottom: 20px; }
  .sec-3-phone4 .default-text {
    width: 292px;
    margin-bottom: 56px; }
  .sec-3-phone4 .small-text {
    width: 160px;
    padding-left: 50px;
    margin-bottom: 348px; }
  .icon-fingerprinticon {
    width: 35px;
    height: 35px;
    margin-bottom: -25.5px; }
  .sec-3-phone4-pic {
    width: 293px;
    height: 660px;
    position: absolute;
    right: 0;
    top: 80px; }
  .section-4 {
    position: relative;
    padding-top: 623px; }
  .section-4 .sec-title {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    min-width: 1024px;
    width: 100%;
    height: 623px;
    background: -webkit-linear-gradient(top, #bde1d2, #e2f9ef);
    background: linear-gradient(180deg, #bde1d2, #e2f9ef);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden; }
  .section-4 .sec-title .section-center {
    padding-top: 250px; }
  .sec-4-tit-pic {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 566px;
    height: 576px; }
  .section-4 h2 {
    padding-bottom: 30px;
    color: #333;
    font-size: 46px;
    font-weight: normal;
    line-height: 62px;
    letter-spacing: -1.533333px;
    -webkit-text-fill-color: #333; }
  .section-4 .default-text {
    width: 376px; }
  .camara-part {
    padding-top: 90px; }
  .camara-part:nth-child(4) {
    position: relative;
    z-index: 1; }
  .cp-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .cp-text.cp-block {
    display: block; }
  .camara-part:nth-child(1) .cp-text {
    margin-bottom: 30px; }
  .camara-part:nth-child(2) .cp-text {
    margin-bottom: 35px; }
  .camara-part:nth-child(3) .cp-text {
    margin-bottom: 28px; }
  .camara-part:nth-child(4) .cp-text {
    margin-bottom: -30px; }
  .cp-text h3 {
    width: 290px; }
  .camara-part:nth-child(3) .cp-text h3 {
    width: 320px; }
  .camara-part:nth-child(4) .cp-text h3 {
    width: 100%; }
  .camara-part:nth-child(4) .cp-text h3:nth-child(2) {
    margin-bottom: 20px; }
  .cp-text .default-text {
    width: 340px; }
  .camara-part:nth-child(3) .cp-text .default-text {
    width: 280px; }
  .camara-part:nth-child(4) .cp-text .default-text {
    width: 330px; }
  .sec-4-photo1 picture {
    display: none; }
  .sec-4-photo1 {
    height: 610px; }
  .sec-4-photo2 {
    height: 450px; }
  .sec-4-photo3 {
    height: 334px; }
  .sec-4-photo3 .pic-box {
    position: relative;
    height: 100%; }
  .sec-4-photo3 picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-4-photo3 picture:nth-child(1) {
    opacity: 1; }
  .sec-4-photo3 .wide-switch {
    position: absolute;
    bottom: 28px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 160px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none; }
  .sec-4-photo3 .wide-switch span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: normal;
    line-height: 22px;
    text-align: center;
    float: left;
    width: 50%;
    height: 100%;
    border-radius: 4px;
    background: rgba(192, 192, 192, 0.4); }
  .sec-4-photo3 .wide-switch span.on {
    color: #fff;
    background: none; }
  .sec-4-photo-position {
    position: relative;
    z-index: -1;
    height: 712px;
    margin: 0 auto 80px; }
  .sec-4-photo-position picture {
    position: absolute;
    width: 344px; }
  .sec-4-photo4-1 {
    height: 450px;
    top: 78px;
    left: 0; }
  .sec-4-photo4-2 {
    height: 250px;
    top: 0;
    right: 0; }
  .sec-4-photo4-3 {
    height: 450px;
    bottom: 0;
    right: 0; }
  .section-5 {
    background-color: #f1f1f1;
    overflow: hidden; }
  .section-5 .section-center {
    padding-top: 60px; }
  .section-5 .h2-c {
    text-align: center; }
  .section-5 .default-text {
    width: 530px;
    margin: 0 auto 54px;
    text-align: center; }
  .sec-5-phone {
    width: 100vw;
    margin-left: calc((700px - 100vw) / 2); }
  .sec-5-phone img {
    height: auto; }
  .section-6 {
    overflow: hidden; }
  .section-6 .section-center {
    padding-top: 80px; }
  .section-6 .h2-c {
    text-align: center; }
  .section-6 .default-text {
    width: 100%;
    margin: 0 auto 50px;
    text-align: center; }
  .sec-6-photo {
    width: 100vw;
    margin-left: calc((700px - 100vw) / 2); }
  .sec-6-phone img {
    height: auto; }
  .section-7 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-7 .section-center {
    padding-top: 376px; }
  .section-7 .h2-c {
    width: 520px;
    margin-bottom: 30px; }
  .section-7 .default-text {
    width: 510px;
    margin-bottom: 120px; }
  .sec-7-phone {
    width: 730px;
    height: 738px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1; }
  .section-8 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-8 .section-center {
    padding-top: 94px; }
  .section-8 .h2-c {
    width: 350px;
    margin-bottom: 30px; }
  .section-8 .default-text {
    width: 270px;
    margin-bottom: 80px; }
  .tone-quality {
    width: 140px;
    margin-bottom: 182px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .icon-hi-res-audio {
    width: 30px;
    height: 30px; }
  .icon-dirac {
    width: 86px;
    height: 28px; }
  .sec-8-photo {
    width: 566px;
    height: 678px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1; }
  .section-9 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-9 h2 {
    color: #fff;
    font-size: 46px;
    font-weight: normal;
    line-height: 62px;
    letter-spacing: -1.533333px;
    text-align: center;
    -webkit-text-fill-color: #fff;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    z-index: 1; }
  .sec-9-phone {
    width: 100vw;
    margin-left: calc((700px - 100vw) / 2);
    margin-bottom: -1px; }
  .sec-9-phone img {
    height: auto; }
  .section-10 {
    background: -webkit-linear-gradient(top, #7bc4ea, #baeec8);
    background: linear-gradient(180deg, #7bc4ea, #baeec8); }
  .section-10 .section-center {
    padding: 70px 0; }
  .sec-10-block {
    height: 300px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden; }
  .sec-10-block:last-child {
    margin-bottom: 0; }
  .sec-10-text {
    width: 320px;
    height: 100%;
    padding-left: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .sec-10-text h3 {
    margin-bottom: 14px; }
  .sec-10-text .default-text {
    width: 324px; }
  .sec-10-phone {
    width: 250px;
    height: 534px;
    position: absolute;
    top: 30px;
    right: 50px; }
  .sec-10-swiper {
    display: none; }
  .section-11 .section-center {
    padding: 70px 0 90px; }
  .section-11 h2 {
    color: #000;
    font-size: 15px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0;
    -webkit-text-fill-color: #000;
    padding-bottom: 15px; }
  .section-11 li {
    color: #000;
    font-size: 11px;
    font-weight: normal;
    line-height: 22px; }
  .section-11 li i {
    display: inline-block;
    width: 26px; }
  .sec-3-phone1-pic.fixed {
    top: 1.58rem;
    left: 50%;
    margin-left: -122px; } }

@media screen and (max-width: 1024px) and (min-width: 769px) {
  .sec-7-phone {
    right: auto;
    left: 50%;
    margin-left: -217px; }
  .sec-8-photo {
    right: auto;
    left: 50%;
    margin-left: -54px; } }

@media screen and (max-width: 888px) and (min-width: 769px) {
  .kv-slogan {
    left: calc((700px - 100vw) / 2 + 12px); } }

/* 768px */
@media screen and (max-width: 768px) and (min-width: 481px) {
  .section-center {
    width: 65.1042vw; }
  h2 {
    color: #88ccc4;
    font-size: 5.9896vw;
    line-height: 8.0729vw;
    font-family: 'NewOPPOSansBold';
    font-weight: normal;
    letter-spacing: -0.1996vw;
    background: -webkit-linear-gradient(219deg, #88ccc4, #c4f6de);
    background: linear-gradient(231deg, #88ccc4, #c4f6de);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 2.6042vw; }
  .ie h2 {
    background: none; }
  h2.nogradient {
    background: none;
    background-clip: border-box; }
  h3 {
    color: #333;
    font-size: 2.7344vw;
    line-height: 4.1667vw;
    letter-spacing: -0.0759vw;
    font-family: 'NewOPPOSansBold';
    font-weight: normal; }
  .default-text p, .default-text b {
    color: #333;
    font-size: 1.5625vw;
    line-height: 2.7344vw;
    font-weight: normal; }
  .small-text p, .small-text b {
    color: #000;
    font-size: 1.3021vw;
    line-height: 2.0833vw;
    font-weight: normal; }
  .default-text b, .small-text b {
    display: block; }
  .h2-c h2:first-child {
    padding-bottom: 2.6042vw;
    margin-bottom: -2.6042vw; }
  .h2-c h2:last-child {
    padding-bottom: 2.6042vw; }
  .section-1 {
    height: 89.5833vw;
    overflow: hidden; }
  .section-1 .section-center {
    position: relative; }
  .kv-phone {
    width: 100vw;
    height: 58.3333vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -50vw; }
  .kv-slogan {
    padding-top: 13.0208vw;
    text-align: center; }
  .phone-model {
    width: 36.4583vw;
    height: 6.1198vw;
    margin: 0 auto 1.3021vw; }
  h2.kv-slogan1 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #000;
    font-size: 3.6458vw;
    line-height: 4.5573vw;
    margin-bottom: 3.2552vw;
    padding: 0;
    -webkit-text-fill-color: #000; }
  h3.kv-slogan2 {
    font-family: 'NewOPPOSans';
    letter-spacing: 0;
    color: #222;
    font-size: 1.5625vw;
    line-height: 1.9531vw; }
  .section-2 {
    height: 42.9688vw;
    background-color: #f1f1f1; }
  .section-2 .section-center {
    padding-top: 7.8125vw; }
  .sel-point {
    width: 89.5833vw;
    height: 27.3438vw;
    margin-left: -12.2396vw;
    position: relative; }
  .sel-point-item {
    position: absolute; }
  .sel-point-item:nth-child(1) {
    top: 0;
    left: 0; }
  .sel-point-item:nth-child(2) {
    top: 0;
    left: 50%;
    width: 22.1354vw;
    margin-left: -11.0677vw; }
  .sel-point-item:nth-child(3) {
    top: 0;
    right: 0;
    width: 23.9583vw; }
  .sel-point-item:nth-child(4) {
    bottom: 0;
    left: 0; }
  .sel-point-item:nth-child(5) {
    bottom: 0;
    left: 50%;
    width: 22.1354vw;
    margin-left: -11.0677vw; }
  .sel-point-item:nth-child(6) {
    bottom: 0;
    right: 0;
    width: 23.9583vw; }
  .sel-point-item picture {
    width: 6.5104vw;
    height: 4.1667vw;
    margin-bottom: 0.7813vw; }
  .sel-point-item b {
    display: block;
    font-size: 2.2135vw;
    line-height: 4.0365vw;
    font-weight: normal;
    letter-spacing: -0.0381vw;
    white-space: nowrap; }
  .sel-point-item span {
    display: block;
    font-size: 1.3021vw;
    line-height: 2.3438vw;
    font-weight: normal;
    letter-spacing: -0.02vw;
    white-space: nowrap; }
  .section-3 .section-center {
    position: relative; }
  .section-3 h2 {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 50.7813vw;
    left: 50%;
    width: 63.2813vw;
    margin-left: -31.6406vw;
    mix-blend-mode: hard-light;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1 {
    padding-top: 14.3229vw;
    height: 100vw;
    position: relative;
    z-index: 1; }
  .sec-3-phone1-pic, .sec-3-phone2-pic {
    width: 27.3438vw;
    height: 58.3333vw;
    margin: 0 auto; }
  .sec-3-phone1-pic {
    position: relative; }
  .sec-3-phone1-pic picture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1-pic picture.sec-3-phone1-pic0 {
    -webkit-transition: none;
    transition: none; }
  .sec-3-phone1 h3 {
    width: 22.1354vw;
    position: absolute;
    left: -5.8594vw;
    top: 14.1927vw; }
  .sec-3-phone1 .default-text {
    width: 16.9271vw;
    position: absolute;
    right: -5.8594vw;
    top: 14.3229vw; }
  .screen-point {
    position: absolute;
    top: 26.6927vw;
    left: -5.8594vw; }
  .scr-poi {
    margin-bottom: 2.9948vw; }
  .scr-poi small {
    display: block;
    font-size: 1.3021vw;
    line-height: 1.6927vw;
    font-weight: normal; }
  .scr-poi b {
    display: block;
    font-size: 2.3438vw;
    line-height: 3.2552vw;
    font-weight: normal; }
  .sec-3-phone2 {
    padding-top: 15.625vw;
    position: relative; }
  .sec-3-phone2 h3 {
    width: 18.75vw;
    position: absolute;
    left: -5.8594vw;
    top: 28.125vw; }
  .sec-3-phone2 .default-text {
    width: 16.9271vw;
    position: absolute;
    right: -5.8594vw;
    top: 28.125vw; }
  .icon-authentication {
    width: 4.9479vw;
    height: 4.9479vw;
    position: absolute;
    left: -5.8594vw;
    top: 45.8333vw; }
  .authentication {
    color: #000;
    font-family: 'NewOPPOSansBold';
    font-size: 1.3021vw;
    line-height: 2.0833vw;
    font-weight: normal;
    width: 19.5313vw;
    position: absolute;
    left: -5.8594vw;
    top: 52.3438vw; }
  .sec-3-phone3 {
    position: relative;
    padding-top: 22.6563vw;
    height: 60vw;
    width: 110%;
    margin-left: -5%; }
  .sec-3-phone3 h2 {
    width: 50vw; }
  .sec-3-phone3 .default-text {
    width: 38.0208vw;
    margin-bottom: 6.5104vw; }
  .sec-3-phone-swi-box {
    width: 25.2604vw;
    height: 8.0729vw;
    margin-bottom: 5.7292vw;
    position: relative; }
  .sec-3-phone-swi-box .phone-name {
    position: absolute;
    top: 0;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear; }
  .sec-3-phone-swi-box .phone-name.on {
    pointer-events: none; }
  .sec-3-phone-swi-box .phone-name:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  .sec-3-phone-swi-box .phone-name.on:hover {
    -webkit-transform: scale(1);
            transform: scale(1); }
  .sec-3-phone-swi-box .phone-name:nth-child(1) {
    left: 0; }
  .sec-3-phone-swi-box .phone-name:nth-child(2) {
    right: 0; }
  .sec-3-phone-swi-box .color-circle {
    display: block;
    width: 3.9063vw;
    height: 3.9063vw;
    box-sizing: border-box;
    border-radius: 50%;
    margin: 0 auto 1.5625vw;
    background-size: 100% 100%;
    background-repeat: no-repeat; }
  .sec-3-phone-swi-box .color-circle.cc-1 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcqRVCAAAAGnRSTlMA3HRgRujArIOmJffz75KMZ1lAD6d5MC3HtvZFb0QAAAEdSURBVDjLnVRZsoMgEHzs4EaMqMnc/6CvBMyUZoSK/YNC1+zTf7fxHLn3fHwWSZMwbcd0cJp1rRHTFY/3bJD7jxxYz0maYExc3yAscMIH2POVU5JyI5U78V4NHXfzOjCt2nnN/GYASttlv1AWeQJkvg3wgVmzd8CMWM7jAQc8ckYsnfg1wwnz0c7UC7RH2RT9lOua4gMCKc5cdzPEI1BEE5+GdLQyGSSxxMTbOFddzoRCbmG3Td2YQnzTRJ2CHLfi5G+aqOKj3grkUzPhAilRvxFDneg8ulZl15iMLieD5bHl8mDBl0rBsYWm3EIcirU0FD+M2S+DW1+F7+VaDblc1LouVit6XesCcE9S6iJVl737QorS7AJK822xr+MfqdQ12aau7bMAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .color-circle.cc-2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAADP6+fP6+fQ7OfP6+jP6+fP6+jP6+fP6+fQ7OfQ7OjQ6+bQ7OjP7OfO6ufQ6+fQ6+fP6+fM5ubP6+fQ6+bP6uTM6OjO6ufP6+fQ6+bP6+dfdhRAAAAAGnRSTlMA3HRgpvVG6cCsgyXe75KMWUAPeWcwLce2ZhfIiNwAAAEaSURBVDjLnVTZEsIwCDT30fSwl8r/f6jT0sq0g4l2X5KQHcgS4HYZ9062rezuWVKvgjHCa+2FMUH133iyTo3dD7ZJtWRpSgiVtyAiSCYGxLNJO8uFsU6feI/qxqJ6HJjR7bxqeCYA5+O0G1wkngK7WTV8EOYtOpAisel4wQHjpkjgSrsBThiOfvpakT/Op6p7XBO+DxjgOxN6Cg1miCOG9arBxVh0yGJahZu1rgyvBBHR11J1HWp+8kSPurslObhPPNGtl35JUIufCV+AQtufiRTa5UOTGJ8XQ+mJ+fRQwqdCwukLQ/4LqSjmQlFQmY2ZMvuvcGk3FlqBmmsObHNx7TpF7/h2LQ+ASyOlPKTKY+/6IOVH8/VhX8Ybgpg101dVhVIAAAAASUVORK5CYII=); }
  .sec-3-phone-swi-box .phone-name span {
    color: #c4c4c4;
    font-size: 1.3021vw;
    line-height: 2.3438vw;
    font-weight: normal; }
  .sec-3-phone-swi-box .phone-name.on span {
    color: #000; }
  .sec-3-phone-swi-box .phone-name span br {
    display: none; }
  .sec-3-phone-switch {
    width: 21.6146vw;
    height: 67.7083vw;
    overflow: hidden;
    position: absolute;
    top: 13.0208vw;
    right: 0; }
  .sec-3-phone-switch .phone-img {
    width: 21.6146vw;
    height: 67.7083vw;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone-switch .phone-img:nth-child(1) {
    opacity: 1; }
  .sec-3-phone-swiper {
    display: none; }
  .swiper-arrows {
    display: none; }
  .sec-3-phone4 {
    position: relative;
    padding-top: 21.6146vw; }
  .sec-3-phone4 h3 {
    width: 36.9792vw; }
  .sec-3-phone4 h3:nth-child(2) {
    margin-bottom: 2.6042vw; }
  .sec-3-phone4 .default-text {
    width: 35.6771vw;
    margin-bottom: 7.8125vw; }
  .sec-3-phone4 .small-text {
    width: 20.8333vw;
    padding-left: 6.5104vw;
    margin-bottom: 30.4688vw; }
  .icon-fingerprinticon {
    width: 4.5573vw;
    height: 4.5573vw;
    margin-bottom: -3.3203vw; }
  .sec-3-phone4-pic {
    width: 26.6927vw;
    height: 67.1875vw;
    position: absolute;
    right: 0;
    top: 8.4635vw; }
  .section-4 {
    position: relative;
    padding-top: 71.6146vw; }
  .section-4 .sec-title {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    min-width: 100vw;
    width: 100%;
    height: 71.6146vw;
    background: -webkit-linear-gradient(top, #bde1d2, #e2f9ef);
    background: linear-gradient(180deg, #bde1d2, #e2f9ef);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden; }
  .section-4 .sec-title .section-center {
    padding-top: 13.5417vw; }
  .sec-4-tit-pic {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 51.3021vw;
    height: 64.3229vw; }
  .section-4 h2 {
    width: 29.9479vw;
    padding-bottom: 3.9063vw;
    color: #333;
    font-size: 5.9896vw;
    font-weight: normal;
    line-height: 8.0729vw;
    letter-spacing: -0.1997vw;
    -webkit-text-fill-color: #333; }
  .section-4 .default-text {
    width: 29.9479vw; }
  .camara-part {
    padding-top: 10.4167vw; }
  .camara-part:nth-child(4) {
    position: relative;
    z-index: 1; }
  .cp-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .cp-text.cp-block {
    display: block; }
  .camara-part:nth-child(1) .cp-text {
    margin-bottom: 3.9063vw; }
  .camara-part:nth-child(2) .cp-text {
    margin-bottom: 4.5573vw; }
  .camara-part:nth-child(3) .cp-text {
    margin-bottom: 3.9063vw; }
  .camara-part:nth-child(4) .cp-text {
    margin-bottom: 2.0833vw; }
  .cp-text h3 {
    width: 30.7292vw; }
  .camara-part:nth-child(3) .cp-text h3 {
    width: 32.5521vw; }
  .camara-part:nth-child(4) .cp-text h3 {
    width: 100%; }
  .camara-part:nth-child(4) .cp-text h3:nth-child(2) {
    margin-bottom: 2.6042vw; }
  .cp-text .default-text {
    width: 29.9479vw; }
  .camara-part:nth-child(3) .cp-text .default-text {
    width: 28.6458vw; }
  .camara-part:nth-child(4) .cp-text .default-text {
    width: 46.875vw; }
  .sec-4-photo1 picture {
    display: none; }
  .sec-4-photo1 {
    height: 56.7708vw; }
  .sec-4-photo2 {
    height: 41.6667vw; }
  .sec-4-photo3 {
    height: 30.9896vw; }
  .sec-4-photo3 .pic-box {
    position: relative;
    height: 100%; }
  .sec-4-photo3 picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-4-photo3 picture:nth-child(1) {
    opacity: 1; }
  .sec-4-photo3 .wide-switch {
    position: absolute;
    bottom: 1.9531vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 19.5313vw;
    height: 2.8646vw;
    border-radius: 0.5208vw;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none; }
  .sec-4-photo3 .wide-switch span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.4323vw;
    font-weight: normal;
    line-height: 2.8646vw;
    text-align: center;
    float: left;
    width: 50%;
    height: 100%;
    border-radius: 0.5208vw;
    background: rgba(192, 192, 192, 0.4); }
  .sec-4-photo3 .wide-switch span.on {
    color: #fff;
    background: none; }
  .sec-4-photo-position {
    position: relative;
    z-index: -1;
    height: 66.1458vw;
    margin: 0 auto 11.0677vw; }
  .sec-4-photo-position picture {
    position: absolute;
    width: 32.0313vw; }
  .sec-4-photo4-1 {
    height: 41.6667vw;
    top: 7.1615vw;
    left: 0; }
  .sec-4-photo4-2 {
    height: 23.4375vw;
    top: 0;
    right: 0; }
  .sec-4-photo4-3 {
    height: 41.6667vw;
    bottom: 0;
    right: 0; }
  .section-5 {
    background-color: #f1f1f1;
    overflow: hidden; }
  .section-5 .section-center {
    padding-top: 7.8125vw; }
  .section-5 .h2-c {
    text-align: center;
    width: 76.8229vw;
    margin-left: -5.8594vw; }
  .section-5 .default-text {
    width: 67.7083vw;
    margin: 0 0 7.8125vw -1.3021vw;
    text-align: center; }
  .sec-5-phone {
    width: 100vw;
    margin-left: calc((65.1042vw - 100vw) / 2); }
  .sec-5-phone img {
    height: auto; }
  .section-6 {
    overflow: hidden; }
  .section-6 .section-center {
    padding-top: 10.4167vw; }
  .section-6 .h2-c {
    text-align: center;
    width: 63.5417vw;
    margin: 0 auto 1.3021vw; }
  .section-6 .default-text {
    width: 100%;
    margin: 0 auto 6.5104vw;
    text-align: center; }
  .sec-6-photo {
    width: 100vw;
    margin-left: calc((65.1042vw - 100vw) / 2); }
  .sec-6-phone img {
    height: auto; }
  .section-7 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-7 .section-center {
    padding-top: 63.2813vw; }
  .section-7 .h2-c {
    width: 67.7083vw;
    margin-bottom: 1.3021vw; }
  .section-7 .default-text {
    margin-bottom: 15.625vw; }
  .sec-7-phone {
    width: 90.1042vw;
    height: 87.8906vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1; }
  .section-8 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-8 .section-center {
    padding-top: 3.5156vw; }
  .section-8 .h2-c {
    width: 40.3646vw;
    margin-bottom: 1.3021vw; }
  .section-8 .default-text {
    width: 26.0417vw;
    margin-bottom: 6.5104vw; }
  .tone-quality {
    width: 17.7083vw;
    margin-bottom: 13.8021vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .icon-hi-res-audio {
    width: 3.9063vw;
    height: 3.9063vw; }
  .icon-dirac {
    width: 11.1979vw;
    height: 3.6458vw; }
  .sec-8-photo {
    width: 53.9063vw;
    height: 80.7292vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1; }
  .section-9 {
    height: 111.9792vw;
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-9 .section-center {
    padding-top: 13.0208vw; }
  .section-9 h2 {
    color: #fff;
    font-size: 5.9896vw;
    font-weight: normal;
    line-height: 8.0729vw;
    letter-spacing: -0.2604vw;
    text-align: center;
    -webkit-text-fill-color: #fff; }
  .sec-9-phone {
    width: 100vw;
    height: 111.9792vw;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    z-index: -1; }
  .section-10 {
    background: -webkit-linear-gradient(top, #7bc4ea, #baeec8);
    background: linear-gradient(180deg, #7bc4ea, #baeec8); }
  .section-10 .section-center {
    padding: 9.1146vw 0; }
  .sec-10-block {
    height: 61.1979vw;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2.8646vw;
    box-sizing: border-box;
    margin-bottom: 2.6042vw;
    position: relative;
    overflow: hidden; }
  .sec-10-block:nth-child(2) {
    height: 65.1042vw; }
  .sec-10-block:last-child {
    margin-bottom: 0; }
  .sec-10-text {
    padding: 5.2083vw; }
  .sec-10-text h3 {
    margin-bottom: 1.8229vw; }
  .sec-10-phone {
    width: 36.4583vw;
    height: 77.8646vw;
    margin: 0 auto; }
  .sec-10-swiper {
    display: none; }
  .section-11 .section-center {
    padding: 9.1146vw 0 11.7188vw; }
  .section-11 h2 {
    color: #000;
    font-size: 1.9531vw;
    font-weight: normal;
    line-height: 2.474vw;
    letter-spacing: 0;
    -webkit-text-fill-color: #000;
    padding-bottom: 1.9531vw; }
  .section-11 li {
    color: #000;
    font-size: 1.4323vw;
    font-weight: normal;
    line-height: 2.8646vw; }
  .section-11 li i {
    display: inline-block;
    width: 3.3854vw; }
  .sec-3-phone1-pic.fixed {
    top: calc(1.28rem + 14.3229vw);
    left: 50%;
    margin-left: -13.6719vw; } }

/* 360px */
@media screen and (max-width: 480px) {
  .section-center {
    width: 86.6667vw; }
  h2 {
    color: #88ccc4;
    font-size: 8.3333vw;
    line-height: 12.5vw;
    font-family: 'NewOPPOSansBold';
    font-weight: normal;
    letter-spacing: -0.2778vw;
    background: -webkit-linear-gradient(219deg, #88ccc4, #c4f6de);
    background: linear-gradient(231deg, #88ccc4, #c4f6de);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; }
  .ios h2 {
    letter-spacing: -0.6vw; }
  h2.nogradient {
    background: none;
    background-clip: border-box; }
  h3 {
    color: #333;
    font-size: 6.9444vw;
    line-height: 9.7222vw;
    letter-spacing: -0.1944vw;
    font-family: 'NewOPPOSansBold';
    font-weight: normal; }
  .ios h3 {
    letter-spacing: -0.5vw; }
  .default-text p, .default-text b {
    color: #333;
    font-size: 4.1667vw;
    line-height: 7.7778vw;
    letter-spacing: -0.0833vw;
    font-weight: normal; }
  .small-text p, .small-text b {
    color: #000;
    font-size: 3.3333vw;
    line-height: 5vw;
    font-weight: normal; }
  .default-text b, .small-text b {
    display: block; }
  .section-1 {
    height: 156.9444vw;
    overflow: hidden; }
  .section-1 .section-center {
    position: relative; }
  .kv-phone {
    width: 100vw;
    height: 146.6667vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -50vw; }
  .kv-slogan {
    position: absolute;
    top: 12.7778vw;
    left: 1.3889vw; }
  .phone-model {
    width: 49.4444vw;
    height: 8.3333vw;
    margin-bottom: 2.2222vw; }
  h2.kv-slogan1 {
    font-family: 'NewOPPOSans';
    font-weight: normal;
    letter-spacing: 0;
    color: #000;
    font-size: 5.5556vw;
    line-height: 6.9444vw;
    margin-bottom: 4.4444vw;
    -webkit-text-fill-color: #000; }
  h3.kv-slogan2 {
    font-family: 'NewOPPOSans';
    font-weight: normal;
    letter-spacing: 0;
    color: #222;
    font-size: 3.3333vw;
    line-height: 4.1667vw; }
  .ios h2.kv-slogan1, .ios h3.kv-slogan2 {
    font-weight: normal; }
  .section-2 {
    height: 148.8889vw;
    background-color: #f1f1f1; }
  .section-2 .section-center {
    overflow: hidden; }
  .sel-point {
    width: 100%;
    height: 121.1111vw;
    margin-top: 13.8889vw;
    position: relative; }
  .sel-point-item {
    margin-bottom: 8.3333vw;
    overflow: hidden; }
  .sel-point-item:last-child {
    margin-bottom: 0; }
  .sel-point-item picture {
    width: 13.9333vw;
    height: 8.9833vw;
    float: left;
    margin: 1.9444vw 7.2222vw 1.9444vw 0;
    position: relative; }
  .sel-point-item:nth-child(3) picture {
    left: 1.1111vw; }
  .sel-point-item:nth-child(4) picture {
    left: 2.5vw; }
  .sel-point-item:nth-child(5) picture {
    left: 1.9444vw; }
  .sel-point-item:nth-child(6) picture {
    left: 2.5vw; }
  .sel-point-item b {
    display: block;
    font-size: 4.7222vw;
    line-height: 8.6111vw;
    font-weight: normal;
    letter-spacing: -0.0726vw;
    margin-bottom: -0.6389vw;
    white-space: nowrap; }
  .sel-point-item span {
    display: block;
    font-size: 2.7778vw;
    line-height: 5vw;
    font-weight: normal;
    letter-spacing: -0.0427vw;
    white-space: nowrap; }
  .ios .section-2 .sel-point-item b {
    margin-bottom: -1vw; }
  .section-3 .section-center {
    position: relative; }
  .section-3 h2 {
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 68.3333vw;
    left: 0;
    mix-blend-mode: hard-light;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-3-phone1 {
    padding-top: 13.8889vw;
    position: relative;
    z-index: 1; }
  .sec-3-phone1-pic, .sec-3-phone2-pic {
    width: 52.7778vw;
    height: 112.7778vw;
    margin: 0 auto 16.6667vw; }
  .sec-3-phone1-pic0, .sec-3-phone1-pic2 {
    display: none; }
  .sec-3-phone1 h3 {
    width: 58.3333vw;
    margin-bottom: 6.9444vw; }
  .sec-3-phone1 .default-text {
    margin-bottom: 9.4444vw; }
  .screen-point {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 72.2222vw;
    padding-bottom: 16.6667vw; }
  .screen-point::after {
    content: ''; }
  .scr-poi {
    margin-bottom: 6.9444vw;
    min-width: 50%; }
  .scr-poi:last-child {
    margin-bottom: 0; }
  .scr-poi small {
    display: block;
    font-size: 2.7778vw;
    line-height: 3.6111vw;
    font-weight: normal; }
  .scr-poi b {
    display: block;
    font-size: 5vw;
    line-height: 6.9444vw;
    font-weight: normal; }
  .sec-3-phone2 {
    padding: 16.6667vw 6.6667vw 0;
    width: 86.6667vw;
    position: relative;
    left: -6.6667vw;
    background-color: #e0eafe;
    overflow: hidden; }
  .sec-3-phone2 h3 {
    width: 60vw;
    margin-bottom: 6.6667vw; }
  .sec-3-phone2 .default-text {
    margin-bottom: 8.3333vw; }
  .icon-authentication {
    width: 12.5vw;
    height: 12.5vw;
    margin-bottom: -12vw; }
  .authentication {
    padding-left: 16.6667vw;
    margin-bottom: 146vw;
    color: #000;
    font-family: 'NewOPPOSansBold';
    font-size: 3.3333vw;
    line-height: 5vw;
    font-weight: normal;
    width: 55vw; }
  .sec-3-phone2-pic {
    position: absolute;
    bottom: 6vw;
    left: 0;
    right: 0; }
  .sec-3-phone3 {
    position: relative;
    padding-top: 16.6667vw; }
  .sec-3-phone3 h2 {
    width: 90%;
    margin-bottom: 4.1667vw; }
  .sec-3-phone3 .default-text {
    margin-bottom: 16.6667vw; }
  .sec-3-phone-swi-box {
    display: none; }
  .sec-3-phone-switch {
    display: none; }
  .sec-3-phone-swiper {
    width: 43.0556vw;
    height: 150.5556vw;
    margin: 0 auto;
    overflow: hidden;
    position: relative; }
  .sec-3-phone-swiper .phone-img {
    width: 43.0556vw;
    opacity: 0 !important; }
  .sec-3-phone-swiper .phone-img.swiper-slide-active {
    opacity: 1 !important; }
  .sec-3-phone-swiper .phone-img picture {
    height: 134.4444vw;
    margin-bottom: 11.1111vw; }
  .sec-3-phone-swiper .phone-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .sec-3-phone-swiper .phone-name .color-circle {
    width: 5vw;
    height: 5vw;
    box-sizing: border-box;
    border-radius: 50%;
    margin-right: 2.7778vw;
    background-size: 100% 100%;
    background-repeat: no-repeat; }
  .sec-3-phone-swiper .phone-name .color-circle.cc-1 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcqRVCAAAAGnRSTlMA3HRgRujArIOmJffz75KMZ1lAD6d5MC3HtvZFb0QAAAEdSURBVDjLnVRZsoMgEHzs4EaMqMnc/6CvBMyUZoSK/YNC1+zTf7fxHLn3fHwWSZMwbcd0cJp1rRHTFY/3bJD7jxxYz0maYExc3yAscMIH2POVU5JyI5U78V4NHXfzOjCt2nnN/GYASttlv1AWeQJkvg3wgVmzd8CMWM7jAQc8ckYsnfg1wwnz0c7UC7RH2RT9lOua4gMCKc5cdzPEI1BEE5+GdLQyGSSxxMTbOFddzoRCbmG3Td2YQnzTRJ2CHLfi5G+aqOKj3grkUzPhAilRvxFDneg8ulZl15iMLieD5bHl8mDBl0rBsYWm3EIcirU0FD+M2S+DW1+F7+VaDblc1LouVit6XesCcE9S6iJVl737QorS7AJK822xr+MfqdQ12aau7bMAAAAASUVORK5CYII=); }
  .sec-3-phone-swiper .phone-name .color-circle.cc-2 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAUVBMVEUAAADP6+fP6+fQ7OfP6+jP6+fP6+jP6+fP6+fQ7OfQ7OjQ6+bQ7OjP7OfO6ufQ6+fQ6+fP6+fM5ubP6+fQ6+bP6uTM6OjO6ufP6+fQ6+bP6+dfdhRAAAAAGnRSTlMA3HRgpvVG6cCsgyXe75KMWUAPeWcwLce2ZhfIiNwAAAEaSURBVDjLnVTZEsIwCDT30fSwl8r/f6jT0sq0g4l2X5KQHcgS4HYZ9062rezuWVKvgjHCa+2FMUH133iyTo3dD7ZJtWRpSgiVtyAiSCYGxLNJO8uFsU6feI/qxqJ6HJjR7bxqeCYA5+O0G1wkngK7WTV8EOYtOpAisel4wQHjpkjgSrsBThiOfvpakT/Op6p7XBO+DxjgOxN6Cg1miCOG9arBxVh0yGJahZu1rgyvBBHR11J1HWp+8kSPurslObhPPNGtl35JUIufCV+AQtufiRTa5UOTGJ8XQ+mJ+fRQwqdCwukLQ/4LqSjmQlFQmY2ZMvuvcGk3FlqBmmsObHNx7TpF7/h2LQ+ASyOlPKTKY+/6IOVH8/VhX8Ybgpg101dVhVIAAAAASUVORK5CYII=); }
  .sec-3-phone-swiper .phone-name span {
    color: #000;
    font-size: 3.6111vw;
    line-height: 5vw; }
  .swiper-arrows {
    height: 28.8889vw;
    position: relative; }
  .swiper-arrows i {
    display: block;
    width: 4.1667vw;
    height: 8.8889vw;
    position: absolute;
    top: -82.7778vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    outline: none; }
  .swiper-arrows i::after {
    display: none; }
  .swipe-left {
    background-image: url(../png/arrow-l-d5d0298730419a532a656d20fb4e9cda.png);
    left: 0; }
  .swipe-right {
    background-image: url(../png/arrow-r-ec771971a48f901d3f3f35e3f48e7ad2.png);
    right: 0; }
  .sec-3-phone4 {
    position: relative; }
  .sec-3-phone4 h3:nth-child(2) {
    margin-bottom: 6.3889vw; }
  .sec-3-phone4 .default-text {
    margin-bottom: 11.1111vw; }
  .sec-3-phone4 .small-text {
    width: 50vw;
    padding: 0 0 147.2222vw 15.8333vw; }
  .icon-fingerprinticon {
    width: 11.1111vw;
    height: 11.1111vw;
    margin-bottom: -8.05555vw; }
  .sec-3-phone4-pic {
    width: 100vw;
    height: 147.2222vw;
    position: absolute;
    left: -6.6667vw;
    bottom: 0; }
  .section-4 {
    position: relative;
    padding-top: 225vw; }
  .section-4 .sec-title {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    min-width: 100vw;
    width: 100%;
    height: 225vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden; }
  .section-4 .sec-title .section-center {
    padding-top: 16.6667vw; }
  .section-4 .sec-title .default-text {
    width: 104%; }
  .sec-4-tit-pic {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 100vw;
    height: 127.7778vw;
    background: -webkit-linear-gradient(top, #bde1d2, #e2f9ef);
    background: linear-gradient(180deg, #bde1d2, #e2f9ef); }
  .sec-4-tit-pic img {
    width: 92.7778vw;
    height: 118.0556vw;
    position: absolute;
    bottom: 0;
    right: 0; }
  .section-4 h2 {
    padding-bottom: 6.1111vw;
    font-size: 8.3333vw;
    font-weight: normal;
    line-height: 11.1111vw;
    letter-spacing: -0.2778vw;
    background: -webkit-linear-gradient(219deg, #88ccc4, #c4f6de);
    background: linear-gradient(231deg, #88ccc4, #c4f6de);
    -webkit-background-clip: text;
    background-clip: text; }
  .camara-part {
    padding-top: 16.6667vw; }
  .camara-part:nth-child(1) {
    background: #e0eafe;
    width: 86.6667vw;
    padding: 16.6667vw 6.6667vw;
    margin-left: -6.6667vw; }
  .cp-text h3 {
    margin-bottom: 5.5556vw; }
  .camara-part:nth-child(2) h3 {
    width: 80%; }
  .cp-text .default-text {
    margin-bottom: 8.3333vw; }
  .camara-part:nth-child(3) .default-text {
    width: 90%; }
  .camara-part:nth-child(4) h3 {
    width: 90%; }
  .camara-part:nth-child(4) h3:nth-child(1) {
    margin: 0; }
  .sec-4-photo1 video {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none; }
  .sec-4-photo1.on video {
    width: 100%;
    height: 75.5556vw;
    opacity: 1;
    pointer-events: all; }
  .sec-4-photo1 picture {
    position: relative; }
  .sec-4-photo1 picture::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../png/video-play-4d2ea6b870a194cb8cf4b2814c6027de-2.png) no-repeat center center;
    background-size: 17.7778vw 17.7778vw;
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  .sec-4-photo2, .sec-4-photo3 {
    width: 100vw;
    margin-left: -6.6667vw; }
  .sec-4-photo1 {
    height: 75.5556vw; }
  .sec-4-photo2 {
    height: 77.7778vw; }
  .sec-4-photo3 {
    height: 77.7778vw; }
  .sec-4-photo3 .pic-box {
    position: relative;
    height: 100%; }
  .sec-4-photo3 picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear; }
  .sec-4-photo3 picture:nth-child(1) {
    opacity: 1; }
  .sec-4-photo3 .wide-switch {
    position: absolute;
    bottom: 4.4444vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 41.6667vw;
    height: 5vw;
    border-radius: 1.1111vw;
    background: rgba(0, 0, 0, 0.5); }
  .sec-4-photo3 .wide-switch span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 2.5vw;
    font-weight: normal;
    line-height: 5vw;
    text-align: center;
    float: left;
    width: 50%;
    height: 100%;
    border-radius: 1.1111vw;
    background: rgba(192, 192, 192, 0.4); }
  .sec-4-photo3 .wide-switch span.on {
    color: #fff;
    background: none;
    pointer-events: none; }
  .sec-4-photo-position {
    position: relative;
    z-index: -1;
    width: 93.3333vw;
    height: 257.2222vw;
    margin: 0 auto 13.8889vw; }
  .sec-4-photo-position picture {
    position: absolute; }
  .sec-4-photo4-1 {
    width: 65vw;
    height: 91.1111vw;
    top: 0;
    left: 0; }
  .sec-4-photo4-2 {
    width: 86.6667vw;
    height: 65vw;
    bottom: 0;
    left: 0; }
  .sec-4-photo4-3 {
    width: 68.3333vw;
    height: 95.8333vw;
    top: 93.8889vw;
    right: 0; }
  .section-5 {
    background-color: #f1f1f1;
    overflow: hidden; }
  .section-5 .section-center {
    padding-top: 11.1111vw; }
  .section-5 .h2-c {
    width: 86%;
    margin-bottom: 6.6667vw; }
  .section-5 .default-text {
    margin-bottom: 6.1111vw; }
  .sec-5-phone {
    width: 100vw;
    height: 83.3333vw;
    margin-left: -6.6667vw; }
  .section-6 {
    overflow: hidden; }
  .section-6 .section-center {
    padding-top: 21.1111vw; }
  .section-6 .h2-c {
    width: 102%;
    margin-bottom: 6.6667vw; }
  .section-6 .default-text {
    width: 97%;
    margin-bottom: 11.1111vw; }
  .sec-6-photo {
    width: 100vw;
    height: 138.8889vw;
    margin-left: -6.6667vw; }
  .section-7 {
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-7 .section-center {
    padding-top: 108.8889vw; }
  .section-7 .h2-c {
    width: 102%;
    margin-bottom: 7.5vw; }
  .sec-7-phone {
    width: 100vw;
    height: 147.2222vw;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    z-index: -1; }
  .section-8 {
    overflow: hidden; }
  .section-8 .section-center {
    padding-top: 27.7778vw; }
  .section-8 .h2-c {
    width: 80%;
    margin-bottom: 6.1111vw; }
  .section-8 .default-text {
    margin-bottom: 8.3333vw; }
  .tone-quality {
    width: 46.6667vw;
    margin-bottom: 14.7222vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .icon-hi-res-audio {
    width: 12.5vw;
    height: 12.5vw; }
  .icon-dirac {
    width: 27.2222vw;
    height: 8.8889vw; }
  .sec-8-photo {
    width: 100vw;
    height: 133.8889vw;
    margin-left: -6.6667vw; }
  .section-9 {
    height: 138.8889vw;
    position: relative;
    z-index: 1;
    overflow: hidden; }
  .section-9 .section-center {
    padding-top: 15vw; }
  .section-9 h2 {
    color: #fff;
    font-size: 8.3333vw;
    font-weight: normal;
    line-height: 11.1111vw;
    letter-spacing: -0.2778vw;
    text-align: center;
    -webkit-text-fill-color: #fff; }
  .sec-9-phone {
    width: 100vw;
    height: 138.8889vw;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    z-index: -1; }
  .section-10 {
    background: -webkit-linear-gradient(top, #8bd2f8, #bc97c1);
    background: linear-gradient(180deg, #8bd2f8, #bc97c1);
    position: relative; }
  .section-10 .section-center {
    padding: 16.6667vw 0; }
  .sec-10-block {
    display: none; }
  .sec-10-swiper {
    width: 70.5556vw;
    height: 158.3333vw;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5.5556vw;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; }
  .sec-10-text {
    padding: 8.3333vw 3vw 0 4vw; }
  .sec-10-text h3 {
    margin-bottom: 4.1667vw;
    font-size: 5.5556vw;
    line-height: 10vw;
    letter-spacing: 0; }
  .sec-10-text .default-text p {
    font-size: 3.6111vw;
    line-height: 6.9444vw;
    letter-spacing: -0.0556vw; }
  .sec-10-phone {
    width: 31.1111vw;
    height: 66.6667vw;
    position: absolute;
    bottom: 7.2222vw;
    left: 50%;
    margin-left: -15.5556vw; }
  .section-10 .pager {
    width: 100%;
    position: absolute;
    bottom: 11.6667vw;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .section-10 .pager .my-bullet {
    width: 4.4444vw;
    height: 1.1111vw;
    margin: 0 0.8333vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAICAYAAACYhf2vAAAABHNCSVQICAgIfAhkiAAAAGBJREFUOI3F07ENwgAMAMGzJUqgJhMkM7A+OyQbhDZKiYRpaCmDf4H/5gOq6oYJF5wcywsb5oh4RlUNuB8s/cUjMTbJYUpcGwPOiXdjgMTe6N8TS2PAHPA9YfTfDZeIWD/1ghckriLVQgAAAABJRU5ErkJggg==) no-repeat;
    background-size: 100% 100%; }
  .section-10 .pager .my-bullet.my-bullet-active {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAICAYAAACYhf2vAAAABHNCSVQICAgIfAhkiAAAAF1JREFUOI3F00ENwlAAwNC3nVGEAS4bWCVoYGgAE2QJRw5FBfk10F4KqqXaqr3/s1f36gRTteJmDOtUbTgOCnhM1QeHQQHvGd9BcjDjNdD/nKoLroMCVlCdB2y4wA8EugAd3ofzSwAAAABJRU5ErkJggg==); }
  .section-11 .section-center {
    padding: 19.4444vw 0 25vw; }
  .section-11 h2 {
    color: #000;
    font-size: 4.1667vw;
    font-weight: normal;
    line-height: 5.2778vw;
    letter-spacing: 0;
    -webkit-text-fill-color: #000;
    padding-bottom: 4.1667vw; }
  .section-11 li {
    color: #000;
    font-size: 3.0556vw;
    font-weight: normal;
    line-height: 6.1111vw; }
  .section-11 li i {
    display: inline-block;
    width: 7.2222vw; }
  .dialog-for-video {
    width: 100vw;
    height: 0;
    background: #000;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    overflow: hidden; }
  .dialog-for-video video {
    width: 90vw;
    height: 78.46vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .dialog-for-video .close-dia {
    display: block;
    width: 10vw;
    height: 10vw;
    position: absolute;
    top: 50%;
    right: 4vw;
    margin-top: -53.23vw;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAVFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////8wXzyWAAAAG3RSTlMA1WAFn0j8TqXCCbwCv6JLubDfDtqMaV9YNyql0BUhAAABwElEQVRo3u3Zy27CMBBGYVNjUkhIgN477/+eTdlENEIn6gk7z7qjT+n8sjwm1apVq9bD60N1d03iyqd4EkZu2khUL6cIoeRyHPvJOEcIJZd9BCmH0TBK2e8ClVOEUZrjaJAyGkLpmt9+Ut4iQKFcxQJlAwrnaqrnw/pKvs58qj7NyivDrbHtklA4V1fjkJJQIFdgCCUP7e3MqYEVzhUTrHCurMK5yml9pWkhV17pmjbgO4TCufLKlCuYuVY6zJVXOFde4Vx5Jf85r/rpO7zCufIKn1deuZOrbUrrK8OeZu6Vpg0wrAK5WkkZeOZe2YCxjoK58grMXCnCcErfQZNQYOaqXtnw9bW7MS70v3K7mtor+U6tFd7VvMJ3aq/wnfrRysywCt+pL17hXa3bgOJz1bt9f/mu5hXe1bzCd2qv8J3aK7yreYV3NVZ8rrzCuxorPles+Fx5ZbarwXeAonLlFX4D8ArsaqsqA70nsuLfE73Cu5pXMu5qXsllT4ZXOFde4Xdqr3yKN4CZ8n7nr75nu5pQzndHgjNnhduLMCaFjruCv3+wws+RBWfOCrcXZYzKoqOo2Le+Re0l1apVq9b/6wdxfcCY6xb6zQAAAABJRU5ErkJggg==) no-repeat;
    background-size: 100% 100%; } }

/* fitNav */
@media screen and (min-width: 1081px) {
  #product-nav {
    margin-bottom: -1.07rem; }
  .section-1 {
    padding-top: 1.07rem; } }

@media screen and (max-width: 1080px) {
  #product-nav {
    margin-bottom: -1.28rem; }
  .section-1 {
    padding-top: 1.28rem; } }

#oc-footer {
  opacity: 1 !important; }