@media screen and (min-width: 981px) {
  /* kv */
  @media screen {
    .cbcn-kv-screen {
      width: 100vw;
      height: calc(48 / 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(177deg, #fcf2ed -27.19%, #f5f4f0 116.23%),
        #fff;
      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-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 {
      text-align: center;
      text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8),
        0px 10px 40px rgba(217, 130, 64, 0.5),
        0px 10px 80px rgba(217, 130, 64, 0.7),
        0px 10px 150px rgba(217, 130, 64, 0.8);
      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;
    }
  }

  /* layer-form */
  @media screen {
    .layer-form {
      width: 100%;
      padding: 3em 6em;
      border-radius: 2.5em;
      background: #f4f4f4;
    }
    .form-wrap {
      margin-top: 2em;
    }
    .input-group {
      width: 100%;
      margin-bottom: 2em;
      position: relative;
    }
    .input-group label {
      align-items: center;
      justify-content: space-between;
    }
    .input-value input {
      width: 598px;
      height: 2.1em;
      border: none;
      background: transparent;
    }
    .input-value {
      border-bottom: 1px solid #b3b3b3;
    }
    .input-group.error .input-value {
      border-color: #ff0000;
    }
    .input-value input::placeholder {
      color: rgba(29, 29, 31, 0.35);
    }
    .check-status {
      position: absolute;
      right: -0.5em;
      top: 30%;
    }
    .status-correct,
    .status-error {
      position: absolute;
      top: 0;
      left: 0;
      width: 1.2em;
      height: 1.2em;
      opacity: 0;
    }
    .input-group.success .status-correct {
      opacity: 1;
    }
    .input-group.error .status-error {
      opacity: 1;
    }

    .tip-text {
      margin-top: 1.8em;
      justify-content: flex-end;
    }
    .check-box {
      width: 1em;
      height: 1em;
      border-radius: 50%;
      background: transparent;
      border: 1px solid #b3b3b3;
      flex-shrink: 0;
      margin-top: 0.4em;

      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .check-box.error {
      border-color: #ff0000;
      background: #fed7d6;
    }
    .check-box .tip-arrow {
      width: 0.625em;
      height: 0.4em;
      opacity: 0;
    }
    .check-box.active .tip-arrow {
      opacity: 1;
    }
    .policy-text {
      margin-left: 0.7em;
      width: 598px;
    }
    .policy-text a {
      text-decoration: none;
      color: #3254fb !important;
    }

    .form-submit-btn {
      margin: 2.5em auto 0;
      width: 13.6em;
      height: 3.5em;
      justify-content: center;
      align-items: center;
      border-radius: 4em;
      background: #6e8add;

      cursor: pointer;
    }
    .form-submit-btn p {
      color: #f5f5f7 !important;
    }

    /* 解决回填后带背景色问题 */
    .input-group input:-webkit-autofill,
    .input-group input:-webkit-autofill:hover,
    .input-group input:-webkit-autofill:focus,
    .input-group input:-webkit-autofill:active {
      -webkit-transition-delay: 99999s;
      -webkit-transition: background-color 99999s ease-out;
    }
    .input-group input:focus-visible {
      outline: none;
    }
  }

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