@media screen and (min-width: 981px) {
  /* kv */
  @media screen {
    .cbcn-kv-section {
      margin-top: 50px;
      width: 100%;
      height: 54em;
    }

    /* .cbcn-kv-remark {
            position: absolute;
            bottom: 1.5em;
            right: 1.5em;
            text-align: right!important;
        }

        .cbcn-kv-remark div {
            color: #555;
            line-height: 150%;
        } */
  }

  /* navigation */
  @media screen {
    .cbcn-navigation-content {
      width: 71em;
      gap: 1em;
    }

    .cbcn-navigation-item1 {
      width: 100%;
      height: 35.6em;
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1) {
      flex: 1;
      height: 24.5em;
      border-radius: 2.3em;
      overflow: hidden;
    }

    .cbcn-navigation-item {
      position: relative;
      background-color: #fff;
    }

    .cbcn-navigation-item2 picture {
      position: relative;
      z-index: 2;
    }

    .cbcn-navigation-item1 .cbcn-navigation-img {
      width: 76em;
      height: 16.65em;
      bottom: 5.5em;
      z-index: 9;
      transition: all 0.5s;
    }

    .cbcn-navigation-item1:hover .cbcn-navigation-img {
      transform: translate(-50%, 0) scale(0.8);
    }

    .cbcn-navigation-item2 .cbcn-navigation-img {
      width: 27.7em;
      height: 29.5em;
      z-index: 1;
      transition: all 0.5s;
    }

    .cbcn-navigation-item3 .cbcn-navigation-img,
    .cbcn-navigation-item4 .cbcn-navigation-img {
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: all 0.5s;
    }

    .cbcn-navigation-item2:hover .cbcn-navigation-img {
      transform: translate(-50%, -50%) scale(0.87);
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1,
      .cbcn-navigation-item2):hover .cbcn-navigation-img {
      transform: translate(-50%, -50%) scale(0.8);
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1,
      .cbcn-navigation-item2, .cbcn-navigation-item4):hover .cbcn-navigation-img {
      margin-top: 0.5em;
    }

    .cbcn-navigation-item1 .cbcn-navigation-name {
      position: absolute;
      left: 50%;
      top: 7em;
      background: linear-gradient(90deg,
          #46b9f7 -0.78%,
          #0b7fc7 53.09%,
          #46b9f7 100.86%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform: translate(-50%, 0) perspective(200px) rotateX(-15deg);
      transition: all 0.5s;
    }

    .cbcn-navigation-item1 .cbcn-navigation-name .cbcn-pc-h0 {
      font-size: 150px;
    }

    .cbcn-navigation-item2 .cbcn-navigation-name {
      background: rgba(255, 255, 255, 0.95);
    }

    .cbcn-navigation-item3 .cbcn-navigation-name {
      background: linear-gradient(83deg, #7c50ff 5.54%, #ff289e 86.36%);
    }

    .cbcn-navigation-item4 .cbcn-navigation-name {
      background: linear-gradient(324deg, #00acfa -39.39%, #005eff 110.4%);
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1) .cbcn-navigation-name {
      top: 3em;
      z-index: 2;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: all 0.5s;
    }

    .cbcn-navigation-item:hover .cbcn-navigation-name {
      margin-top: -15%;
      opacity: 0;
    }

    .cbcn-navigation-desc {
      z-index: 2;
      opacity: 0;
      margin-top: 15%;
      transition: all 0.5s;
    }

    .cbcn-navigation-item1 .cbcn-navigation-desc {
      top: 7.5em;
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1) .cbcn-navigation-desc {
      top: 3.5em;
    }

    .cbcn-navigation-item2 .cbcn-navigation-desc {
      background: rgba(255, 255, 255, 0.95);
    }

    .cbcn-navigation-item3 .cbcn-navigation-desc {
      background: linear-gradient(83deg, #7c50ff 5.54%, #ff289e 86.36%);
    }

    .cbcn-navigation-item4 .cbcn-navigation-desc {
      background: linear-gradient(324deg, #00acfa -39.39%, #005eff 110.4%);
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1) .cbcn-navigation-desc {
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-navigation-item1 .cbcn-navigation-desc {
      background: linear-gradient(90deg,
          #46b9f7 -0.78%,
          #0b7fc7 53.09%,
          #46b9f7 100.86%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-navigation-item:hover .cbcn-navigation-desc {
      opacity: 1;
      margin-top: 0;
    }
  }

  /* appearance */
  @media screen {
    #cbcn-dom-container .cbcn-appearance-p1 {
      gap: 30px;
      width: 100%;
      text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    .cbcn-appearance-p1::after {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .cbcn-appearance-p1 p {
      position: relative;
      z-index: 2;
    }

    #cbcn-dom-container .cbcn-appearance-p2 {
      width: max-content;
      gap: 275px;
      text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    .cbcn-appearance-p2::after {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .cbcn-appearance-p2 p {
      position: relative;
      z-index: 2;
      margin-left: -25px;
    }
  }

  /* color */
  @media screen {
    .cbcn-color-swiper {
      padding: 0 1em;
      height: 40em;
      width: 94em;
    }

    .cbcn-color-swiper .swiper-slide {
      background-color: #fff;
    }

    .cbcn-color-swiper video {
      height: 40em;
      width: 94em;
      overflow: hidden;
      object-fit: contain;
      object-position: bottom;
      background-color: #fff;
    }

    .cbcn-color-section {
      --color1: #5cd3fb;
      --color2: #f6a2be;
      --color3: #f8d882;
      --color4: #898888;
    }

    .cbcn-color-txt {
      width: max-content;
    }

    .cbcn-color-txt1 p {
      background: linear-gradient(90deg,
          #5cd3fb 30%,
          rgba(92, 211, 251, 0.5) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-color-txt2 p {
      background: linear-gradient(90deg,
          #f6a2be 30%,
          rgba(246, 162, 190, 0.5) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-color-txt3 p {
      background: linear-gradient(90deg,
          #f8d882 30%,
          rgba(248, 216, 130, 0.5) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-color-txt4 p {
      background: linear-gradient(90deg,
          #898888 30%,
          rgba(137, 136, 136, 0.5) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-color-div {
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      gap: 40px;
    }

    .cbcn-color-btnBox {
      position: relative;
      width: 100px;
      height: 58px;
    }

    .cbcn-color-txt {
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-color-txt.active {
      opacity: 1;
    }

    .cbcn-color-btnList {
      display: inline-flex !important;
      width: auto;
      padding: 9px;
      align-items: center;
      gap: 8px;
      border: 2px solid #fff;
      border-radius: 999px;
      background: rgba(94, 94, 94, 0.05);
    }

    .cbcn-color-btn {
      width: 40px;
      height: 40px;
      cursor: pointer;
      position: relative;
    }

    .cbcn-color-btn svg {
      width: 40px;
      height: 40px;
    }

    .cbcn-color-circle {
      fill: none;
      stroke-width: 2.5px;
      stroke-dasharray: 125.6px;
      stroke-dashoffset: 125.6px;
    }

    .cbcn-color-btn.index0 .cbcn-color-circle {
      stroke: var(--color1);
    }

    .cbcn-color-btn.index1 .cbcn-color-circle {
      stroke: var(--color2);
    }

    .cbcn-color-btn.index2 .cbcn-color-circle {
      stroke: var(--color3);
    }

    .cbcn-color-btn.index3 .cbcn-color-circle {
      stroke: var(--color4);
    }

    .cbcn-color-btn.active .cbcn-color-circle {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 3s ease-out;
    }
  }

  /* imagechapter */
  @media screen {
    .cbcn-imagechapter-section.bk {
      background-color: #fff!important;
    }

    .cbcn-imagechapter-video {
      width: 96em;
      height: 37.4em;
    }

    .cbcn-imagechapter-title {
      top: 10em;
      padding: 0.5em 1.35em;
      border-radius: 5em;
      background: #5cd3fb;
    }
  }

  /* livephoto */
  @media screen {
    .cbcn-livephoto-section {
      overflow: hidden;
    }

    /* .cbcn-livephoto-title {
      margin-top: 150px;
    } */
    .cbcn-livephoto-imgDiv {
      width: 100%;
      height: 23.49em;
      margin-top: 3.5em;
    }

    .cbcn-livephoto-img {
      width: 54em;
      height: 25.2em;
      position: absolute;
      top: 270px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: all 0.75s 0.2s;
    }

    .cbcn-livephoto-img.active {
      width: 49em;
      height: 23em;
      top: 270px;
      transform: translate(-50%, 0);
    }

    /* .cbcn-livephoto-video {
      width: 60%;
      height: 93.5%;
      position: absolute;
      top: 3.5%;
      left: 14.5%;
      object-fit: cover;
      transition: all 0.4s;
    } */
  }

  /* film */
  @media screen {
    .cbcn-film-img {
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-film-imgborder {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      opacity: 0;
    }

    .cbcn-film-img.active .cbcn-film-imgborder {
      animation: filmborder 0.5s ease-in-out forwards;
    }

    @keyframes filmborder {
      0% {
        opacity: 0;
      }

      30% {
        opacity: 0.75;
      }

      50% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }

    .cbcn-film-icon {
      padding: 0.5em 1.5em;
      bottom: -1.5em;
      border-radius: 5em;
      background: #fff;
      overflow: hidden;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-film-icon.active {
      opacity: 1;
      bottom: 1.5em;
    }

    .cbcn-film-wrapper {
      position: relative;
    }

    .cbcn-film-img1 {
      width: 25em;
      height: 25em;
      position: relative;
      left: calc(50%);
      transform: translateX(-100%);
      margin-top: 3.5em;
    }

    .cbcn-film-img2 {
      position: absolute;
      width: 22.5em;
      height: 30em;
      top: 16.75em;
      left: calc(50% + 1.5em);
    }

    .cbcn-film-img3 {
      position: relative;
      width: 21em;
      height: 28em;
      left: calc(50%);
      transform: translateX(-100%);
      margin-top: 5em;
    }
  }

  /* diy */
  @media screen {
    .cbcn-diy-section.wt {
      background: #fafafa;
    }

    .cbcn-diy-content {
      min-width: 980px;
      flex-wrap: nowrap;
      align-items: center;
      gap: 5.15em;
    }

    .cbcn-diy-txt {
      width: 19.85em;
    }

    .cbcn-diy-videoBox {
      width: 26.25em;
      height: 35em;
      position: relative;
    }

    .cbcn-diy-videoBox video {
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-diy-slide1 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .cbcn-diy-swiper {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 100vh;
    }

    .cbcn-diy-swiper .swiper-slide {
      opacity: 0 !important;
    }

    .cbcn-diy-swiper .swiper-slide-active {
      opacity: 1 !important;
    }

    .cbcn-diy-slidebtn {
      width: fit-content;
      position: absolute;
      z-index: 9;
      bottom: -54px;
      right: 0;
    }

    .cbcn-diy-videoControl {
      bottom: -6em;
      right: auto;
      left: 0;
    }

    .cbcn-diy-btnList {
      width: 4.5em;
      gap: 0.25em;
      left: auto;
      right: 2.25em;
      justify-content: center;
      opacity: 0;
      margin-right: -100%;
      transition: all 0.3s;
    }

    .cbcn-diy-btnList.active {
      opacity: 1;
      margin-right: 0;
    }

    .cbcn-diy-btn {
      position: relative;
      width: 4.5em;
      height: 5.8em;
      transition: all 0.3s;
      cursor: pointer;
      flex-shrink: 0;
    }

    .cbcn-diy-btnicon {
      top: 0.25em;
    }

    .cbcn-diy-iconimg {
      display: block;
      width: 4em;
      height: 5.3em;
      object-fit: cover;
      opacity: 0.3;
      background: var(--botton-bg-l3, rgba(0, 0, 0, 0.08));
      overflow: hidden;
      position: relative;
      z-index: 2;
      scale: 0.8;
      transition: all 0.3s;
    }

    .cbcn-diy-btn.active .cbcn-diy-iconimg {
      opacity: 1;
      scale: 1;
    }

    .cbcn-diy-icon {
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-diy-btn.active .cbcn-diy-icon {
      opacity: 1;
    }

    .cbcn-diy-desc {
      width: 1.35em;
      text-align: center;
      position: absolute;
      left: -1.85em;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(175deg, #a060ff 17.86%, #ff4d85 72.14%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-diy-desc p {
      line-height: 110%;
    }

    .cbcn-diy-btn.active .cbcn-diy-desc {
      opacity: 1;
    }
  }

  /* portrait */
  @media screen {
    .cbcn-portrait-swiper {
      width: 100%;
      height: 640px;
      margin-top: 50px;
      background: #f2f2f2;
      border-radius: 20px;
      overflow: hidden;
    }

    .cbcn-portrait-swiper .swiper-slide {
      opacity: 0 !important;
    }

    .cbcn-portrait-swiper .swiper-slide-active {
      opacity: 1 !important;
    }

    .cbcn-portrait-swiper .swiper-slide.index1 {
      display: flex;
      justify-content: space-between;
      background: #fff;
    }

    .cbcn-portrait-title {
      width: fit-content;
    }

    .cbcn-portrait-video1 {
      width: 24em;
      height: 32em;
      border-radius: 1em;
      overflow: hidden;
      display: block;
    }

    .cbcn-portrait-video2 {
      width: 49em;
      height: 32em;
      display: block;
    }

    .cbcn-portrait-btnList {
      margin-top: 60px;
      gap: 20px;
      justify-content: center;
      width: fit-content;
    }

    .cbcn-portrait-btn {
      cursor: pointer;
    }

    .cbcn-portrait-btn::after {
      content: "";
      bottom: -5px;
      height: 2px;
      width: 100%;
      background: inherit;
      background-clip: initial;
      -webkit-background-clip: initial;
      -webkit-text-fill-color: initial;
    }

    .cbcn-portrait-txtContent {
      margin-top: 30px;
      width: 646px;
      height: 122px;
    }

    .cbcn-portrait-txt {
      opacity: 0;
      width: 100%;
    }

    .cbcn-portrait-txt.active {
      opacity: 1;
    }

    .cbcn-portrait-button-div {
      position: absolute;
      bottom: 20px;
      width: 100%;
      padding: 0 20px;
      display: inline-flex;
      justify-content: space-between;
    }

    .cbcn-portrait-button {
      padding: 10px 20px;
      align-items: center;
      border-radius: 999px;
      background: rgba(128, 128, 128, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
    }

    .cbcn-portrait-button.active {
      background: #fff;
    }

    .cbcn-portrait-button p {
      font-size: 22px;
      font-weight: 550;
      font-family: "vivo Sans Web";
      line-height: 110%;
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-portrait-button.active p {
      background: linear-gradient(270deg,
          var(--Color-1, #35cbfd) 0%,
          var(--Color-1_5, #7593ff) 50%,
          var(--Color-2, #ab5cff) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* longfocus */
  @media screen {

    .cbcn-longfocus-safeRow,
    .cbcn-longfocus-safeRow2 {
      justify-content: space-between;
      position: relative;
      z-index: 9;
    }

    .cbcn-longfocus-box {
      justify-content: space-between;
    }

    .cbcn-longfocus-item {
      gap: 30px;
      width: 480px;
    }

    .cbcn-longfocus-icon {
      width: 60px;
      height: 60px;
    }

    .cbcn-longfocus-img {
      width: 96em;
      height: 61.9em;
      margin-top: -12.2em;
      margin-bottom: -8.8em;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* telephotostage */
  @media screen {
    .cbcn-telephotostage-title {
      width: 680px;
    }

    .cbcn-telephotostage-img {
      width: 100%;
      height: 46.5em;
      margin-top: 70px;
      /* overflow: hidden;
      border-radius: 1.5em; */
    }
  }

  /* camera */
  @media screen {
    .cbcn-camera-section {
      height: 47.8em;
    }

    .cbcn-camera-Box {
      justify-content: center;
    }

    .cbcn-camera-leftBox {
      margin-right: 45.85em;
      width: 12.95em;
      height: 100%;
    }

    .cbcn-camera-rightBox {
      height: 100%;
      width: 9.8em;
    }

    .cbcn-camera-item1 {
      margin-top: 14.05em;
    }

    .cbcn-camera-item2 {
      margin-top: 10.6em;
    }

    .cbcn-camera-item3 {
      margin-top: 9.5em;
    }

    .cbcn-camera-item4 {
      margin-top: 6.5em;
    }

    .cbcn-camera-item5 {
      margin-top: 3.2em;
    }

    .cbcn-camera-img {
      width: 80.35em;
      height: 45.2em;
      bottom: 0px;
      z-index: 8;
    }

    .cbcn-camera-safeRow {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 9;
    }
  }

  /* fullfocusportrait */
  @media screen {
    .cbcn-fullfocusportrait-section.wt {
      background: #fafafa;
    }

    .cbcn-fullfocusportrait-txt1 {
      width: 850px;
      top: 7.5em;
    }

    .cbcn-fullfocusportrait-imageDiv {
      width: 24em;
      height: 32em;
      flex-shrink: 0;
      perspective: 1000;
      -webkit-perspective: 1000;
      margin-top: 6em;
    }

    .cbcn-fullfocusportrait-image {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 24em;
      height: 32em;
      border-radius: 1em;
      overflow: hidden;
      transform-origin: center;
      z-index: 50;
      transition: all 0.3s;
    }

    .cbcn-fullfocusportrait-image.left1 {
      transform: translateY(-50%) translateX(-12em) rotateY(30deg) scale(0.65);
      -webkit-transform: translateY(-50%) translateX(-12em) rotateY(30deg) scale(0.65);
      z-index: 30;
      background-color: #fafafa;
    }

    .cbcn-fullfocusportrait-image.left1 img {
      opacity: 0.5;
    }

    .cbcn-fullfocusportrait-image.left2 {
      transform: translateY(-50%) translateX(-20em) rotateY(60deg) scale(0.6);
      -webkit-transform: translateY(-50%) translateX(-20em) rotateY(60deg) scale(0.6);
      z-index: 20;
      background-color: #fafafa;
    }

    .cbcn-fullfocusportrait-image.left2 img {
      opacity: 0;
    }

    .cbcn-fullfocusportrait-image.left3 {
      transform: translateY(-50%) translateX(-27em) rotateY(90deg) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(-27em) rotateY(90deg) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-image.left4 {
      transform: translateY(-50%) translateX(-27em) rotateY(90deg) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(-27em) rotateY(90deg) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-image.right1 {
      transform: translateY(-50%) translateX(12em) rotateY(-30deg) scale(0.65);
      -webkit-transform: translateY(-50%) translateX(12em) rotateY(-30deg) scale(0.65);
      z-index: 30;
      background-color: #fafafa;
    }

    .cbcn-fullfocusportrait-image.right1 img {
      opacity: 0.5;
    }

    .cbcn-fullfocusportrait-image.right2 {
      transform: translateY(-50%) translateX(20em) rotateY(-60deg) scale(0.6);
      -webkit-transform: translateY(-50%) translateX(20em) rotateY(-60deg) scale(0.6);
      z-index: 20;
      background-color: #fafafa;
    }

    .cbcn-fullfocusportrait-image.right2 img {
      opacity: 0;
    }

    .cbcn-fullfocusportrait-image.right3 {
      transform: translateY(-50%) translateX(27em) rotateY(-90deg) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(27em) rotateY(-90deg) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-image.right4 {
      transform: translateY(-50%) translateX(27em) rotateY(-90deg) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(27em) rotateY(-90deg) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-imgborder {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      opacity: 0;
    }

    .cbcn-fullfocusportrait-image:not(.left1, .right1) .cbcn-fullfocusportrait-imgborder {
      animation: fullfocusportraitborder 0.5s ease-in-out forwards;
    }

    @keyframes fullfocusportraitborder {
      0% {
        opacity: 0;
      }

      30% {
        opacity: 0.75;
      }

      50% {
        opacity: 0.5;
      }

      100% {
        opacity: 1;
      }
    }

    .cbcn-fullfocusportrait-divBox {
      top: calc(50% + 17em);
      margin-top: 6em;
    }

    .cbcn-fullfocusportrait-Info {
      width: 15.7em;
      position: absolute;
      top: 0;
      left: 50%;
      text-align: center;
      transform: translateX(-50%);
      transition: all 0.3s;
    }

    .cbcn-fullfocusportrait-Info.left {
      transform: translateX(-110%) scale(0.5);
      opacity: 0;
    }

    .cbcn-fullfocusportrait-Info.right {
      transform: translateX(10%) scale(0.5);
      opacity: 0;
    }

    .cbcn-fullfocusportrait-linebox {
      width: 466px;
      height: 32px;
      margin-top: 95px;
      padding: 0 2px;
      background: #fafafa;
      position: relative;
      overflow-x: hidden;
      z-index: -1;
    }

    .cbcn-fullfocusportrait-linebox::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      background: linear-gradient(90deg,
          #fafafa 0%,
          #fafafa 5%,
          rgba(255, 255, 255, 0) 50%,
          #fafafa 95%,
          #fafafa 100%);
    }

    .cbcn-fullfocusportrait-linebox::before {
      content: "";
      width: 2px;
      height: 28px;
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-1px);
      background: #42d0ff;
      border-left: 2px solid #fafafa;
      border-right: 2px solid #fafafa;
      z-index: 9;
    }

    .cbcn-fullfocusportrait-lineitem {
      position: absolute;
      top: 0;
      left: 50%;
      height: 24px;
      gap: 8px;
      align-items: flex-end;
      flex-wrap: nowrap;
      transform: translateX(-200px);
      transition: all 0.3s;
    }

    .cbcn-fullfocusportrait-lineitem span {
      display: block;
      width: 2px;
      height: 18px;
      flex-shrink: 0;
      background: #c2c2c2;
    }
  }

  /* frontselfie */
  @media screen {
    .cbcn-frontselfie-swiper {
      height: 640px;
      width: 980px;
      margin-top: 40px;
      margin-bottom: 40px;
      border-radius: 20px;
      overflow: hidden;
    }

    .cbcn-frontselfie-swiper .swiper-slide {
      opacity: 0 !important;
    }

    .cbcn-frontselfie-swiper .swiper-slide-active {
      opacity: 1 !important;
    }

    .cbcn-frontselfie-txt {
      width: 814px;
      opacity: 0;
    }

    .cbcn-frontselfie-txt.active {
      opacity: 1;
    }

    .cbcn-frontselfie-button-div {
      position: absolute;
      bottom: 20px;
      width: 100%;
      padding: 0 20px;
      display: inline-flex;
      justify-content: space-between;
    }

    .cbcn-frontselfie-button {
      padding: 10px 20px;
      align-items: center;
      border-radius: 999px;
      background: rgba(128, 128, 128, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
    }

    .cbcn-frontselfie-button>p {
      color: #fff !important;
      font-size: 22px;
      font-weight: 550;
      font-family: "vivo Sans Web";
      line-height: 110%;
    }

    .cbcn-frontselfie-btn-border {
      margin-top: 5px;
      height: 2px;
      width: 100%;
      background: inherit;
      background-clip: initial;
      -webkit-background-clip: initial;
      -webkit-text-fill-color: initial;
    }

    .cbcn-frontselfie-btnListDiv {
      margin-bottom: 30px;
      width: fit-content;
    }

    .cbcn-frontselfie-btnList {
      gap: 20px;
    }

    .cbcn-frontselfie-btn {
      cursor: pointer;
    }

    .cbcn-frontselfie-txtContent {
      height: 50px;
    }

    .cbcn-frontselfie-txt {
      width: 32.5em;
    }

    .cbcn-frontselfie-button.active {
      background: #fff;
    }

    .cbcn-frontselfie-button.active p {
      background: linear-gradient(270deg,
          var(--Color-1, #35cbfd) 0%,
          var(--Color-1_5, #7593ff) 50%,
          var(--Color-2, #ab5cff) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* filmcamera */
  @media screen {
    .cbcn-filmcamera-txt {
      width: 814px;
    }

    .cbcn-filmcamera-img {
      margin-top: 3.5em;
      width: 24em;
      height: 29.35em;
    }
  }

  /* aiimage */
  @media screen {
    .cbcn-aiimage-swiper {
      margin-top: 50px;
      margin-bottom: 50px;
      width: 980px;
      height: 640px;
      border-radius: 20px;
      overflow: hidden;
    }

    .cbcn-aiimage-slide {
      position: relative;
      opacity: 0 !important;
    }

    .cbcn-aiimage-slide.swiper-slide-active {
      opacity: 1 !important;
    }

    .cbcn-aiimage-button-div {
      position: absolute;
      bottom: 20px;
      width: 100%;
      padding: 0 20px;
      display: inline-flex;
      justify-content: space-between;
      z-index: 10;
    }

    .cbcn-aiimage-button {
      padding: 10px 20px;
      align-items: center;
      border-radius: 999px;
      background: rgba(128, 128, 128, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
    }

    .cbcn-aiimage-button.style {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .cbcn-aiimage-button p {
      font-size: 22px;
      font-weight: 550;
      font-family: "vivo Sans Web";
      line-height: 110%;
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-aiimage-button.style:not(.cbcn-aiimage-button2) p {
      background: linear-gradient(270deg, var(--Color-1, #35CBFD) 0%, var(--Color-1_5, #7593FF) 50%, var(--Color-2, #AB5CFF) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-aiimage-button.style .cbcn-aiimage-button2 p:not(.active) {
      background: rgba(0, 0, 0, 0.4);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-aiimage-btn-border {
      margin-top: 5px;
      height: 2px;
      width: 100%;
      background: inherit;
      background-clip: initial;
      -webkit-background-clip: initial;
      -webkit-text-fill-color: initial;
    }

    .cbcn-aiimage-btnListDiv {
      margin-bottom: 20px;
      width: fit-content;
    }

    .cbcn-aiimage-btn {
      cursor: pointer;
    }

    .cbcn-aiimage-btnList {
      gap: 20px;
    }

    .cbcn-aiimage-button2 {
      position: absolute;
      left: 21px;
      bottom: 20px;
      padding: 10px 20px;
      align-items: center;
      border-radius: 999px;
      background: rgba(128, 128, 128, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      cursor: pointer;
      transition: all 0.3s;
    }

    .cbcn-aiimage-button2.active {
      background: #fff;
    }

    .cbcn-aiimage-inbtn {
      font-size: 22px;
      font-weight: 550;
      color: #fff !important;
      transition: all 0.3s;
      line-height: 110%;
    }

    .cbcn-aiimage-button2.active .cbcn-aiimage-inbtn {
      background: linear-gradient(270deg, var(--Color-1, #35CBFD) 0%, var(--Color-1_5, #7593FF) 50%, var(--Color-2, #AB5CFF) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-aiimage-img2 {
      width: 100%;
      height: 640px;
      border-radius: 20px;
      overflow: hidden;
      cursor: pointer;
      z-index: 99;
      pointer-events: auto !important;
    }

    #cbcn-dom-container .cbcn-aiimage-img2 img {
      object-position: 0% 50%;
    }

    .cbcn-aiimage-swiper2 .swiper-slide {
      overflow: hidden;
      transition: all 0.3s;
      border-radius: 20px;
      overflow: hidden;
    }

    .cbcn-aiimage-swiper2 {
      width: 7.35em;
      transition: all 0.3s;
    }

    .cbcn-aiimage-swiper2.active .swiper-slide-active {
      width: 480px !important;
    }

    .cbcn-aiimage-flexRow {
      justify-content: space-between;
    }

    .cbcn-aiimage-txt2 {
      height: 50px;
    }

    .cbcn-aiimage-txt2-item {
      width: 650px;
    }
  }

  /* Performance */
  @media screen {
    .cbcn-performance-section.bk {
      background: transparent;
    }

    .cbcn-performance-video {
      width: 96em;
      height: 38.65em;
    }

    .cbcn-performance-title {
      top: 10em;
      padding: 0.5em 1.35em;
      border-radius: 5em;
      background: #5cd3fb;
    }
  }

  /* battery */
  @media screen {
    .cbcn-battery-txt {
      width: 815px;
    }

    .cbcn-battery-img {
      margin-top: 70px;
      margin-bottom: 70px;
      height: 620px;
      width: 1080px;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-battery-param {
      justify-content: center;
      gap: 40px 20px;
      background: linear-gradient(270deg,
          var(--Color-1, #35cbfd) 0%,
          var(--Color-1_5, #7593ff) 50%,
          var(--Color-2, #ab5cff) 100%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    .cbcn-battery-param .cbcn-pc-h4 {
      -webkit-text-fill-color: transparent;
    }

    .cbcn-battery-param .cbcn-pc-b1 {
      position: relative;
      /* 必须写 */
      z-index: 1;
      color: #989999 !important;
      background: #fff;
    }

    .cbcn-battery-param .cbcn-param {
      width: 400px;
    }

    .cbcn-battery-param .cbcn-pc-h4 {
      -webkit-text-fill-color: transparent;
    }
  }

  /* chip */
  @media screen {
    .cbcn-chip-img {
      width: 1080px;
      height: 1080px;
      z-index: 9;
      bottom: 0px;
    }

    .cbcn-chip-param {
      width: 700px;
      gap: 20px 123px;
      justify-content: center;
      position: relative;
      z-index: 10;
      margin-top: 690px;
      background: linear-gradient(270deg,
          var(--Color-1, #35cbfd) 0%,
          var(--Color-1_5, #7593ff) 50%,
          var(--Color-2, #ab5cff) 100%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    .cbcn-chip-title {
      position: relative;
      z-index: 10;
    }

    .cbcn-chip-param .cbcn-pc-h4 {
      -webkit-text-fill-color: transparent;
    }

    .cbcn-chip-param .cbcn-pc-b1 {
      position: relative;
      /* 必须写 */
      z-index: 1;
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      color: #989999 !important;
    }

    .cbcn-chip-param .cbcn-param {
      align-items: center;
      text-align: center;
    }
  }

  /* cool */
  @media screen {
    .cbcn-cool-txt {
      width: 840px;
    }

    .cbcn-cool-img {
      margin-top: 70px;
      height: 496px;
      width: 100%;
      border-radius: 20px;
      overflow: hidden;
    }
  }

  /* signal */
  @media screen {
    .cbcn-signal-swiper {
      margin-top: 50px;
      position: relative;
    }

    .cbcn-signal-swiper .swiper-wrapper {
      position: relative;
      z-index: 9;
    }

    .cbcn-signal-swiper .swiper-slide {
      background-color: #fff;
    }

    .cbcn-signal-img {
      height: 500px;
      width: 100%;
      overflow: hidden;
      border-radius: 20px;
    }

    .cbcn-signal-desc {
      margin-top: 50px;
      width: 730px;
    }

    .cbcn-signal-desc {
      opacity: 0 !important;
    }

    .cbcn-signal-desc.active {
      opacity: 1 !important;
    }

    .cbcn-signal-switchBtn-list {
      position: absolute;
      top: 540px;
      right: 0px;
      z-index: 10;
    }
  }

  /* eyeprotection */
  @media screen {
    .cbcn-eyeprotection-section {
      overflow: hidden;
    }

    .cbcn-eyeprotection-section.wt {
      transition: all 1s linear;
    }

    .cbcn-eyeprotection-section.wt p {
      transition: all 1s linear;
    }

    .cbcn-eyeprotection-section.bk .cbcn-pc-sh {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .cbcn-eyeprotection-txt {
      text-align: center;
    }

    .cbcn-eyeprotection-img {
      width: 96em;
      height: 67.5em;
      margin-top: -2.65em;
    }

    .cbcn-eyeprotection-param {
      justify-content: center;
      gap: 50px 130px;
      margin-top: 24em;
      background: linear-gradient(300deg,
          var(--Color-1, #35cbfd) 0%,
          var(--Color-1_5, #7593ff) 50%,
          var(--Color-2, #ab5cff) 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .cbcn-eyeprotection-param>div {
      width: 100%;
      justify-content: center;
      gap: 0 130px;
    }

    .cbcn-eyeprotection-param .cbcn-pc-h4 {
      -webkit-text-fill-color: transparent;
    }

    .cbcn-eyeprotection-param .cbcn-pc-b1 {
      position: relative;
      /* 必须写 */
      z-index: 1;
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      color: #989999 !important;
    }

    .cbcn-eyeprotection-param .cbcn-param {
      width: 190px;
      align-items: center;
      text-align: center;
    }

    .cbcn-eyeprotection-icon {
      width: 102px;
      height: 43px;
      position: relative;
    }

    .cbcn-eyeprotection-icongrey {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }

    .cbcn-eyeprotection-section.wt .cbcn-eyeprotection-icongrey {
      opacity: 1;
    }

    .cbcn-eyeprotection-section.wt .cbcn-eyeprotection-iconwt {
      opacity: 0;
    }
  }

  /* threeproof */
  @media screen {
    .cbcn-threeproof-section.wt {
      background: #fafafa;
    }

    .cbcn-threeproof-section .cbcn-pc-h1 span {
      width: fit-content;
      display: inline-block;
    }

    .cbcn-threeproof-safeRow {
      height: 700px;
      width: 100%;
      margin-top: 50px;
    }

    .cbcn-threeproof-content {
      height: 700px;
      width: 1400px;
      border-radius: 20px;
      background: #fff;
      overflow: hidden;
      position: relative;
      flex-wrap: nowrap;
    }

    .cbcn-threeproof-imgBox {
      position: relative;
    }

    .cbcn-threeproof-img {
      width: 853px;
      height: 100%;
      position: relative;
    }

    .cbcn-threeproof-icon {
      position: absolute;
      left: 40px;
      bottom: 30px;
      display: block;
    }

    .cbcn-threeproof-icon1 {
      width: 60px;
      height: 82px;
    }

    .cbcn-threeproof-icon2 {
      width: 254px;
      height: 62px;
    }

    #cbcn-dom-container .cbcn-threeproof-img img.cover:not(.active) {
      display: none;
    }

    #cbcn-dom-container .cbcn-threeproof-icon:not(.active) {
      display: none;
    }

    .cbcn-threeproof-fn.active {
      display: none;
    }

    .cbcn-threeproof-drawer {
      margin-top: auto;
      margin-bottom: auto;
      margin-left: auto;
      margin-right: auto;
      width: 387px;
      position: relative;
    }

    .cbcn-threeproof-title {
      justify-content: space-between;
    }

    .cbcn-threeproof-h5 {
      width: 351px;
    }

    .cbcn-threeproof-drawer-item {
      cursor: pointer;
      padding: 30px 0;
      border-bottom: 1px solid #ccc;
    }

    .cbcn-threeproof-drawer-item:nth-last-of-type(1) {
      border: none;
    }

    .cbcn-threeproof-drawer-icon {
      width: 34px;
      height: 34px;
      transition: all 0.5s;
      transform: rotateX(180deg);
    }

    .cbcn-threeproof-drawer-item.active .cbcn-threeproof-drawer-icon {
      transform: rotate(0);
    }

    .cbcn-threeproof-drawer-item.active .cbcn-threeproof-h5 {
      background: linear-gradient(90deg, #ab5cff 0%, #7593ff 50%, #35cbfd 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-threeproof-drawer-item .desc {
      box-sizing: border-box;
      overflow: hidden;
      width: 351px;
      height: 0;
      margin-top: 25px;
    }

    .cbcn-threeproof-drawer-item:first-child .desc {
      height: auto;
    }

    .cbcn-threeproof-fn {
      position: absolute;
      right: 40px;
      bottom: 30px;
    }
  }

  /* os */
  @media screen {
    .cbcn-os-safeRow {
      gap: 20px;
      justify-content: center;
    }

    .cbcn-os-img {
      width: 549.117px;
      height: 100px;
    }
  }

  /* os5 */
  @media screen {
    .cbcn-os5-safeRow {
      gap: 20px;
      flex-wrap: wrap;
    }

    .cbcn-os5-card {
      border-radius: 12px;
      background: var(--background-l2, #f2f2f2);
      overflow: hidden;
      justify-content: space-between;
      height: auto;
    }

    .cbcn-os5-title>p:nth-child(1) {
      width: fit-content;
    }

    .cbcn-os5-card1 {
      width: 313px;
    }

    .cbcn-os5-card2 {
      width: 480px;
    }

    .cbcn-os5-title {
      padding: 30px 30px 20px 30px;
    }

    .cbcn-os5-img1 {
      height: 261px;
      width: 100%;
    }

    .cbcn-os5-img2-1 {
      height: 332px;
      width: 100%;
    }

    .cbcn-os5-img2-2 {
      height: 305px;
      width: 100%;
    }
  }

  /* remark */
  @media screen {
    .cbcn-remark-section.wt {
      background: #FAFAFA;
    }

    .cbcn-remark-section ul,
    .cbcn-remark-section ol {
      padding-inline-start: 2em;
    }

    .cbcn-remark-section ol li {
      list-style: decimal;
      color: #7f7f7f;
    }
  }
}

@media screen and (max-width: 1441px) and (min-width: 981px) {
  /* navigation */
  @media screen {
    .cbcn-navigation-section {
      font-size: 20px !important;
      font-size: 1.0416666667vw !important;
    }

    .cbcn-navigation-item1 .cbcn-navigation-name {
      top: 8em;
    }

    .cbcn-navigation-item1 .cbcn-navigation-name .cbcn-pc-h0 {
      font-size: 6em;
    }

    .cbcn-navigation-section .cbcn-pc-h5,
    .cbcn-color-section .cbcn-pc-h5 {
      font-size: 1.4em;
    }

    .cbcn-navigation-section .cbcn-pc-b2 {
      font-size: 1.05em;
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1) .cbcn-navigation-desc {
      top: 3em;
    }

    .cbcn-navigation-item:not(.cbcn-navigation-item1,
      .cbcn-navigation-item2):hover .cbcn-navigation-img {
      transform: translate(-50%, -50%) scale(0.75);
    }
  }

  /* longfocus */
  .cbcn-longfocus-section {
    font-size: 20px !important;
    font-size: 1.0416666667vw !important;
  }

  .cbcn-eyeprotection-img {
    width: 1600px;
    height: 1125px;
    margin-top: -20px;
  }

  .cbcn-eyeprotection-section {
    padding: 100px 0;
  }

  .cbcn-eyeprotection-param {
    margin-top: 20em;
  }
}

@media screen and (max-width: 1439px) and (min-width: 981px) {
  /* camera */
  @media screen {
    .cbcn-camera-section {
      font-size: 20px !important;
      font-size: 1.0416666667vw !important;
    }

    .cbcn-camera-section .cbcn-pc-h5 {
      font-size: 1.4em;
    }

    .cbcn-camera-section .cbcn-pc-b3 {
      font-size: 0.75em;
    }
  }

  .cbcn-battery-img {
    width: 980px;
    height: 562.6px;
  }

  /* threeproof */
  .cbcn-threeproof-section {
    font-size: 20px !important;
    font-size: 1.0416666667vw !important;
  }

  .cbcn-threeproof-content {
    width: 95vw;
  }

  .cbcn-threeproof-img {
    width: 50vw;
  }
}