@media screen and (max-width: 980px) {
  /* kv  */
  @media screen {
    .cbcn-kv-screen {
      width: 100%;
      height: calc(37.6 / 18.75 * 100vw);
      position: relative;
      display: block;
    }

    .cbcn-kv-logo {
      position: absolute;
      width: 1.55em;
      bottom: 1.5em;
      left: 1em;
    }

    .cbcn-kv-remark {
      position: absolute;
      left: 1em;
      bottom: 0.6em;
    }

    .cbcn-kv-remark p {
      color: rgba(0, 0, 0, 0.4);
      font-size: 0.25em;
      font-weight: 400;
    }
  }

  /* navigation */
  @media screen {
    .cbcn-navigation-screen, .cbcn-navigation-wrapper {
      background-color: #F0F0F0;
    }
    .cbcn-navigation-gap {
      gap: 1em;
    }

    .cbcn-navigation-item {
      text-decoration: none;
      width: 100%;
      min-height: 27.5em;
      padding-bottom: 1.5em;
      border-radius: 1.5em;
      background: #fff;
      justify-content: space-between;
      overflow: hidden;
    }

    .cbcn-navigation-Text {
      padding: 0 1em;
      align-items: flex-end;
      justify-content: space-between;
      gap: 0.5em;
    }

    .cbcn-navigation-txt {
      gap: 0.75em !important;
    }

    .cbcn-navigation-txt h2 {
      color: rgba(0, 0, 0, 0.9);
    }

    .cbcn-navigation-txt p {
      color: rgba(0, 0, 0, 0.6);
    }

    .cbcn-navigation-img {
      height: 19em;
    }

    .cbcn-navigation-icon {
      width: 1.8em;
      height: 1.8em;
    }
    .cbcn-navigation-logo {
      width: 1.81015em;
      height: 1.84585em;
    }
    .cbcn-navigation-logoRow {
      gap: 0.5em;
      align-items: center;
    }
    .cbcn-navigation-item:nth-child(3) .cbcn-p1 {
      font-size: 0.7459em !important;
      font-family: "vivoSans-DemiBold" !important;
      line-height: 150% !important;
    }
    .cbcn-navigation-item:nth-child(3) .cbcn-navigation-txt {
      gap: 0em !important;
    }
    .cbcn-navigation-h2 {
      padding-bottom: 0.75em;
    }
    .cbcn-navigation-logo {
      width: 1.81015em;
      height: 1.84585em;
      display: block;
      flex-shrink: 0;
    }
    .cbcn-navigation-navRow {
      gap: 0.5em;
      align-items: center;
    }
    .cbcn-navigation-txt1 {
      padding-bottom: 0.75em !important;
    }
  }

  /* curved */
  @media screen {
    .cbcn-curved-screen {
      background: #fff !important;
    }
    .cbcn-curved-img {
      width: 100%;
      height: 15.05em;
    }

    .cbcn-curved-txt1 {
      padding: 0 1em;
    }

    .cbcn-curved-txt1 .ct {
      text-align: center;
    }
  }

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

    .cbcn-color-swiper .swiper-slide {
      background: linear-gradient(0deg, #CCC -50.82%, #959595 26.9%, #525252 99.96%);
    }

    .cbcn-color-txt {
      width: 100%;
      gap: 0.5em;
      text-align: center;
      padding: 0 1em;
      top: 23em;
    }

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

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

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

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

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

    .cbcn-color-B {
      color: #fff !important;
      position: relative;
    }

    .cbcn-color-B::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      height: 2px;
      width: 100%;
      background: #fff;
    }

    .cbcn-color-btn.index0 .cbcn-color-circle {
      stroke: #fff;
    }

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

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

    .cbcn-color-B {
      position: relative;
    }

    .cbcn-color-B::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #fff;
    }
  }

  /* appearance */
  @media screen {
    .cbcn-appearance-screen.bk {
      background-color: #262626;
    }
    .cbcn-appearance-screen {
      padding: 4em 0;
    }

    .cbcn-appearance-videoDiv {
      height: 15em;
      overflow: hidden;
      border-radius: 1em;
      margin-top: 2.5em;
    }
  }

  /* zeiss */
  @media screen {
    .cbcn-zeiss-screen {
      background-color: #0d0d0d !important;
      height: 30em;
    }

    .cbcn-zeiss-content1 {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 8.5em;
      padding: 0 5.3vw;
      gap: 0.75em;
      justify-content: center;
    }

    .cbcn-zeiss-title {
      font-size: 3.8em;
      font-style: normal;
      font-weight: 700;
      line-height: 110%;
    }

    .cbcn-zeiss-h3 {
      font-size: 0.75em;
      font-weight: 800;
      line-height: 110%;
      color: rgba(255, 255, 255, 0.5) !important;
      font-family: "vivoSans-Bold";
    }

    .cbcn-zeiss-box {
      justify-content: center;
      width: 100%;
    }
    .cbcn-zeiss-bg {
      width: 100%;
      height: 100%;
      z-index: 1;
      transform-origin: center center;
    }
  }

  /* camera2  */
  @media screen {
    .cbcn-camera2-txtDiv {
      position: relative;
    }

    .cbcn-camera2-img {
      z-index: 99;
      width: 100%;
      height: calc(34.35 / 18.75 * 100vw);
    }

    .cbcn-camera2-txt1 {
      text-align: center;
      z-index: 1;
      position: absolute;
      top: 4em;
      padding: 0 5.3vw;
      width: 100%;
    }
  }

  /* rearCamera */
  @media screen {
    .cbcn-rearCamera-screen {
      padding-top: 4em;
      display: flex;
      height: 100vh;
      justify-content: space-between;
    }

    .cbcn-rearCamera-title {
      padding: 0 1em 3em;
    }

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

    .cbcn-rearCamera-img1 {
      position: absolute;
      width: 8em;
      height: 100%;
      right: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 2;
    }

    .cbcn-rearCamera-img2 {
      position: absolute;
      bottom: 0;
      right: 8em;
      width: 5.05em;
      height: 100%;
      margin-bottom: -12em;
      opacity: 0;
    }

    .cbcn-rearCamera-desc {
      gap: 0.4em;
    }

    .cbcn-rearCamera-param1 .cbcn-rearCamera-desc {
      width: 8em;
    }

    .cbcn-rearCamera-descText {
      font-size: 1em;
      padding-bottom: 4px;
    }

    .cbcn-rearCamera-desc .cbcn-p3 {
      line-height: 120%;
    }

    .cbcn-rearCamera-param {
      width: 9.4em;
      position: absolute;
      left: 5.3vw;
      z-index: 3;
    }

    .cbcn-rearCamera-param3 {
      top: -2em;
    }

    .cbcn-rearCamera-param2 {
      top: 10.5em;
    }

    .cbcn-rearCamera-param1 {
      opacity: 0;
      top: -1.5em;
    }

    .cbcn-rearCamera-line {
      z-index: 3;
      position: absolute;
    }

    .cbcn-rearCamera-line3 {
      height: 3.65em;
      width: 10em;
      top: 0.6em;
      right: -4.9em;
    }

    .cbcn-rearCamera-line2 {
      height: 2.95em;
      width: 9.5em;
      right: -4.7em;
      top: -3.5em;
    }

    .cbcn-rearCamera-line1 {
      height: 5.5em;
      width: 2.1em;
      top: 0.6em;
      right: 0.5em;
    }
  }

  /* fullFocusPortrait */
  @media screen {
    .cbcn-fullFocusPortrait-screen {
      padding: 4em 0;
    }

    .cbcn-fullFocusPortrait-content {
      padding: 0 5.3vw;
    }

    .cbcn-fullFocusPortrait-InfoDiv {
      height: 18.6em;
      margin-top: 2.5em;
    }

    .cbcn-fullFocusPortrait-Info {
      padding: 0 5.3vw;
      height: 18.6em;
    }

    .cbcn-fullFocusPortrait-image {
      width: 100%;
      height: 15em;
      border-radius: 0.6rem;
      overflow: hidden;
    }

    .cbcn-fullFocusPortrait-title {
      margin-top: 2.5em !important;
      font-size: 0.8em;
      line-height: 150%;
      font-family: "vivoSans-DemiBold";
    }

    .cbcn-fullFocusPortrait-text {
      color: rgba(0, 0, 0, 0.4) !important;
      font-size: 0.5em;
      line-height: 150%;
      font-family: "vivoSans-Medium";
    }

    .cbcn-fullFocusPortrait-switchBtn-list {
      padding: 1em 1em 0em 5em;
      position: absolute;
      right: 0;
      bottom: 4em;
      z-index: 99;
    }

    .cbcn-fullFocusPortrait-text.cbcn-class {
      bottom: 6em;
      color: rgba(255, 255, 255, 0.95) !important;
      font-size: 0.75em;
      display: flex;
      padding: 0.3em 0.8em;
      justify-content: center;
      align-items: center;
      border-radius: 1.5em;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(7.037036895751953px);
      -webkit-backdrop-filter: blur(7.037036895751953px);
    }
  }

  /* backlitSelfie */
  @media screen {
    .cbcn-backlitSelfie-screen {
      padding: 0 !important;
    }

    .cbcn-backlitSelfie-cardList {
      padding: 0 !important;
    }

    .cbcn-backlitSelfie-content {
      padding: 4em 5.3vw !important;
    }

    .cbcn-backlitSelfie-swiper {
      margin-top: 1.5em;
    }

    .cbcn-backlitSelfie-imgDiv {
      position: relative;
      width: 100%;
      height: 19em;
      border-radius: 1.05555em;
      overflow: hidden;
    }

    .cbcn-backlitSelfie-img {
      position: absolute;
      transition: opacity 0.25s;
    }

    .cbcn-backlitSelfie-img1 {
      opacity: 1;
    }
    .cbcn-backlitSelfie-imgDiv.active .cbcn-backlitSelfie-img1 {
      opacity: 0;
    }
    .cbcn-backlitSelfie-img2 {
      opacity: 0;
    }
    .cbcn-backlitSelfie-imgDiv.active .cbcn-backlitSelfie-img2 {
      opacity: 1;
    }

    .cbcn-backlitSelfie-btn {
      position: absolute;
      bottom: 0.75em;
      left: 0.75em;
      padding: 0.2em 0.5em;
      border-radius: 0.84445em;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(7.037036895751953px);
      overflow: hidden;
    }
  }

  /* 4K */
  @media screen {
    .cbcn-4K-screen {
      padding: 4em 5.3vw;
    }

    .cbcn-4K-img {
      width: 100%;
      height: 11.55em;
      border-radius: 0.6em;
      overflow: hidden;
    }

    .cbcn-4K-txt1 {
      margin-top: 2.5em;
    }

    .cbcn-4k-txt1-p2 {
      background: linear-gradient(93deg, #CFDADF 2.03%, #FFF 47.83%, #A8A8A8 92.57%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-4k-txt1-p3 {
      color: rgba(255, 255, 255, 0.65) !important;
    }
  }

  /* night */
  @media screen {
    .cbcn-night-img {
      width: 100%;
      height: 12em;
      border-radius: 0.6em;
      overflow: hidden;
      margin-top: 2em;
    }
    .cbcn-night-txt1 .cbcn-h1 {
      font-size: 1.5em;
      width: max-content !important;
    }
  }

  /* studioQuality */
  @media screen {
    .cbcn-studioQuality-screen {
      height: 100vh;
    }

    .cbcn-studioQuality-txt1 {
      position: absolute;
      gap: 1.5em;
      top: -9em;
      align-items: center;
      width: 100%;
      z-index: 2;
      opacity: 0;
    }

    .cbcn-studioQuality-txt1 .cbcn-h1 {
      font-size: 1.3124em;
      line-height: 110%;
    }

    .cbcn-studioQuality-txt1 .color1 {
      font-size: 3.6em;
      line-height: 110%;
      text-align: center;
    }

    .cbcn-studioQuality-txt2 {
      position: absolute;
      text-align: center;
      z-index: 9;
      opacity: 0;
      width: 100%;
      padding: 0 5.3vw;
    }

    .cbcn-studioQuality-txt2 p {
      font-size: 1.2em;
      line-height: 150%;
      /* 1.125rem */
    }

    .cbcn-studioQuality-txt2 span {
      background: linear-gradient(
        276deg,
        #ffeef2 6.93%,
        #f5aabb 41.72%,
        #b94863 75.81%,
        #b42247 111.3%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-studioQuality-txtDiv {
      z-index: 1;
    }

    .cbcn-studioQuality-txt3 {
      position: absolute;
      height: 100%;
      top: 3.5em;
      z-index: 9;
      opacity: 0;
    }

    .cbcn-studioQuality-txt3 .cbcn-studioQuality-param {
      position: absolute;
      bottom: 7.5em;
      width: 6.5em;
      gap: 1em;
    }

    .cbcn-studioQuality-txt3 .cbcn-h1 {
      font-size: 1.5em;
    }

    .cbcn-studioQuality-imgDiv {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 18em;
      width: 10em;
      transform-origin: 100% 100%;
    }

    .cbcn-studioQuality-img2 {
      position: absolute;
      width: 4.28em;
      height: 4.28em;
      left: 2.63em;
      top: 9.76em;
    }

    .cbcn-studioQuality-img1 {
      height: 18em;
      width: 100%;
      position: absolute;
      opacity: 0;
    }

    .cbcn-studioQuality-param1 .param {
      background: linear-gradient(285deg, #FFF8E8 48.37%, #B1ADB7 87.74%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-studioQuality-param1 svg {
      width: 10.8px;
      height: 19.8px;
    }
  }

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

    .cbcn-auraLight-img {
      width: 16.8889em;
      height: 19em;
      border-radius: 1.05555em;
      overflow: hidden;
    }

    .cbcn-auraLight-btn {
      position: absolute;
      bottom: 0.75em;
      left: 0.75em;
      padding: 0.2em 0.5em;
      border-radius: 0.84445em;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(7.037036895751953px);
      overflow: hidden;
    }

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

    .cbcn-auraLight-txt2 {
      margin-top: 8em;
    }
  }

  /* 3DStudio */
  @media screen {

    .cbcn-3DStudio-swiper {
      margin-top: 1.5em;
      width: 100%;
      height: 24em;
    }

    .cbcn-3DStudio-img {
      width: 100%;
      height: 20.3em;
      border-radius: 1.055555em;
      overflow: hidden;
    }

    .cbcn-3DStudio-switchBtn-list {
      position: absolute;
      bottom: 4em;
      padding: 1em 1em 0em 5em;
      right: 0;
      z-index: 99;
    }

    .cbcn-3DStudio-btn-p {
      font-size: 0.9em;
      font-family: "vivoSans-DemiBold";
    }

    .cbcn-3DStudio-btn {
      position: absolute;
      bottom: 0.75em;
      left: 0.75em;
      padding: 0.2em 0.5em;
      border-radius: 0.84445em;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(7.037036895751953px);
      overflow: hidden;
    }
  }

  /* filmCamera */
  @media screen {
    .cbcn-filmCamera-screen {
      padding: 4em 0;
      height: 100%;
    }

    .cbcn-filmCamera-Content {
      height: 100%;
    }

    .cbcn-filmCamera-txt1 {
      z-index: 11;
    }

    .cbcn-filmCamera-div {
      overflow: hidden;
      position: relative;
      margin-top: 1em;
    }

    .cbcn-filmCamera-shadow.shadow {
      height: 1.5em;
      width: 100%;
      background: linear-gradient(rgb(0, 0, 0, 0.8),
          rgba(0, 0, 0, 0.3));
      z-index: 11;
      filter: blur(5px);
      position: absolute;
      transform: translateY(-1px);
    }

    .cbcn-filmCamera-imgWrapper {
      width: 10.5em;
      height: 22.04em;
      position: relative;
      left: 50%;
      margin-top: 1.5em;
      transform: translateX(-50%);
      z-index: 10;
    }

    .cbcn-filmCamera-bg1 {
      position: absolute;
      top: 0;
      z-index: 10;
      width: 10.4em;
      height: 18.85em;
    }

    .cbcn-filmCamera-bg2 {
      position: absolute;
      bottom: 0;
      z-index: 8;
      width: 10.4em;
      height: 3.2em;
    }

    .cbcn-filmCamera-img1 {
      z-index: 9;
      width: 8.1em;
      height: 13.13055em;
      transform: translate(-51%, -50%);
    }
  }

  /* aiImage、aiImage2*/
  @media screen {
    .cbcn-aiImage-screen {
      padding: 4em 0 0 !important;
    }

    .cbcn-aiImage2-screen {
      padding: 2.5em 5.3vw 4em 5.3vw !important;
    }

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

    .cbcn-aiImage2-p {
      font-size: 1.2em;
    }

    .cbcn-aiImage2-video {
      width: 12em;
      height: 25.43075em;
      margin-top: 1.5em;
      position: relative;
      display: flex;
      justify-content: center;
    }

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

    .cbcn-aiImage2-titleDiv {
      position: relative;
      width: 100%;
      height: 2em;
    }

    .cbcn-aiImage2-title {
      position: absolute;
      left: 2.5em;
      transition: all 0.3s;
      opacity: 0;
    }

    .cbcn-aiImage2-title.active {
      opacity: 1;
    }

    .cbcn-aiImage2-img {
      width: 12em;
      height: 25.5em;
      display: block !important;
    }
  }

  /* performance */
  @media screen {
    .cbcn-performance-screen {
      background: #0D0D0D!important;
    }
    .cbcn-performance-DivBox {
      width: 100%;
      height: 30em;
      position: relative;
      z-index: 2;
    }

    .cbcn-performance-content1 {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 0.75em;
      text-align: center;
      width: min-content;
    }

    .cbcn-performance-h3 {
      color: rgba(255, 255, 255, 0.5) !important;
      font-size: 0.75em !important;
      font-style: normal;
      font-weight: 800;
      line-height: 110%;
      font-family: "vivoSans-Bold";
    }

    .cbcn-performance-box p {
      font-size: 2em;
      line-height: 110%;
      background: linear-gradient(270deg, #C5C7FF 9.74%, #888CDB 89.72%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-performance-txt {
      height: 0.4em;
      width: 0.4em;
      position: absolute;
      overflow: hidden;
      background: transparent;
      top: 90%;
      left: 104%;
      transform: translate(-104%, -90%);
    }

    .cbcn-performance-video {
      opacity: 0;
    }
    .cbcn-performance-bg {
      width: 100%;
      height: 100%;
      z-index: 1;
      transform-origin: center center;
    }
  }

  /*battery*/
  @media screen {
    .cbcn-battery-txtDiv {
      padding: 4em 5.3vw;
    }

    .cbcn-battery-swiper {
      height: 28em;
    }

    .cbcn-battery-swiper .swiper-slide {
      justify-content: space-between;
      padding: 2.5em 1.5em;
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;
      border-radius: 1em;
      background: #171717;
    }

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

    .cbcn-battery-iconTxt {
      background: linear-gradient(270deg, #C5C7FF 9.74%, #888CDB 89.72%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 2.05555em;
      font-style: normal;
      font-weight: 700;
      line-height: 110%;
      /* 2.2611rem */
    }

    .cbcn-battery-iconTxt1 {
      background: linear-gradient(
        180deg,
        rgba(242, 255, 254, 1),
        rgba(170, 245, 187, 1),
        rgba(47, 219, 150, 1),
        rgba(36, 184, 100, 1)
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 2.05555em;
      font-style: normal;
      font-weight: 700;
      line-height: 110%;
    }

    .cbcn-battery-txt3 p:nth-child(3) {
      color: rgba(255, 255, 255, 0.65) !important;
    }

    .cbcn-battery-icon {
      width: 3.44575em;
      height: 2.03295em;
    }

    .cbcn-battery-iconBox {
      gap: 0.5em;
    }

    .cbcn-battery-icon2 {
      width: 8em;
      height: 2.4431em;
    }

    .cbcn-battery-iconBox1 {
      width: 100%;
      height: 6em;
    }

    .cbcn-battery-iconBox2 {
      width: 100%;
      height: 6em;
    }

    .cbcn-battery-iconBox3 {
      width: 100%;
      height: 6em;
    }

    .cbcn-battery-flexRow {
      justify-content: space-between;
      margin-top: 1em;
    }

    .cbcn-battery-param .cbcn-sh {

    }
  }

  /* durability */
  @media screen {
    .cbcn-durability-screen {
      height: 30em;
      padding: 0 !important;
    }

    .cbcn-durability-txt1 {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0 5.3vw !important;
      gap: 0.75em;
      text-align: center;
    }

    .cbcn-durability-txt1 .color1 {
      font-size: 2em;
      font-style: normal;
      font-weight: 700;
      line-height: 110%;
    }

    .cbcn-durability-txt1 .cbcn-h3 {
      font-size: 0.75em;
      line-height: 110%;
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .cbcn-durability-descBox {
      justify-content: center;
    }

    .cbcn-durability-desc {
      width: 0.6em;
      height: 0.6em;
      background-color: #fff;
      margin-bottom: 0.7em;
      margin-left: -0.5em;
    }
  }

  /* waterproof */
  @media screen {
    .cbcn-waterproof-screen {
      padding: 4em 0 0 0 !important;
    }

    .cbcn-waterproof-imgDiv {
      height: 23.7em;
      width: 100%;
      margin-top: -1em;
    }

    .cbcn-waterproof-img {
      height: 23.7em;
      width: 100%;
    }
  }

  /* waterproof2 */
  @media screen {
    .cbcn-waterproof2-safeRow {
      padding: 4em 5.3vw !important;
    }

    .cbcn-waterproof2-img {
      height: 18.5em;
      width: 100%;
      border-radius: 1em;
      overflow: hidden;
      margin-top: 2em;
    }
  }

  /* antiFall */
  @media screen {
    .cbcn-antiFall-screen {
      padding: 4em 0;
    }

    .cbcn-antiFall-imgDiv {
      margin: 0.7em 0;
      height: 17.1em;
      width: 100%;
    }

    .cbcn-antiFall-img {
      height: 17.1em;
      width: 100%;
    }
    .cbcn-antiFall-txt1 .cbcn-h1 {
      font-size: 1.8em;
    }

    .cbcn-antiFall-content2 {
      padding: 1em 0;
      width: 100%;
      gap: 1.5em 0;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .cbcn-antiFall-param {
      width: 43.1vw;
    }

    .cbcn-antiFall-param .param {
      white-space: wrap;
    }

    .cbcn-antiFall-param .txt {
      font-size: 0.75em;
      line-height: 120%;
    }

    .cbcn-antiFall-p1 {
      background: linear-gradient(90deg, #89898A 0%, #FFE7C4 19.96%, #FFFCF3 30.7%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-antiFall-logo {
      margin-top: 1em;
      gap: 1em;
      align-items: center;
    }

    .cbcn-antiFall-logoImg {
      width: 3.1941em;
      height: 3.2571em;
    }

    .cbcn-antiFall-logotext {
      color: rgba(255, 255, 255, 0.5) !important;
      font-size: 0.75em !important;
    }
  }

  /* AI */
  @media screen {
    .cbcn-AI-screen {
      width: 100%;
      height: 30em;
      padding: 5.3vw;
      position: relative;
      background-color: #0d0d0d !important;
    }

    .cbcn-AI-content {
      width: 100%;
      left: 0;
      text-align: center;
      z-index: 2;
    }

    .cbcn-AI-txt1 {
      display: flex;
      flex-direction: column;
      gap: 0.75em;
    }

    .cbcn-AI-h3 {
      color: rgba(255, 255, 255, 0.5) !important;
      font-size: 0.75em !important;
      font-style: normal;
      font-weight: 800;
      line-height: 110%;
      font-family: "vivoSans-Bold";
    }

    .cbcn-AI-p {
      font-size: 2em;
      line-height: 110%;
      background: linear-gradient(270deg, #C5C7FF 9.74%, #888CDB 89.72%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-AI-bg {
      width: 100%;
      height: 100%;
      z-index: 1;
      transform-origin: center center;
    }
  }

  /* chip */
  @media screen {
    .cbcn-chip-screen.wt {
      background-color: #000;
    }
    .cbcn-chip-swiper {
      padding: 4em 5.3vw;
    }

    .cbcn-chip-title3-sh {
      font-family: "vivoSans-ExtraBold";
      font-size: 1.2em;
      color: rgba(255, 255, 255, 0.95)!important;
    }

    .cbcn-chip-title3-h1 {
      background: linear-gradient(307deg, #B1ADB7 12.42%, #FFF8E8 49.22%, #FEFEFE 72.34%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "vivoSans-ExtraBold";
      font-size: 2em;
    }
    #cbcn-dom-container .cbcn-chip-swiper .cbcn-p1 {
      color: rgba(255, 255, 255, 0.65)!important;
    }

    .cbcn-chip-card2 {
      margin-top: 8em;
    }

    .cbcn-chip-img {
      height: 11.8em;
      width: 100%;
      overflow: hidden;
      border-radius: 0.6em;
      margin: 2.5em 0;
    }

    .cbcn-chip-param .cbcn-param .param {
      background: linear-gradient(93deg, #CFDADF 2.03%, #FFF 47.83%, #A8A8A8 92.57%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    #cbcn-dom-container .cbcn-chip-swiper .txt {
      color: rgba(255, 255, 255, 0.9)!important;
    }

    .cbcn-chip-param {
      flex-wrap: wrap;
      gap: 1.2em;
      justify-content: space-between;
    }

    .cbcn-chip-param .cbcn-param {
      width: 41vw;
    }

    .cbcn-chip-card2 .cbcn-chip-param .cbcn-param {
      width: 100%;
    }
  }

  /* sound */
  @media screen {
    .cbcn-sound-content {
      padding: 0em !important;
    }

    .cbcn-sound-txt1 {
      text-align: center;
      padding: 0 5.3vw;
    }

    .cbcn-sound-imgDiv {
      margin-top: 2.5em;
      width: 100%;
      height: 7.15em;
      position: relative;
    }

    .cbcn-sound-img {
      width: 11.84805em;
      height: 5.5807em;
    }

    .cbcn-sound-round {
      width: 3em;
      height: 7.15em;
    }

    .cbcn-sound-round div {
      width: 1.5em;
      height: 3.5em;
      border-radius: 50%;
      background: radial-gradient(277.66% 213.89% at 122.92% 50%, rgba(21, 21, 21, 0.00) 0%, rgba(210, 210, 210, 0.80) 100%);
      right: 0;
      opacity: 0;
      transform-origin: center center;
    }

    .cbcn-sound-round.left {
      left: 0em;
    }

    .cbcn-sound-round.right {
      right: 0em;
      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: 2em;
        width: 1.5em;
        height: 7.15em;
      }

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

  /* display */
  @media screen {
    .cbcn-display-img {
      width: 100vw;
      height: 17.55em;
    }

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

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

    .cbcn-display-icon {
      width: 6.7em;
      height: 2em;
    }

    .cbcn-display-icon2 {
      width: 4.448em;
      height: 2.1012em;
      margin-right: 0.5em;
    }

    .cbcn-display-param .cbcn-param {
      width: 41vw;
    }

    .cbcn-display-param .cbcn-param:last-child {
      width: 100%;
    }

    .cbcn-display-param .cbcn-param .param {
      white-space: normal !important;
    }
    .cbcn-display-txt1 .cbcn-h1 {
      font-size: 1.6em; 
      width: max-content !important;
    }
  }

  /* cool */
  @media screen {
    .cbcn-cool-txt1 {
      text-align: center;
    }

    .cbcn-cool-imgDiv {
      margin-top: 1.5em;
    }

    .cbcn-cool-img {
      width: 100%;
      height: 6.85em;
    }

    .cbcn-cool-param {
      margin-top: 1.5em;
      gap: 1em;
    }
  }

  /* os */
  @media screen {
    .cbcn-os-screen {
      height: 100vh;
    }

    .cbcn-os-imgBg {
      width: 100%;
      height: calc(30 / 18.5 * 100vw);
    }

    .cbcn-os-img {
      width: 8.8364em;
      height: 8.35485em;
      opacity: 1;
    }

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

    .cbcn-os-txt1 {
      width: calc(100% - 21.2vw);
      text-align: center;
      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 {
      padding: 4em 5.3vw 6em;
      display: flex;
      height: 100vh;
      gap: 1em;
      justify-content: space-between;
      flex-direction: column;
      background: #000;
    }

    .cbcn-overall-box1 {
      width: 100%;
      height: 4.05em;
    }

    .cbcn-overall-box1 p {
      font-size: 2.7em;
      line-height: 110%;
    }

    .cbcn-overall-txt2 {
      opacity: 0;
    }

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

    .cbcn-overall-box2 {
      height: 20em;
      position: relative;
      justify-content: center;
      display: flex;
    }

    .cbcn-overall-box2 .cbcn-overall-img {
      position: absolute;
      height: 16.7em;
      width: 14em;
      border-radius: 0.56115em;
      overflow: hidden;
    }

    .cbcn-overall-img2 {
      z-index: 9;
    }

    .cbcn-overall-img1::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      transition: background 0.3s;
    }

    .cbcn-overall-img1.masked::before {
      background: #e6e6e6;
    }

    .cbcn-overall-img1.masked2::before {
      background: #e6e6e6;
    }

    .cbcn-overall-img2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      transition: background 0.3s;
    }

    .cbcn-overall-img2.masked::before {
      background: #e6e6e6;
    }

    .cbcn-overall-img3 {
      z-index: 10;
    }
  }

  /* upgrades */
  @media screen {
    .cbcn-upgrades-content {
      display: flex;
      width: 100%;
      padding: 2em 1em;
      justify-content: center;
      align-items: center;
      border-radius: 1em;
      background: #f5f5f5;
      gap: 1.5em;
    }

    .cbcn-upgrades-img {
      width: 7.12005em;
      height: 3.08em;
    }
  }

  /* gemini */
  @media screen {
    .cbcn-gemini-img {
      width: 12.02415em;
      height: 25.5em;
      display: block !important;
    }

    .cbcn-gemini-img canvas {
      width: 12.02415em !important;
      height: 25.5em !important;
      display: block !important;
    }

    .cbcn-gemini-swiper {
      height: 100%;
      position: relative;
    }

    .cbcn-gemini-txt2 {
      display: flex;
      flex-direction: column-reverse;
      height: 100%;
      justify-content: space-between;
      opacity: 0;
    }

    .cbcn-gemini-left {
      padding-left: 2.5em;
      font-size: 1em;
    }

    .cbcn-gemini-txt2.active {
      opacity: 1;
    }

    .cbcn-gemini-card {
      display: flex;
      align-items: center;
      flex-direction: column;
      height: 38em;
      gap: 1.5em;
    }

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

    .cbcn-gemini-icon {
      width: 2em;
      height: 2em;
    }

    .cbcn-gemini-titleDiv {
      position: absolute;
      bottom: 69.5%;
      object-fit: contain;
    }
  }

  /* signal */
  @media screen {
    .cbcn-signal-txt1 {
      text-align: center;
    }

    .cbcn-signal-img {
      margin: 2.5em auto 0;
      width: 10.1472em;
      height: 21.5em;
    }

    .cbcn-signal-param {
      margin-top: 2.5em;
      justify-content: space-between;
    }

    .cbcn-signal-param .cbcn-param {
      width: 10em;
    }
  }

  /* experience */
  @media screen {
    .cbcn-experience-cardDiv {
      margin-top: 2.5em;
      gap: 0.5em;
      width: 100%;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .cbcn-experience-card1 {
      width: 100%;
      height: 14.19635em;
      border-radius: 0.75em;
      background-color: #f0f0f0;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .cbcn-experience-img {
      height: 18.10625em;
      width: 100%;
      margin-top: 2.5em;
      border-radius: 0.5em;
      overflow: hidden;
    }

    .cbcn-experience-img1 {
      width: 7.32635em;
      position: absolute;
      right: 7.25em;
      bottom: 0;
    }

    .cbcn-experience-img2 {
      width: 7.22975em;
      position: absolute;
      left: 7.5em;
      bottom: 0;
    }

    .cbcn-experience-card2 {
      width: calc(50% - 0.25em);
      height: 100%;
      padding: 1em 0.7em;
      border-radius: 0.75em;
      background-color: #f0f0f0;
      overflow: hidden;
      flex-shrink: 0;
      justify-content: space-between;
    }

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

    .cbcn-experience-card-p {
      font-size: 0.75em !important;
      line-height: 120%;
      font-family: "vivoSans-Medium";
    }
  }

  /* prolonged */
  @media screen {

    .cbcn-prolonged-txt1 {
      text-align: center;
    }

    .cbcn-prolonged-img {
      width: 13.8625em;
      height: 11.64455em;
      margin-top: 2.5em;
    }
  }

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