@charset "UTF-8";
@-webkit-keyframes fade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fade-reverse {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fade-reverse {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
    transform: translateY(15vw); }
  to {
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw); } }

@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
    transform: translateY(15vw); }
  to {
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw); } }

.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
  animation: fade 0.5s ease-in 0s 1 normal forwards; }

.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
  animation: fade-reverse 0.5s ease-out 0s 1 normal forwards; }

.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
  animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards; }

.g-banner .image-wrapper .photo > picture {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0; }

.g-banner .image-wrapper .photo:first-child > picture {
  opacity: 1; }

.g-banner .status {
  margin: auto;
  margin-top: 20px;
  text-align: center;
  font-size: 16px; }
  .g-banner .status .bar {
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    margin-right: 10px;
    display: inline-block;
    background-color: #fadcda;
    width: 24px;
    height: 4px;
    border-radius: 2px;
    overflow: hidden; }
    .g-banner .status .bar .inner-bar {
      width: 0px;
      height: 100%;
      background-color: #FF8947; }
      .g-banner .status .bar .inner-bar.progressing {
        width: 24px;
        -webkit-transition: width linear 3.5s;
        transition: width linear 3.5s; }

.g-link-button {
  position: relative;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 13px;
  color: #FF8B22;
  cursor: pointer;
  font-family: 'OPPOFont-Bold'; }

.g-banner {
  margin-top: 16px; }
  .g-banner .image-wrapper {
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    position: relative;
    height: 85.5vw;
    border-radius: 10px;
    overflow: hidden; }
    .g-banner .image-wrapper .photo {
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%; }
      .g-banner .image-wrapper .photo img {
        width: 100%;
        height: auto; }

@media screen and (min-width: 2560px) {
  .g-banner {
    width: 1346px;
    margin: auto; }
    .g-banner .image-wrapper {
      height: 565px; }
  .g-banner .status {
    margin-top: 50px; } }

@media screen and (min-width: 1280px) and (max-width: 2559px) {
  .g-banner {
    width: 960px;
    margin: auto; }
    .g-banner .image-wrapper {
      height: 340px; } }

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .g-banner {
    width: 485px;
    margin: auto; }
    .g-banner .image-wrapper {
      height: 320px; } }

@media screen and (min-width: 320px) and (max-width: 767px) {
  .g-banner {
    padding: 0 10vw; } }

br {
  color: transparent; }

.oh-nav {
  background-color: #fff; }

.um-wrapper {
  font-family: OPPOFont-Medium, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; }

.section-title {
  font-family: 'OPPOFont-Bold'; }

.fontBold {
  font-family: 'OPPOFont-Bold'; }

.fontMedium, .description {
  font-family: 'OPPOFont-Medium'; }

.section-item ul li {
  font-family: 'OPPOFont-Bold'; }

.section-item ul li:last-child {
  margin-bottom: 0px; }

@-webkit-keyframes masked-animation {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -100% 0; } }

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

@-webkit-keyframes height-animation {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(500%);
            transform: translateY(500%); } }

@-webkit-keyframes bgCor-animation {
  0% {
    width: 86vw; }
  100% {
    width: 100vw; } }

@-webkit-keyframes ramBg-animation {
  0% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw); }
  100% {
    -webkit-transform: translateX(-90vw);
            transform: translateX(-90vw); } }

@-webkit-keyframes ramBg1-animation {
  0% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw); }
  100% {
    -webkit-transform: translateX(90vw);
            transform: translateX(90vw); } }

@-webkit-keyframes circle-waving-left {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: rgba(121, 123, 228, 0.45); }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    border-color: rgba(102, 72, 209, 0); } }

@keyframes circle-waving-left {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: rgba(121, 123, 228, 0.45); }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    border-color: rgba(102, 72, 209, 0); } }

@-webkit-keyframes circle-waving-right {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: rgba(121, 123, 228, 0.45); }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    border-color: rgba(102, 72, 209, 0); } }

@keyframes circle-waving-right {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: rgba(121, 123, 228, 0.45); }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    border-color: rgba(102, 72, 209, 0); } }

@-webkit-keyframes top-front-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  49% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    opacity: 0; } }

@keyframes top-front-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  49% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    opacity: 0; } }

@-webkit-keyframes top-back-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  24% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    opacity: 0; } }

@keyframes top-back-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  24% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    opacity: 0; } }

@-webkit-keyframes bottom-front-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  49% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    opacity: 0; } }

@keyframes bottom-front-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  49% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    opacity: 0; } }

@-webkit-keyframes bottom-back-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  24% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    opacity: 0; } }

@keyframes bottom-back-half {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  24% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    opacity: 0; } }

@-webkit-keyframes mymove-pc {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(2360px);
            transform: translateX(2360px); } }

@-webkit-keyframes mymove-pc-back {
  0% {
    -webkit-transform: translateX(2360px);
            transform: translateX(2360px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

@keyframes mymove-pc {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(2360px);
            transform: translateX(2360px); } }

@keyframes mymove-pc-back {
  0% {
    -webkit-transform: translateX(2360px);
            transform: translateX(2360px); }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px); } }

.dispaly, .hide {
  display: none; }

.show, .block {
  display: block; }

.opC_0 {
  opacity: 0; }

.opC_1 {
  opacity: 1; }

.section-item .reno-options .options .option .name.opC_0 {
  opacity: 0; }

.section-item .reno-options .options .option .color-circle .inner-circle.opC_0 {
  opacity: 0; }

.section-item .reno-options .options .option .name.opC_1 {
  opacity: 1; }

.section-item .reno-options .options .option .color-circle .inner-circle.opC_1 {
  opacity: 1; }

