@media screen and (min-width: 981px) {
  /* kv */
  @media screen {
    .cbcn-kv-section {
      margin-top: 50px;
      width: 100%;
      height: 51.2em;
    }

    /* .cbcn-kv-remark {
            position: absolute;
            bottom: 1.5em;
            right: 1.5em;
            text-align: right!important;
        }

        .cbcn-kv-remark div {
            color: #555;
            line-height: 150%;
        } */
  }

  /* navigation */
  @media screen {
    .cbcn-navigation-section {}

    .cbcn-navigation-swiper {
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }

    .cbcn-navigation-swiper .swiper-slide {
      opacity: 0.3;
      transition: all 0.3s;
    }

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

    .cbcn-navigation-img {
      width: 980px;
      height: 578px;
      border-radius: 32px;
      overflow: hidden;
      background: #F2F2F2 !important;
    }

    .cbcn-navigation-switchBtn-list {
      margin-right: 380px;
      margin-top: 40px;
      justify-content: end;
    }

    .cbcn-navigation-desc {
      position: absolute;
      top: 40px;
      left: 50px;
    }

    .cbcn-navigation-color {
      color: #FFF !important;
    }

    /* 切换按钮 */
    .cbcn-navigation-swiper-btnDiv {
      margin-top: 1.5em;
      gap: 0.5em;
      justify-content: center;
    }

    .cbcn-navigation-swiper-btnList {
      width: fit-content;
      height: 2.2em;
      padding: 0px 0.7em;
      gap: 0.4em;
      border-radius: 1.8em;
      background: var(--bottom-bg-l4, rgba(255, 255, 255, 0.12));
      align-items: center;
    }

    .cbcn-navigation-swiper-btn {
      padding: 0.1em;
      cursor: pointer;
    }

    .cbcn-navigation-swiper-btn.active {
      padding: 0.1em 0.2em;
    }

    .cbcn-navigation-swiper-btn-c {
      width: 0.3em;
      height: 0.3em;
      border-radius: 0.3em;
      background: var(--bottom-bg-l2, rgba(255, 255, 255, 0.25));
      overflow: hidden;
    }

    .cbcn-navigation-swiper-btn.active .cbcn-navigation-swiper-btn-c {
      width: 2.3em;
    }

    .cbcn-navigation-swiper-btn-cb {
      width: 0.3em;
      height: 100%;
      background: linear-gradient(0deg, var(--bottom-bg-l2, rgba(255, 255, 255, 0.25)) 0%, var(--bottom-bg-l2, rgba(255, 255, 255, 0.25)) 100%), var(--icon-l4, rgba(255, 255, 255, 0.35));
    }

    .cbcn-navigation-swiper-btn.active .cbcn-navigation-swiper-btn-cb {
      transition: all 4s linear;
      width: 2.3em;
    }

    .cbcn-navigation-swiper-replaybtn {
      width: 2.2em;
      height: 2.2em;
      transform: rotate(-8.929deg);
      flex-shrink: 0;
      cursor: pointer;
    }
  }

  /* color */
  @media screen {
    .cbcn-color-section {
      padding: 7.35em 0 5.1em;
    }

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

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

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

    .cbcn-color-img {
      width: 39.6em;
      height: 23.6em;
      display: block;
    }

    .cbcn-color-txt {
      margin-top: 2.55em;
      gap: 0.5em;
      align-items: center;
      opacity: 0;
    }

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

    .cbcn-color-btnListDiv {
      margin-top: 1.3em;
      width: fit-content;
    }

    .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-txt2 {
      margin-right: 25px;
    }

  }

  /* design */
  @media screen {

    .cbcn-design-title,
    .cbcn-design-title>div {
      align-items: center;
    }

    .cbcn-design-title,
    .cbcn-design-param {
      position: relative;
      z-index: 9;
    }

    .cbcn-design-param {
      width: 100%;
      justify-content: space-between;
      margin-top: 70px;
      margin-bottom: 30px;
    }


    .cbcn-design-param .cbcn-param:first-child {
      width: 171px;
    }


    .cbcn-design-param .cbcn-param:first-child .cbcn-pc-d2 {
      width: 100%;
      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-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-media {
      width: 1440px;
      height: 810px;
      margin-top: -13em;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-design-remark {
      position: absolute;
      left: 0;
      bottom: 50px;
      z-index: 9;
    }
  }

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

    .cbcn-endurance-swiper .swiper-slide {
      opacity: 0 !important;
    }

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

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

    .cbcn-endurance-title {
      width: 32.25em;
    }

    .cbcn-endurance-param {
      width: 14.4em;
      gap: 1em;
    }

    .cbcn-endurance-param .cbcn-param .cbcn-pc-sh {
      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-media {
      margin-top: 3.5em;
      width: 980px;
      height: 14.5em;
    }

    .cbcn-endurance-lineList {
      margin-top: 4.5em;
      width: 100%;
      gap: 1.5em;
      z-index: 9;
    }

    .cbcn-endurance-line {
      flex: 1;
      height: 0.3em;
      background: #E6E6E6;
      border-radius: 2em;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .cbcn-endurance-line::after {
      content: "";
      width: 0%;
      height: 100%;
      background: linear-gradient(286deg, #F3A75D 4.13%, #EA89AB 34.65%, #BE85D5 50.31%, #60AEF9 73.46%);
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 2em;
      overflow: hidden;
    }

    .cbcn-endurance-line.active::after {
      width: 100%;
      transition: width 3s linear;
    }
  }

  /* camerachapter */
  @media screen {
    .cbcn-camerachapter-section {
      width: 100%;
      height: 46.5em;
    }
  }

  /* camera */
  @media screen {
    .cbcn-camera-title {
      align-items: center;
      position: relative;
      z-index: 20;
    }

    .cbcn-camera-media {
      width: 100%;
      height: 41.75em;
      position: relative;
    }

    .cbcn-camera-video {
      width: 96em;
      height: 53.8em;
      top: -11.35em;
    }

    .cbcn-camera-param {
      position: absolute;
      z-index: 9;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .cbcn-camera-txt {
      position: absolute;
      top: -56px;
      left: 0;
    }

    .cbcn-camera-param p {
      position: relative;
      top: 20px;
    }

    .cbcn-camera-param h2 {
      width: 230px;
    }

    .cbcn-camera-param1 {
      width: 23.95em;
      top: 14.85em;
      right: 50%;
      margin-right: 0.5em;
    }

    .cbcn-camera-line1 {
      width: 23.95em;
      height: 5.65em;
      margin-bottom: -4.95em;
    }

    .cbcn-camera-param2 {
      width: 23.45em;
      top: 28.1em;
      right: 50%;
      margin-right: 1em;
    }

    .cbcn-camera-line2 {
      width: 23.45em;
      height: 1px;
      flex-shrink: 0;
      background: #999;
      margin: 0.4em 0 0.55em;
    }

    .cbcn-camera-param3 {
      top: 22.3em;
      right: 50%;
      margin-right: -24.5em;
    }

    .cbcn-camera-line3 {
      width: 20.2em;
      height: 1px;
      background: #999;
      position: absolute;
      right: 0;
      bottom: -0.5em;
    }

    .cbcn-camera-param3 .cbcn-camera-txt {
      position: absolute;
      top: -56px;
      right: -45px;
      left: auto;
    }

    .cbcn-camera-param3 h2 {
      transform: translateX(42px);
    }

  }

  /* longfocus */
  @media screen {
    .cbcn-longfocus-img {
      width: 100%;
      height: 100%;
      z-index: 9;
    }

    .cbcn-longfocus-title {
      min-height: 54em;
      width: 542px;
      position: relative;
      z-index: 10;
      padding: 2em 0;
      justify-content: center;
      margin-right: 56em;
      margin-left: auto;
    }
  }

  /* longfocustage */
  @media screen {
    .cbcn-longfocustage-section {
      height: 42em;
      width: 100%;
    }

    .cbcn-longfocustage-section>div {
      justify-content: space-between;
      align-items: center;
    }

    .cbcn-longfocustage-titleBox {
      width: 520px;
    }

    .cbcn-longfocustage-imgBox {
      position: relative;
      width: 13.07535em;
      height: 28.4em;
    }

    .cbcn-longfocustage-bg {
      display: block;
      z-index: 10;
      width: 15.0211em;
      height: 30.2738em;
    }
    .cbcn-longfocustage-img {
      border-radius: 1em;
      overflow: hidden;
    }

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

    .cbcn-longfocustage-btn {
      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-txt1 {
      width: 980px;
      top: 7.5em;
    }

    .cbcn-fullfocusportrait-imageDiv {
      width: 20em;
      height: 30em;
      flex-shrink: 0;
      perspective: 1000;
      -webkit-perspective: 1000;
      margin-top: -4.5em;
    }

    .cbcn-fullfocusportrait-image {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20em;
      height: 30em;
      transform-origin: center;
      z-index: 50;
      transition: all 0.3s;
    }

    .cbcn-fullfocusportrait-image img {
      border-radius: 0.8em;
      overflow: hidden;
      width: 20em;
      height: 30em;
    }

    .cbcn-fullfocusportrait-imgborder {
      height: 34em;
      width: 24em;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-fullfocusportrait-image:not(.left1, .right1, .left2, .right2, .left3, .right3) .cbcn-fullfocusportrait-imgborder {
      opacity: 1;
    }


    .cbcn-fullfocusportrait-image.left1 {
      transform: translateY(-50%) translateX(-19em) scale(0.7);
      -webkit-transform: translateY(-50%) translateX(-19em) scale(0.7);
      z-index: 30;
    }

    .cbcn-fullfocusportrait-image.left2 {
      transform: translateY(-50%) translateX(-30em) scale(0.6);
      -webkit-transform: translateY(-50%) translateX(-30em) scale(0.6);
      opacity: 0;
      z-index: 20;
    }

    .cbcn-fullfocusportrait-image.left2 img {
      opacity: 0;
    }

    .cbcn-fullfocusportrait-image.left3 {
      transform: translateY(-50%) translateX(-30em) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(-30em) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-image.left4 {
      transform: translateY(-50%) translateX(-30em) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(-30em) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-image.right1 {
      transform: translateY(-50%) translateX(19em) scale(0.7);
      -webkit-transform: translateY(-50%) translateX(19em) scale(0.7);
      z-index: 30;
    }

    .cbcn-fullfocusportrait-image.right2 {
      transform: translateY(-50%) translateX(30em) scale(0.6);
      -webkit-transform: translateY(-50%) translateX(30em) scale(0.6);
      z-index: 20;
      opacity: 0;
    }

    .cbcn-fullfocusportrait-image.right2 img {
      opacity: 0;
    }

    .cbcn-fullfocusportrait-image.right3 {
      transform: translateY(-50%) translateX(30em) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(30em) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-image.right4 {
      transform: translateY(-50%) translateX(30em) scale(0.4);
      -webkit-transform: translateY(-50%) translateX(30em) scale(0.4);
      z-index: 10;
      opacity: 0;
      transition: none;
    }

    .cbcn-fullfocusportrait-InfoDiv {
      top: calc(50% + 17em);
      margin-top: -3.5em;
    }

    .cbcn-fullfocusportrait-video1,
    .cbcn-fullfocusportrait-video2 {
      width: 30.5395em;
      top: 40px;
    }


    .cbcn-fullfocusportrait-Info {
      width: 25em;
      gap: 0.55em;
      position: absolute;
      top: 0.75em;
      left: 50%;
      transform: translateX(-50%);
      transition: all 0.3s;
    }

    .cbcn-fullfocusportrait-Info.left {
      transform: translateX(-110%) scale(0.5);
      opacity: 0;
    }

    .cbcn-fullfocusportrait-Info.right {
      transform: translateX(10%) scale(0.5);
      opacity: 0;
    }
  }

  /* aistudio */
  @media screen {
    .cbcn-aistudio-bg {
      height: 100%;
      width: 100%;
    }

    .cbcn-aistudio-txt-sh {
      padding-bottom: 15px;
    }

    .cbcn-aistudio-txt-h1 {
      padding-bottom: 20px;
      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-aistudio-txt2 {
      opacity: 0;
      margin-top: 2em;
      align-items: center;
      gap: 0.5em;
      transform: translate(0, 12em);
      transition: all 1s;
    }

    .cbcn-aistudio-content.active .cbcn-aistudio-txt2 {
      transform: translate(0, 0em);
      opacity: 1;
    }

    .cbcn-aistudio-logo1 {
      width: 10.584em;
      height: 10.584em;
    }

    .cbcn-aistudio-title {
      position: relative;
    }

    .cbcn-aistudio-svg1 {
      position: absolute;
      left: -1.05em;
      top: -1.1em;
    }

    .cbcn-aistudio-svg2 {
      position: absolute;
      right: -1.05em;
      bottom: -0.6em;
    }

    .cbcn-aistudio-imgDiv {
      margin-top: 2.5em;
      justify-content: center;
      gap: 3.5em;
      flex-wrap: nowrap;
    }

    .cbcn-aistudio-img1,
    .cbcn-aistudio-img3 {
      width: 16em;
      height: 10.85em;
      border-radius: 0.5em;
      overflow: hidden;
      opacity: 0;
      transition: all 1s;
    }

    .cbcn-aistudio-img1 {
      transform: translate(0, 8em);
    }

    .cbcn-aistudio-content.active .cbcn-aistudio-img1 {
      transform: translate(0, 0em);
      opacity: 1;
    }

    .cbcn-aistudio-img2 {
      width: 19em;
      height: 12.5em;
      border-radius: 0.5em;
      overflow: hidden;
      margin-top: 4.25em;
      opacity: 0;
      transform: translate(0, 12em);
      transition: all 1s;
    }

    .cbcn-aistudio-content.active .cbcn-aistudio-img2 {
      transform: translate(0, 0em);
      opacity: 1;
    }

    .cbcn-aistudio-img3 {
      transform: translate(0, 5em);
    }

    .cbcn-aistudio-content.active .cbcn-aistudio-img3 {
      transform: translate(0, 0em);
      opacity: 1;
    }

    .cbcn-aistudio-txt-b1 {
      color: rgba(0, 0, 0, 0.72) !important;
    }
  }

  /* aiImage */
  @media screen {
    .cbcn-section.cbcn-aiImage-section {
      background: #EBEBEB;
      padding: 200px 0;
    }

    .cbcn-aiImage-content {
      width: 49em;
      height: 26.95em;
      border-radius: 1.5em;
      background-color: #f5f5f5;
      overflow: hidden;
    }

    .cbcn-aiImage-title-p {
      color: var(--text-text-L2, rgba(0, 0, 0, 0.72)) !important;
      text-align: center;
      font-family: "vivo Sans Global";
      font-size: 0.81665em;
      font-style: normal;
      font-weight: 600;
      width: 23.25em;
      padding-top: 0.94em;
    }

    .cbcn-aiImage-leftDiv {
      overflow: hidden;
      width: 24.5em;
      height: 100%;
      border-radius: 1.5em 0 0 1.5em;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .cbcn-aiImage-leftDiv::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-aiImage-icon {
      width: 3.25em;
      height: 3em;
    }

    .cbcn-aiImage-title {
      padding-top: 0.94em;
      display: none;
    }

    .cbcn-aiImage-title.active {
      display: block;
    }

    .cbcn-aiImage-videoBtn-list {
      padding-top: 3.5em;
      align-items: flex-end;
      justify-content: center;
    }

    .cbcn-aiImage-swiper {
      left: 50%;
      width: 24.5em;
      overflow: hidden;
      z-index: 99;
    }

    .cbcn-aiImage-video {
      width: 17.10915em;
      height: 34.48215em;
      flex-shrink: 0;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-aiImage-img {
      height: 100%;
      position: relative;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-aiImage-img video {
      /* width: 17.15em; */
      height: 92%;
      border-radius: 1em;
      overflow: hidden;
    }

    .cbcn-aiImage-img img {
      position: relative;
      z-index: 9;
    }

    .cbcn-aiImage-p {
      text-align: center;
      font-family: "vivo Sans Global";
      font-size: 1.715em;
      font-style: normal;
      font-weight: 800;
    }

    .cbcn-aiImage-videoBtnList {
      gap: 0.5em;
    }

    .cbcn-aiImage-videoBtn-box {
      padding: 0 0.94em;
      height: 2.25em;
      gap: 0.5em;
      align-items: center;
      border-radius: 2.25em;
      overflow: hidden;
      background-color: #F0F0F0;
    }

    .cbcn-aiImage-videoBtn {
      padding: 0.2em;
      cursor: pointer;
      position: relative;

      justify-content: center;
      align-items: center;
    }

    .cbcn-aiImage-videoBtn::before {
      content: "";
      width: 0.425em;
      height: 0.425em;
      border-radius: 50%;
      background-color: #b3b3b3;
      overflow: hidden;
      transition: all 1s;
    }

    .cbcn-aiImage-videoBtn::after {
      content: "";
      width: 0;
      height: calc(100% - 0.4em);
      background-color: #fff;
      position: absolute;
      left: 0.2em;
      top: 0.2em;
      border-radius: 5em;
      overflow: hidden;
    }

    .cbcn-aiImage-videoBtn.active::before {
      width: 3em;
      border-radius: 5em;
    }

    .cbcn-aiImage-videoBtn.progress::after {
      animation: videoBtn 10s linear forwards;
    }

    @keyframes videoBtn {
      0% {
        width: 0;
      }

      100% {
        width: calc(100% - 0.4em);
      }
    }

    .cbcn-aiImage-videoBtn-play {
      width: 2.25em;
      height: 2.25em;
      flex-shrink: 0;
      cursor: pointer;
    }

    .cbcn-aiImage-videoBtn-play.active {
      animation: videoPlay 3s forwards;
    }

    @keyframes videoPlay {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }

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

    .cbcn-system-img {
      width: 15.86455em;
      height: 15em;
      opacity: 1;
    }

    .cbcn-system-section.active .cbcn-system-img {
      opacity: 0;
      transition: all 0.5s;
      transition-delay: 1s;
    }

    .cbcn-system-txt1 {
      opacity: 0;
      width: 49em;
      opacity: 0;
    }

    .cbcn-system-section.active .cbcn-system-txt1 {
      opacity: 1;
      transition: all 0.5s;
      transition-delay: 1.5s;
    }
  }

  /* gemini */
  @media screen {
    .cbcn-gemini-section {
      height: 46.5em;
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .cbcn-gemini-section>.cbcn-pc-safeRow {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .cbcn-gemini-title {
      align-items: flex-end;
      gap: 1em;
      justify-content: center
    }

    .cbcn-gemini-span {
      font-size: 3.02365em;
      font-weight: 600;
      line-height: 150%;
      color: rgba(255, 255, 255, 0.72);
    }

    .cbcn-gemini-p {
      font-size: 5.6916em;
      font-weight: 700;
      line-height: 120%;
      transform: all 2s ease-in-out;
    }

    .cbcn-gemini-icon {
      gap: 0.8em;
    }

    .cbcn-gemini-iconimg {
      width: 12.97455em;
      height: 4.23315em;
    }

    .cbcn-gemini-bg1 {
      border-radius: 78.05em;
      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(234, 145, 176, 0.64) 83.17%, rgba(255, 255, 255, 0.80) 100%);
      filter: blur(70.4000015258789px);
      width: 78.05em;
      height: 78.05em;
      position: absolute;
      top: 7em;
      left: -33em;
      opacity: 0;
      z-index: 9;
    }

    .cbcn-gemini-bg2 {
      border-radius: 87.55em;
      background: radial-gradient(48.22% 49.81% at 53.2% 47.17%, rgba(255, 255, 255, 0.60) 6.27%, rgba(96, 152, 220, 0.60) 57.69%, rgba(128, 130, 251, 0.60) 89.42%, rgba(255, 255, 255, 0.60) 100%);
      filter: blur(57px);
      width: 87.55em;
      height: 87.55em;
      position: absolute;
      bottom: 3em;
      right: -35em;
      opacity: 0;
      z-index: 9;
    }


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

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

    .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>div {
      justify-content: space-between;
    }

    .cbcn-gemini2-titleBox {
      width: 500px;
      height: 28em;
    }

    .cbcn-gemini2-title {
      width: 500px;
      opacity: 0;
    }

    .cbcn-gemini2-imgBox {
      position: relative;
    }

    .cbcn-gemini2-bg {
      position: relative;
      z-index: 10;
      width: 14.8642em;
      height: 29.95em;
      display: block;
      overflow: hidden;
    }

    .cbcn-gemini2-img {
      width: 14.8642em;
      height: 29.95em;
      z-index: 9;
      opacity: 0;
    }

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

    .cbcn-gemini2-title1 {
      opacity: 1;
    }
  }



  /* aioffice */
  @media screen {
    .cbcn-aioffice-section {
      width: 100%;
      height: 55em;
      padding: 2.3em;
    }

    .cbcn-aioffice-bg {
      width: 91.4519em;
      height: 50.4606em;
    }

    .cbcn-aioffice-p1 {
      color: rgba(0, 0, 0, 0.72) !important;
      font-size: 120.617px;
      font-style: normal;
      font-weight: 800;
      line-height: 120%;
    }

    .cbcn-aioffice-p2 {
      font-size: 26.927px;
      font-style: normal;
      font-weight: 650;
      line-height: 150%;
      opacity: 0;
      transition: opacity 0.5s;
    }

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

    .cbcn-aioffice-title {
      bottom: 31.51em;
      width: 100%;
    }

    .cbcn-aioffice-txt {
      top: 40.55em;
      width: 100%;
      height: 2em;
    }

    .cbcn-aioffice-imgBox {
      width: 61.5em;
      height: 14.05em;
      margin-top: 4.739em;
      overflow: hidden;
    }

    .cbcn-aioffice-swiper {
      width: 14.05em;
      height: 14.05em;
    }

    .cbcn-aioffice-swiper .swiper-wrapper {
      align-items: center;
    }

    .cbcn-aioffice-swiper .swiper-slide {
      transform: scale(0.375);
    }

    .cbcn-aioffice-swiper .swiper-slide-active {
      transform: none;
    }

    .cbcn-aioffice-swiper .swiper-slide-prev {
      transform: scale(0.375) translateX(-5em);
    }

    .cbcn-aioffice-swiper .swiper-slide-next {
      transform: scale(0.375) translateX(5em);
    }
  }


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

    .cbcn-stylish-section {
      justify-content: space-between;
    }

    .cbcn-stylish-box {
      height: 100%;
      width: 100%;
      position: relative;
    }

    .cbcn-stylish-titleBox {
      height: 100%;
      width: 300%;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
    }

    .cbcn-stylish-title {
      width: 100%;
    }

    .cbcn-stylish-p {
      text-align: center;
      font-size: 15em;
      font-weight: 800;
      line-height: 120%;
      color: rgba(212, 237, 241, 1) !important;
    }

    .cbcn-stylish-phonebg {
      height: 100%;
    }

    .cbcn-stylish-bg {
      background: #C1EBFA;
      filter: blur(250px);
      width: 15em;
      height: 25em;
    }

    .cbcn-stylish-zindex {
      position: relative;
      z-index: 10;
    }

    .cbcn-stylish-img {
      display: block;
      width: 9.63305em;
      height: 100%;
      z-index: 9;
      opacity: 0;
      transition: all 0.3s ease;
    }

    .cbcn-stylish-safe {
      position: relative;
      min-height: 173px;
    }

    .cbcn-stylish-txt {
      width: 100%;
      height: auto;
      opacity: 0;
      transition: all 0.3s ease;
    }

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

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

    .cbcn-stylish-video0 {
      width: 49em !important;
    }

    .cbcn-stylish-video1 {
      width: 49em !important;
    }

    .cbcn-stylish-video2 {
      width: 49em !important;
    }
  }

  /* layer-form */
  @media screen {
    .layer-form {
      width: 100%;
      height: 100%;
      padding: 4em 7em 3.4em;
      border-radius: 2.5em;
      background: #f4f4f4;
    }

    .form-wrap {
      margin-top: 2em;
    }

    .input-group {
      width: 100%;
      margin-bottom: 2em;
      position: relative;
    }

    .input-group label {
      align-items: center;
      justify-content: space-between;
    }

    .input-value input {
      width: 598px;
      height: 2.1em;
      border: none;
      background: transparent;
    }

    .input-value {
      border-bottom: 1px solid #b3b3b3;
    }

    .input-group.error .input-value {
      border-color: #ff0000;
    }

    .input-value input::placeholder {
      color: rgba(29, 29, 31, 0.35);
    }

    .check-status {
      position: absolute;
      right: -0.5em;
      top: 30%;
    }

    .status-correct,
    .status-error {
      position: absolute;
      top: 0;
      left: 0;
      width: 1.2em;
      height: 1.2em;
      opacity: 0;
    }

    .input-group.success .status-correct {
      opacity: 1;
    }

    .input-group.error .status-error {
      opacity: 1;
    }

    .tip-text {
      margin-top: 3.3em;
      justify-content: flex-end;
    }

    .check-box {
      width: 1em;
      height: 1em;
      border-radius: 50%;
      background: transparent;
      border: 1px solid #b3b3b3;
      flex-shrink: 0;
      margin-top: 0.4em;

      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .check-box.error {
      border-color: #ff0000;
      background: #fed7d6;
    }

    .check-box .tip-arrow {
      width: 0.625em;
      height: 0.4em;
      opacity: 0;
    }

    .check-box.active .tip-arrow {
      opacity: 1;
    }

    .policy-text {
      margin-left: 0.7em;
      width: 598px;
    }

    .policy-text .cbcn-pc-p26 {
      color: rgba(0, 0, 0, 0.35) !important;
    }

    .policy-text a {
      text-decoration: none;
      color: #3254FB !important;
    }

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

      cursor: pointer;
    }

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

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

    .input-group input:focus-visible {
      outline: none;
    }
  }


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

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

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

@media screen and (min-width: 981px) and (max-width: 1439px) {
  .cbcn-longfocus-title {
    margin-left: 2em;
  }
}