@media screen and (max-width: 980px) {
  .cbcn-wap-txtLeft {
    text-align: left !important;
  }
  /* kv  */
  @media screen {
    .cbcn-kv-section {
      margin-top: 2.5em;
      width: 100%;
      height: calc(33.3 / 18.73125 * 100vw);
      position: relative;
      display: block;
    }
  }
  /* navigation */
  @media screen {
    .cbcn-navigation-content {
      gap: 1em;
    }

    .cbcn-navigation-item {
      display: block;
      width: 100%;
      height: 21.5em;
      border-radius: 1.5em;
      overflow: hidden;
      position: relative;
    }

    .cbcn-navigation-desc {
      width: 100%;
      top: 6em;
    }
    .cbcn-navigation-name {
      width: 100%;
      top: 2.5em;
      padding-bottom: 0.5em;
      text-align: center;
    }

    .cbcn-navigation-item1 .cbcn-navigation-name p {
      color: #0b7fc7 !important;
    }
    .cbcn-navigation-item1 .cbcn-navigation-desc {
      top: 4.45em;
      background: linear-gradient(
        103deg,
        rgba(0, 126, 204, 0.6) 1.43%,
        rgba(70, 185, 247, 0.6) 134.73%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item2 .cbcn-navigation-name p {
      color: rgba(255, 255, 255, 0.95) !important;
    }
    .cbcn-navigation-item2 .cbcn-navigation-desc {
      background: rgba(255, 255, 255, 0.7);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item3 .cbcn-navigation-name p {
      background: linear-gradient(83deg, #7c50ff 5.54%, #ff289e 86.36%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item3 .cbcn-navigation-desc {
      background: linear-gradient(
        83deg,
        rgba(124, 80, 255, 0.7) 5.54%,
        rgba(255, 40, 158, 0.7) 86.36%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item4 .cbcn-navigation-name p {
      background: linear-gradient(324deg, #00acfa -39.39%, #005eff 110.4%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item4 .cbcn-navigation-desc {
      background: linear-gradient(
        299deg,
        rgba(0, 172, 250, 0.7) -19.82%,
        rgba(0, 94, 255, 0.7) 89.65%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  /* appearance */
  @media screen {
    .cbcn-appearance-section {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    .cbcn-appearance-box {
      width: 100%;
      height: 100vh;
    }
    .cbcn-appearance-p > p {
      color: rgba(255, 255, 255, 0.95) !important;
      width: 100vw;
      position: relative;
      z-index: 2;
    }
    .cbcn-appearance-video {
      width: 100%;
      height: 40em;
      min-height: 100vh;
      overflow: hidden;
    }
    .cbcn-appearance-p1::after,
    .cbcn-appearance-p2::after,
    .cbcn-appearance-p3::after,
    .cbcn-appearance-p4::after,
    .cbcn-appearance-p5::after {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.4;
      background: #000;
      z-index: 1;
    }
  }
  /* color */
  @media screen {
    .cbcn-color-section {
      --color1: #5cd3fb;
      --color2: #f6a2be;
      --color3: #f8d882;
      --color4: #898888;
    }
    .cbcn-color-swiper {
      width: 100%;
      height: 20em;
      position: relative;
      z-index: 9;
      border-radius: 0.6em;
      overflow: hidden;
    }

    .cbcn-color-div {
      width: 100%;
      align-items: center;
      gap: 0.5em;
      position: relative;
      z-index: 1;
      margin-top: 1.5em;
    }

    .cbcn-color-btnBox {
      width: 4em;
      height: 1.475em;
    }
    .cbcn-color-txt {
      position: absolute;
      opacity: 0;
    }
    .cbcn-color-txt.active {
      opacity: 1;
    }
    .cbcn-color-txt p {
      position: relative;
      z-index: 2;
    }
    .cbcn-color-txt1 p {
      background: linear-gradient(
        90deg,
        #5cd3fb 30%,
        rgba(92, 211, 251, 0.5) 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-color-txt2 p {
      background: linear-gradient(
        90deg,
        #f6a2be 30%,
        rgba(246, 162, 190, 0.5) 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-color-txt3 p {
      background: linear-gradient(
        90deg,
        #f8d882 30%,
        rgba(248, 216, 130, 0.5) 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-color-txt4 p {
      background: linear-gradient(
        90deg,
        #898888 30%,
        rgba(137, 136, 136, 0.5) 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-color-btnListDiv {
      position: absolute;
      right: 50%;
      z-index: 99;
      display: inline-flex;
    }

    .cbcn-color-btnList {
      display: inline-flex !important;
      width: auto;
      padding: 0.35em 0.3em;
      align-items: center;
      gap: 0.25em;
      border: 1px solid #fff;
      border-radius: 49.95em;
      background: rgba(94, 94, 94, 0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .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-btn.index0 .cbcn-color-circle {
      stroke: var(--color1);
    }

    .cbcn-color-btn.index1 .cbcn-color-circle {
      stroke: var(--color2);
    }

    .cbcn-color-btn.index2 .cbcn-color-circle {
      stroke: var(--color3);
    }

    .cbcn-color-btn.index3 .cbcn-color-circle {
      stroke: var(--color4);
    }

    .cbcn-color-btn.active .cbcn-color-circle {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 3s ease-out;
    }
  }
  /* imagechapter */
  @media screen {
    .cbcn-imagechapter-section.bk {
      background-color: #fff !important;
    }
    .cbcn-imagechapter-video {
      position: relative;
    }
    .cbcn-imagechapter-videoBox {
      width: 100%;
      height: 14.95em;
      overflow: hidden;
    }
    .cbcn-imagechapter-title {
      top: 3.25em;
      padding: 0.25em 0.75em;
      border-radius: 5em;
      background: #5cd3fb;
    }
  }
  /* livephoto */
  @media screen {
    .cbcn-livephoto-imgDiv {
      margin-top: 2.5em;
      height: 7.85em;
      width: 100%;
      position: relative;
    }

    .cbcn-livephoto-video {
      width: 16.75em;
      height: 100%;
      object-fit: cover;
      overflow: hidden;
    }
  }
  /* film */
  @media screen {
    .cbcn-film-swiper {
      width: 100%;
      position: relative;
      margin-top: 2.5em;
    }

    .cbcn-film-video {
      width: 100%;
      height: 22.35em;
      border-radius: 0.6em;
      overflow: hidden;
      display: block;
    }
    .cbcn-film-imgborder {
      width: 100%;
      height: 22.35em;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      opacity: 0;
      border-radius: 0.6em;
      overflow: hidden;
    }
    .cbcn-film-img.swiper-slide-active .cbcn-film-imgborder {
      animation: filmborder 0.5s 0.3s ease-in-out forwards;
    }
    @keyframes filmborder {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 0.75;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }

    .cbcn-film-icon {
      margin-top: 1.5em;
      width: fit-content;
    }

    .cbcn-film-switchBtn-list {
      margin-top: -1.5em;
      position: relative;
      z-index: 10;
    }
  }
  /* diy */
  @media screen {
    .cbcn-diy-txt .cbcn-wap-h1 {
      width: fit-content;
    }
    .cbcn-diy-imgbtn {
      width: fit-content;
      border-radius: 49.95em;
      background: #fff;
      overflow: hidden;
      display: inline-flex;
      padding: 0.25em 0.75em;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 0.5em;
      right: 0.5em;
    }
    .cbcn-diy-slide1 {
      height: 22.35em;
      width: 100%;
      margin-top: 2.5em;
      border-radius: 0.6em;
      overflow: hidden;
      position: relative;
    }
    .cbcn-diy-video1 {
      object-fit: cover;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .cbcn-diy-video {
      display: block;
      border-radius: 0.6em;
      height: 22.35em;
      width: 100%;
      overflow: hidden;
      background-color: #fff;
    }
    .cbcn-diy-video canvas{
      border-radius: 0.6em;
      overflow: hidden;
    }
    .cbcn-diy-swiper {
      margin-top: 2.5em;
    }
    .cbcn-diy-slidebtn {
      width: fit-content;
      margin-top: 1.5em;
      opacity: 0;
    }
    .cbcn-diy-slidebtn.active {
      opacity: 1;
    }
    .cbcn-diy-switchBtn-list {
      margin-top: -1.5em;
      position: relative;
      z-index: 10;
    }
  }
  /* portrait */
  @media screen {
    .cbcn-portrait-swiper {
      width: 100%;
      height: 22.5em;
      margin-top: 2.5em;
    }
    .cbcn-portrait-swiper .swiper-slide {
      border-radius: 0.6em;
      overflow: hidden;
      opacity: 0 !important;
      position: relative;
      background: #f2f2f2;
    }
    .cbcn-portrait-swiper .swiper-slide-active {
      opacity: 1 !important;
    }
    .cbcn-portrait-video2,
    .cbcn-portrait-video3 {
      width: 9.8243em;
      height: 20.5em;
      overflow: hidden;
      object-fit: cover;
    }
    .cbcn-portrait-video1-1,
    .cbcn-portrait-video1-2 {
      width: 100%;
      height: 22.5em;
      object-fit: cover;
      overflow: hidden;
    }
    .cbcn-portrait-button-div {
      position: absolute;
      bottom: 0.5em;
      left: auto;
      right: 0.5em;
      z-index: 10;
      width: fit-content;
      padding: 0.25em 0.3em;
      background: rgba(224, 224, 224, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      border-radius: 50em;
      overflow: hidden;
    }
    .cbcn-portrait-button {
      padding: 0em 0.4em;
    }
    .cbcn-portrait-button:nth-of-type(1) {
      border-right: 0.05em solid rgba(255, 255, 255, 0.4);
    }
    .cbcn-portrait-button p {
      color: rgba(255, 255, 255, 0.95) !important;
      opacity: 0.4;
      font-weight: 500;
    }
    .cbcn-portrait-button.active p {
      opacity: 1;
    }

    .cbcn-portrait-txtContent {
      margin-top: 0.6em;
      position: relative;
      width: 100%;
      height: 4em;
    }
    .cbcn-portrait-txt {
      width: 100%;
      opacity: 0;
    }
    .cbcn-portrait-txt.active {
      opacity: 1;
    }
    .cbcn-portrait-btnList {
      height: 1.7em;
      position: relative;
      margin-top: 1em;
    }
    .cbcn-portrait-btn {
      width: fit-content;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    .cbcn-portrait-btn.active {
      opacity: 1;
    }
    .cbcn-portrait-switchBtn-list {
      margin-top: 1em;
    }
  }
  /* longfocus */
  @media screen {
    .cbcn-longfocus-box {
      gap: 1em;
    }
    .cbcn-longfocus-item {
      flex-wrap: nowrap;
      gap: 1em;
    }
    .cbcn-longfocus-icon {
      width: 2em;
      height: 2em;
      flex-shrink: 0;
    }
    .cbcn-longfocus-txt {
      gap: 0.5em;
    }
    .cbcn-longfocus-img {
      width: 100%;
      height: 16.5em;
      overflow: hidden;
    }
  }
  /* telephotostage */
  @media screen {
    .cbcn-telephotostage-swiper {
      width: 100%;
      height: 11.15em;
      margin-top: 2.5em;
      position: relative;
      border-radius: 0.6em;
      overflow: hidden;
    }
    .cbcn-telephotostage-swiper .swiper-wrapper {
      position: relative;
      z-index: 9;
    }
    .cbcn-telephotostage-btnBox {
      z-index: 10;
      position: absolute;
      right: 0.5em;
      bottom: 0.5em;
    }

    .cbcn-telephotostage-btnList {
      border-radius: 49.95em;
      background: rgba(224, 224, 224, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      padding: 0.25em 0.75em;
      align-items: center;
      gap: 0.4em;
      width: fit-content;
    }
    .cbcn-telephotostage-btn:nth-child(1) {
      border-right: 1px solid rgb(255, 255, 255, 0.4);
      padding-right: 0.4em;
    }
    .cbcn-telephotostage-btn P {
      color: #fff !important;
      opacity: 0.4;
    }
    .cbcn-telephotostage-btn.active P {
      color: #fff !important;
      opacity: 1;
    }
  }
  /* camera */
  @media screen {
    .cbcn-camera-img {
      width: 100%;
      height: 16.95em;
      border-radius: 0.6em;
    }
    .cbcn-camera-safeRow {
      margin-top: 2.5em;
      position: relative;
      z-index: 2;
    }
    .cbcn-camera-Box {
      width: 100%;
      /* padding: 1.5em 1em;
      border-radius: 0.6em;
      background: rgba(127, 127, 127, 0.05);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px); */
    }
    .cbcn-camera-item {
      align-items: flex-start;
    }
    .cbcn-camera-Box,
    .cbcn-camera-leftBox,
    .cbcn-camera-rightBox {
      gap: 1em;
    }
    .cbcn-camera-Box .cbcn-wap-b3 {
      color: rgba(0, 0, 0, 0.4) !important;
    }
  }

  /* fullFocusPortrait */
  @media screen {
    .cbcn-fullfocusportrait-section {
      padding-left: 1em;
      padding-right: 1em;
    }
    .cbcn-fullfocusportrait-swiper {
      margin-top: 2.5em;
      width: 100%;
      height: 20em;
      border-radius: 0.6em;
      overflow: hidden;
    }

    .cbcn-fullfocusportrait-img {
      height: 20em;
      width: 16.75em;
      border-radius: 0.6em;
      overflow: hidden;
      display: block;
    }

    .cbcn-fullfocusportrait-divBox {
      margin-top: 1em;
      position: relative;
      justify-content: space-between;
      align-items: flex-end;
    }

    .cbcn-fullfocusportrait-InfoDiv {
      height: 2.5em;
    }
    .cbcn-fullfocusportrait-Info {
      position: absolute;
      left: 0;
      opacity: 1;
    }

    .cbcn-fullfocusportrait-Info.right {
      opacity: 0;
    }

    .cbcn-fullfocusportrait-Info > p {
      text-align: left !important;
      color: rgba(0, 0, 0, 0.6) !important;
    }
  }
  /* frontselfie */
  @media screen {
    .cbcn-frontselfie-swiper {
      margin-top: 2.5em;
      width: 100%;
      height: 22.5em;
    }
    .cbcn-frontselfie-swiper .swiper-slide {
      border-radius: 0.6em;
      overflow: hidden;
      opacity: 0 !important;
      position: relative;
    }
    .cbcn-frontselfie-swiper .swiper-slide-active {
      opacity: 1 !important;
    }
    .cbcn-frontselfie-button-div {
      position: absolute;
      bottom: 0.5em;
      left: auto;
      right: 0.5em;
      z-index: 10;
      width: fit-content;
      padding: 0.25em 0.35em;
      background: rgba(224, 224, 224, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      border-radius: 50em;
      overflow: hidden;
    }
    .cbcn-frontselfie-button {
      padding: 0em 0.4em;
    }
    .cbcn-frontselfie-button:nth-of-type(1) {
      border-right: 0.05em solid rgba(255, 255, 255, 0.4);
    }
    .cbcn-frontselfie-button p {
      color: rgba(255, 255, 255, 0.95) !important;
      opacity: 0.4;
      font-weight: 500;
    }
    .cbcn-frontselfie-button.active p {
      opacity: 1;
    }

    .cbcn-frontselfie-btnList {
      margin-top: 1em;
      height: 1.8em;
    }
    .cbcn-frontselfie-btnList .cbcn-wap-h3 {
      color: rgba(0, 0, 0, 0.9) !important;
    }
    .cbcn-frontselfie-btn {
      position: absolute;
      opacity: 0;
    }
    .cbcn-frontselfie-btn.active {
      opacity: 1;
    }

    .cbcn-frontselfie-txtContent {
      margin-top: 0.6em;
      height: 4.9em;
    }
    .cbcn-frontselfie-txt {
      position: absolute;
      opacity: 0;
      width: 16.75em;
    }
    .cbcn-frontselfie-txt.active {
      opacity: 1;
    }

    .cbcn-frontselfie-switchBtn-list {
      margin-top: 1em;
    }
  }
  /* filmcamera */
  @media screen {
    .cbcn-filmcamera-img {
      width: 16.75em;
      height: 20.45em;
      margin-top: 2.5em;
      overflow: hidden;
    }
  }
  /* aiimage */
  @media screen {
    .cbcn-aiimage-swiper {
      margin-top: 2.5em;
      margin-bottom: 1em;
    }
    .cbcn-aiimage-slide {
      height: 22.35em;
      width: 100%;
      border-radius: 0.6em;
      overflow: hidden;
      background-color: #fff;
      position: relative;
      z-index: 8;
    }
    .cbcn-aiimage-btn-txt {
      width: fit-content;
    }
    .cbcn-aiimage-btnListDiv {
      height: 2em;
      position: relative;
    }
    .cbcn-aiimage-btn {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: all 0.3s;
    }
    .cbcn-aiimage-btn.active {
      opacity: 1;
    }
    .cbcn-aiimage-txt2 {
      height: 3.7em;
      position: relative;
    }
    .cbcn-aiimage-txt2-item {
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
    }
    .cbcn-aiimage-switchBtn-list {
      margin-top: 1em;
    }
    .cbcn-aiimage-button-div2 {
      position: absolute;
      z-index: 10;
      right: 0.5em;
      bottom: 0.5em;
      border-radius: 49.95em;
      width: fit-content;
    }
    .cbcn-aiimage-button2 {
      padding: 0.25em 0.5em;
      align-items: center;
      border-radius: 49.95em;
      background: rgba(224, 224, 224, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
    }
    .cbcn-aiimage-btnDiv3,
    .cbcn-aiimage-btnDiv4 {
      border-radius: 49.95em;
      background: rgba(224, 224, 224, 0.3);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      padding: 0.25em 0.5em;
      display: inline-flex;
      gap: 0.25em;
      position: absolute;
      z-index: 10;
      right: 0.5em;
      left: auto !important;
      bottom: 0.5em;
      width: fit-content;
      overflow: hidden;
    }
    .cbcn-aiimage-button:nth-of-type(1) {
      border-right: 0.05em solid rgba(255, 255, 255, 0.4);
    }
    .cbcn-aiimage-inbtn,
    .cbcn-aiimage-button > p {
      color: #fff !important;
      opacity: 0.4;
      transition: all 0.3s;
      padding: 0 0.25em;
    }
    .cbcn-aiimage-inbtn.active,
    .cbcn-aiimage-button > p.active {
      opacity: 1;
    }
    .cbcn-aiimage-inbtn:not(:nth-last-of-type(1)) {
      border-right: 1px solid #d9d9d9;
    }

    .cbcn-aiimage-swiper2 .swiper-slide {
      clip-path: inset(100% 0px 0px);
      opacity: 1 !important;
    }
    .cbcn-aiimage-swiper2 .swiperslide-old,
    .cbcn-aiimage-swiper2 .swiper-slide-active {
      clip-path: inset(0% 0px 0px);
      transition: all 0.67s linear;
    }
    .cbcn-aiimage-swiper2 .swiper-slide-active {
      z-index: 9;
    }
    .cbcn-aiimage-swiper2 .swiper-slide::before {
      content: "";
      width: 100%;
      height: 0.2em;
      background: #fff;
      position: absolute;
      left: 0;
      bottom: -2em;
    }
    .cbcn-aiimage-swiper2 .swiper-slide-active::before {
      bottom: 27em;
      transition: all 0.67s linear;
    }
    .cbcn-aiimage-swiper2 {
      width: 100%;
      height: 22.35em;
      border-radius: 0.6em;
      overflow: hidden;
      position: absolute;
    }
  }
  /* Performance */
  @media screen {
    .cbcn-performance-section.bk {
      background-color: #fff !important;
    }
    .cbcn-performance-video {
      position: relative;
    }
    .cbcn-performance-videoBox {
      width: 100%;
      height: 12.5em;
      overflow: hidden;
    }
    .cbcn-performance-title {
      top: 2em;
      padding: 0.25em 0.75em;
      border-radius: 5em;
      background: #5cd3fb;
    }
  }
  /* battery */
  @media screen {
    .cbcn-battery-img {
      padding: 0 1em;
      height: 12em;
      width: 100%;
      border-radius: 0.6em;
      overflow: hidden;
      margin-top: 2.5em;
      margin-bottom: 2.5em;
    }
    .cbcn-battery-param {
      gap: 1em 0em;
      justify-content: space-between;
    }
    .cbcn-battery-param .cbcn-param {
      width: 100%;
      align-items: start;
    }
  }

  /* chip */
  @media screen {
    .cbcn-chip-img {
      height: 19.25em;
      width: 100vw;
      margin-left: -1em;
    }
    .cbcn-chip-param {
      justify-content: space-between;
      gap: 1em 0em;
    }
    .cbcn-chip-param .cbcn-param {
      width: 44vw;
      text-align: left;
      align-items: flex-start;
    }
    .cbcn-chip-param .cbcn-param p:nth-of-type(1) {
      background: linear-gradient(
        275deg,
        var(--Color-1, #35cbfd) 0%,
        var(--Color-1_5, #7593ff) 50%,
        var(--Color-2, #ab5cff) 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  /* cool */
  @media screen {
    .cbcn-cool-img {
      width: 100%;
      height: 12.5em;
      overflow: hidden;
      border-radius: 0.6em;
      margin-top: 2.5em;
    }
  }
  /* signal */
  @media screen {
    .cbcn-signal-swiper {
      margin-top: 2.5em;
    }
    .cbcn-signal-txt span{
      display: inline;
    }
    .cbcn-signal-img {
      height: 12em;
      width: 100%;
      border-radius: 0.6em;
      overflow: hidden;
    }
    .cbcn-signal-desc {
      margin-top: 1em;
    }
    .cbcn-signal-switchBtn-list {
      margin-top: 1em;
    }
  }
  /* eyeprotection */
  @media screen {
    .cbcn-eyeprotection-section.bk .cbcn-wap-sh {
      color: rgba(255, 255, 255, 0.5) !important;
    }
    .cbcn-eyeprotection-section.wt {
      transition: all 1.5s linear;
    }
    .cbcn-eyeprotection-section.wt p {
      transition: all 1.5s linear;
    }
    .cbcn-eyeprotection-video {
      width: 100vw;
      height: 20em;
      margin-left: -1em;
      margin-bottom: -4.8em;
      margin-top: -4.7em;
      position: relative;
      z-index: 8;
      overflow: hidden;
    }
    .cbcn-eyeprotection-txt {
      position: relative;
      z-index: 9;
    }
    .cbcn-eyeprotection-param {
      gap: 1em 0em;
      justify-content: space-between;
      position: relative;
      z-index: 9;
    }
    .cbcn-eyeprotection-param > div {
      gap: 1em;
    }
    .cbcn-eyeprotection-param .cbcn-param {
      width: 44vw;
    }
    .cbcn-eyeprotection-param .cbcn-param .cbcn-wap-h4 {
      background: linear-gradient(
        270deg,
        var(--Color-1, #35cbfd) 0%,
        var(--Color-1_5, #7593ff) 50%,
        var(--Color-2, #ab5cff) 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-eyeprotection-icon {
      width: 3.45em;
      height: 1.45em;
      position: relative;
    }
    .cbcn-eyeprotection-icongrey {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    .cbcn-eyeprotection-section.wt .cbcn-eyeprotection-icongrey {
      opacity: 1;
    }
    .cbcn-eyeprotection-section.wt .cbcn-eyeprotection-iconwt {
      opacity: 0;
    }
  }
  /* threeproof */
  @media screen {
    .cbcn-threeproof-drawer-img {
      height: 14em;
      width: 100%;
      border-radius: 0.6em;
      overflow: hidden;
      margin-bottom: 1em;
      margin-top: 2.5em;
    }
    .cbcn-threeproof-h5 {
      width: fit-content;
    }
    .cbcn-threeproof-drawer-item .desc {
      margin-top: 0.4em;
      margin-bottom: 1em;
    }
  }
  /* os */
  @media screen {
    .cbcn-os-safeRow {
      gap: 0.5em;
      justify-content: center;
    }
    .cbcn-os-img {
      width: 100%;
      height: 3em;
    }
  }
  /* os5 */
  @media screen {
    .cbcn-os5-card {
      border-radius: 0.6em;
      background: var(--background-l2, #f2f2f2);
      justify-content: space-between;
      height: 22.5em;
      overflow: hidden;
    }
    .cbcn-os5-title {
      padding: 1em 0.6em 0em;
    }

    .cbcn-os5-title > p:nth-child(1) {
      width: fit-content;
    }
    .cbcn-os5-img1,
    .cbcn-os5-img2 {
      height: 14em;
      width: 100%;
    }
    .cbcn-os5-switchBtn-list {
      margin-top: 1em;
    }
  }
  /* remark */
  @media screen {
    .cbcn-remark-section.wt{
      background:  #FAFAFA;
    }
    .cbcn-remark-section ul,
    .cbcn-remark-section ol {
      padding-inline-start: 1em;
    }

    .cbcn-remark-section ol li {
      list-style: decimal;
      color: #7f7f7f;
    }
  }
}