@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: 36.5em;
      position: relative;
      display: block;
    }
  }

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

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

  /*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;
    }
  }

  /* 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;
    }

    .cbcn-design-param .cbcn-wap-b1 {
      color: rgba(0, 0, 0, 0.40) !important;
    }
  }

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

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

    .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: 11.5em;
    }

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

    .cbcn-endurance-param .cbcn-wap-sh {
      width: fit-content;
    }

    .cbcn-endurance-param .cbcn-wap-b2 {
      color: rgba(0, 0, 0, 0.40) !important;
    }

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

    .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-paramimg {
      height: 6em;
    }

    .cbcn-endurance-swiper {
      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: 8.8em;
    }
  }

  /* 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;
      bottom: 0;
    }

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

    .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: 15.2em;
      left: 0;
      /*opacity: 0;*/
    }

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

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

    .cbcn-camera-line3 {
      width: 10.5em;
      height: 9em;
      left: 6em;
      top: 0.5em;
    }

    .cbcn-camera-line2 {
      width: 9.95em;
      height: 3.05em;
      left: 4.3em;
      top: 1.5em;
    }

    .cbcn-camera-line1 {
      width: 9.7em;
      height: 9.95em;
      top: 0.4em;
      left: 4.5em;
    }

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





































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

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

  /* longfocustage */
  @media screen {
    .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.5em;
    }

    .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 {
      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-top: 0.17em;
      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;
    }
  }

  /* aiImage */
  @media screen {
    .cbcn-fullfocusportrait-section {
      padding: 4em 1em;
    }
  }

  /* aiImage */
  @media screen {
    .cbcn-aistudio-txt-h1 {}

    .cbcn-aistudio-txt-sh {
      text-align: left !important;
      padding-bottom: 0.5em;
    }

    .cbcn-aistudio-txt1 {
      padding-top: 3.71em;
      padding-bottom: 2.5em;
      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;
      height: 2em;
      object-fit: cover;
    object-position: center;
    display: block;
    }

    .cbcn-aiImage-content {
      height: 6.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;
    }
  }

  /* 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 {
      padding-bottom: 2em;
    }

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

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

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

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

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

  /* aioffice */
  @media screen {
    .cbcn-aioffice-section {
      padding: 5em 0;
    }

    .cbcn-aioffice-section.wt {
      background: #EBEBEB;
    }

    .cbcn-aioffice-title {
      text-align: center;
    }

    .cbcn-aioffice-p1 {
      text-align: center;
      font-family: "vivo Sans Global";
      font-size: 2.5568em;
      font-weight: 800;
    }

    .cbcn-aioffice-img {
      width: 1.85em;
      height: 1.85em;
      display: block;
    }

    .cbcn-aioffice-item {
      align-items: center;
      justify-content: center;
      gap: 0.5em;
      position: relative;
      width: fit-content;
      background-color: #fff;
      border-radius: 2.5em;
      padding: 0.25em;
      z-index: 10;
    }

    .cbcn-aioffice-item.active {
      background: #FFF;
    }

    .cbcn-aioffice-bg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cbcn-aioffice-txt {
      margin-top: 1.3em;
      justify-content: center;
      align-items: center;
      height: 15em;
      padding: 30% 0;
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
    }

    .cbcn-aioffice-txt::-webkit-scrollbar {
      display: none;
    }

    .cbcn-aioffice-itembg {
      position: relative;
      margin: 0.5em 0;
      transition: all 0.5s ease;
      opacity: 0.55;
      scroll-snap-align: center;
    }

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

    .cbcn-aioffice-itembg::after {
      transition: all 0.5s ease;
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: -0.25em;
      padding: 0.25em;
      margin: auto;
      backdrop-filter: blur(10px);
      border-radius: 2.5em;
      filter: blur(3px);
      background: transparent;
    }

    .cbcn-aioffice-margin {
      margin-top: 70%;
    }

    .cbcn-aioffice-itembg.active::after {
      background: linear-gradient(286deg, #F3A75D 4.13%, #EA89AB 34.65%, #BE85D5 50.31%, #60AEF9 73.46%);
    }

  }

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

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

    .cbcn-stylish-txt {
      position: absolute;
      top: 0em;
      width: 16.75em;
      opacity: 0;
      transition: all 0.3s ease;
    }

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

    .cbcn-stylish-box {
      margin-top: 1em;
      position: relative;
    }

    .cbcn-stylish-img {
      width: 100%;
      height: 19.1em;
      z-index: 10;
      margin-bottom: 1em;
      position: relative;
    }

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

    .cbcn-stylish-title {
      align-items: center;
    }

    .cbcn-stylish-switchBtn-list {
      justify-content: space-between !important;
      width: 100%;
      margin-top: 0em !important;
    }

    .cbcn-stylish-bg {
      width: 12.45em;
      height: 18.85em;
      background: #C1EBFA;
      border-radius: 18.85em;
      overflow: hidden;
      filter: blur(8.9em);
    }
  }

  /* layer-form */
  @media screen {
    .layer-form {
      width: 100%;
    }

    .form-wrap {
      margin-top: 1.75em;
      padding: 0.5em 1em 1.5em 1em;
      border-radius: 0.5em;
      background: #f4f4f4;
    }

    .input-group {
      width: 100%;
      padding: 1em 1em 1em 0;
      position: relative;
      border-bottom: 1px solid #b3b3b3;
    }

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

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

    .input-value {
      width: 9em;
    }

    .input-value input {
      border: none;
      background: transparent;
    }

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

    .check-status {
      position: absolute;
      right: 1em;
      top: 40%;
    }

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

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

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

    .tip-text {
      margin-top: 1em;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 1.25em;
    }

    .check-box {
      width: 1em;
      height: 1em;
      border-radius: 50%;
      background: transparent;
      border: 1px solid #b3b3b3;
      flex-shrink: 0;
      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-p {
      color: rgba(0, 0, 0, 0.35) !important;
    }

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

    .form-submit-btn {
      width: 12.5em;
      height: 2.25em;
      border-radius: 0.5em;
      background: #6E8ADD;
      margin: 1em auto 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .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 li {
      color: rgba(0, 0, 0, 0.60) !important;
    }

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