@media screen and (min-width: 981px) {
  /* kv */
  @media screen {
    .cbcn-kv-screen {
      width: 100vw;
      height: calc(46.5 / 96 * 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 a {
      text-decoration: none;
    }

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

    .cbcn-navigation-cardList {
      left: 0;
      gap: 1em;
    }

    .cbcn-navigation-card {
      width: 24em;
      height: 36.8em;
      border-radius: 1em;
      background: linear-gradient(200deg, #FAFAFA -7.62%, #F2F2F2 96.68%);
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .cbcn-navigation-img {
      width: 100%;
      height: 100%;
    }

    .cbcn-navigation-iconDiv {
      gap: 1em;
      align-items: center;
      margin-bottom: 0.5em;
    }
    .cbcn-navigation-icon1 {
      width: 2.26265em;
      height: 2.3073em;
      display: block;
    }
    .cbcn-navigation-icon2 {
      width: 2.14915em;
      height: 2.88182em;
      display: block;
    }

    .cbcn-navigation-txt {
      width: 100%;
      padding: 2.5em 2em;
      gap: 0.75em;
      position: absolute;
      top: 0;
    }
    .cbcn-navigation-AIicon {
      position: absolute;
      width: 2em;
      height: 2em;
      bottom: 1em;
      right: 1em;
    }
    .cbcn-navigation-img5 {
      position: relative;
    }
    .cbcn-navigation-video {
      position: absolute;
      bottom: -1.5em;
      width: 14.9em;
      left: 0;
      right: 0;
      z-index: 8;
      margin: auto;
      border-radius: 2em;
    }
    .cbcn-navigation-imgVideo {
      z-index: 9;
      position: absolute;
    }
  }

  /* design */
  @media screen {
    .cbcn-design-content {
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

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

    .cbcn-design-video {
      width: 57.6em;
      height: 31.3em;
      border-radius: 1.5em;
      overflow: hidden;
      transition: all 0.3s;
      position: relative;
    }
    .cbcn-design-img2 {
      opacity: 1;
    }
    .cbcn-design-img2.active {
      opacity: 0;
    }
    .cbcn-design-content.active .cbcn-design-video {
      width: 100%;
      height: 100%;
    }

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

    .cbcn-design-content.active .cbcn-design-video::after {
      background: rgba(0, 0, 0, 0);
    }

    .cbcn-design-txt {
      z-index: 9;
      opacity: 1;
      background: rgba(255, 255, 255, 0.95);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: all 0.8s;
    }
    .cbcn-design-video2 {
      position: absolute;
      top: 0;
      z-index: 0;
    }
    .cbcn-design-content.active .cbcn-design-txt.active {
      opacity: 0;
    }
    .cbcn-design-video1 {
      opacity: 1;
      z-index: 8;
      position: absolute;
    }
    .cbcn-design-content.active .cbcn-design-video1.active {
      opacity: 0;
    }
  }

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

    .cbcn-color-content {
      width: 49em;
      height: 100%;
      top: 0;
      z-index: 9;
    }
    .cbcn-color-txt1 {
      transition: all 0.15s;
    }
    .cbcn-color-txt1.active {
      opacity: 1;
    }
    .cbcn-color-content {
      transition: all 0.15s;
    }
    .cbcn-color-content.active {
      opacity: 1;
    }
    .cbcn-color-txt {
      position: absolute;
      top: 17.4em;
      width: 17.25em;
      gap: 0.5em;
    }

    .cbcn-color-btnListDiv {
      position: absolute;
      top: 32.2em;
      z-index: 99;
    }

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

    .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.index0 .cbcn-color-circle {
      stroke: #e9c9b8;
    }

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

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

    .cbcn-color-btn.index3 .cbcn-color-circle {
      stroke: #46c5bc;
    }

    .cbcn-color-btn.active .cbcn-color-circle {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 3s ease-out;
    }
    .cbcn-color-img1 {
      z-index: 99;
      position: absolute;
    }
    .cbcn-color-video1 {
      z-index: 0;
      position: absolute;
    }
  }

  /* slim */
  @media screen {
    .cbcn-slim-content {
      padding-top: 9em;
      height: 50em;
      justify-content: space-between;
      padding-bottom: 4em;
    }

    .cbcn-slim-videoDiv {
      width: 100%;
      height: 100%;
    }

    .cbcn-slim-txt1 {
      width: 44.85em;
    }

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

    .cbcn-slim-param .cbcn-param {
      width: 11.25em;
    }
  }

  /* display */
  @media screen {
    .cbcn-display-screen.wt {
      background: linear-gradient(229deg, rgba(255, 255, 255, 0.00) -5.76%, rgba(255, 255, 255, 0.00) 48.73%, #D7FBFF 108.49%), linear-gradient(128deg, rgba(255, 255, 255, 0.00) 5.43%, rgba(255, 255, 255, 0.00) 41.84%, #C7F9F8 104.3%), #FFF;
    }
    .cbcn-display-txt1,
    .cbcn-display-param {
      position: relative;
      z-index: 9;
    }

    .cbcn-display-imgDiv {
      width: 100%;
      height: 37.144em;
      position: relative;
      margin-top: 0em;
      margin-bottom: -11em;
    }

    .cbcn-display-img {
      width: 71.65em;
      height: 33.4em;
    }
    .cbcn-display-param {
      margin-top: 3em;
      gap: 2.5em;
      flex-wrap: wrap;
      justify-content: space-between;
    }

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

    /* .cbcn-display-param .cbcn-param:nth-of-type(1) .param {
      text-shadow: 0px 0px 15px #ffbf84;
    } */

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

    .cbcn-display-icon {
      width: 7.95em;
      height: 3.2em;
    }

    .cbcn-display-iconparam {
      /* width: 17.15em; */
      align-items: center;
      gap: 0.75em;
      /* position: relative; */
      /* left: -1.4em; */
    }
  }

  /* performance */
  @media screen {
    .cbcn-performance-screen {
      height: 46.5em;
    }
    .cbcn-performance-content {
      position: relative;
    }
    .cbcn-performance-h3 {
      z-index: 99;
      position: relative;
    }
    .cbcn-performance-box {
      z-index: 4;
      position: relative;
    }
    .cbcn-performance-box {
      margin-top: 1.65em;
    }
    .cbcn-performance-shadow {
      height: 150%;
      width: 100vw;
      position: absolute;
      top: 0;
      z-index: 5;
    }

    .cbcn-performance-p {
      font-size: 5.5em;
      text-align: center;
      text-shadow: 0px 0px 150px rgba(184, 238, 216, 0.50), 0px 0px 110px rgba(184, 238, 216, 0.50), 0px 0px 30px #B8EED8;
      text-transform: uppercase;
    }
  }

  /* battery */
  @media screen {
    .cbcn-battery-content {
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;
      padding: calc(1em + 60px) 0em 0em 0em;
      background-color: transparent;
      transition: all 0.3s;
      justify-content: space-between;
      background-color: #000000;
    }

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

    .cbcn-battery-videoDiv {
      width: 100%;
      position: relative;
      overflow: hidden;
      transition: all 0.25s, width 0.4s;
    }
    .cbcn-battery-content.active .cbcn-battery-videoDiv {
      border-radius: 1.5em;
      width: calc(50% - 0.5em);
    }

    .cbcn-battery-video {
      opacity: 1;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      display: block;
      object-fit: cover;
      transition: all 0.5s;
    }
    .cbcn-battery-content.active .cbcn-battery-video {
      opacity: 0;
    }

    .cbcn-battery-img {
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      object-fit: cover;
      z-index: 2;
      transition: opacity 0.3s;
    }
    .cbcn-battery-content.active .cbcn-battery-img {
      opacity: 1;
    }

    .cbcn-battery-txt1 {
      position: absolute;
      top: 50%;
      width: 100%;
      opacity: 0;
      z-index: 3;
    }
    .cbcn-battery-txt1.active {
      opacity: 1;
      transition: opacity 0.3s;
    }

    .cbcn-battery-title {
      position: absolute;
      bottom: 0em;
      opacity: 0;
    }

    .cbcn-battery-title.active {
      opacity: 1;
      transition: opacity 0.3s;
    }

    .cbcn-battery-title p {
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95) 34.9%,
        rgba(101, 170, 238, 0.95) 80.03%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-battery-title1 {
      align-items: flex-end;
    }

    .cbcn-battery-title1 p:nth-last-of-type(1) {
      position: relative;
      bottom: 0.75em;
    }

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

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

    .cbcn-battery-swiper {
      width: 100%;
      height: 100%;
      border-radius: 1.5em;
      background-color: #0d0d0d;
      padding: 2.5em;
      overflow: hidden;
      width: 46.5em;
      justify-content: space-between;
      position: absolute;
      left: 0;
    }

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

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

    .cbcn-battery-flexRow {
      flex-wrap: wrap;
      gap: 1em 2em;
      opacity: 0;
    }

    .cbcn-battery-param {
      padding-top: 0.75em;
      width: 18.5em;
      border-top: 1px solid #4d4d4d;
    }

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

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

    .cbcn-battery-btn {
      flex: 1;
      height: 0.25em;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 2em;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
    .cbcn-battery-btn::after {
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(
        91deg,
        rgba(64, 147, 228, 0.95) 10.01%,
        rgba(134, 195, 255, 0.95) 64.15%
      );
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: all 0.5s;
    }

    .cbcn-battery-btn.active::after {
      opacity: 1;
    }

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

      100% {
        width: 100%;
      }
    }

    .cbcn-battery-txt3 {
      opacity: 0;
    }

    .cbcn-battery-icon1 {
      width: 7em;
      height: 7em;
      flex-shrink: 0;
      margin-bottom: 1em;
    }

    .cbcn-battery-iconBox2 {
      align-items: center;
      gap: 1em;
    }

    .cbcn-battery-icon2 {
      width: 3.3em;
      height: 4.17135em;
      flex-shrink: 0;
    }
  }

  /* antiFall */
  @media screen {
    .cbcn-antiFall-imgDiv {
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 1;
    }

    .cbcn-antiFall-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 94.7em;
    }

    .cbcn-antiFall-content {
      position: relative;
      z-index: 9;
      width: 100%;
    }

    .cbcn-antiFall-paramBox {
      margin-top: 52.5em;
      width: 100%;
      gap: 2em 2.5em;
      flex-wrap: wrap;
    }

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

    .cbcn-antiFall-iconParam {
      width: 14.65em;
      padding-top: 1.9em;
      align-items: center;
    }

    .cbcn-antiFall-iconParam1 {
      gap: 1.9em;
      border-top: 1px solid #4d4d4d;
    }
    .cbcn-antiFall-iconParam2 {
      gap: 1.9em;
      border-top: 1px solid #4d4d4d;
    }

    .cbcn-antiFall-icon1 {
      width: 4.15em;
      height: 5.25em;
      flex-shrink: 0;
      display: block;
    }

    .cbcn-antiFall-icon2 {
      margin-top: 0.35em;
      height: 4.9em;
      object-fit: contain;
      display: block;
    }
    .cbcn-antiFall-color {
      color: rgba(255, 255, 255, 0.95) !important;
      opacity: 0.5;
    }
    .cbcn-antiFall-txt1 .cbcn-sh {
      color: rgba(0, 0, 0, 0.90) !important;
    }
    .cbcn-antiFall-txt1 .cbcn-h1 {
      color: #000 !important;
    }
    .cbcn-antiFall-txt1 .cbcn-p1 {
      color: rgba(0, 0, 0, 0.60) !important;
    }
  }

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

    .cbcn-waterproof-img {
      margin-top: 3.5em;
      width: 100%;
      height: 48.5em;
      position: relative;
    }
    .cbcn-waterproof-paramBox {
      margin-top: 4em;
      gap: 2.5em;
      position: absolute;
      bottom: 6em;
      left: 0em;
      right: 0em;
      margin: auto;
      width: 49em;
    }
    .cbcn-waterproof-param {
      padding-top: 1.5em;
      border-top: 1px solid #4d4d4d;
      width: 14.65em;
    }
  }

  /* photography */
  @media screen {
    .cbcn-photography-screen {
      height: 46.5em;
    }
    .cbcn-photography-content {
      position: relative;
    }
    .cbcn-photography-h3 {
      z-index: 99;
      position: relative;
    }
    .cbcn-photography-box {
      z-index: 4;
      position: relative;
    }
    .cbcn-photography-box {
      margin-top: 1.65em;
    }
    .cbcn-photography-shadow {
      height: 150%;
      width: 100vw;
      position: absolute;
      top: 0;
      z-index: 5;
    }

    .cbcn-photography-p {
      text-align: center;
      text-shadow: 0px 0px 150px rgba(184, 238, 216, 0.50), 0px 0px 110px rgba(184, 238, 216, 0.50), 0px 0px 30px #B8EED8;
      text-transform: uppercase;
    }
  }

  /* rearCamera */
  @media screen {
    .cbcn-rearCamera-screen {
      position: relative;
      justify-content: space-between;
      align-items: center;
    }

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

    .cbcn-rearCamera-title .cbcn-h1 {
      font-size: 2.5em;
    }

    .cbcbn-rearCamera-divBox {
      height: 32.2em;
      width: 100%;
      position: relative;
    }

    .cbcn-rearCamera-img {
      width: 29.54685em;
      height: 32.2em;
      padding: 1.5em 2.35em 0;
      bottom: 0;
      position: relative;
    }

    .cbcn-rearCamera-div {
      position: relative;
      height: 32.2em;
      width: 100%;
      bottom: 0;
    }

    .cbcn-rearCamera-light {
      position: absolute;
      z-index: 99;
      width: 3.8376em;
      height: 4.73165em;
      top: 13.5em;
      left: 14.7em;
      opacity: 0;
      transition: all 0.1s;
    }

    .cbcn-rearCamera-light.active {
      opacity: 1;
    }

    .cbcn-rearCamera-img1 {
      width: 15.28125em;
      position: absolute;
      bottom: 0;
      left: 2.35em;
      z-index: 1;
    }

    .cbcn-rearCamera-img2 {
      width: 15.28125em;
      position: absolute;
      bottom: 0;
      right: 2.35em;
      z-index: 2;
    }

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

    .cbcn-rearCamera-param1 {
      width: 17.25em;
      top: 5.6em;
      left: calc(50% - 23em);
      align-items: flex-start;
      opacity: 0;
      transition: all 0.2s;
    }

    .cbcn-rearCamera-param2 {
      width: 22.8945em;
      top: 5.3em;
      left: calc(50% + 2.5em);
      align-items: flex-end;
      opacity: 0;
      transition: all 0.2s;
    }

    .cbcn-rearCamera-param3 {
      width: 21.8945em;
      top: 10em;
      left: calc(50% + 3.5em);
      align-items: flex-end;
      opacity: 0;
      transition: all 0.2s;
    }

    .cbcn-rearCamera-param4 {
      top: 15.8em;
      width: 23.8em;
      left: calc(50% - 23.2em);
      opacity: 0;
      transition: all 0.1s;
    }

    .cbcn-rearCamera-param4.active {
      opacity: 1;
    }

    .cbcn-rearCamera-param1 svg {
      width: 17.25em;
    }

    .cbcn-rearCamera-param2 svg {
      width: 22.8945em;
    }

    .cbcn-rearCamera-param3 svg {
      width: 21.8945em;
    }

    .cbcn-rearCamera-param4 svg {
      width: 23.8em;
    }

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

    .cbcn-rearCamera-descText {
      margin-bottom: 4px;
      font-size: 1.2em !important;
    }
  }

  /* night */
  @media screen {
    .cbcn-night-txt1 {
      width: 40.65em;
    }

    .cbcn-night-img {
      width: 40em;
      height: 30em;
      border-radius: 0.8em;
      overflow: hidden;

      margin: 2.5em auto 0;
    }
  }

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

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

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

    .cbcn-auraLight-btn {
      position: absolute;
      bottom: 1.5em;
      padding: 0.25em 1em;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(25px);
      overflow: hidden;
      border-radius: 0.4em;
    }

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

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

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

    .cbcn-wideAngleLens-imgDiv {
      width: 100%;
      height: 45em;
    }
    .cbcn-wideAngleLens-img {
      margin: 3.5em auto 0;
      width: 48.25em;
      height: 23.85em;
      border-radius: 1.5em;
      overflow: hidden;
      transition: all 0.75s ease-in-out;
    }

    .cbcn-wideAngleLens-img.active {
      width: 100%;
      height: 100%;
      border-radius: 0;
    }
  }

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

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

    .cbcn-3DStudio-img {
      width: 24.06405em;
      height: 32em;
      border-radius: 0.8em;
      overflow: hidden;
    }

    .cbcn-3DStudio-btn {
      position: absolute;
      bottom: 1.5em;
      padding: 0.25em 1em;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(25px);
      overflow: hidden;
      border-radius: 0.4em;
    }

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

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

  /* Selfie */
  @media screen {
    .cbcn-Selfie-txt1 {
      width: 40.65em;
    }

    .cbcn-Selfie-img {
      width: 40em;
      height: 30em;
      border-radius: 0.8em;
      overflow: hidden;
      margin: 3.5em auto 0;
    }
  }

  /* aiImage2 */
  @media screen {
    .cbcn-screen.cbcn-aiImage2-screen {
      background: #ebebeb;
      align-items: center;
    }

    .cbcn-aiImage2-div {
      height: 50vw;
      position: relative;
    }

    .cbcn-aiImage2-txt1 {
      width: 40em;
      margin-top: 9em;
    }

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

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

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

    .cbcn-aiImage2-titleDiv2 {
      margin-top: 1em;
    }

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

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

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

    .cbcn-aiImage2-videoBtn-list {
      bottom: 3em;
      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: 97.5%;
      border-radius: 1em;
      overflow: hidden;
      top: 49.5%;
    }

    .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;
    }
  }

  /* flagship */
  @media screen {
    .cbcn-flagship-screen {
      height: 46.5em;
    }
    .cbcn-flagship-content {
      position: relative;
    }
    .cbcn-flagship-h3 {
      z-index: 99;
      position: relative;
    }
    .cbcn-flagship-box {
      z-index: 4;
      position: relative;
    }
    .cbcn-flagship-box {
      margin-top: 1.65em;
    }
    .cbcn-flagship-shadow {
      height: 150%;
      width: 100vw;
      position: absolute;
      top: 0;
      z-index: 5;
    }

    .cbcn-flagship-p {
      font-size: 3.5em !important;
      text-align: center;
      text-shadow:  0px 0px 150px rgba(184, 238, 216, 0.50), 0px 0px 110px rgba(184, 238, 216, 0.50), 0px 0px 30px #B8EED8;
      text-transform: uppercase;
    }
  }

  /* cool */
  @media screen {
    .cbcn-cool-screen {
      padding-bottom: 80px;
    }

    .cbcn-cool-content {
      width: 100%;
      align-items: center;
    }

    .cbcn-cool-img {
      top: -1em;
      width: 100%;
      height: 34.3em;
    }

    .cbcn-cool-txt1 {
      width: 49em;
    }

    .cbcn-cool-param {
      justify-content: center;
      text-align: center;
    }

    .cbcn-cool-param svg {
      width: 18px;
      height: 33px;
    }

    .cbcn-cool-imgDiv {
      width: 100%;
      height: 35.4em;
      position: relative;
      margin-top: 7em;
    }

    .cbcn-cool-img {
      height: 34.4em;
      width: 100%;
      z-index: 8;
      top: 1em;
    }

    .cbcn-cool-txt2 {
      position: absolute;
      z-index: 9;
      top: -2.5em;
      width: 49em;
    }

    .cbcn-cool-param {
      position: absolute;
      z-index: 9;
      bottom: 0;
      width: 49em;
    }
  }

  /* 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: #141414;
      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: 97%;
      border-radius: 1em;
      overflow: hidden;
    }

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

    .cbcn-gemini-swiper .swiper-wrapper {
      z-index: 10;
    }

    .cbcn-gemini-switchBtn-list {
      margin-top: 2em;
      position: absolute;
      z-index: 99;
      left: 3em;
      bottom: 5em;
    }
    .cbcn-gemini-item-title {
      position: relative;
      display: inline-block;
    }
    .cbcn-gemini-logo {
      position: relative;
      text-align: right;
      margin-top: 0.5em;
    }
    .cbcn-gemini-logo-img {
      width: 6.05em;
      height: 1.2em;
    }
  }

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

    .cbcn-chip-videoDiv {
      flex: 1;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 1.5em;
      overflow: hidden;
    }

    .cbcn-chip-img {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 1.5em;
      overflow: hidden;
      transition: all 0.3s;
    }
    .cbcn-chip-img1 {
      left: 0;
    }
    .cbcn-chip-img2 {
      left: 110%;
    }
    .cbcn-chip-img.active {
      transform: translateX(calc(-110%));
    }

    .cbcn-chip-swiper {
      padding: 10em 3em 3em;
    }
    .cbcn-chip-DivBox {
      flex: 1;
      height: 100%;
      border-radius: 1.5em;
      background-color: #000;
      overflow: hidden;

      position: relative;
    }

    .cbcn-chip-card {
      width: 100%;
      height: calc(100% - 4em);
      justify-content: space-between;
    }
    .cbcn-chip-card1 {
      left: 0em;
    }
    .cbcn-chip-card2 {
      left: 0em;
    }
    .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-btnList {
      width: 88.2%;
      bottom: 2em;
      gap: 1em;
      z-index: 9;
    }

    .cbcn-chip-btn {
      flex: 1;
      height: 0.25em;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 0.25em;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
    .cbcn-chip-btn::after {
      content: "";
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, #70C4C3 23.73%, #B4FEFD 61.56%), rgba(255, 255, 255, 0.15);
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 0.25em;
      overflow: hidden;
      opacity: 0;
      transition: all 0.3s;
    }
    .cbcn-chip-btn.active::after {
      opacity: 1;
    }
  }

  /* sound */
  @media screen {
    .cbcn-sound-txt1 {
      width: 40.5em;
    }
    .sound-sup {
      font-size: 0.4em !important;
      vertical-align: 30px !important;
    }
    .cbcn-sound-imgDiv {
      margin-top: 2em;
      width: 100%;
      height: 19.1em;
      position: relative;
    }

    .cbcn-sound-img {
      width: 31.65em;
      height: 14.84535em;
      z-index: 99;
    }

    .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(170, 245, 230, 0.00) 0.67%, #7AB2B2 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;
      }
    }
  }

  /* 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-h2 {
      font-size: 3.8em !important;
    }
    .cbcn-os-screen.active .cbcn-os-txt1 {
      opacity: 1;
      transition: all 0.5s;
      transition-delay: 1.5s;
    }
  }

  /* prolonged */
  @media screen {
    .cbcn-prolonged-screen {
      background-color: #ebebeb !important;
      padding: 180px 0 80px 0 !important;
    }
    .cbcn-prolonged-txt1 {
      position: relative;
      z-index: 9;
      width: 36.5em;
    }

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

  /* experience */
  @media screen {
    .cbcn-experience-screen {
      background-color: #ebebeb !important;
    }
    .cbcn-experience-list {
      gap: 1.5em 0;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 3.5em;
    }

    .cbcn-experience-item {
      width: 100%;
      min-height: 30em;
      border-radius: 1.8em;
      background: #ffffff;
      align-items: center;
      overflow: hidden;
      position: relative;
      padding-top: 3.5em;
      padding-bottom: 3.5em;
      gap: 5.35em;
    }

    .cbcn-experience-item.index1 {
      padding-left: 6em;
      padding-right: 4em;
      flex-direction: row-reverse;
    }

    .cbcn-experience-item.index2 {
      padding-left: 4em;
      padding-right: 6em;
    }

    .cbcn-experience-titletxt {
      width: 21.5em;
      gap: 2em;
    }

    .cbcn-experience-img1 {
      width: 11.2em;
      height: 23.9em;
      position: relative;
    }

    .cbcn-experience-img1 video {
      height: 97%;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-experience-img2 {
      width: 11.2em;
      height: 23.9em;
    }
    .cbcn-experience-video {
      z-index: 1;
      position: absolute;
    }
    .cbcn-experience-phonebg {
      z-index: 10;
      position: absolute;
    }
  }

  /* 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;
  }
}