@media screen and (min-width: 981px) {
  /* kv */
  @media screen {
    .cbcn-kv-section {
      width: 100vw;
      height: calc(1080 / 1927.138 * 100vw);
    }
  }

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

    .cbcn-navigation-wrapper {
      width: 70.8em;
    }

    .cbcn-navigation-item {
      background: #fff;
      border-radius: 0.8em;
      overflow: hidden;
      position: relative;
      display: block;
    }

    .cbcn-navigation-item1 {
      width: 100%;
      height: 18em;
    }

    .cbcn-navigation-item2 {
      width: 34.5em;
      height: 25.75em;
    }

    .cbcn-navigation-item3,
    .cbcn-navigation-item4 {
      width: 35.4em;
      height: 12.4em;
    }

    .cbcn-navigation-item3 {
      background-color: #000;
    }

    .cbcn-navigation-item4 {
      margin-top: 1em;
    }

    .cbcn-navigation-itembox1 {
      width: 100%;
      margin-top: 1.25em;
      justify-content: space-between;
    }

    .cbcn-navigation-title {
      position: absolute;
      top: 1.25em;
      left: 1.25em;
      z-index: 9;
    }

    .cbcn-navigation-icon {
      position: absolute;
      bottom: 1.25em;
      left: 1.25em;
      z-index: 5;
    }

    .cbcn-navigation-itembox2 .cbcn-pc-h4 {
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-navigation-itembox2 .cbcn-pc-b2 {
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }

  /* appearance */
  @media screen {
    .cbcn-appearance-section.bk {
      background-color: #fff;
    }

    .cbcn-appearance-p1::after {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .cbcn-appearance-p1 p {
      position: relative;
      z-index: 2;
    }

    #cbcn-dom-container .cbcn-appearance-p2 {
      width: max-content;
      gap: 275px;
      text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    .cbcn-appearance-p2::after {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .cbcn-appearance-p2 p {
      position: relative;
      z-index: 2;
      margin-left: -25px;
    }
  }

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

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

    .cbcn-semblance-section.wt {
      background-color: #FAFAFA;
    }

    .cbcn-semblance-txt {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -6em;
      margin-left: 15em;
      align-items: center;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.00, 0.00, 0.58, 1.00);

    }

    .cbcn-semblance-section.active .cbcn-semblance-txt {
      margin-left: 3em;
      opacity: 1;
      transition-delay: 0.25s;
    }

    .cbcn-semblance-txt p:first-child {
      padding-top: 25px;
      font-weight: 300;
      margin-right: 20px;
    }

    .cbcn-semblance-txt .cbcn-pc-h1 {
      font-weight: 200;
    }

    .cbcn-semblance-txt p:last-child {
      padding-top: 4px;
    }

    .cbcn-semblance-img {
      width: 49em;
      height: 3.95em;
      display: block;
      opacity: 0;
      margin-top: 10em;
      transition: all 0.5s;
    }

    .cbcn-semblance-section.active .cbcn-semblance-img {
      margin-top: 0;
      opacity: 1;
    }
  }

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

    .cbcn-color-swiper {
      width: 1152px;
      margin-top: 42px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-color-txt1 {
      width: 100%;
      top: -40px;
      z-index: 99;
    }

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

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

    .cbcn-color-video {
      width: 1152px;
      height: 629px;
      overflow: hidden;
    }

    .cbcn-color-video video {
      width: 101% !important;
      height: 101% !important;
      position: relative;
      left: 1%;
      transform: translateX(-1%);
    }

    .cbcn-color-txt {
      gap: 0.5em;
    }

    .cbcn-color-btnListDiv {
      margin-top: 30px;
      width: max-content;
      background: rgba(0, 0, 0, 0.05) !important;
      border-radius: 999px;
      z-index: 99;
    }

    .cbcn-color-btnList {
      padding: 0.5em;
      align-items: center;
      gap: 0.6em;
      border-radius: 4.25em;
      background: rgba(255, 255, 255, 0.15);
    }

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

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

    .cbcn-color-circle {
      fill: none;
      stroke-width: 2.5px;
      stroke-dasharray: 125.6px;
      stroke-dashoffset: 125.6px;
    }

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

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

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

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

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

  /* design */
  @media screen {
    .cbcn-design-section.wt {
      background: var(--background-l2, #f2f2f2);
    }

    .cbcn-design-swiper {
      margin-top: 50px;
    }

    .cbcn-design-swiper-item {
      height: 600px;
      width: 980px;
      position: relative;
      border-radius: 24px;
      background: #fff;
      overflow: hidden;
    }

    .cbcn-design-img1 {
      display: block;
      width: 599px;
      height: 521px;
      position: absolute;
      bottom: -249px;
      right: 0px;
      z-index: 99;
      transition: all 1.5s;
    }

    .cbcn-design-swiper-item.active .cbcn-design-img1 {
      bottom: 0;
      right: 85px;
    }

    .cbcn-design-img2 {
      width: 516px;
      height: 536px;
      position: absolute;
      bottom: -270px;
      right: 81px;
      transition: all 1.5s;
    }

    .cbcn-design-swiper-item.active .cbcn-design-img2 {
      bottom: 0;
    }

    .cbcn-design-img3 {
      width: 918px;
      height: 253px;
      position: absolute;
      left: -500px;
      bottom: 158px;
      transition: all 1.5s;
    }

    .cbcn-design-swiper-item.active .cbcn-design-img3 {
      left: 0;
    }

    .cbcn-design-txt {
      position: absolute;
      top: 30px;
      left: 30px;
    }

    .cbcn-design-switchBtn-list {
      margin-top: 40px;
      justify-content: flex-end;
    }
  }

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

    .cbcn-threeproofings-section {
      position: relative;
    }

    .cbcn-threeproofings-swiper {
      width: 100%;
      margin-top: 50px;
      position: relative;
      z-index: 9;
    }

    .cbcn-threeproofings-img {
      display: block;
      width: 980px;
      height: 600px;
      border-radius: 20px;
      overflow: hidden;
    }

    .cbcn-threeproofings-txt {
      margin-top: 40px;
      width: 636px;
      opacity: 0;
      transition: all 0.3s;
    }

    .cbcn-threeproofings-switchBtn-list {
      position: absolute;
      bottom: 0;
      right: 0;
      justify-content: flex-end;
      z-index: 10;
    }

    .cbcn-threeproofings-swiper-item.swiper-slide-active .cbcn-threeproofings-txt {
      opacity: 1;
    }
  }

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

    .cbcn-glassscreen-param {
      padding-top: 15px;
      border-top: 1px solid rgba(0, 0, 0, 0.40);
      width: 205px;
      text-align: center;
      margin: 0 auto;
      margin-top: 60px;
    }

    .cbcn-glassscreen-img {
      margin-top: 0.8em;
      width: 58.35em;
      height: 35.4em;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  }

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

    .cbcn-hinge-title {
      width: 34.2em;
    }

    .cbcn-hinge-img {
      margin-top: 1.5em;
      width: 96em;
      height: 40.9em;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  }

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

    .cbcn-screen-safeRow {
      height: 100%;
      position: relative;
    }

    .cbcn-screen-title {
      left: 0;
      width: 465px;
      z-index: 9;
    }

    .cbcn-screen-img {
      width: 891.721px;
      height: 951px;
      left: 50%;
      margin-left: -147px;
    }

    .cbcn-screen-param {
      width: 558px;
      left: 50%;
      margin-left: 100vw;
      gap: 20px 46px;
      opacity: 0;
    }

    .cbcn-screen-param .cbcn-param {
      width: 252px;
    }

    .cbcn-screen-param .cbcn-param.full {
      width: 100%;
    }

    .cbcn-screen-icon {
      width: 463px;
      height: 77px;
    }
  }

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

    #cbcn-dom-container .cbcn-secondthin-section video {
      width: 101%;
      height: 101%;
    }
  }

  /* battery */
  @media screen {
    .cbcn-battery-section.bk {
      background: #000 !important;
    }

    .cbcn-battery-img {
      width: 1358px;
      height: 679px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 4em;
    }

    .cbcn-battery-param1 {
      width: 755px;
      top: 50%;
      margin-top: 230px;
      gap: 20px 120px;
      flex-wrap: wrap;
    }

    .cbcn-battery-param2 {
      width: 780px;
      top: 50%;
      margin-top: 230px;
      gap: 20px 120px;
      flex-wrap: wrap;
      opacity: 0;
      margin-left: 800px;
    }

    .cbcn-battery-param2 .cbcn-param:nth-of-type(3n+1) {
      width: 162px;
    }

    .cbcn-battery-param2 .cbcn-param:nth-of-type(3n+2) {
      width: 150px;
    }
  }

  /* endurance */
  /* @media screen {
    .cbcn-endurance-section.bk {
      background: #121212;
    }

    .cbcn-endurance-card {
      border-radius: 16px;
      background: #1F1F1F;
      width: 980px;
      height: 520px;
      padding: 30px 40px;
      position: relative;
      overflow: hidden;
    }

    .cbcn-endurance-img {
      width: 4.5em;
      height: 3.85em;
    }

    .cbcn-endurance-title {
      margin-top: 0.5em;
    }

    .cbcn-endurance-swiper {
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      margin-top: 100px;
    }

    .cbcn-endurance-icon {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .cbcn-endurance-card1 .cbcn-endurance-icon {
      width: 428px;
      height: 412px;
    }

    .cbcn-endurance-card2 .cbcn-endurance-icon {
      width: 430px;
      height: 430px;
    }

    .cbcn-endurance-switchBtn-list {
      margin-top: 60px;
      justify-content: flex-end;
    }
  } */

  /* lens */
  @media screen {
    .cbcn-lens-section.bk {
      background: #0D0D0D;
    }

    .cbcn-lens-img {
      width: 32.55em;
      height: 37.35em;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0em;
      margin-left: 14.6em;
    }

    .cbcn-lens-txt2 {
      width: 100%;
      gap: 40px;
      left: 0;
      position: absolute;
    }

    .cbcn-lens-param1 {
      width: 25.15em;
      position: absolute;
      left: -22.8em;
      top: 9.5em;
    }

    .cbcn-lens-line1 {
      width: 100%;
      height: 1px;
      background: #FFF;
    }

    .cbcn-lens-param1 .cbcn-lens-txt2 {
      top: -75px;
    }

    .cbcn-lens-param2 {
      width: 26.475em;
      height: 2.325em;
      position: absolute;
      left: -22.7em;
      top: 11em;
    }

    .cbcn-lens-param2 .cbcn-lens-txt2 {
      top: -135px;
    }

    .cbcn-lens-param3 {
      width: 32.05em;
      height: 3.05em;
      position: absolute;
      left: -22.7em;
      top: 9.5em;
    }

    .cbcn-lens-param3 .cbcn-lens-txt2 {
      bottom: -175px;
    }
  }

  /* longfocus */
  @media screen {
    .cbcn-longfocus-params {
      justify-content: center;
      margin-top: 50px;
      gap: 87px;
    }

    .cbcn-longfocus-param {
      min-width: 230px;
    }

    .cbcn-longfocus-txt1 .cbcn-longfocus-params .cbcn-longfocus-param {
      border-top: 1px solid #4D4D4D;
      padding-top: 15px;
    }

    .cbcn-longfocus-img {
      width: 100%;
      height: 47em;
      margin-top: -5.25em;
    }
  }

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

    .cbcn-portrait-safeRow {
      height: 100%;
    }

    .cbcn-portrait-imgBox {
      width: 100%;
      height: 30.9em;
      position: relative;
    }

    .cbcn-portrait-img {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: #000;
    }

    .cbcn-portrait-img img {
      opacity: 0.5;
    }

    .cbcn-portrait-title {
      width: 100%;
      z-index: 9;
    }

    .cbcn-portrait-title .cbcn-pc-h1,
    .cbcn-portrait-btn p {
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-portrait-title .cbcn-pc-sh {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .cbcn-portrait-btn {
      bottom: 1.5em;
      padding: 0.7em 1.5em;
      border-radius: 49.95em;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
    }

    .cbcn-portrait-txt {
      top: 50%;
      width: 66%;
      opacity: 0;
      margin-top: 10em;
    }
  }

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

    .cbcn-scenery-swiper {
      width: 7.325em;
      transition: all 0.3s;
      margin-top: 40px;
    }

    .cbcn-scenery-swiper .swiper-slide {
      overflow: hidden;
      transition: all 0.3s;
      border-radius: 20px;
      overflow: hidden;
    }

    .cbcn-scenery-swiper.active .swiper-slide-active {
      width: 647px !important;
    }

    .cbcn-scenery-swiper .swiper-slide .cbcn-scenery-desc {
      opacity: 0;
      transition: all 0.3s;
    }

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

    .cbcn-scenery-img {
      width: 100%;
      height: 510px;
    }


    .cbcn-scenery-btnListDiv {
      width: 100%;
    }

    .cbcn-scenery-list {
      margin-top: 35px;
      border-radius: 999px;
      background: var(--bottom-bg-l4, rgba(0, 0, 0, 0.05));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      width: fit-content;
      justify-content: center;
      padding: 6px;
      align-items: center;
    }

    .cbcn-scenery-btn-div {
      display: flex;
      padding: 8px 24px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .cbcn-scenery-btn-div.active {
      border-radius: 99px;
      background: var(--bottom-bg-l1, #000);
    }

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

    .cbcn-scenery-txtBox {
      position: relative;
      width: 100%;
      height: 30px;
      margin-top: 30px;
    }

    .cbcn-scenery-txt {
      transition: all 0.3s;
      opacity: 0;
    }

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


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

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

    .cbcn-live-txt {
      width: 444px;
      height: 100%;
    }

    .cbcn-live-video {
      width: 397px;
      height: 600px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }

    .cbcn-live-video video {
      position: relative;
      z-index: 9;
    }

    .cbcn-live-icon {
      position: absolute;
      width: 38px;
      height: 38px;
      top: 18px;
      left: 21px;
      z-index: 10;
    }
  }

  /* fold */
  @media screen {
    .cbcn-fold-section {
      height: 46.5em;
      width: 100vw;
      position: relative;
    }

    .cbcn-fold-img1 {
      width: 26.6em;
      height: 38.1em;
      position: absolute;
      /* bottom: 0;
      left: 4.25em; */
    }

    .cbcn-fold-img2 {
      width: 25em;
      height: 37.4em;
      position: absolute;
      /* bottom: 0;
      left: 34.05em; */
    }

    .cbcn-fold-txtBox {
      position: absolute;
      top: 10em;
      left: 60.45em;
    }

    .cbcn-fold-txt {
      width: 20em;
      height: 22em;
    }

    .cbcn-fold-txt>p {
      position: absolute;
    }

    .cbcn-fold-p1 {
      /* top: 0; */
      left: 0;
    }

    .cbcn-fold-p2 {
      /* top: 0; */
      right: 0;
    }

    .cbcn-fold-p3 {
      /* bottom: 0.35em; */
      left: 0;

    }

    .cbcn-fold-p4 {
      /* bottom: 0.35em; */
      right: 0;

    }

    .cbcn-fold-fn {
      margin-right: -0.4em;
      text-align: right;
    }
  }

  /* connection */
  @media screen {
    .cbcn-connection-img {
      width: 100%;
      height: 100vh;
    }

    .cbcn-connection-txt-div {
      width: 100%;
      margin-top: -200vh;
    }

    .cbcn-connection-txt-div::before {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.2);
      z-index: -1;
    }

  }

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

    .cbcn-ecology-rowCente {
      width: 1200px;
      height: 640px;
      border-radius: 20px;
      background: #fff;
      overflow: hidden;
      display: flex;
      margin: auto;
      align-items: center;
    }

    .cbcn-ecology-safe {
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      height: 100%;
      width: 100%;
    }

    .cbcn-ecology-drawer {
      width: 474px;
      height: 100%;
      padding-top: 85px;
      margin-left: 110px;
    }

    .cbcn-ecology-imgBox {
      height: 100%;
      width: 605px;
    }

    .cbcn-ecology-img {
      width: 100%;
      height: 100%;
    }

    .cbcn-ecology-drawer-itemBox {
      margin-top: 30px;
      width: 430px;
    }

    .cbcn-ecology-title {
      justify-content: space-between;
      align-items: center;
    }

    .cbcn-ecology-drawer-icon {
      width: 28px;
      height: 12px;
      transition: all 0.5s;
      transform: rotateX(180deg);
    }

    .cbcn-ecology-drawer-item.active .cbcn-ecology-drawer-icon {
      transform: rotate(0);
    }

    .cbcn-ecology-drawer-item {
      cursor: pointer;
      padding: 24px 0;
      border-bottom: 1px solid #ccc;
      opacity: 0.5;
      transition: all 0.3s;
    }

    .cbcn-ecology-drawer-item.active {
      opacity: 1;
    }

    .cbcn-ecology-drawer-item:nth-last-of-type(1) {
      border: none;
    }

    .cbcn-ecology-drawer-item .desc {
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      padding-right: 20px;
      height: 0;
    }

    .cbcn-ecology-drawer-item .desc p {
      padding-top: 24px;
    }

    .cbcn-ecology-drawer-item:first-child .desc {
      height: auto;
    }

    #cbcn-dom-container .cbcn-ecology-img:not(.cbcn-ecology-img2) img.cover:not(.active) {
      display: none;
    }

    .cbcn-ecology-img2 .cbcn-ecology-picture:not(.active) {
      display: none;
    }

    #cbcn-dom-container .cbcn-ecology-icon:not(.active) {
      display: none;
    }


    .cbcn-ecology-drawer-itemBox4 {
      width: 477px;
    }

    .cbcn-ecology-section {
      gap: 150px;
    }
  }



  /* medium */
  @media screen {
    .cbcn-medium-img {
      width: 100%;
      height: 100vh;
    }

    .cbcn-medium-txt-div {
      width: 100%;
      margin-top: -200vh;
    }

    .cbcn-medium-txt-div::before {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.2);
      z-index: -1;
    }
  }

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

    .cbcn-yieldcard-rowCente {
      width: 1200px;
      height: 640px;
      border-radius: 20px;
      background: #fff;
      display: flex;
      margin: auto;
      align-items: center;
    }

    .cbcn-yieldcard-safe {
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      height: 100%;
      width: 100%;
    }

    .cbcn-yieldcard-drawer {
      width: 474px;
      height: 100%;
      padding-top: 85px;
      margin-left: 110px;
    }

    .cbcn-yieldcard-imgBox {
      height: 100%;
      width: 605px;
      position: relative;
    }

    .cbcn-yieldcard-img {
      width: 100%;
      height: 100%;
    }

    .cbcn-yieldcard-drawer-itemBox {
      margin-top: 30px;
      width: 430px;
    }

    .cbcn-yieldcard-title {
      justify-content: space-between;
      align-items: center;
    }

    .cbcn-yieldcard-drawer-icon {
      width: 28px;
      height: 12px;
      transition: all 0.5s;
      transform: rotateX(180deg);
    }

    .cbcn-yieldcard-drawer-item.active .cbcn-yieldcard-drawer-icon {
      transform: rotate(0);
    }

    .cbcn-yieldcard-drawer-item {
      cursor: pointer;
      padding: 24px 0;
      border-bottom: 1px solid #ccc;
      opacity: 0.5;
      transition: all 0.3s;
    }

    .cbcn-yieldcard-drawer-item.active {
      opacity: 1;
    }

    .cbcn-yieldcard-drawer-item:nth-last-of-type(1) {
      border: none;
    }

    .cbcn-yieldcard-drawer-item .desc {
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      padding-right: 20px;
      height: 0;
    }

    .cbcn-yieldcard-drawer-item .desc p {
      padding-top: 24px;
    }

    .cbcn-yieldcard-drawer-item:first-child .desc {
      height: auto;
    }

    #cbcn-dom-container .cbcn-yieldcard-img img.cover:not(.active) {
      display: none;
    }

    #cbcn-dom-container .cbcn-yieldcard-icon:not(.active) {
      display: none;
    }

    .cbcn-yieldcard-imgBox {
      transform: translateX(-297px);
    }

    .cbcn-yieldcard-drawer {
      clip-path: inset(0% 100% 0% 0%);
      opacity: 0;
    }

    .cbcn-yieldcard-video {
      width: 100vw;
      height: 100vh;
      z-index: 20;
    }

    .cbcn-yieldcard-videodesc {
      position: absolute;
      left: 30px;
      bottom: 30px;
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cbcn-yieldcard-line {
      width: 6.25%;
      height: 1px;
      top: 0.55em;
      z-index: 9;
      background-color: #fff;
      opacity: 0;
    }

    .cbcn-yieldcard-imgTxt {
      position: absolute;
      top: 20px;
      left: 12px;
      background: #fff;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      opacity: 0;
    }

    .cbcn-yieldcard-imgTxt .cbcn-pc-sh {
      font-size: 22px;
    }

    .cbcn-yieldcard-imgTxt .cbcn-pc-b3 {
      font-size: 13px;
    }

    .cbcn-yieldcard-section.active .cbcn-yieldcard-video {
      overflow: hidden;
    }
  }


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

    .cbcn-mediumcard-rowCente {
      width: 1200px;
      height: 640px;
      border-radius: 20px;
      background: #fff;
      overflow: hidden;
      display: flex;
      margin: auto;
      align-items: center;
    }

    .cbcn-mediumcard-safe {
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      height: 100%;
      width: 100%;
    }

    .cbcn-mediumcard-drawer {
      width: 474px;
      height: 100%;
      padding-top: 85px;
      margin-left: 110px;
    }

    .cbcn-mediumcard-imgBox {
      height: 100%;
      width: 605px;
    }

    .cbcn-mediumcard-img {
      width: 100%;
      height: 100%;
    }

    .cbcn-mediumcard-drawer-itemBox {
      margin-top: 30px;
      width: 430px;
    }

    .cbcn-mediumcard-title {
      justify-content: space-between;
      align-items: center;
    }

    .cbcn-mediumcard-drawer-icon {
      width: 28px;
      height: 12px;
      transition: all 0.5s;
      transform: rotateX(180deg);
    }

    .cbcn-mediumcard-drawer-item.active .cbcn-mediumcard-drawer-icon {
      transform: rotate(0);
    }

    .cbcn-mediumcard-drawer-item {
      cursor: pointer;
      padding: 24px 0;
      border-bottom: 1px solid #ccc;
      opacity: 0.5;
      transition: all 0.3s;
    }

    .cbcn-mediumcard-drawer-item.active {
      opacity: 1;
    }

    .cbcn-mediumcard-drawer-item:nth-last-of-type(1) {
      border: none;
    }

    .cbcn-mediumcard-drawer-item .desc {
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      padding-right: 20px;
      height: 0;
    }

    .cbcn-mediumcard-drawer-item .desc p {
      padding-top: 24px;
    }

    .cbcn-mediumcard-drawer-item:first-child .desc {
      height: auto;
    }

    .cbcn-mediumcard-img .cbcn-mediumcard-picture:not(.active) {
      display: none;
    }

    #cbcn-dom-container .cbcn-mediumcard-icon:not(.active) {
      display: none;
    }
  }

  /* ai */
  @media screen {
    .cbcn-ai-img {
      width: 100%;
      height: 100vh;
    }

    .cbcn-ai-txt-div {
      width: 100%;
      margin-top: -200vh;
    }

    .cbcn-ai-txt-div::before {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.2);
      z-index: -1;
    }
  }

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

    .cbcn-aicard-rowCente {
      width: 1200px;
      height: 640px;
      border-radius: 20px;
      background: #fff;
      overflow: hidden;
      display: flex;
      margin: auto;
      align-items: center;
    }

    .cbcn-aicard-safe {
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      height: 100%;
      width: 100%;
    }

    .cbcn-aicard-drawer {
      width: 474px;
      height: 100%;
      padding-top: 85px;
      margin-left: 110px;
    }

    .cbcn-aicard-imgBox {
      height: 100%;
      width: 605px;
    }

    .cbcn-aicard-img {
      width: 100%;
      height: 100%;
    }

    .cbcn-aicard-drawer-itemBox {
      margin-top: 30px;
      width: 430px;
    }

    .cbcn-aicard-title {
      justify-content: space-between;
      align-items: center;
    }

    .cbcn-aicard-drawer-icon {
      width: 28px;
      height: 12px;
      transition: all 0.5s;
      transform: rotateX(180deg);
    }

    .cbcn-aicard-drawer-item.active .cbcn-aicard-drawer-icon {
      transform: rotate(0);
    }

    .cbcn-aicard-drawer-item {
      cursor: pointer;
      padding: 24px 0;
      border-bottom: 1px solid #ccc;
      opacity: 0.5;
      transition: all 0.3s;
    }

    .cbcn-aicard-drawer-item.active {
      opacity: 1;
    }

    .cbcn-aicard-drawer-item:nth-last-of-type(1) {
      border: none;
    }

    .cbcn-aicard-drawer-item .desc {
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      padding-right: 20px;
      height: 0;
    }

    .cbcn-aicard-drawer-item .desc p {
      padding-top: 24px;
    }

    .cbcn-aicard-drawer-item:first-child .desc {
      height: auto;
    }

    .cbcn-aicard-img .cbcn-aicard-picture:not(.active) {
      display: none;
    }

    #cbcn-dom-container .cbcn-aicard-icon:not(.active) {
      display: none;
    }
  }


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

    .cbcn-signal-section.wt {
      background: #FAFAFA;
    }

    .cbcn-signal-bgBox {
      height: 46.5em;
      width: 100vw;
      position: relative;
      z-index: 10;
      overflow: hidden;
    }

    .cbcn-signal-bgBox div {
      opacity: 0;
    }


    .cbcn-signal-bg1 {
      width: 41.95em;
      bottom: -1.5em;
      z-index: 15;
    }

    .cbcn-signal-bg2 {
      width: 59.5em;
      bottom: -16em;
      z-index: 14;
    }

    .cbcn-signal-bg3 {
      width: 90.75em;
      bottom: -46em;
      z-index: 13;
    }

    .cbcn-signal-bg4 {
      width: 127.85em;
      bottom: -82em;
      z-index: 12;
    }

    .cbcn-signal-img1 {
      width: 21.9687em;
      height: auto;
      /* bottom: 0em; */
      z-index: 11;
      margin-left: -2em;
    }

    .cbcn-signal-img2 {
      width: 21.9687em;
      height: auto;
      /* bottom: 0em; */
      z-index: 11;
      margin-left: 3em;
    }

    .cbcn-signal-title {
      z-index: 10;
      width: 100%;
      opacity: 0;
    }

    .cbcn-signal-txt {
      gap: 26em;
      justify-content: center;
    }

    .cbcn-signal-txt>div {
      position: relative;
    }

    .cbcn-signal-fn {
      position: absolute;
      right: 0;
    }
  }

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

    .cbcn-signalcard-swiper {
      margin-top: 50px;
      position: relative;
    }

    .cbcn-signalcard-swiper .swiper-wrapper {
      position: relative;
      z-index: 10;
    }

    .cbcn-signalcard-img {
      height: 460px;
      width: 100%;
      border-radius: 24px;
      overflow: hidden;
    }

    .cbcn-signalcard-desc {
      margin-top: 20px;
      width: 750px;
    }

    .cbcn-signalcard-list {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 11;
    }

    .cbcn-signalcard-slide {
      opacity: 0.3;
      transition: all 0.3s ease;
    }

    .cbcn-signalcard-desc {
      opacity: 0;
      transition: all 0.3s;
    }

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

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

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

    .cbcn-learnmore-imgbox {
      width: 100%;
      height: 16em;
      display: block;
    }

    .cbcn-learnmore-box {
      margin-top: 80px;
      margin-bottom: 80px;
      height: auto;
    }

    .cbcn-learnmore-box>.swiper-wrapper {
      justify-content: space-between;
    }

    .cbcn-learnmore-img {
      width: 160px;
      height: 160px;
    }

    .cbcn-learnmore-slide {
      border-radius: 12px;
      background: #FFF;
      width: 316px;
      gap: 60px;
      padding-top: 45px;
      padding-bottom: 50px;
      align-items: center;
    }
  }

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

    .cbcn-technology-div {
      margin-top: 80px;
      margin-bottom: 80px;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
    }

    .cbcn-technology-box {
      width: 480px;
      height: 230px;
      padding: 0px 30px 0px 20px;
      justify-content: space-between;
      align-items: center;
      border-radius: 12px;
      background: #FFF;
    }

    .cbcn-technology-img {
      width: 140px;
      height: 140px;
    }

    .cbcn-technology-desc {
      width: 240px;
    }

    .cbcn-technology-img-a {
      width: 100%;
      height: 320px;
      display: block;
      border-radius: 24px;
      overflow: hidden;
      cursor: pointer;
    }
  } */

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

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

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


