@media screen and (min-width: 981px) {
  /* kv */
  @media screen {
    .cbcn-kv-section {
      width: 100%;
      transform-origin: center;
    }

    .cbcn-kv-img {
      width: 96em;
      height: 54em;
      mask-image: url(../images/pc/kspmask.png);
      mask-size: 500%;
      mask-position: 50% 50%;
      -webkit-mask-repeat: no-repeat;
      transform: translate(-50%, -50%) scale(1);
    }

    .cbcn-kv-fn {
      position: absolute;
      left: 2em;
      bottom: 2vh;
    }
  }

  /* ksp */
  @media screen {

    .cbcn-ksp-section,
    .cbcn-ksp-bg {
      opacity: 0;
    }

    .cbcn-ksp-p {
      font-size: 3.4em;
      font-weight: 500;
      line-height: 128.571%;
    }

    .cbcn-ksp-main {
      width: 27em;
      height: 27em;
      overflow: hidden;
      z-index: 9;
      transform: translate(-50%, -50%) scale(1.25);
    }

    .cbcn-ksp-video {
      width: 165%;
      height: 165%;
    }

    .cbcn-ksp-title {
      z-index: 13;
      opacity: 0;
    }

    .cbcn-ksp-p1 {
      background-image: linear-gradient(180deg, #e5e5e5 44.76%, #6e6e6e 95.69%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-ksp-p2 {
      text-shadow: 0;
    }

    .cbcn-ksp-bg {
      z-index: 31;
      position: relative;
    }

    .cbcn-ksp-bg3 {
      opacity: 0;
      z-index: 10;
    }

    .cbcn-ksp-phone {
      bottom: -4em;
      opacity: 0;
      z-index: 29;
      width: 14em;
      height: 13.78em;
      --poi1: 20%;
      --poi2: 30%;

      -webkit-clip-path: polygon(0% 0%,
          100% 0%,
          100% var(--poi1),
          75% var(--poi2),
          25% var(--poi2),
          0% var(--poi1));
      clip-path: polygon(0% 0%,
          100% 0%,
          100% var(--poi1),
          75% var(--poi2),
          25% var(--poi2),
          0% var(--poi1));
    }

    .cbcn-ksp-content {
      width: 60em;
      gap: 0.5em 0.45em;
      flex-wrap: wrap;
      opacity: 0;
      margin-top: 1em;
    }

    .cbcn-ksp-itemBox {
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    .cbcn-ksp-itemBox2 {
      width: fit-content;
      height: 100%;
      gap: 0 0.47em;
    }

    .cbcn-ksp-itemBox2.left {
      position: relative;
      left: 4em;
      top: -1em;
      z-index: 11;
    }

    .cbcn-ksp-itemBox2.right {
      position: relative;
      left: -4em;
      top: -1em;
      z-index: 10;
    }

    .cbcn-ksp-itemBox2 .cbcn-ksp-txt {
      align-items: center;
    }

    .cbcn-ksp-item {
      position: relative;
    }

    .cbcn-ksp-item1,
    .cbcn-ksp-item2 {
      width: 29.75em;
      height: 10.5em;
    }

    .cbcn-ksp-item3,
    .cbcn-ksp-item4 {
      width: 29.75em;
      height: 9em;
    }

    .cbcn-ksp-item2,
    .cbcn-ksp-item4 {
      margin-left: 0.05em;
      position: relative;
      left: -4em;
    }

    .cbcn-ksp-item1,
    .cbcn-ksp-item3 {
      position: relative;
      left: 4em;
    }

    .cbcn-ksp-txt {
      position: absolute;
      left: 0;
      bottom: 0;
      gap: 0.5em;
      padding: 1em;
      width: 100%;
      transform: translateY(0.9em);
      transition: transform 0.3s ease-in-out;
    }

    .cbcn-ksp-txt,
    .cbcn-ksp-txt {
      align-items: flex-start;
    }

    .cbcn-ksp-txt.right {
      align-items: flex-end;
      text-align: right;
    }

    .cbcn-ksp-item5,
    .cbcn-ksp-item6,
    .cbcn-ksp-item7,
    .cbcn-ksp-item8 {
      width: 14.65em;
      height: 10em;
    }

    .cbcn-ksp-item .cbcn-hg6 {
      font-size: 1em;
    }

    .cbcn-ksp-icon {
      width: 0.8em;
      height: 0.4em;
      z-index: 9;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    .cbcn-ksp-item::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.4);
    }

    .cbcn-ksp-item:hover .cbcn-ksp-txt {
      transform: translateY(0em);
    }

    .cbcn-ksp-item:hover .cbcn-ksp-icon {
      opacity: 1;
    }

    .cbcn-ksp-item:hover::before {
      opacity: 1;
    }

    /* 第八屏 */
    .cbcn-ksp-txticon {
      width: 6.28935em;
      height: 1.8828em;
      object-fit: contain;
    }

    .cbcn-ksp-item8 .cbcn-ksp-txt {
      align-items: center;
    }
  }

  /* appearance */
  @media screen {
    .cbcn-appearance-section.bk {
      background-color: #fff;
    }

    .cbcn-appearance-section>video {
      z-index: 1;
      position: relative;
      height: 100.5% !important;
      width: 100%;
    }

    .cbcn-appearance-p {
      z-index: 2;
      opacity: 0;
    }

    .cbcn-appearance-p::after {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .cbcn-appearance-p p {
      position: relative;
      z-index: 2;
    }
  }

  /* color */
  @media screen {
    .cbcn-color-content {
      height: 65.35em;
    }

    .cbcn-color-title {
      top: 8em;
      z-index: 9;
      text-align: center;
      opacity: 0;
      transition: all 0.3s;
      will-change: opacity;
    }

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

    .cbcn-color-title p {
      opacity: 0;
    }

    .cbcn-color-title p.active {
      opacity: 1;
    }

    .cbcn-color-title p:nth-child(1) {
      background: radial-gradient(147.75% 191.42% at 2.52% -16.73%, #FFF 0%, #E5E5E5 41.93%, #696972 100%);
      background: radial-gradient(147.75% 191.42% at 2.52% -16.73%, color(display-p3 1 1 1) 0%, color(display-p3 0.898 0.898 0.898) 41.93%, color(display-p3 0.4104 0.4104 0.4423) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-color-loading {
      width: 100%;
      height: 100%;
      z-index: 20;
    }

    .cbcn-color-loadingimg {
      width: 100%;
      height: 100%;
      -webkit-filter: blur(15px);
      filter: blur(15px);
    }

    .cbcn-color-logo {
      width: 5em;
      height: 5em;
      z-index: 9;
    }

    .cbcn-color-frame {
      width: 100%;
      height: 100%;
      background: #000;
      position: relative;
      z-index: 1;
    }

    .cbcn-color-frame #application-canvas {
      width: 100% !important;
      height: 100% !important;
      margin: 0;
      top: 0 !important;
    }

    .cbcn-color-box {
      width: 100%;
      justify-content: center;
      z-index: 9;
      bottom: 8em;
      opacity: 0;
      transition: all 0.3s;
      will-change: opacity;
    }

    .cbcn-color-box.active {
      opacity: 1;
    }

    .cbcn-color-btnlst {
      width: 11.8em;
      padding: 1.1em;
      gap: 1.6em;
    }

    .cbcn-color-btn {
      box-sizing: content-box !important;
      width: 1.2em;
      height: 1.2em;
      border-radius: 0.4em;
      position: relative;
      cursor: pointer;
    }

    .cbcn-color-btn2 {
      background: linear-gradient(146deg, #bfbfbf 16.72%, #fff 87.69%),
        linear-gradient(149deg, #8bb000 16.4%, #fff 85.5%),
        rgba(255, 255, 255, 0.31);
    }

    .cbcn-color-btn2::after {
      border: 0.1em solid #f0f0f1 !important;
    }

    .cbcn-color-btn3 {
      background: linear-gradient(149deg, #8bb000 16.4%, #fff 85.5%),
        rgba(255, 255, 255, 0.31);
    }

    .cbcn-color-btn3::after {
      border: 0.1em solid #d8dcca !important;
    }

    .cbcn-color-btn4 {
      background: linear-gradient(146deg, #5a5a5a 16.72%, #a2a2a2 87.69%),
        rgba(255, 255, 255, 0.31);
    }

    .cbcn-color-btn4::after {
      border: 0.1em solid #8c8d8e !important;
    }

    .cbcn-color-btn::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1.8em;
      height: 1.8em;
      transform: translate(-50%, -50%) scale(0);
      border-radius: 0.7em;
      border: 0.1em solid rgba(255, 255, 255, 0.5);
      transition: all 0.3s;
      overflow: visible;
      z-index: -1;
    }

    .cbcn-color-btn.active::after {
      transform: translate(-50%, -50%) scale(1);
    }

    .cbcn-color-swiper {
      width: 29.4em;
    }

    .cbcn-color-swiper .swiper-slide {
      width: 100%;
      display: flex;
      gap: 2.4em;
      align-items: center;
      opacity: 0 !important;
    }

    .cbcn-color-swiper .swiper-slide-active {
      opacity: 1 !important;
    }

    .cbcn-color-name {
      width: 7em;
      align-items: center;
      text-align: center;
    }

    .cbcn-color-desc {
      width: 20em;
    }

    .cbcn-color-desc.index1 p,
    .cbcn-color-desc.index4 p {
      color: #a1a1a6 !important;
    }

    .cbcn-color-desc.index2 p {
      color: #a1a1a6 !important;
    }

    .cbcn-color-desc.index3 p {
      color: #fff !important;
      opacity: 0.8;
    }
  }

  /* design */
  @media screen {
    .cbcn-design-swiper {
      width: 60em;
      height: 30em;
      margin-top: 14em;
      transform: translateX(0);
    }

    .cbcn-design-swiper .swiper-wrapper {
      gap: 2.4em;
    }

    .cbcn-design-title {
      top: -3em;
      opacity: 1;
    }

    .cbcn-design-img {
      width: 60em;
      height: 32.65em;
      z-index: 1;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      position: absolute;
      transform-origin: bottom;
    }

    .cbcn-design-img img {
      transform-origin: bottom;
    }

    .cbcn-design-txt {
      position: absolute;
      top: 3em;
      left: 3em;
      z-index: 10;
    }

    .cbcn-design-slide {
      position: relative;
      width: 60em;
      height: 30em;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), linear-gradient(0deg, rgba(29, 29, 33, 0.20) 0%, rgba(29, 29, 33, 0.20) 100%), linear-gradient(0deg, rgba(50, 42, 73, 0.10) 0%, rgba(50, 42, 73, 0.10) 100%), radial-gradient(217.55% 135.1% at 42.65% -2.14%, #000 0%, #24262B 100%), radial-gradient(283.56% 124.24% at 50% -13.31%, #222327 0%, #010101 100%);
      background: linear-gradient(0deg, color(display-p3 0 0 0 / 0.40) 0%, color(display-p3 0 0 0 / 0.40) 100%), linear-gradient(0deg, color(display-p3 0.1148 0.1148 0.1298 / 0.20) 0%, color(display-p3 0.1148 0.1148 0.1298 / 0.20) 100%), linear-gradient(0deg, color(display-p3 0.1897 0.165 0.2789 / 0.10) 0%, color(display-p3 0.1897 0.165 0.2789 / 0.10) 100%), radial-gradient(217.55% 135.1% at 42.65% -2.14%, color(display-p3 0 0 0 / 0.00) 0%, color(display-p3 0.1412 0.149 0.1686) 100%), radial-gradient(283.56% 124.24% at 50% -13.31%, color(display-p3 0.1333 0.1373 0.1529) 0%, color(display-p3 0.0039 0.0039 0.0039) 100%);
    }

    .cbcn-design-btnList {
      margin-top: 3.4em;
    }
  }

  /* poweraura */
  @media screen {
    .cbcn-poweraura-bg {
      background: radial-gradient(117.73% 150.62% at 20.8% -16.09%, rgba(60, 60, 68, 0.40) 0%, rgba(13, 13, 16, 0.40) 52.78%, rgba(0, 0, 0, 0.40) 83.73%), radial-gradient(195.06% 128.05% at 26.31% -2.56%, rgba(40, 39, 43, 0.60) 0%, rgba(13, 13, 16, 0.60) 52.78%, rgba(0, 0, 0, 0.60) 83.73%);
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #00000000 50%);
      mask-image: linear-gradient(180deg, #000 0%, #00000000 50%);
    }

    .cbcn-poweraura-title {
      top: 10em;
      width: 34.8em;
      z-index: 12;
    }

    .cbcn-poweraura-media {
      width: 96em;
      height: 65.5em;
      position: relative;
      left: 50%;
      z-index: 10;
      transform: translateX(-50%) scale(1.05);
    }

    .cbcn-poweraura-bg {
      width: 100%;
      height: 65.55em;
      top: 0;
      z-index: 11;
    }
  }

  /* performance */
  @media screen {
    .cbcn-performance-section {
      padding-bottom: 10em;
    }

    .cbcn-performance-title {
      top: 25vh;
      z-index: 9;
    }

    .cbcn-performance-t1 {
      background: linear-gradient(180deg,
          #6e6e6e 1.72%,
          #e5e5e5 69.82%,
          #cfcfcf 95.69%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-performance-fix {
      overflow: visible;
    }

    .cbcn-performance-media {
      width: 154.02vh;
      height: 100vh;
      margin-top: 27.07vh;
    }

    .cbcn-performance-txt {
      top: 7.41vh;
      margin-top: 3em;
      width: 43.5em;
    }

    .cbcn-performance-param {
      width: 60em;
      padding: 2.4em 3em;
      background: linear-gradient(0deg, #0d0d10 0%, #0d0d10 100%),
        var(--semantic-surface-quaternary, #111112);
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
      /* transform: translateY(3em); */
    }

    .cbcn-performance-txt3 {
      justify-content: flex-start;
      padding-bottom: 1.2em;
      position: relative;
      z-index: 11;
    }

    .cbcn-performance-txt4 {
      padding: 1.2em 0;
      z-index: 11;
      border-top: 1px solid #272727;
      border-bottom: 1px solid #272727;
      justify-content: space-between;
      position: relative;
    }

    .cbcn-performance-txt1 .cbcn-param,
    .cbcn-performance-txt2 .cbcn-param,
    .cbcn-performance-txt3 .cbcn-param,
    .cbcn-performance-txt4 .cbcn-param {
      text-align: left;
    }

    .cbcn-performance-txt1 .cbcn-param:nth-last-child(1) {
      margin-right: 3.25em;
    }

    .cbcn-performance-txt1 .cbcn-param:nth-last-child(1) {
      margin-right: 2.55em;
    }

    .cbcn-performance-line {
      background-color: rgba(255, 255, 255, 0.12);
      width: 1px;
      height: 3.25em;
    }

    .cbcn-performance-txt1 {
      width: 100%;
      justify-content: space-between;
      padding-bottom: 1.2em;
    }

    .cbcn-performance-txt2 {
      border-top: 1px solid #272727;
      width: 100%;
      justify-content: space-between;
      padding-top: 1.2em;
    }

    .cbcn-performance-param2 {
      margin-top: 0.7em;
      width: 60em;
      padding: 2.4em 3em 3em;
      position: relative;
      background: linear-gradient(0deg, #0d0d10 0%, #0d0d10 100%), var(--semantic-surface-quaternary, #111112);
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    }

    .cbcn-performance-txt4 .cbcn-param.index1 {
      width: 18.45em;
    }

    .cbcn-performance-txt4 .cbcn-param.index2 {
      width: 15em;
    }

    .cbcn-performance-txt4 .cbcn-param.index3 {
      width: 12.55em;
    }

    .cbcn-performance-param span {
      color: #e2543b;
    }

    .cbcn-performance-txt5,
    .cbcn-performance-txt6 {
      z-index: 11;
      position: relative;
      width: 100%;
    }

    .cbcn-performance-txt5 {
      margin-top: 2.4em;
      margin-bottom: 6em;
    }

    .cbcn-performance-txt6 {
      justify-content: space-between;
    }

    .cbcn-performance-txt6 .cbcn-param {
      width: 15em;
    }

    .cbcn-performance-svg {
      width: 54em;
      height: 1.73025em;
      bottom: 9em;
      clip-path: inset(0 100% 0 0);
      transition: none;
      z-index: 11;
    }

    .cbcn-performance-svg.active {
      clip-path: inset(0 0% 0 0);
      transition: all 2s;
    }

    .cbcn-performance-svg2 {
      width: 100%;
      height: 100%;
      bottom: 0em;
      z-index: 10;
    }

    .cbcn-performance-fn {
      width: 60em;
      margin-top: 1em;
    }

    .cbcn-performance-txt2 .indent {
      text-indent: -0.4em;
    }

    .cbcn-performance-txt5 .indent {
      text-indent: -0.4em;
    }

    .cbcn-performance-tips {
      width: 100%;
      padding: 0 3em;
      bottom: 2em;
      z-index: 30;
      gap: 5.7em;
    }

    .cbcn-performance-tips>div {
      justify-content: space-between;
    }
  }

  /* cooperation */
  @media screen {
    .cbcn-cooperation-section {
      position: relative;
    }

    .cbcn-cooperation-logo {
      width: 26.43935em;
      height: 3.015em;
    }

    .cbcn-cooperation-title {
      top: 4em;
      z-index: 20;
    }

    .cbcn-cooperation-img {
      width: 23.95em;
      height: 29.85em;
      z-index: 12;
    }

    .cbcn-cooperation-bg {
      width: 96em;
      height: 46.15em;
      z-index: 11;
    }

    .cbcn-cooperation-Box {
      z-index: 13;
    }

    .cbcn-cooperation-txt1 {
      width: 100%;
      padding: 2.4em 4.5em 2.4em 3em;
      position: relative;
      gap: 5em;
      z-index: 11;
      background: linear-gradient(0deg, #0d0d10 0%, #0d0d10 100%),
        var(--semantic-surface-quaternary, #111112);
    }

    .cbcn-cooperation-param {
      flex-shrink: 0;
      width: 24.6em;
      gap: 1.8em;
    }

    .cbcn-cooperation-icon {
      flex-shrink: 0;
      display: block;
      width: 4.95em;
      height: 6.1em;
    }

    .cbcn-cooperation-param .cbcn-hg6 {
      text-indent: -0.5em;
    }

    .cbcn-cooperation-txt2 {
      flex-shrink: 0;
      width: 24.25em;
    }

    .cbcn-cooperation-txt3 {
      margin-top: 0.7em;
      width: 100%;
      position: relative;
      z-index: 13;
      justify-content: space-between;
      padding: 2.4em 5em 2.4em 3em;
      background: linear-gradient(0deg, #0d0d10 0%, #0d0d10 100%),
        var(--semantic-surface-quaternary, #111112);
    }
  }

  /* customize */
  @media screen {
    .cbcn-customize-fix {
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .cbcn-customize-logo {
      width: 29.7983em;
      height: 3.035em;
    }

    .cbcn-customize-title {
      margin-bottom: 4em;
    }

    .cbcn-customize-title>.cbcn-title {
      align-items: center;
      justify-content: center;
    }

    .cbcn-customize-img {
      width: 100%;
      height: 100%;
      z-index: 10;
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .cbcn-customize-fn {
      bottom: 2.778vh;
      z-index: 14;
    }

    .cbcn-customize-bg {
      width: 100%;
      height: 100%;
      z-index: 12;
    }

    .cbcn-customize-bg .bg1 {
      background: #000;
      opacity: 1;
      z-index: 11;
    }

    .cbcn-customize-bg .bg2 {
      opacity: 1;
      z-index: 10;
    }

    .cbcn-customize-bg img {
      transform-origin: center;
    }

    .cbcn-customize-btn {
      bottom: 7.4074vh;
      color: #f5f5f7;
      transition: all 0.3s;
      z-index: 14;
    }

    .cbcn-customize-btn:hover {
      color: #619df8;
    }

    .cbcn-customize-picture1,
    .cbcn-customize-picture2 {
      width: 100%;
      height: 100%;
      display: block;
      z-index: 13;
    }

    .cbcn-customize-picture2 {
      z-index: 12;
      opacity: 0;
      transition: all 0.3s ease-in-out;
    }

    .cbcn-customize-btn:hover .cbcn-customize-picture2 {
      z-index: 14;
      opacity: 1;
    }
  }

  /* chip */
  @media screen {
    .cbcn-chip-section {
      transform-origin: center center;
    }

    .cbcn-chip-details {
      position: relative;
    }

    .cbcn-chip-title {
      width: 35.1em;
    }

    .cbcn-chip-media {
      width: 100%;
      height: 100vh;
      opacity: 0;
    }

    .cbcn-chip-content {
      gap: 3em;
      margin-top: 20em;
      opacity: 0;
    }

    .cbcn-chip-param1 {
      width: 14.5em;
    }

    .cbcn-chip-param2 {
      width: 16.9em;
    }

    .cbcn-chip-media video {
      position: relative;
      z-index: 15;
    }

    .cbcn-chip-fn {
      bottom: 1em;
    }

    /* .cbcn-chip-bg {
      width: 100vw;
      height: 42.1em;
      bottom: -1em;
      background: radial-gradient(105.88% 105.88% at 50% 105.88%, #292930 0%, #00000000 53.69%);
      z-index: 20;
      opacity: 0;
      transform-origin: bottom;
    } */
  }

  /* details */
  @media screen {
    .cbcn-details-section.bk {
      background: linear-gradient(to bottom, transparent, #000) !important;
    }

    .cbcn-details-section {
      bottom: 0;
    }

    .cbcn-details-accordionBox {
      width: 100vw;
      height: 32.5em;
    }

    .cbcn-details-accordion {
      width: 80em;
      height: 32.5em;
      background-color: #0d0d10;
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    .cbcn-details-swiper {
      /* 设置宽度自适应 */
      flex: 1;
      height: 100%;
      overflow: hidden;
    }

    .cbcn-details-box {
      padding: 4em;
      width: 37.4em;
      height: auto;
    }

    .cbcn-details-itemBox {
      gap: 0.8em;
    }

    .cbcn-details-item {
      border-top: 1px solid rgba(255, 255, 255, 0.24);
      cursor: pointer;
    }

    .cbcn-details-item:first-child {
      padding-top: 0em;
      border-top: none;
    }

    .cbcn-details-txt {
      justify-content: space-between;
      margin-bottom: 0.8em;
      margin-top: 1.6em;
    }

    .cbcn-details-txt>p {
      opacity: 0.31;
      transition: all 0.4s;
    }

    .cbcn-details-dec {
      width: 28.4em;
      overflow: hidden;
      transition: all 0.4s;
      display: grid;
      grid-template-rows: 0fr;
    }

    .cbcn-details-drawer-icon {
      height: 1.6em;
      width: 1.6em;
      transition: all 0.4s;
      transform: rotateX(180deg);
      opacity: 0.68;
    }

    .cbcn-details-dec>* {
      min-height: 0;
      padding-top: 0;
      transition: all 0.4s;
      display: block;
    }

    /* .cbcn-details-item.active .cbcn-details-dec>* {
            padding-top: 0.8em;
        } */

    .cbcn-details-item.active .cbcn-details-txt>p {
      opacity: 1;
    }

    .cbcn-details-item.active .cbcn-details-drawer-icon {
      opacity: 1;
    }

    .cbcn-details-item.active .cbcn-details-dec {
      grid-template-rows: 1fr;
    }

    .cbcn-details-item.active .cbcn-details-drawer-icon {
      transform: rotate(0);
      opacity: 1;
    }

    .cbcn-details-slide {
      background-color: #161617;
    }
  }

  /* cooling */
  @media screen {
    .cbcn-cooling-bg {
      width: 100vw;
      height: 65.35em;
      top: -10em;
      z-index: 10;
    }

    .cbcn-cooling-section>.cbcn-pc-safeRow2 {
      position: relative;
      z-index: 31;
    }

    .cbcn-cooling-title {
      width: 38em;
      position: relative;
      z-index: 11;
    }

    .cbcn-cooling-media {
      position: relative;
      left: 50%;
      transform: translateX(-50%) scale(1.2, 1.2);
      width: 96em;
      margin-top: -28em;
      height: 72em;
      z-index: 9;
    }

    .cbcn-cooling-paramBox {
      margin-top: -15em;
      position: relative;
      z-index: 12;
    }

    .cbcn-cooling-param {
      margin-top: 0.55em;
      position: relative;
      z-index: 11;
      top: 0em;
      flex-wrap: wrap;
      gap: 0.7em 0;
      justify-content: space-between;
    }

    .cbcn-cooling-param .cbcn-cooling-itemParam {
      width: 19.5333em;
      padding: 2.4em 0;
      justify-content: center;
      background: rgba(16, 16, 16, 0.8);
      display: flex;
      align-items: center;
    }

    .cbcn-cooling-param .cbcn-cooling-itemParam:nth-of-type(n + 4) {
      width: 29.65em;
    }

    .cbcn-cooling-param .cbcn-cooling-itemParam span {
      color: #e2543b;
    }
  }

  /* gamelive */
  @media screen {
    .cbcn-gamelive-bg {
      width: 221.474vh;
      height: 105vh;
      margin-top: 3em;
      filter: blur(2px);
      transform: translate(-50%, -50%) scale(1.3);
    }

    .cbcn-gamelive-row {
      position: relative;
      height: 100vh;
      z-index: 2;
    }

    .cbcn-gamelive-title {
      top: 7em;
      width: 100%;
    }

    .cbcn-gamelive-content {
      margin-top: 100vh;
      opacity: 1;
    }

    .cbcn-gamelive-box {
      width: 60em;
      height: 14.4em;
      padding: 2.75em 2.35em;
      gap: 1.15em;
      position: relative;
      align-items: center;
    }

    .cbcn-gamelive-boxbg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cbcn-gamelive-line {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      clip-path: inset(0% 100% 0% 0%);
      transition: none;
    }

    .cbcn-gamelive-box p {
      width: fit-content;
      position: relative;
      z-index: 2;
    }

    .cbcn-gamelive-param {
      margin-top: 0.7em;
      /* justify-content: space-between; */
      flex-wrap: nowrap;
      gap: 0.7em;
    }

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

    .cbcn-gamelive-txt {
      width: 14.475em;
      padding: 2.4em 1.9em;
      gap: 1.8em;
      align-items: center;
      background: linear-gradient(0deg, #0d0d10 0%, #0d0d10 100%),
        rgba(13, 13, 16, 0.9);
    }

    .cbcn-gamelive-fn {
      margin-top: 4em;
    }

    .cbcn-gamelive-boxParam {
      gap: 6.7em;
    }
  }

  /* screen */
  @media screen {
    .cbcn-screen-title {
      z-index: 9;
      margin-top: 3em;
      opacity: 0;
    }

    .cbcn-screen-t1 {
      background: linear-gradient(180deg,
          #6e6e6e 1.72%,
          #e5e5e5 69.82%,
          #cfcfcf 95.69%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-screen-fix {
      position: relative;
      overflow: visible;
    }

    .cbcn-screen-mediaBox {
      width: 100vw;
      height: 100vh;
      opacity: 0;
      transform: translateY(50vh);
    }

    .cbcn-screen-media {
      width: 144.54vh;
      height: 81.11vh;
      transform-origin: bottom;
      opacity: 1;
      margin-top: 24.22vh;
      /* transform: translateX(-50%) scale(1); */
    }

    /* .cbcn-screen-media video {
      margin-top: -10%;
    } */

    .cbcn-screen-txt {
      margin-top: -25.63vh;
      width: 33.2em;
      opacity: 1;
    }

    .cbcn-screen-param {
      position: relative;
      width: 61em;
      gap: 0.4em 0.3em;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cbcn-screen-param .cbcn-screen-flexBox {
      width: 60em;
      flex-wrap: wrap;
      gap: 0.7em 0.65em;
    }

    .cbcn-screen-box.op {
      opacity: 0;
    }

    .cbcn-screen-flexBox.index2 {
      margin-top: -8.75em;
    }

    .cbcn-screen-box {
      flex-shrink: 0;
      width: 14.475em;
      height: 8.35em;
      justify-content: center;
      align-items: center;
      background: #0d0d10;
    }

    .cbcn-screen-icon1 {
      height: 3.55em;
    }

    .cbcn-screen-txt1 {
      margin-top: 0.6em;
      display: flex;
      gap: 0.4em;
      flex-direction: column;
    }

    .cbcn-screen-icon3 {
      width: 11.575em;
      height: 5.1em;
      display: block;
    }
  }

  /* screenmore */
  @media screen {
    .cbcn-screenmore-swiper {
      width: 60em;
      height: 30em;
    }

    .cbcn-screenmore-swiper>div {
      gap: 1.2em;
    }

    .cbcn-screenmore-slide {
      background: radial-gradient(72.5% 142.64% at 19.67% -19.08%,
          rgba(43, 43, 50, 0.3) 25.53%,
          rgba(5, 5, 5, 0.3) 100%),
        rgba(11, 11, 12, 0.48);
      position: relative;
      overflow: hidden;
    }

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

    .cbcn-screenmore-textBox {
      position: relative;
      padding: 3em;
      z-index: 9;
    }

    .cbcn-screenmore-textBox1 {
      width: 26.5em;
      height: 100%;
      justify-content: space-between;
    }

    .cbcn-screenmore-param {
      width: 100%;
      gap: 1.2em 0.9em;
      flex-wrap: wrap;
    }

    .cbcn-screenmore-param span {
      color: #e2543b;
    }

    .cbcn-screenmore-param .cbcn-param {
      width: 6.2em;
    }

    .cbcn-screenmore-param .cbcn-param.index2 {
      margin-right: 5em;
    }

    .cbcn-screenmore-icon {
      width: 7.5em;
      height: 2.75em;
    }

    .cbcn-screenmore-textBox2 {
      gap: 2.4em;
      width: 28.9em;
    }

    .cbcn-screenmore-textBox3 {
      width: 30.7em;
      height: 100%;
      gap: 1.2em;
    }

    .cbcn-screenmore-param3 {
      justify-content: space-between;
    }

    .cbcn-screenmore-icon2 {
      width: 20em;
      height: 3.626em;
      margin-top: 2em;
    }

    .cbcn-screenmore-fn {
      position: absolute;
      left: 3em;
      width: 26em;
      bottom: 3em;
      z-index: 11;
    }

    .cbcn-screenmore-textBox4 {
      width: 26.5em;
    }

    .cbcn-screenmore-btnList {
      margin-top: 3.4em;
    }
  }

  /* battery */
  @media screen {
    /* .cbcn-battery-section.bk {
            background: radial-gradient(82.93% 88.22% at 52.86% 0%, #252527 10.48%, #000 75.15%);
        } */

    .cbcn-battery-safe {
      position: relative;
      z-index: 14;
    }

    .cbcn-battery-title {
      width: 42em;
      position: relative;
      z-index: 14;
    }

    .cbcn-battery-paramBox {
      margin-top: 34.75em;
      /* transform: translateY(5em);
      opacity: 0; */
      position: relative;
      z-index: 11;
      width: 100%;
      gap: 0.7em;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cbcn-battery-img {
      width: 78.25em;
      height: 48.95em;
      z-index: 9;
      top: 18em;
    }

    .cbcn-battery-imgfn {
      z-index: 11;
      bottom: 10em;
    }

    .cbcn-battery-bg {
      z-index: 12;
      top: 0em;
      width: 100%;
      height: 63.1em;
      opacity: 0;
      transition: all 1s;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #00000000 100%);
      mask-image: linear-gradient(180deg, #000 0%, #00000000 50%);
    }

    .cbcn-battery-bg.active {
      opacity: 1;
    }

    .cbcn-battery-paramBox .cbcn-param {
      width: 19.5em;
      height: auto;
      padding: 1.8em 2.4em;
      background: #0d0d10;
    }

    .cbcn-battery-itemParam {
      gap: 0.7em;
      flex-wrap: wrap;
      width: 60em;
      justify-content: center;
    }

    .cbcn-battery-section span {
      color: #e2543b;
    }

    .cbcn-battery-fn {
      width: 100%;
      margin-top: 3em;
      text-align: left;
    }
  }

  /* morefunc */
  @media screen {
    .cbcn-morefunc-title {
      top: -11em;
      width: 100%;
    }

    .cbcn-morefunc-swiper {
      margin-top: 3.4em;
    }

    .cbcn-morefunc-swiper>div {
      gap: 1.2em;
    }

    .cbcn-morefunc-slide {
      width: 60em;
      height: 30em;
      overflow: hidden;
    }

    .cbcn-morefunc-slide.index2 .cbcn-morefunc-fn {
      position: absolute;
      z-index: 12;
      right: 2.5em;
      bottom: 2.5em;
    }

    .cbcn-morefunc-img {
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .cbcn-morefunc-textBox {
      height: 100%;
      z-index: 10;
      position: relative;
      padding: 3em;
    }

    .cbcn-morefunc-slide.index1 {
      background: radial-gradient(145.46% 270.22% at 54.71% -26.54%,
          #1d1f24 15.32%,
          #181b1f 25.27%,
          rgba(22, 25, 28, 0.92) 32.12%,
          #000 72.13%),
        var(--semantic-background-quinary, #000);
    }

    .cbcn-morefunc-slide.index2 {
      background: radial-gradient(235.53% 343.24% at 21.79% -57.79%,
          #1d1f24 0%,
          #121416 21.82%,
          #000 72.13%),
        var(--semantic-background-quinary, #000);
    }

    .cbcn-morefunc-slide.index1 .cbcn-morefunc-textBox,
    .cbcn-morefunc-slide.index2 .cbcn-morefunc-textBox,
    .cbcn-morefunc-slide.index3 .cbcn-morefunc-textBox {
      width: 26.5em;
    }

    .cbcn-morefunc-slide.index1 .cbcn-morefunc-textBox,
    .cbcn-morefunc-slide.index2 .cbcn-morefunc-textBox {
      justify-content: space-between;
    }

    .cbcn-morefunc-slide.index1 .cbcn-morefunc-param {
      gap: 1.8em 0;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .cbcn-morefunc-slide.index1 .cbcn-param {
      width: 10em;
    }

    .cbcn-morefunc-slide.index2 .cbcn-morefunc-param {
      gap: 1.6em 2.4em;
      flex-wrap: wrap;
    }

    .cbcn-morefunc-slide.index2 .cbcn-param:nth-child(2n-1) {
      width: 7.4em;
    }

    .cbcn-morefunc-slide.index2 .cbcn-param:nth-child(2n) {
      width: 10.5em;
    }

    .cbcn-morefunc-slide.index3 {
      background: radial-gradient(184.88% 282.75% at 50% 1.54%,
          rgba(29, 31, 36, 0.6) 0%,
          rgba(18, 20, 22, 0.6) 21.82%,
          rgba(0, 0, 0, 0.6) 72.13%),
        #000;
      position: relative;
    }

    .cbcn-morefunc-slide.index3 .cbcn-morefunc-paramBox {
      position: absolute;
      left: 3em;
      bottom: 3em;
      z-index: 20;
    }

    .cbcn-morefunc-slide.index3 .cbcn-morefunc-param {
      margin-top: 1em;
      gap: 2.4em;
    }

    .cbcn-morefunc-swiper .cbcn-morefunc-param span {
      color: #e2543b;
    }

    .cbcn-morefunc-btnList {
      margin-top: 3.4em;
    }
  }

  /* network */
  @media screen {
    .cbcn-network-section-bg {
      background-color: #c4c3c4;
      width: 100vw;
      height: 100%;
    }

    .cbcn-network-section {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-network-title {
      width: 38.5em;
    }

    .cbcn-network-img {
      width: 128em;
      height: 68.35em;
      top: 1.34em;
    }

    .cbcn-network-swiper,
    .cbcn-network-title,
    .cbcn-network-switchBtnList {
      position: relative;
      z-index: 11;
    }

    .cbcn-network-swiper {
      width: 100%;
      margin-top: 33.5em;
    }

    .cbcn-network-slide {
      width: 29.5em;
      height: 16em;
      padding: 2.4em 3em;
      gap: 4em 1.8em;
      background: #111112;
    }

    .cbcn-network-slide.index3 .cbcn-network-param {
      flex-wrap: wrap;
      gap: 0.6em 0;
      justify-content: space-between;
    }

    .cbcn-network-slide.index3 .cbcn-network-iconBox {
      width: 11.5em;
    }

    .cbcn-network-slide.index3 .cbcn-network-iconBox p {
      font-weight: 500 !important;
    }

    .cbcn-network-slide.index3,
    .cbcn-network-slide.index4 {
      gap: 0;
      justify-content: space-between;
    }

    .cbcn-network-icon {
      width: 3em;
      height: 3em;
    }

    .cbcn-network-slideTxt {
      justify-content: space-between;
      align-items: center;
    }

    .cbcn-network-iconBox {
      gap: 1em;
      align-items: center;
    }

    .cbcn-network-iconBox.last {
      gap: 0.6em;
    }

    .cbcn-network-Box {
      justify-content: space-between;
    }

    .cbcn-network-switchBtnList {
      justify-content: center;
      margin-top: 3em;
      gap: 0.7em;
    }

    .cbcn-network-Box {
      padding-top: 2.6em;
      border-top: 1px solid #343435;
    }
  }

  /* image */
  @media screen {
    .cbcn-image-title {
      top: 5em;
      width: fit-content;
      background: radial-gradient(111.48% 137.07% at 50% 109.91%,
          #989898 0%,
          #707070 18.56%,
          #2d2d2d 69.05%,
          #000 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 11;
    }

    .cbcn-image-media {
      width: 100%;
      height: 100vh;
      position: relative;
    }

    .cbcn-image-paramBox {
      width: 40em;
      height: 10em;
      margin-top: 33vh;
    }

    .cbcn-image-param,
    .cbcn-image-param1,
    .cbcn-image-param2,
    .cbcn-image-param3,
    .cbcn-image-param4 {
      width: 100%;
      height: 100%;
    }

    .cbcn-image-param1,
    .cbcn-image-param2,
    .cbcn-image-param3,
    .cbcn-image-param4 {
      margin-top: 3em;
      opacity: 0;
    }

    .cbcn-image-svg1 {
      position: absolute;
      width: 15vh;
      height: 9.6vh;
      margin-top: -12.25vh;
      margin-left: 0.5vh;
    }

    .cbcn-image-svg2 {
      position: absolute;
      width: 15vh;
      height: 9.6vh;
      margin-top: -21.25vh;
      margin-left: -13.5vh;
    }

    .cbcn-image-svg3 {
      position: absolute;
      width: 15vh;
      height: 9.6vh;
      margin-top: -20.25vh;
      margin-left: 16.5vh;
    }
  }

  /* telephoto */
  @media screen {
    .cbcn-telephoto-title {
      width: 39.6em;
    }

    .cbcn-telephoto-swiper {
      margin-top: 3em;
    }

    .cbcn-telephoto-slide {
      background-color: #fff;
    }

    .cbcn-telephoto-img {
      width: 70em;
      height: 40em;
      margin: auto;
    }

    .cbcn-telephoto-btnlist {
      margin-top: 3em;
    }

    .cbcn-telephoto-sliderbtn {
      width: 7.3em;
    }
  }

  /* fullfocusportrait */
  @media screen {
    .cbcn-fullfocusportrait-swiper {
      width: 22.5em;
      height: 30em;
      margin: 3em auto 0;
    }

    .cbcn-fullfocusportrait-slide {
      position: relative;
      opacity: 0.3;
      transition: all 1s;
    }

    .cbcn-fullfocusportrait-absolute {
      left: -47.5em;
      gap: 1.2em;
      opacity: 0.3;
    }

    .cbcn-fullfocusportrait-img {
      width: 22.5em;
      height: 30em;
    }

    .swiper-slide-active.cbcn-fullfocusportrait-slide {
      opacity: 1;
    }

    .cbcn-fullfocusportrait-switchBtnList {
      margin-top: 3em;
      justify-content: center;
    }

    .cbcn-fullfocusportrait-actually {
      border-radius: 49.95em;
      justify-content: center;
      align-items: center;
      width: fit-content;
      position: absolute;
      top: 1.3em;
      left: 1.3em;
      background: var(--component-label-on-surface-background-opacity---primary, color(display-p3 0 0 0 / 0.46));
      backdrop-filter: blur(calc(15px));
      -webkit-backdrop-filter: blur(calc(15px));
      gap: 0.4em;
      padding: 0.4em 0.8em 0.4em 0.4em;
    }

    .cbcn-fullfocusportrait-num {
      border-radius: 49.95em;
      background: rgba(0, 0, 0, 0.46);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      padding: 0.4em 0.8em;
      justify-content: center;
      align-items: center;
      width: fit-content;
      position: absolute;
      top: 1.3em;
      right: 1.3em;
    }

    .cbcn-fullfocusportrait-svg {
      width: 1.15em;
      height: 1.15em;
    }
  }

  /* aiimage */
  @media screen {
    .cbcn-aiimage-title {
      width: 40.7em;
    }

    .cbcn-aiimage-sliderlist {
      --btnLeft: 8.7em;
    }


    .cbcn-aiimage-content {
      margin: 3em auto;
    }

    .cbcn-aiimage-decBox {
      margin-top: 1.5em;
      position: relative;
      height: 1.55em;
      width: 100%;
    }

    .cbcn-aiimage-dec {
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-aiimage-dec.active {
      opacity: 1;
    }

    .cbcn-aiimage-swiper {
      width: 49.8em;
      height: 32em;
    }

    .cbcn-aiimage-slide,
    .cbcn-aiimage-img {
      transition: all 0.5s ease-in-out;
      transform-origin: center;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-aiimage-img {
      width: 49.8em;
      height: 28em;
      position: absolute;
    }

    /* 轮播图样式 */
    /* 上上个 */
    .cbcn-aiimage-slide.next2 {
      z-index: 9;
      position: relative;
      opacity: 0 !important;
    }

    .cbcn-aiimage-slide.next2 .cbcn-aiimage-img {
      background: #fff;
      transform: translateX(-50%) scale(0.8);
      bottom: 6.7em;
    }

    /* 上一个 */
    .cbcn-aiimage-slide.next {
      z-index: 12;
      position: relative;
      opacity: 0 !important;
    }

    .cbcn-aiimage-slide.next .cbcn-aiimage-img {
      background: #fff;
      bottom: -2em;
      transform: translateX(-50%) scale(1.05);
    }

    /* 选中的轮播图样式 */
    .cbcn-aiimage-slide.active {
      z-index: 11;
      position: relative;
      opacity: 1 !important;
    }

    .cbcn-aiimage-slide.active .cbcn-aiimage-img {
      transform: translateX(-50%) scale(1);
      background: #fff;
      bottom: 0;
    }

    /* 下一个 */
    .cbcn-aiimage-slide.prev {
      z-index: 10;
      position: relative;
      opacity: 0.5 !important;
    }

    .cbcn-aiimage-slide.prev .cbcn-aiimage-img {
      background: #fff;
      transform: translateX(-50%) scale(0.9);
      bottom: 3.5em;
    }

    /* 下下个 */
    .cbcn-aiimage-slide.prev2 {
      z-index: 9;
      position: relative;
      opacity: 0.23 !important;
    }

    .cbcn-aiimage-slide.prev2 .cbcn-aiimage-img {
      background: #fff;
      transform: translateX(-50%) scale(0.8);
      bottom: 6.7em;
    }
  }

  /* kingcard */
  @media screen {
    .cbcn-kingcard-title {
      width: 42.6em;
    }

    .cbcn-kingcard-img {
      width: 48.52em;
      height: 26.15em;
      margin-top: 3em;
    }

    .cbcn-kingcard-img-1 {
      width: 19.65em;
      height: 26.15em;
      z-index: 11;
    }

    .cbcn-kingcard-img-2,
    .cbcn-kingcard-img-3 {
      width: 13.55em;
      margin-top: 1em;
      height: 26.15em;
      transition: all 0.9s cubic-bezier(0.51, 0.34, 0.25, 0.99);
    }

    .cbcn-kingcard-img-2 {
      margin-left: -17em;

    }

    .cbcn-kingcard-img-3 {
      margin-left: 17em;

    }

    .cbcn-kingcard-img.active .cbcn-kingcard-img-2 {
      margin-top: 1em;
      margin-left: -17.5em;
    }

    .cbcn-kingcard-img.active .cbcn-kingcard-img-3 {
      z-index: 10;
      margin-left: 17.5em;
    }
  }

  /* moreimage */
  @media screen {
    .cbcn-moreimage-section {
      padding-bottom: 4em;
    }

    .cbcn-moreimage-swiper {
      width: 42.85em;
      height: 30em;
      margin-top: 3em;
    }

    .cbcn-moreimage-img {
      width: 42.85em;
      height: 30em;
    }

    .cbcn-moreimage-switchBtnList {
      justify-content: center;
      align-items: center;
      margin-top: 3em;
    }
  }

  /* os */
  @media screen {
    .cbcn-os-section.wt {
      background: linear-gradient(180deg, #fff 0%, #d0e0f5 100%),
        linear-gradient(180deg, #fff 48.84%, #f2f2f5 100%);
    }

    .cbcn-os-titleBox {
      width: 34em;
      margin-bottom: 4em;
    }

    .cbcn-os-title {
      width: 31.0388em;
      height: 9.2918em;
      margin-bottom: 3em;
    }

    .cbcn-os-img {
      width: 60em;
      height: 30em;
      transform-origin: bottom;
      transform: scale(1.1);
    }
  }

  /* ecology */
  @media screen {
    .cbcn-ecology-swiper {
      margin: 4.6em 0;
      width: 118.5%;
    }

    .cbcn-ecology-slide {
      width: 34.4em;
    }

    .cbcn-ecology-img {
      width: 100%;
      height: 15em;
    }

    .cbcn-ecology-dec {
      margin-top: 1.8em;
    }

    .cbcn-ecology-btnBox {
      justify-content: space-between;
      align-items: center;
    }

    /* 分割线 */
    .cbcn-ecology-lineList {
      margin-left: 0;
    }
  }

  /* littlev */
  @media screen {
    .cbcn-littlev-section.wt {
      background: #f2f2f5;
    }

    .cbcn-littlev-swiper {
      margin: 3.4em 0;
      width: 100%;
    }

    .cbcn-littlev-slide {
      width: 100%;
      height: 30em;
      opacity: 0.3;
      transition: opacity 0.5s ease-in-out;
      position: relative;
    }

    .swiper-slide-active.cbcn-littlev-slide {
      transition: opacity 0.5s ease-in-out;
      opacity: 1;
    }

    .cbcn-littlev-img {
      width: 100%;
      height: 100%;
      z-index: 10;
    }

    .cbcn-littlev-title {
      z-index: 11;
      position: absolute;
      left: 6em;
      top: 12em;
      width: 21em;
    }

    .cbcn-littlev-slide:nth-last-child(1) .cbcn-littlev-title {
      top: 2.4em;
      left: 0;
      right: 0;
      margin: auto;
      width: fit-content;
    }

    .cbcn-littlev-btnList {
      margin-left: 0;
    }

    .cbcn-littlev-btn {
      width: 25% !important;
    }

    .cbcn-littlev-btnBox {
      justify-content: space-between;
    }

    .cbcn-littlev-fnBox {
      gap: 0.8em;
      margin-top: 3.4em;
    }
  }

  /* packaging */
  @media screen {
    .cbcn-packaging-section.wt {
      background: #f2f2f5;
    }

    .cbcn-packaging-imgBox {
      width: 60em;
      height: 23.8554em;
      margin: 1.2em auto;
      position: relative;
    }

    .cbcn-packaging-img1 {
      width: 9.4461em;
      height: 20.55145em;
      z-index: 10;
      transition: all 0.7s ease-in-out;
    }

    .cbcn-packaging-img2 {
      width: 2.5642em;
      height: 8.5317em;
      transition: all 0.7s ease-in-out;
      z-index: 9;
    }

    .cbcn-packaging-img3 {
      width: 5.4301em;
      height: 17.629em;
      transition: all 0.7s ease-in-out;
      z-index: 8;
    }

    .cbcn-packaging-img4 {
      width: 6.1466em;
      height: 18.4869em;
      transition: all 0.7s ease-in-out;
      z-index: 7;
      transform: translate(-50%, -50%) scale(0.95);
    }

    .cbcn-packaging-img5 {
      width: 6.24085em;
      height: 18.4209em;
      transition: all 0.7s ease-in-out;
      z-index: 6;
      transform: translate(-50%, -50%) scale(0.95);
    }

    .cbcn-packaging-img6 {
      width: 4.72305em;
      height: 16.6674em;
      z-index: 5;
      transition: all 0.7s ease-in-out;
    }

    .cbcn-packaging-img7 {
      width: 9.62525em;
      height: 19.95755em;
      z-index: 4;
      transition: all 0.7s ease-in-out;
      margin-left: 0.2em;
    }

    .cbcn-packaging-imgBox.active .cbcn-packaging-img1 {
      margin-left: -23em
    }

    .cbcn-packaging-imgBox.active .cbcn-packaging-img2 {
      margin-left: -15em;
    }

    .cbcn-packaging-imgBox.active .cbcn-packaging-img3 {
      margin-left: -9.5em;
    }

    .cbcn-packaging-imgBox.active .cbcn-packaging-img4 {
      margin-left: -2em;
      transform: translate(-50%, -50%) scale(1);
    }

    .cbcn-packaging-imgBox.active .cbcn-packaging-img5 {
      margin-left: 6em;
      transform: translate(-50%, -50%) scale(1);
    }

    .cbcn-packaging-imgBox.active .cbcn-packaging-img6 {
      margin-left: 14em;
    }

    .cbcn-packaging-imgBox.active .cbcn-packaging-img7 {
      margin-left: 23em;
    }
  }

  /* remark */
  @media screen {
    .cbcn-remark-section.wt {
      background: #f2f2f5;
    }

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

    .cbcn-remark-section .cbcn-remark-ol {
      margin-top: 1.3em;
    }

    .cbcn-remark-p {
      padding-inline-start: 0.5em;
      color: rgba(0, 0, 0, 0.32) !important;
    }

    .cbcn-remark-section ol li {
      list-style: decimal;
      color: rgba(0, 0, 0, 0.32) !important;
    }

    .cbcn-remark-section span {
      width: 1.3em;
      color: rgba(0, 0, 0, 0.32) !important;
    }

    #cbcn-remark-ol {
      margin-left: 0.6em;
      padding-inline-start: 0em !important;
    }

    #cbcn-remark-ol li {
      list-style: none;
    }

    #cbcn-remark-ol div {
      display: flex;
      flex-direction: row;
    }
  }
}

@media screen and (min-width: 2559px) {
  .cbcn-screen-txt {
    margin-top: -20.63vh;
  }
}

@media screen and (min-width: 981px) and (max-width: 1399px) {
  .cbcn-screenmore-section {
    font-size: 20px !important;
    font-size: 1.3vw !important;
  }

  .cbcn-cooperation-txt2 {
    width: max(420px, 23em);
  }
}