.status .bar {
  background-color: #fadcda; }

.inner-bar {
  background-color: #FF8947; }

.bg_setB {
  position: absolute;
  top: 120%; }

.ol {
  position: absolute;
  right: 10px;
  bottom: 10px;
  line-height: 20px;
  text-align: center; }

.ol li {
  float: left;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-left: 10px;
  cursor: pointer; }

.ol li.current {
  background: yellow; }

.section-1 .kv-slogan {
  position: relative;
  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;
  width: 100%;
  height: 100%; }
  .section-1 .kv-slogan .slogan-right {
    color: #fff;
    font-family: 'OPPOFont-Bold'; }

.ico_svg {
  position: absolute; }

#product-remarks, #price {
  z-index: 2; }

@media screen and (min-width: 320px) and (max-width: 767px) {
  @-webkit-keyframes mymove-mobile {
    from {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      display: block; }
    to {
      -webkit-transform: translateX(270vw);
      transform: translateX(270vw);
      display: block; } }
  @keyframes mymove-mobile {
    from {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      display: block; }
    to {
      -webkit-transform: translateX(270vw);
      transform: translateX(270vw);
      display: block; } }
  @-webkit-keyframes mymove-mobile-back {
    from {
      -webkit-transform: translateX(270vw);
      transform: translateX(270vw);
      display: block; }
    to {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      display: block; } }
  @keyframes mymove-mobile-back {
    from {
      -webkit-transform: translateX(270vw);
      transform: translateX(270vw);
      display: block; }
    to {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      display: block; } }
  #op-product-nav .pn-content .pn-left svg {
    width: 46px;
    height: 12px; }
  .xs-none {
    display: none; }
  .contain {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  ._scroll-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative; }
  ._scroll-animate-box {
    position: relative;
    z-index: 1; }
  ._scroll-animate-box::before {
    content: '';
    display: block;
    width: 100%;
    height: 640vw; }
  ._animate-clip-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    width: 90vw;
    height: 640vw;
    overflow: hidden;
    margin-left: -45vw;
    -webkit-transition: width .3s linear, margin-left .3s linear;
    transition: width .3s linear, margin-left .3s linear;
    border-radius: 20px;
    will-change: width, margin-left; }
    ._animate-clip-wrap.play {
      width: 100vw;
      margin-left: -50vw;
      -webkit-transition: width .3s linear, margin-left .3s linear;
      transition: width .3s linear, margin-left .3s linear; }
      ._animate-clip-wrap.play ._animate-bg {
        position: fixed;
        top: 0; }
  ._animate-clip {
    height: 640vw;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0); }
  ._animate-clip.play {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none; }
  ._animate-bg {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    left: 50%;
    margin-left: -50vw;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear;
    will-change: background-color; }
    ._animate-bg.beginCol {
      background-color: #fafafa;
      /* Old browsers */ }
  .bgC_s4 {
    position: absolute;
    top: 50%; }
  .section-beauty {
    height: 100vh; }
  .section-beauty-tit {
    font-size: 30px;
    z-index: 9;
    position: absolute; }
    .section-beauty-tit .tit1 {
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit2 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit3 {
      opacity: 1;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit4 {
      opacity: 1;
      top: 110vh;
      position: absolute; }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6,
  .section-beauty-picture-7,
  .section-beauty-picture-8 {
    position: absolute;
    right: 10%;
    top: 50%;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important; }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6 {
    margin-top: -30px;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important; }
  .section-beauty-picture-7 {
    margin-top: -15px;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important; }
  .section-beauty-picture-8 {
    margin-top: 0; }
  #section-beauty-picture-1,
  #section-beauty-picture-2,
  #section-beauty-picture-3,
  #section-beauty-picture-4,
  #section-beauty-picture-5,
  #section-beauty-picture-6 {
    width: 224px;
    border-radius: 22px; }
  #section-beauty-picture-7 {
    width: 252px;
    border-radius: 22px; }
  #section-beauty-picture-8 {
    width: 280px;
    border-radius: 22px; }
  .section-4 .section-5-box .section-3-img .section-beauty-tit {
    position: relative;
    height: 100vh; }
  .section-item {
    padding: 0 33px; }
    .section-item .reno-options .options {
      margin-top: 13px; }
      .section-item .reno-options .options .data-purple {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
        background: #3023ae;
        /* Old browsers */
        /* FF3.6-15 */
        background: -webkit-linear-gradient(to left top, #3023ae 0%, #c86dd7 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: -webkit-linear-gradient(left top, #3023ae 0%, #c86dd7 100%);
        background: linear-gradient(to right bottom, #3023ae 0%, #c86dd7 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3023ae', endColorstr='#c86dd7', GradientType=0);
        /* IE6-9 */
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
        box-shadow: 0 4px 42px 0 rgba(172, 34, 238, 0.33); }
      .section-item .reno-options .options .data-black {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#343e45+0,343e45+100 */
        background: #425067;
        /* Old browsers */
        box-shadow: 0 4px 42px 0 rgba(47, 43, 61, 0.33); }
      .section-item .reno-options .options .option {
        display: inline-block;
        margin-right: 22px; }
        .section-item .reno-options .options .option .color-circle {
          margin-left: 4px;
          width: 30px;
          height: 30px;
          position: relative;
          border-radius: 50%; }
          .section-item .reno-options .options .option .color-circle .inner-circle {
            position: absolute;
            opacity: 0;
            top: 50%;
            left: 50%;
            width: 26px;
            height: 26px;
            margin-left: -13px;
            margin-top: -13px;
            border: 3px solid #fff;
            border-radius: 50%;
            padding: 2px;
            box-sizing: border-box;
            /* margin: auto; */
            -webkit-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease; }
        .section-item .reno-options .options .option .name {
          opacity: 1;
          margin-top: 6px;
          font-size: 13px;
          line-height: 18px; }
  .data-item {
    margin-top: 4vh; }
    .data-item .item {
      margin-bottom: 28px;
      vertical-align: top;
      display: inline-block;
      width: 49%; }
  .section-intro {
    margin-top: 4vh;
    line-height: 26px; }
  @-webkit-keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @-webkit-keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  @keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  .section-1 {
    overflow: hidden;
    z-index: 1;
    position: relative;
    height: 100vh;
    background-color: #fff; }
    .section-1::after {
      content: '';
      width: 100%;
      position: absolute;
      height: 44px;
      top: 0;
      z-index: 2;
      background-color: #fff; }
    .section-1 .kv-content {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0 auto; }
      .section-1 .kv-content .phone-img {
        position: absolute;
        width: 375px; }
        .section-1 .kv-content .phone-img img {
          width: 100%;
          height: auto; }
        .section-1 .kv-content .phone-img.phone-top {
          top: 0;
          left: 0; }
        .section-1 .kv-content .phone-img.phone-bottom {
          bottom: 0;
          right: 0; }
      .section-1 .kv-content .line-top {
        position: absolute;
        z-index: -1;
        top: -729px;
        -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
        left: -40px;
        border-radius: 49.9%;
        overflow: hidden; }
        .section-1 .kv-content .line-top .line-wrap {
          position: relative;
          width: 1200px;
          height: 1200px;
          overflow: hidden; }
        .section-1 .kv-content .line-top .circle-border {
          height: 100%;
          box-sizing: border-box;
          border: 182px solid #4A586F;
          border-radius: 50%; }
        .section-1 .kv-content .line-top .circle-border::before {
          content: '';
          position: absolute;
          display: block;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          top: 50%;
          left: 0;
          border: 182px solid #4A586F;
          border-top: transparent;
          border-radius: 0 0 50% 50% / 0 0 100% 100%;
          z-index: 2; }
        .section-1 .kv-content .line-top .mask-top, .section-1 .kv-content .line-top .mask-bottom {
          position: absolute;
          left: 0px;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          background: #fff; }
        .section-1 .kv-content .line-top .mask-top {
          top: 0;
          z-index: 1;
          -webkit-transform-origin: center bottom;
                  transform-origin: center bottom; }
        .section-1 .kv-content .line-top .mask-bottom {
          z-index: 3;
          top: 50%;
          -webkit-transform-origin: center top;
                  transform-origin: center top; }
        .section-1 .kv-content .line-top .mask-hero {
          position: absolute;
          right: -299px;
          width: 50%;
          height: 100%;
          bottom: -370px;
          box-sizing: border-box;
          background: #fff;
          -webkit-transform: rotate(-23deg);
                  transform: rotate(-23deg);
          z-index: 2; }
        .section-1 .kv-content .line-top.animate .mask-top {
          -webkit-animation: 2s top-back-half linear 2s;
                  animation: 2s top-back-half linear 2s;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
        .section-1 .kv-content .line-top.animate .mask-bottom {
          -webkit-animation: 2s top-front-half linear;
                  animation: 2s top-front-half linear;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
      .section-1 .kv-content .line-bottom {
        position: absolute;
        z-index: -1;
        bottom: -817px;
        right: -61px;
        -webkit-transform: rotate(-180deg);
                transform: rotate(-180deg);
        border-radius: 49.9%;
        overflow: hidden; }
        .section-1 .kv-content .line-bottom .line-wrap {
          position: relative;
          width: 1200px;
          height: 1200px;
          overflow: hidden; }
        .section-1 .kv-content .line-bottom .circle-border {
          height: 100%;
          box-sizing: border-box;
          border: 184px solid #FA7659;
          border-radius: 50%; }
        .section-1 .kv-content .line-bottom .circle-border::before {
          content: '';
          position: absolute;
          display: block;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          top: 50%;
          left: 0;
          border: 184px solid #FA7659;
          border-top: transparent;
          border-radius: 0 0 50% 50% / 0 0 100% 100%;
          z-index: 2; }
        .section-1 .kv-content .line-bottom .mask-top, .section-1 .kv-content .line-bottom .mask-bottom {
          position: absolute;
          left: 0px;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          background: #fff; }
        .section-1 .kv-content .line-bottom .mask-top {
          top: 0;
          z-index: 1;
          -webkit-transform-origin: center bottom;
                  transform-origin: center bottom; }
        .section-1 .kv-content .line-bottom .mask-bottom {
          z-index: 3;
          top: 50%;
          -webkit-transform-origin: center top;
                  transform-origin: center top; }
        .section-1 .kv-content .line-bottom .mask-hero {
          position: absolute;
          left: -110px;
          width: 50%;
          height: 100%;
          top: 0;
          box-sizing: border-box;
          background: #fff;
          -webkit-transform: rotate(24deg);
                  transform: rotate(24deg);
          z-index: 2; }
        .section-1 .kv-content .line-bottom.animate .mask-top {
          -webkit-animation: 2s bottom-back-half linear 2s;
                  animation: 2s bottom-back-half linear 2s;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
        .section-1 .kv-content .line-bottom.animate .mask-bottom {
          -webkit-animation: 2s bottom-front-half linear;
                  animation: 2s bottom-front-half linear;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
      .section-1 .kv-content .kv-slogan {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
        .section-1 .kv-content .kv-slogan .slogan-left {
          opacity: 0;
          position: absolute;
          top: 0; }
          .uc .section-1 .kv-content .kv-slogan .slogan-left {
            position: absolute;
            z-index: -1; }
          .section-1 .kv-content .kv-slogan .slogan-left svg {
            height: 30px;
            width: auto;
            top: -15px;
            position: relative; }
            .section-1 .kv-content .kv-slogan .slogan-left svg path, .section-1 .kv-content .kv-slogan .slogan-left svg polygon {
              fill: #000 !important; }
        .section-1 .kv-content .kv-slogan .slogan-right {
          display: none; }
  .section-2 {
    height: 155vw;
    background-color: #fff; }
    .section-2 .section-2-picture {
      position: relative; }
      .section-2 .section-2-picture picture {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); }
      .section-2 .section-2-picture #finger-phone {
        opacity: 0; }
      .section-2 .section-2-picture #finger-finger {
        opacity: 0; }
      .section-2 .section-2-picture #finger-screen {
        opacity: 0; }
    .section-2 .model .section-2-title {
      color: #000;
      font-size: 40px; }
    .section-2 .model .section-2-description {
      color: #000;
      font-size: 18px; }
    .section-2 .model .camera-show {
      margin-left: 10px; }
    .section-2 .model .title2 {
      font-size: 32px; }
    .section-2 .section-1-box {
      position: relative;
      padding-left: 45px;
      padding-right: 45px; }
      .section-2 .section-1-box br {
        display: none; }
      .section-2 .section-1-box .tit {
        font-size: 16px; }
      .section-2 .section-1-box .logo-show1 {
        position: absolute;
        vertical-align: middle;
        text-align: center;
        left: 33%; }
        .section-2 .section-1-box .logo-show1 .tit1 {
          font-size: 21px;
          margin-top: -20px;
          color: #333333; }
      .section-2 .section-1-box .tit_top {
        position: relative;
        text-align: center;
        line-height: 30px;
        margin-top: 142px;
        color: #333333; }
      .section-2 .section-1-box .tit_bottom {
        position: relative;
        text-align: center;
        line-height: 30px;
        margin-top: 6vh;
        margin-bottom: 186px;
        color: #666666; }
  .section-3 {
    width: 100vw;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    .section-3 .section-1-box {
      position: relative; }
    .section-3 .model1 {
      color: #333333;
      position: relative;
      z-index: 1;
      height: 180vw;
      padding-top: 17.5vw; }
      .section-3 .model1 .section-3-box {
        position: relative; }
        .section-3 .model1 .section-3-box .section-1-img {
          width: 100vw;
          right: 0;
          position: absolute; }
          .section-3 .model1 .section-3-box .section-1-img img {
            width: 100%;
            height: auto; }
      .section-3 .model1 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-3 .model1 .section-intro {
        padding: 0 11.4vw 0 9.8vw;
        font-size: 16px; }
    .section-3 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      height: 153vw; }
      .section-3 .model2 .section-4-box {
        position: relative; }
        .section-3 .model2 .section-4-box .section-title {
          padding: 0 9.5vw;
          font-size: 34px; }
        .section-3 .model2 .section-4-box .section-2-img {
          margin-top: 24vw;
          width: 87vw; }
          .section-3 .model2 .section-4-box .section-2-img .design_1 {
            height: 147px; }
        .section-3 .model2 .section-4-box .section-1-img {
          top: 65%;
          position: absolute;
          left: 31vw; }
          .section-3 .model2 .section-4-box .section-1-img.figure {
            padding-left: 13px;
            top: 72%;
            left: 35vw; }
        .section-3 .model2 .section-4-box .section-intro {
          padding: 0 14.5vw 0 9.5vw;
          font-size: 16px; }
      .section-3 .model2 .figure .f2 {
        top: -10vw;
        left: -4vw;
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
                transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure img {
        position: absolute; }
        .section-3 .model2 .figure img.f1 {
          left: 0;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f3 {
          left: 2vw;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f4 {
          left: 3.6vw;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model2 .figure.start img.f2 {
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-3 .model2 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
        .section-3 .model2 .figure.start img.f3 {
          -webkit-transition-delay: .4s;
                  transition-delay: .4s; }
        .section-3 .model2 .figure.start img.f4 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
    .section-3 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      height: 249vw; }
      .section-3 .model3 .section-5-box {
        position: relative; }
        .section-3 .model3 .section-5-box .figure {
          top: -1%;
          position: absolute;
          left: 40vw; }
        .section-3 .model3 .section-5-box .section-title {
          font-size: 34px;
          line-height: 47px;
          position: relative;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          width: 299px; }
        .section-3 .model3 .section-5-box .section-intro {
          font-size: 16px;
          line-height: 26px;
          position: relative;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          width: 299px; }
        .section-3 .model3 .section-5-box .section-3-img {
          vertical-align: middle;
          width: 81.3vw;
          position: relative;
          top: 50%;
          left: 50%;
          text-align: center;
          -webkit-transform: translate(-50%);
                  transform: translate(-50%); }
          .section-3 .model3 .section-5-box .section-3-img .screen_1 {
            width: 299px; }
        .section-3 .model3 .section-5-box .data-item .name {
          line-height: 26px;
          color: #FF8947; }
        .section-3 .model3 .section-5-box .data-item .value {
          font-size: 16px;
          line-height: 26px; }
        .section-3 .model3 .section-5-box .section-tit {
          position: relative;
          font-size: 34px;
          color: #333333;
          padding: 0 33px;
          margin-top: 20vw; }
          .section-3 .model3 .section-5-box .section-tit .figure {
            position: absolute;
            left: 240px;
            top: 0%; }
            .section-3 .model3 .section-5-box .section-tit .figure .f3 {
              left: 1.5vw;
              top: 0.6vw; }
        .section-3 .model3 .section-5-box .section-4-Finger {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 42.3vw;
          -webkit-transform: translate(-50%) scale(0.18);
                  transform: translate(-50%) scale(0.18); }
        .section-3 .model3 .section-5-box .section-bot {
          font-size: 16px;
          line-height: 26px;
          text-align: left;
          width: 287px;
          margin-top: 27px; }
      .section-3 .model3 .figure img {
        position: absolute; }
        .section-3 .model3 .figure img.f1 {
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model3 .figure img.f3 {
          top: 0.9vw;
          left: 1.5vw;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model3 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model3 .figure.start img.f3 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
        .section-3 .model3 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
  .section-4 {
    position: relative;
    width: 100vw;
    padding-top: 80px; }
    .section-4 .section-title {
      font-size: 32px; }
    .section-4 .section-intro {
      padding: 0 33px;
      font-size: 16px; }
      .section-4 .section-intro .section-tit .tit {
        background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
        font-size: 28px;
        margin-top: 2vh;
        line-height: 26px; }
    .section-4 .data-item .name {
      background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%; }
    .section-4 .section-1-box {
      position: relative; }
    .section-4 .model1 {
      color: #333333;
      position: relative;
      z-index: 1; }
      .section-4 .model1 .section-4-box {
        position: relative; }
        .section-4 .model1 .section-4-box .section-1-img {
          text-align: center;
          width: 100%; }
        .section-4 .model1 .section-4-box .g-banner {
          margin-top: 12vw;
          padding: 0 33px; }
          .section-4 .model1 .section-4-box .g-banner .button-group {
            display: none; }
          .section-4 .model1 .section-4-box .g-banner .image-wrapper {
            -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
            position: relative;
            height: 50vw;
            overflow: hidden; }
            .section-4 .model1 .section-4-box .g-banner .image-wrapper .photo {
              display: block;
              position: absolute;
              top: 0px;
              left: 0px; }
    .section-4 .model1_copy {
      margin-top: 100px; }
      .section-4 .model1_copy .status .bar {
        background-color: #fadcda; }
      .section-4 .model1_copy .inner-bar {
        background-color: #FF8947; }
    .section-4 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 100px; }
      .section-4 .model2 .section-4-box {
        position: relative; }
        .section-4 .model2 .section-4-box .section-1-img {
          text-align: center;
          width: 100%;
          height: 59.3vh; }
        .section-4 .model2 .section-4-box .figure {
          position: absolute;
          top: -1.4%;
          left: -6px; }
          .section-4 .model2 .section-4-box .figure img {
            position: absolute; }
            .section-4 .model2 .section-4-box .figure img.f1 {
              left: 18vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-4 .model2 .section-4-box .figure img.f2 {
              top: 0.9vw;
              left: 19.5vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-4 .model2 .section-4-box .figure.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-4 .model2 .section-4-box .figure.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-4 .model2 .section-4-box .figure.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
      .section-4 .model2 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-4 .model2 .section-intro {
        padding: 0 33px;
        font-size: 16px; }
        .section-4 .model2 .section-intro .section-tit {
          font-size: 28px;
          color: #333333;
          margin-top: 2vh; }
    .section-4 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 15vh; }
      .section-4 .model3 .section-5-box {
        position: relative; }
        .section-4 .model3 .section-5-box .section-title {
          font-size: 34px;
          width: 75vw;
          color: #fff; }
        .section-4 .model3 .section-5-box .section-intro {
          padding: 0 33px;
          font-size: 16px; }
        .section-4 .model3 .section-5-box .section-3-img {
          height: 100vh; }
        .section-4 .model3 .section-5-box .section-tit {
          font-size: 34px;
          color: #333333;
          padding: 0 33px;
          margin-top: 6vh; }
  .section-5 {
    position: relative; }
    .section-5 .section-1-box {
      position: relative; }
    .section-5 .model1 {
      height: 260vw;
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 18vw; }
      .section-5 .model1 .section-4-box {
        position: relative; }
        .section-5 .model1 .section-4-box .figure_on {
          position: absolute;
          top: -1%;
          left: 80px; }
          .section-5 .model1 .section-4-box .figure_on img {
            position: absolute; }
            .section-5 .model1 .section-4-box .figure_on img.f1 {
              left: 18vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-5 .model1 .section-4-box .figure_on img.f2 {
              top: 0.9vw;
              left: 19.5vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-5 .model1 .section-4-box .figure_on.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-5 .model1 .section-4-box .figure_on.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-5 .model1 .section-4-box .figure_on.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
        .section-5 .model1 .section-4-box .section-1-img.start div.ram_top, .section-5 .model1 .section-4-box .section-1-img.start div.ram_bottom {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none; }
        .section-5 .model1 .section-4-box .img-gallery {
          width: 100%;
          height: 540px;
          overflow: hidden;
          position: relative;
          margin-top: 124px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a {
            width: 290vw;
            height: 141px;
            margin-bottom: 15px;
            position: absolute;
            top: 0px;
            left: 0vw;
            -webkit-animation: mymove-mobile-back 30s linear infinite;
                    animation: mymove-mobile-back 30s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-b {
            width: 290vw;
            height: 141px;
            margin-bottom: 15px;
            position: absolute;
            left: 0vw;
            top: 176px;
            -webkit-animation: mymove-mobile 30s linear infinite;
                    animation: mymove-mobile 30s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a_2 {
            top: 352px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-aa {
            position: absolute;
            left: -280vw; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-bb {
            position: absolute;
            left: -280vw; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a3,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b3 {
            width: 54vw;
            height: 141px;
            margin-right: 2vw;
            border-radius: 5px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: inline-block; }
            .section-5 .model1 .section-4-box .img-gallery .img-content-a2 img,
            .section-5 .model1 .section-4-box .img-gallery .img-content-a1 img,
            .section-5 .model1 .section-4-box .img-gallery .img-content-a3 img,
            .section-5 .model1 .section-4-box .img-gallery .img-content-b1 img,
            .section-5 .model1 .section-4-box .img-gallery .img-content-b2 img,
            .section-5 .model1 .section-4-box .img-gallery .img-content-b3 img {
              width: 54vw; }
        .section-5 .model1 .section-4-box .section-2-img {
          margin-top: -592px;
          text-align: center;
          width: 100%;
          position: absolute;
          z-index: 99; }
          .section-5 .model1 .section-4-box .section-2-img .ram1 {
            width: 300px; }
        .section-5 .model1 .section-4-box .figure {
          position: absolute;
          top: -23vh;
          left: 18vw; }
        .section-5 .model1 .section-4-box .figure img {
          position: absolute; }
          .section-5 .model1 .section-4-box .figure img.f1 {
            opacity: 0;
            -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0); }
        .section-5 .model1 .section-4-box .figure.start img {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
      .section-5 .model1 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-5 .model1 .section-intro {
        padding: 0 33px;
        font-size: 16px; }
    .section-5 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 10px; }
      .section-5 .model2 .section-4-box {
        position: relative; }
        .section-5 .model2 .section-4-box .section-content {
          position: relative;
          width: 300px;
          height: 500px;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
        .section-5 .model2 .section-4-box .section-0-img {
          position: absolute;
          top: 128vw;
          left: 32vw;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 100vw; }
          .section-5 .model2 .section-4-box .section-0-img img {
            width: 100vw; }
        .section-5 .model2 .section-4-box .section-1-img {
          position: absolute;
          top: 140vw;
          left: 43vw;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 100vw; }
          .section-5 .model2 .section-4-box .section-1-img img {
            width: 100vw; }
        .section-5 .model2 .section-4-box .section-2-img {
          z-index: 1;
          position: absolute;
          top: 175vw;
          left: 2vw;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 30vw; }
          .section-5 .model2 .section-4-box .section-2-img img {
            width: 100vw;
            height: auto; }
        .section-5 .model2 .section-4-box .section-3-img {
          width: 82vw;
          position: absolute;
          top: 126vw;
          left: 50vw;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          z-index: 2; }
          .section-5 .model2 .section-4-box .section-3-img img {
            width: 100vw;
            height: auto; }
        .section-5 .model2 .section-4-box .section-intro {
          top: 124%;
          left: 99px;
          margin-top: 0 !important; }
        .section-5 .model2 .section-4-box .f1 {
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f5 {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) !important;
                  transform: translate(-50%, -50%) !important;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f3 {
          opacity: 0;
          -webkit-transform: translate3d(80px, 0px, 0);
                  transform: translate3d(80px, 0px, 0); }
        .section-5 .model2 .section-4-box .f2 {
          opacity: 0;
          -webkit-transform: translate3d(-50px, 160px, 0px);
                  transform: translate3d(-50px, 160px, 0px); }
        .section-5 .model2 .section-4-box .f4 {
          opacity: 0;
          height: 78vh;
          -webkit-transform: translate3d(50px, -160px, 0);
                  transform: translate3d(50px, -160px, 0); }
        .section-5 .model2 .section-4-box .section-1-img.start .f3 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear;
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          -webkit-transition-delay: .5s;
                  transition-delay: .5s;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-3-img.start .f4 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-2-img.start .f2 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-0-img.start .f1 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-5 .model2 .section-4-box .section-0-img.start .f5 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1.2s;
                  transition-delay: 1.2s; }
        .section-5 .model2 .section-4-box .newFast {
          position: absolute;
          margin-top: -81vw;
          width: 50vw; }
      .section-5 .model2 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-5 .model2 .section-intro {
        padding: 0 33px;
        font-size: 16px; }
    .section-5 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 30vw; }
      .section-5 .model3 .section-5-box {
        position: relative; }
        .section-5 .model3 .section-5-box .section-title {
          padding: 0 33px;
          font-size: 34px; }
        .section-5 .model3 .section-5-box .section-intro {
          padding: 0 33px;
          font-size: 16px; }
        .section-5 .model3 .section-5-box .section-1-img {
          margin-top: 12vw;
          padding-bottom: 18vw;
          vertical-align: middle; }
          .section-5 .model3 .section-5-box .section-1-img .nfc_1 {
            height: 256px;
            position: relative;
            left: 0;
            -webkit-transform: translateX(0);
                    transform: translateX(0); }
        .section-5 .model3 .section-5-box .section-tit {
          font-size: 34px;
          color: #333333;
          padding: 0 33px;
          margin-top: 6vh; }
  .section-6 {
    position: relative;
    z-index: 1;
    color: #333333; }
    .section-6 .section-1-box {
      position: relative; }
    .section-6 .model1 {
      z-index: 1; }
      .section-6 .model1 .section-4-box {
        position: relative; }
      .section-6 .model1 .section-1-img {
        text-align: center;
        width: 100%; }
        .section-6 .model1 .section-1-img .sec6-bg {
          width: 100%; }
      .section-6 .model1 .section-6-title {
        color: #fff;
        position: absolute;
        padding-top: 10vh; }
      .section-6 .model1 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-6 .model1 .section-intro {
        padding: 0 33px;
        font-size: 16px; }
  .section-7 {
    position: relative;
    z-index: 1; }
    .section-7 .section-1-box {
      position: relative; }
    .section-7 .model1 {
      z-index: 1; }
      .section-7 .model1 .section-7-box {
        position: relative; }
        .section-7 .model1 .section-7-box .section-1-img {
          position: relative;
          margin-bottom: 16vh;
          text-align: right;
          width: 100%; }
        .section-7 .model1 .section-7-box .section-7-title {
          color: #333;
          position: relative;
          padding-top: 10vh; }
          .section-7 .model1 .section-7-box .section-7-title .section-intro {
            color: #666; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .data-item .item {
              margin-bottom: 28px; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .name {
              background-image: -webkit-linear-gradient(top left, #495368, #343A48 25%, #2D323D 50%, #1F2228 75%, #0D0D0D);
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              -webkit-background-size: 200% 100%; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .comment {
              font-size: 12px;
              line-height: 26px;
              margin-top: 16px; }
        .section-7 .model1 .section-7-box .container {
          left: 0; }
        .section-7 .model1 .section-7-box .container-right {
          left: 80%; }
        .section-7 .model1 .section-7-box .circle-wave-container {
          position: absolute;
          z-index: -1;
          margin-top: -50px;
          top: 44%;
          -webkit-transform: translate(-50%);
                  transform: translate(-50%); }
          .section-7 .model1 .section-7-box .circle-wave-container .circle-wave {
            margin: 0 12vw;
            height: 600px;
            -webkit-transform: rotateX(60deg);
                    transform: rotateX(60deg); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle {
              position: absolute;
              border: 2px solid rgba(121, 123, 228, 0.15);
              border-radius: 50%;
              width: 100px;
              height: 100px;
              margin-top: 54vw;
              left: -50%;
              -webkit-transform: translateX(-50%);
                      transform: translateX(-50%); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.first {
              -webkit-animation: circle-waving-left 3s linear infinite;
                      animation: circle-waving-left 3s linear infinite; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.second {
              -webkit-animation: circle-waving-left 3s linear infinite;
                      animation: circle-waving-left 3s linear infinite;
              -webkit-animation-delay: 0.8s;
                      animation-delay: 0.8s; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.third {
              -webkit-animation: circle-waving-left 3s linear infinite;
                      animation: circle-waving-left 3s linear infinite;
              -webkit-animation-delay: 1.6s;
                      animation-delay: 1.6s; }
        .section-7 .model1 .section-7-box .section-7-content {
          position: relative;
          overflow: hidden; }
      .section-7 .model1 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-7 .model1 .section-intro {
        padding: 0 33px;
        font-size: 16px; }
    .section-7 .model2 {
      z-index: 1; }
      .section-7 .model2 .section-7-box {
        position: relative; }
        .section-7 .model2 .section-7-box .tit-content {
          color: #666; }
        .section-7 .model2 .section-7-box .section-7-title {
          color: #333333;
          position: relative;
          padding-top: 10vh; }
        .section-7 .model2 .section-7-box .tit_bottom {
          height: 345px;
          line-height: 69px;
          margin-top: 48vw;
          padding-bottom: 10vh;
          text-align: center;
          font-size: 26px; }
          .section-7 .model2 .section-7-box .tit_bottom .opcTit {
            height: 69px;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            text-align: center;
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row; }
            .section-7 .model2 .section-7-box .tit_bottom .opcTit .tit {
              opacity: 0;
              color: #000;
              display: block;
              width: 100%;
              position: absolute;
              font-size: 22px; }
        .section-7 .model2 .section-7-box .section-2-Breeno {
          position: absolute; }
          .section-7 .model2 .section-7-box .section-2-Breeno #section-2-Breeno {
            z-index: 3;
            position: absolute;
            left: 42vw;
            top: 10vh;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%); }
      .section-7 .model2 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-7 .model2 .section-intro {
        padding: 0 33px;
        font-size: 16px; }
        .section-7 .model2 .section-intro .g-parameter .g-link-button .more {
          margin-left: 1vw;
          position: absolute;
          top: 3px; }
  .section-8 {
    position: relative;
    z-index: 1;
    background: #fff; }
    .section-8 .model1 {
      color: #000000;
      z-index: 1;
      padding-top: 90px;
      background-color: #fff; }
      .section-8 .model1 .section-8-box {
        position: relative; }
        .section-8 .model1 .section-8-box .section-8-title {
          color: #fff;
          position: relative;
          padding-top: 10vh; }
      .section-8 .model1 .section-title {
        padding: 0 33px;
        font-size: 34px; }
      .section-8 .model1 .section-intro {
        padding: 0 33px;
        font-size: 16px; }
      .section-8 .model1 #reserve, .section-8 .model1 #serve {
        padding: 0 8.5vw; }
      .section-8 .model1 .section .panel {
        padding: 36px 23px 45px 23px;
        margin: auto;
        margin-bottom: 24px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 2px 25px 0 rgba(223, 223, 223, 0.5); }
        .section-8 .model1 .section .panel .image-wrapper {
          margin: auto;
          width: 112px;
          height: 112px; }
          .section-8 .model1 .section .panel .image-wrapper .logo {
            width: 100%;
            height: 100%; }
            .section-8 .model1 .section .panel .image-wrapper .logo .lazyload {
              width: 100%;
              height: 100%; }
        .section-8 .model1 .section .panel .title {
          font-size: 18px;
          line-height: 5.5vw;
          margin-top: 5.5vw;
          text-align: center; }
        .section-8 .model1 .section .panel .description {
          font-size: 14px;
          line-height: 6.6vw;
          margin-top: 5.5vw;
          text-align: center;
          color: #666666; }
          .section-8 .model1 .section .panel .description div {
            height: 6.6vw; }
        .section-8 .model1 .section .panel a {
          color: #333;
          text-decoration: none;
          cursor: pointer;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
        .section-8 .model1 .section .panel .g-link-button {
          margin-top: 30px;
          text-align: center; }
          .section-8 .model1 .section .panel .g-link-button .more {
            margin-left: 1vw;
            position: absolute;
            top: 3px; }
      .section-8 .model1 .section .g-parameter {
        padding: 40px 13px 0 13px;
        height: 350px; }
        .section-8 .model1 .section .g-parameter .item {
          margin-bottom: 24px;
          vertical-align: top;
          display: inline-block;
          width: 50%; }
          .section-8 .model1 .section .g-parameter .item .name {
            color: #666;
            font-size: 28px;
            line-height: 10.4vw;
            text-align: left; }
          .section-8 .model1 .section .g-parameter .item .value {
            color: #666;
            margin-top: 3px;
            text-align: left;
            font-size: 13px;
            line-height: 18px; }
        .section-8 .model1 .section .g-parameter .item-right {
          position: relative;
          left: 30px; }
        .section-8 .model1 .section .g-parameter .item-second {
          position: relative;
          top: -30px; }
        .section-8 .model1 .section .g-parameter .item-third {
          position: relative;
          top: -50px; }
  .section-9 {
    position: relative;
    z-index: 1; }
    .section-9 #remarks {
      background-color: #f5f5f5; }
      .section-9 #remarks .content {
        padding-top: 50px;
        padding-bottom: 41px;
        padding-left: 12vw;
        padding-right: 12vw; }
        .section-9 #remarks .content .description {
          margin-top: 0px;
          font-size: 11px;
          line-height: 4.6vw;
          letter-spacing: 0.34px;
          color: #666666; }
          .section-9 #remarks .content .description div {
            margin-bottom: 16px; }
  #oc-footer {
    background: #ffffff; } }

@media screen and (max-width: 360px) {
  ._scroll-animate-box::before {
    content: '';
    display: block;
    width: 100%;
    height: 660vw; }
  ._animate-clip-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    width: 90vw;
    height: 660vw;
    overflow: hidden;
    margin-left: -45vw;
    -webkit-transition: width .3s linear, margin-left .3s linear;
    transition: width .3s linear, margin-left .3s linear;
    border-radius: 20px;
    will-change: width, margin-left; }
    ._animate-clip-wrap.play {
      width: 100vw;
      margin-left: -50vw;
      -webkit-transition: width .3s linear, margin-left .3s linear;
      transition: width .3s linear, margin-left .3s linear; }
      ._animate-clip-wrap.play ._animate-bg {
        position: fixed;
        top: 0; }
  ._animate-clip {
    height: 660vw;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0); }
  .section-5 .model1 .section-4-box .img-gallery {
    width: 100%;
    height: 540px;
    overflow: hidden;
    position: relative;
    margin-top: 124px; }
    .section-5 .model1 .section-4-box .img-gallery .img-content-a {
      width: 290vw;
      height: 141px;
      margin-bottom: 15px;
      position: absolute;
      top: 32px;
      left: 0vw;
      -webkit-animation: mymove-mobile-back 30s linear infinite;
              animation: mymove-mobile-back 30s linear infinite; }
    .section-5 .model1 .section-4-box .img-gallery .img-content-b {
      width: 290vw;
      height: 141px;
      margin-bottom: 15px;
      position: absolute;
      left: 0vw;
      top: 185px;
      -webkit-animation: mymove-mobile 30s linear infinite;
              animation: mymove-mobile 30s linear infinite; }
    .section-5 .model1 .section-4-box .img-gallery .img-content-a_2 {
      top: 339px; }
    .section-5 .model1 .section-4-box .img-gallery .img-content-aa {
      position: absolute;
      left: -280vw; }
    .section-5 .model1 .section-4-box .img-gallery .img-content-bb {
      position: absolute;
      left: -280vw; }
    .section-5 .model1 .section-4-box .img-gallery .img-content-a2,
    .section-5 .model1 .section-4-box .img-gallery .img-content-a1,
    .section-5 .model1 .section-4-box .img-gallery .img-content-a3,
    .section-5 .model1 .section-4-box .img-gallery .img-content-b1,
    .section-5 .model1 .section-4-box .img-gallery .img-content-b2,
    .section-5 .model1 .section-4-box .img-gallery .img-content-b3 {
      width: 54vw;
      height: 141px;
      margin-right: 2vw;
      border-radius: 5px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: inline-block; }
      .section-5 .model1 .section-4-box .img-gallery .img-content-a2 img,
      .section-5 .model1 .section-4-box .img-gallery .img-content-a1 img,
      .section-5 .model1 .section-4-box .img-gallery .img-content-a3 img,
      .section-5 .model1 .section-4-box .img-gallery .img-content-b1 img,
      .section-5 .model1 .section-4-box .img-gallery .img-content-b2 img,
      .section-5 .model1 .section-4-box .img-gallery .img-content-b3 img {
        width: 54vw; } }

@media screen and (min-width: 400px) and (max-width: 767px) {
  .section-8 .panel_2 {
    height: 750px; } }

@media screen and (max-width: 360px) and (max-height: 727px) {
  .section-1 .kv-content .phone-img {
    width: 375px; }
    .section-1 .kv-content .phone-img.phone-top {
      top: 80px;
      left: 0; }
  .section-1 .kv-content .line-top {
    top: -649px; }
  .section-1 .kv-content .kv-slogan .slogan-left {
    top: 25px; } }

@media screen and (min-width: 376px) and (max-width: 414px) and (max-device-height: 896px) {
  .section-1 .kv-content .phone-img {
    width: 414px; }
    .section-1 .kv-content .phone-img img {
      width: 100%;
      height: auto; }
    .section-1 .kv-content .phone-img.phone-top {
      top: 95px;
      left: 0; }
    .section-1 .kv-content .phone-img.phone-bottom {
      bottom: 0;
      right: 0; }
  .section-1 .kv-content .line-top {
    top: -610px; }
    .section-1 .kv-content .line-top .circle-border {
      border: 202px solid #4A586F; }
    .section-1 .kv-content .line-top .circle-border::before {
      border: 202px solid #4A586F; }
    .section-1 .kv-content .line-top .mask-hero {
      right: -306px;
      -webkit-transform: rotate(-35deg);
              transform: rotate(-35deg); }
  .section-1 .kv-content .line-bottom {
    bottom: -800px; }
    .section-1 .kv-content .line-bottom .circle-border {
      border: 204px solid #FA7659; }
    .section-1 .kv-content .line-bottom .circle-border::before {
      border: 204px solid #FA7659; }
    .section-1 .kv-content .line-bottom .mask-hero {
      left: -17px;
      top: 0;
      -webkit-transform: rotate(38deg);
              transform: rotate(38deg); }
  .section-1 .kv-content .kv-slogan .slogan-left {
    top: 35px; } }

@media screen and (min-width: 375px) and (max-device-height: 812px) {
  .section-1 .kv-content .phone-img {
    width: 375px; }
  .section-1 .kv-content .line-top {
    top: -649px; }
  .section-1 .kv-content .kv-slogan .slogan-left {
    top: 25px; } }

@media screen and (max-width: 414px) and (max-device-height: 736px) {
  .section-1 .kv-content .phone-img {
    width: 414px; }
    .section-1 .kv-content .phone-img.phone-top {
      top: 0;
      left: 0; }
    .section-1 .kv-content .phone-img.phone-bottom {
      bottom: -30px;
      right: 0; }
  .section-1 .kv-content .line-top {
    top: -705px; }
  .section-1 .kv-content .line-bottom {
    bottom: -830px; }
  .section-1 .kv-content .kv-slogan .slogan-left {
    top: -10px; } }

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .sm-none {
    display: none; }
  @-webkit-keyframes mymove-pc {
    from {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); }
    to {
      -webkit-transform: translateX(2015px);
      transform: translateX(2015px); } }
  @keyframes mymove-pc {
    from {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); }
    to {
      -webkit-transform: translateX(2015px);
      transform: translateX(2015px); } }
  @-webkit-keyframes mymove-pc-back {
    from {
      -webkit-transform: translateX(2015px);
      transform: translateX(2015px); }
    to {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); } }
  @keyframes mymove-pc-back {
    from {
      -webkit-transform: translateX(2015px);
      transform: translateX(2015px); }
    to {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); } }
  .wrapper {
    width: 485px;
    margin: 0 auto; }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6,
  .section-beauty-picture-7,
  .section-beauty-picture-8 {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important; }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6 {
    margin-top: -40px; }
  .section-beauty-picture-7 {
    margin-top: -20px; }
  .section-beauty-picture-8 {
    margin-top: 0; }
  #section-beauty-picture-1,
  #section-beauty-picture-2,
  #section-beauty-picture-3,
  #section-beauty-picture-4,
  #section-beauty-picture-5,
  #section-beauty-picture-6 {
    width: 224px;
    border-radius: 13px; }
  #section-beauty-picture-7 {
    width: 252px;
    border-radius: 13px; }
  #section-beauty-picture-8 {
    width: 280px;
    border-radius: 13px; }
  .section-4 .section-5-box {
    height: 100vh; }
    .section-4 .section-5-box .section-3-img .section-beauty-tit {
      position: relative;
      width: 280px;
      height: 100vh;
      left: 0; }
      .section-4 .section-5-box .section-3-img .section-beauty-tit .section-title {
        padding: 0;
        opacity: 1;
        width: 280px; }
      .section-4 .section-5-box .section-3-img .section-beauty-tit .renoz-section-title {
        white-space: pre-wrap; }
  .contain {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  ._scroll-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative; }
  ._scroll-animate-box {
    position: relative;
    z-index: 1; }
  ._scroll-animate-box::before {
    content: '';
    display: block;
    width: 100%;
    height: 2400px; }
  ._animate-clip-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    width: 90%;
    height: 2400px;
    overflow: hidden;
    margin-left: -45%;
    -webkit-transition: width .3s linear, margin-left .3s linear;
    transition: width .3s linear, margin-left .3s linear;
    border-radius: 20px;
    will-change: width, margin-left; }
    ._animate-clip-wrap.play {
      width: 100%;
      margin-left: -50%;
      -webkit-transition: width .3s linear, margin-left .3s linear;
      transition: width .3s linear, margin-left .3s linear; }
      ._animate-clip-wrap.play ._animate-bg {
        position: fixed;
        top: 0; }
  ._animate-clip {
    height: 2400px;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0); }
  ._animate-clip.play {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none; }
  ._animate-bg {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    left: 50%;
    margin-left: -50vw;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear;
    will-change: background-color; }
    ._animate-bg.beginCol {
      background-color: #fafafa;
      /* Old browsers */ }
  .bgC_s4 {
    position: absolute;
    top: 50%; }
  .section-beauty {
    height: 800px; }
  .section-beauty-tit {
    font-size: 30px;
    z-index: 9;
    position: absolute;
    left: 23%; }
    .section-beauty-tit .tit1 {
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit2 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit3 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit4 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
  .section-item .reno-options .options {
    margin-top: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .section-item .reno-options .options .data-purple {
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
      background: #3023ae;
      /* Old browsers */
      /* FF3.6-15 */
      background: -webkit-linear-gradient(to left top, #3023ae 0%, #c86dd7 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: -webkit-linear-gradient(left top, #3023ae 0%, #c86dd7 100%);
      background: linear-gradient(to right bottom, #3023ae 0%, #c86dd7 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3023ae', endColorstr='#c86dd7', GradientType=0);
      /* IE6-9 */
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
      box-shadow: 0 9px 27px 0 rgba(172, 34, 238, 0.33); }
    .section-item .reno-options .options .data-black {
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#343e45+0,343e45+100 */
      background: #425067;
      /* Old browsers */
      box-shadow: 0 9px 27px 0 rgba(47, 43, 61, 0.33); }
    .section-item .reno-options .options .option {
      display: inline-block;
      margin-right: 22px; }
      .section-item .reno-options .options .option .color-circle {
        margin-left: 4px;
        width: 30px;
        height: 30px;
        position: relative;
        border-radius: 50%; }
        .section-item .reno-options .options .option .color-circle .inner-circle {
          position: absolute;
          opacity: 0;
          top: 50%;
          left: 50%;
          width: 26px;
          height: 26px;
          margin-left: -13px;
          margin-top: -13px;
          border: 3px solid #fff;
          border-radius: 50%;
          padding: 2px;
          box-sizing: border-box;
          /* margin: auto; */
          -webkit-transition: opacity 0.2s ease;
          transition: opacity 0.2s ease; }
      .section-item .reno-options .options .option .name {
        opacity: 1;
        margin-top: 6px;
        font-size: 13px;
        line-height: 18px; }
  .data-item {
    margin-top: 10px; }
    .data-item .item {
      margin-bottom: 28px;
      line-height: 26px;
      vertical-align: top;
      display: inline-block;
      width: 50%; }
    .data-item .item:nth-child(3) {
      width: 23% !important; }
    .data-item .name {
      font-size: 28px;
      line-height: 36px; }
    .data-item .value {
      font-size: 16px;
      line-height: 26px;
      margin-top: 4px; }
  .section-intro {
    margin-top: 30px;
    line-height: 26px; }
  @-webkit-keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @-webkit-keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  @keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  .section-1 {
    overflow: hidden;
    z-index: 1;
    position: relative;
    background-color: #fff; }
    .section-1::after {
      content: '';
      width: 100%;
      position: absolute;
      height: 44px;
      top: 0;
      z-index: 2;
      background-color: #fff; }
    .section-1 .kv-content {
      position: relative;
      width: 485px;
      height: 100%;
      margin: 0 auto; }
      .section-1 .kv-content .kv-slogan .slogan-left {
        opacity: 0;
        height: 32px; }
        .section-1 .kv-content .kv-slogan .slogan-left svg {
          width: auto;
          height: 32px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          margin-left: -70px; }
      .section-1 .kv-content .kv-slogan .slogan-right {
        opacity: 0;
        font-size: 22px;
        margin-right: -70px; }
  .section-2 {
    background-color: #fff; }
    .section-2 .section-2-picture {
      position: relative; }
      .section-2 .section-2-picture picture {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); }
      .section-2 .section-2-picture #finger-phone {
        opacity: 0; }
      .section-2 .section-2-picture #finger-finger {
        opacity: 0; }
      .section-2 .section-2-picture #finger-screen {
        opacity: 0; }
    .section-2 .model .section-2-title {
      color: #000;
      font-size: 40px;
      line-height: 55px; }
    .section-2 .model .section-2-description {
      color: #000;
      font-size: 16px; }
    .section-2 .model .camera-show {
      margin-left: 10px; }
    .section-2 .model .title2 {
      font-size: 32px; }
    .section-2 .section-1-box {
      position: relative; }
      .section-2 .section-1-box .logo-show1 {
        position: absolute;
        vertical-align: middle;
        text-align: center;
        left: 33%; }
      .section-2 .section-1-box .tit_top {
        position: relative;
        text-align: center;
        font-size: 16px;
        line-height: 26px;
        margin-top: 79px;
        color: #333333; }
      .section-2 .section-1-box .tit_bottom {
        position: relative;
        text-align: center;
        font-size: 16px;
        line-height: 26px;
        margin-top: 39px;
        margin-bottom: 77px;
        color: #666666; }
  .section-3 {
    width: 100vw;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    .section-3 .section-1-box {
      position: relative; }
    .section-3 .model1 {
      color: #333333;
      position: relative;
      z-index: 2;
      padding-top: 98px;
      padding-bottom: 200px; }
      .section-3 .model1 .section-3-box {
        position: absolute; }
        .section-3 .model1 .section-3-box .phone-content {
          right: 0;
          position: fixed;
          height: 332px;
          width: 100%;
          margin-top: 20px; }
          .section-3 .model1 .section-3-box .phone-content .section-1-img {
            position: absolute;
            height: 100%;
            right: 0; }
            .section-3 .model1 .section-3-box .phone-content .section-1-img img {
              width: auto;
              height: 100%; }
      .section-3 .model1 .section-intro {
        font-size: 16px;
        line-height: 26px;
        width: 417px; }
      .section-3 .model1 .section-item {
        margin-top: 42px; }
    .section-3 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 470px; }
      .section-3 .model2 .section-4-box {
        position: relative; }
        .section-3 .model2 .section-4-box .model2-title {
          margin-bottom: 54px; }
        .section-3 .model2 .section-4-box .section-title br:nth-child(2) {
          display: none; }
        .section-3 .model2 .section-4-box .section-2-img {
          position: fixed;
          left: 0;
          margin-top: 10px; }
        .section-3 .model2 .section-4-box .section-1-img {
          position: fixed;
          left: 618px;
          margin-top: -22px; }
        .section-3 .model2 .section-4-box .section-1-img.figure {
          padding-left: 13px;
          margin-top: 0; }
        .section-3 .model2 .section-4-box .section-intro {
          font-size: 16px;
          line-height: 26px;
          width: 417px; }
          .section-3 .model2 .section-4-box .section-intro br {
            display: none; }
      .section-3 .model2 .figure .f2 {
        top: -30px;
        left: -3px;
        opacity: 1;
        -webkit-transform: translate3d(0, 10px, 0);
                transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure img {
        position: absolute; }
        .section-3 .model2 .figure img.f1 {
          left: 6px;
          opacity: 1;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f3 {
          left: 19px;
          opacity: 1;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f4 {
          left: 31px;
          opacity: 1;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model2 .figure.start img.f2 {
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-3 .model2 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
        .section-3 .model2 .figure.start img.f3 {
          -webkit-transition-delay: .4s;
                  transition-delay: .4s; }
        .section-3 .model2 .figure.start img.f4 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
    .section-3 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 270px; }
      .section-3 .model3 .section-5-box {
        position: relative; }
        .section-3 .model3 .section-5-box .figure {
          top: -8px;
          position: absolute;
          left: 120px; }
        .section-3 .model3 .section-5-box .section-title {
          font-size: 40px; }
        .section-3 .model3 .section-5-box .section-desc {
          width: 300px; }
        .section-3 .model3 .section-5-box .section-intro {
          font-size: 16px; }
          .section-3 .model3 .section-5-box .section-intro .data-item {
            margin-top: 35px; }
            .section-3 .model3 .section-5-box .section-intro .data-item .item .value {
              margin-top: 4px; }
        .section-3 .model3 .section-5-box .section-3-img {
          width: 300px;
          vertical-align: middle;
          margin-top: 3.4vw;
          position: absolute;
          top: 0;
          right: 0;
          text-align: center;
          -webkit-transform: translate(50%);
                  transform: translate(50%); }
        .section-3 .model3 .section-5-box .data-item .name {
          color: #FF8947; }
        .section-3 .model3 .section-5-box .data-item .value {
          font-size: 16px; }
        .section-3 .model3 .section-5-box .section-tit {
          position: absolute;
          font-size: 40px;
          color: #333333;
          margin-top: 80px; }
          .section-3 .model3 .section-5-box .section-tit .figure {
            position: absolute;
            left: 242px;
            top: -2px; }
        .section-3 .model3 .section-5-box .section-4-Finger {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 42.3vw;
          -webkit-transform: translate(-50%) scale(0.3);
                  transform: translate(-50%) scale(0.3); }
        .section-3 .model3 .section-5-box .section-bot {
          font-size: 16px;
          line-height: 26px;
          text-align: left;
          margin-top: 34px; }
      .section-3 .model3 .figure img {
        position: absolute; }
        .section-3 .model3 .figure img.f1 {
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model3 .figure img.f3 {
          top: 5px;
          left: 9px;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model3 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model3 .figure.start img.f3 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
        .section-3 .model3 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
  .section-4 {
    position: relative;
    width: 100vw;
    padding-top: 5vw; }
    .section-4 .section-title {
      font-size: 40px;
      line-height: 55px; }
    .section-4 .section-intro {
      font-size: 16px;
      line-height: 26px;
      width: 420px; }
      .section-4 .section-intro .data-item {
        margin-top: 30px; }
        .section-4 .section-intro .data-item .item {
          margin-bottom: 32px; }
      .section-4 .section-intro .section-tit .tit {
        background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
        font-size: 28px;
        line-height: 26px; }
    .section-4 .data-item .name {
      background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%; }
    .section-4 .section-1-box {
      position: relative; }
    .section-4 .model1 {
      color: #333333;
      position: relative;
      z-index: 1; }
      .section-4 .model1 .section-4-box {
        position: relative; }
        .section-4 .model1 .section-4-box .section-1-img {
          text-align: center;
          width: 100%; }
        .section-4 .model1 .section-4-box .g-banner {
          position: relative;
          width: 672px;
          left: 50%;
          margin-left: -336px;
          margin-top: 56px; }
          .section-4 .model1 .section-4-box .g-banner .button-group {
            display: none; }
          .section-4 .model1 .section-4-box .g-banner .image-wrapper {
            -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
            position: relative;
            height: 378px;
            border-radius: 10px;
            overflow: hidden; }
            .section-4 .model1 .section-4-box .g-banner .image-wrapper .photo {
              display: block;
              position: absolute;
              top: 0px;
              left: 0px; }
    .section-4 .model1_copy {
      padding-top: 110px; }
      .section-4 .model1_copy .status .bar {
        background-color: #fadcda; }
      .section-4 .model1_copy .inner-bar {
        background-color: #FF8947; }
    .section-4 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 110px; }
      .section-4 .model2 .section-4-box {
        position: relative; }
        .section-4 .model2 .section-4-box .section-1-img {
          text-align: center;
          width: 100%;
          height: 59.3vh; }
        .section-4 .model2 .section-4-box .figure {
          position: absolute;
          top: -0.3vw;
          left: -4.5vw; }
          .section-4 .model2 .section-4-box .figure img {
            position: absolute; }
            .section-4 .model2 .section-4-box .figure img.f1 {
              left: 18vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-4 .model2 .section-4-box .figure img.f2 {
              top: .3vw;
              left: 18.5vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-4 .model2 .section-4-box .figure.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-4 .model2 .section-4-box .figure.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-4 .model2 .section-4-box .figure.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
      .section-4 .model2 .section-title {
        font-size: 40px; }
      .section-4 .model2 .section-intro {
        font-size: 16px; }
        .section-4 .model2 .section-intro .section-tit {
          font-size: 28px;
          color: #333333; }
    .section-4 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 15vh; }
      .section-4 .model3 .section-5-box {
        position: relative; }
        .section-4 .model3 .section-5-box .section-title {
          font-size: 40px;
          width: 45vh; }
        .section-4 .model3 .section-5-box .section-intro {
          font-size: 16px; }
        .section-4 .model3 .section-5-box .section-3-img {
          width: 100%;
          position: absolute;
          right: 0; }
        .section-4 .model3 .section-5-box .section-tit {
          font-size: 40px;
          color: #333333;
          margin-top: 6vh; }
  .section-5 {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+0,f3ffff+100 */
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */
    position: relative; }
    .section-5 .section-1-box {
      position: relative; }
    .section-5 .model1 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 100px; }
      .section-5 .model1 .section-4-box {
        position: relative; }
        .section-5 .model1 .section-4-box .figure_on {
          position: absolute;
          top: -12px;
          left: 120px; }
          .section-5 .model1 .section-4-box .figure_on img {
            position: absolute; }
            .section-5 .model1 .section-4-box .figure_on img.f1 {
              left: 18px;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-5 .model1 .section-4-box .figure_on img.f2 {
              top: 4px;
              left: 26px;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-5 .model1 .section-4-box .figure_on.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-5 .model1 .section-4-box .figure_on.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-5 .model1 .section-4-box .figure_on.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
        .section-5 .model1 .section-4-box .section-1-img.start div.ram_top, .section-5 .model1 .section-4-box .section-1-img.start div.ram_bottom {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none; }
        .section-5 .model1 .section-4-box .img-gallery {
          width: 100%;
          left: -50%;
          height: 750px;
          margin-top: 130px;
          position: relative;
          margin-bottom: 212px;
          -webkit-transform: translateX(12.5%);
                  transform: translateX(12.5%); }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a {
            width: 2015px;
            height: 280px;
            margin-bottom: 15px;
            position: absolute;
            top: 0px;
            left: 0vw;
            -webkit-animation: mymove-pc-back 24s linear infinite;
                    animation: mymove-pc-back 24s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-b {
            width: 2015px;
            height: 280px;
            margin-bottom: 15px;
            position: absolute;
            left: 0px;
            top: 306px;
            -webkit-animation: mymove-pc 30s linear infinite;
                    animation: mymove-pc 30s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-aa {
            position: absolute;
            left: -2015px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-bb {
            position: absolute;
            left: -2015px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a3,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b3 {
            width: 391px;
            height: 280px;
            margin-right: 12px;
            border-radius: 5px;
            background-size: cover;
            background-position: center;
            display: inline-block; }
          .section-5 .model1 .section-4-box .img-gallery img {
            width: 391px; }
        .section-5 .model1 .section-4-box .section-2-img {
          margin-top: -1030px;
          text-align: center;
          width: 100%;
          position: absolute;
          z-index: 99; }
          .section-5 .model1 .section-4-box .section-2-img .ram1 {
            width: 350px; }
        .section-5 .model1 .section-4-box .figure {
          position: absolute;
          top: -23vh;
          left: 18vw; }
        .section-5 .model1 .section-4-box .figure img {
          position: absolute; }
          .section-5 .model1 .section-4-box .figure img.f1 {
            opacity: 0;
            -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0); }
        .section-5 .model1 .section-4-box .figure.start img {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
      .section-5 .model1 .section-title {
        font-size: 40px; }
      .section-5 .model1 .section-intro {
        font-size: 16px; }
    .section-5 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 10px; }
      .section-5 .model2 .section-4-box {
        position: relative; }
        .section-5 .model2 .section-4-box .section-content {
          position: relative;
          width: 768px;
          height: 500px;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
        .section-5 .model2 .section-4-box .section-intro {
          top: 108%;
          left: 245px;
          margin-top: 0 !important; }
        .section-5 .model2 .section-4-box .f1 {
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f5 {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) !important;
                  transform: translate(-50%, -50%) !important;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f3 {
          opacity: 0;
          -webkit-transform: translate3d(120px, 0px, 0);
                  transform: translate3d(120px, 0px, 0); }
        .section-5 .model2 .section-4-box .f2 {
          opacity: 0;
          -webkit-transform: translate3d(-100px, 260px, 0px);
                  transform: translate3d(-100px, 260px, 0px); }
        .section-5 .model2 .section-4-box .f4 {
          opacity: 0;
          height: 78vh;
          -webkit-transform: translate3d(100px, -260px, 0);
                  transform: translate3d(100px, -260px, 0); }
        .section-5 .model2 .section-4-box .section-1-img.start .f3 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear;
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          -webkit-transition-delay: .5s;
                  transition-delay: .5s;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-3-img.start .f4 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-2-img.start .f2 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-0-img.start .f1 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-5 .model2 .section-4-box .section-0-img.start .f5 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1.2s;
                  transition-delay: 1.2s; }
        .section-5 .model2 .section-4-box .newFast {
          position: absolute;
          width: 242px;
          left: 370px; }
      .section-5 .model2 .section-title {
        font-size: 40px; }
      .section-5 .model2 .section-intro {
        font-size: 16px; }
    .section-5 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 360px; }
      .section-5 .model3 .section-5-box {
        position: relative; }
        .section-5 .model3 .section-5-box .section-title {
          font-size: 40px; }
        .section-5 .model3 .section-5-box .section-intro {
          font-size: 16px; }
        .section-5 .model3 .section-5-box .section-1-img {
          margin-top: 85px;
          padding-bottom: 200px;
          vertical-align: middle; }
          .section-5 .model3 .section-5-box .section-1-img .nfc_1 {
            width: 877px;
            position: relative;
            left: 0;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%); }
        .section-5 .model3 .section-5-box .section-tit {
          font-size: 40px;
          color: #333333;
          margin-top: 6vh; }
  .section-6 {
    position: relative;
    z-index: 1;
    color: #333333; }
    .section-6 .section-1-box {
      position: relative; }
    .section-6 .model1 {
      z-index: 1; }
      .section-6 .model1 .section-4-box {
        position: absolute;
        z-index: 9;
        width: 100%; }
      .section-6 .model1 .section-1-img {
        width: 100%; }
        .section-6 .model1 .section-1-img .sec6-bg {
          width: 100vw;
          height: 786px;
          left: 50%;
          position: relative;
          margin-left: -50vw; }
      .section-6 .model1 .section-6-title {
        color: #fff;
        position: absolute;
        padding-top: 99px;
        width: 384px; }
      .section-6 .model1 .section-title {
        font-size: 40px;
        line-height: 55px; }
      .section-6 .model1 .section-intro {
        line-height: 26px;
        font-size: 16px;
        width: 420px; }
  .section-7 {
    position: relative;
    z-index: 1;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */ }
    .section-7 .section-1-box {
      position: relative; }
    .section-7 .model1 {
      z-index: 1; }
      .section-7 .model1 .data-item .item {
        width: 40%; }
      .section-7 .model1 .section-7-box {
        position: relative; }
        .section-7 .model1 .section-7-box .section-1-img {
          position: relative;
          margin: 54px 0 128px;
          width: 100%; }
        .section-7 .model1 .section-7-box .section-7-title {
          color: #333;
          position: relative;
          padding-top: 10vh; }
          .section-7 .model1 .section-7-box .section-7-title br {
            display: none; }
          .section-7 .model1 .section-7-box .section-7-title .section-intro {
            color: #666; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .data-item .item {
              margin-top: 34px;
              margin-bottom: 0px; }
              .section-7 .model1 .section-7-box .section-7-title .section-intro .data-item .item .name {
                background-image: -webkit-linear-gradient(top left, #495368, #343A48 25%, #2D323D 50%, #1F2228 75%, #0D0D0D);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .comment {
              font-size: 12px;
              line-height: 26px;
              margin-top: 16px; }
        .section-7 .model1 .section-7-box .container {
          left: -15%; }
        .section-7 .model1 .section-7-box .container-right {
          left: 70%; }
        .section-7 .model1 .section-7-box .circle-wave-container {
          position: absolute;
          z-index: -1;
          -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
          top: 34%;
          -webkit-transform: translate(-50%);
                  transform: translate(-50%); }
          .section-7 .model1 .section-7-box .circle-wave-container .circle-wave {
            -webkit-transform: rotateX(60deg);
                    transform: rotateX(60deg); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle {
              position: absolute;
              border: 2px solid rgba(121, 123, 228, 0.45);
              border-radius: 50%;
              width: 300px;
              height: 200px;
              margin-top: 54vw;
              left: -50%;
              -webkit-transform: translateX(-50%);
                      transform: translateX(-50%); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.first {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.second {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite;
              -webkit-animation-delay: 0.8s;
                      animation-delay: 0.8s; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.third {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite;
              -webkit-animation-delay: 1.6s;
                      animation-delay: 1.6s; }
        .section-7 .model1 .section-7-box .section-7-content {
          position: relative;
          width: 662px;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
          .section-7 .model1 .section-7-box .section-7-content .section-7-dolby {
            position: absolute;
            left: 2%;
            top: -35%;
            -webkit-perspective: 400px;
                    perspective: 400px;
            z-index: -1;
            width: 630px; }
            .section-7 .model1 .section-7-box .section-7-content .section-7-dolby img {
              display: block;
              width: 630px;
              height: 182px;
              border-radius: 7% 6% 10% 12%;
              -webkit-transform-origin: bottom center;
              transform-origin: bottom center;
              position: absolute;
              -webkit-transform: rotateX(57deg) skewX(0deg);
              transform: rotateX(63deg) skewX(-1deg); }
      .section-7 .model1 .section-title {
        font-size: 40px; }
      .section-7 .model1 .section-intro {
        font-size: 16px; }
    .section-7 .model2 {
      z-index: 1; }
      .section-7 .model2 .section-7-box {
        position: relative; }
        .section-7 .model2 .section-7-box .tit-content {
          color: #666; }
        .section-7 .model2 .section-7-box .section-2-img {
          margin-top: 8vh;
          text-align: center;
          width: 100%; }
        .section-7 .model2 .section-7-box .section-7-title {
          color: #333333;
          position: relative;
          padding-top: 10vh; }
        .section-7 .model2 .section-7-box .tit_bottom {
          height: 345px;
          line-height: 69px;
          margin-top: 190px;
          padding-bottom: 10vh;
          text-align: center;
          font-size: 26px; }
          .section-7 .model2 .section-7-box .tit_bottom .opcTit {
            height: 69px;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row; }
            .section-7 .model2 .section-7-box .tit_bottom .opcTit .tit {
              opacity: 0;
              color: #000;
              display: block;
              width: 100%;
              position: absolute; }
        .section-7 .model2 .section-7-box .section-2-Breeno {
          position: absolute;
          left: 50%; }
          .section-7 .model2 .section-7-box .section-2-Breeno #section-2-Breeno {
            z-index: 3;
            position: absolute;
            left: 50%;
            top: 116px;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%); }
      .section-7 .model2 .section-title {
        font-size: 40px; }
      .section-7 .model2 .section-intro {
        font-size: 16px; }
        .section-7 .model2 .section-intro .g-parameter {
          margin-top: 30px; }
          .section-7 .model2 .section-intro .g-parameter .g-link-button .more {
            margin-left: 6px;
            position: absolute;
            top: 2px; }
  .section-8 {
    position: relative;
    z-index: 1;
    background: #fff; }
    .section-8 .model1 {
      color: #000000;
      z-index: 1;
      padding-top: 90px;
      padding-bottom: 90px;
      background-color: #fff; }
      .section-8 .model1 .section-8-box {
        position: relative; }
        .section-8 .model1 .section-8-box .section-8-title {
          color: #fff;
          position: relative;
          padding-top: 10vh; }
      .section-8 .model1 .section-title {
        font-size: 40px; }
      .section-8 .model1 .section-intro {
        font-size: 16px; }
      .section-8 .model1 .section .panel {
        padding: 36px 25px 45px 25px;
        margin: auto;
        margin-bottom: 24px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 2px 25px 0 rgba(223, 223, 223, 0.5); }
        .section-8 .model1 .section .panel .image-wrapper {
          margin: auto;
          width: 90px;
          height: 90px; }
          .section-8 .model1 .section .panel .image-wrapper .logo {
            width: 100%;
            height: 100%; }
            .section-8 .model1 .section .panel .image-wrapper .logo .move-show {
              position: relative;
              height: 90px;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex; }
            .section-8 .model1 .section .panel .image-wrapper .logo .lazyload {
              width: 100%;
              height: 100%; }
        .section-8 .model1 .section .panel .title {
          font-size: 18px;
          line-height: 20px;
          margin-top: 18px;
          text-align: center; }
        .section-8 .model1 .section .panel .description {
          font-size: 14px;
          line-height: 24px;
          margin-top: 18px;
          text-align: center;
          color: #666666; }
          .section-8 .model1 .section .panel .description div {
            height: 24px; }
        .section-8 .model1 .section .panel a {
          color: #333;
          text-decoration: none;
          cursor: pointer;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
        .section-8 .model1 .section .panel .g-link-button {
          margin-top: 30px;
          text-align: center; }
          .section-8 .model1 .section .panel .g-link-button .more {
            margin-left: 3px;
            position: absolute;
            top: 3px; }
      .section-8 .model1 .section .panel_2 {
        padding: 55px 45px 100px 45px; }
      .section-8 .model1 .section .g-parameter {
        padding: 40px 0 0 0;
        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; }
        .section-8 .model1 .section .g-parameter .item {
          margin-bottom: 37px;
          vertical-align: top;
          display: inline-block;
          width: 33.33%; }
          .section-8 .model1 .section .g-parameter .item .name {
            color: #666;
            font-size: 28px;
            line-height: 38px;
            text-align: left; }
          .section-8 .model1 .section .g-parameter .item .value {
            color: #666;
            margin-top: 3px;
            text-align: left;
            line-height: 18px;
            font-size: 13px; }
  .section-9 {
    position: relative;
    z-index: 1;
    background-color: #F5F5F5; }
    .section-9 #remarks {
      background-color: #f5f5f5; }
      .section-9 #remarks .content {
        padding-top: 50px;
        padding-bottom: 41px; }
        .section-9 #remarks .content .description {
          margin-top: 0px;
          font-size: 11px;
          line-height: 17px;
          letter-spacing: 0.40px;
          color: #666666; }
          .section-9 #remarks .content .description div {
            margin-bottom: 18px; }
  #oc-footer {
    background: #ffffff; } }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .section-7 .model1 .section-7-box .circle-wave-container {
    top: 40%; }
  .section-3 .model2 .section-4-box .section-1-img {
    margin-top: 0; } }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  .section-7 .model1 .section-7-box .circle-wave-container {
    top: 40%; }
  .section-3 .model2 .section-4-box .section-1-img {
    margin-top: -12px; } }

@media only screen and (device-width: 768px) {
  .section-3 .model2 .section-4-box .section-1-img {
    margin-top: 10%; }
  .section-7 .model1 .section-7-box .circle-wave-container {
    top: 45%; } }

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .section-1 .kv-content {
    height: 89.84375vw !important;
    min-height: 780px !important; }
  #contain .section-3 .section-4-box .section-1-img {
    left: 296px;
    margin-top: 12px; }
    #contain .section-3 .section-4-box .section-1-img.figure {
      margin-top: 26px; }
  .section-5 .model2 .section-4-box .section-0-img {
    position: absolute;
    top: 86%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%; }
    .section-5 .model2 .section-4-box .section-0-img img {
      width: 100%; }
  .section-5 .model2 .section-4-box .section-1-img {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%; }
    .section-5 .model2 .section-4-box .section-1-img img {
      width: 100%; }
  .section-5 .model2 .section-4-box .section-2-img {
    z-index: 1;
    position: absolute;
    top: 170%;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 50%; }
    .section-5 .model2 .section-4-box .section-2-img img {
      width: 100%;
      height: auto; }
  .section-5 .model2 .section-4-box .section-3-img {
    width: 86%;
    position: absolute;
    top: 77%;
    left: 56%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 2; }
    .section-5 .model2 .section-4-box .section-3-img img {
      width: 100%;
      height: auto; }
  #section7 .container {
    left: 0; }
  #section7 .container-right {
    left: 68%; }
  #section7 .circle-wave-container {
    top: 48%; }
    #section7 .circle-wave-container .circle-wave .circle {
      width: 200px;
      height: 150px; } }

@media screen and (min-width: 1081px) and (max-width: 1279px) {
  .section-5 .model2 .section-4-box .section-0-img {
    position: absolute;
    top: 62%;
    left: 54%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%; }
    .section-5 .model2 .section-4-box .section-0-img img {
      width: 100%; }
  .section-5 .model2 .section-4-box .section-1-img {
    position: absolute;
    top: 84%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%; }
    .section-5 .model2 .section-4-box .section-1-img img {
      width: 100%; }
  .section-5 .model2 .section-4-box .section-2-img {
    z-index: 1;
    position: absolute;
    top: 80%;
    left: 53%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%; }
    .section-5 .model2 .section-4-box .section-2-img img {
      width: 100%;
      height: auto; }
  .section-5 .model2 .section-4-box .section-3-img {
    width: 86%;
    position: absolute;
    top: 84%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 2; }
    .section-5 .model2 .section-4-box .section-3-img img {
      width: 100%;
      height: auto; }
  #section7 .section-7-content {
    width: 862px; }
  #section7 .section-7-dolby {
    position: absolute;
    left: 2%;
    top: -29%;
    -webkit-perspective: 504px;
            perspective: 504px;
    z-index: -1;
    width: 809px; }
    #section7 .section-7-dolby img {
      display: block;
      width: 809px;
      height: 220px;
      border-radius: 4% 9% 8% 9%;
      -webkit-transform-origin: bottom center;
      transform-origin: bottom center;
      position: absolute;
      -webkit-transform: rotateX(57deg) skewX(0deg);
      transform: rotateX(60deg) skewX(-3deg); } }

@media screen and (min-width: 768px) and (max-width: 960px) {
  #contain .section-3 .model3 .section-3-img {
    top: 30px;
    -webkit-transform: translateX(20%);
            transform: translateX(20%); } }

@media screen and (min-width: 1280px) and (max-width: 2559px) {
  .md-none {
    display: none; }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6,
  .section-beauty-picture-7,
  .section-beauty-picture-8 {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important; }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6 {
    margin-top: -60px; }
  .section-beauty-picture-7 {
    margin-top: -30px; }
  .section-beauty-picture-8 {
    margin-top: 0; }
  #section-beauty-picture-1,
  #section-beauty-picture-2,
  #section-beauty-picture-3,
  #section-beauty-picture-4,
  #section-beauty-picture-5,
  #section-beauty-picture-6 {
    width: 272px;
    border-radius: 13px; }
  #section-beauty-picture-7 {
    width: 306px;
    border-radius: 13px; }
  #section-beauty-picture-8 {
    width: 340px;
    border-radius: 13px; }
  .section-4 .section-5-box {
    height: 110vh; }
    .section-4 .section-5-box .section-3-img {
      position: absolute;
      width: 100%;
      right: 0; }
      .section-4 .section-5-box .section-3-img .section-beauty-tit {
        position: relative;
        width: 280px;
        height: 100vh;
        left: 0; }
        .section-4 .section-5-box .section-3-img .section-beauty-tit .section-title {
          padding: 0;
          opacity: 1;
          width: 616px; }
        .section-4 .section-5-box .section-3-img .section-beauty-tit .section-intro {
          width: 584px; }
  .contain {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  ._scroll-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative; }
  ._scroll-animate-box {
    position: relative;
    z-index: 1; }
  ._scroll-animate-box::before {
    content: '';
    display: block;
    width: 100%;
    height: 2400px; }
  ._animate-clip-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    width: 90%;
    height: 2400px;
    overflow: hidden;
    margin-left: -45%;
    -webkit-transition: width .3s linear, margin-left .3s linear;
    transition: width .3s linear, margin-left .3s linear;
    border-radius: 20px;
    will-change: width, margin-left; }
    ._animate-clip-wrap.play {
      width: 100%;
      margin-left: -50%;
      -webkit-transition: width .3s linear, margin-left .3s linear;
      transition: width .3s linear, margin-left .3s linear; }
      ._animate-clip-wrap.play ._animate-bg {
        position: fixed;
        top: 0; }
  ._animate-clip {
    height: 2400px;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0); }
  ._animate-clip.play {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none; }
  ._animate-bg {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    left: 50%;
    margin-left: -50vw;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear;
    will-change: background-color; }
    ._animate-bg.beginCol {
      background-color: #E7E2FF;
      /* Old browsers */ }
  .bgC_s4 {
    position: absolute;
    top: 50%; }
  .section-beauty {
    height: 100vh; }
    .section-beauty .section-desc {
      width: 450px; }
  .section-beauty-tit {
    color: #000;
    font-size: 30px;
    z-index: 9;
    position: absolute;
    left: 0%; }
    .section-beauty-tit .tit1 {
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit2 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit3 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit4 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
  .section-item .reno-options .options {
    margin-top: 13px; }
    .section-item .reno-options .options .data-orange {
      background: #FA7659;
      /* Old browsers */
      box-shadow: 0 9px 27px 0 #ff935d; }
    .section-item .reno-options .options .data-purple {
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
      background: #3023ae;
      /* Old browsers */
      /* FF3.6-15 */
      background: -webkit-linear-gradient(to left top, #3023ae 0%, #c86dd7 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: -webkit-linear-gradient(left top, #3023ae 0%, #c86dd7 100%);
      background: linear-gradient(to right bottom, #3023ae 0%, #c86dd7 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3023ae', endColorstr='#c86dd7', GradientType=0);
      /* IE6-9 */
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
      box-shadow: 0 9px 27px 0 rgba(172, 34, 238, 0.33); }
    .section-item .reno-options .options .data-white {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2edf6+0,f8f8f8+100 */
      background: #f2edf6;
      /* Old browsers */
      /* FF3.6-15 */
      background: -webkit-linear-gradient(to left top, #f2edf6 0%, #f8f8f8 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: -webkit-linear-gradient(left top, #f2edf6 0%, #f8f8f8 100%);
      background: linear-gradient(to right bottom, #f2edf6 0%, #f8f8f8 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2edf6', endColorstr='#f8f8f8', GradientType=0);
      /* IE6-9 */
      box-shadow: 0 9px 27px 0 rgba(157, 122, 108, 0.44); }
    .section-item .reno-options .options .data-black {
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#343e45+0,343e45+100 */
      background: #425067;
      /* Old browsers */
      box-shadow: 0 9px 27px 0 rgba(47, 43, 61, 0.33); }
    .section-item .reno-options .options .option {
      display: inline-block;
      margin-right: 22px; }
      .section-item .reno-options .options .option .color-circle {
        margin-left: 4px;
        width: 30px;
        height: 30px;
        position: relative;
        border-radius: 50%; }
        .section-item .reno-options .options .option .color-circle .inner-circle {
          position: absolute;
          opacity: 0;
          top: 50%;
          left: 50%;
          width: 26px;
          height: 26px;
          margin-left: -13px;
          margin-top: -13px;
          border: 3px solid #fff;
          border-radius: 50%;
          padding: 2px;
          box-sizing: border-box;
          /* margin: auto; */
          -webkit-transition: opacity 0.2s ease;
          transition: opacity 0.2s ease; }
      .section-item .reno-options .options .option .name {
        opacity: 1;
        margin-top: 6px;
        font-size: 13px;
        line-height: 18px; }
  .data-item {
    margin-top: 10px; }
    .data-item .item {
      margin-bottom: 24px;
      vertical-align: top;
      display: inline-block;
      width: 50%;
      vertical-align: sub; }
    .data-item .name {
      font-size: 28px;
      line-height: 36px; }
    .data-item .value {
      font-size: 18px;
      line-height: 26px;
      margin-top: 10px; }
  @-webkit-keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @-webkit-keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  @keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  .section-2 {
    background-color: #fff; }
    .section-2 .section-2-picture {
      position: relative; }
      .section-2 .section-2-picture picture {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); }
      .section-2 .section-2-picture #finger-phone {
        opacity: 0; }
      .section-2 .section-2-picture #finger-finger {
        opacity: 0; }
      .section-2 .section-2-picture #finger-screen {
        opacity: 0; }
    .section-2 .model .section-2-title {
      color: #000;
      font-size: 40px; }
    .section-2 .model .section-2-description {
      color: #000;
      font-size: 18px; }
    .section-2 .model .camera-show {
      margin-left: 10px; }
    .section-2 .model .title2 {
      font-size: 32px; }
    .section-2 .section-1-box {
      position: relative;
      padding-top: 50px; }
      .section-2 .section-1-box .logo-show1 {
        position: absolute;
        vertical-align: middle;
        text-align: center;
        left: 33%; }
      .section-2 .section-1-box .tit_top {
        position: relative;
        text-align: center;
        font-size: 26px;
        line-height: 46px;
        margin-top: 175px;
        color: #333333; }
      .section-2 .section-1-box .tit_bottom {
        position: relative;
        text-align: center;
        font-size: 18px;
        line-height: 37px;
        margin-top: 50px;
        margin-bottom: 210px;
        color: #666666; }
  .section-3 {
    width: 100vw;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    .section-3 .section-1-box {
      position: relative; }
    .section-3 .model1 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 98px;
      padding-bottom: 400px; }
      .section-3 .model1 .section-3-box {
        position: absolute; }
        .section-3 .model1 .section-3-box .phone-content {
          right: 0;
          position: fixed;
          height: 471px;
          width: 100%; }
          .ie .section-3 .model1 .section-3-box .phone-content {
            right: -340px;
            position: absolute; }
          .section-3 .model1 .section-3-box .phone-content .section-1-img {
            position: absolute;
            height: 100%;
            right: -100px; }
            .section-3 .model1 .section-3-box .phone-content .section-1-img img {
              width: auto;
              height: 100%; }
      .section-3 .model1 .section-item {
        margin-top: 42px; }
    .section-3 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 400px;
      margin-bottom: 280px; }
      .section-3 .model2 .section-4-box {
        position: relative; }
        .section-3 .model2 .section-4-box .section-2-img {
          position: fixed;
          left: 0;
          margin-top: 100px; }
          .ie .section-3 .model2 .section-4-box .section-2-img {
            left: -472px;
            position: absolute; }
        .section-3 .model2 .section-4-box .section-1-img {
          position: fixed;
          left: 618px;
          margin-top: 60px; }
        .section-3 .model2 .section-4-box .section-1-img:last-child {
          padding-left: 10px; }
      .section-3 .model2 .figure .f2 {
        -webkit-transform: translate3d(0, 10px, 0);
                transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure img {
        position: absolute; }
        .section-3 .model2 .figure img.f1 {
          margin-top: 25px;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f3 {
          left: 20px;
          margin-top: 25px;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f4 {
          left: 30px;
          margin-top: 25px;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model2 .figure.start img.f2 {
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-3 .model2 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
        .section-3 .model2 .figure.start img.f3 {
          -webkit-transition-delay: .4s;
                  transition-delay: .4s; }
        .section-3 .model2 .figure.start img.f4 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
    .section-3 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 100px; }
      .section-3 .model3 .section-5-box {
        position: relative; }
        .section-3 .model3 .section-5-box .figure {
          top: -6px;
          position: absolute;
          left: 117px; }
        .section-3 .model3 .section-5-box .section-3-img {
          width: 384px;
          vertical-align: middle;
          position: absolute;
          top: 0;
          right: 0;
          text-align: center;
          -webkit-transform: translateX(30%);
                  transform: translateX(30%); }
        .section-3 .model3 .section-5-box .data-item {
          width: 50%; }
          .section-3 .model3 .section-5-box .data-item .item {
            margin-top: 84px; }
          .section-3 .model3 .section-5-box .data-item .name {
            font-size: 36px;
            line-height: 26px;
            color: #F88B30; }
          .section-3 .model3 .section-5-box .data-item .value {
            font-size: 18px;
            line-height: 26px;
            margin-top: 11px; }
        .section-3 .model3 .section-5-box .section-tit {
          position: absolute;
          font-size: 40px;
          color: #333333;
          top: 614px; }
          .section-3 .model3 .section-5-box .section-tit .figure {
            position: absolute;
            left: 240px;
            top: -4px; }
        .section-3 .model3 .section-5-box .section-4-Finger {
          position: absolute;
          bottom: 5%;
          left: 50%;
          -webkit-transform: translate(-50%) scale(0.3);
                  transform: translate(-50%) scale(0.3); }
        .section-3 .model3 .section-5-box .section-bot {
          font-size: 18px;
          line-height: 26px;
          text-align: left;
          margin-top: 33px; }
      .section-3 .model3 .figure img {
        position: absolute; }
        .section-3 .model3 .figure img.f1 {
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model3 .figure img.f3 {
          top: 6px;
          left: 8px;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model3 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model3 .figure.start img.f3 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
        .section-3 .model3 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
  .section-4 {
    position: relative;
    width: 100%;
    padding-top: 140px; }
    .section-4 .section-intro .intro_cont {
      width: 700px; }
    .section-4 .section-intro .section-tit {
      position: relative; }
      .section-4 .section-intro .section-tit .tit {
        background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
        font-size: 36px;
        position: absolute;
        line-height: 36px;
        left: 50%;
        top: -88px; }
    .section-4 .data-item {
      margin-top: 30px;
      width: 50%; }
      .section-4 .data-item .item {
        width: 50%; }
        .section-4 .data-item .item .name {
          font-size: 36px;
          line-height: 36px;
          background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          -webkit-background-size: 200% 100%; }
        .section-4 .data-item .item .value {
          font-size: 18px; }
    .section-4 .section-1-box {
      position: relative; }
    .section-4 .model1 {
      color: #333333;
      position: relative;
      z-index: 1; }
      .section-4 .model1 .section-4-box {
        position: relative; }
        .section-4 .model1 .section-4-box .section-1-img {
          text-align: center;
          width: 100%; }
        .section-4 .model1 .section-4-box .g-banner {
          margin-top: 30px;
          width: auto; }
          .section-4 .model1 .section-4-box .g-banner .button-group {
            display: none; }
          .section-4 .model1 .section-4-box .g-banner .image-wrapper {
            -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
            position: relative;
            height: 540px;
            border-radius: 13px;
            overflow: hidden; }
            .section-4 .model1 .section-4-box .g-banner .image-wrapper .photo {
              display: block;
              position: absolute;
              top: 0px;
              left: 0px; }
    .section-4 .model1_copy {
      padding-top: 110px; }
      .section-4 .model1_copy .status .bar {
        background-color: #fadcda; }
      .section-4 .model1_copy .inner-bar {
        background-color: #FF8947; }
    .section-4 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 110px; }
      .section-4 .model2 .section-4-box {
        position: relative; }
        .section-4 .model2 .section-4-box .section-1-img {
          text-align: center;
          width: 100%;
          height: 59.3vh; }
        .section-4 .model2 .section-4-box .figure {
          position: absolute;
          top: -0.3vw;
          left: -4.5vw; }
          .section-4 .model2 .section-4-box .figure img {
            position: absolute; }
            .section-4 .model2 .section-4-box .figure img.f1 {
              left: 18vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-4 .model2 .section-4-box .figure img.f2 {
              top: .3vw;
              left: 18.5vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-4 .model2 .section-4-box .figure.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-4 .model2 .section-4-box .figure.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-4 .model2 .section-4-box .figure.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
      .section-4 .model2 .section-intro .section-tit {
        font-size: 28px;
        color: #333333;
        margin-top: 2vh; }
    .section-4 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 15vh; }
      .section-4 .model3 .section-5-box {
        position: relative; }
        .section-4 .model3 .section-5-box .section-3-img {
          vertical-align: middle;
          height: 100%; }
        .section-4 .model3 .section-5-box .section-tit {
          font-size: 34px;
          color: #333333;
          margin-top: 6vh; }
  .section-5 {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+0,f3ffff+100 */
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */
    position: relative; }
    .section-5 .section-1-box {
      position: relative; }
    .section-5 .model1 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 120px; }
      .section-5 .model1 .section-4-box {
        position: relative; }
        .section-5 .model1 .section-4-box .figure_on {
          position: absolute;
          top: -14px;
          left: 92px; }
          .section-5 .model1 .section-4-box .figure_on img {
            position: absolute; }
            .section-5 .model1 .section-4-box .figure_on img.f1 {
              left: 19px;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-5 .model1 .section-4-box .figure_on img.f2 {
              top: 5px;
              left: 29px;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-5 .model1 .section-4-box .figure_on.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-5 .model1 .section-4-box .figure_on.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-5 .model1 .section-4-box .figure_on.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
        .section-5 .model1 .section-4-box .section-1-img.start div.ram_top, .section-5 .model1 .section-4-box .section-1-img.start div.ram_bottom {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none; }
        .section-5 .model1 .section-4-box .img-gallery {
          width: 100vw;
          height: 800px;
          margin-top: 180px;
          overflow: hidden;
          position: relative;
          margin-bottom: 212px;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a {
            width: 2360px;
            height: 347px;
            margin-bottom: 15px;
            position: absolute;
            top: 0px;
            left: 0px;
            -webkit-animation: mymove-pc-back 24s linear infinite;
                    animation: mymove-pc-back 24s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-b {
            width: 2360px;
            height: 347px;
            margin-bottom: 15px;
            position: absolute;
            left: 0px;
            top: 358px;
            -webkit-animation: mymove-pc 30s linear infinite;
                    animation: mymove-pc 30s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a_2 {
            top: 420px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-aa {
            position: absolute;
            left: -2360px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-bb {
            position: absolute;
            left: -2360px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a3,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b3 {
            width: 460px;
            height: 347px;
            margin-right: 12px;
            border-radius: 5px;
            background-size: cover;
            background-position: center;
            display: inline-block;
            background-color: #c0daf3; }
          .section-5 .model1 .section-4-box .img-gallery img {
            width: 460px;
            height: 347px; }
          .section-5 .model1 .section-4-box .img-gallery .md_none {
            display: none; }
        .section-5 .model1 .section-4-box .section-2-img {
          top: 57.3%;
          text-align: center;
          width: 100%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
          position: absolute;
          z-index: 2; }
          .section-5 .model1 .section-4-box .section-2-img .ram1 {
            width: 400px; }
        .section-5 .model1 .section-4-box .figure {
          position: absolute;
          top: -23vh;
          left: 18vw; }
        .section-5 .model1 .section-4-box .figure img {
          position: absolute; }
          .section-5 .model1 .section-4-box .figure img.f1 {
            opacity: 0;
            -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0); }
        .section-5 .model1 .section-4-box .figure.start img {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
      .section-5 .model1 .section_box {
        margin-top: -48px; }
    .section-5 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 10px; }
      .section-5 .model2 .section-4-box {
        position: relative; }
        .section-5 .model2 .section-4-box .section-content {
          position: relative;
          width: 1280px;
          height: 500px;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
        .section-5 .model2 .section-4-box .section-0-img {
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 100%; }
          .section-5 .model2 .section-4-box .section-0-img img {
            width: 100%; }
        .section-5 .model2 .section-4-box .section-1-img {
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 100%; }
          .section-5 .model2 .section-4-box .section-1-img img {
            width: 100%; }
        .section-5 .model2 .section-4-box .section-2-img {
          z-index: 1;
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 100%; }
          .section-5 .model2 .section-4-box .section-2-img img {
            width: 100%;
            height: auto; }
        .section-5 .model2 .section-4-box .section-3-img {
          width: 100%;
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          z-index: 2; }
          .section-5 .model2 .section-4-box .section-3-img img {
            width: 100%;
            height: auto; }
        .section-5 .model2 .section-4-box .section-intro {
          top: 150%;
          left: 53%;
          position: absolute;
          width: 330px;
          margin-top: 0 !important; }
        .section-5 .model2 .section-4-box .f1 {
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f5 {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) !important;
                  transform: translate(-50%, -50%) !important;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f3 {
          opacity: 0;
          -webkit-transform: translate3d(120px, 0px, 0);
                  transform: translate3d(120px, 0px, 0); }
        .section-5 .model2 .section-4-box .f2 {
          opacity: 0;
          -webkit-transform: translate3d(-100px, 260px, 0px);
                  transform: translate3d(-100px, 260px, 0px); }
        .section-5 .model2 .section-4-box .f4 {
          opacity: 0;
          height: 78vh;
          -webkit-transform: translate3d(100px, -260px, 0);
                  transform: translate3d(100px, -260px, 0); }
        .section-5 .model2 .section-4-box .section-1-img.start .f3 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear;
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          -webkit-transition-delay: .5s;
                  transition-delay: .5s;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-3-img.start .f4 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-2-img.start .f2 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-0-img.start .f1 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-5 .model2 .section-4-box .section-0-img.start .f5 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1.2s;
                  transition-delay: 1.2s; }
      .section-5 .model2 .section-title {
        margin-top: 100px;
        top: -100px; }
    .section-5 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 30vw; }
      .section-5 .model3 .section-5-box {
        position: relative; }
        .section-5 .model3 .section-5-box .section-intro {
          width: 500px; }
        .section-5 .model3 .section-5-box .section-1-img {
          margin-top: 103px;
          vertical-align: middle;
          text-align: center; }
          .section-5 .model3 .section-5-box .section-1-img .nfc_1 {
            position: relative;
            left: 23%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%); }
        .section-5 .model3 .section-5-box .section-tit {
          font-size: 34px;
          color: #333333;
          margin-top: 6vh; }
  .section-6 {
    position: relative;
    z-index: 1;
    color: #333333; }
    .section-6 .section-1-box {
      position: relative; }
    .section-6 .model1 {
      z-index: 1; }
      .section-6 .model1 .section-4-box {
        position: absolute;
        z-index: 9;
        width: 100%; }
      .section-6 .model1 .section-1-img {
        width: 100%; }
        .section-6 .model1 .section-1-img .sec6-bg {
          width: 100vw;
          left: 50%;
          position: relative;
          margin-left: -50vw; }
      .section-6 .model1 .section-6-title {
        color: #fff;
        position: absolute;
        padding-top: 99px;
        width: 384px; }
  .section-7 {
    position: relative;
    z-index: 1;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */ }
    .section-7 .section-1-box {
      position: relative; }
    .section-7 .model1 {
      z-index: 1; }
      .section-7 .model1 .section-7-box {
        position: relative; }
        .section-7 .model1 .section-7-box .section-1-img {
          position: relative;
          margin-top: 12vh;
          text-align: center; }
        .section-7 .model1 .section-7-box .section-7-title {
          color: #333;
          position: relative;
          padding-top: 10vh; }
          .section-7 .model1 .section-7-box .section-7-title .section-intro {
            color: #666; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .data-item {
              margin-top: 65px; }
              .section-7 .model1 .section-7-box .section-7-title .section-intro .data-item .item {
                width: 30%; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .name {
              background-image: -webkit-linear-gradient(top left, #495368, #343A48 25%, #2D323D 50%, #1F2228 75%, #0D0D0D);
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              -webkit-background-size: 200% 100%; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .comment {
              font-size: 12px;
              line-height: 26px;
              margin-top: 18px; }
        .section-7 .model1 .section-7-box .dolby-content {
          position: relative;
          padding-bottom: 100px; }
        .section-7 .model1 .section-7-box .container {
          left: 0; }
        .section-7 .model1 .section-7-box .container-right {
          left: 80%; }
        .section-7 .model1 .section-7-box .circle-wave-container {
          position: absolute;
          z-index: -1;
          -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
          top: 64%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
          .section-7 .model1 .section-7-box .circle-wave-container .circle-wave {
            margin: 0 12vw;
            height: 600px;
            -webkit-transform: rotateX(60deg);
                    transform: rotateX(60deg); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle {
              position: absolute;
              border: 2px solid rgba(121, 123, 228, 0.45);
              border-radius: 50%;
              width: 200px;
              height: 200px;
              left: -50%;
              -webkit-transform: translateX(-50%);
                      transform: translateX(-50%); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.first {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.second {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite;
              -webkit-animation-delay: 0.8s;
                      animation-delay: 0.8s; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.third {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite;
              -webkit-animation-delay: 1.6s;
                      animation-delay: 1.6s; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.right.first {
              -webkit-animation: circle-waving-right 2.4s linear infinite;
                      animation: circle-waving-right 2.4s linear infinite; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.right.second {
              -webkit-animation: circle-waving-right 2.4s linear infinite;
                      animation: circle-waving-right 2.4s linear infinite;
              -webkit-animation-delay: 0.8s;
                      animation-delay: 0.8s; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.right.third {
              -webkit-animation: circle-waving-right 2.4s linear infinite;
                      animation: circle-waving-right 2.4s linear infinite;
              -webkit-animation-delay: 1.6s;
                      animation-delay: 1.6s; }
        .section-7 .model1 .section-7-box .section-7-content {
          position: relative;
          overflow: hidden;
          vertical-align: middle;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%);
                  transform: translate(-50%);
          width: 960px; }
          .section-7 .model1 .section-7-box .section-7-content .img-dolby {
            width: 960px; }
          .section-7 .model1 .section-7-box .section-7-content .section-7-dolby {
            width: 910px;
            position: absolute;
            left: 2%;
            top: -44%;
            -webkit-perspective: 700px;
                    perspective: 700px;
            z-index: -1; }
            .section-7 .model1 .section-7-box .section-7-content .section-7-dolby img {
              display: block;
              width: 910px;
              height: 286px;
              border-radius: 6% 6% 10% 10%;
              -webkit-transform-origin: bottom center;
              transform-origin: bottom center;
              position: absolute;
              -webkit-transform: rotateX(67deg) skewX(-2deg);
                      transform: rotateX(67deg) skewX(-2deg); }
    .section-7 .model2 {
      z-index: 1; }
      .section-7 .model2 .section-7-box {
        position: relative; }
        .section-7 .model2 .section-7-box .tit-content {
          color: #666;
          width: 607px;
          font-size: 18px; }
        .section-7 .model2 .section-7-box .section-2-img {
          margin-top: 8vh;
          text-align: center;
          width: 100%; }
        .section-7 .model2 .section-7-box .section-7-title {
          color: #333333;
          position: relative;
          padding-top: 10vh; }
        .section-7 .model2 .section-7-box .tit_bottom {
          height: 345px;
          line-height: 69px;
          margin-top: 190px;
          padding-bottom: 10vh;
          text-align: center;
          font-size: 26px; }
          .section-7 .model2 .section-7-box .tit_bottom .opcTit {
            height: 69px;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row; }
            .section-7 .model2 .section-7-box .tit_bottom .opcTit .tit {
              opacity: 0;
              color: #000;
              display: block;
              width: 100%;
              position: absolute; }
        .section-7 .model2 .section-7-box .section-2-Breeno {
          position: absolute;
          left: 50%; }
          .section-7 .model2 .section-7-box .section-2-Breeno #section-2-Breeno {
            z-index: 3;
            position: absolute;
            left: 50%;
            top: 116px;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%); }
      .section-7 .model2 .section-intro .g-parameter .g-link-button {
        margin-top: 30px; }
        .section-7 .model2 .section-intro .g-parameter .g-link-button .more {
          margin-top: 30px;
          margin-left: 3px;
          position: absolute;
          top: -28px; }
  .section-8 {
    position: relative;
    z-index: 1;
    background: #fff; }
    .section-8 .model1 {
      color: #000000;
      z-index: 1;
      padding-top: 90px;
      padding-bottom: 90px;
      background-color: #fff; }
      .section-8 .model1 .section-8-box {
        position: relative; }
        .section-8 .model1 .section-8-box .section-8-title {
          color: #fff;
          position: relative;
          padding-top: 10vh; }
      .section-8 .model1 #reserve,
      .section-8 .model1 #serve {
        width: 100%; }
      .section-8 .model1 .section .panel_md {
        margin-left: 20px !important; }
      .section-8 .model1 .section .panel {
        padding: 36px 33px 45px 33px;
        margin: auto;
        margin-bottom: 24px;
        border-radius: 13px;
        background-color: #fff;
        box-shadow: 0 2px 25px 0 rgba(223, 223, 223, 0.5);
        width: 42%;
        vertical-align: middle;
        display: inline-block; }
        .section-8 .model1 .section .panel .image-wrapper {
          margin: auto;
          width: 112px;
          height: 112px; }
          .section-8 .model1 .section .panel .image-wrapper .logo {
            width: 100%;
            height: 100%; }
            .section-8 .model1 .section .panel .image-wrapper .logo .lazyload {
              width: 100%;
              height: 100%; }
        .section-8 .model1 .section .panel .title {
          font-size: 28px;
          line-height: 30px;
          margin-top: 18px;
          text-align: center; }
        .section-8 .model1 .section .panel .description {
          font-size: 14px;
          line-height: 24px;
          margin-top: 34px;
          text-align: center;
          color: #666666; }
          .section-8 .model1 .section .panel .description div {
            height: 24px; }
        .section-8 .model1 .section .panel .description_01 {
          padding: 0 82px; }
        .section-8 .model1 .section .panel a {
          color: #333;
          text-decoration: none;
          cursor: pointer;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
        .section-8 .model1 .section .panel .g-link-button {
          margin-top: 30px;
          text-align: center;
          font-size: 22px;
          line-height: 30px; }
          .section-8 .model1 .section .panel .g-link-button .more {
            margin-left: -3px;
            margin-top: 2px; }
      .section-8 .model1 .section .panel_1 {
        margin-bottom: 102px; }
      .section-8 .model1 .section .panel_2 {
        padding: 55px 45px 100px 45px;
        width: 90.5%; }
      .section-8 .model1 .section .g-parameter {
        padding: 78px 13px 0 13px;
        text-align: center;
        width: 100%; }
        .section-8 .model1 .section .g-parameter .item {
          margin-bottom: 24px;
          vertical-align: top;
          display: inline-block;
          width: 16.6%; }
          .section-8 .model1 .section .g-parameter .item .name {
            color: #666;
            font-size: 34px;
            line-height: 47px;
            text-align: center; }
          .section-8 .model1 .section .g-parameter .item .value {
            color: #666;
            margin-top: 8px;
            text-align: center;
            line-height: 26px;
            font-size: 18px; }
  .section-9 {
    position: relative;
    z-index: 1;
    background-color: #f5f5f5; }
    .section-9 #remarks {
      background-color: #f5f5f5; }
      .section-9 #remarks .content {
        padding-top: 50px;
        padding-bottom: 41px; }
        .section-9 #remarks .content .description {
          margin-top: 0px;
          font-size: 11px;
          line-height: 17px;
          letter-spacing: 0.40px;
          color: #666666; }
          .section-9 #remarks .content .description div {
            margin-bottom: 18px; }
  #oc-footer {
    background: #ffffff; }
  .ie #tit_breeno .opcTit {
    position: absolute;
    left: -50%; }
  .ie #tit_breeno .tit {
    opacity: 1; }
  .ie #tit_breeno .tit2 {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    color: #646464; }
  .ie #tit_breeno .tit3 {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
    color: #7C7C7C; }
  .ie #tit_breeno .tit4 {
    -webkit-transform: translateY(300%);
            transform: translateY(300%);
    color: #9F9F9F; }
  .ie #tit_breeno .tit5 {
    -webkit-transform: translateY(400%);
            transform: translateY(400%);
    color: #B7B7B7; }
  /*兼容IE11*/ }

@media screen and (min-width: 1280px) and (max-width: 2559px) and (-ms-high-contrast: active), screen and (min-width: 1280px) and (max-width: 2559px) and (-ms-high-contrast: none) {
  .ie_sec3 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffeae2+0,ffffff+100 */
    background: #ffeae2;
    /* Old browsers */
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffeae2 0%, #ffffff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffeae2 0%, #ffffff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeae2', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */ }
  .ie_sec4 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,edf5ff+100 */
    background: #ffffff;
    /* Old browsers */
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #edf5ff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #edf5ff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#edf5ff', GradientType=0);
    /* IE6-9 */ }
  .ie_sec5 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#edf6ff+0,f3ffff+100 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#edf6ff+0,f0fbff+100 */
    background: #edf6ff;
    /* Old browsers */
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #edf6ff 0%, #f0fbff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #edf6ff 0%, #f0fbff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#edf6ff', endColorstr='#f0fbff', GradientType=0);
    /* IE6-9 */ }
  .ie_sec7 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1fcff+0,f3ffff+100 */
    background: #f1fcff;
    /* Old browsers */
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f1fcff 0%, #f3ffff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f1fcff 0%, #f3ffff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1fcff', endColorstr='#f3ffff', GradientType=0);
    /* IE6-9 */ }
  .section-3 .model2 .section-4-box .section-1-img {
    position: absolute;
    margin-top: 74px;
    left: 146px; }
  .section-4 .section-intro .section-tit .tit,
  .section-4 .data-item .item .name {
    color: #814BC4; } }

@media screen and (min-width: 1920px) and (max-width: 2559px) {
  .section-1::after {
    content: '';
    width: 100%;
    position: absolute;
    height: 60px;
    top: 0;
    z-index: 2;
    background-color: #fff; }
  .section-1 .kv-content {
    position: relative;
    width: 960px;
    height: 100%;
    margin: 0 auto; }
    .section-1 .kv-content .phone-img img {
      width: 100%;
      height: auto; }
    .section-1 .kv-content .phone-img.phone-top {
      top: 0; }
    .section-1 .kv-content .phone-img.phone-bottom {
      bottom: 0; }
    .section-1 .kv-content .line-top {
      position: absolute;
      z-index: -1;
      top: -2234px;
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
      left: 92px;
      border-radius: 49.9%;
      overflow: hidden; }
      .section-1 .kv-content .line-top .line-wrap {
        position: relative;
        width: 3200px;
        height: 3200px;
        overflow: hidden; }
      .section-1 .kv-content .line-top .circle-border {
        height: 100%;
        box-sizing: border-box;
        border: 428px solid #4A586F;
        border-radius: 50%; }
      .section-1 .kv-content .line-top .circle-border::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        top: 50%;
        left: 0;
        border: 428px solid #4A586F;
        border-top: transparent;
        border-radius: 0 0 50% 50% / 0 0 100% 100%;
        z-index: 2; }
      .section-1 .kv-content .line-top .mask-top, .section-1 .kv-content .line-top .mask-bottom {
        position: absolute;
        left: 0px;
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        background: #fff; }
      .section-1 .kv-content .line-top .mask-top {
        top: 0;
        z-index: 1;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom; }
      .section-1 .kv-content .line-top .mask-bottom {
        z-index: 3;
        top: 50%;
        -webkit-transform-origin: center top;
                transform-origin: center top; }
      .section-1 .kv-content .line-top .mask-hero {
        position: absolute;
        right: -500px;
        width: 50%;
        height: 100%;
        bottom: 190px;
        box-sizing: border-box;
        background: #fff;
        -webkit-transform: rotate(-30deg);
                transform: rotate(-30deg);
        z-index: 2; }
      .section-1 .kv-content .line-top.animate .mask-top {
        -webkit-animation: 1.5s top-back-half linear 1.5s;
                animation: 1.5s top-back-half linear 1.5s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards; }
      .section-1 .kv-content .line-top.animate .mask-bottom {
        -webkit-animation: 1.5s top-front-half linear;
                animation: 1.5s top-front-half linear;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards; }
    .section-1 .kv-content .line-bottom {
      position: absolute;
      z-index: -1;
      bottom: -1857px;
      right: 128px;
      -webkit-transform: rotate(-180deg);
              transform: rotate(-180deg);
      border-radius: 49.9%;
      overflow: hidden; }
      .section-1 .kv-content .line-bottom .line-wrap {
        position: relative;
        width: 2800px;
        height: 2800px;
        overflow: hidden; }
      .section-1 .kv-content .line-bottom .circle-border {
        height: 100%;
        box-sizing: border-box;
        border: 438px solid #FA7659;
        border-radius: 50%; }
      .section-1 .kv-content .line-bottom .circle-border::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        top: 50%;
        left: 0;
        border: 438px solid #FA7659;
        border-top: transparent;
        border-radius: 0 0 50% 50% / 0 0 100% 100%;
        z-index: 2; }
      .section-1 .kv-content .line-bottom .mask-top, .section-1 .kv-content .line-bottom .mask-bottom {
        position: absolute;
        left: 0px;
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        background: #fff; }
      .section-1 .kv-content .line-bottom .mask-top {
        top: 0;
        z-index: 1;
        -webkit-transform-origin: center bottom;
                transform-origin: center bottom; }
      .section-1 .kv-content .line-bottom .mask-bottom {
        z-index: 3;
        top: 50%;
        -webkit-transform-origin: center top;
                transform-origin: center top; }
      .section-1 .kv-content .line-bottom .mask-hero {
        position: absolute;
        left: -473px;
        width: 50%;
        height: 100%;
        top: 0;
        box-sizing: border-box;
        background: #fff;
        -webkit-transform: rotate(35deg);
                transform: rotate(35deg);
        z-index: 2; }
      .section-1 .kv-content .line-bottom.animate .mask-top {
        -webkit-animation: 1.5s bottom-back-half linear 1.5s;
                animation: 1.5s bottom-back-half linear 1.5s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards; }
      .section-1 .kv-content .line-bottom.animate .mask-bottom {
        -webkit-animation: 1.5s bottom-front-half linear;
                animation: 1.5s bottom-front-half linear;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards; }
    .section-1 .kv-content .kv-slogan .slogan-left {
      opacity: 0; }
      .section-1 .kv-content .kv-slogan .slogan-left svg {
        width: auto;
        height: 53px;
        margin-left: 0; }
    .section-1 .kv-content .kv-slogan .slogan-right {
      opacity: 0;
      font-size: 36px;
      margin-right: 0; }
  #contain ._scroll-animate-box::before {
    height: 2500px; }
  #contain ._animate-clip-wrap {
    height: 2500px; }
  #contain ._animate-clip {
    height: 2500px; }
  #contain .section-5-box .section-tit {
    top: 712px !important; }
  #contain .model3 .section-3-img {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@media screen and (min-width: 2560px) {
  .lg-none {
    display: none; }
  @-webkit-keyframes mymove-pc {
    from {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); }
    to {
      -webkit-transform: translateX(2290px);
      transform: translateX(2290px); } }
  @keyframes mymove-pc {
    from {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); }
    to {
      -webkit-transform: translateX(2290px);
      transform: translateX(2290px); } }
  @-webkit-keyframes mymove-pc-back {
    from {
      -webkit-transform: translateX(2290px);
      transform: translateX(2290px); }
    to {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); } }
  @keyframes mymove-pc-back {
    from {
      -webkit-transform: translateX(2290px);
      transform: translateX(2290px); }
    to {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw); } }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6,
  .section-beauty-picture-7,
  .section-beauty-picture-8 {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important; }
  .section-beauty-picture-1,
  .section-beauty-picture-2,
  .section-beauty-picture-3,
  .section-beauty-picture-4,
  .section-beauty-picture-5,
  .section-beauty-picture-6 {
    margin-top: -80px; }
  .section-beauty-picture-7 {
    margin-top: -40px; }
  .section-beauty-picture-8 {
    margin-top: 0; }
  #section-beauty-picture-1,
  #section-beauty-picture-2,
  #section-beauty-picture-3,
  #section-beauty-picture-4,
  #section-beauty-picture-5,
  #section-beauty-picture-6 {
    width: 320px;
    border-radius: 13px; }
  #section-beauty-picture-7 {
    width: 360px;
    border-radius: 13px; }
  #section-beauty-picture-8 {
    width: 400px;
    border-radius: 13px; }
  .section-4 .section-5-box {
    height: 100vh; }
    .section-4 .section-5-box .section-3-img {
      position: absolute;
      width: 100%;
      right: 0; }
      .section-4 .section-5-box .section-3-img .section-beauty-tit {
        position: relative;
        width: 280px;
        height: 100vh;
        left: 0; }
        .section-4 .section-5-box .section-3-img .section-beauty-tit .section-title {
          padding: 0;
          opacity: 1;
          width: 280px;
          font-size: 54px;
          line-height: 75px; }
  .wrapper {
    width: 1200px;
    margin: 0 auto; }
  .contain {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  ._scroll-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative; }
  ._scroll-animate-box {
    position: relative;
    z-index: 1; }
  ._scroll-animate-box::before {
    content: '';
    display: block;
    width: 100%;
    height: 3900px; }
  ._animate-clip-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    width: 90vw;
    height: 3900px;
    overflow: hidden;
    margin-left: -45vw;
    -webkit-transition: width .3s linear, margin-left .3s linear;
    transition: width .3s linear, margin-left .3s linear;
    border-radius: 20px;
    will-change: width, margin-left; }
    ._animate-clip-wrap.play {
      width: 100vw;
      margin-left: -50vw;
      -webkit-transition: width .3s linear, margin-left .3s linear;
      transition: width .3s linear, margin-left .3s linear; }
      ._animate-clip-wrap.play ._animate-bg {
        position: fixed;
        top: 0; }
  ._animate-clip {
    height: 3900px;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0); }
  ._animate-clip.play {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none; }
  ._animate-bg {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    left: 50%;
    margin-left: -50vw;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear;
    will-change: background-color; }
    ._animate-bg.beginCol {
      background-color: #fafafa;
      /* Old browsers */ }
  .bgC_s4 {
    position: absolute;
    top: 50%; }
  .section-beauty {
    height: 100vh;
    overflow: hidden; }
  .section-beauty-tit {
    color: #000;
    font-size: 30px;
    z-index: 9;
    position: absolute;
    left: 0%; }
    .section-beauty-tit .tit1 {
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit2 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit3 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
    .section-beauty-tit .tit4 {
      opacity: 0;
      top: 110vh;
      position: absolute; }
  .section-item .reno-options .options {
    margin-top: 92px; }
    .section-item .reno-options .options .data-purple {
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
      background: #3023ae;
      /* Old browsers */
      /* FF3.6-15 */
      background: -webkit-linear-gradient(to left top, #3023ae 0%, #c86dd7 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: -webkit-linear-gradient(left top, #3023ae 0%, #c86dd7 100%);
      background: linear-gradient(to right bottom, #3023ae 0%, #c86dd7 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3023ae', endColorstr='#c86dd7', GradientType=0);
      /* IE6-9 */
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
      box-shadow: 0 9px 27px 0 rgba(172, 34, 238, 0.33); }
    .section-item .reno-options .options .data-black {
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#343e45+0,343e45+100 */
      background: #425067;
      /* Old browsers */
      box-shadow: 0 9px 27px 0 rgba(47, 43, 61, 0.33); }
    .section-item .reno-options .options .option {
      display: inline-block;
      margin-right: 22px; }
      .section-item .reno-options .options .option .color-circle {
        margin-left: 4px;
        width: 30px;
        height: 30px;
        position: relative;
        border-radius: 50%; }
        .section-item .reno-options .options .option .color-circle .inner-circle {
          position: absolute;
          opacity: 0;
          top: 50%;
          left: 50%;
          width: 26px;
          height: 26px;
          margin-left: -13px;
          margin-top: -13px;
          border: 3px solid #fff;
          border-radius: 50%;
          padding: 2px;
          box-sizing: border-box;
          /* margin: auto; */
          -webkit-transition: opacity 0.2s ease;
          transition: opacity 0.2s ease; }
      .section-item .reno-options .options .option .name {
        opacity: 1;
        margin-top: 6px;
        font-size: 13px;
        line-height: 18px; }
  .data-item {
    margin-top: 50px; }
    .data-item .item {
      margin-bottom: 24px;
      vertical-align: top;
      display: inline-block;
      width: 50%; }
    .data-item .name {
      font-size: 40px;
      line-height: 55px; }
    .data-item .value {
      font-size: 18px;
      line-height: 26px;
      margin-top: 4px; }
  .section-intro {
    margin-top: 4vh;
    line-height: 26px; }
  @-webkit-keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @keyframes center1 {
    to {
      -webkit-transform: translateX(90px);
              transform: translateX(90px); } }
  @-webkit-keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  @keyframes center2 {
    to {
      -webkit-transform: translateY(360px);
              transform: translateY(360px); } }
  .section-1 {
    overflow: hidden;
    z-index: 1;
    position: relative;
    height: 1440px;
    background-color: #fff; }
    .section-1::after {
      content: '';
      width: 100%;
      position: absolute;
      height: 60px;
      top: 0;
      z-index: 2;
      background-color: #fff; }
    .section-1 .kv-content {
      position: relative;
      width: 1200px;
      height: 100%;
      margin: 0 auto; }
      .section-1 .kv-content .phone-img {
        position: absolute;
        width: 1335px;
        left: 50%; }
        .section-1 .kv-content .phone-img img {
          width: 100%;
          height: auto; }
        .section-1 .kv-content .phone-img.phone-top {
          top: 0;
          margin-left: -1000px; }
        .section-1 .kv-content .phone-img.phone-bottom {
          bottom: 0;
          margin-left: -486px; }
      .section-1 .kv-content .line-top {
        position: absolute;
        z-index: -1;
        top: -2540px;
        -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
        left: 0;
        border-radius: 49.9%;
        overflow: hidden; }
        .section-1 .kv-content .line-top .line-wrap {
          position: relative;
          width: 3600px;
          height: 3600px;
          overflow: hidden; }
        .section-1 .kv-content .line-top .circle-border {
          height: 100%;
          box-sizing: border-box;
          border: 518px solid #4A586F;
          border-radius: 50%; }
        .section-1 .kv-content .line-top .circle-border::before {
          content: '';
          position: absolute;
          display: block;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          top: 50%;
          left: 0;
          border: 518px solid #4A586F;
          border-top: transparent;
          border-radius: 0 0 50% 50% / 0 0 100% 100%;
          z-index: 2; }
        .section-1 .kv-content .line-top .mask-top, .section-1 .kv-content .line-top .mask-bottom {
          position: absolute;
          left: 0px;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          background: #fff; }
        .section-1 .kv-content .line-top .mask-top {
          top: 0;
          z-index: 1;
          -webkit-transform-origin: center bottom;
                  transform-origin: center bottom; }
        .section-1 .kv-content .line-top .mask-bottom {
          z-index: 3;
          top: 50%;
          -webkit-transform-origin: center top;
                  transform-origin: center top; }
        .section-1 .kv-content .line-top .mask-hero {
          position: absolute;
          right: -299px;
          width: 50%;
          height: 100%;
          bottom: 389px;
          box-sizing: border-box;
          background: #fff;
          -webkit-transform: rotate(-23deg);
                  transform: rotate(-23deg);
          z-index: 2; }
        .section-1 .kv-content .line-top.animate .mask-top {
          -webkit-animation: 1.5s top-back-half linear 1.5s;
                  animation: 1.5s top-back-half linear 1.5s;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
        .section-1 .kv-content .line-top.animate .mask-bottom {
          -webkit-animation: 1.5s top-front-half linear;
                  animation: 1.5s top-front-half linear;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
      .section-1 .kv-content .line-bottom {
        position: absolute;
        z-index: -1;
        bottom: -2466px;
        right: 0;
        -webkit-transform: rotate(-180deg);
                transform: rotate(-180deg);
        border-radius: 49.9%;
        overflow: hidden; }
        .section-1 .kv-content .line-bottom .line-wrap {
          position: relative;
          width: 3600px;
          height: 3600px;
          overflow: hidden; }
        .section-1 .kv-content .line-bottom .circle-border {
          height: 100%;
          box-sizing: border-box;
          border: 514px solid #FA7659;
          border-radius: 50%; }
        .section-1 .kv-content .line-bottom .circle-border::before {
          content: '';
          position: absolute;
          display: block;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          top: 50%;
          left: 0;
          border: 514px solid #FA7659;
          border-top: transparent;
          border-radius: 0 0 50% 50% / 0 0 100% 100%;
          z-index: 2; }
        .section-1 .kv-content .line-bottom .mask-top, .section-1 .kv-content .line-bottom .mask-bottom {
          position: absolute;
          left: 0px;
          width: 100%;
          height: 50%;
          box-sizing: border-box;
          background: #fff; }
        .section-1 .kv-content .line-bottom .mask-top {
          top: 0;
          z-index: 1;
          -webkit-transform-origin: center bottom;
                  transform-origin: center bottom; }
        .section-1 .kv-content .line-bottom .mask-bottom {
          z-index: 3;
          top: 50%;
          -webkit-transform-origin: center top;
                  transform-origin: center top; }
        .section-1 .kv-content .line-bottom .mask-hero {
          position: absolute;
          left: -486px;
          width: 50%;
          height: 100%;
          top: 0;
          box-sizing: border-box;
          background: #fff;
          -webkit-transform: rotate(24deg);
                  transform: rotate(24deg);
          z-index: 2; }
        .section-1 .kv-content .line-bottom.animate .mask-top {
          -webkit-animation: 1.5s bottom-back-half linear 1.5s;
                  animation: 1.5s bottom-back-half linear 1.5s;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
        .section-1 .kv-content .line-bottom.animate .mask-bottom {
          -webkit-animation: 1.5s bottom-front-half linear;
                  animation: 1.5s bottom-front-half linear;
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards; }
      .section-1 .kv-content .kv-slogan .slogan-left {
        opacity: 0; }
      .section-1 .kv-content .kv-slogan .slogan-right {
        opacity: 0;
        font-size: 67px;
        margin-right: -230px; }
  .section-2 {
    position: relative;
    z-index: 9;
    background-color: #fff; }
    .section-2 .section-2-picture {
      position: relative; }
      .section-2 .section-2-picture picture {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); }
      .section-2 .section-2-picture #finger-phone {
        opacity: 0; }
      .section-2 .section-2-picture #finger-finger {
        opacity: 0; }
      .section-2 .section-2-picture #finger-screen {
        opacity: 0; }
    .section-2 .model .section-2-title {
      color: #000;
      font-size: 54px; }
    .section-2 .model .section-2-description {
      color: #000;
      font-size: 18px; }
    .section-2 .model .camera-show {
      margin-left: 10px; }
    .section-2 .model .title2 {
      font-size: 32px; }
    .section-2 .section-1-box {
      position: relative;
      padding-top: 50px; }
      .section-2 .section-1-box .logo-show1 {
        position: absolute;
        vertical-align: middle;
        text-align: center;
        left: 33%; }
      .section-2 .section-1-box .tit_top {
        position: relative;
        text-align: center;
        font-size: 26px;
        line-height: 46px;
        margin-top: 158px;
        color: #333333; }
      .section-2 .section-1-box .tit_bottom {
        position: relative;
        text-align: center;
        font-size: 18px;
        line-height: 37px;
        margin-top: 50px;
        margin-bottom: 195px;
        color: #666666; }
  .section-3 {
    width: 100vw;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    .section-3 .section-1-box {
      position: relative; }
    .section-3 .model1 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 98px;
      padding-bottom: 1500px; }
      .section-3 .model1 .section-3-box {
        position: absolute;
        top: 240px; }
        .section-3 .model1 .section-3-box .phone-content {
          right: 0;
          position: fixed;
          height: 927px;
          width: 100%; }
          .section-3 .model1 .section-3-box .phone-content .section-1-img {
            position: absolute;
            height: 100%;
            right: 0;
            top: 300px; }
            .section-3 .model1 .section-3-box .phone-content .section-1-img img {
              width: 100%; }
      .section-3 .model1 .title-content {
        position: absolute;
        width: 440px;
        z-index: 2; }
      .section-3 .model1 .section-title {
        font-size: 50px;
        line-height: 75px; }
      .section-3 .model1 .section-intro {
        font-size: 18px;
        line-height: 30px; }
      .section-3 .model1 .section-item {
        margin-top: 42px; }
    .section-3 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-bottom: 480px; }
      .section-3 .model2 .section-4-box {
        position: relative; }
        .section-3 .model2 .section-4-box .section-title {
          font-size: 54px;
          line-height: 75px; }
        .section-3 .model2 .section-4-box .section-2-img {
          position: fixed;
          left: 0;
          margin-top: 256px; }
        .section-3 .model2 .section-4-box .section-1-img {
          position: fixed;
          left: 1206px;
          margin-top: 165px; }
          .section-3 .model2 .section-4-box .section-1-img.figure {
            margin-top: 218px;
            left: 1257px; }
        .section-3 .model2 .section-4-box .section-1-img:last-child {
          padding-left: 13px; }
        .section-3 .model2 .section-4-box .section-intro {
          font-size: 18px;
          line-height: 30px; }
      .section-3 .model2 .figure .f2 {
        top: -47px;
        left: -32px;
        width: 70px;
        -webkit-transform: translate3d(0, 10px, 0);
                transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure img {
        position: absolute; }
        .section-3 .model2 .figure img.f1 {
          width: 15px;
          left: -21px;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f3 {
          left: 0px;
          width: 7px;
          top: -5px;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model2 .figure img.f4 {
          left: 12px;
          width: 15px;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model2 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model2 .figure.start img.f2 {
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-3 .model2 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
        .section-3 .model2 .figure.start img.f3 {
          -webkit-transition-delay: .4s;
                  transition-delay: .4s; }
        .section-3 .model2 .figure.start img.f4 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
    .section-3 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 300px; }
      .section-3 .model3 .section-5-box {
        position: relative; }
        .section-3 .model3 .section-5-box .figure {
          top: -6px;
          position: absolute;
          left: 160px; }
        .section-3 .model3 .section-5-box .section-title {
          line-height: 75px;
          font-size: 54px; }
        .section-3 .model3 .section-5-box .section-intro {
          line-height: 30px;
          font-size: 18px; }
        .section-3 .model3 .section-5-box .section-3-img {
          vertical-align: middle;
          position: absolute;
          top: 30px;
          right: 0;
          text-align: center;
          -webkit-transform: translateX(50%);
                  transform: translateX(50%); }
        .section-3 .model3 .section-5-box .data-item {
          width: 50%;
          margin-top: 120px; }
          .section-3 .model3 .section-5-box .data-item .item {
            margin-bottom: 0px; }
          .section-3 .model3 .section-5-box .data-item .name {
            color: #FF8947; }
          .section-3 .model3 .section-5-box .data-item .value {
            font-size: 18px;
            line-height: 25px;
            margin-top: 6px; }
        .section-3 .model3 .section-5-box .section-tit {
          position: absolute;
          font-size: 54px;
          color: #333333;
          top: 900px;
          margin-top: 300px; }
          .section-3 .model3 .section-5-box .section-tit .figure {
            position: absolute;
            left: 322px;
            top: -13px; }
        .section-3 .model3 .section-5-box .section-4-Finger {
          position: absolute;
          bottom: 5%;
          left: 50%;
          -webkit-transform: translate(-50%) scale(0.4);
                  transform: translate(-50%) scale(0.4); }
        .section-3 .model3 .section-5-box .section-bot {
          font-size: 18px;
          line-height: 26px;
          text-align: left;
          margin-top: 34px; }
      .section-3 .model3 .figure img {
        position: absolute;
        width: 17px; }
        .section-3 .model3 .figure img.f1 {
          opacity: 0;
          width: 10px;
          left: -14px;
          top: -9px;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-3 .model3 .figure img.f3 {
          top: -1px;
          left: 3px;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
      .section-3 .model3 .figure.start img {
        will-change: transform;
        -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
        transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
        -webkit-transform: none;
                transform: none;
        opacity: 1; }
        .section-3 .model3 .figure.start img.f3 {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s; }
        .section-3 .model3 .figure.start img.f1 {
          -webkit-transition-delay: .2s;
                  transition-delay: .2s; }
  .section-4 {
    position: relative;
    width: 100vw;
    padding-top: 5vw; }
    .section-4 .section-title {
      font-size: 54px;
      line-height: 75px; }
    .section-4 .section-desc {
      width: 682px;
      white-space: pre-wrap; }
    .section-4 .section-intro {
      font-size: 18px;
      line-height: 30px; }
      .section-4 .section-intro .intro_cont {
        width: 700px; }
      .section-4 .section-intro .section-tit {
        position: relative; }
        .section-4 .section-intro .section-tit .tit {
          background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          -webkit-background-size: 200% 100%;
          /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
          font-size: 40px;
          line-height: 40px;
          position: absolute;
          left: 50%;
          top: -92px; }
    .section-4 .data-item {
      margin-top: 55px;
      width: 50%; }
      .section-4 .data-item .item {
        width: 50%; }
        .section-4 .data-item .item .name {
          font-size: 40px;
          line-height: 40px;
          background-image: -webkit-linear-gradient(top left, #5133B7, #6F42BF 25%, #814BC4 50%, #AA5ECF 75%, #C86DD7);
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          -webkit-background-size: 200% 100%; }
        .section-4 .data-item .item .value {
          font-size: 18px;
          line-height: 26px; }
    .section-4 .section-1-box {
      position: relative; }
    .section-4 .model1 {
      color: #333333;
      position: relative;
      z-index: 1; }
      .section-4 .model1 .section-4-box {
        position: relative; }
        .section-4 .model1 .section-4-box .section-1-img {
          text-align: center;
          width: 100%; }
        .section-4 .model1 .section-4-box .g-banner {
          margin-top: 42px;
          width: auto; }
          .section-4 .model1 .section-4-box .g-banner .button-group {
            display: none; }
          .section-4 .model1 .section-4-box .g-banner .image-wrapper {
            -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
            position: relative;
            height: 674px;
            border-radius: 13px;
            overflow: hidden; }
            .section-4 .model1 .section-4-box .g-banner .image-wrapper .photo {
              display: block;
              position: absolute;
              top: 0px;
              left: 0px; }
    .section-4 .model1_copy {
      padding-top: 110px; }
      .section-4 .model1_copy .status .bar {
        background-color: #fadcda; }
      .section-4 .model1_copy .inner-bar {
        background-color: #FF8947; }
    .section-4 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 110px; }
      .section-4 .model2 .section-4-box {
        position: relative; }
        .section-4 .model2 .section-4-box .section-1-img {
          text-align: center;
          width: 100%;
          height: 59.3vh; }
        .section-4 .model2 .section-4-box .figure {
          position: absolute;
          top: -0.3vw;
          left: -4.5vw; }
          .section-4 .model2 .section-4-box .figure img {
            position: absolute; }
            .section-4 .model2 .section-4-box .figure img.f1 {
              left: 18vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-4 .model2 .section-4-box .figure img.f2 {
              top: .3vw;
              left: 18.5vw;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-4 .model2 .section-4-box .figure.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-4 .model2 .section-4-box .figure.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-4 .model2 .section-4-box .figure.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
      .section-4 .model2 .section-title {
        font-size: 54px; }
      .section-4 .model2 .section-intro {
        font-size: 18px; }
        .section-4 .model2 .section-intro .section-tit {
          font-size: 28px;
          color: #333333;
          margin-top: 2vh; }
    .section-4 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 15vh; }
      .section-4 .model3 .section-5-box {
        position: relative; }
        .section-4 .model3 .section-5-box .section-title {
          font-size: 54px;
          color: #000; }
        .section-4 .model3 .section-5-box .section-intro {
          font-size: 18px; }
        .section-4 .model3 .section-5-box .section-3-img {
          vertical-align: middle;
          height: 100%;
          margin-left: 3vw; }
        .section-4 .model3 .section-5-box .section-tit {
          font-size: 54px;
          color: #333333;
          margin-top: 6vh; }
  .section-5 {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+0,f3ffff+100 */
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    position: relative; }
    .section-5 .section-1-box {
      position: relative; }
    .section-5 .model1 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 100px; }
      .section-5 .model1 .section-4-box {
        position: relative; }
        .section-5 .model1 .section-4-box .figure_on {
          position: absolute;
          top: -38px;
          left: 174px; }
          .section-5 .model1 .section-4-box .figure_on img {
            position: absolute; }
            .section-5 .model1 .section-4-box .figure_on img.f1 {
              width: 10px;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
            .section-5 .model1 .section-4-box .figure_on img.f2 {
              top: 12px;
              left: 17px;
              width: 17px;
              opacity: 0;
              -webkit-transform: translate3d(0, 10px, 0);
                      transform: translate3d(0, 10px, 0); }
          .section-5 .model1 .section-4-box .figure_on.start img {
            will-change: transform;
            -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
            transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
            -webkit-transform: none;
                    transform: none;
            opacity: 1; }
            .section-5 .model1 .section-4-box .figure_on.start img.f2 {
              -webkit-transition-delay: .6s;
                      transition-delay: .6s; }
            .section-5 .model1 .section-4-box .figure_on.start img.f1 {
              -webkit-transition-delay: .2s;
                      transition-delay: .2s; }
        .section-5 .model1 .section-4-box .section-1-img.start div.ram_top, .section-5 .model1 .section-4-box .section-1-img.start div.ram_bottom {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none; }
        .section-5 .model1 .section-4-box .img-gallery {
          width: 100vw;
          height: 910px;
          margin-top: 180px;
          overflow: hidden;
          position: relative;
          margin-bottom: 212px;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a {
            width: 2290px;
            height: 280px;
            margin-bottom: 15px;
            position: absolute;
            top: 0px;
            left: 0px;
            -webkit-animation: mymove-pc-back 24s linear infinite;
                    animation: mymove-pc-back 24s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-b {
            width: 2290px;
            height: 280px;
            margin-bottom: 15px;
            position: absolute;
            left: 0px;
            top: 346px;
            -webkit-animation: mymove-pc 30s linear infinite;
                    animation: mymove-pc 30s linear infinite; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a_2 {
            top: 420px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-aa {
            position: absolute;
            left: -2290px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-bb {
            position: absolute;
            left: -2290px; }
          .section-5 .model1 .section-4-box .img-gallery .img-content-a2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-a3,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b1,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b2,
          .section-5 .model1 .section-4-box .img-gallery .img-content-b3 {
            width: 446px;
            height: 280px;
            margin-right: 12px;
            border-radius: 5px;
            background-size: cover;
            background-position: center;
            display: inline-block; }
          .section-5 .model1 .section-4-box .img-gallery img {
            width: 446px; }
          .section-5 .model1 .section-4-box .img-gallery .md_none {
            display: none; }
        .section-5 .model1 .section-4-box .section-2-img {
          top: 54.4%;
          text-align: center;
          width: 100%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
          position: absolute;
          z-index: 2; }
          .section-5 .model1 .section-4-box .section-2-img .ram1 {
            width: 400px; }
        .section-5 .model1 .section-4-box .figure {
          position: absolute;
          top: -23vh;
          left: 18vw; }
        .section-5 .model1 .section-4-box .figure img {
          position: absolute; }
          .section-5 .model1 .section-4-box .figure img.f1 {
            opacity: 0;
            -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0); }
        .section-5 .model1 .section-4-box .figure.start img {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear;
          transition: transform 1.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.1s linear, -webkit-transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
      .section-5 .model1 .section-title {
        font-size: 54px; }
      .section-5 .model1 .section-intro {
        font-size: 18px; }
      .section-5 .model1 .section_box {
        margin-top: 0; }
    .section-5 .model2 {
      color: #333333;
      position: relative;
      z-index: 1;
      padding-top: 10px; }
      .section-5 .model2 .section-4-box {
        position: relative; }
        .section-5 .model2 .section-4-box .section-content {
          position: relative;
          width: 2560px;
          height: 500px;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
                  transform: translate(-50%, 0); }
        .section-5 .model2 .section-4-box .section-0-img {
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 70%; }
          .section-5 .model2 .section-4-box .section-0-img img {
            width: 100%; }
        .section-5 .model2 .section-4-box .section-1-img {
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 70%; }
          .section-5 .model2 .section-4-box .section-1-img img {
            width: 100%; }
        .section-5 .model2 .section-4-box .section-2-img {
          z-index: 1;
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          width: 70%; }
          .section-5 .model2 .section-4-box .section-2-img img {
            width: 100%;
            height: auto; }
        .section-5 .model2 .section-4-box .section-3-img {
          width: 70%;
          position: absolute;
          top: 100%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          z-index: 2; }
          .section-5 .model2 .section-4-box .section-3-img img {
            width: 100%;
            height: auto; }
        .section-5 .model2 .section-4-box .section-intro {
          top: 135%;
          left: 1206px;
          position: absolute;
          width: 546px;
          margin-top: 0 !important; }
        .section-5 .model2 .section-4-box .f1 {
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f5 {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) !important;
                  transform: translate(-50%, -50%) !important;
          opacity: 0;
          -webkit-transform: translate3d(0, 10px, 0);
                  transform: translate3d(0, 10px, 0); }
        .section-5 .model2 .section-4-box .f3 {
          opacity: 0;
          -webkit-transform: translate3d(120px, 0px, 0);
                  transform: translate3d(120px, 0px, 0); }
        .section-5 .model2 .section-4-box .f2 {
          opacity: 0;
          -webkit-transform: translate3d(-100px, 60px, 0px);
                  transform: translate3d(-100px, 60px, 0px); }
        .section-5 .model2 .section-4-box .f4 {
          opacity: 0;
          height: 78vh;
          -webkit-transform: translate3d(100px, -60px, 0);
                  transform: translate3d(100px, -60px, 0); }
        .section-5 .model2 .section-4-box .section-1-img.start .f3 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear;
          transition: transform 2.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 1s linear, -webkit-transform 2.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          -webkit-transition-delay: .5s;
                  transition-delay: .5s;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-3-img.start .f4 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-2-img.start .f2 {
          will-change: transform;
          -webkit-transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear;
          transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.5s 0.5s linear, -webkit-transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1; }
        .section-5 .model2 .section-4-box .section-0-img.start .f1 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1s;
                  transition-delay: 1s; }
        .section-5 .model2 .section-4-box .section-0-img.start .f5 {
          will-change: transform;
          -webkit-transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear;
          transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 1s 0.5s linear, -webkit-transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          -webkit-transition-delay: 1.2s;
                  transition-delay: 1.2s; }
      .section-5 .model2 .section-title {
        font-size: 54px;
        top: -350px;
        position: relative;
        margin-top: 150px; }
      .section-5 .model2 .section-intro {
        font-size: 18px; }
    .section-5 .model3 {
      color: #333333;
      position: relative;
      z-index: 1;
      margin-top: 450px; }
      .section-5 .model3 .section-5-box {
        position: relative; }
        .section-5 .model3 .section-5-box .section-title {
          font-size: 54px; }
        .section-5 .model3 .section-5-box .section-intro {
          font-size: 18px;
          width: 874px; }
        .section-5 .model3 .section-5-box .section-1-img {
          margin-top: 54px;
          margin-bottom: 107px;
          vertical-align: middle;
          text-align: center; }
          .section-5 .model3 .section-5-box .section-1-img .nfc_1 {
            width: 1816px;
            position: relative;
            left: 17%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%); }
        .section-5 .model3 .section-5-box .section-tit {
          font-size: 54px;
          color: #333333;
          margin-top: 50px; }
  .section-6 {
    position: relative;
    z-index: 1;
    color: #333333; }
    .section-6 .section-1-box {
      position: relative; }
    .section-6 .model1 {
      z-index: 1; }
      .section-6 .model1 .section-4-box {
        position: absolute;
        z-index: 9;
        width: 100%; }
      .section-6 .model1 .section-1-img {
        width: 100%; }
        .section-6 .model1 .section-1-img .sec6-bg {
          width: 100vw;
          left: 50%;
          position: relative;
          margin-left: -50vw; }
      .section-6 .model1 .section-6-title {
        color: #fff;
        position: absolute;
        padding-top: 361px; }
      .section-6 .model1 .section-title {
        font-size: 54px; }
      .section-6 .model1 .section-intro {
        width: 384px;
        font-size: 18px; }
  .section-7 {
    position: relative;
    z-index: 1;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */ }
    .section-7 .section-1-box {
      position: relative; }
    .section-7 .model1 {
      z-index: 1; }
      .section-7 .model1 .section-7-box {
        position: relative; }
        .section-7 .model1 .section-7-box .section-1-img {
          position: relative;
          margin: 120px 0;
          text-align: center; }
        .section-7 .model1 .section-7-box .section-7-title {
          color: #333;
          position: relative;
          padding-top: 10vh; }
          .section-7 .model1 .section-7-box .section-7-title .section-intro {
            color: #666; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .data-item .item {
              width: 33.3%;
              line-height: 62px; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .name {
              background-image: -webkit-linear-gradient(top left, #495368, #343A48 25%, #2D323D 50%, #1F2228 75%, #0D0D0D);
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              -webkit-background-size: 200% 100%; }
            .section-7 .model1 .section-7-box .section-7-title .section-intro .comment {
              font-size: 12px;
              line-height: 26px;
              margin-top: 18px; }
        .section-7 .model1 .section-7-box .dolby-content {
          position: relative; }
        .section-7 .model1 .section-7-box .container {
          left: 0; }
        .section-7 .model1 .section-7-box .container-right {
          left: 70%; }
        .section-7 .model1 .section-7-box .circle-wave-container {
          position: absolute;
          z-index: -1;
          top: 70%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
          .section-7 .model1 .section-7-box .circle-wave-container .circle-wave {
            margin: 0 12vw;
            height: 600px;
            -webkit-transform: rotateX(60deg);
                    transform: rotateX(60deg); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle {
              position: absolute;
              border: 4px solid rgba(121, 123, 228, 0.45);
              border-radius: 50%;
              width: 400px;
              height: 300px;
              left: -50%;
              -webkit-transform: translateX(-50%);
                      transform: translateX(-50%); }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.first {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.second {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite;
              -webkit-animation-delay: 0.8s;
                      animation-delay: 0.8s; }
            .section-7 .model1 .section-7-box .circle-wave-container .circle-wave .circle.left.third {
              -webkit-animation: circle-waving-left 2.4s linear infinite;
                      animation: circle-waving-left 2.4s linear infinite;
              -webkit-animation-delay: 1.6s;
                      animation-delay: 1.6s; }
        .section-7 .model1 .section-7-box .section-7-content {
          position: relative;
          overflow: hidden;
          vertical-align: middle;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%);
                  transform: translate(-50%); }
          .section-7 .model1 .section-7-box .section-7-content .img-dolby {
            width: 1150px; }
          .section-7 .model1 .section-7-box .section-7-content .section-7-dolby {
            position: absolute;
            left: 9%;
            top: -25%;
            -webkit-perspective: 630px;
                    perspective: 630px;
            z-index: -1;
            width: 1079px; }
            .section-7 .model1 .section-7-box .section-7-content .section-7-dolby img {
              display: block;
              width: 1110px;
              height: 286px;
              border-radius: 8% 6% 10% 10%;
              -webkit-transform-origin: bottom center;
                      transform-origin: bottom center;
              position: absolute;
              -webkit-transform: rotateX(57deg) skewX(-1deg);
                      transform: rotateX(57deg) skewX(-1deg); }
      .section-7 .model1 .section-title {
        font-size: 54px; }
      .section-7 .model1 .section-intro {
        font-size: 18px; }
    .section-7 .model2 {
      z-index: 1; }
      .section-7 .model2 .section-7-box {
        position: relative; }
        .section-7 .model2 .section-7-box .tit-content {
          color: #666; }
        .section-7 .model2 .section-7-box .section-2-img {
          margin-top: 8vh;
          text-align: center;
          width: 100%; }
        .section-7 .model2 .section-7-box .section-7-title {
          color: #333333;
          position: relative;
          padding-top: 10vh; }
        .section-7 .model2 .section-7-box .tit_bottom {
          height: 357px;
          width: 1200px;
          line-height: 69px;
          margin-top: 150px;
          padding-top: 63px;
          padding-bottom: 87px;
          margin-bottom: 87px;
          text-align: center;
          font-size: 26px;
          left: 0%;
          top: -110px;
          position: relative;
          background-color: #fff;
          border-radius: 13px; }
          .section-7 .model2 .section-7-box .tit_bottom .opcTit {
            height: 69px;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            padding-left: 14%; }
            .section-7 .model2 .section-7-box .tit_bottom .opcTit .tit {
              opacity: 0;
              color: #000;
              display: block;
              width: 100%;
              position: absolute; }
        .section-7 .model2 .section-7-box .section-2-Breeno {
          position: absolute;
          left: 26%;
          top: 134%; }
          .section-7 .model2 .section-7-box .section-2-Breeno #section-2-Breeno {
            z-index: 3;
            position: absolute;
            left: 50%;
            top: 116px;
            -webkit-transform: translate(-50%, -50%) scale(1.2);
                    transform: translate(-50%, -50%) scale(1.2); }
      .section-7 .model2 .section-title {
        font-size: 54px; }
      .section-7 .model2 .section-intro {
        font-size: 18px;
        line-height: 30px;
        width: 606px; }
        .section-7 .model2 .section-intro .g-parameter .g-link-button .more {
          margin-left: 2px;
          position: absolute;
          top: 3px; }
  .section-8 {
    position: relative;
    z-index: 1;
    background: #fff; }
    .section-8 .model1 {
      color: #000000;
      z-index: 1;
      padding-top: 90px;
      padding-bottom: 90px;
      background-color: #fff; }
      .section-8 .model1 .section-8-box {
        position: relative; }
        .section-8 .model1 .section-8-box .section-8-title {
          color: #fff;
          position: relative;
          padding-top: 10vh; }
      .section-8 .model1 .section-title {
        font-size: 54px; }
      .section-8 .model1 .section-intro {
        font-size: 18px; }
      .section-8 .model1 #reserve,
      .section-8 .model1 #serve {
        width: 100%; }
      .section-8 .model1 .section .panel_md {
        margin-left: 22px !important; }
      .section-8 .model1 .section .panel {
        padding: 36px 25px 45px 25px;
        margin: auto;
        margin-bottom: 24px;
        border-radius: 13px;
        background-color: #fff;
        box-shadow: 0 2px 25px 0 rgba(223, 223, 223, 0.5);
        width: 44.9%;
        vertical-align: middle;
        display: inline-block; }
        .section-8 .model1 .section .panel .image-wrapper {
          margin: auto;
          width: 112px;
          height: 112px; }
          .section-8 .model1 .section .panel .image-wrapper .logo {
            width: 100%;
            height: 100%; }
            .section-8 .model1 .section .panel .image-wrapper .logo .lazyload {
              width: 100%;
              height: 100%; }
        .section-8 .model1 .section .panel .title {
          font-size: 28px;
          line-height: 30px;
          margin-top: 30px;
          text-align: center; }
        .section-8 .model1 .section .panel .description {
          font-size: 16px;
          line-height: 24px;
          margin-top: 30px;
          text-align: center;
          color: #666666; }
          .section-8 .model1 .section .panel .description div {
            height: 24px; }
        .section-8 .model1 .section .panel .description_01 {
          padding: 0 190px; }
        .section-8 .model1 .section .panel a {
          color: #333;
          text-decoration: none;
          cursor: pointer;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
        .section-8 .model1 .section .panel .g-link-button {
          margin-top: 30px;
          text-align: center;
          font-size: 22px;
          line-height: 30px; }
          .section-8 .model1 .section .panel .g-link-button .more {
            margin-left: 3px;
            position: absolute;
            top: 6px; }
      .section-8 .model1 .section .panel_1 {
        margin-bottom: 102px; }
      .section-8 .model1 .section .panel_2 {
        padding: 55px 45px 100px 45px;
        width: auto; }
      .section-8 .model1 .section .g-parameter {
        padding: 40px 13px 0 13px;
        text-align: center;
        width: 100%; }
        .section-8 .model1 .section .g-parameter .item {
          margin-bottom: 24px;
          vertical-align: top;
          display: inline-block;
          width: 16%; }
          .section-8 .model1 .section .g-parameter .item .name {
            color: #666;
            font-size: 28px;
            line-height: 26px;
            text-align: center; }
          .section-8 .model1 .section .g-parameter .item .value {
            color: #666;
            margin-top: 3px;
            text-align: center;
            line-height: 26px;
            font-size: 14px; }
  .section-9 {
    position: relative;
    z-index: 1;
    background-color: #f5f5f5; }
    .section-9 #remarks {
      background-color: #f5f5f5; }
      .section-9 #remarks .content {
        padding-top: 50px;
        padding-bottom: 41px; }
        .section-9 #remarks .content .description {
          margin-top: 0px;
          font-size: 11px;
          line-height: 17px;
          letter-spacing: 0.40px;
          color: #666666; }
          .section-9 #remarks .content .description div {
            margin-bottom: 18px; }
  #oc-footer {
    background: #ffffff; } }

.fw {
  color: #fff !important; }

.none {
  display: none; }

.ram-image {
  width: 100vw;
  margin-top: 20vh;
  overflow: hidden;
  position: relative;
  margin-bottom: 20vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }
  .ram-image img {
    width: 100vw !important;
    height: auto !important; }

.renoz-section-title,
.section-desc,
.renoz-section-intro,
.intro-text,
.description,
.renoz-btn,
.name, .value,
.renoz-intro, .slogan-text,
.weight-content, .weight-value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; }

#contain .model3 .item .name {
  font-weight: 600; }

@media screen and (min-width: 768px) and (max-width: 1080px) {
  #section-1 .phone-img {
    margin-top: 10vw; } }

@media screen and (min-width: 768px) and (max-width: 1279px) {
  @vm_base : 2560;
  html, body {
    z-index: -100 !important; }
  .sm_dis {
    display: block !important; }
  .xs_dis, .md_dis, .lg_dis {
    display: none; }
  .wrapper {
    width: 51.5625vw;
    min-width: 600px;
    margin: 0 auto; }
  .renoz-section-title {
    font-size: 40px;
    line-height: 58px;
    white-space: nowrap;
    font-weight: 600; }
  .section-desc {
    font-size: 18px;
    line-height: 30px; }
  .renoz-section-intro {
    margin-top: 0.9375vw;
    font-size: 14px;
    line-height: 24px;
    color: #666;
    width: 43.35938vw; }
  .section-1 {
    overflow: hidden;
    z-index: 1;
    position: relative;
    background-color: #fff;
    margin-top: -100px; }
    .section-1::after {
      content: "";
      width: 100%;
      position: absolute;
      height: 60px;
      top: 0;
      z-index: 2;
      background-color: #fff; }
    .section-1 .kv-content {
      width: 82.42188vw;
      min-width: 600px;
      height: 73.28125vw;
      min-height: 860px;
      margin: 0 7.73438vw 5.85938vw 9.84375vw; }
      .section-1 .kv-content .phone-img {
        display: inline-block;
        position: relative;
        margin-top: 11.71875vw; }
        .section-1 .kv-content .phone-img img {
          width: 100%;
          height: auto; }
        .section-1 .kv-content .phone-img.phone-top {
          width: 42.96875vw; }
        .section-1 .kv-content .phone-img.phone-bottom {
          width: 31.48437vw;
          margin-left: 4.6875vw;
          vertical-align: middle; }
      .section-1 .kv-content .slogan-text {
        font-size: 2.42188vw;
        font-weight: 600;
        text-align: center; }
      .section-1 .kv-content .renoz-intro {
        width: 51.5625vw;
        min-width: 600px;
        text-align: left;
        margin: 0 auto; }
      .section-1 .kv-content .intro-text {
        font-size: 12px;
        line-height: 24px; }
      .section-1 .kv-content .slogan {
        margin: 6.5625vw 0 2.34375vw; }
  #contain .option {
    margin-left: 3.98437vw; }
    #contain .option:hover {
      cursor: pointer; }
  #contain .color-circle {
    margin: auto; }
  #contain .section-5-box .data-item {
    margin-top: 2.34375vw; }
  #contain .section-5-box .item {
    width: 100%;
    margin-top: 2.14844vw; }
    #contain .section-5-box .item .name {
      font-size: 24px; }
    #contain .section-5-box .item .value {
      font-size: 14px;
      color: #666; }
  #contain .section-5-box .renoz-section-intro {
    width: 500px; }
  #contain .section-5-box .section-tit {
    top: 640px; }
  #section4 .data-item {
    width: 100%;
    margin-top: 4.6875vw; }
  #section4 .item {
    width: 24.2%; }
  #section4 .item:nth:nth-child(3) {
    width: 24%; }
  #section4 .name {
    font-size: 24px;
    font-weight: 600; }
  #section4 .value {
    font-size: 14px;
    color: #666; }
  #section4 .section-4-box .renoz-section-intro {
    width: 100%; }
  #section4 .renoz-section-intro {
    width: 280px; }
  #section4 .picture-padding {
    min-width: 17.57812vw;
    text-align: center; }
  #section4 .section-5-box .section-3-img .picture-padding {
    width: 280px; }
  #section4 .model1-content {
    margin-top: 30px; }
  .section-5 {
    z-index: 100; }
    .section-5 .section-block {
      height: 380px; }
    .section-5 .model2 .renoz-section-intro {
      width: 46.875vw; }
  .section-7 {
    padding-top: 200px; }
    .section-7 .section-7-box .renoz-section-intro {
      width: 600px; }
    .section-7 .name {
      font-weight: 600;
      margin-left: 150px;
      width: 280px; }
    .section-7 .data-item .item {
      vertical-align: middle;
      line-height: 44px; }
    .section-7 .data-item .name {
      line-height: 44px; }
  .section-8 .section-1-img {
    width: 100vw;
    left: 50%;
    height: auto;
    position: relative;
    margin-left: -50vw;
    margin-top: -500px; }
  .section-8 .section-4-box {
    position: relative;
    width: 476px;
    height: 500px;
    top: 10vh;
    z-index: 2; }
  .section-8 .renoz-section-intro {
    width: 456px; }
  .section-8 .model1 {
    padding: 0 !important; }
  .section-8 .renoz-btn {
    display: inline-block;
    padding: 0 20px;
    height: 44px;
    line-height: 38px;
    border-radius: 30px;
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 16px;
    margin-top: 84px; }
  .section-8 .weight {
    margin-top: 80px; }
  .section-8 .weight-left, .section-8 .weight-right {
    display: inline-block;
    margin-top: 20px; }
  .section-8 .weight-left {
    margin-right: 70px; }
  .section-8 .weight-content {
    font-size: 12px;
    line-height: 22px; }
  .section-8 .weight-value {
    font-size: 24px;
    line-height: 38px;
    margin-top: 8px;
    color: #FFB100; }
    .section-8 .weight-value .sec6-bg {
      width: 9px;
      height: 12px;
      vertical-align: super; }
  .section-9 {
    background-color: #eff9ff; }
    .section-9 #remarks {
      background-color: #eff9ff; } }

@media screen and (min-width: 1280px) and (max-width: 2559px) {
  @vm_base : 2560;
  html, body {
    z-index: -100 !important; }
  .md_dis {
    display: block !important; }
  .xs_dis, .sm_dis, .lg_dis {
    display: none; }
  .wrapper {
    width: 51.5625vw;
    min-width: 960px;
    margin: 0 auto; }
  .renoz-section-title {
    font-size: 40px;
    line-height: 58px;
    white-space: nowrap;
    font-weight: 600; }
  .section-desc {
    font-size: 18px;
    line-height: 30px; }
  .renoz-section-intro {
    margin-top: 0.9375vw;
    font-size: 14px;
    line-height: 24px;
    color: #666;
    width: 43.35938vw; }
  .section-1 {
    overflow: hidden;
    z-index: 1;
    position: relative;
    background-color: #fff; }
    .section-1::after {
      content: "";
      width: 100%;
      position: absolute;
      height: 60px;
      top: 0;
      z-index: 2;
      background-color: #fff; }
    .section-1 .kv-content {
      width: 82.42188vw;
      min-width: 960px;
      height: 65.46875vw;
      margin: 0 7.73438vw 5.85938vw 9.84375vw; }
      .section-1 .kv-content .phone-img {
        display: inline-block; }
        .section-1 .kv-content .phone-img img {
          width: 100%;
          height: auto;
          margin-top: 7.8125vw; }
        .section-1 .kv-content .phone-img.phone-top {
          width: 45.70312vw; }
        .section-1 .kv-content .phone-img.phone-bottom {
          width: 31.48437vw;
          margin-left: 4.76562vw;
          vertical-align: middle; }
      .section-1 .kv-content .slogan-text {
        font-size: 2.42188vw;
        font-weight: 600;
        text-align: center; }
      .section-1 .kv-content .renoz-intro {
        width: 51.5625vw;
        min-width: 960px;
        text-align: left;
        margin: 0 auto; }
      .section-1 .kv-content .intro-text {
        font-size: 1.01562vw;
        line-height: 1.79687vw; }
      .section-1 .kv-content .slogan {
        margin: 6.5625vw 0 2.34375vw; }
  #contain .option {
    margin-left: 3.98437vw; }
    #contain .option:hover {
      cursor: pointer; }
  #contain .color-circle {
    margin: auto; }
  #contain .section-5-box .data-item {
    margin-top: 2.34375vw; }
  #contain .section-5-box .item {
    width: 100%;
    margin-top: 2.14844vw; }
    #contain .section-5-box .item .name {
      font-size: 24px; }
    #contain .section-5-box .item .value {
      font-size: 14px;
      color: #666; }
  #contain .section-5-box .renoz-section-intro {
    width: 500px; }
  #contain .section-5-box .section-tit {
    top: 660px; }
  #section4 .data-item {
    width: 100%;
    margin-top: 4.6875vw; }
  #section4 .item {
    width: 24.2%; }
  #section4 .name {
    font-size: 24px;
    font-weight: 600; }
  #section4 .value {
    font-size: 14px;
    color: #666; }
  #section4 .section-4-box .renoz-section-intro {
    width: 100%; }
  #section4 .renoz-section-intro {
    width: 450px; }
  #section4 .picture-padding {
    min-width: 17.57812vw;
    text-align: center; }
  #section4 .section-5-box .section-3-img .picture-padding {
    width: 340px; }
  #section4 .model1-content {
    margin-top: 40px; }
  .section-5 {
    z-index: 100; }
    .section-5 .section-block {
      height: 380px; }
  .section-7 {
    padding-top: 200px; }
    .section-7 .section-7-box .renoz-section-intro {
      width: 800px; }
    .section-7 .name {
      font-weight: 600;
      margin-left: 150px;
      width: 280px; }
  .section-8 .section-1-img {
    width: 100vw;
    left: 50%;
    height: auto;
    position: relative;
    margin-left: -50vw;
    margin-top: -500px; }
  .section-8 .section-4-box {
    position: relative;
    width: 456px;
    height: 500px;
    top: 150px;
    z-index: 2; }
  .section-8 .renoz-section-intro {
    width: 456px; }
  .section-8 .model1 {
    padding: 0 !important; }
  .section-8 .renoz-btn {
    display: inline-block;
    padding: 0 30px;
    height: 44px;
    line-height: 38px;
    border-radius: 30px;
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 16px;
    margin-top: 84px; }
  .section-8 .weight {
    margin-top: 80px; }
  .section-8 .weight-left, .section-8 .weight-right {
    display: inline-block;
    margin-top: 20px; }
  .section-8 .weight-left {
    margin-right: 46px; }
  .section-8 .weight-content {
    font-size: 12px;
    line-height: 22px; }
  .section-8 .weight-value {
    font-size: 24px;
    line-height: 38px;
    margin-top: 8px;
    color: #FFB100; }
    .section-8 .weight-value .sec6-bg {
      width: 9px;
      height: 12px;
      vertical-align: super; }
  .section-9 {
    background-color: #eff9ff; }
    .section-9 #remarks {
      background-color: #eff9ff; } }

@media screen and (max-width: 767px) {
  @vm_base : 1080;
  .lg_dis, .sm_dis, .md_dis {
    display: none; }
  .xs_dis {
    display: block !important; }
  .wrapper {
    margin: 0 auto;
    text-align: center; }
  .renoz-section-title {
    font-size: 5vw;
    line-height: 7.40741vw;
    font-weight: 600; }
  .section-desc {
    font-size: 2.40741vw;
    line-height: 4.25926vw; }
  .renoz-section-intro {
    font-size: 2.40741vw;
    line-height: 4.25926vw;
    color: #666;
    margin: 4.62963vw auto 0; }
  #section-1 {
    margin-top: 37.03704vw;
    height: 148.14815vw;
    margin-top: 0; }
    #section-1 .kv-content {
      margin: 0 auto;
      height: 111.11111vw; }
    #section-1 .phone-top {
      width: 59.25926vw;
      height: 77.77778vw;
      margin: 0 auto;
      left: 50%;
      top: 52px;
      margin-left: -29.62963vw; }
    #section-1 .phone-bottom {
      width: 100vw;
      left: 0;
      text-align: center;
      vertical-align: middle; }
      #section-1 .phone-bottom picture {
        display: inline-block;
        width: 55.74074vw; }
    #section-1 .slogan-text {
      font-size: 4.25926vw;
      font-weight: 600;
      text-align: center; }
    #section-1 .intro-text {
      position: absolute;
      top: 108%;
      left: 50%;
      margin-left: -43.14815vw;
      width: 86.2037vw;
      text-align: center;
      font-size: 2.40741vw;
      line-height: 4.25926vw; }
  #contain {
    height: 425.92593vw; }
    #contain ._animate-clip-wrap, #contain ._animate-clip {
      height: 425.92593vw; }
    #contain .model1 {
      padding-top: 14.81481vw;
      height: 151.66667vw; }
      #contain .model1 .section-1-img {
        margin-top: 14.81481vw;
        right: -16%; }
      #contain .model1 .section-1-img img {
        width: 84%; }
    #contain .section-3-box .renoz-section-intro {
      width: 61.11111vw; }
    #contain .section-item.xs_dis {
      margin-top: 75vw; }
    #contain .option {
      margin-right: 9.44444vw; }
    #contain .option .color-circle {
      margin: 0 auto; }
    #contain .model2 {
      height: 90.74074vw; }
      #contain .model2 .renoz-section-intro {
        width: 68.51852vw; }
      #contain .model2 .section-2-img {
        margin-top: 21.48148vw;
        width: 89.62963vw; }
        #contain .model2 .section-2-img img {
          width: 89.62963vw;
          height: 26.75926vw; }
    #contain .model3 {
      height: 185.18519vw; }
      #contain .model3 .section-desc {
        width: 71.66667vw;
        margin: 0 auto; }
      #contain .model3 .data-item {
        position: absolute;
        top: 53.7037vw;
        left: 10vw;
        width: 57.40741vw; }
      #contain .model3 .item {
        width: 100%;
        margin-bottom: 6.01852vw;
        text-align: left; }
        #contain .model3 .item .name {
          font-size: 3.33333vw; }
        #contain .model3 .item .value {
          font-size: 1.66667vw;
          color: #666; }
      #contain .model3 .section-3-img {
        position: absolute;
        top: 18.33333vw;
        right: 0;
        width: 41.2963vw;
        -webkit-transform: translateX(0);
                transform: translateX(0); }
      #contain .model3 .section-3-img .screen_1 {
        width: 41.2963vw;
        height: 86.2963vw; }
      #contain .model3 .section-tit {
        margin-top: 129.62963vw; }
        #contain .model3 .section-tit .renoz-section-intro {
          width: 58.7037vw; }
  #section4 .renoz-section-intro {
    width: 72.96296vw; }
  #section4 .data-item {
    width: 90%;
    margin: 9.25926vw auto 0; }
    #section4 .data-item .name {
      font-size: 3.33333vw;
      line-height: 4.62963vw; }
    #section4 .data-item .value {
      font-size: 1.66667vw;
      line-height: 2.96296vw; }
  #section4 .section-5-box .section-3-img {
    width: 100%;
    position: absolute;
    right: 0; }
  #section4 .section-5-box .picture-padding {
    text-align: center; }
  #section4 .section-5-box .picture-padding img {
    width: 33.14815vw !important;
    height: auto; }
  #section4 .section-beauty-tit {
    width: 51.11111vw;
    left: 5%;
    text-align: left; }
    #section4 .section-beauty-tit .renoz-section-intro {
      width: 45.55556vw;
      margin: 4.62963vw 0 0; }
  #section4 .section-title {
    width: 45.55556vw;
    color: #333;
    text-shadow: none; }
  #section4 .model1-content {
    margin-top: 20px; }
  .section-5 .model1 {
    height: 198.33333vw; }
  .section-5 .renoz-section-intro {
    width: 75.92593vw; }
  .section-5 .model2 .section-content {
    height: 74.07407vw; }
  .section-7 .renoz-section-intro {
    width: 77.59259vw; }
  .section-7 .name {
    font-size: 3.7037vw !important;
    font-weight: 600; }
  .section-7 .section-7-dolby {
    position: absolute;
    left: 2%;
    top: -23%;
    -webkit-perspective: 50vw;
    perspective: 50vw;
    z-index: -1;
    width: 95vw; }
    .section-7 .section-7-dolby img {
      display: block;
      width: 95vw;
      height: 24vw;
      border-radius: 8% 6% 10% 10%;
      -webkit-transform-origin: bottom center;
              transform-origin: bottom center;
      position: absolute;
      -webkit-transform: rotateX(57deg) skewX(0deg);
              transform: rotateX(57deg) skewX(0deg); }
  .section-8 .model1 {
    position: relative; }
  .section-8 .section-4-box {
    position: absolute;
    left: 11.85185vw;
    top: 11.85185vw;
    z-index: 2; }
    .section-8 .section-4-box .section-6-title {
      text-align: left; }
    .section-8 .section-4-box .renoz-section-intro {
      width: 59.25926vw;
      margin: 4.62963vw 0 0; }
  .section-8 .section-1-img {
    width: 100vw;
    left: 50%;
    height: auto;
    position: relative;
    margin-left: -50vw;
    margin-top: -18.51852vw; }
  .section-8 .weight-left, .section-8 .weight-right {
    margin-top: 5.55556vw; }
  .section-8 .weight-content {
    font-size: 1.85185vw;
    line-height: 3.14815vw; }
  .section-8 .weight-value {
    font-size: 2.96296vw;
    line-height: 4.44444vw;
    color: #FFB100; }
    .section-8 .weight-value .sec6-bg {
      width: 1.11111vw;
      height: 1.48148vw;
      vertical-align: super; }
  .section-8 .renoz-btn {
    display: inline-block;
    text-align: center;
    padding: 0 2.77778vw;
    height: 5.55556vw;
    line-height: 5vw;
    border-radius: 3.51852vw;
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 2.22222vw;
    margin-top: 5.92593vw; }
  .section-8 .game-btn {
    margin-top: 12.22222vw; }
  .section-8.section-8-game .renoz-section-intro {
    width: 32.59259vw !important;
    min-width: 280px; }
  .section-8.section-8-game .renoz-btn {
    margin-top: 4.07407vw; }
  .section-9 .content {
    width: 87.96296vw;
    margin: 0 auto;
    text-align: left;
    font-size: 1.2963vw;
    line-height: 1.85185vw; } }

@media screen and (min-width: 2560px) {
  .lg_dis {
    display: block !important; }
  .xs_dis, .md_dis, .sm_dis {
    display: none; }
  .wrapper {
    width: 1336px;
    margin: 0 auto; }
  .renoz-section-title {
    font-size: 54px;
    line-height: 78px;
    white-space: nowrap;
    font-weight: 600; }
  .section-desc {
    font-size: 25px;
    line-height: 40px;
    white-space: nowrap; }
  .renoz-section-intro {
    margin-top: 24px;
    font-size: 18px;
    line-height: 30px;
    color: #666;
    width: 1110px; }
  .section-1 {
    overflow: hidden;
    z-index: 1;
    position: relative;
    background-color: #fff;
    height: 1876px; }
    .section-1::after {
      content: "";
      width: 100%;
      position: absolute;
      height: 60px;
      top: 0;
      z-index: 2;
      background-color: #fff; }
    .section-1 .kv-content {
      width: 2110px;
      height: 1876px;
      margin: 0 auto; }
      .section-1 .kv-content .phone-img {
        display: inline-block;
        position: relative; }
        .section-1 .kv-content .phone-img img {
          width: 100%;
          height: auto;
          margin-top: 200px; }
        .section-1 .kv-content .phone-img.phone-top {
          width: 1180px; }
        .section-1 .kv-content .phone-img.phone-bottom {
          width: 806px;
          margin-left: 122px;
          vertical-align: middle; }
      .section-1 .kv-content .slogan-text {
        font-size: 63px;
        font-weight: 600;
        text-align: center; }
      .section-1 .kv-content .renoz-intro {
        width: 1336px;
        text-align: left;
        margin: 0 auto; }
      .section-1 .kv-content .intro-text {
        font-size: 26px;
        line-height: 46px; }
      .section-1 .kv-content .slogan {
        margin: 168px 0 60px; }
  #contain .option {
    margin-left: 102px; }
    #contain .option:hover {
      cursor: pointer; }
  #contain .color-circle {
    margin: auto; }
  #contain .section-2-img .design_1 {
    width: 1887px; }
  #contain .section-5-box .data-item {
    margin-top: 60px; }
  #contain .section-5-box .item {
    width: 100%;
    margin-top: 55px; }
    #contain .section-5-box .item .name {
      font-size: 24px; }
    #contain .section-5-box .item .value {
      font-size: 14px;
      color: #666; }
  #contain .section-5-box .renoz-section-intro {
    width: 500px; }
  #contain .section-5-box .section-tit {
    top: 640px; }
  #section4 .data-item {
    width: 100%;
    margin-top: 120px; }
  #section4 .item {
    width: 24.2%; }
  #section4 .name {
    font-size: 24px;
    font-weight: 600; }
  #section4 .value {
    font-size: 14px;
    color: #666; }
  #section4 .section-4-box .renoz-section-intro {
    width: 100%; }
  #section4 .renoz-section-intro {
    width: 580px; }
  #section4 .picture-padding {
    min-width: 450px;
    text-align: center; }
  #section4 .model1-content {
    margin-top: 50px; }
    #section4 .model1-content .section-desc {
      white-space: nowrap; }
  .section-5 {
    z-index: 100; }
    .section-5 .section-block {
      height: 380px; }
  .section-7 {
    padding-top: 470px; }
    .section-7 .name {
      font-weight: 600;
      margin-left: 150px;
      width: 370px; }
  .section-8 .section-1-img {
    width: 100vw;
    left: 50%;
    height: auto;
    position: relative;
    margin-left: -50vw;
    margin-top: -500px; }
    .section-8 .section-1-img img {
      width: 100%; }
  .section-8 .section-4-box {
    position: relative;
    width: 456px;
    height: 500px;
    top: 150px;
    z-index: 2; }
  .section-8 .renoz-section-intro {
    width: 582px; }
  .section-8 .model1 {
    padding: 0 !important; }
  .section-8 .renoz-btn {
    display: inline-block;
    padding: 0 30px;
    height: 44px;
    line-height: 38px;
    border-radius: 30px;
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 16px;
    margin-top: 84px; }
  .section-8 .weight {
    margin-top: 80px; }
  .section-8 .weight-left, .section-8 .weight-right {
    display: inline-block;
    margin-top: 20px; }
  .section-8 .weight-left {
    margin-right: 46px; }
  .section-8 .weight-content {
    font-size: 12px;
    line-height: 22px; }
  .section-8 .weight-value {
    font-size: 24px;
    line-height: 38px;
    margin-top: 8px;
    color: #FFB100; }
    .section-8 .weight-value .sec6-bg {
      width: 9px;
      height: 12px;
      vertical-align: super; }
  .section-9 {
    background-color: #eff9ff; }
    .section-9 #remarks {
      background-color: #eff9ff; } }

#section4 .model3 {
  top: 0 !important; }

body {
  margin: 0; }

@keyframes title-show {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes title-show {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
    transform: translateY(4vh); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
    transform: translateY(4vh); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes desc-show {
  from {
    opacity: 0; }
  to {
    opacity: 0.8; } }

@-webkit-keyframes desc-show {
  from {
    opacity: 0; }
  to {
    opacity: 0.8; } }

@keyframes desc-up {
  from {
    -webkit-transform: translateY(4vh);
    transform: translateY(4vh); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes desc-up {
  from {
    -webkit-transform: translateY(4vh);
    transform: translateY(4vh); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

.arrow-down, .arrow-up {
  display: inline-block;
  background-repeat: no-repeat;
  vertical-align: super; }

.arrow-down {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAALhJREFUKBXtkU0OwiAQhRn0FtpeQPeuvYQ/8TDWuxjjKSQmblo3PURvYWCcR8WQFjmBJDDDe9+DBJRKjFl9Y8yEpXRKzGn/QO51gudfqWweiyD8qsXTLOHpeW0qy6+2bO6bDLxzjluwn3/gqWV7KRqzHYbkZMBn0SfwCAuSrPgordVEB8d8ha417QNMik7dal35AMw4JFt/mlSLPsDS9zegwYhCvSBrDEP83hCIODSEAzOqCGGODBHeWB1QZaCwH+8AAAAASUVORK5CYII=);
  background-size: 100%; }

.arrow-up {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAAJ5JREFUKBVjYMACZE7ubwBhLFIMjOiCIIX/Gf7Xg8QZGRgbn5g7NiCrQdGArBimCF0TE0wCSfFfmBiQ/guyDdl5YA3IipmYGGNgGpgYGaPRNTGhK35s6rgCpuGxmeNKdE0wJ/0FmYysGFkTMyNzFDAI/sDEGGRP79eBc4AM6ZP7/oMwspjcqSPayHwUNjYNMAUwJ8H4BOlRDQSDCKgAABELTodipxAGAAAAAElFTkSuQmCC);
  background-size: 100%; }

.title,
.desc {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; }

@media screen and (max-width: 1080px) {
  .page {
    height: auto;
    background-color: #000;
    color: #fff;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1; }
    .page .game-first-screen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/frame-bg-sm-e03b20c403df05d855ec10559718851d.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      opacity: .3;
      z-index: -2;
      -webkit-transition: opacity 1s;
      transition: opacity 1s; }
    .page section {
      margin-bottom: 140px; }
      .page section .title {
        font-size: 4.16667vw;
        line-height: 6.2963vw;
        text-align: center; }
      .page section .desc {
        margin-top: 3vh;
        font-size: 1.66667vw;
        line-height: 3.14815vw;
        text-align: center; }
    .page .scroll-helper {
      position: relative;
      overflow: scroll; }
    .page .padding-page {
      padding: 0 6vw; }
    .page .frame-boost .text-wrapper {
      width: 78.7037vw;
      margin: 0 auto;
      text-align: center; }
      .page .frame-boost .text-wrapper .title {
        opacity: 0;
        -webkit-transform: translateY(4vh);
                transform: translateY(4vh);
        -webkit-animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-in 0.8s 1 normal forwards;
                animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-in 0.8s 1 normal forwards; }
      .page .frame-boost .text-wrapper .desc {
        opacity: 0;
        -webkit-transform: translateY(4vh);
                transform: translateY(4vh);
        -webkit-animation: desc-show 1.4s ease-in 1.05s 1 normal forwards, desc-up 1.4s ease-in 1.05s 1 normal forwards;
                animation: desc-show 1.4s ease-in 1.05s 1 normal forwards, desc-up 1.4s ease-in 1.05s 1 normal forwards; }
    .page .frame-boost .content {
      margin-top: 50vh;
      text-align: center;
      color: #fff; }
    .page .frame-boost .video-wrapper {
      -webkit-transition: opacity 1s;
      transition: opacity 1s;
      opacity: 0; }
    .page .frame-boost .video {
      margin: 6vh 0 9.6vh;
      width: 100%;
      border-radius: 10px; }
    .page .frame-boost .power-text {
      font-size: 12px;
      line-height: 22px; }
    .page .frame-boost .power-value {
      font-size: 2.96296vw;
      line-height: 4.44444vw;
      color: #1BC9BE; }
    .page .frame-boost .game-bg {
      width: 83.7037vw;
      height: 40.92593vw;
      background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/game-bg-sm-6334964c3ff79090d959ee50fdddc9a7.png);
      background-size: cover;
      background-repeat: no-repeat;
      margin: 8vh 0 10vh;
      border-radius: 10px; }
    .page .touch-boost .touch-bg {
      width: 89.25926vw;
      height: 50.18519vw;
      background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/touch-bg-sm-82ca5aee20cdfbb98562c985e1a0e2da.png);
      background-size: cover;
      background-repeat: no-repeat;
      margin: 8vh 0 10vh;
      border-radius: 10px; }
    .page .touch-boost .perf {
      width: 100%; }
    .page .touch-boost .perf-list {
      display: inline-block;
      width: 29%;
      padding: 0 2%;
      text-align: left; }
      .page .touch-boost .perf-list .desc {
        font-size: 1.2963vw;
        line-height: 2.59259vw;
        text-align: left; }
      .page .touch-boost .perf-list .value {
        font-size: 2.96296vw;
        line-height: 4.44444vw;
        color: #1BC9BE; }
    .page .speed-area {
      position: relative;
      height: 100vw; }
      .page .speed-area .speed-bg {
        width: 75vw;
        height: 71.75926vw;
        background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/speed-bg-sm-1286e555308ff40755d1eec5773a9ab9.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: 10vh 0 40vh;
        border-radius: 10px;
        position: absolute;
        right: -6vw; }
    .page .icon-area {
      text-align: center; }
      .page .icon-area .icon-close {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/icon-close-5fd74e4c272fb61ab8f7ee4aac96dfbb.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto 21.66667vw; }
  .arrow-up, .arrow-down {
    width: 8px;
    height: 12px; } }

@media screen and (min-width: 1081px) {
  .page {
    height: auto;
    background-color: #000;
    color: #fff;
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1; }
    .page .game-first-screen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/frame-bg-md-b79cb6c78969aa4608417c4f2e5a6aa4.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      opacity: .3;
      z-index: -2;
      -webkit-transition: opacity 1s;
      transition: opacity 1s; }
    .page section {
      margin-bottom: 140px; }
      .page section .title {
        font-size: 30px;
        line-height: 52px;
        text-align: left; }
      .page section .desc {
        margin-top: 3vh;
        font-size: 14px;
        line-height: 28px;
        text-align: left; }
    .page .scroll-helper {
      position: relative;
      overflow: scroll; }
    .page .padding-page {
      width: 35.15625vw;
      min-width: 500px;
      margin: 0 auto; }
    .page .frame-boost .text-wrapper {
      width: 35.15625vw;
      min-width: 500px;
      margin: 0 auto;
      text-align: center; }
      .page .frame-boost .text-wrapper .title {
        opacity: 0;
        -webkit-transform: translateY(4vh);
        transform: translateY(4vh);
        -webkit-animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-in 0.8s 1 normal forwards;
        animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-in 0.8s 1 normal forwards; }
      .page .frame-boost .text-wrapper .desc {
        opacity: 0;
        -webkit-transform: translateY(4vh);
        transform: translateY(4vh);
        -webkit-animation: desc-show 1.4s ease-in 1.05s 1 normal forwards, desc-up 1.4s ease-in 1.05s 1 normal forwards;
        animation: desc-show 1.4s ease-in 1.05s 1 normal forwards, desc-up 1.4s ease-in 1.05s 1 normal forwards; }
    .page .frame-boost .content {
      margin-top: 45vh;
      text-align: center;
      color: #fff; }
    .page .frame-boost .video-wrapper {
      -webkit-transition: opacity 1s;
      transition: opacity 1s;
      opacity: 0; }
    .page .frame-boost .video {
      margin: 6vh 0 8vh;
      width: 100%;
      border-radius: 10px; }
    .page .frame-boost .power-text {
      font-size: 12px;
      line-height: 24px; }
    .page .frame-boost .power-value {
      font-size: 25px;
      line-height: 38px;
      color: #1BC9BE; }
    .page .frame-boost .game-bg {
      width: 51.13281vw;
      max-width: 1309px;
      height: 25vw;
      max-height: 640px;
      background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/game-bg-md-0b2b50ef4ae9c95746b0912691faa5fa.png);
      background-size: cover;
      background-repeat: no-repeat;
      margin: 8vh 0 10vh;
      border-radius: 10px; }
    .page .touch-boost .touch-bg {
      width: 46.875vw;
      max-width: 1200px;
      height: 26.36719vw;
      max-height: 675px;
      background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/touch-bg-md-81273ba0d83064e9876d8a8e03d43200.png);
      background-size: cover;
      background-repeat: no-repeat;
      margin: 8vh 0 10vh;
      border-radius: 10px; }
    .page .touch-boost .perf {
      width: 100%; }
    .page .touch-boost .perf-list {
      display: inline-block;
      width: 29%;
      margin-right: 20px;
      text-align: left;
      vertical-align: super; }
      .page .touch-boost .perf-list .desc {
        font-size: 12px;
        line-height: 20px;
        text-align: left; }
      .page .touch-boost .perf-list .value {
        font-size: 25px;
        line-height: 38px;
        color: #1BC9BE; }
    .page .speed-area {
      position: relative;
      height: 39.0625vw; }
      .page .speed-area .title {
        width: 44vw; }
      .page .speed-area .desc {
        width: 29vw; }
      .page .speed-area .speed-bg {
        width: 42.65625vw;
        height: 27.5vw;
        background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/speed-bg-md-5f163eb063359be7849cfe1a1e6c2101.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: 70px 0 330px;
        border-radius: 10px;
        position: absolute;
        right: -6vw;
        top: 0; }
    .page .icon-area {
      text-align: center; }
      .page .icon-area .icon-close {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(https://assorted.downloads.oppo.com/static/assets/products/renoz/images/game/icon-close-5fd74e4c272fb61ab8f7ee4aac96dfbb.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto 5.78125vw; }
  .arrow-up, .arrow-down {
    width: 12px;
    height: 15px; } }