@media screen and (max-width: 1600px) and (min-width: 981px) {
  /* battery */
  @media screen {
    .cbcn-battery-img {
      margin-top: 85px;
      width: 1000px !important;
      height: 438.7755px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-battery-param1,
    .cbcn-battery-param2 {
      margin-top: 120px;
    }
  }

  /* portrait */
  @media screen {
    .cbcn-portrait-imgBox {
      width: 80%;
      height: 24.72em;
    }

    .cbcn-portrait-txt {
      top: 38%;
    }
  }
}

@media screen and (max-width: 1439px) and (min-width: 981px) {
  /* navigation */
  @media screen {
    .cbcn-navigation-wrapper {
      width: 49em;
    }

    .cbcn-navigation-item2 {
      width: 18em;
      height: 25.75em;
    }

    .cbcn-navigation-item3,
    .cbcn-navigation-item4 {
      width: 30em;
      height: 12.4em;
    }

    .cbcn-navigation-item3 picture {
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: 110%;
      height: 100%;
    }

    .cbcn-navigation-section .cbcn-pc-h4 {
      font-size: 32px !important;
    }
  }

  /* color */
  @media screen {}

  /* screen */
  @media screen {
    .cbcn-screen-img {
      width: 800px;
      height: 853.18165px;
    }

    .cbcn-screen-param {
      gap: 15px 40px;
    }

    .cbcn-screen-param .cbcn-pc-d2 {
      font-size: 36px;
    }

    .cbcn-screen-param .cbcn-pc-b1 {
      font-size: 18px;
    }
  }

  /* lens */
  @media screen {
    .cbcn-lens-section .cbcn-pc-h2 {
      font-size: 3.5em !important;
    }

    .cbcn-lens-param2 .cbcn-lens-txt2 {
      top: -10em;
    }
  }


  /* 卡片 */
  .cbcn-yieldcard-rowCente,
  .cbcn-mediumcard-rowCente,
  .cbcn-aicard-rowCente,
  .cbcn-ecology-rowCente {
    width: 980px;
    height: 560px;
  }


  .cbcn-yieldcard-drawer,
  .cbcn-mediumcard-drawer,
  .cbcn-aicard-drawer,
  .cbcn-ecology-drawer {
    margin-left: 20px;
    padding-top: 40px;
    width: 600px;
  }

  .cbcn-yieldcard-section.active .cbcn-yieldcard-video {
    width: 323px;
    height: 193px;
  }
}