@media screen and (min-width: 981px) {
  /* kv */
  @media screen {
    .cbcn-kv-screen {
      width: 100vw;
      height: calc(61.35 / 128 * 100vw);
    }

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

    .cbcn-kv-logo {
      width: 2.75em;
      height: 3.2em;
      position: absolute;
      left: 1.3em;
      bottom: 2.95em;
    }
  }

  /* navigation */
  @media screen {
    .cbcn-navigation-screen {
      background-color: #FAFAFA;
    }

    .cbcn-navigation-screen a {
      text-decoration: none;
    }

    .cbcn-navigation-wrapper {
      height: 100%;
      justify-content: center;
    }

    .cbcn-navigation-swiper {
      /* width: 24em; */
      transform: translateX(100vw);
    }

    .cbcn-navigation-swiper.active {
      animation: navigationAni 1.75s ease-in-out forwards;
    }

    .cbcn-navigation-txt p,
    .cbcn-navigation-txt h2 {
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-navigation-txt p sup,
    .cbcn-navigation-txt h2 sup {
      color: rgba(255, 255, 255, 0.95) !important;
    }

    @keyframes navigationAni {
      0% {
        transform: translateX(100vw);
      }

      100% {
        transform: translateX(0);
      }
    }

    .cbcn-navigation-swiper .swiper-wrapper {
      justify-content: center;
      align-items: center;
      gap: 20px;
    }


    .cbcn-navigation-item {
      width: 16.30435em;
      height: 25.76em;
      border-radius: 1.5em;
      background: #000;
      overflow: hidden;
      transition: width 0.3s, height 0.3s;
    }

    .cbcn-navigation-item:hover {
      width: 20em;
      height: 30.66665em;
    }

    .cbcn-navigation-item:not(:nth-of-type(1)) {
      transform: translateX(100vw);
    }

    .cbcn-navigation-swiper.active .cbcn-navigation-item {
      animation: navigationAni 1s ease-in-out forwards;
    }

    .cbcn-navigation-swiper.active .cbcn-navigation-item:nth-of-type(2) {
      animation-delay: 0.3s;
    }

    .cbcn-navigation-swiper.active .cbcn-navigation-item:nth-of-type(3) {
      animation-delay: 0.4s;
    }

    .cbcn-navigation-swiper.active .cbcn-navigation-item:nth-of-type(4) {
      animation-delay: 0.5s;
    }

    .cbcn-navigation-swiper.active .cbcn-navigation-item:nth-of-type(5) {
      animation-delay: 0.6s;
    }

    .cbcn-navigation-img {
      width: 100%;
      height: 18.34239em;
      transition: height 0.3s;
    }

    .cbcn-navigation-item:hover .cbcn-navigation-img {
      height: 22.5em;
    }

    .cbcn-navigation-txt {
      width: 100%;
      height: 6em;
      padding: 2em 1.5em;
      gap: 0.75em;
      position: absolute;
      bottom: 0;
      background-color: #000;
      transition: all 0.3s;
    }

    .cbcn-navigation-txt * {
      color: rgba(0, 0, 0, 0.9);
      transition: all 0.3s;
    }

    .cbcn-navigation-txt p {
      opacity: 0;
    }

    .cbcn-navigation-txt sup {
      transition: fontSize 0s, color 0.3s;
    }

    .cbcn-navigation-item:hover .cbcn-navigation-txt,
    .cbcn-navigation-item.swiper-slide-active .cbcn-navigation-txt {
      height: 14em;
      background-color: #4A76C1;
    }

    .cbcn-navigation-item:hover .cbcn-navigation-txt *,
    .cbcn-navigation-item.swiper-slide-active .cbcn-navigation-txt * {
      color: rgba(255, 255, 255, 0.95);
    }

    .cbcn-navigation-item:hover .cbcn-navigation-txt p,
    .cbcn-navigation-item.swiper-slide-active .cbcn-navigation-txt p,
    .cbcn-navigation-item:hover .cbcn-navigation-txt p sup,
    .cbcn-navigation-item.swiper-slide-active .cbcn-navigation-txt p sup {
      color: rgba(255, 255, 255, 0.65);
      opacity: 1;
    }

    .cbcn-navigation-item:not(:hover) .cbcn-h4 {
      font-size: 1.08695em;
    }

    .cbcn-navigation-item:not(:hover) .cbcn-p1 {
      font-size: 1.08695em;
    }

    .cbcn-navigation-btnDiv {
      width: 100%;
      justify-content: flex-end;
      opacity: 0;
    }

    .cbcn-navigation-btnDiv.active {
      transition: all 0.3s linear;
      transition-delay: 2.4s;
      opacity: 1;
    }

    .cbcn-navigation-btnList {
      width: 9em;
      height: 2.5em;
      padding: 0.2em;
      border-radius: 2.5em;
      background-color: rgba(0, 0, 0, 0.08);
      overflow: hidden;

      align-items: center;
      justify-content: space-between;
      margin-top: 1.5em;
    }

    .cbcn-navigation-btn {
      width: 2.1em;
      height: 2.1em;
      border-radius: 50%;

      align-items: center;
      justify-content: center;
      background-color: #fff;
      transition: all 0.25s;
    }

    .cbcn-navigation-rightBtn .cbcn-navigation-svg {
      transform: rotate(180deg);
    }

    .cbcn-navigation-btn.disabled {
      background-color: transparent;
      opacity: 0.2;
    }
  }

  /* design */
  @media screen {
    .cbcn-design-content {
      width: 100%;
      height: 100%;
      background-color: #262626;
      justify-content: space-between;
      transition: all 1s;
    }

    .cbcn-design-content.active {
      padding: 1em;
      gap: 1em;
    }

    .cbcn-design-video {
      flex: 1;
      height: 100%;
      overflow: hidden;
      transition: all 1s;
    }

    .cbcn-design-content.active .cbcn-design-video {
      border-radius: 36px;
    }

    .cbcn-design-txt {
      width: 0%;
      height: 100%;
      opacity: 0;
      position: relative;
      border-radius: 36px;
      background: linear-gradient(38deg, #9CCEF2 3.61%, #3263C2 50.12%, #0F347A 96.63%);
      overflow: hidden;
      transition: all 1s;
    }

    .cbcn-design-content.active .cbcn-design-txt {
      width: 50%;
      opacity: 1;
    }

    .cbcn-design-txt-p {
      font-size: 3em;
      line-height: 110%;
      transform-origin: right center;
      transform: translate(-50%, -50%) scale(10);
      transition: transform 1s;
    }

    .cbcn-design-content.active .cbcn-design-txt-p {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* curved */
  @media screen {

    /* .cbcn-curved-screen {
      width: 100%;
      height: 67em;
    } */
    .cbcn-curved-screen {
      background-color: #090909 !important;
    }

    .cbcn-curved-video {
      width: 100%;
      height: 32em;
    }

    #cbcn-dom-container .cbcn-curved-video video {
      object-position: bottom center;
    }

    .cbcn-curved-txt1 {
      margin-top: 1.5em;
      width: 32.3em;
    }
  }

  /* color */
  @media screen {
    .cbcn-color-swiper {
      width: 100%;
      height: 46.5em;
    }

    .cbcn-color-txt {
      width: 24em;
      bottom: 10em;
      gap: 0.5em;
    }

    .cbcn-color-btnListDiv {
      bottom: 5.5em;
      z-index: 99;
      display: inline-flex;
    }

    .cbcn-color-btnList {
      display: inline-flex !important;
      width: auto;
      padding: 0.5em;
      align-items: center;
      gap: 0.6em;
      border-radius: 4.25em;
      background: rgba(255, 255, 255, 0.15);
    }

    .cbcn-color-btn {
      width: 2em;
      height: 2em;
      cursor: pointer;
      position: relative;
    }

    .cbcn-color-btn svg {
      width: 2em;
      height: 2em;
    }

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



    .cbcn-color-btn.index1 .cbcn-color-circle {
      stroke: #2d5dca;
    }

    .cbcn-color-btn.index2 .cbcn-color-circle {
      stroke: #a88df6;
    }

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

  /* appearance */
  @media screen {
    .cbcn-appearance-content {
      padding-top: 7.5em;
      height: 53.4em;
      gap: 3.5em;
    }

    .cbcn-appearance-videoDiv {
      width: 48.8em;
      height: 24em;
      position: relative;
    }

    .cbcn-appearance-video {
      width: 100vw;
      height: 53.4em;
      object-fit: cover;
      overflow: hidden;
      top: -7.5em;
      transition: all 1s;
    }

    .cbcn-appearance-content.active .cbcn-appearance-video {
      width: 100%;
      height: 100%;
      border-radius: 1.5em;
      top: 0;
    }

    .cbcn-appearance-txt1 {
      opacity: 0;
      margin-top: 10em;
      transition: all 1s;
    }

    .cbcn-appearance-content.active .cbcn-appearance-txt1 {
      opacity: 1;
      margin-top: 0;
    }
  }

  /* zeiss */
  @media screen {
    .cbcn-zeiss-screen {
      background-color: #0D0D0D !important;
    }

    .cbcn-zeiss-content1 {
      transform-origin: 100% 70%;
      transition: all 2s, opacity 0.5s;
      align-items: center;
    }

    .cbcn-zeiss-box {
      margin-top: 1.5em;
      align-items: flex-end;
      gap: 0.7em;
    }

    .cbcn-zeiss-title {
      font-size: 160px;
      line-height: 140%;
    }

    .cbcn-zeiss-txt {
      width: 20px;
      height: 20px;
      background: #C1DCFB;
      position: relative;
      z-index: 9;
      margin-bottom: 52px;
    }

    .cbcn-zeiss-content2 {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .cbcn-zeiss-video {
      width: 20px;
      height: 20px;
      position: absolute;
      left: calc(50% + 343px);
      top: calc(50% + 74px);
    }

    .cbcn-zeiss-video.active {
      opacity: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      transition: all 1.5s, opacity 0.5s;
    }

    .cbcn-zeiss-desc,
    .cbcn-zeiss-video {
      opacity: 0;
    }

    .cbcn-zeiss-desc {
      width: 49em;
    }
  }

  /* rearCamera */
  @media screen {
    .cbcn-rearCamera-screen {
      position: relative;
      height: 48.5em;
    }

    .cbcn-rearCamera-title {
      top: 4.5em;
      width: 640px;
      z-index: 9;
    }

    .cbcn-rearCamera-img {
      width: 82.72435em;
      height: 46.5em;
      bottom: 0;
    }

    .cbcn-rearCamera-param {
      position: absolute;
      z-index: 9;
      gap: 1em;
    }

    .cbcn-rearCamera-param1 {
      width: 17.25em;
      top: 25.25em;
      left: calc(50% - 24em);
    }

    .cbcn-rearCamera-param2 {
      width: 26.9em;
      top: 26.5em;
      left: calc(50% - 24em);
    }

    .cbcn-rearCamera-param3 {
      width: 20.2em;
      top: 23.2em;
      right: calc(50% - 25em);
      align-items: flex-end;
    }

    .cbcn-rearCamera-desc {
      width: 11.5em;
      gap: 0.5em;
    }

    .cbcn-rearCamera-descText {
      margin-bottom: 4px;
    }
  }

  /* fullFocusPortrait */
  @media screen {
    .cbcn-fullFocusPortrait-screen {
      background-color: #000000 !important;
    }

    .cbcn-fullFocusPortrait-txt1 {
      width: 100%;
      position: absolute;
      top: 7.5em;
      left: 0;
    }

    .cbcn-fullFocusPortrait-imageDiv {
      width: 20.55em;
      height: 25.7em;
      flex-shrink: 0;
      perspective: 1000;
      -webkit-perspective: 1000;
      margin-top: -2em;
    }

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

    .cbcn-fullFocusPortrait-image.left1 {
      transform: translateY(-50%) translateX(-16em) rotateY(30deg) scale(0.7);
      -webkit-transform: translateY(-50%) translateX(-16em) rotateY(30deg) scale(0.7);
      z-index: 30;
      background-color: #fff;
    }

    .cbcn-fullFocusPortrait-image.left1 img {
      fill: linear-gradient(270deg,
          rgba(242, 242, 242, 0.6) 0%,
          rgba(242, 242, 242, 0.24) 100%),
        lightgray 50% / cover no-repeat;
      opacity: 0.6;
      filter: blur(5px);
    }

    .cbcn-fullFocusPortrait-image.right1 {
      transform: translateY(-50%) translateX(16em) rotateY(-30deg) scale(0.7);
      -webkit-transform: translateY(-50%) translateX(16em) rotateY(-30deg) scale(0.7);
      z-index: 30;
      background-color: #fff;
    }

    .cbcn-fullFocusPortrait-image.right1 img {
      fill: linear-gradient(270deg,
          rgba(242, 242, 242, 0.6) 0%,
          rgba(242, 242, 242, 0.24) 100%),
        lightgray 50% / cover no-repeat;
      opacity: 0.6;
      filter: blur(5px);
    }

    .cbcn-fullFocusPortrait-InfoDiv {
      top: calc(50% + 15.5vw);
      margin-top: -2em;
    }

    .cbcn-fullFocusPortrait-video1,
    .cbcn-fullFocusPortrait-video2 {
      width: 22.45em;
      top: 2.2em;
    }

    .cbcn-fullFocusPortrait-Info {
      width: 15.7em;
      gap: 0.3em;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: all 1s;
    }

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

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

  /* classicStyle */
  @media screen {
    .cbcn-classicStyle-swiper {
      width: 19em;
      position: relative;
      margin-top: 3.5em;
    }

    .cbcn-classicStyle-img {
      width: 19em;
      height: 25.175em;
      border-radius: 1em;
      overflow: hidden;
      transform: scale(0.9);
      transition: all 0.3s;
    }

    .cbcn-classicStyle-imgLeft {
      transform-origin: left center;
    }

    .cbcn-classicStyle-imgRight {
      transform-origin: right center;
    }

    .cbcn-classicStyle-img.active {
      transform: scale(1);
    }

    .cbcn-classicStyle-switchBtn-list {
      margin-top: 1.5em;
    }

    .cbcn-classicStyle-desc {
      margin-top: 2.5em;
      text-align: center;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-classicStyle-desc.active {
      opacity: 1;
    }
  }

  /* backlitSelfie */
  @media screen {
    .cbcn-backlitSelfie-swiper {
      margin-top: 3.5em;
    }

    .cbcn-backlitSelfie-imgDiv {
      gap: 1em;
    }

    .cbcn-backlitSelfie-img {
      width: 24em;
      height: 27em;
      border-radius: 1.5em;
      overflow: hidden;
    }

    .cbcn-backlitSelfie-btn {
      position: absolute;
      bottom: 1.5em;
      padding: 0.4em 0.6em;
      border-radius: 1.2em;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      overflow: hidden;
    }

    .cbcn-backlitSelfie-btn1 {
      left: 1.75em;
    }

    .cbcn-backlitSelfie-btn2 {
      right: 1.75em;
    }

    .cbcn-backlitSelfie-cardList {
      overflow: hidden;
    }

    .cbcn-backlitSelfie-lineList {
      margin-top: 1.5em;
      width: 60%;
      gap: 0.5em;
      z-index: 9;
    }

    .cbcn-backlitSelfie-line {
      flex: 1;
      height: 0.25em;
      background: #E5E5E5;
      border-radius: 2em;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .cbcn-backlitSelfie-line::after {
      content: "";
      width: 0%;
      height: 100%;
      background-color: #2D5DCA;
      position: absolute;
      top: 0;
      left: 0;
    }

    .cbcn-backlitSelfie-line.active::after {
      width: 100%;
      transition: width 3s linear;
    }
  }

  /* 50MP */
  @media screen {
    .cbcn-50MP-screen {
      padding: 1em;
    }

    .cbcn-50MP-content {
      height: 100%;
    }

    .cbcn-50MP-box1 {
      position: relative;
    }

    .cbcn-50MP-box1 .cbcn-param {
      position: absolute;
      left: 4.35em;
      bottom: 1.65em;
      padding-top: 1.5em;
      border-top: 1px solid #fff;
    }

    .cbcn-50MP-box1 .cbcn-param .txt {
      opacity: 1;
    }

    .cbcn-50MP-txt1 {
      gap: 3.5em;
    }

    .cbcn-50MP-img1 {
      width: 100%;
      height: 27em;
      flex-shrink: 0;
      border-radius: 1.5em;
      overflow: hidden;
    }

    .cbcn-50MP-img2,
    .cbcn-50MP-img2-bg {
      width: 29.15em;
      height: 21.9em;
      border-radius: 1.5em;
      overflow: hidden;
    }

    .cbcn-50MP-box2 {
      gap: 5em;
      align-items: center;
    }

    .cbcn-50MP-txt2 {
      width: 31.45em;
    }

    .cbcn-50MP-img2-bg {
      z-index: 9;
      right: calc(50% + 2em);
      object-fit: cover;
      opacity: 0;
    }

    .cbcn-50MP-param {
      bottom: 2.5em;
      gap: 2em;
      z-index: 99;
    }

    .cbcn-50MP-param .cbcn-param {
      width: 17em;
      padding-top: 1.5em;
      border-top: 1px solid #fff;
    }

    .cbcn-50MP2-screen {
      height: 46.5em;
    }
  }

  /* night */
  @media screen {

    /* .cbcn-night-txt1 {
      width: 40.65em;
    } */
    .cbcn-night-img {
      width: 100%;
      height: 36.35em;
      border-radius: 1.5em;
      overflow: hidden;

      margin: 3.5em auto 0;
    }
  }

  /* 4K */
  @media screen {
    .cbcn-4K-content {
      width: 100%;
      height: 100%;
      background-color: #000000;
      justify-content: space-between;
      padding: calc(1em + 60px) 1em 1em;
      gap: 1em;
    }

    .cbcn-4K-video {
      flex: 1;
      height: 100%;
      border-radius: 1.8em;
      overflow: hidden;
      transition: all 1s;
      position: relative;
    }

    .cbcn-4K-video::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0);
      transition: all 0.5s;
    }

    .cbcn-4K-video.mask::after {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .cbcn-4K-content.active .cbcn-4K-video {
      border-radius: 0;
    }

    .cbcn-4K-txt {
      width: 50%;
      height: 100%;
      position: relative;
      border-radius: 1.8em;
      background: linear-gradient(38deg, #9CCEF2 3.61%, #3263C2 50.12%, #0F347A 96.63%);
      overflow: hidden;
      opacity: 1;
      transition: all 1s;
    }

    .cbcn-4K-content.active .cbcn-4K-txt {
      width: 0;
      opacity: 0;
    }

    .cbcn-4K-txt p {
      font-size: 21em;
      transform-origin: right center;
      transform: translate(-50%, -50%) scale(15);
      transition: transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
      background: conic-gradient(from 176deg at 47.1% 58.56%, #C9DFFF 0deg, #FFF 216.00088834762573deg, #B1D1FF 360deg);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-4K-txt p.active {
      transform: translate(-50%, -50%) scale(1);
    }

    .cbcn-4K-txtDiv {
      top: 0;
      width: 49em;
      height: 100%;
      justify-content: center;
      align-items: flex-end;
      opacity: 0;
    }

    .cbcn-4K-txt1 {
      width: 32.35em;
    }
  }

  /* studioQuality */
  @media screen {
    .cbcn-studioQuality-txt1 {
      position: absolute;
      top: 7.5em;
      left: 50%;
      transform: scale(10) translate(0, -100%);
      transform-origin: 50% 50%;
    }

    #cbcn-dom-container .cbcn-studioQuality-txt1 sup {
      font-size: 0.35em;
      top: -0.35em;
    }

    .cbcn-studioQuality-txt2,
    .cbcn-studioQuality-txt3,
    .cbcn-studioQuality-img1 {
      opacity: 0;
    }

    .cbcn-studioQuality-txt2 {
      width: 49em;
      top: 13em;
      z-index: 9;
    }

    .cbcn-studioQuality-txt2 span {
      background: linear-gradient(296deg, #D7F0FF 48.68%, #4170E5 85.02%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-studioQuality-txt2 .cbcn-h2 {
      line-height: 150%;
    }

    .cbcn-studioQuality-imgDiv {
      position: absolute;
      right: 2.65em;
      bottom: 0;
      transform-origin: 100% 100%;
    }

    .cbcn-studioQuality-img1 {
      width: 32em;
      height: 40em;
      display: block;
    }

    .cbcn-studioQuality-img2 {
      width: 7.2em;
      height: 7.2em;
      display: block;
      position: absolute;
      left: 5.36em;
      top: 18.2em;
    }

    .cbcn-studioQuality-txtDiv {
      height: 100%;
    }

    .cbcn-studioQuality-txt3 {
      width: 33.35em;
      left: 0;
    }

    .cbcn-studioQuality-param {
      width: 15.65em;
      margin-top: 3.5vw;
      gap: 1.5em;
    }

    .cbcn-studioQuality-param1 .param {
      background: linear-gradient(296deg, #D7F0FF 0.5%, #4170E5 85.02%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* auraLight */
  @media screen {
    .cbcn-auraLight-swiper {
      margin-top: 3.5em;
    }

    .cbcn-auraLight-imgDiv {
      gap: 1em;
    }

    .cbcn-auraLight-img {
      width: 24em;
      height: 27em;
      border-radius: 1.5em;
      overflow: hidden;
    }

    .cbcn-auraLight-btn {
      position: absolute;
      bottom: 1.5em;
      padding: 0.4em 0.6em;
      border-radius: 1.2em;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      overflow: hidden;
    }

    .cbcn-auraLight-btn1 {
      left: 1.75em;
    }

    .cbcn-auraLight-btn2 {
      right: 1.75em;
    }
  }

  /* 3DStudio */
  @media screen {
    .cbcn-3DStudio-swiper {
      margin-top: 3.5em;
    }

    .cbcn-3DStudio-imgDiv {
      gap: 1em;
    }

    .cbcn-3DStudio-img {
      width: 24em;
      height: 27em;
      border-radius: 1.5em;
      overflow: hidden;
    }

    .cbcn-3DStudio-btn {
      position: absolute;
      bottom: 1.5em;
      padding: 0.4em 0.6em;
      border-radius: 1.2em;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      overflow: hidden;
    }

    .cbcn-3DStudio-btn1 {
      left: 1.75em;
    }

    .cbcn-3DStudio-btn2 {
      right: 1.75em;
    }
  }

  /* filmCamera */
  @media screen {
    .cbcn-filmCamera-Content {
      height: 100%;
    }

    .cbcn-filmCamera-txt1 {
      width: 25em;
      left: 0;
    }

    .cbcn-filmCamera-imgWrapper {
      width: 18.3066em;
      height: 38.2145em;

      left: 617px;
    }

    .cbcn-filmCamera-bg1 {
      width: 18.3066em;
      height: 32.95em;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
    }

    .cbcn-filmCamera-bg2 {
      width: 18.3066em;
      height: 5.55em;
      position: absolute;
      top: 32.9em;
      left: 0;
      z-index: 2;
      display: block;
    }

    .cbcn-filmCamera-imgDiv {
      position: absolute;
      left: 1.95em;

      align-items: center;
      gap: 2.5em;
      z-index: 5;
    }

    .cbcn-filmCamera-img1 {
      width: 14.25em;
      height: 23.1em;
    }

    .cbcn-filmCamera-img2 {
      width: 23.1em;
      height: 14.6em;
      margin-left: 5em;
      opacity: 0;
    }
  }

  /* dopamine */
  @media screen {
    .cbcn-dopamine-screen {
      height: 46.5em;
    }

    .cbcn-dopamine-content {
      gap: 4.15em;
    }

    .cbcn-dopamine-swiper {
      width: 25.55em;
      overflow: hidden;
      position: relative;
    }

    .cbcn-dopamine-img {
      width: 25.55em;
      height: 21.65em;
    }

    .cbcn-dopamine-icon {
      width: 4.30535em;
      height: 1.31795em;
      position: absolute;
      top: 1.3em;
      right: 1.24em;
      z-index: 9;
    }

    .cbcn-dopamine-txt1 {
      width: 28.2em;
    }

    .cbcn-dopamine-switchBtn-list {
      margin-top: 4.2em;
      justify-content: flex-start;
    }
  }

  /* aiImage */
  @media screen {
    /* .cbcn-screen.cbcn-aiImage-screen {
      background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
    } */

    .cbcn-aiImage-txt2 {
      opacity: 0;
      margin-top: 3.5em;
      align-items: center;
      gap: 0.5em;
      transform: translate(0, 12em);
      transition: all 1s;
    }

    .cbcn-aiImage-content.active .cbcn-aiImage-txt2 {
      transform: translate(0, 0em);
      opacity: 1;
    }

    .cbcn-aiImage-logo1 {
      width: 10.548em;
      height: 10.548em;
    }

    .cbcn-aiImage-title {
      position: relative;
    }

    .cbcn-aiImage-svg1 {
      position: absolute;
      left: -1.05em;
      top: -1.1em;
    }

    .cbcn-aiImage-svg2 {
      position: absolute;
      right: -1.05em;
      bottom: -0.6em;
    }

    .cbcn-aiImage-imgDiv {
      margin-top: 2.5em;
      justify-content: center;
      gap: 3.5em;
    }

    .cbcn-aiImage-img1,
    .cbcn-aiImage-img3 {
      width: 16em;
      height: 10.85em;
      border-radius: 0.5em;
      overflow: hidden;
      opacity: 0;
      transition: all 1s;
    }

    .cbcn-aiImage-img1 {
      transform: translate(0, 8em);
    }

    .cbcn-aiImage-content.active .cbcn-aiImage-img1 {
      transform: translate(0, 0em);
      opacity: 1;
    }

    .cbcn-aiImage-img2 {
      width: 19em;
      height: 12.5em;
      border-radius: 0.5em;
      overflow: hidden;
      margin-top: 4.25em;
      opacity: 0;
      transform: translate(0, 12em);
      transition: all 1s;
    }

    .cbcn-aiImage-content.active .cbcn-aiImage-img2 {
      transform: translate(0, 0em);
      opacity: 1;
    }

    .cbcn-aiImage-img3 {
      transform: translate(0, 5em);
    }

    .cbcn-aiImage-content.active .cbcn-aiImage-img3 {
      transform: translate(0, 0em);
      opacity: 1;
    }
  }

  /* aiImage2 */
  @media screen {
    .cbcn-screen.cbcn-aiImage2-screen {
      height: 50vw;
    }

    .cbcn-aiImage2-content {
      width: 60em;
      height: 33vw;
      border-radius: 1.5em;
      background-color: #242424;
      overflow: hidden;
    }

    .cbcn-aiImage2-leftDiv {
      width: 30em;
      height: 33vw;
      border-radius: 1.5em 0 0 1.5em;
      background-color: #333232;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .cbcn-aiImage2-titleDiv {
      position: relative;
      /* align-items: center; */
      gap: 1em;
    }

    .cbcn-aiImage2-icon {
      width: 2.5em;
      height: 2.5em;
    }

    .cbcn-aiImage2-title {
      display: none;
    }

    .cbcn-aiImage2-title.active {
      display: block;
    }

    .cbcn-aiImage2-videoBtn-list {
      bottom: 5.2em;
      justify-content: center;
    }

    .cbcn-aiImage2-swiper {
      left: 50%;
      width: 30em;
      overflow: hidden;
    }

    .cbcn-aiImage2-video {
      width: 18.25em;
      height: 38.5em;
      flex-shrink: 0;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-aiImage2-img {
      height: 100%;
      position: relative;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-aiImage2-img video {
      /* width: 17.15em; */
      height: 98%;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-aiImage2-img img {
      position: relative;
      z-index: 9;
    }


    .cbcn-aiImage2-videoBtn.progress::after {
      width: calc(100% - 0.4em);
      transition: width 10s linear;
    }

    .cbcn-aiImage2-videoBtn:nth-of-type(2).progress::after {
      transition: width 5s linear;
    }

    .cbcn-aiImage2-videoBtn:nth-of-type(3).progress::after {
      transition: width 6s linear;
    }
  }

  /* performance */
  @media screen {
    .cbcn-performance-screen {
      background-color: #0d0d0d;
      overflow: hidden;
    }

    .cbcn-performance-content1 {
      transform-origin: 100% 70%;
      transition: all 2s, opacity 0.5s;
    }

    .cbcn-performance-box {
      margin-top: 2em;
      align-items: flex-end;
    }

    .cbcn-performance-title {
      font-size: 160px;
      line-height: 110%;
    }

    .cbcn-performance-txt {
      width: 20px;
      height: 20px;
      background: #C1DCFB;
      position: relative;
      z-index: 9;
      margin-left: 20px;
      margin-bottom: 28px;
    }

    .cbcn-performance-content2 {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;

      background-color: transparent;
      transition: all 1s;
      justify-content: space-between;
    }

    .cbcn-performance-content2.active {
      padding: calc(1em + 60px) 1em 1em;
      background-color: #262626;
    }
  }

  /* performance2 */
  @media screen {
    .cbcn-performance2-screen {
      width: 100%;
      height: 46.5em;
    }

    .cbcn-performance2-txt1 {
      gap: 2em;
    }

    .cbcn-performance2-descBox {
      align-items: flex-end;
    }

    .cbcn-performance2-desc {
      width: 1.1em;
      height: 1.1em;
      background-color: #fff;
      margin-bottom: 1.4em;
      margin-left: 1.25em;
    }
  }

  /* battery */
  @media screen {
    .cbcn-battery-videoDiv {
      width: 100%;
      position: relative;
      overflow: hidden;
      transition: all 0.25s, width 1s;
    }

    .cbcn-performance-content2.active .cbcn-battery-videoDiv {
      border-radius: 1.5em;
      width: calc(50% - 0.5em);
    }

    .cbcn-battery-video {
      width: 20px;
      height: 20px;
      position: absolute;
      left: calc(50% + 616px);
      top: calc(50% + 80px);
      display: block;
      object-fit: cover;
      opacity: 0;
    }

    .cbcn-battery-video.active {
      opacity: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      transition: all 1.5s, opacity 0.5s;
    }

    .cbcn-battery-txtDiv {
      position: relative;
      width: 0%;
      height: 100%;
      transition: all 1s;
    }

    .cbcn-performance-content2.active .cbcn-battery-txtDiv {
      width: calc(50% - 0.5em);
    }

    .cbcn-battery-swiper {
      width: 100%;
      height: 100%;
      border-radius: 1.5em;
      background-color: #0d0d0d;
      padding: 4em 2.5em 2.5em;
      overflow: hidden;

      justify-content: space-between;
      position: absolute;
      left: 0;
    }

    .cbcn-battery-swiper .swiper-slide {
      flex-shrink: 0;
      padding-bottom: 5em;
      justify-content: space-between;
    }

    .cbcn-battery-swiper .cbcn-battery-6000 {
      padding-bottom: 2.4em;
    }

    .cbcn-battery-param {
      margin-top: 2.4em;
      margin-right: 6.5em;
      gap: 0.25em;
    }

    .cbcn-battery-param .cbcn-p3 {
      opacity: 0.77;
    }

    .cbcn-battery-btnList {
      gap: 1em;
    }

    .cbcn-battery-btn {
      flex: 1;
      height: 0.25em;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2em;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .cbcn-battery-btn.active::after {
      content: "";
      width: 0%;
      height: 100%;
      background-color: #4A76C1;
      position: absolute;
      top: 0;
      left: 0;
      animation: batteryProgress 3s linear forwards;
    }

    @keyframes batteryProgress {
      0% {
        width: 0%;
      }

      100% {
        width: 100%;
      }
    }

    .cbcn-battery-txt3 {
      margin-top: 5em;
      opacity: 0;
    }

    .cbcn-battery-iconBox {
      width: 100%;
      height: 18.5em;
      overflow: hidden;
      align-items: center;
      justify-content: center;
      gap: 1.6em;
    }

    .cbcn-battery-icon {
      height: 17.5em;
      flex-shrink: 0;
      object-fit: contain;
    }
  }

  /* waterproof */
  @media screen {
    .cbcn-waterproof-txt1 {
      position: relative;
      z-index: 9;
      width: 40.7em;
    }

    .cbcn-waterproof-imgDiv {
      position: relative;
      height: 100%;
      opacity: 1;
      margin-left: 0em;
    }

    .cbcn-waterproof-img {
      width: 73.8em;
      height: 41.5em;
    }
  }

  /* waterproof2 */
  @media screen {
    .cbcn-waterproof2-safeRow {
      position: absolute !important;
      justify-content: space-between;
      opacity: 0;
      margin-left: 30em;
    }

    .cbcn-waterproof2-txt1 {
      position: relative;
      z-index: 9;
      width: 24em;
      padding-top: 1.75em;
    }

    .cbcn-waterproof2-imgDiv {
      position: relative;
      height: 25em;
    }

    .cbcn-waterproof2-img {
      width: 19.85em;
      height: 25em;
    }
  }

  /* antiFall */
  @media screen {
    .cbcn-antiFall-content1 {
      width: 100%;
      height: 39.45em;
      justify-content: flex-end;
      align-items: center;
    }

    .cbcn-antiFall-imgDiv {
      height: 100%;
      position: relative;
    }

    .cbcn-antiFall-img {
      width: 70.13335em;
      height: 39.45em;
      right: -1em;
    }

    .cbcn-antiFall-txt1 {
      position: relative;
      z-index: 9;
      width: 24em;
    }

    .cbcn-antiFall-iconParam {
      position: absolute;
      left: 0;
      bottom: -7.5em;
      gap: 1.6em;
      align-items: center;
      width: 19.85em;
    }

    .cbcn-antiFall-txt1 .cbcn-antiFall-iconParam p {
      margin: 0 !important;
    }

    .cbcn-antiFall-icon {
      width: 5.39365em;
      height: 5.5em;
      flex-shrink: 0;
    }

    .cbcn-antiFall-content2 {
      padding: 5.5em 0 12em;
      width: 100%;
      gap: 2em 2.85em;
      flex-wrap: wrap;
    }

    .cbcn-antiFall-param {
      width: 14.25em;
      padding-top: 1em;
      border-top: 1px solid #4d4d4d;
    }

    .cbcn-antiFall-p1 {
      background: linear-gradient(296deg, #D7F0FF 0.5%, #4170E5 85.02%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-antiFall-param:nth-of-type(3n + 2) {
      width: 14.75em;
    }
  }

  /* chip */
  @media screen {
    .cbcn-chip-screen {
      width: 100%;
      height: 48em;
      overflow: hidden;
    }

    .cbcn-chip-videoDiv {
      width: 100%;
      height: 48em;
      position: relative;
      overflow: hidden;
    }

    .cbcn-chip-img {
      height: 100%;
      left: 0;
      transition: all 1s ease-in-out;
    }

    .cbcn-chip-img.active {
      left: -47%;
    }

    .cbcn-chip-swiper {
      left: calc(50% + 0.5em);

      width: 47.2%;
      height: 67.7%;
      padding: 3.125% 2.6% 0em 2.6%;
      border-radius: 1.5em;
      background-color: #fff;
      overflow: hidden;
    }

    .cbcn-chip-card {
      width: 100%;
      height: calc(100% - 4em);
      justify-content: space-between;
    }

    .cbcn-chip-title3-sh {
      font-family: "vivoSans-ExtraBold";
      font-size: 1.4em;
      line-height: 110%;
      margin-bottom: var(--Title-Spac---Small) !important;
    }

    .cbcn-chip-title3-h1 {
      font-family: "vivoSans-ExtraBold";
      font-size: 2.8em;
      line-height: 120%;
    }

    .cbcn-chip-param {
      gap: 2.5em;
    }

    .cbcn-chip-param .cbcn-param {
      width: 12em;
    }

    .cbcn-chip-param .param {
      background: #2D5DCA;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-chip-param svg {
      width: 0.4286em;
      height: 0.81em;
    }

    .cbcn-chip-btnList {
      width: 88.2%;
      bottom: 2em;
      gap: 1em;
      z-index: 9;
    }

    .cbcn-chip-btn {
      flex: 1;
      height: 0.25em;
      background: #E5E5E5;
      border-radius: 2em;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .cbcn-chip-btn.active::after {
      content: "";
      width: 0%;
      height: 100%;
      background-color: #2D5DCA;
      position: absolute;
      top: 0;
      left: 0;
      animation: chipProgress 4s linear forwards;
    }

    @keyframes chipProgress {
      0% {
        width: 0%;
      }

      100% {
        width: 100%;
      }
    }
  }

  /* sound */
  @media screen {
    .cbcn-sound-imgDiv {
      margin-top: 3.75em;
      width: 100%;
      height: 19.1em;
      position: relative;
    }

    .cbcn-sound-img {
      width: 31.65em;
      height: 14.90795em;
    }

    .cbcn-sound-round {
      width: 10.75em;
      height: 19.1em;
      right: calc(50% + 16.5em);
    }

    .cbcn-sound-round div {
      width: 1.05em;
      height: 5.6em;
      border-radius: 50%;
      background: radial-gradient(277.66% 213.89% at 122.92% 50%, rgba(64, 90, 149, 0.00) 0.67%, #77A0FF 95.42%);
      opacity: 0;
      right: 0;
      transform-origin: center center;
    }

    .cbcn-sound-round.right {
      right: auto;
      left: calc(50% + 16.5em);
      transform: translateY(-50%) rotate(-180deg);
    }

    .cbcn-sound-round div:nth-of-type(1) {
      animation: soundScale 3s 0s infinite;
    }

    .cbcn-sound-round div:nth-of-type(2) {
      animation: soundScale 3s 0.3s infinite;
    }

    .cbcn-sound-round div:nth-of-type(3) {
      animation: soundScale 3s 0.6s infinite;
    }

    .cbcn-sound-round div:nth-of-type(4) {
      animation: soundScale 3s 0.9s infinite;
    }

    .cbcn-sound-round div:nth-of-type(5) {
      animation: soundScale 3s 1.2s infinite;
    }

    .cbcn-sound-round div:nth-of-type(6) {
      animation: soundScale 3s 1.5s infinite;
    }

    @keyframes soundScale {
      0% {
        opacity: 1;
        right: -20%;
        width: 0em;
        height: 0em;
      }

      75% {
        opacity: 0;
        right: 9em;
        width: 6.7em;
        height: 25em;
      }

      100% {
        opacity: 0;
        right: -20%;
        width: 0em;
        height: 0em;
      }
    }
  }

  /* display */
  @media screen {
    .cbcn-display-txt1 {
      width: 40.7em;
    }

    .cbcn-display-txt1,
    .cbcn-display-param {
      position: relative;
      z-index: 9;
    }

    .cbcn-display-imgDiv {
      width: 100%;
      height: 26.1em;
      position: relative;
    }

    .cbcn-display-img {
      width: 88.1em;
      height: 49.55em;
    }

    .cbcn-display-param {
      gap: 2em 5.8em;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .cbcn-display-param .cbcn-param {
      width: 12em;
      padding-top: 1.5em;
      border-top: 1px solid #B3B3B3;
    }

    .cbcn-display-param .cbcn-param:nth-of-type(3n+1) {
      width: 13.3em;
    }

    .cbcn-display-icon {
      width: 11.15em;
      height: 3.65em;
    }

    .cbcn-display-iconparam {
      width: 17.15em;
      gap: 0.75em;
      position: relative;
      left: -1.4em;
    }

    .cbcn-display-icon2 {
      width: 6.65em;
      height: 3.1414em;
    }
  }

  /* cool */
  @media screen {

    .cbcn-cool-txt1,
    .cbcn-cool-param {
      position: relative;
      z-index: 9;
    }

    .cbcn-cool-imgDiv {
      width: 100%;
      height: 24.3em;
      position: relative;
    }

    .cbcn-cool-img {
      top: 0;
      width: 73.92em;
      height: 30.0685em;
    }

    .cbcn-cool-param {
      justify-content: center;
      gap: 7em;
    }

    .cbcn-cool-param .cbcn-param {
      width: 13.7em;
      padding-top: 1.5em;
      border-top: 1px solid #B3B3B3;
    }
  }

  /* os */
  @media screen {
    .cbcn-os-img {
      width: 15.86455em;
      height: 15em;
      opacity: 1;
    }

    .cbcn-os-screen.active .cbcn-os-img {
      opacity: 0;
      transition: all 0.5s;
      transition-delay: 1s;
    }

    .cbcn-os-txt1 {
      opacity: 0;
      width: 49em;
      opacity: 0;
    }

    .cbcn-os-screen.active .cbcn-os-txt1 {
      opacity: 1;
      transition: all 0.5s;
      transition-delay: 1.5s;
    }
  }

  /* overall */
  @media screen {
    .cbcn-overall-screen {
      background-color: #f2f2f2;
    }

    .cbcn-overall-box1 {
      gap: 1em;
      align-items: center;
      top: calc(50% + 30px);
    }

    .cbcn-overall-left,
    .cbcn-overall-right {
      gap: 2.5em;
      align-items: center;
    }

    .cbcn-overall-left {
      margin-left: -300%;
      flex-shrink: 0;
    }

    .cbcn-overall-right {
      margin-left: 300%;
      flex-shrink: 0;
    }

    .cbcn-overall-img {
      width: 24em;
      height: 12.5em;
      flex-shrink: 0;
      border-radius: 1.5em;
      overflow: hidden;
    }
  }

  /* gemini */
  @media screen {
    .cbcn-gemini-txt1 {
      width: 35em;
    }

    .cbcn-gemini-swiper {
      width: 100%;
      overflow: hidden;
      margin-top: 3.5em;
      width: 100%;
    }

    .cbcn-gemini-card {
      min-height: 35.65em;
      padding: 3em;
      border-radius: 1.8em;
      background-color: #262626;
      overflow: hidden;

      align-items: center;
      gap: 4em;
    }

    .cbcn-gemini-txt2 {
      width: 21em;
    }

    .cbcn-gemini-img {
      width: 14em;
      height: 29.65em;
      border-radius: 1em;
      overflow: hidden;
      position: relative;
    }

    .cbcn-gemini-img video {
      /* width: 17.15em; */
      height: 98%;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-gemini-img img {
      position: relative;
      z-index: 9;
    }

    .cbcn-gemini-btnList {
      margin-top: 1.5em;
      width: 84%;
      gap: 1em;
      z-index: 9;
    }

    .cbcn-gemini-btn {
      flex: 1;
      height: 0.25em;
      background: #E5E5E5;
      border-radius: 2em;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .cbcn-gemini-btn::after {
      content: "";
      width: 0%;
      height: 100%;
      background-color: #2D5DCA;
      border-radius: 2em;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }

    .cbcn-gemini-btn.active::after {
      width: 100%;
      transition: width 3s linear;
    }

    .cbcn-gemini-btn:nth-of-type(1).active::after {
      transition: width 8s linear;
    }

    .cbcn-gemini-btn:nth-of-type(4).active::after {
      transition: width 5s linear;
    }
  }

  /* signal */
  @media screen {
    .cbcn-signal-img {
      width: 37.55em;
      height: 17.7222em;

      margin-top: 3.5em;
    }

    .cbcn-signal-param {
      margin-top: 3.5em;
      justify-content: center;
      gap: 13em;
    }

    /* .cbcn-signal-param .cbcn-param {
      width: 13em;
    } */
  }

  /* experience */
  @media screen {
    .cbcn-experience-cardDiv {
      margin-top: 3.5em;
      gap: 0.75em 1em;
      width: 100%;
      height: 28em;
      flex-wrap: wrap;
    }

    .cbcn-experience-card1 {
      width: 32.35em;
      height: 28em;
      border-radius: 1.5em;
      background-color: #f0f0f0;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .cbcn-experience-img1 {
      width: 14.45em;
      position: absolute;
      left: 3.9em;
      bottom: 0;
      margin-bottom: -6em;
    }

    .cbcn-experience-img2 {
      width: 14.3em;
      position: absolute;
      right: 3.8em;
      bottom: 0;
      margin-bottom: -6em;
    }

    .cbcn-experience-card2 {
      width: 15.65em;
      height: 13.5em;
      padding: 2.5em;
      border-radius: 1.5em;
      background-color: #f0f0f0;
      overflow: hidden;
      flex-shrink: 0;

      justify-content: space-between;
    }

    .cbcn-experience-icon {
      width: 3.5em;
      height: 3.5em;
    }

    .cbcn-experience-txt1 {
      width: 40.7em;
    }

    .cbcn-experience-img {
      width: 100%;
      height: 28em;
      margin-top: 3.5em;
    }
  }

  /* prolonged */
  @media screen {
    .cbcn-prolonged-txt1 {
      position: relative;
      z-index: 9;
      width: 36.5em;
    }

    .cbcn-prolonged-img {
      width: 34em;
      height: 28.56005em;
      margin-top: 3.5em;
    }
  }

  /* remark */
  @media screen {

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


@media screen and (min-width: 981px) and (max-height: 899px) {
  .cbcn-battery-swiper {
    padding-top: 1.5em;
  }

  .cbcn-battery-txt3 {
    margin-top: 0;
  }

  .cbcn-battery-icon {
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
  }
}