@media screen and (max-width: 980px) {
  .cbcn-wap-txtLeft {
    text-align: left !important;
  }

  /* kv  */
  @media screen {
    .cbcn-kv-section {
      width: 100%;
      height: calc(45.4 / 23.4 * 100vw);
      position: relative;
      display: block;
    }
  }

  /* navigation  */
  @media screen {
    .cbcn-dom-container a {
      text-decoration: none;
      outline: none;
      color: rgba(0, 0, 0, 0.9) !important;
    }
    .cbcn-navigation-section.wt {
      background: #F5F5F5 !important;
    }

    .cbcn-navigation-container {
      gap: 1em;
    }

    .cbcn-navigation-div-bk1 {
      overflow: hidden;
      border-radius: 30px;
      background: linear-gradient(117deg, #8EC7FF 36.63%, #F0C9FF 88.38%, #FFC6DA 114.25%, #FFD4A9 174.63%), #FFF;
    }

    .cbcn-navigation-div-bk2 {
      overflow: hidden;
      border-radius: 30px;
      background: linear-gradient(292deg, #C8F0FF 18.03%, #66C6FF 96.39%);
    }

    .cbcn-navigation-div-bk3 {
      overflow: hidden;
      border-radius: 30px;
      background: linear-gradient(5deg, #FFCCE0 2.71%, #FFCB99 97.11%);
    }

    .cbcn-navigation-div-bk4 {
      overflow: hidden;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.00);
    }

    .cbcn-navigation-img1 {
      position: relative;
      width: 100%;
      height: 17.35em;
      bottom: -0.15em;
    }


    .cbcn-navigation-img {
      width: 100%;
      display: flex;
      height: 26.5em;
      padding-bottom: 1.5em;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
    }

    .cbcn-navigation-desc3,
    .cbcn-navigation-desc1 {
      padding: 1.5em 1em;
    }

    .cbcn-navigation-desc2 {
      padding: 1.5em 1em 0 1em;
    }

    .cbcn-navigation-desc4 {
      padding: 2.5em 1.5em 1.5em 1.5em;
    }

    .cbcn-navigation-container .grey {
      color: rgba(0, 0, 0, 0.60) !important;
    }

    .cbcn-navigation-img2 {
      width: 100%;
      height: 18.75em;
      bottom: -0.15em;
    }

    .cbcn-navigation-img3 {
      width: 100%;
      height: 16em;
    }

    .cbcn-navigation-img4 {
      width: 100%;
      height: 26.5em;
      position: absolute;
    }
  }

  /*appearance */
  @media screen {
    .cbcn-appearance-section {
      height: 13.7em;
    }

    .cbcn-appearance-video {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  /*screen */
  @media screen {
    .cbcn-screen-section.wt {
      background: #F5F5F5 !important;
    }

    .cbcn-screen-section .grey {
      color: rgba(0, 0, 0, 0.72) !important;
    }

    .cbcn-screen-section .ct {
      text-align: left !important;
    }

    .cbcn-screen-img {
      display: block;
      width: 16.51525em;
      height: 22.9355em;
      padding-top: 1.85em;
      padding-bottom: 1.31em;
    }

    .cbcn-sreen-data-div {
      padding-bottom: 2em;
    }

    .cbcn-sreen-data-txt {
      width: fit-content !important;
    }

    .cbcn-sreen-param {}

    .cbcn-sreen-param .cbcn-param {
      gap: 0.25em;
    }
  }

  /*color */
  @media screen {
    .cbcn-color-img {
      width: 16em;
      height: 20em;
    }

    .cbcn-color-txt-first {
      flex-direction: column;
      align-items: center !important;
      justify-content: flex-end;
    }

    .cbcn-color-txt {
      display: flex;
      align-items: flex-end;
      height: 3.5em;
    }

    .cbcn-color-txt {
      opacity: 0;
    }

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

    .cbcn-color-btnListDiv {
      justify-content: center;
      margin-top: 0.81em;
    }

    .cbcn-color-btnList {
      display: inline-flex !important;
      width: auto;
      padding: 0.5em;
      align-items: center;
      gap: 0.5em;
      border-radius: 2.5em;
      background: var(--background-background-A-state-2, rgba(0, 0, 0, 0.05));
    }

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

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

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

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

    .cbcn-color-p2 {
      color: #88C4DE !important;
    }

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

    .cbcn-color-p3 {
      color: #E9CD82 !important;
    }

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

    .cbcn-color-p4 {
      color: #F0B6CC !important;
    }

    .cbcn-color-btn.index4 .cbcn-color-circle {
      stroke: #434345;
    }

    .cbcn-color-btn.active .cbcn-color-circle {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 3s ease-out;
    }
    .cbcn-color-img {
      opacity: 0;
    }

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

  /* design */
  @media screen {
    .cbcn-design-section.wt {
      background-color: #F5F5F5;
    }

    .cbcn-design-param .cbcn-param {
      margin-top: 2.5em;
    }

    .cbcn-design-param .cbcn-param:first-child {
      width: 9.63em;
    }

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

    .cbcn-design-param .cbcn-param:first-child .cbcn-pc-d2 {
      width: 100%;
      background: linear-gradient(287deg, #F3A75D 55.95%, #EA89AB 68.81%, #BE85D5 75.41%, #60AEF9 85.16%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-design-param .cbcn-param:last-child .cbcn-pc-d2 {
      background: linear-gradient(286deg, #F3A75D 4.13%, #EA89AB 34.65%, #BE85D5 50.31%, #60AEF9 73.46%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-design-remark {
      margin-top: 0.75em;
    }

    .cbcn-design-video {
      width: 16.75em;
      height: 20em;
      border-radius: 0.6em;
      overflow: hidden;
    }
  }

  /* endurance */
  @media screen {
    .cbcn-endurance-section.wt {
      background-color: #F5F5F5;
    }

    .cbcn-endurance-top {
      width: 100%;
      justify-content: space-between;
    }

    .cbcn-endurance-top .cbcn-wap-b1 {
      height: 6.75em;
    }

    .cbcn-endurance-param {
      display: flex;
      flex-direction: column;
      padding: 1.88em 1.25em;
      border-radius: 1.88em;
      background-color: #fff;
      margin-top: 2.5em;
    }

    .cbcn-endurance-paramBox {
      display: flex;
      flex-direction: column;
      gap: 2em;
      height: 10.5em;
    }

    .cbcn-endurance-param-div {
      display: flex;
      flex-direction: column;
      gap: 1.25em;
      height: 11.5em;
    }

    .cbcn-param {
      margin-top: 0;
    }

    .cbcn-endurance-param .cbcn-param .cbcn-pc-sh {
      width: auto;
      background: linear-gradient(286deg, #F3A75D 4.13%, #EA89AB 34.65%, #BE85D5 50.31%, #60AEF9 73.46%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-endurance-paramimg {
      width: 100%;
      height: 6em;
    }

    .cbcn-endurance-swiper {
      width: 100%;
      position: relative;
    }

    .cbcn-endurance-video {
      width: 100%;
      height: 22.35em;
      border-radius: 0.6em;
      overflow: hidden;
      display: block;
    }

    .cbcn-endurance-imgborder {
      width: 100%;
      height: 22.35em;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      opacity: 0;
      border-radius: 0.6em;
      overflow: hidden;
    }

    .cbcn-endurance-img.swiper-slide-active .cbcn-endurance-imgborder {
      animation: filmborder 0.5s 0.3s ease-in-out forwards;
    }

    .cbcn-switchBtnList {
      margin-top: 1.5em;
    }

    .cbcn-endurance-media {
      overflow: hidden;
      width: 100%;
      height: 9em;
    }
    .cbcn-endurance-media2 {
      height: 10em !important;
    }
  }

  /* camerachapter */
  @media screen {

    .cbcn-camerachapter-section {
      height: 30em;
    }

    .cbcn-camerachapter-video {
      width: 100%;
      height: 30em;
      overflow: hidden;
    }
  }

  /* camera */
  @media screen {
    .cbcn-camera-media {
      width: 16.75em;
      height: 28em;
      top: 5.5em;
    }

    .cbcn-camera-video {
      position: absolute;
      height: 23em;
      width: 9em;
      right: -3em;
      bottom: -4em;
    }

    .cbcn-camera-descText {
      padding-bottom: 4px;
      font-size: 1em !important;
      font-family: "vivoSans-Bold" !important;
    }

    .cbcn-camera-desc .cbcn-p3 {
      line-height: 120%;
    }

    .cbcn-camera-param {
      width: 9em;
      position: absolute;
      left: 5.3vw;
      z-index: 3;
    }

    .cbcn-camera-param4 {
      top: 12em;
    }

    .cbcn-camera-param3 {
      top: 6.3em;
      left: 0;
      opacity: 0;
    }

    .cbcn-camera-param2 {
      top: 16.2em;
      left: 0;
      /*opacity: 0;*/
    }

    .cbcn-camera-param1 {
      top: 6.3em;
      left: 0;
    }

    .cbcn-camera-line {
      z-index: 3;
      position: absolute;
    }

    .cbcn-camera-line3 {
      width: 9.75em;
      height: 8.6em;
      left: 6.65em;
      top: 0.5em;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
    }

    .cbcn-camera-line2 {
      width: 2.95em;
      height: 2.05em;
      left: 6.8em;
      top: 0.5em;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
    }

    .cbcn-camera-line4 {
      width: 4.65em;
      height: 2.05em;
      left: 9.74em;
      top: 0.5em;
      border-bottom: 1px solid #999;
    }

    .cbcn-camera-line1 {
      width: 7.7em;
      height: 7.95em;
      top: 0.5em;
      left: 6.9em;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
    }

    .cbcn-camera-img {
      height: 26em;
      width: 100%;
      display: block;
    }

    .cbcn-camera-txt .cbcn-wap-fn {
      padding-top: 0.4em;
    }
  }

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

    .cbcn-longfocus-title .cbcn-wap-sh {
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-longfocus-img-wap {
      padding-top: 0.7em;
    }
  }

  /* longfocustage */
  @media screen {
    .cbcn-longfocustage-section.wt {
      background: #F5F5F5 !important;
    }

    .cbcn-longfocustage-section {
      padding: 4em 1em;
    }

    .cbcn-longfocustage-imgBox {
      position: relative;
      width: 11.288em;
      height: 22.75em;
      margin: auto;
    }

    .cbcn-longfocustage-bg {
      z-index: 10;
      display: block;
      width: 100%;
      height: 100%;
    }

    .cbcn-longfocustage-img img {
      width: 10em;
      height: 21.2em;
      border-radius: 0.96505em;
    }

    .cbcn-longfocustage-titleBox {
      padding-bottom: 1.5em;
    }

    .cbcn-longfocustage-btnlist {
      display: flex;
      position: relative;
      z-index: 60;
      bottom: 3.08em;
      width: 3em;
      padding: 0.25em;
      align-items: center;
      justify-content: space-between;
      border-radius: 1.5em;
      background: rgba(0, 0, 0, 0.30);
    }

    .cbcn-longfocustage-btn {
      position: relative;
      width: 0.95em;
      height: 0.95em;
      border-radius: 2.5em;
      background: rgba(38, 38, 38, 0.80);
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .cbcn-longfocustage-btn.active {
      width: 1.25em;
      height: 1.25em;
      background: rgba(20, 20, 20, 0.80);
    }

    .cbcn-longfocustage-btn p {
      background: rgba(255, 255, 255, 0.95);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-longfocustage-btn.active p {
      background: rgba(255, 198, 53, 0.95);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* fullFocusPortrait */
  @media screen {
    .cbcn-fullfocusportrait-section.wt {
      background: #F5F5F5 !important;
    }

    .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 {
      width: 16.75em;
      height: 25em;
      border-radius: 0.6em;
      overflow: hidden;
      display: block;
    }

    .cbcn-fullfocusportrait-div {
      position: relative;
      justify-content: space-between;
      align-items: flex-end;
    }

    .cbcn-fullfocusportrait-InfoDiv {
      padding-top: 1.25em;
      height: 28.25em;
    }

    .cbcn-fullfocusportrait-Info .cbcn-pc-h5 {
      text-align: left !important;
      color: rgba(0, 0, 0, 0.72) !important;
    }

    .cbcn-fullfocusportrait-Info-txt1 {
      color: rgba(255, 255, 255, 0.95) !important;
      display: flex;
      width: 5.4em;
      height: 1.8em;
      padding: 0.1em 0.5em 0em 0.5em;
      justify-content: center;
      align-items: flex-start;
      border-radius: 0.84445em;
      background: rgba(127, 127, 127, 0.50);
      backdrop-filter: blur(7.037036895751953px);

      white-space: nowrap;
      position: absolute;
      top: 84%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .cbcn-fullfocusportrait-Info .cbcn-pc-h5 {
      padding-top: 1.25em;
    }

    .cbcn-fullfocusportrait-switchBtn-list {
      position: absolute;
      bottom: -1em;
      right: 0;
      z-index: 8;
    }
  }

  /* landscapemode */
  @media screen {
    .cbcn-landscapemode-section.wt {
      background: #F5F5F5 !important;
    }

    .cbcn-landscapemode-imgBox {
      position: relative;
      width: 11.288em;
      height: 22.75em;
      margin: auto;
    }

    .cbcn-landscapemode-bg {
      z-index: 10;
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 11;
    }

    .cbcn-landscapemode-img img {
      width: 9.8258em;
      height: 21.05535em;

      border-radius: 0.96505em;
    }

    .cbcn-landscapemode-titleBox {
      padding-bottom: 2.5em;
    }

    .cbcn-landscapemode-btnlist {
      display: flex;
      position: relative;
      z-index: 60;
      bottom: 3.08em;
      width: 3em;
      padding: 0.25em;
      align-items: center;
      justify-content: space-between;
      border-radius: 1.5em;
      background: rgba(0, 0, 0, 0.30);
    }

    .cbcn-landscapemode-btn {
      position: relative;
      width: 0.95em;
      height: 0.95em;
      border-radius: 2.5em;
      background: rgba(38, 38, 38, 0.80);
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .cbcn-landscapemode-btn.active {
      width: 1.25em;
      height: 1.25em;
      background: rgba(20, 20, 20, 0.80);
    }

    .cbcn-landscapemode-btn p {
      background: rgba(255, 255, 255, 0.95);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-landscapemode-btn.active p {
      background: rgba(255, 198, 53, 0.95);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* photography */
  @media screen {
    .cbcn-photography-section .ct {
      text-align: left !important;
    }

    .cbcn-photography-img1,
    .cbcn-photography-img1 {
      width: 100%;
      height: 12.5em;
    }

    .cbcn-photography-swiper {
      padding-top: 2.5em;
      padding-bottom: 0.5em;
    }

    .cbcn-photography-switchBtn-list {
      padding-top: 0.5em;
    }
  }

  /* film */
  @media screen {
    .cbcn-film-content {}

    .cbcn-film-imgBox {
      border-radius: 1em;
      padding-top: 2em;
      overflow: hidden;
    }

    .cbcn-film-img {
      width: 16.75em;
      height: 27.5em;
    }

    .cbcn-film-btnBox {
      width: 16.75em;
      margin-top: 1.25em;
    }

    .cbcn-film-btnlist {
      width: max-content;
      padding: 0.11em;
      border-radius: 2.2em;
      background: rgba(0, 0, 0, 0.05);
      justify-content: space-between;
      gap: 0.71em;
    }

    .cbcn-film-btn {
      padding: 0.17745em 0.6388em;
      border-radius: 1.85em;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s;
    }

    .cbcn-film-btn.active {
      background: #000;
    }

    .cbcn-film-btn p {
      color: rgba(0, 0, 0, 0.30) !important;
      transition: all 0.3s;
    }

    .cbcn-film-btn.active p {
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-film-btn .cbcn-wap-b1 {
      color: rgba(255, 255, 255, 0.95);
      font-family: "vivo Sans Global";
      font-size: 0.7098em;
      font-style: normal;
      font-weight: 600;
      line-height: 150%;
    }

    .cbcn-film-txt {
      width: 16.75em;
      height: 1.2em;
      position: relative;
      margin-top: 0.35em;
    }

    .cbcn-film-txt p {
      width: 100%;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-film-txt p.active {
      opacity: 1;
    }

    .cbcn-film-txt .cbcn-wap-b3 {
      color: rgba(0, 0, 0, 0.60) !important;
      text-align: center;
      font-family: "vivo Sans Global";
      font-size: 0.6em;
      font-style: normal;
      font-weight: 600;
      line-height: 150%;
    }
  }

  /* aistudio */
  @media screen {

    .cbcn-aistudio-txt1 {
      padding: 2.5em 0;
      text-align: left !important;
    }

    .cbcn-aistudio-content::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1em;
      background: linear-gradient(280deg, #F3A75D 7.46%, #EA89AB 37.58%, #BE85D5 58.73%, #60AEF9 83.8%);
      filter: blur(11px);
      z-index: 0;
    }

    .cbcn-aistudio-txt-b1 {
      padding-top: 0.75em;
      color: rgba(0, 0, 0, 0.60) !important;
    }
  }

  /* aiImage */
  @media screen {
    .cbcn-aiImage-icon {
      width: 2em !important;
      height: 1.863em !important;
    }

    .cbcn-aiImage-content {
      height: 7.45em;
      padding: 1em;
    }

    .cbcn-aiImage-p {
      position: relative;
      top: 0.3em;
      left: 2em;
      font-size: 1.2em;
    }

    .cbcn-aiImage-video {
      width: 13.24785em;
      height: 26.7em;
      position: relative;
      display: flex;
      justify-content: center;
    }

    .cbcn-aiImage-switchBtn-list {
      padding-bottom: 3.65em;
    }

    .cbcn-aiImage-titleDiv {
      display: flex;
      position: relative;
      text-align: left !important;
      width: 16.75em;
      height: 1.863em;
    }

    .cbcn-aiImage-title {
      position: absolute;
      transition: all 0.3s;
      opacity: 0;
    }

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

    .cbcn-aiImage-img {
      width: 13.24785em;
      height: 26.7em;
      overflow: hidden;
      display: block !important;
    }

    .cbcn-aiImage-title-p {
      padding-top: 1.5em;
      color: rgba(0, 0, 0, 0.60) !important;
    }
  }

  /* clip */
  @media screen {
    .cbcn-performance-img {
      display: block;
      width: 100%;
      height: 30em;
    }
  }

  /* clip */
  @media screen {
    .cbcn-chip-img {
      width: 100%;
      height: 20em;
      margin-top: 2.5em;
    }

    .cbcn-chip-param-box {
      justify-content: space-between;
      gap: 1.5em 0;
      margin-top: 2.5em;
    }

    .cbcn-chip-param-box .chip-pc-param {
      width: 7.775em;
      padding-top: 0.75em;
      border-top: 1px solid #CCC;
    }

    .cbcn-chip-param-box .chip-pc-param h2 {
      width: 100%;
      color: rgba(0, 0, 0, 0.72);
    }
  }

  /* eyeprotection */
  @media screen {
    .cbcn-eyeprotection-img {
      display: block;
      width: 18.75em;
      height: 15.25em;
      margin-top: 2.5em;
      position: relative;
      left: -1em;
    }
  }

  /* display */
  @media screen {
    .cbcn-display-img {
      width: 18.75em;
      height: 14.75em;
      display: block;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-display-param-box {
      justify-content: space-between;
      gap: 1.5em 0;
      margin-top: 2.5em;
    }

    .cbcn-display-param-box .display-pc-param {
      width: 7.7em;
      padding-top: 0.75em;
      border-top: 1px solid #CCC;
    }

    .display-pc-param h2 {
      width: 100%;
      color: rgba(0, 0, 0, 0.72);
    }

    .cbcn-display1-img {
      width: 6.7em;
      height: 1.55em;
      display: block;
    }

    .cbcn-displayicon-txt {
      opacity: 0.55;
    }
  }

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

    .cbcn-waterproof-img {
      width: 100%;
      height: 23.6em;
    }

    .cbcn-waterproof-txt {
      margin-top: 2.5em;
    }

    .cbcn-waterproof-param-box {
      justify-content: space-between;
      gap: 1.5em 0;
      margin-top: 2.5em;
    }

    .cbcn-waterproof-param-box .cbcn-param {
      width: 7.7em;
      padding-top: 0.75em;
      border-top: 1px solid #CCC;
    }

    .cbcn-waterproof-param-box .cbcn-param:last-child {
      width: 100%;
    }

    .cbcn-waterproof-param-box .cbcn-param * {
      width: 100%;
    }
  }

  /* resistance */
  @media screen {
    .cbcn-resistance-img {
      width: 100%;
      height: 16.25605em;
      margin-bottom: -1.1em;
      position: relative;
    }

    .cbcn-resistance-param {
      margin-top: 2.5em;
      justify-content: space-between;
      position: relative;
    }

    .cbcn-resistance-icon {
      gap: 1em;
    }

    .cbcn-resistance-icon .cbcn-wap-b3 {
      color: rgba(0, 0, 0, 0.40) !important;
    }

    .cbcn-resistance-icon1 {
      width: 6em;
      height: 2.85em;
    }

    .cbcn-resistance-icon2 {
      width: 2.25em;
      height: 2.75em;
    }
    .cbcn-resistance-txt {
      position: relative;
      z-index: 10;
    }
  }

  /* superlink */
  @media screen {
    .cbcn-superlink-section.wt {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 60.81%, rgba(255, 254, 234, 0.50) 100%),  #F5F5F5 !important;
    }
    .cbcn-superlink-img {
      width: 100%;
      height: 16em;
      margin-top: 2.5em;
    }

    .cbcn-superlink-param {
      margin-top: 2.5em;
      justify-content: space-between;
    }

    .cbcn-superlink-param .cbcn-param {
      padding-top: 0.75em;
      width: 7.7em;
      border-top: 1px solid #B3B3B3;
    }

    .cbcn-superlink-svg {
      width: 0.55em;
      height: 1em;
    }
  }

  /* nfc */
  @media screen {
    .cbcn-nfc-img {
      width: 100%;
      height: 15.85em;
    }
  }

  /* speaker */
  @media screen {
    .cbcn-speaker-img {
      width: 100%;
      height: 12.4em;
      margin-top: 1em;
    }
  }

  /* system */
  @media screen {
    .cbcn-system-video {
      width: 100%;
      height: 30em;
    }

    .cbcn-system-section {
      height: 30em;
    }
  }

  /* gemini */
  @media screen {
    .cbcn-gemini-section {
      height: 30em;
      padding: 2.5em;
    }

    .cbcn-gemini-icon {
      display: flex;
      position: absolute;
      right: 0;
    }

    .cbcn-gemini-iconimg {
      width: 3.8573em;
      height: 1.2585em;
    }


    .cbcn-gemini-p {
      color: rgba(255, 255, 255, 0.95);
      font-family: "vivo Sans Global";
      font-size: 1.6921em;
      font-style: normal;
      font-weight: 700;
      line-height: 110%;
      transform: all 2s ease-in-out;

      padding-bottom: 0.2644em;
    }

    .cbcn-gemini-span {
      color: rgba(255, 255, 255, 0.72);
      font-family: "vivo Sans Global";
      font-size: 0.89895em;
      font-style: normal;
      font-weight: 600;
      line-height: 150%;

      padding-right: 0.19em;
    }

    .cbcn-gemini-section.wt .cbcn-gemini-span {
      color: rgba(0, 0, 0, 0.72) !important;
    }

    .cbcn-gemini-bg1 {
      border-radius: 33.95em;
      background: radial-gradient(48.22% 49.81% at 53.2% 47.17%, rgba(255, 255, 255, 0.60) 6.27%, rgba(137, 190, 255, 0.60) 57.69%, rgba(171, 172, 255, 0.60) 89.42%, rgba(255, 255, 255, 0.60) 100%);
      filter: blur(100px);
      width: 33.95em;
      height: 33.95em;
      position: absolute;
      bottom: 7em;
      right: -35em;
      opacity: 0;
      z-index: 9;
    }

    .cbcn-gemini-bg2 {
      border-radius: 35.8861em;
      background: radial-gradient(54.02% 52.98% at 49.97% 52.98%, rgba(255, 255, 255, 0.80) 0%, rgba(255, 219, 184, 0.80) 49.04%, rgba(255, 184, 209, 0.64) 83.17%, rgba(255, 255, 255, 0.80) 100%);
      filter: blur(100px);
      width: 35.8861em;
      height: 35.8861em;
      position: absolute;
      bottom: 3em;
      left: -6em;
      opacity: 0;
      z-index: 9;
    }

    .cbcn-gemini-section.bk {
      transition: all 1s;
    }

    .cbcn-gemini-section.wt .cbcn-gemini-bg2,
    .cbcn-gemini-section.wt .cbcn-gemini-bg1 {
      animation: gemini 2s forwards;
    }

    @keyframes gemini {
      0% {
        opacity: 0;
        transform: scale(1);
      }

      25% {
        opacity: 1;
      }

      50% {
        transform: scale(2);
      }

      100% {
        opacity: 0;
        transform: scale(3);
      }
    }
  }

  /* gemini2 */
  @media screen {
    .cbcn-gemini2-section.wt {
      background: #fff !important;
    }

    .cbcn-gemini2-section {
      padding-bottom: 2em;
    }

    .cbcn-gemini2-img {
      position: relative;
      width: 10.0964em;
      height: 21.46935em;
      opacity: 0;
    }

    .cbcn-gemini2-swiper-img {
      opacity: 0;
    }

    .cbcn-gemini2-swiper-img.active {
      opacity: 1;
    }

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

    .cbcn-gemini2-titleBox {
      width: 100%;
      /* 小语种注意，这里的高度遇到长文本需要手机更改 */
      height: 13em;
      position: relative;
    }

    .cbcn-gemini2-title {
      position: absolute;
      opacity: 0;
      transition: all 0.3s ease;
    }

    .cbcn-gemini2-switchBtn-list {
      margin-top: 0em !important;
    }

    .cbcn-gemini2-img img {
      position: relative;
      left: 0.7em;
    }
  }

  /* aioffice */
  @media screen {
    .cbcn-aioffice-section {
      padding-bottom: 0.9em;
      padding-top: 0.9em;
    }

    .cbcn-aioffice-img {
      width: 100%;
      height: 30.74005em;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.42, 0.00, 1.00, 1.00);
      border-radius: 0.64085em;
      overflow: hidden;
      position: relative;
    }

    .cbcn-aioffice-bg {
      height: 100%;
      width: 100%;
      opacity: 1;
      transition: all 0s ease;
    }

    .cbcn-aioffice-title {
      background: linear-gradient(286deg, #F3A75D 4.13%, #EA89AB 34.65%, #BE85D5 50.31%, #60AEF9 73.46%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
      transform: translate(-50%, -50%) scale(2);
      transition: transform 0.8s, background 0.5s;
      top: 13.7em;
    }

    .cbcn-aioffice-p0 {
      text-align: center;
      font-size: 7em;
      font-weight: 700;
      line-height: 110%;
    }

    .cbcn-aioffice-p1 {
      text-align: center;
      font-size: 2em;
      font-weight: 800;
      line-height: 110%;
    }

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

    .cbcn-aioffice-img.active {
      opacity: 1;
    }

    .cbcn-aioffice-title.active {
      transform: translate(-50%, -50%) scale(1);
    }

    .cbcn-aioffice-title.wt {
      background: rgba(255, 255, 255, 0.95);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* gemini3*/
  @media screen {
    .cbcn-gemini3-span {
      color: rgba(0, 0, 0, 0.72) !important;
      font-size: 0.9214em;
      font-style: normal;
      font-weight: 600;
      line-height: 150%;
      /* 1.3821rem */
    }

    .cbcn-gemini3-iconimg {
      width: 3.95375em;
      height: 1.28995em;
    }

    .cbcn-gemini3-spanBox {
      width: 16.75em;
    }

    .cbcn-gemini3-icon {
      justify-content: flex-end;
      text-align: end;
    }

    .cbcn-gemini3-title>p {
      margin-top: 1em !important;
    }

    .cbcn-gemini3-title {
      width: 16.75em !important;
      position: absolute;
      transition: all 0.3s;
      opacity: 0;
    }

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

    .cbcn-gemini3-title .cbcn-wap-b3 {
      font-size: 0.8em !important;
    }
    .cbcn-gemini3-icon {
      gap: 0.4em;
      justify-content: flex-end;
    }

    .cbcn-gemini3-content {
      height: 9.45em;
    }


    .cbcn-gemini3-img {
      width: 13.3257em !important;
      height: 26.85em;
      margin: auto;
    }

    .cbcn-gemini3-img img {
      left: 0.8em;
    }

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

  /* stylish */
  @media screen {
    .cbcn-stylish-section {
      justify-content: space-between;
    }

    .cbcn-stylish-txt.active {
      opacity: 1;
    }

    .cbcn-stylish-swiper {
      background-color: #fff;
      position: relative;
    }

    .cbcn-stylish-txt,
    .cbcn-safe-txt,
    .cbcn-smooth-txt {
      height: 14.2em;
    }

    .cbcn-stylish-img,
    .cbcn-safe-img,
    .cbcn-smooth-img {
      position: relative;
      width: 100%;
      height: 20.75em;
      margin-bottom: 1.37em;
      margin-top: 1.5em;
    }

    .cbcn-phone-bg {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      border-radius: 21.38885rem;
      background: #C1EBFA;
      filter: blur(178px);
    }

    .cbcn-stylish-p,
    .cbcn-safe-p,
    .cbcn-smooth-p {
      color: #D4EDF1 !important;
      font-size: 3.5em;
      text-align: center;
      font-weight: 800;
      line-height: 120%;
      position: relative;
      z-index: 9;
    }

    .cbcn-stylish-switchBtn-list {
      position: absolute;
      z-index: 10;
      justify-content: space-between;
      width: 100%;
      top: 60%;
    }

  }

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

    .cbcn-remark-section .cbcn-pc-fn,
    .cbcn-remark-section li {
      color: rgba(0, 0, 0, 0.6) !important;
    }

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