@font-face {
  font-family: "OPPOSans";
  src: url(http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Regular.ttf) format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: "OPPOSans";
  src: url(http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Medium.ttf) format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "OPPOSans";
  src: url(http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Bold.ttf) format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: "OPPOSans";
  src: url(http://assorted.downloads.oppo.com/static/assets/fonts/OPPOSans/OPPOSans-Ultra.ttf) format("truetype");
  font-weight: 700;
  font-style: normal; }

/* public */
.pop-up {
  display: none; }

.hidden {
  display: none !important; }

body {
  overflow-x: hidden; }

.section {
  font-family: "OPPOSans";
  position: relative;
  background-color: #ffffff;
  color: #333; }

.wrapper {
  margin: 0 auto; }

@media screen and (max-width: 1080px) {
  #oc-wrapper {
    overflow: visible; }
  .oh-nav {
    overflow-x: hidden; }
  .h5-gradient-text {
    background-image: -webkit-linear-gradient(0deg, #45a9ed 0%, #8163ff 100%);
    line-height: 1;
    padding-bottom: 0.2rem;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .h5-gradient-text2 {
    background-image: -webkit-linear-gradient(0deg, #59b8f9 0%, #957cff 100%);
    line-height: 1;
    padding-bottom: 0.2rem;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .h5-title-lg {
    font-size: 0.72rem;
    line-height: 1rem;
    font-weight: 700; }
  .h5-title-md {
    font-size: 0.54rem;
    font-weight: 500;
    line-height: 0.75rem; }
  .comm-desc {
    font-weight: 400;
    font-size: 0.36rem;
    line-height: 0.72rem;
    color: #999; }
  .comm-params {
    font-size: 0.3rem;
    line-height: 0.52rem;
    color: #fff;
    font-weight: 500; }
  .comm-remarks {
    font-size: 0.24rem;
    line-height: 0.46rem;
    color: #666;
    font-weight: 300; }
  .features-div {
    overflow: hidden; }
  .features-content {
    margin: 0.44rem auto;
    width: 9rem; }
  .features-item {
    position: relative;
    display: inline-block;
    text-align: center; }
  .features-icon {
    display: block;
    width: 1.62rem;
    height: 1.62rem;
    margin: 0 auto; }
    .features-icon img {
      height: 1.62rem; }
  .features-desc {
    display: inline-block;
    font-weight: 500;
    font-size: 0.3rem;
    line-height: 0.5rem;
    color: #333;
    text-align: center; }
  .features-item:nth-child(even) {
    margin-left: 1rem; }
  .inline-remark-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .inline-remark-title span:nth-child(2) {
    margin: 0.1rem 0.2rem 0 0; }
  .h5-txt-center {
    text-align: center; }
  .h5-mt20 {
    margin-top: 0.2rem; }
  .h5-mt42 {
    margin-top: 0.42rem; }
  .h5-mt48 {
    margin-top: 0.48rem; }
  .h5-mt72 {
    margin-top: 0.72rem; }
  .h5-mt84 {
    margin-top: 0.84rem; }
  .h5-mt100 {
    margin-top: 1rem; }
  .h5-mt150 {
    margin-top: 1.5rem; }
  .h5-mt240 {
    margin-top: 2.4rem; }
  .h5-width300 {
    width: 3rem; }
  .h5-width350 {
    width: 3.5rem; }
  .h5-width390 {
    width: 3.9rem; }
  .h5-width450 {
    width: 4.5rem; }
  .h5-width-auto {
    display: inline-block;
    width: auto; }
  .lineHeight1 {
    line-height: 1; }
  .radio-style {
    height: 0.6rem;
    width: 0.6rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    vertical-align: middle; }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    10%,
    20% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale(1) rotate(3deg);
              transform: scale(1) rotate(3deg); }
    40%,
    60%,
    80% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    100% {
      -webkit-transform: scale(1) rotate(0);
              transform: scale(1) rotate(0); } }
  @keyframes shake {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    10%,
    20% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale(1) rotate(3deg);
              transform: scale(1) rotate(3deg); }
    40%,
    60%,
    80% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    100% {
      -webkit-transform: scale(1) rotate(0);
              transform: scale(1) rotate(0); } }
  .shakeAni {
    -webkit-animation: shake 200ms 3;
            animation: shake 200ms 3; }
  .pc-show {
    display: none; }
  .h5-show {
    display: block; }
  .section {
    margin-top: -2px; }
  .section1 {
    overflow: hidden; }
    .section1 .wrapper {
      width: 100%; }
      .section1 .wrapper .s1-top-bg,
      .section1 .wrapper .s1-top-bg {
        display: block;
        width: 10.8rem;
        height: 5.22rem;
        margin: 0 auto; }
        .section1 .wrapper .s1-top-bg img,
        .section1 .wrapper .s1-top-bg img {
          width: 10.8rem;
          height: 5.22rem; }
      .section1 .wrapper .s1-title-p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: auto;
        font-weight: 700;
        margin: 1.2rem auto 0.28rem;
        line-height: 1.2rem;
        font-size: 0.9rem; }
        .section1 .wrapper .s1-title-p .s1-name {
          display: inline-block;
          line-height: 1.2rem; }
        .section1 .wrapper .s1-title-p .s1-year {
          display: inline-block;
          line-height: 0.2rem;
          font-size: 0.3rem;
          font-weight: 500;
          padding-top: 0.2rem;
          margin-top: 0.2rem; }
      .section1 .wrapper .h5-s1-remarks {
        text-align: center;
        width: 9.6rem;
        margin: 0.42rem auto 0; }
      .section1 .wrapper .h5-s1-remarks2 {
        text-align: center;
        width: 9.6rem;
        margin: 0.1rem auto 1.9rem; }
      .section1 .wrapper .features-div {
        background: #e6f0ff; }
        .section1 .wrapper .features-div .features-content {
          margin: 1.3rem auto 1.5rem; }
  .section2 {
    overflow: hidden; }
    .section2 .wrapper .s2-content1 {
      margin-top: 2rem;
      width: 9.6rem;
      margin: 2rem auto 0; }
      .section2 .wrapper .s2-content1 .s2-features {
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin-top: 0.52rem; }
        .section2 .wrapper .s2-content1 .s2-features .features-item {
          margin: 0; }
        .section2 .wrapper .s2-content1 .s2-features .features-item:nth-child(3) {
          margin-top: 1rem; }
    .section2 .wrapper .s2-phone-content {
      position: relative;
      display: inline-block;
      margin: 1rem 0 1.9rem;
      width: 10.8rem;
      height: 9rem; }
      .section2 .wrapper .s2-phone-content picture {
        display: block; }
      .section2 .wrapper .s2-phone-content .s2-phone-back {
        width: 7.14rem;
        height: 9rem; }
        .section2 .wrapper .s2-phone-content .s2-phone-back img {
          width: 7.14rem;
          height: 9rem; }
      .section2 .wrapper .s2-phone-content .s2-phone-lines {
        position: absolute;
        top: 0;
        right: 0.68rem;
        width: 1.92rem;
        height: 0.78rem; }
        .section2 .wrapper .s2-phone-content .s2-phone-lines img {
          height: 0.78rem; }
  .section2_1 {
    width: 100%;
    background-image: -webkit-linear-gradient(bottom, #d9eaff 0%, rgba(248, 248, 255, 0) 83%);
    background-image: linear-gradient(0deg, #d9eaff 0%, rgba(248, 248, 255, 0) 83%); }
    .section2_1 .wrapper {
      width: 100%;
      position: relative; }
      .section2_1 .wrapper .s2-content2 {
        width: 9.6rem;
        margin: 0 auto; }
      .section2_1 .wrapper .s2-aniDiv {
        width: 100%;
        height: 100%;
        overflow: hidden; }
      .section2_1 .wrapper .s2-pic-div {
        width: 100%;
        margin-top: 1.5rem;
        margin-bottom: 0.54rem;
        height: 5.4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
        .section2_1 .wrapper .s2-pic-div .s2-pic-lg {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          width: 10.8rem;
          height: 5.4rem;
          left: 0; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg img {
            width: 100%;
            height: 100%; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-p {
            display: inline-block;
            background: rgba(51, 51, 51, 0.32);
            border-radius: 0.1rem;
            color: #fff;
            font-weight: 500;
            position: absolute;
            line-height: 1;
            bottom: 0.5rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-content {
            display: inline-block;
            width: auto;
            margin: 0.25rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-num {
            font-size: 0.3rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-txt {
            font-size: 0.16rem; }
        .section2_1 .wrapper .s2-pic-div .s2-leftBlock,
        .section2_1 .wrapper .s2-pic-div .s2-rightBlock {
          position: absolute;
          width: 0.9rem;
          height: 6rem;
          background: #fff;
          z-index: 2; }
        .section2_1 .wrapper .s2-pic-div .s2-leftBlock {
          left: 0; }
        .section2_1 .wrapper .s2-pic-div .s2-rightBlock {
          right: 0; }
      .section2_1 .wrapper .s2-features2 {
        overflow: hidden;
        width: 9.6rem;
        margin: 0.44rem auto 1.5rem;
        text-align: center; }
        .section2_1 .wrapper .s2-features2 .features-item {
          margin: 0; }
        .section2_1 .wrapper .s2-features2 .features-item:nth-child(2) {
          margin-left: 1.4rem; }
  .section3 {
    overflow: hidden;
    background-image: -webkit-linear-gradient(154deg, #000000 2%, #1d2034 100%);
    background-image: linear-gradient(-64deg, #000000 2%, #1d2034 100%); }
    .section3 .s3-content1 {
      width: 9.6rem;
      margin: 0 auto; }
      .section3 .s3-content1 .h5-title-md,
      .section3 .s3-content1 .comm-desc,
      .section3 .s3-content1 .features-desc {
        color: #fff; }
    .section3 .s3-video-content {
      position: relative;
      margin: 1.36rem auto 0.5rem;
      width: 9.6rem;
      height: 4.8rem; }
      .section3 .s3-video-content .s3-video {
        position: absolute;
        width: 9.6rem;
        height: 4.8rem;
        top: 0;
        left: 0;
        z-index: 1; }
    .section3 .s3-features {
      margin-top: 0.45rem;
      margin-bottom: 1.5rem;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .section3 .s3-features .features-item:nth-child(2) {
        margin-left: 2.4rem; }
      .section3 .s3-features .features-desc {
        color: #fff; }
  .section4 {
    background-image: -webkit-linear-gradient(271deg, #ffffff 0%, #d9eaff 100%);
    background-image: linear-gradient(179deg, #ffffff 0%, #d9eaff 100%);
    overflow: hidden; }
    .section4 .wrapper {
      position: relative; }
      .section4 .wrapper .s4-content-body {
        overflow: hidden;
        position: relative;
        width: 9.6rem;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        .section4 .wrapper .s4-content-body .s4-content {
          width: 9.6rem; }
        .section4 .wrapper .s4-content-body .s4-pic-content {
          margin-top: 1.73rem;
          width: 9.6rem;
          height: 12.48rem; }
          .section4 .wrapper .s4-content-body .s4-pic-content .s4-pic-item {
            display: block;
            width: 9.6rem;
            height: 12.48rem; }
            .section4 .wrapper .s4-content-body .s4-pic-content .s4-pic-item img {
              width: 9.6rem;
              height: 12.48rem; }
      .section4 .wrapper .s4-seeMore-div {
        text-align: center;
        margin-top: 1.44rem;
        margin-bottom: 1.44rem; }
      .section4 .wrapper .s4-more-video {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: relative; }
        .section4 .wrapper .s4-more-video p {
          display: inline-block;
          padding-bottom: 0;
          margin-top: -0.06rem; }
        .section4 .wrapper .s4-more-video .s4-moreIcon {
          display: inline-block;
          height: 0.48rem;
          width: 0.48rem;
          margin-left: 0.2rem; }
          .section4 .wrapper .s4-more-video .s4-moreIcon img {
            display: block;
            height: 0.48rem; }
  .section5 .wrapper {
    margin: 0 auto;
    position: relative;
    width: 9.6rem; }
    .section5 .wrapper .s5-bg-div {
      overflow: hidden;
      position: relative; }
      .section5 .wrapper .s5-bg-div .s5-content {
        margin-top: 2.4rem;
        width: 9.6rem; }
      .section5 .wrapper .s5-bg-div .h5-s5-bg {
        margin-top: 1.73rem;
        margin-bottom: 0.87rem;
        width: 9.6rem;
        height: 7.2rem;
        position: relative; }
        .section5 .wrapper .s5-bg-div .h5-s5-bg .s5-bg,
        .section5 .wrapper .s5-bg-div .h5-s5-bg .s5-lines {
          position: absolute;
          width: 9.6rem;
          height: 7.2rem;
          left: 0;
          top: 0;
          display: block; }
          .section5 .wrapper .s5-bg-div .h5-s5-bg .s5-bg img,
          .section5 .wrapper .s5-bg-div .h5-s5-bg .s5-lines img {
            width: 9.6rem;
            height: 7.2rem; }
    .section5 .wrapper .s5-features {
      width: 100%;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 1.2rem; }
      .section5 .wrapper .s5-features .features-desc {
        font-weight: 700; }
      .section5 .wrapper .s5-features .features-icon {
        width: 0.93rem;
        height: 0.93rem; }
      .section5 .wrapper .s5-features .features-item {
        width: 0.93rem;
        height: 0.93rem; }
        .section5 .wrapper .s5-features .features-item img {
          width: 0.93rem;
          height: 0.93rem; }
      .section5 .wrapper .s5-features .features-item:nth-child(2) {
        margin-left: 3.2rem; }
  .section6 {
    background: #000;
    color: #fff; }
    .section6 .wrapper {
      overflow: hidden;
      position: relative;
      width: 9.6rem;
      margin: 0 auto; }
      .section6 .wrapper .s6-content {
        margin-top: 2.4rem;
        position: relative;
        z-index: 2; }
      .section6 .wrapper .s6-cpu-div {
        margin-top: 0.5rem;
        margin-bottom: 0.8rem;
        width: 10.8rem;
        height: 6.74rem; }
        .section6 .wrapper .s6-cpu-div .s6-cpu {
          width: 10.8rem;
          height: 6.74rem;
          display: block; }
          .section6 .wrapper .s6-cpu-div .s6-cpu img {
            width: 10.8rem;
            height: 6.74rem; }
      .section6 .wrapper .s6-params-div {
        width: 100%;
        text-align: center; }
        .section6 .wrapper .s6-params-div .s6-params-content {
          text-align: left;
          overflow: hidden;
          display: inline-block;
          margin: 0 auto; }
          .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item {
            text-align: left; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-cpu-icon {
              display: block;
              margin-top: 0.48rem;
              width: 1.35rem;
              height: 1.35rem; }
              .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-cpu-icon img {
                height: 1.35rem; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-params-title {
              font-weight: 500;
              font-size: 0.54rem;
              color: #ffffff;
              line-height: 0.75rem; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-params {
              margin-top: 0.4rem;
              width: 100%;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                      justify-content: space-between; }
              .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-params .comm-params {
                font-weight: 300; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-params-remark .comm-remarks {
              font-weight: 300;
              line-height: 0.46rem; }
          .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item:nth-child(1) {
            text-align: left;
            margin-left: 0; }
  .section7 {
    background: #000;
    color: #fff; }
    .section7 .wrapper {
      overflow: hidden; }
      .section7 .wrapper .s7-content {
        width: 9.6rem;
        margin: 0 auto;
        margin-top: 2.4rem; }
      .section7 .wrapper .s7-params-div {
        margin-top: 1.7rem;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; }
      .section7 .wrapper .s7-phone-div {
        margin-top: 1.86rem;
        position: relative;
        height: 8.6rem;
        background: #000; }
        .section7 .wrapper .s7-phone-div .s7-phone {
          position: absolute;
          width: 4.47rem;
          height: 8.6rem;
          z-index: 2;
          right: 0;
          top: 0; }
          .section7 .wrapper .s7-phone-div .s7-phone img {
            width: 4.47rem;
            height: 8.6rem; }
        .section7 .wrapper .s7-phone-div .s7-phone-slot {
          position: absolute;
          z-index: 1;
          width: 4.74rem;
          height: 2.07rem;
          top: 2.1rem;
          left: 6.35rem; }
          .section7 .wrapper .s7-phone-div .s7-phone-slot img {
            width: 4.74rem;
            height: 2.07rem; }
  .section8 {
    background: #000;
    color: #fff; }
    .section8 .wrapper {
      overflow: hidden; }
      .section8 .wrapper .s8-content {
        width: 9.6rem;
        margin: 2.4rem auto 1.68rem; }
        .section8 .wrapper .s8-content .s8-features {
          overflow: hidden;
          margin-top: 1.7rem;
          width: 9.6rem;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; }
          .section8 .wrapper .s8-content .s8-features .features-item {
            margin: 0; }
            .section8 .wrapper .s8-content .s8-features .features-item .features-desc {
              color: #fff; }
          .section8 .wrapper .s8-content .s8-features .features-item:nth-child(2) {
            margin-left: 0.6rem; }
      .section8 .wrapper .s8-chargePic {
        width: 9.6rem;
        height: 7.2rem;
        margin: 0 auto 0.9rem; }
        .section8 .wrapper .s8-chargePic .s8-charge {
          display: block;
          position: relative;
          width: 9.6rem;
          height: 7.2rem;
          z-index: 2; }
          .section8 .wrapper .s8-chargePic .s8-charge img {
            width: 9.6rem;
            height: 7.2rem; }
      .section8 .wrapper .s8-features {
        text-align: center;
        margin-bottom: 1.5rem; }
        .section8 .wrapper .s8-features .features-desc {
          color: #fff; }
  .section9 {
    overflow: hidden;
    margin-top: 2.4rem; }
    .section9 .wrapper {
      overflow: hidden; }
      .section9 .wrapper .s9-content {
        width: 9.6rem;
        margin: 0 auto; }
      .section9 .wrapper .s9-radio-div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
        height: 0.44rem;
        margin-top: 1.8rem; }
        .section9 .wrapper .s9-radio-div .purpleRadio {
          background-image: url(../png/radio_purple-5f82b2942a82c4270a8ad136ca24d9e7.png); }
        .section9 .wrapper .s9-radio-div input[type="radio"]:checked + .purpleRadio {
          background-image: url(../png/radio_purple_check-24b093f764e686a0d493caef3ee8d0ee.png); }
        .section9 .wrapper .s9-radio-div .greenRadio {
          margin-left: 0.5rem;
          background-image: url(../png/radio_green-0686bdf14fde0224fa330fa09950f2d6.png); }
        .section9 .wrapper .s9-radio-div input[type="radio"]:checked + .greenRadio {
          background-image: url(../png/radio_green_check-54eb1a8806b8a388878582867dec9c2f.png); }
        .section9 .wrapper .s9-radio-div .lightRadio {
          margin-left: 0.5rem;
          background-image: url(../png/radio_light-529085a10824121156cad2b73e3924d5.png); }
        .section9 .wrapper .s9-radio-div input[type="radio"]:checked + .lightRadio {
          background-image: url(../png/radio_light_check-3c30ed1cb1f82a30d38e3981357db8b2.png); }
      .section9 .wrapper .s9-phone-div {
        margin: 0.66rem auto 0;
        width: 9.6rem;
        height: 4.47rem;
        overflow: hidden;
        position: relative; }
        .section9 .wrapper .s9-phone-div picture {
          position: absolute;
          display: block;
          width: 9.6rem;
          height: 4.47rem; }
          .section9 .wrapper .s9-phone-div picture img {
            max-width: 9.6rem;
            width: 9.6rem;
            height: 4.47rem; }
        .section9 .wrapper .s9-phone-div .s9-phone-purple {
          z-index: 3; }
        .section9 .wrapper .s9-phone-div .s9-phone-green {
          z-index: 2; }
        .section9 .wrapper .s9-phone-div .s9-phone-light {
          z-index: 1; }
      .section9 .wrapper .s9-features {
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: 3rem; }
        .section9 .wrapper .s9-features .features-item {
          margin: 0;
          width: 3rem; }
        .section9 .wrapper .s9-features .features-item:nth-child(2),
        .section9 .wrapper .s9-features .features-item:nth-child(3) {
          margin-top: 0.72rem; }
      .section9 .wrapper .s9-screen-div {
        margin: 3.2rem auto 1.5rem;
        width: 9.6rem; }
        .section9 .wrapper .s9-screen-div .s9-screen-pic {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          height: 14.7rem;
          position: relative;
          margin-top: 1.75rem; }
          .section9 .wrapper .s9-screen-div .s9-screen-pic .s9-screen-bg,
          .section9 .wrapper .s9-screen-div .s9-screen-pic .s9-screen {
            display: block;
            position: absolute;
            right: 0;
            width: 5.4rem;
            height: 14.7rem; }
            .section9 .wrapper .s9-screen-div .s9-screen-pic .s9-screen-bg img,
            .section9 .wrapper .s9-screen-div .s9-screen-pic .s9-screen img {
              width: 5.4rem;
              height: 14.7rem; }
  .section10 {
    background: #fafafc; }
    .section10 .wrapper {
      overflow: hidden; }
      .section10 .wrapper .s10-content {
        width: 9rem;
        margin: 2.43rem auto 0; }
        .section10 .wrapper .s10-content .s10-features {
          overflow: hidden;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          margin-top: 1.66rem; }
          .section10 .wrapper .s10-content .s10-features .features-item {
            margin: 0; }
      .section10 .wrapper .s10-colorOS-div {
        margin-top: 1.68rem;
        width: 100%;
        text-align: center; }
        .section10 .wrapper .s10-colorOS-div .s10-colorOS-pic {
          display: block;
          width: 10.8rem;
          height: 10.8rem; }
          .section10 .wrapper .s10-colorOS-div .s10-colorOS-pic img {
            width: 10.8rem;
            height: 10.8rem; }
      .section10 .wrapper .s10-more-div {
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
        text-align: center; }
      .section10 .wrapper .s10-more-colorOS {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: relative; }
        .section10 .wrapper .s10-more-colorOS p {
          display: inline-block;
          padding-bottom: 0;
          margin-top: -0.06rem; }
        .section10 .wrapper .s10-more-colorOS .s10-moreIcon {
          display: inline-block;
          height: 0.48rem;
          width: 0.48rem;
          margin-left: 0.2rem; }
          .section10 .wrapper .s10-more-colorOS .s10-moreIcon img {
            display: block;
            height: 0.48rem; }
  .section11 .wrapper .s11-content {
    margin: 2.4rem auto 2.4rem;
    width: 9.6rem; }
    .section11 .wrapper .s11-content .s11-params-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-top: 1.7rem; }
      .section11 .wrapper .s11-content .s11-params-content .s11-params-item {
        width: 50%;
        text-align: center; }
      .section11 .wrapper .s11-content .s11-params-content .s11-params-item:nth-last-child(1) {
        margin-top: 0.72rem; }
  .section12 {
    margin-top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0;
    overflow: hidden;
    z-index: 99; }
    .section12 .wrapper {
      position: relative;
      width: 100%;
      height: 88.6rem; }
      .section12 .wrapper .s12-closeIcon {
        position: absolute;
        width: 0.96rem;
        height: 0.96rem;
        right: 0.48rem;
        top: 0.48rem;
        z-index: 100;
        display: inline-block;
        cursor: pointer; }
        .section12 .wrapper .s12-closeIcon img {
          height: 0.96rem; }
      .section12 .wrapper .s12-section1 {
        width: 100%;
        height: 29rem;
        background: #fff;
        overflow: hidden; }
        .section12 .wrapper .s12-section1 .s12-content1 {
          width: 9rem;
          margin: 2.4rem auto 0.9rem; }
          .section12 .wrapper .s12-section1 .s12-content1 .s12-features {
            overflow: hidden;
            margin-top: 1.2rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center; }
            .section12 .wrapper .s12-section1 .s12-content1 .s12-features .features-item {
              margin: 0; }
        .section12 .wrapper .s12-section1 .s12-img {
          margin-top: 1.72rem;
          text-align: center; }
          .section12 .wrapper .s12-section1 .s12-img .s12-img-pic {
            width: 10.8rem;
            height: 8.1rem;
            display: inline-block; }
            .section12 .wrapper .s12-section1 .s12-img .s12-img-pic img {
              height: 8.1rem; }
      .section12 .wrapper .s12-section2 {
        background: #fff;
        width: 100%;
        height: 37.7rem;
        overflow: hidden;
        margin-top: -2px; }
        .section12 .wrapper .s12-section2 .s12-content2 {
          margin: 2.4rem auto 0;
          width: 9.6rem; }
        .section12 .wrapper .s12-section2 .s12-img2 {
          margin: 1.5rem auto 2.4rem;
          width: 10.8rem;
          height: 12.46rem; }
          .section12 .wrapper .s12-section2 .s12-img2 .s12-img-pic2 {
            width: 10.8rem;
            height: 12.46rem;
            display: inline-block;
            margin-top: 0.9rem; }
            .section12 .wrapper .s12-section2 .s12-img2 .s12-img-pic2 img {
              height: 12.46rem; }
      .section12 .wrapper .s12-section3 {
        width: 100%;
        height: 22.9rem;
        background: #fff;
        margin-top: #fff;
        overflow: hidden; }
        .section12 .wrapper .s12-section3 .s12-content3 {
          width: 9.6rem;
          margin: 3.8rem auto 0; }
        .section12 .wrapper .s12-section3 .s12-video-content {
          position: relative;
          text-align: center;
          width: 9.6rem;
          height: 4.8rem;
          margin: 1.5rem auto; }
          .section12 .wrapper .s12-section3 .s12-video-content .s12-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 9.6rem;
            height: 4.8rem; } }

@media screen and (min-width: 1081px) {
  .pc-show {
    display: block; }
  .h5-show {
    display: none; }
  #oc-wrapper {
    overflow: visible; }
  .gradient-text {
    background-image: -webkit-linear-gradient(0deg, #45a9ed 0%, #8163ff 100%);
    line-height: 1;
    padding-bottom: 0.2rem;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .gradient-text2 {
    background-image: -webkit-linear-gradient(0deg, #59b8f9 0%, #957cff 100%);
    line-height: 1;
    padding-bottom: 0.2rem;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .title-lg {
    font-size: 0.54rem;
    line-height: 0.72rem;
    font-weight: 700; }
  .title-md {
    font-size: 0.33rem;
    font-weight: 500;
    line-height: 0.5rem; }
  .comm-desc {
    font-weight: 400;
    font-size: 0.23rem;
    line-height: 0.42rem;
    color: #666; }
  .comm-params {
    font-size: 0.15rem;
    line-height: 0.3rem;
    color: #fff;
    font-weight: 500; }
  .comm-remarks {
    font-size: 0.15rem;
    line-height: 0.34rem;
    color: #999;
    font-weight: 400; }
  .features-div {
    text-align: center; }
  .features-content {
    overflow: hidden;
    display: inline-block;
    text-align: center;
    margin: 0.44rem auto; }
  .features-item {
    position: relative;
    float: left;
    text-align: center;
    margin: 0 0.22rem; }
  .features-icon {
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 auto; }
    .features-icon img {
      height: 0.7rem; }
  .features-desc {
    display: inline-block;
    font-weight: 500;
    font-size: 0.15rem;
    line-height: 0.34rem;
    color: #4e4e4e;
    text-align: center; }
  .inline-remark-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .inline-remark-title span:nth-child(2) {
    margin: 0.1rem 0.2rem 0 0; }
  .txt-center {
    text-align: center; }
  .mt-10 {
    margin-top: 0.1rem; }
  .mt-16 {
    margin-top: 0.16rem; }
  .mt-36 {
    margin-top: 0.36rem; }
  .mt-44 {
    margin-top: 0.44rem; }
  .mt-50 {
    margin-top: 0.5rem; }
  .mt100 {
    margin-top: 1rem; }
  .mt-130 {
    margin-top: 1.3rem; }
  .lineHeight1 {
    line-height: 1; }
  .pc-width-auto {
    display: inline-block;
    width: auto; }
  .pc-width300 {
    width: 3rem; }
  .pc-width200 {
    width: 2rem; }
  .radio-style {
    height: 0.82rem;
    width: 0.82rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    vertical-align: middle; }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    10%,
    20% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale(1) rotate(3deg);
              transform: scale(1) rotate(3deg); }
    40%,
    60%,
    80% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    100% {
      -webkit-transform: scale(1) rotate(0);
              transform: scale(1) rotate(0); } }
  @keyframes shake {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    10%,
    20% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale(1) rotate(3deg);
              transform: scale(1) rotate(3deg); }
    40%,
    60%,
    80% {
      -webkit-transform: scale(1) rotate(-3deg);
              transform: scale(1) rotate(-3deg); }
    100% {
      -webkit-transform: scale(1) rotate(0);
              transform: scale(1) rotate(0); } }
  .shakeAni {
    -webkit-animation: shake 200ms 3;
            animation: shake 200ms 3; }
  .section1 {
    overflow: hidden; }
    .section1 .wrapper {
      width: 100%; }
      .section1 .wrapper .h5-s1-remarks {
        margin-top: 0.2rem; }
      .section1 .wrapper .s1-top-bg {
        display: block;
        width: 17.85rem;
        height: 8.28rem;
        margin: 0 auto; }
        .section1 .wrapper .s1-top-bg img {
          width: 17.85rem;
          height: 8.28rem; }
      .section1 .wrapper .s1-title-p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: auto;
        font-weight: 700;
        margin: 2rem auto 0.28rem;
        line-height: 0.72rem;
        font-size: 0.72rem; }
        .section1 .wrapper .s1-title-p .s1-name {
          display: inline-block;
          line-height: 0.72rem; }
        .section1 .wrapper .s1-title-p .s1-year {
          display: inline-block;
          line-height: 0.2rem;
          font-size: 0.2rem;
          font-weight: 500;
          margin-top: 0.2rem; }
      .section1 .wrapper .features-content {
        margin-bottom: 1.8rem; }
  .section2 {
    background-image: -webkit-linear-gradient(271deg, #d9eaff 0%, #fff 100%);
    background-image: linear-gradient(179deg, #d9eaff 0%, #fff 100%);
    overflow: hidden; }
    .section2 .wrapper {
      overflow: hidden; }
      .section2 .wrapper .s2-content1 {
        margin-top: 2rem;
        margin-left: 6.4rem;
        width: 9.2rem; }
        .section2 .wrapper .s2-content1 .s2-features {
          overflow: hidden;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          margin-top: 0.52rem; }
          .section2 .wrapper .s2-content1 .s2-features .features-item {
            margin: 0; }
      .section2 .wrapper .s2-phone-content {
        position: relative;
        margin: 1rem auto 3.6rem;
        width: 14.14rem;
        height: 7.06rem; }
        .section2 .wrapper .s2-phone-content picture {
          display: block; }
        .section2 .wrapper .s2-phone-content .s2-phone-back {
          width: 14.14rem;
          height: 7.06rem; }
          .section2 .wrapper .s2-phone-content .s2-phone-back img {
            width: 14.14rem;
            height: 7.06rem; }
        .section2 .wrapper .s2-phone-content .s2-phone-lines {
          position: absolute;
          top: -1rem;
          right: -1.16rem;
          width: 2.16rem;
          height: 1.46rem; }
          .section2 .wrapper .s2-phone-content .s2-phone-lines img {
            height: 1.46rem; }
  .section2_1 {
    width: 100%; }
    .section2_1 .wrapper {
      width: 100%;
      position: relative; }
      .section2_1 .wrapper .s2-aniDiv {
        width: 100%;
        height: 100%; }
      .section2_1 .wrapper .s2-content2 {
        width: 7.5rem;
        margin-left: 6.4rem; }
        .section2_1 .wrapper .s2-content2 .s2-features2 {
          overflow: hidden;
          margin-top: 0.44rem; }
          .section2_1 .wrapper .s2-content2 .s2-features2 .features-item {
            margin: 0; }
          .section2_1 .wrapper .s2-content2 .s2-features2 .features-item:nth-child(2) {
            margin-left: 2rem; }
      .section2_1 .wrapper .s2-pic-div {
        width: 100%;
        margin-top: 1rem; }
        .section2_1 .wrapper .s2-pic-div .s2-pic-lg {
          width: 25.6rem;
          height: 12.8rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg img {
            width: 25.6rem;
            height: 12.8rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-p {
            display: inline-block;
            background: rgba(51, 51, 51, 0.32);
            border-radius: 0.1rem;
            color: #fff;
            font-weight: 500;
            position: absolute;
            line-height: 1;
            bottom: 0.5rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-content {
            display: inline-block;
            width: auto;
            margin: 0.25rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-num {
            font-size: 0.3rem; }
          .section2_1 .wrapper .s2-pic-div .s2-pic-lg .s2-params-txt {
            font-size: 0.16rem; }
        .section2_1 .wrapper .s2-pic-div .s2-leftBlock,
        .section2_1 .wrapper .s2-pic-div .s2-rightBlock {
          position: absolute;
          width: 7.4rem;
          height: 12.8rem;
          background: #fff;
          z-index: 2; }
        .section2_1 .wrapper .s2-pic-div .s2-leftBlock {
          left: 0; }
        .section2_1 .wrapper .s2-pic-div .s2-rightBlock {
          right: 0; }
        .section2_1 .wrapper .s2-pic-div .s2-radius-before {
          position: absolute;
          left: 0;
          right: 0;
          top: -8px;
          z-index: 1;
          height: 16px;
          width: 100%;
          border-radius: 0 0 200% 200%;
          background-color: white; }
        .section2_1 .wrapper .s2-pic-div .s2-radius-after {
          position: absolute;
          left: 0;
          right: 0;
          bottom: -8px;
          z-index: 1;
          height: 16px;
          width: 100%;
          border-radius: 200% 200% 0 0;
          background-color: white; }
  .section3 .wrapper {
    overflow: hidden; }
    .section3 .wrapper .s3-content1 {
      margin-top: 3.6rem;
      width: 10.4rem;
      margin-left: 6.4rem; }
      .section3 .wrapper .s3-content1 .s3-features {
        overflow: hidden;
        margin-top: 0.44rem; }
        .section3 .wrapper .s3-content1 .s3-features .features-item {
          margin: 0; }
        .section3 .wrapper .s3-content1 .s3-features .features-item:nth-child(2) {
          margin-left: 2.45rem; }
    .section3 .wrapper .s3-video-content {
      position: relative;
      display: inline-block;
      margin: 1rem 0 3.7rem 6rem;
      width: 14.94rem;
      height: 7.82rem; }
      .section3 .wrapper .s3-video-content picture {
        display: block; }
      .section3 .wrapper .s3-video-content .s3-video-bg {
        width: 14.94rem;
        height: 7.82rem;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0; }
        .section3 .wrapper .s3-video-content .s3-video-bg img {
          width: 14.94rem;
          height: 7.82rem; }
      .section3 .wrapper .s3-video-content .s3-video {
        position: absolute;
        height: 5.58rem;
        width: 12.32rem;
        top: 0.54rem;
        left: 0.85rem;
        z-index: 1; }
      .section3 .wrapper .s3-video-content .s3-video-stars {
        position: absolute;
        bottom: -1rem;
        left: -1.2rem;
        width: 1.72rem;
        height: 1.9rem; }
        .section3 .wrapper .s3-video-content .s3-video-stars img {
          height: 1.9rem; }
  .section4 .wrapper {
    position: relative; }
    .section4 .wrapper .s4-content-body {
      position: relative;
      width: 14.8rem;
      margin: 0 auto;
      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; }
      .section4 .wrapper .s4-content-body .s4-content {
        width: 6.7rem; }
      .section4 .wrapper .s4-content-body .s4-pic-content {
        width: 6.5rem;
        height: 9.4rem; }
        .section4 .wrapper .s4-content-body .s4-pic-content .s4-pic-item {
          display: block;
          width: 6.5rem;
          height: 9.4rem; }
          .section4 .wrapper .s4-content-body .s4-pic-content .s4-pic-item img {
            width: 6.5rem;
            height: 9.4rem; }
    .section4 .wrapper .s4-seeMore-div {
      text-align: center;
      margin-top: 2.4rem;
      margin-bottom: 2.4rem; }
    .section4 .wrapper .s4-more-video {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .section4 .wrapper .s4-more-video .comm-desc {
        font-size: 0.28rem; }
      .section4 .wrapper .s4-more-video p {
        display: inline-block;
        padding-bottom: 0;
        margin-top: -0.06rem; }
      .section4 .wrapper .s4-more-video .s4-moreIcon {
        display: inline-block;
        height: 0.3rem;
        width: 0.3rem;
        margin-left: 0.2rem; }
        .section4 .wrapper .s4-more-video .s4-moreIcon img {
          display: block;
          height: 0.3rem; }
  .section5 {
    color: #fff; }
    .section5 .wrapper {
      margin: 0 auto;
      position: relative; }
      .section5 .wrapper .s5-bg-div {
        overflow: hidden;
        width: 24rem;
        height: 17rem;
        margin: 0 auto;
        position: relative; }
        .section5 .wrapper .s5-bg-div .s5-content {
          position: absolute;
          top: 1.8rem;
          left: 6.4rem;
          width: 7.8rem;
          z-index: 2; }
          .section5 .wrapper .s5-bg-div .s5-content .comm-desc {
            color: #fff; }
        .section5 .wrapper .s5-bg-div .s5-bg,
        .section5 .wrapper .s5-bg-div .s5-lines {
          position: absolute;
          width: 24rem;
          height: 17rem;
          left: 0;
          top: 0;
          display: block; }
          .section5 .wrapper .s5-bg-div .s5-bg img,
          .section5 .wrapper .s5-bg-div .s5-lines img {
            height: 17rem; }
      .section5 .wrapper .s5-features {
        width: 100%;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 1.85rem; }
        .section5 .wrapper .s5-features .features-icon {
          width: 0.92rem;
          height: 0.92rem; }
          .section5 .wrapper .s5-features .features-icon img {
            width: 0.92rem;
            height: 0.92rem; }
        .section5 .wrapper .s5-features .features-desc {
          font-weight: 700; }
        .section5 .wrapper .s5-features .features-item:nth-child(2) {
          margin-left: 5.5rem; }
  .section6 {
    background: #000;
    color: #fff; }
    .section6 .wrapper {
      overflow: hidden;
      position: relative; }
      .section6 .wrapper .s6-content {
        margin: 1.8rem 6.4rem 0;
        width: 8.55rem;
        position: relative;
        z-index: 2; }
        .section6 .wrapper .s6-content .comm-desc {
          color: #fff; }
        .section6 .wrapper .s6-content .comm-remarks {
          color: #999; }
      .section6 .wrapper .s6-cpu-div {
        width: 14.6rem;
        height: 12.6rem;
        position: absolute;
        top: 2.4rem;
        left: 4.5rem; }
        .section6 .wrapper .s6-cpu-div .s6-cpu {
          width: 14.6rem;
          height: 12.6rem;
          display: block; }
          .section6 .wrapper .s6-cpu-div .s6-cpu img {
            width: 14.6rem;
            height: 12.6rem; }
      .section6 .wrapper .s6-params-div {
        width: 100%;
        margin-top: 7rem;
        margin-bottom: 3.6rem;
        text-align: center;
        position: relative;
        z-index: 2; }
        .section6 .wrapper .s6-params-div .s6-params-content {
          text-align: left;
          overflow: hidden;
          display: inline-block;
          margin: 0 auto; }
          .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item {
            margin-left: 1.3rem;
            width: 4.35rem;
            float: left; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-cpu-icon {
              width: 1.36rem;
              height: 1.36rem;
              display: block;
              margin: 0.4rem auto 0; }
              .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-cpu-icon img {
                height: 1.36rem; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-params-title {
              font-weight: 700;
              font-size: 0.2rem;
              color: #ffffff;
              line-height: 0.39rem; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-params {
              margin-top: 0.4rem;
              width: 100%;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                      justify-content: space-between; }
            .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item .s6-params-remark .comm-remarks {
              font-weight: 300;
              line-height: 0.34rem; }
          .section6 .wrapper .s6-params-div .s6-params-content .s6-params-item:nth-child(1) {
            text-align: center;
            margin-left: 0; }
  .section7 {
    background: #000;
    color: #fff; }
    .section7 .wrapper {
      overflow: hidden; }
      .section7 .wrapper .s7-content {
        width: 7.5rem;
        margin: 0 6.4rem; }
        .section7 .wrapper .s7-content .comm-desc {
          color: #fff; }
      .section7 .wrapper .s7-params-div {
        margin-top: 0.4rem;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; }
        .section7 .wrapper .s7-params-div .comm-params {
          display: block; }
      .section7 .wrapper .s7-phone-div {
        position: relative;
        margin-left: 6.4rem;
        margin-top: 1rem;
        width: 12.8rem;
        height: 7.15rem;
        background: #000;
        margin-bottom: 3.6rem; }
        .section7 .wrapper .s7-phone-div .s7-phone {
          position: absolute;
          width: 7.86rem;
          height: 7.15rem;
          z-index: 2;
          right: 0;
          top: 0; }
          .section7 .wrapper .s7-phone-div .s7-phone img {
            height: 7.86rem;
            width: 7.15rem; }
        .section7 .wrapper .s7-phone-div .s7-phone-slot {
          position: absolute;
          z-index: 1;
          width: 4.86rem;
          height: 2.12rem;
          top: 2.94rem;
          left: 5.1rem; }
          .section7 .wrapper .s7-phone-div .s7-phone-slot img {
            width: 4.86rem;
            height: 2.12rem; }
  .section8 {
    background: #000;
    color: #fff; }
    .section8 .wrapper .s8-content {
      width: 7.6rem;
      margin: 0 6.4rem; }
      .section8 .wrapper .s8-content .comm-desc {
        color: #fff; }
      .section8 .wrapper .s8-content .s8-features {
        overflow: hidden;
        margin-top: 0.44rem; }
        .section8 .wrapper .s8-content .s8-features .features-desc {
          color: #fff; }
        .section8 .wrapper .s8-content .s8-features .features-item {
          margin: 0; }
        .section8 .wrapper .s8-content .s8-features .features-item:nth-child(2) {
          margin-left: 1.9rem; }
    .section8 .wrapper .s8-chargePic {
      margin-top: 1rem;
      width: 25.6rem;
      height: 16rem; }
      .section8 .wrapper .s8-chargePic .s8-charge {
        display: block;
        width: 25.6rem;
        height: 16rem;
        position: relative;
        z-index: 2; }
        .section8 .wrapper .s8-chargePic .s8-charge img {
          width: 25.6rem;
          height: 16rem; }
  .section9 {
    overflow: hidden;
    margin-top: -1rem;
    padding-top: 1rem; }
    .section9 .wrapper .s9-content {
      width: 12.8rem;
      margin: 3.6rem 6.4rem 0; }
    .section9 .wrapper .s9-features {
      overflow: hidden;
      margin-top: 0.44rem; }
      .section9 .wrapper .s9-features .features-item {
        margin: 0; }
      .section9 .wrapper .s9-features .features-item:nth-child(2) {
        margin-left: 2.45rem; }
    .section9 .wrapper .s9-radio-div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-top: 0.5rem; }
      .section9 .wrapper .s9-radio-div label {
        width: 0.45rem;
        height: 0.45rem;
        margin-right: 0.35rem; }
      .section9 .wrapper .s9-radio-div .purpleRadio {
        background-image: url(../png/radio_purple-5f82b2942a82c4270a8ad136ca24d9e7-2.png); }
      .section9 .wrapper .s9-radio-div input[type="radio"]:checked + .purpleRadio {
        background-image: url(../png/radio_purple_check-24b093f764e686a0d493caef3ee8d0ee-2.png); }
      .section9 .wrapper .s9-radio-div .greenRadio {
        background-image: url(../png/radio_green-0686bdf14fde0224fa330fa09950f2d6-2.png); }
      .section9 .wrapper .s9-radio-div input[type="radio"]:checked + .greenRadio {
        background-image: url(../png/radio_green_check-54eb1a8806b8a388878582867dec9c2f-2.png); }
      .section9 .wrapper .s9-radio-div .lightRadio {
        background-image: url(../png/radio_light-529085a10824121156cad2b73e3924d5-2.png); }
      .section9 .wrapper .s9-radio-div input[type="radio"]:checked + .lightRadio {
        background-image: url(../png/radio_light_check-3c30ed1cb1f82a30d38e3981357db8b2-2.png); }
    .section9 .wrapper .s9-phone-div {
      margin: 1rem auto;
      width: 14.14rem;
      height: 7.06rem;
      overflow: hidden;
      position: relative; }
      .section9 .wrapper .s9-phone-div picture {
        position: absolute;
        display: block;
        width: 14.14rem;
        height: 7.06rem; }
        .section9 .wrapper .s9-phone-div picture img {
          width: 14.14rem;
          height: 7.06rem;
          max-width: 14.14rem; }
      .section9 .wrapper .s9-phone-div .s9-phone-purple {
        z-index: 3; }
      .section9 .wrapper .s9-phone-div .s9-phone-green {
        z-index: 2; }
      .section9 .wrapper .s9-phone-div .s9-phone-light {
        z-index: 1; }
    .section9 .wrapper .s9-screen-div {
      margin: 3.6rem 6.4rem 2.4rem;
      width: 12.8rem;
      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; }
      .section9 .wrapper .s9-screen-div .s9-content2 {
        width: 7.1rem; }
        .section9 .wrapper .s9-screen-div .s9-content2 .s9-features {
          overflow: hidden;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          margin-top: 0.52rem; }
          .section9 .wrapper .s9-screen-div .s9-content2 .s9-features .features-item {
            margin: 0; }
      .section9 .wrapper .s9-screen-div .s9-screen-pic {
        width: 3.9rem;
        height: 10.68rem;
        position: relative; }
        .section9 .wrapper .s9-screen-div .s9-screen-pic picture {
          display: block;
          position: absolute;
          width: 3.9rem;
          height: 10.68rem; }
          .section9 .wrapper .s9-screen-div .s9-screen-pic picture img {
            width: 3.9rem;
            height: 10.68rem; }
  .section10 {
    background: #f8f8fa; }
    .section10 .wrapper {
      overflow: hidden; }
      .section10 .wrapper .s10-content {
        width: 9.55rem;
        margin: 1.95rem 6.4rem 1rem; }
        .section10 .wrapper .s10-content .s10-features {
          overflow: hidden;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          margin-top: 0.52rem; }
          .section10 .wrapper .s10-content .s10-features .features-item {
            margin: 0; }
      .section10 .wrapper .s10-colorOS-div {
        margin-top: 1rem;
        width: 100%;
        text-align: center; }
        .section10 .wrapper .s10-colorOS-div .s10-colorOS-pic {
          display: inline-block;
          width: 9.48rem;
          height: 6.5rem; }
          .section10 .wrapper .s10-colorOS-div .s10-colorOS-pic img {
            width: 9.48rem;
            height: 6.5rem; }
      .section10 .wrapper .s10-more-div {
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem; }
      .section10 .wrapper .s10-more-colorOS {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
        .section10 .wrapper .s10-more-colorOS p {
          display: inline-block;
          padding-bottom: 0;
          margin-top: -0.06rem; }
        .section10 .wrapper .s10-more-colorOS .s10-moreIcon {
          display: inline-block;
          height: 0.3rem;
          width: 0.3rem;
          margin-left: 0.2rem; }
          .section10 .wrapper .s10-more-colorOS .s10-moreIcon img {
            display: block;
            height: 0.3rem; }
  .section11 .wrapper .s11-content {
    margin: 1.95rem 6.4rem;
    width: 12.8rem; }
    .section11 .wrapper .s11-content .s11-params-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-top: 0.5rem; }
      .section11 .wrapper .s11-content .s11-params-content .s11-params-item {
        text-align: center; }
  .section12 {
    margin-top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0;
    overflow: hidden;
    z-index: 99; }
    .section12 .wrapper {
      position: relative;
      width: 100%;
      height: 48.5rem; }
      .section12 .wrapper .s12-closeIcon {
        position: fixed;
        z-index: 100;
        width: 0.7rem;
        height: 0.7rem;
        right: 0.4rem;
        top: 0.4rem;
        display: inline-block;
        cursor: pointer; }
        .section12 .wrapper .s12-closeIcon img {
          height: 0.7rem; }
      .section12 .wrapper .s12-section1 {
        width: 100%;
        height: 18rem;
        background: #fff;
        text-align: center; }
        .section12 .wrapper .s12-section1 .s12-content1 {
          margin-top: 1.8rem;
          width: 10.42rem;
          display: inline-block; }
          .section12 .wrapper .s12-section1 .s12-content1 .s12-features {
            overflow: hidden;
            margin-top: 0.44rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center; }
            .section12 .wrapper .s12-section1 .s12-content1 .s12-features .features-item {
              margin: 0; }
        .section12 .wrapper .s12-section1 .s12-img {
          margin-top: 1rem;
          text-align: center; }
          .section12 .wrapper .s12-section1 .s12-img .s12-img-pic {
            width: 12.8rem;
            height: 9.6rem;
            display: inline-block; }
            .section12 .wrapper .s12-section1 .s12-img .s12-img-pic img {
              height: 9.6rem; }
      .section12 .wrapper .s12-section2 {
        background: #fff;
        width: 100%;
        height: 15rem;
        text-align: center;
        margin-top: -2px; }
        .section12 .wrapper .s12-section2 .s12-content2 {
          margin-top: 1.8rem;
          width: 10.42rem;
          display: inline-block; }
        .section12 .wrapper .s12-section2 .s12-img2 {
          margin: 1rem auto 0;
          width: 12.8rem;
          height: 8.14rem;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between; }
          .section12 .wrapper .s12-section2 .s12-img2 .s12-img-pic2 {
            width: 6.1rem;
            height: 8.14rem;
            display: inline-block; }
            .section12 .wrapper .s12-section2 .s12-img2 .s12-img-pic2 img {
              height: 8.14rem; }
      .section12 .wrapper .s12-section3 {
        width: 100%;
        height: 15.5rem;
        background: #fff;
        margin-top: -2px;
        text-align: center; }
        .section12 .wrapper .s12-section3 .s12-content3 {
          margin-top: 1.8rem;
          width: 12rem;
          display: inline-block; }
        .section12 .wrapper .s12-section3 .s12-video-content {
          position: relative;
          margin: 1rem 0 1rem 6rem;
          width: 14.94rem;
          height: 7.82rem; }
          .section12 .wrapper .s12-section3 .s12-video-content picture {
            display: block; }
          .section12 .wrapper .s12-section3 .s12-video-content .s12-video-bg {
            width: 14.94rem;
            height: 7.82rem;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0; }
            .section12 .wrapper .s12-section3 .s12-video-content .s12-video-bg img {
              width: 14.94rem;
              height: 7.82rem; }
          .section12 .wrapper .s12-section3 .s12-video-content .s12-video {
            position: absolute;
            height: 5.58rem;
            width: 12.24rem;
            top: 0.54rem;
            left: 0.85rem;
            z-index: 1; } }