@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.4 / 18.75 * 100vw);
      position: relative;
      display: block;
    }
  }
  /* navigation */
  @media screen {
    .cbcn-navigation-content {
      gap: 1em;
    }

    .cbcn-navigation-item {
      display: block;
      width: 100%;
      height: 20em;
      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 {
      background: linear-gradient(
        95deg,
        #df418a -5.73%,
        #c70b62 53.87%,
        #ff70b2 105.95%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item1 .cbcn-navigation-desc {
      background: linear-gradient(
        95deg,
        rgba(223, 65, 138, 0.6) -5.73%,
        rgba(199, 11, 98, 0.6) 53.87%,
        rgba(255, 112, 178, 0.6) 105.95%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item:not(.cbcn-navigation-item1) .cbcn-navigation-name {
      background: rgba(255, 255, 255, 0.95);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-navigation-item:not(.cbcn-navigation-item1) .cbcn-navigation-desc {
      background: rgba(255, 255, 255, 0.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: #d23466;
      --color2: #23c8ff;
      --color3: #f5d06d;
      --color4: #414141;
    }
    .cbcn-color-swiper {
      width: 100%;
      height: 17.75em;
    }

    .cbcn-color-txt {
      position: absolute;
      left: 10.75em;
      bottom: 3em;
      opacity: 0;
      padding: 0 0.75em;
      overflow: hidden;
      border-radius: 49.95em;
      border: 1px solid rgba(255, 255, 255, 1);
      height: 2em;
      display: inline-flex;
      align-items: center;
    }
    .cbcn-color-txt::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: rgba(255, 255, 255, 0.40);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
    }
    .cbcn-color-txt.active {
      opacity: 1;
    }
    .cbcn-color-txt p {
      position: relative;
      z-index: 2;
    }
    .cbcn-color-txt1 p {
      color: var(--color1) !important;
    }
    .cbcn-color-txt2 p {
      color: var(--color2) !important;
    }
    .cbcn-color-txt3 p {
      color: var(--color3) !important;
    }
    .cbcn-color-txt4 p {
      color: var(--color4) !important;
    }

    .cbcn-color-btnListDiv {
      position: absolute;
      right: 9.2em;
      bottom: 3em;
      z-index: 99;
      display: inline-flex;
    }

    .cbcn-color-btnList {
      display: inline-flex !important;
      width: auto;
      align-items: center;
      gap: 0.25em;
      border-radius: 2.5em;
      padding: 0 0.75em;
      border: 1px solid rgba(255, 255, 255, 1);
      background: rgba(255, 255, 255, 0.40);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      height: 2em;
      display: inline-flex;
      align-items: center;
    }

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

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

    .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: #ff6998;
    }

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

    .cbcn-color-btn.index2 .cbcn-color-circle {
      stroke: #f5d06d;
    }

    .cbcn-color-btn.index3 .cbcn-color-circle {
      stroke: #898888;
    }

    .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: #ff6e9c;
    }
  }
  /* livephoto */
  @media screen {
    .cbcn-livephoto-imgDiv {
      margin-top: 2.5em;
      height: 8.05em;
      width: 100%;
      position: relative;
    }

    .cbcn-livephoto-video {
      width: 16.75em;
      height: 100%;
      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;
    }
  }
  /* alfredhitchcock */
  @media screen {
    /* .cbcn-alfredhitchcock-box1 {
      height: 12.25em;
      width: 100%;
      position: relative;
    } */
    .cbcn-alfredhitchcock-video1 {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    .cbcn-alfredhitchcock-title p {
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cbcn-alfredhitchcock-videoDiv {
      margin-top: 2.5em;
    }
    .cbcn-alfredhitchcock-video2,
    .cbcn-alfredhitchcock-video3 {
      height: 11.15em;
      width: 100%;
      border-radius: 0.6em;
      overflow: hidden;
      display: block;
      margin-bottom: 0.5em;
    }
  }
  /* 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 {
      object-fit: cover;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    .cbcn-portrait-video4,
    .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;
    }
  }
  /* longfocus */
  @media screen {
    .cbcn-longfocus-box {
      gap: 1em;
    }
    .cbcn-longfocus-item {
      flex-wrap: nowrap;
      gap: 0.5em;
    }
    .cbcn-longfocus-icon {
      width: 2.1em;
      height: 2.1em;
      flex-shrink: 0;
      margin-top: 0.1em;
    }
    .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 {
      position: relative;
      z-index: 2;
    }
    .cbcn-camera-Box {
      margin-top: 2.5em;
      width: 100%;
      border-radius: 0.6em;
      /* background: rgba(0, 0, 0, 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;
    }
  }
  /* 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: #ff6e9c;
    }
  }
  /* 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;
    }
  }
  /* 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;
    }
  }
  /* chip */
  @media screen {
    .cbcn-chip-section.bk .cbcn-chip-txt .cbcn-wap-sh {
      color: rgba(255, 255, 255, 0.5) !important;
    }
    .cbcn-chip-img {
      height: 16em;
      width: 100%;
      margin-bottom: 2em;
      margin-top: -0.5em;
      position: relative;
      z-index: 8;
    }
    .cbcn-chip-txt {
      position: relative;
      z-index: 9;
    }
    .cbcn-chip-swiper {
      padding: 0 1em;
    }
    .cbcn-chip-param {
      position: relative;
      z-index: 9;
      justify-content: space-between;
    }
    .cbcn-chip-param > div {
      gap: 1em;
      width: 44vw;
    }
    .cbcn-chip-param .cbcn-param {
      align-items: start;
    }
    .cbcn-chip-desc {
      padding: 0 1em;
      margin-top: -1.5em;
    }
  }
  /* 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 {
      justify-content: space-between;
      position: relative;
      z-index: 9;
    }
    .cbcn-eyeprotection-param > div {
      gap: 1em 0em;
    }
    .cbcn-eyeprotection-param .cbcn-param {
      width: 44vw;
    }
    .cbcn-eyeprotection-param .cbcn-stylecolor1 {
      width: fit-content;
    }
    .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;
    }
  }
  /* signal */
  @media screen {
    .cbcn-signal-txt span{
      display: inline;
    }
    .cbcn-signal-swiper {
      margin-top: 2.5em;
    }
    .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;
    }
  }
  /* 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: 23.4em;
      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: 14.9em;
      width: 100%;
    }
    .cbcn-os5-switchBtn-list {
      margin-top: 1em;
    }
    .cbcn-os5-video {
      width: 16.75em;
      height: 14.9em;
      margin: auto;
      overflow: hidden;
    }
  }
  /* 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;
    }
  }
}