@media screen and (max-width: 980px),
(max-width: 100vh) {
  .cbcn-all-c {
    background-color: #fff;
  }

  .cbcn-NaturalLighting-txt1,
  .cbcn-VideoWallpaper-txt2,
  .cbcn-WaterLike-txt1,
  .cbcn-HumanFactors-txt1,
  .cbcn-AnimationEngine-txt1,
  .cbcn-UnfairScheduling-txt1,
  .cbcn-Memory-txt1,
  .cbcn-UltraClearImage-txt1,
  .cbcn-RemoveShadows-txt1 {
    text-align: center;
  }

  /* kv  */
  .cbcn-kv-img-bg {
    width: 100%;
    height: calc(35 / 18.75 * 100vw);
    position: relative;
    display: block;
  }

  .cbcn-kv-txt1 {
    z-index: 20;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
  }

  .cbcn-kv-p1 {
    font-size: 2.4em;
    font-style: normal;
    text-shadow: 0px 0px 120px rgba(255, 255, 255, 0.70);
    background: linear-gradient(108deg, #7ED6FF 24.39%, #699CFF 51.96%, #3A7AFF 96.61%, #FFF 117.76%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .cbcn-kv-link {
    background: linear-gradient(0deg, #9ADFFF -66.67%, #4682FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    position: absolute;
    top: 61.7%;
    width: 100%;
    text-align: center;
  }

  /* JoyofNature */
  @media screen {
    .cbcn-JoyofNature-screen {
      padding: 6em 1em 4em;
      text-align: center;
      background: linear-gradient(180deg, #91C2F2 0%, #FFF 49.28%, #FFF 100%);
    }

    .cbcn-JoyofNature-txt1 {
      background: linear-gradient(0deg, #9ADFFF -66.67%, #4682FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-UITitle-screen {
      padding: 4em 1em 2.5em;
    }

    .cbcn-UI-img {
      width: auto;
      height: 100vh;
      display: block;
      margin: 0 auto;
    }
  }

  /* NaturalLighting */
  @media screen {
    .cbcn-NaturalLighting-screen {
      padding: 6em 0;
      background-image: url("../img/wap/NaturalLightingBg.png.webp");
      background-repeat: no-repeat;
      background-size: cover;
    }

    .cbcn-NaturalLighting-p2 {
      margin-top: 1.75em;
      margin-bottom: 2.5em;
    }

    .cbcn-NaturalLighting-video-box {
      align-items: center;
      gap: 1em;
      position: relative;
    }

    .cbcn-NaturalLighting-video {
      width: 10.3611em;
      height: 22.4335em;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-NaturalLighting-img-bg {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scale(1.03);
      width: 10.3611em;
      height: 22.4335em;
    }
  }

  /* VideoWallpaper */
  @media screen {
    .cbcn-VideoWallpaper-screen {
      padding: 6em 0 2em;
    }

    .cbcn-VideoWallpaper-txt1 {
      padding: 0 1em 6em;
      text-align: center;
      background: linear-gradient(0deg, #9ADFFF -66.67%, #4682FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-VideoWallpaper-txt2 {
      gap: 1.75em;
      margin-bottom: 2.5em;
    }

    .cbcn-VideoWallpaper-videoBox {
      align-items: center;
      gap: 1em;
    }

    .cbcn-VideoWallpaper-video {
      width: 12.7005em;
      height: 27.4993em;
      margin: auto;
    }
  }

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

    .cbcn-Personalization-swiper {
      width: 16em;
      height: 28em;
      position: relative;
    }

    .cbcn-Personalization-swiper-content {
      position: absolute;
      top: 0;
      left: 0;
    }

    .cbcn-Personalization-swiper-item {
      width: 16em;
      height: 28em;
      padding: 1.5em 1em 0em 1em;
      position: relative;
      border-radius: 1em;
      background: #F5F5F5;
      overflow: hidden;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .cbcn-Personalization-swiper-item:last-of-type {
      padding: 0 1em 2em 1em;
      justify-content: flex-end;
    }

    .cbcn-Personalization-video {
      width: 14em;
      height: auto;
      position: absolute;
      bottom: 0;

    }

    .cbcn-Personalization-swiper-item:last-of-type .cbcn-Personalization-video {
      top: 0;
    }

    .cbcn-Personalization-switchBtn-list {
      margin-top: 1em;
      justify-content: flex-end;
    }
  }

  /* ControlSystem */
  @media screen {
    .cbcn-ControlSystem-txt1 {
      padding: 0 1em;
    }

    .cbcn-ControlSystem-list {
      flex-wrap: wrap;
      margin-top: 2.5em;
      gap: 0.65em 0;
      justify-content: space-between;
    }

    .cbcn-ControlSystem-col {
      gap: 0.65em;
    }

    .cbcn-ControlSystem-item {
      width: 8.05em;
      height: 6.45em;
      border-radius: 0.75em;
      overflow: hidden;
      position: relative;
    }

    .cbcn-ControlSystem-item .cbcn-wap-p32 {
      font-size: 32px !important;
    }

    .cbcn-ControlSystem-item .cbcn-wap-p18 {
      font-size: 18px !important;
    }

    .cbcn-ControlSystem-item.index1 {
      width: 100%;
      height: 15em;
    }

    .cbcn-ControlSystem-item p {
      position: absolute;
      top: 0;
      width: 100%;
      text-align: center;
      padding: 0.5em 0;
    }

    .cbcn-ControlSystem-item.index1 p {
      text-align: left;
      padding: 0.5em 0.65em;
    }
  }

  /* iconLib */
  @media screen {
    .cbcn-iconLibTxt-screen {
      position: relative;
    }

    .cbcn-iconLibTxt-img {
      width: 100%;
      height: 30.1em;
    }

    .cbcn-iconLibTxt-txtDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .cbcn-iconLibTxt-p1 {
      font-size: 4.8em;
      background: linear-gradient(0deg, #9ADFFF -66.67%, #4682FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-iconLibTxt-txt1 {
      margin-top: 0.85em;
    }

    .cbcn-iconLib-theme {
      width: 100%;
      height: 100vh;
      background: #000;
    }

    .cbcn-iconLib-light,
    .cbcn-iconLib-dark {
      position: absolute;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: all 0.5s;
    }

    .cbcn-iconLib-light {
      background: #E6E6E6;
    }

    .cbcn-iconLib-dark {
      background: #4D4D4D;
    }

    .cbcn-iconLib-theme .active {
      opacity: 1;
    }

    .cbcn-iconLib-btnDiv {
      justify-content: center;
      align-items: center;
      gap: 1em;
      border-radius: 2.05em;
      border: 0.7px solid rgba(204, 204, 204, 0.10);
      background: rgba(204, 204, 204, 0.30);
      backdrop-filter: blur(25px);
      z-index: 999;
      padding: 0.25em;
      box-sizing: content-box;
      position: absolute;
      bottom: 2em;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-iconLib-btn {
      width: 2.5em;
      height: 2.5em;
      position: relative;
      cursor: pointer;
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cbcn-iconLib-btn.index2 {
      opacity: 0.6;
    }

    .cbcn-iconLib-btnActive {
      width: 2.5em;
      height: 2.5em;
      background: #FFF;
      overflow: hidden;
      border-radius: 1.25em;
      position: absolute;
      top: 50%;
      left: 0.25em;
      transform: translateY(-50%);
      transition: left 0.5s;
    }

    .cbcn-iconLib-btn svg {
      width: 1.5em;
      height: 1.5em;
    }
  }

  @media screen {
    .cbcn-Smooth-txt1 {
      width: 100%;
      padding: 6em 1em 4em;
      background: linear-gradient(0deg, #9ADFFF -66.67%, #4682FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-WaterLike-screen {
      padding-bottom: 2em;
    }

    .cbcn-WaterLike-img {
      margin-top: 2.5em;
      width: 100%;
      height: 15em;
    }
  }


  /* HumanFactors */
  @media screen {

    .cbcn-HumanFactors-num {
      line-height: 1em;
    }

    .cbcn-HumanFactors-screen {
      padding: 4em 0 6em;
    }

    .cbcn-HumanFactors-BG {
      width: 100vw;
      position: relative;
      left: -1em;
      height: 15.8em;
      margin-bottom: -15.8em;
      margin-top: 2.5em;
    }

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

    .cbcn-HumanFactors-param {
      margin-bottom: 42.987vw;
      text-align: center;
    }

    .cbcn-HumanFactors-imgDiv {
      padding-top: 15px;
      justify-content: center;
      gap: 45%;
    }

    .cbcn-HumanFactors-videoBox {
      position: relative;
    }

    .cbcn-HumanFactors-videoBox .cbcn-wap-videoControl {
      position: absolute;
      bottom: -3em;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-HumanFactors-video {
      width: auto;
      height: 17.0927em;
      flex-shrink: 0;
    }
  }

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

    .cbcn-AnimationEngine-txt1 {
      gap: 2.5em;
    }

    .cbcn-AnimationEngine-img {
      width: 100%;
      height: 16.95em;
    }
  }

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

    .cbcn-UnfairScheduling-txt1 {
      gap: 2.5em;
    }

    .cbcn-UnfairScheduling-txt1 .cbcn-param {
      width: 170px;
      margin: 0 auto;
    }

    .cbcn-UnfairScheduling-img {
      width: 100%;
      height: calc(1104 / 1800 * 100%);
      margin-top: 1.1em;
    }
  }

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

    .cbcn-Memory-txt1 {
      gap: 2.5em;
    }

    .cbcn-Memory-txt1 p,
    .cbcn-Memory-txt1 .ct {
      margin: 0 !important;
    }

    .cbcn-Memory-img {
      width: 100%;
      height: 15.55em;
    }
  }

  /* BePro */
  @media screen {
    .cbcn-BePro-screen {
      padding: 6em 0 4em;
      text-align: center;
    }

    .cbcn-BePro-txt1 {
      background: linear-gradient(0deg, #9ADFFF -66.67%, #4682FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-AIImageLab-screen {
      max-width: 600px;
      padding: 0;
      margin: 0 auto;
      overflow: visible;
    }

    .cbcn-AIImageLab-content {
      justify-content: center;
      width: 100%;
      padding: 0 1.44em;
      display: inline-block !important;
      overflow: visible;
    }

    .cbcn-AIImageLab-p1 {
      text-align: center;
    }

    .cbcn-AIImageLab-svg {
      width: 1.44em;
      height: 0.9em;
      display: block;
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /* UltraClearImage */
  @media screen {
    .cbcn-UltraClearImage-content {
      align-items: flex-end;
    }

    .cbcn-UltraClearImage-imgDiv {
      position: relative;
      width: 100%;
      height: calc(52 / 67 * 100%);
      border-radius: 1em;
      overflow: hidden;
      margin: 2.5em 0 1.5em;
    }

    .cbcn-UltraClearImage-img2 {
      position: absolute;
      top: 0;
      opacity: 0;
      z-index: 2;
      transition: all 0.5s;
    }

    .cbcn-UltraClearImage-img2.active {
      opacity: 1;
    }



    .cbcn-UltraClearImage-btnDiv {
      position: relative;
      padding: 0.25em;
      gap: 0.5em;
      justify-content: center;
      align-items: center;
      border-radius: 2.05em;
      background: #F2F2F2;
      backdrop-filter: blur(25px);
      z-index: 999;
      box-sizing: content-box;
    }

    .cbcn-UltraClearImage-btn {
      width: 4.5em;
      height: 2.35em;
      position: relative;
      cursor: pointer;
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cbcn-UltraClearImage-btn.index2 {
      opacity: 0.6;
    }

    .cbcn-UltraClearImage-btnActive {
      width: 4.5em;
      height: 2.35em;
      padding: 0.5em 1em;
      justify-content: center;
      align-items: center;
      background: #FFF;
      overflow: hidden;
      border-radius: 1.25em;
      position: absolute;
      top: 50%;
      left: 0.25em;
      transform: translateY(-50%);
      transition: left 0.5s;
    }
  }

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

    .cbcn-RemoveShadows-content {
      gap: 2.5em;
    }

    .cbcn-RemoveShadows-img {
      width: 16.75em;
      height: 13em;
      margin: 0 auto;
    }
  }

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

    .cbcn-AIImage-screen p {
      text-align: center;
    }

    .cbcn-AIImage-p2 {
      margin-top: 1.5em;
    }

    .cbcn-AIImage-videoBox {
      align-items: center;
      gap: 1em;
    }

    .cbcn-AIImage-video {
      width: 12.7em;
      height: 27.5em;
      margin: 2.5em auto 0;
    }
  }

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

    .cbcn-MovieAlbum-video {
      width: 100%;
      height: 27.5em;
      margin-top: 2.5em;
    }
  }

  /* EfficiencyTools */
  @media screen {
    .cbcn-EfficiencyTools-swiper {
      width: 16em;
      height: 28em;
      position: relative;
    }

    .cbcn-EfficiencyTools-swiper-content {
      position: absolute;
      top: 0;
      left: 0;
    }

    .cbcn-EfficiencyTools-swiper-item {
      width: 16em;
      height: 28em;
      border-radius: 1em;
      background: #F5F5F5;
      justify-content: space-between;
      overflow: hidden;
      position: relative;
    }

    .cbcn-EfficiencyTools-swiper-item .cbcn-EfficiencyTools-txt {
      padding: 2em 1em;
      gap: 0.8em;
      position: relative;
      z-index: 9;
    }

    .cbcn-EfficiencyTools-img {
      width: 100%;
      position: absolute;
      bottom: 0;
    }

    .cbcn-EfficiencyTools-swiper-item.index3 .cbcn-EfficiencyTools-img {
      bottom: auto;
      top: 0;
    }

    .cbcn-EfficiencyTools-swiper-item.index3 {
      justify-content: flex-end;
    }

    .cbcn-EfficiencyTools-switchBtn-list {
      margin-top: 1em;
      justify-content: flex-end;
    }
  }

  /* Game */
  @media screen {
    .cbcn-Game-screen {
      padding: 0 0 2em;
    }

    .cbcn-Game-phone1 {
      width: 100%;
      height: 100vh;
      min-height: 900px;
      position: relative;
    }

    .cbcn-Game-phone1 img {
      object-position: 20% center !important;
    }

    .cbcn-Game-phone1 .cbcn-Game-phone1-1 {
      position: absolute;
      bottom: 20%;
      left: 10%;
      width: 28em;
    }

    .cbcn-Game-txt1 {
      position: absolute;
      top: 4em;
      z-index: 9;
    }

    .cbcn-Game-txt1,
    .cbcn-Game-content2 {
      padding: 0 1em;
    }

    .cbcn-Game-content2 {
      margin-top: 4em;
    }

    .cbcn-Game-phone2 {
      width: 100%;
      height: calc(70 / 67 * 100%);
      margin-top: 2.5em;
    }
  }

  /* Amazing */
  @media screen {
    .cbcn-Amazing-screen {
      padding: 4em 1em;
      text-align: center;
    }

    .cbcn-Amazing-txt1 {
      background: linear-gradient(0deg, #9ADFFF -66.67%, #4682FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

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

    .cbcn-PowerSaving-txt1 {
      display: flex;
      flex-direction: column;
      gap: 1.5em;
    }

    .cbcn-PowerSaving-txt1 .cbcn-wap-p45 {
      background: linear-gradient(294deg, #4DF9E8 32.49%, #3CA4F9 118.21%, #003EDE 195.76%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-PowerSaving-paramGroup .cbcn-param {
      align-items: flex-start;
    }

    .cbcn-PowerSaving-img {
      width: 100%;
      height: 19.8em;
      margin-bottom: -9.3em;
    }

    .cbcn-PowerSaving-icon1 {
      width: 1.48em;
      height: 2em;
      margin-bottom: 1em;
    }

    .cbcn-PowerSaving-icon2 {
      width: 1.8em;
      height: 1.8em;
      margin-bottom: 1em;
    }

    .cbcn-PowerSaving-txt2 {
      padding: 0 1em;
      gap: 1em;
    }

    .cbcn-PowerSaving-txt2-item {
      width: 100%;
      padding: 1.5em;
      border-radius: 0.5rem;
      background: rgba(64, 64, 64, 0.30);
      backdrop-filter: blur(40px);
      overflow: hidden;
    }
  }

  /* OfficeAssistant */
  @media screen {
    .cbcn-OfficeAssistant-swiper {
      width: 16em;
      height: 28em;
      position: relative;
    }

    .cbcn-OfficeAssistant-swiper-content {
      position: absolute;
      top: 0;
    }

    .cbcn-OfficeAssistant-swiper-item {
      width: 16em;
      height: 28em;
      padding: 1.2em 0 0;
      justify-content: space-between;
      border-radius: 1em;
      background: #F5F5F5;
      overflow: hidden;
      position: relative;
    }

    .cbcn-OfficeAssistant-txt1,
    .cbcn-OfficeAssistant-txt2,
    .cbcn-OfficeAssistant-txt3 {
      padding: 0 1em;
      position: relative;
      z-index: 9;
      gap: 0.8em;
    }

    .cbcn-OfficeAssistant-img {
      width: 100%;
      flex-shrink: 0;
      position: absolute;
      bottom: 0;
    }

    .cbcn-OfficeAssistant-switchBtn-list {
      margin-top: 1em;
      justify-content: flex-end;
    }
  }

  /* remark */
  @media screen {
    .cbcn-remark-screen {
      opacity: 0.6;
    }

    .cbcn-remark-screen ul,
    .cbcn-remark-screen ol {
      padding-inline-start: 20px;
      margin: 0;
    }

    .cbcn-remark-screen ul li {
      list-style: none;
      position: relative;
    }

    .cbcn-remark-screen li {
      color: #1D1D1F !important;
    }

    .cbcn-remark-screen ul li::before {
      content: '*';
      position: absolute;
      left: -12px;
      top: 1px;
    }

    .cbcn-remark-screen ol li {
      list-style: decimal;
    }
  }
}




@media screen and (max-width: 1023px) and (min-width: 700px) {

  .cbcn-JoyofNature-txt1,
  .cbcn-ControlSystem-txt1,
  .cbcn-PowerSaving-txt2,
  .cbcn-titletxt.big {
    max-width: 600px;
    padding: 0;
    margin: 0 auto;
  }

  .cbcn-JoyofNature-txt1 p {
    white-space: normal !important;
  }

  .cbcn-UI-img {
    width: 600px !important;
    height: 900px !important;
  }

  .cbcn-ControlSystem-list {
    gap: 0;
    justify-content: space-between;
    margin-top: 1.25em !important;
  }

  .cbcn-ControlSystem-col {
    width: 48.2%;
    overflow: hidden;
  }

  .cbcn-ControlSystem-col:nth-of-type(1) {
    width: 100%;
    height: calc(60 / 67 * 100%);
    margin-bottom: 0.65em;
  }

  .cbcn-ControlSystem-item {
    width: 100%;
    height: calc(322 / 258 * 100%);
    ;
  }

  .cbcn-ControlSystem-item p {
    padding: 0.5em 0.3em !important;
  }

  .cbcn-iconLib-btnDiv {
    transform: translateX(-50%) scale(0.6) !important;
    transform-origin: center;
  }

  .cbcn-HumanFactors-BG {
    left: calc((100vw - 600px) / 2 * -1) !important;
  }

  .cbcn-HumanFactors-BG {
    margin-bottom: -14em !important;
  }

  .cbcn-HumanFactors-param {
    margin-bottom: 45vw !important;
  }

  .cbcn-HumanFactors-video {
    height: calc(600px * 848 / 870) !important;
  }

  .cbcn-RemoveShadows-img {
    width: 100% !important;
    height: calc(52 / 67 * 100%) !important;
  }

  .cbcn-Game-txt1 {
    top: 8em;
    left: 50%;
    transform: translateX(-50%);
  }

  .cbcn-Game-phone1 {
    height: 80vh;
  }

  .cbcn-Game-phone1 img {
    object-position: center !important;
  }

  .cbcn-Game-phone1 .cbcn-Game-phone1-1 {
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
  }

  .cbcn-Game-phone2 {
    width: 480px !important;
    height: calc(70 / 67* 480px) !important;
    margin: 2.5em auto 0;
  }

  .cbcn-UnfairScheduling-txt1 .cbcn-param {
    width: 50%;
  }

  .cbcn-UnfairScheduling-img {
    margin-top: 2.5em;
  }

  .cbcn-iconLib-theme {
    height: 70vh;
  }

  .cbcn-iconLib-btnDiv {
    bottom: 0.5em;
  }
}