@media screen and (min-width: 981px) {
  .cbcn-wtbg-shadow {
    bottom: 1.9em;
    width: 70.15em;
    height: 2.75em;
    filter: blur(10px);
  }
  /* kv */
  @media screen {
    .cbcn-kv-section {
      width: 100%;
      height: 54em;
      min-height: 100vh;
    }

    .cbcn-kv-btnbox {
      display: inline-flex;
      padding: 8px 8px 8px 8px;
      position: absolute;
      left: 50%;
      border-radius: 49.95em;
      transform: translateX(-50%);
      height: 48px;
      bottom: 7em;
      z-index: 9;
      justify-content: center;
      color: rgba(0, 0, 0, 0.30);
    }

    .cbcn-kv-btnbox.active {
      position: fixed;
    }

    .cbcn-kv-btn {
      padding: 8px 8px 8px 20px;
      border-radius: 49.95em;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      gap: 12px;
    }

    .cbcn-kv-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: 999px;
      background: var(--component-control-more-button-background, rgba(255, 255, 255, 0.31));
      box-shadow: -0.5px -0.5px 3px 0 #FFF inset, 0.5px 0.5px 1px 0 #FFF inset, -1px -1px 3px 0 rgba(205, 205, 205, 0.25) inset, 1px 1px 3px 0 rgba(145, 145, 145, 0.25) inset, 2px 2px 6px 0 rgba(225, 225, 225, 0.25);
      backdrop-filter: blur(calc( 30px / 2));
    }

    .cbcn-kv-btn p {
      color: #fff !important;
    }
    .cbcn-kv-qrcode {
      pointer-events: none;
      opacity: 0;
      bottom: 60px;
      z-index: 9;
      justify-content: center;
      width: 140px;
      height: 140px;
      border-radius: 15px;
      overflow: hidden;
    }
    .cbcn-kv-btnbox:hover .cbcn-kv-qrcode {
      opacity: 1;
      transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),padding 0.4s 0.2s; ;
    }
    .cbcn-kv-btnbox:hover .cbcn-kv-open {
      animation: spin 1s ;
    }
    .cbcn-kv-open {
      display: block;
      width: 32px;
      height: 32px;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  }

  /* navigation */
  @media screen {
    .cbcn-navigation-section.wt {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 70.43%, rgba(255, 255, 255, 0.10) 82.26%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 90.22%, rgba(0, 0, 0, 0.30) 113.06%), var(--background-l1, #FFF);
    }
    .cbcn-navigation-safeRow {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
    }

    .cbcn-navigation-skew {
      padding-bottom: 10.5em;
      transition: all 0.5s;
    }

    .cbcn-navigation-swiper {
      width: 70.5em;
      height: 30em;
      border-radius: 1.2em;
      overflow: hidden;
      margin-left: auto;
      margin-right: auto;
    }

    .cbcn-navigation-slideBox {
      width: 100%;
      height: 100%;
      border-radius: 1.2em;
      overflow: hidden;
      position: relative;
    }

    .cbcn-navigation-txt {
      position: absolute;
      left: 2em;
      top: 2em;
    }

    .cbcn-navigation-btnList {
      position: fixed;
      left: 0%;
      right: 0%;
      bottom: -12vh;
      z-index: 100;
      margin: auto;
      width: 20px;

      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.6em;
      cursor: pointer;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.2, 0.75, 0.3, 1.3), width 0.3s ease-in-out;
    }
    .cbcn-navigation-btnList > * {
        flex-shrink: 0;
    }
    .cbcn-navigation-btnList.active{
      width: fit-content;
      opacity: 1;
      bottom: 20px;
      transition-delay: 0.3s;
    }


    .cbcn-navigation-btnBox {
      width: fit-content!important;
      height: 2.1em;
      padding: 0 0.875em;
      align-items: center;
      gap: 0.47em;
      border-radius: 2.1em;
      background: linear-gradient(99deg, rgba(255, 255, 255, 0.64) -10.84%, rgba(226, 226, 226, 0.32) 53.6%, rgba(231, 231, 231, 0.64) 112.76%);
      box-shadow: 2px 2px 6px 0 rgba(225, 225, 225, 0.25), -0.5px -0.5px 3px 0 #FFF inset, 0.5px 0.5px 1px 0 #FFF inset, -1px -1px 3px 0 rgba(205, 205, 205, 0.25) inset, 1px 1px 3px 0 rgba(145, 145, 145, 0.25) inset;
      backdrop-filter: blur(10px);
    }
    .cbcn-navigation-btn {
      position: relative;
      width: 0.35em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(155deg, #E3E3E3 17.66%, #606060 94.73%);
      transition: all 0.3s ease-in;
    }
    .cbcn-navigation-btn.active {
      width: 3.15em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(182, 182, 182, 0.30) 100%);
    }
    .cbcn-navigation-btn.active .cbcn-navigation-btn-progress {
      opacity: 1;
      width: 100%;
      transition: all 3s linear;
    }
    .cbcn-navigation-btn-progress {
      opacity: 0;
      width: 0;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(155deg, #E3E3E3 17.66%, #606060 94.73%);
    }
    .cbcn-navigation-refresh {
      width: 2.1em;
      height: 2.1em;
      flex-shrink: 0;
    }
    .cbcn-navigation-refresh.active {
      animation: navigationPlay 0.5s forwards;
    }
    @keyframes navigationPlay {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .cbcn-navigation-mouseBtn {
      position: absolute;
      left: var(--cursorX);
      top: var(--cursorY);
      opacity: 1;
      width: 5.15em;
      height: 5.15em;
      z-index: 99;
      border-radius: 50%;
      overflow: hidden;
    }

    .cbcn-navigation-section.cursornone .cbcn-navigation-mouseBtn,
    .cbcn-navigation-section.leave .cbcn-navigation-mouseBtn {
      visibility: hidden;
    }
    .cbcn-navigation-mouseBtn.left {
      transform: rotate(180deg);
    }
    .cbcn-navigation-mouseBtn svg {
      width: 100%;
      height: 100%;
    }
    .cbcn-navigation-mouseicon {
      width: 0.925em;
      height: 1.85em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-25%, -45%);
      z-index: 9;
    }
    /* 没有分封这个颜色进common中 */
    .cbcn-navigation-grey {
      color: rgba(255, 255, 255, 0.65) !important;
    }
  }

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

    .cbcn-appearance-p::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-p p {
      position: relative;
      z-index: 2;
    }
  }

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

  /* lightdesign2 */
  @media screen {
    .cbcn-lightdesign2-title {
      opacity: 1;
      transition: all 0.3s;
    }
    .cbcn-lightdesign2-title.active {
      opacity: 0;
      transition-delay: 3s;
    }
    .cbcn-lightdesign2-title::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-lightdesign2-title p {
      position: relative;
      z-index: 2;
    }
  }

  /* lightdesign */
  @media screen {
    .cbcn-lightdesign-section::after{
      content: "";
      width: 106.2%;
      height: 118%;
      position: absolute;
      top: -4.65%;
      left: -2%;
      z-index: 1;
      background: linear-gradient(180deg, #F2F2F2 8.73%, #FFF 60.64%, rgba(255, 255, 255, 0.00) 79.09%), radial-gradient(125.6% 30.55% at 50% 71.36%, #F2F2F2 0%, #D2D2D2 100%);
    }
    .cbcn-lightdesign-content {
      height: 100%;
      position: relative;
      z-index: 9;
      justify-content: center;
      align-items: center;
      gap: 0em;
      transition: all 0.5s ease-out;
    }
    .cbcn-lightdesign-section.active .cbcn-lightdesign-content {
      gap: 38.6em;
    }
    .cbcn-lightdesign-section.disable .cbcn-lightdesign-content {
      transition: none;
      gap: 0em;
    }

    .cbcn-lightdesign-img {
      width: 38.6em;
      height: 27.25em;
      position: absolute;
      left: 50%;
      top: 100%;
      margin-left: -22em;
      margin-top: -13.625em;
    }
    .cbcn-lightdesign-section.active .cbcn-lightdesign-img {
      animation: lightdesigning 0.5s ease-out forwards;
    }
    @keyframes lightdesigning {
      0% {
        top: 100%
      }
      100% {
        top: 50%;
      }
    }

    .cbcn-lightdesign-txt1 {
      margin-right: 3.14em;
    }
    .cbcn-lightdesign-txt2 {
      margin-left: 5.8em;
    }
    
    .cbcn-lightdesign-shadow {
      position: absolute;
      left: 0;
      bottom: -6.45em;
      width: 34.3em;
      height: 2.15em;
      filter: blur(10px);
    }
  }

  /* design */
  @media screen {
    .cbcn-design-section {
      position: relative;
    }
    
    .cbcn-design-content{
      width: 100%;
      height: 46.5em;
      position: relative;
    }
    .cbcn-design-titlebox {
      top: 2.5em;
      z-index: 2;
      width: 49em;
      height: 4.2em;
      border-radius: 1.2em;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.30);
      box-shadow: inset -0.5px -0.5px 2px 1px rgba(255, 255, 255, 0.50), inset 0.5px 0.5px 2px 0 rgba(255, 255, 255, 0.50), inset 1px 2px 8px 1px rgba(190, 190, 190, 0.25), 2px 18px 40px 0 rgba(215, 215, 215, 0.25);
    }
    .cbcn-design-title {
      width: 100%;
      height: 100%;
      padding: 1em 1.5em;
      justify-content: space-between;
      align-items: center;

      -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      mask-size: 250% 100%;
      mask-position: 100% 50%;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .cbcn-design-title.active {
      opacity: 1;
      animation: designMask 0.5s ease-out forwards;
    }
    @keyframes designMask {
      0% { mask-position: 100% 50%; }
      100% { mask-position: 0% 50%; }
    }
    
    .cbcn-design-changebtn{
      position: absolute;
      left: 50%;
      top: 9.3em;
      z-index: 100;
      width: fit-content;
      height: fit-content;
      display: inline-flex;
      padding: 0.2em;
      align-items: center;
      flex-shrink: 0;
      opacity: 0;
      transform: translateX(-50%) scale(0);
      transition: all 0.3s;
      border-radius: 49.95em;
      overflow: hidden;
      box-shadow: -0.5px -0.5px 2px 0 rgba(255, 255, 255, 0.50) inset, 0.5px 0.5px 2px 0 rgba(255, 255, 255, 0.50) inset, 1px 2px 5px 0 rgba(190, 190, 190, 0.25) inset, 2px 18px 20px 0 rgba(215, 215, 215, 0.25);
    }
    .cbcn-design-changebtn.active {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
    .cbcn-design-btn-change{
      display: flex;
      padding: 0.4em 1.2em;
      justify-content: center;
      align-items: center;
      gap: 0.5em;
      border-radius: 4.95em;
      cursor: pointer;
    }
    .cbcn-design-btn-change p{
      position: relative;
      z-index: 2;
      transition: all 0.2s;
      color: rgba(0, 0, 0, 0.30) !important;
    }

    .cbcn-design-btn-change:nth-child(1)::after{
      z-index: 1;
      transition: all 0.2s;
      content: '';
      position: absolute;
      width: calc(50% - 0.2em);
      height: calc(100% - 0.4em);
      left: 50%;
      justify-content: center;
      align-items: center;
      border-radius: 4.95em;
      background: linear-gradient(0deg, #171616 -2.56%, #454545 56.41%);
    }
    .cbcn-design-btn-change:nth-child(1).active::after{
      left: 0.2em;
    }
    .cbcn-design-btn-change.active p{
      color: rgba(255, 255, 255, 0.95) !important;
    }
    .cbcn-design-rttitle{
      display: flex;
      width: 24em;
      justify-content: flex-end;
      align-items: center;
      gap: 0.5em;
      flex-shrink: 0;

    }
    .cbcn-design-img1{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 1;
    }

    /* 导航按钮 */
    .cbcn-design-btnList {
      position: fixed;
      left: 50%;
      bottom: 20px;
      z-index: 100;
      margin-top: 2.5em;
      width: 20px;

      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.6em;
      cursor: pointer;
      opacity: 0;
      transform: translate(-50%, 10vh);
      transition: all 0.5s cubic-bezier(0.2, 0.75, 0.3, 1.3), width 0.3s ease-in-out;
    }
    .cbcn-design-btnList > * {
        flex-shrink: 0;
    }
    .cbcn-design-btnList.active{
      width: fit-content;
        opacity: 1;
      transform: translate(-50%, 0);
    }


    .cbcn-design-btnBox {
      width: fit-content!important;
      height: 2.1em;
      padding: 0 0.875em;
      align-items: center;
      gap: 0.47em;
      border-radius: 2.1em;
      background: linear-gradient(99deg, rgba(255, 255, 255, 0.64) -10.84%, rgba(226, 226, 226, 0.32) 53.6%, rgba(231, 231, 231, 0.64) 112.76%);
      box-shadow: 2px 2px 6px 0 rgba(225, 225, 225, 0.25), -0.5px -0.5px 3px 0 #FFF inset, 0.5px 0.5px 1px 0 #FFF inset, -1px -1px 3px 0 rgba(205, 205, 205, 0.25) inset, 1px 1px 3px 0 rgba(145, 145, 145, 0.25) inset;
      backdrop-filter: blur(10px);
    }
    .cbcn-design-btn {
      position: relative;
      width: 0.35em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(155deg, #E3E3E3 17.66%, #606060 94.73%);
      transition: all 0.3s ease-in;
    }
    .cbcn-design-btn.active {
      width: 3.15em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(182, 182, 182, 0.30) 100%);
    }
    .cbcn-design-btn.active .cbcn-design-btn-progress {
      opacity: 1;
      width: 100%;
      transition: all 5s linear;
    }
    .cbcn-design-btn2.active .cbcn-design-btn-progress {
      transition-duration: 10s;
    }
    .cbcn-design-btn-progress {
      opacity: 0;
      width: 0;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(155deg, #E3E3E3 17.66%, #606060 94.73%);
    }
    .cbcn-design-refresh {
      width: 2.1em;
      height: 2.1em;
      flex-shrink: 0;
    }
    .cbcn-design-refresh.active {
      animation: designPlay 0.5s forwards;
    }
    @keyframes designPlay {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }


    .cbcn-design-mouseBtn {
      position: absolute;
      left: var(--cursorX);
      top: var(--cursorY);
      opacity: 1;
      width: 5.15em;
      height: 5.15em;
      z-index: 99;
      border-radius: 50%;
      overflow: hidden;
    }

    .cbcn-design-section.cursornone .cbcn-design-mouseBtn,
    .cbcn-design-section.leave .cbcn-design-mouseBtn {
      visibility: hidden;
    }
    .cbcn-design-mouseBtn.left {
      transform: rotate(180deg);
    }
    .cbcn-design-mouseBtn svg {
      width: 100%;
      height: 100%;
    }
    .cbcn-design-mouseicon {
      width: 0.925em;
      height: 1.85em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-25%, -45%);
      z-index: 9;
    }
  }

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

  /* immersiveav */
  @media screen {
    .cbcn-immersiveav-content {
      position: relative;
      padding-bottom: 150px;
      z-index: 9;
    }

    .cbcn-immersiveav-title {
      top: 50vh;
      width: 40.7em;
      text-align: center;
      z-index: 9;
    }

    .cbcn-immersiveav-title p {
      position: relative;
      z-index: 9;
      text-align: center;
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-immersiveav-title::after {
      content: "";
      width: 200vw;
      min-height: 2000px;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    .cbcn-immersiveav-section.active .cbcn-immersiveav-title::after {
      width: 0;
      height: 0;
      transition: all 0.01s 1s ease-out;
    }

    .cbcn-immersiveav-videoDiv {
      width: 100%;
      height: 1200px;
      min-height: 100vh;
    }

    .cbcn-immersiveav-video {
      width: 63.5em;
      height: 27em;
      position: relative;
      top: 0;
      left: 50%;
      margin-left: -31.75em;
    }
    .cbcn-immersiveav-section.active .cbcn-immersiveav-video {
      transition: transform 0.3s;
    }

    .cbcn-immersiveav-video video {
      transform-origin: 50% 0%;
      border-radius: 0px;
    }

    /* .cbcn-immersiveav-video .shine {
      border-radius: 24px;
      overflow: hidden;
    } */

    .cbcn-immersiveav-txt {
      margin: 50px auto 0;
      width: 43.15em;
      text-align: center;
    }
  }

  /* giantscreen */
  @media screen {
    .cbcn-giantscreen-content {
      position: relative;
      padding-bottom: 240px;
      z-index: 9;
    }

    .cbcn-giantscreen-title {
      top: 50vh;
      width: 40.7em;
      text-align: center;
      z-index: 9;
    }
    .cbcn-giantscreen-section.active .cbcn-giantscreen-title {
      z-index: -1;
    }
    

    .cbcn-giantscreen-title p {
      position: relative;
      z-index: 9;
      text-align: center;
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-giantscreen-title::after {
      content: "";
      width: 200vw;
      min-height: 2000px;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    .cbcn-giantscreen-section.active .cbcn-giantscreen-title::after {
      width: 0;
      height: 0;
      transition: all 0.01s 1s ease-out;
    }

    .cbcn-giantscreen-videoDiv {
      width: 63.5em;
      height: 100vh;
      min-height: 1200px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    .cbcn-giantscreen-videoBox {
      width: 63.5em;
      height: 27em;
      position: relative;
    }

    .cbcn-giantscreen-video {
      width: 100%;
      height: 100%;
      position: relative;
      transform-origin: 50% 0%;
      border-radius: 0px;
      overflow: hidden;
    }
    .cbcn-giantscreen-section.active .cbcn-giantscreen-video {
      transition: transform 0.3s;
    }

    /* .cbcn-giantscreen-video .shine {
      border-radius: 24px;
      overflow: hidden;
    } */

    .cbcn-giantscreen-txt {
      bottom: 6em;
      width: 49em;
    }

    .cbcn-giantscreen-btn {
      z-index: 10;
      bottom: 1.5em;
      padding: 0.45em 2em;
      border-radius: 49.95em;
      background: rgba(255, 255, 255, 0.20);
      box-shadow: 2px 2px 20px 0 rgba(194, 194, 194, 0.25), -0.2px -0.2px 2px 0 rgba(255, 255, 255, 0.30) inset, 0.2px 0.2px 2px 0 rgba(255, 255, 255, 0.30) inset, -1px -1px 3px 0 rgba(205, 205, 205, 0.25) inset, 1px 1px 2px 0 rgba(190, 190, 190, 0.25) inset;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      margin-top: 10em;
      transition: all 0.3s ease-out;
    }
    .cbcn-giantscreen-btn p {
      color: rgba(255, 255, 255, 0.95)!important;
    }
    .cbcn-giantscreen-section.active .cbcn-giantscreen-btn{
      margin-top: 0em;
    }
    .cbcn-giantscreen-videoDiv.active .cbcn-giantscreen-morebtn {
      display: none;
    }
    .cbcn-giantscreen-section:not(.active) .cbcn-giantscreen-morebtn {
      opacity: 0;
    }

    .cbcn-giantscreen-box {
      width: 63.5em;
      height: 27em;
      bottom: 0;
      border-radius: 24px;
      overflow: hidden;
      gap: 9.7em;
      padding-top: 8.95em;
      justify-content: center;
      box-shadow: none;
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    .cbcn-giantscreen-box::before{
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      background: rgba(0, 0, 0, 0.3);
      border-radius: 24px;
      overflow: hidden;
    }
    .cbcn-giantscreen-box::after{
      border-radius: 24px;
      overflow: hidden;
    }
    .cbcn-giantscreen-videoDiv.active .cbcn-giantscreen-box {
      opacity: 1;
    }
    .cbcn-giantscreen-param {
      gap: 1em;
      position: relative;
      z-index: 9;
    }
    .cbcn-giantscreen-icon {
      width: 4.95em;
      height: 4.2em;
    }
    .cbcn-giantscreen-txt2 {
      width: 13.45em;
    }
    .cbcn-giantscreen-txt2 p:first-child {
      color: rgba(255, 255, 255, 0.95)!important;
    }
    .cbcn-giantscreen-txt2 p:last-child {
      color: rgba(255, 255, 255, 0.5)!important;
    }
  }

  /* watchingmovies */
  @media screen {
    .cbcn-watchingmovies-content {
      position: relative;
      padding-bottom: 150px;
      z-index: 9;
    }

    .cbcn-watchingmovies-title {
      top: 50vh;
      width: 40.7em;
      text-align: center;
      z-index: 9;
    }

    .cbcn-watchingmovies-title p {
      position: relative;
      z-index: 9;
      text-align: center;
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-watchingmovies-title::after {
      content: "";
      width: 200vw;
      min-height: 2000px;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    .cbcn-watchingmovies-section.active .cbcn-watchingmovies-title::after {
      width: 0;
      height: 0;
      transition: all 0.01s 1s ease-out;
    }

    .cbcn-watchingmovies-videoDiv {
      width: 100%;
      height: 100vh;
      min-height: 1200px;
    }

    .cbcn-watchingmovies-video {
      width: 63.5em;
      height: 27em;
      position: relative;
      top: 0;
      left: 50%;
      margin-left: -31.75em;
    }
    .cbcn-watchingmovies-section.active .cbcn-watchingmovies-video {
      transition: transform 0.3s;
    }

    .cbcn-watchingmovies-video video {
      transform-origin: 50% 0%;
      border-radius: 0px;
    }

    /* .cbcn-watchingmovies-video .shine {
      border-radius: 24px;
      overflow: hidden;
    } */

    .cbcn-watchingmovies-txt {
      margin: 50px auto 0;
      width: 49em;
      text-align: center;
    }
  }

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

    .cbcn-morefun-content {}

    .cbcn-morefun-title {
      width: 65em;
    }

    .cbcn-morefun-itemBox {
      margin-top: 3em;
      gap: 1em;
      flex-wrap: nowrap;
    }

    .cbcn-morefun-item {
      position: relative;
      width: 21.1em;
      height: 31em;
      border-radius: 1.2em;
      overflow: hidden;
      transition: all 0.3s ease-out;
      --circle: 190px;
    }
    .cbcn-morefun-item:not(.active) > p {
      text-align: center;
    }

    .cbcn-morefun-item.active>.cbcn-morefun-openbtn {
      opacity: 0;
      z-index: 0;
    }

    .cbcn-morefun-item.active>.cbcn-morefun-item-desc {
      opacity: 1;
      right: 1em;
      align-items: center;
      transition: all .6s ease-out;
    }

    .cbcn-morefun-item.active {
      width: 48.95em;
    }

    .cbcn-morefun-item>.cbcn-pc-h5 {
      position: absolute;
      color: rgba(255, 255, 255, 0.95) !important;
      width: 100%;
      padding: 30px;
    }

    .cbcn-morefun-item-img {
      width: 100%;
      height: 31em;
    }
    #cbcn-dom-container .cbcn-morefun-item1 img.cover{
      object-position: 27% 50%;
    }
    #cbcn-dom-container .cbcn-morefun-item2 img.cover{
      object-position: 30% 50%;
    }
    #cbcn-dom-container .cbcn-morefun-item3 img.cover{
      object-position: 45% 50%;
    }

    .cbcn-morefun-openbtn {
      position: absolute;
      bottom: 1em;
      right: 1em;
      height: 2.8em;
      width: 2.8em;
      cursor: pointer;
      z-index: 2;
      border-radius: 50%;
      overflow: hidden;
    }
    .cbcn-morefun-openbtn::before {
      background: none;
    }
    .cbcn-morefun-openbtn::after {
      border-radius: 50%;
      overflow: hidden;
    }

    .cbcn-morefun-item-desc>p {
      color: rgba(255, 255, 255, 0.65) !important;
    }

    .cbcn-morefun-item-desc {
      position: absolute;
      right: -25em;
      bottom: 1em;
      width: 46em;
      min-height: 6.75em;
      padding: 1em 4.5em 1em 1.5em;
      border-radius: 0.8em;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(0, 0, 0, 0.20);
      box-shadow: 2px 18px 40px 0 rgba(215, 215, 215, 0.25), 1px 2px 5px 0 rgba(190, 190, 190, 0.25) inset;
      backdrop-filter: blur(5px);
      opacity: 0;
      z-index: 1;
    }
    .cbcn-morefun-playbox {
      position: absolute;
      right: 1em;
      bottom: 1em;
      width: 3.2em;
      height: 3.2em;
      justify-content: center;
      align-items: center;
    }
    .cbcn-morefun-playbox svg {
      width: 100%;
      height: 100%;
    }
    .cbcn-morefun-play {
      position: absolute;
      top: 0.4em;
      left: 0.4em;
      width: 2.4em;
      height: 2.4em;
      cursor: pointer;
    }
    .cbcn-morefun-play .cbcn-morefun-pause {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%; 
      height: 100%;
      opacity: 0;
    }
    .cbcn-morefun-play.active > img {
      opacity: 0;
    }
    .cbcn-morefun-play.active .cbcn-morefun-pause {
      opacity: 1;
    }

    .cbcn-morefun-circle {
      stroke: rgba(255, 255, 255, 0.4);
      fill: none;
      stroke-width: 3px;
      stroke-dasharray: 190px;
      stroke-dashoffset: var(--circle);
    }
    .cbcn-morefun-stop {
      position: absolute;
      right: 1em;
      bottom: 1em;
      width: 3.2em;
      height: 3.2em;
      justify-content: center;
      align-items: center;
      opacity: 0;
    }
  }

  /* stericimage */
  @media screen {
    .cbcn-stericimage-section.wt {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) -15.96%, rgba(255, 255, 255, 0.10) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 72.3%, rgba(0, 0, 0, 0.30) 113.06%), var(--background-l1, #FFF);
    }
    .cbcn-stericimage-safeRow {
      position: relative;
      z-index: 9;
      height: 100%;
    }
    .cbcn-stericimage-title {
      width: 564px;
      z-index: 9;
      text-align: center;
    }
    .cbcn-stericimage-txt {
      width: 27em;
      opacity: 0;
    }
    .cbcn-stericimage-txt p {
      position: relative;
      z-index: 9;
      text-align: center;
    }
    .cbcn-stericimage-txt .grey{
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .cbcn-stericimage-txt::after {
      content: "";
      width: 200vw;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    .cbcn-stericimage-imgBox {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-perspective: 60vw;
      -moz-perspective: 60vw;
      -o-perspective: 60vw;
      -ms-perspective: 60vw;
      perspective: 60vw;
      opacity: 0;
    }
    .cbcn-stericimage-img {
      position: absolute;
      top: calc(50% + 25px);
      left: 50%;
      width: 24.35em;
      height: 24.35em;
      border-radius: 1.2em;
      overflow: hidden;
    }

    .cbcn-stericimage-img1 {
      width: 6.025em;
      height: 6.025em;
      opacity: 0.25;
      transform: translateX(-2.41em) translateY(-3.03125em) rotateY(270deg);
    }

    .cbcn-stericimage-img2 {
      width: 2.425em;
      height: 2.425em;
      opacity: 0;
      transform: translateX(50%) translateY(-1.2125em) rotateY(90deg);
    }

    .cbcn-stericimage-img3 {
      width: 2.425em;
      height: 2.425em;
      opacity: 0;
      transform: translateX(-50%) translateY(-1.2125em) rotateY(270deg);
    }

    .cbcn-stericimage-img4 {
      width: 4.155em;
      height: 1.785em;
      opacity: 0;
      transform: translateX(50%) translateY(-0.8925em) rotateY(90deg);
    }
  }

  /* panoramic */
  @media screen {
    .cbcn-panoramic-section.bk{
      background: #fff;
      --maskImg: url("");
    }
    .cbcn-panoramic-video {
      width: 100%;
      height: 100%;
      background: #fff;
      -webkit-mask-image: var(--maskImg);
      mask-image: var(--maskImg);
      mask-size: 100%;
      mask-position: center center;
      mask-repeat: no-repeat;
      /* transition: all 1.5s; */
    }

    .cbcn-panoramic-section.active .cbcn-panoramic-video{
      mask-size: 200%;
    }

    .cbcn-panoramic-txt {
      width: 40.7em;
      align-items: center;
      text-align: center;
      margin-top: 6em;
      opacity: 0;
      z-index: 9;
    }

    .cbcn-panoramic-section.active .cbcn-panoramic-txt {
      opacity: 1;
      margin-top: 0;
      /* transition: all 0.75s; */
    }

    .cbcn-panoramic-txt .cbcn-title {
      position: relative;
      z-index: 9;
    }

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

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

  /* gameliving */
  @media screen {
    .cbcn-gameliving-swiper {
      width: 100%;
      height: 100%;
    }
    .cbcn-gameliving-wrapper {
      width: 100%;
      height: 100%;
      perspective: 3000px;
    }

    .cbcn-gameliving-box {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0%;
      top: 0%;
      z-index: 9;
      margin-left: 100vw;
    }

    .cbcn-gameliving-content {
      flex-wrap: nowrap;
      gap: 4.5em;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .cbcn-gameliving-name {
      width: 620px;
      flex-shrink: 0;
    }

    .cbcn-gameliving-video {
      width: 36.8em;
      height: 27.5em;
      position: relative;
    }
    .cbcn-gameliving-video video {
      border-radius: 1.2em;
      overflow: hidden;
    }

    .cbcn-gameliving-txt {
      padding: 2.5em;
      width: 28.15em;
      border-radius: 1.2em;
      background: rgba(255, 255, 255, 0.60);
      box-shadow: -0.5px -0.5px 2px 0 rgba(255, 255, 255, 0.50) inset, 0.5px 0.5px 2px 0 rgba(255, 255, 255, 0.50) inset, 1px 2px 5px 0 rgba(190, 190, 190, 0.25) inset, 2px 10px 20px 0 rgba(215, 215, 215, 0.15);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      position: absolute;
      left: -7em;
      top: 24em;
      z-index: 9;
    }
  }

  /* moreexperience */
  @media screen {
    .cbcn-moreexperience-section.wt {
      background: linear-gradient(179deg, rgba(0, 0, 0, 0.10) -15.96%, rgba(255, 255, 255, 0.10) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 72.3%, rgba(0, 0, 0, 0.30) 113.06%), var(--background-l1, #FFF);;
    }
    .cbcn-moreexperience-title {
      text-align: center;
    }


    .cbcn-moreexperience-swiper {
      margin: 3.5em auto 0;
      width: 49em;
      height: 31em;
      position: relative;
    }

    .cbcn-moreexperience-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: auto;
      height: 100%;
      flex-wrap: nowrap;
      gap: 1em;
      transition: all 0.3s;
    }

    .cbcn-moreexperience-wrapper.active {
      transform: translateX(-25em);
    }

    .cbcn-moreexperience-box {
      width: 24em;
      height: 31em;
      padding: 1.5em;
      border-radius: 1.2em;
      overflow: hidden;
      position: relative;
      transition: all 0.3s;
      --circle: 190px;
    }

    .cbcn-moreexperience-box.active {
      width: 49em;
    }

    .cbcn-moreexperience-box:not(.active) .cbcn-moreexperience-name {
      text-align: center;
    }
    .cbcn-moreexperience-box .cbcn-moreexperience-name {
      position: relative;
      z-index: 9;
    }

    .cbcn-moreexperience-video {
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    #cbcn-dom-container .cbcn-moreexperience-video1 img.cover{
      object-position: 48% 50%;
    }
    #cbcn-dom-container .cbcn-moreexperience-video2 img.cover{
      object-position: 82% 50%;
    }

    .cbcn-moreexperience-open {
      position: absolute;
      right: 1em;
      bottom: 1em;
      z-index: 2;
      width: 2.8em;
      height: 2.8em;
      border-radius: 50%;
      overflow: hidden;
      opacity: 1;
      transition: all 0.3s;
      cursor: pointer;
    }
    .cbcn-moreexperience-open::before {
      background: none;
    }
    .cbcn-moreexperience-open::after {
      border-radius: 50%;
      overflow: hidden;
    }

    .cbcn-moreexperience-box.active .cbcn-moreexperience-open {
      opacity: 0;
      visibility: hidden;
    }

    .cbcn-moreexperience-content {
      width: 46em;
      min-height: 5.7em;
      position: absolute;
      right: 1em;
      bottom: 1em;
      z-index: 9;
      border-radius: 0.8em;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(0, 0, 0, 0.20);
      box-shadow: 2px 18px 40px 0 rgba(215, 215, 215, 0.25), 1px 2px 5px 0 rgba(190, 190, 190, 0.25) inset;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      opacity: 0;
      align-items: center;
      padding: 1em 4.5em 1em 1.5em;
      transition: all 0.3s;
    }
    .cbcn-moreexperience-txt-img{
      z-index: -2;
      width: 100%;
      height: 100%;
    }

    .cbcn-moreexperience-box.active .cbcn-moreexperience-content {
      opacity: 1;
    }

    .cbcn-moreexperience-content p {
      color: rgba(255, 255, 255, 0.65) !important;
    }

    .cbcn-moreexperience-playbox {
      position: absolute;
      right: 1em;
      bottom: 1em;
      width: 3.2em;
      height: 3.2em;
      justify-content: center;
      align-items: center;
      z-index: 99;
    }
    .cbcn-moreexperience-playbox svg {
      width: 100%;
      height: 100%;
    }

    .cbcn-moreexperience-play {
      position: absolute;
      top: 0.4em;
      left: 0.4em;
      width: 2.4em;
      height: 2.4em;
      cursor: pointer;
    }
    .cbcn-moreexperience-play .cbcn-moreexperience-pause {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%; 
      height: 100%;
      opacity: 0;
    }
    .cbcn-moreexperience-play.active > img {
      opacity: 0;
    }
    .cbcn-moreexperience-play.active .cbcn-moreexperience-pause {
      opacity: 1;
    }

    .cbcn-moreexperience-circle {
      stroke: rgba(255, 255, 255, 0.4);
      fill: none;
      stroke-width: 3px;
      stroke-dasharray: 190px;
      stroke-dashoffset: var(--circle);
    }
  }

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

  /* multitasking */
  @media screen {
    .cbcn-multitasking-content {
      position: relative;
      padding-bottom: 150px;
      z-index: 9;
    }

    .cbcn-multitasking-title {
      top: 50vh;
      width: 40.7em;
      text-align: center;
      z-index: 9;
    }

    .cbcn-multitasking-title p {
      position: relative;
      z-index: 9;
      text-align: center;
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-multitasking-title::after {
      content: "";
      width: 200vw;
      min-height: 2000px;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    .cbcn-multitasking-section.active .cbcn-multitasking-title::after {
      width: 0;
      height: 0;
      transition: all 0.01s 1s ease-out;
    }

    .cbcn-multitasking-videoDiv {
      width: 100%;
      height: 100vh;
      min-height: 1200px;
    }

    .cbcn-multitasking-video {
      width: 63.5em;
      height: 27em;
      position: relative;
      top: 0;
      left: 50%;
      margin-left: -31.75em;
    }
    .cbcn-multitasking-section.active .cbcn-multitasking-video {
      transition: transform 0.3s;
    }

    .cbcn-multitasking-video video {
      transform-origin: 50% 0%;
      border-radius: 0px;
    }

    /* .cbcn-multitasking-video .shine {
      border-radius: 24px;
      overflow: hidden;
    } */

    .cbcn-multitasking-txt {
      margin: 50px auto 0;
      width: 43.15em;
      text-align: center;
    }
  }

  /* efficientoffice */
  @media screen {
    .cbcn-efficientoffice-section.wt {
      position: relative;
      height: 57.6em;

      --cursorX: 0px;
      --cursorY: 0px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) -15.96%, rgba(255, 255, 255, 0.10) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 72.3%, rgba(0, 0, 0, 0.30) 113.06%), var(--background-l1, #FFF);;
    }

    /* .cbcn-efficientoffice-section:not(.cursornone) {
      cursor: none;
    } */

    .cbcn-efficientoffice-title {
      position: relative;
      z-index: 9;
    }
    .cbcn-efficientoffice-section.active .cbcn-efficientoffice-title p{
      color: rgba(255, 255, 255, 0.95)!important;
    }

    .cbcn-efficientoffice-swiper {
      margin-top: 3.5em;
      width: 100%;
      height: 25em;
      position: relative;
      perspective: 2000px;
    }

    .cbcn-efficientoffice-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 25em;
      z-index: 10;
      border-radius: 1.2em;
      overflow: hidden;
      transition: all 1s ease-out;
    }
    .cbcn-efficientoffice-swiper:not(.active) .cbcn-efficientoffice-img {
      background: rgba(187, 187, 187, 0.20);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transform: scale(0.5) skewY(20deg) translateX(-6em) translateY(4em);
    }

    /* .cbcn-efficientoffice-swiper.bk::before{
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      transition: all 0.3s 0.1s;
    }
    .cbcn-efficientoffice-img.bk::before {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%);
    } */

    .cbcn-efficientoffice-txt{
      position: relative;
      z-index: 9;
      margin-top: 2.5em;
      opacity: 0;
    }
    .cbcn-efficientoffice-section.active .cbcn-efficientoffice-txt{
      margin-top: -2.5em;
      opacity: 1;
      transition: all 0.5s ease-in;
    }
     .cbcn-efficientoffice-txt  p{
      color: rgba(255, 255, 255, 0.50)!important;
    }
    .cbcn-efficientoffice-icon {
      width: 24.5em;
      height: 13em;
      position: absolute;
      top: 5.4em;
      left: 8.75em;
      z-index: 9;
      transition: all 0.5s ease-in;
    }
    .cbcn-efficientoffice-section.active .cbcn-efficientoffice-icon{
      top: 2em;
    }
    .cbcn-efficientoffice-icontop {
      position: absolute;
      top: 0;
      left: 11em;
      width: 8.06em;
      height: 1.83em;
      border-radius: 10em;
      overflow: hidden;
      background: rgba(140, 140, 140, 0.25);
      background-blend-mode: luminosity;
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
    }
    .cbcn-efficientoffice-iconleft {
      position: absolute;
      top: 7.3em;
      left: 0em;
      width: 2.26em;
      height: 4.19em;
      border-radius: 10em;
      overflow: hidden;
      background: rgba(140, 140, 140, 0.25);
      background-blend-mode: luminosity;
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
    }
    .cbcn-efficientoffice-iconlist {
      position: absolute;
      top: 3.37em;
      left: 12.95em;
      padding: 0.21em;
      gap: 0.21em;
      border-radius: 3em;
      background: rgba(140, 140, 140, 0.25);
      background-blend-mode: luminosity;
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
    }
    .cbcn-efficientoffice-iconbtn{
      width: 1.719em;
      height: 1.55785em;
      transition: all 0.3s;
      position: relative;
      z-index: 2;
    }

    .cbcn-efficientoffice-iconlist::after{
      content: "";
      width: 1.719em;
      height: 1.55785em;
      position: absolute;
      left: 0.21em;
      top: 0.21em;
      z-index: 1;
      background: rgba(255, 255, 255, 0.20);
      transition: all 0.3s;
      border-radius: 50%;
      overflow: hidden;
    }
    .cbcn-efficientoffice-swiper.bk .cbcn-efficientoffice-iconlist::after {
      transform: translateX(1.929em);
    }

    .cbcn-efficientoffice-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
    }

    .cbcn-efficientoffice-swiper:not(.active) .cbcn-efficientoffice-wrapper {
      perspective: 2000px;
    }

    .cbcn-efficientoffice-slide {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .cbcn-efficientoffice-slide:not(.active) {
      transition: transform 1s ease-out;
    }
    .cbcn-efficientoffice-slide.active {
      position: relative;
      z-index: 1;
      opacity: 0!important;
    }
    .cbcn-efficientoffice-slide.swiper-slide-active {
      opacity: 1!important;
    }
    .cbcn-efficientoffice-slide1:not(.active) {
      z-index: 9;
    }
    .cbcn-efficientoffice-slide2:not(.active) {
      z-index: 8;
    }
    .cbcn-efficientoffice-slide3:not(.active) {
      z-index: 7;
    }

    .cbcn-efficientoffice-imgbg {
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 1.2em;
      transition: all 0.5s ease-out;
      object-fit: cover;
    }

    .cbcn-efficientoffice-slide.active .cbcn-efficientoffice-imgbg {
      top: -18.9em;
      width: 100vw;
      height: 57.6em;
      border-radius: 0em;
    }

    .cbcn-efficientoffice-swiper:not(.active) .cbcn-efficientoffice-slide1 {
      transform: scale(0.5) skewY(20deg) translateX(2em) translateY(-2em);
    }

    .cbcn-efficientoffice-swiper:not(.active) .cbcn-efficientoffice-slide2 {
      transform: scale(0.5) skewY(20deg) translateX(10em) translateY(-8em);
    }

    .cbcn-efficientoffice-swiper:not(.active) .cbcn-efficientoffice-slide3 {
      transform: scale(0.5) skewY(20deg) translateX(18em) translateY(-14em);
    }

    .cbcn-efficientoffice-img2 {
      opacity: 0;
      z-index: 9;
    }
    .cbcn-efficientoffice-swiper.bk .swiper-slide-active .cbcn-efficientoffice-img2 {
      opacity: 1;
    }

    .cbcn-efficientoffice-mouseBtn {
      width: 103px;
      height: 103px;
      position: absolute;
      left: var(--cursorX);
      top: var(--cursorY);
      z-index: 9;
      border-radius: 50%;
      overflow: hidden;
    }

    .cbcn-efficientoffice-section.cursornone .cbcn-efficientoffice-mouseBtn,
    .cbcn-efficientoffice-section.leave .cbcn-efficientoffice-mouseBtn {
      opacity: 0;
    }

    .cbcn-efficientoffice-mouseBtn.left {
      transform: rotate(180deg);
    }

    .cbcn-efficientoffice-mouseBtn svg {
      width: 103px;
      height: 103px;
    }

    .cbcn-efficientoffice-mouseicon {
      width: 0.925em;
      height: 1.85em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-25%, -45%);
      z-index: 9;
    }

    .cbcn-efficientoffice-btnList {
      position: relative;
      z-index: 9;
      display: block;
      padding-top: 1.2em;
      margin: 0 auto;
      width: max-content;
      align-items: center;
      justify-content: center;
      gap: 0.6em;
      flex-wrap: nowrap;
      cursor: pointer;
      opacity: 0;
      transition: all 0.5s ease-in;
    }
    .cbcn-efficientoffice-section.active .cbcn-efficientoffice-btnList {
      opacity: 1;
      margin: 2.5em auto 0;
    }
    .cbcn-efficientoffice-btnBox {
      height: 2.1em;
      padding: 0 0.875em;
      align-items: center;
      gap: 0.47em;
      border-radius: 2.1em;
      background: linear-gradient(99deg, rgba(255, 255, 255, 0.72) -10.84%, rgba(226, 226, 226, 0.36) 53.6%, rgba(231, 231, 231, 0.72) 112.76%);
      box-shadow: 2px 2px 6px 0 rgba(225, 225, 225, 0.25), -0.5px -0.5px 3px 0 #FFF inset, 0.5px 0.5px 1px 0 #FFF inset, -1px -1px 3px 0 rgba(205, 205, 205, 0.25) inset, 1px 1px 3px 0 rgba(145, 145, 145, 0.25) inset;
      backdrop-filter: blur(10px);
    }
    .cbcn-efficientoffice-btn {
      position: relative;
      width: 0.35em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(155deg, #E3E3E3 17.66%, #606060 94.73%);
      transition: all 0.3s ease-in;
    }
    .cbcn-efficientoffice-btn.active {
      width: 3.15em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(182, 182, 182, 0.30) 100%);
    }
    .cbcn-efficientoffice-btn.active .cbcn-efficientoffice-btn-progress {
      opacity: 1;
      width: 100%;
      transition: all 5s linear;
    }
    .cbcn-efficientoffice-btn-progress {
      opacity: 0;
      width: 0;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(99deg, rgba(255, 255, 255, 0.72) -10.84%, rgba(226, 226, 226, 0.36) 53.6%, rgba(231, 231, 231, 0.72) 112.76%);
    }
    .cbcn-efficientoffice-refresh {
      width: 2.1em;
      height: 2.1em;
      flex-shrink: 0;
    }
    .cbcn-efficientoffice-refresh.active {
      animation: efficientofficePlay 0.5s forwards;
    }
    @keyframes efficientofficePlay {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .cbcn-efficientoffice-mouseBtn {
      position: absolute;
      left: var(--cursorX);
      top: var(--cursorY);
      opacity: 1;
      width: 5.15em;
      height: 5.15em;
      z-index: 99;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .cbcn-efficientoffice-icon-img{
      display: flex;
      width: 6.33885em;
      height: 6.92975em;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 0.64465em;
      opacity: 0.4;
    }
    .cbcn-efficientoffice-icon-img.active {
      opacity: 1;
    }
    .cbcn-efficientoffice-icon-div {
      position: absolute;
      right: 3.19em;
      bottom: 0;
    }
  }

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

  /* spatial */
  @media screen {
    .cbcn-spatial-section.bk {
      padding-bottom: 150px;
      background: linear-gradient(180deg, rgba(32, 32, 32, 0.00) 85.09%, rgba(20, 20, 20, 0.60) 100%), radial-gradient(127.2% 127.2% at 50% -10.32%, #000 0%, #1B1B1B 100%);
    }

    .cbcn-spatial-title {
      top: 50vh;
      width: 40.7em;
      text-align: center;
      z-index: 9;
    }

    .cbcn-spatial-title p {
      position: relative;
      z-index: 9;
      text-align: center;
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-spatial-title::after {
      content: "";
      width: 200vw;
      min-height: 2000px;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    .cbcn-spatial-section.active .cbcn-spatial-title::after {
      width: 0;
      height: 0;
      transition: all 0.01s 1s ease-out;
    }

    .cbcn-spatial-videoDiv {
      width: 100%;
      height: 100vh;
      min-height: 1200px;
    }

    .cbcn-spatial-video {
      width: 63.5em;
      height: 27em;
      position: relative;
      top: 0;
      left: 50%;
      margin-left: -31.75em;
    }
    .cbcn-spatial-section.active .cbcn-spatial-video {
      transition: transform 0.3s;
    }

    .cbcn-spatial-video video {
      transform-origin: 50% 0%;
      border-radius: 0px;
    }

    .cbcn-spatial-txt {
      margin: 50px auto 0;
      width: 49em;
      text-align: center;
    }

    .cbcn-spatial-shadow {
      bottom: 1.4em;
      width: 62.2em;
      height: 4.2em;
      filter: blur(10px);
    }
  }

  /* spatial2 */
  @media screen {
    .cbcn-spatial2-section.bk {
      padding-bottom: 150px;
      background: radial-gradient(127.2% 127.2% at 50% -10.32%, #000 0%, #1B1B1B 100%), linear-gradient(180deg, rgba(32, 32, 32, 0.00) 85.09%, rgba(20, 20, 20, 0.60) 100%);
    }
    
    .cbcn-spatial2-title {
      top: 50vh;
      width: 40.7em;
      text-align: center;
      z-index: 9;
    }

    .cbcn-spatial2-title p {
      position: relative;
      z-index: 9;
      text-align: center;
      color: rgba(255, 255, 255, 0.95) !important;
    }

    .cbcn-spatial2-title::after {
      content: "";
      width: 200vw;
      min-height: 2000px;
      height: 200vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    .cbcn-spatial2-section.active .cbcn-spatial2-title::after {
      width: 0;
      height: 0;
      transition: all 0.01s 1s ease-out;
    }

    .cbcn-spatial2-videoDiv {
      width: 100%;
      height: 100vh;
      min-height: 1200px;
    }

    .cbcn-spatial2-video {
      width: 63.5em;
      height: 27em;
      position: relative;
      top: 0;
      left: 50%;
      margin-left: -31.75em;
    }
    .cbcn-spatial2-section.active .cbcn-spatial2-video {
      transition: transform 0.3s;
    }

    .cbcn-spatial2-video video {
      transform-origin: 50% 0%;
      border-radius: 0px;
    }

    .cbcn-spatial2-txt {
      margin: 50px auto 0;
      width: 49em;
      text-align: center;
    }

    .cbcn-spatial2-shadow {
      bottom: 0;
      width: 80.85em;
      height: 8.7em;
      filter: blur(10px);
    }
  }

  /* interactive */
  @media screen {
    .cbcn-interactive-section.bk {
      background: linear-gradient(180deg, rgba(32, 32, 32, 0.00) 85.09%, rgba(20, 20, 20, 0.60) 100%), var(--background-l1, #000);
      position: relative;

      --cursorX: 0px;
      --cursorY: 0px;
    }

    .cbcn-interactive-section:not(.cursornone) {
      /* cursor: none; */
    }

    .cbcn-interactive-swiper {
      width: 49em;
      height: 630px;
      overflow: hidden;
    }

    .cbcn-interactive-wrapper {
      left: 0;
      transition: all 0.75s ease-out;
      flex-wrap: nowrap;
    }

    .cbcn-interactive-wrapper.active {
      margin-left: -1050px;
    }

    .cbcn-interactive-slide {
      transition: all 0.75s ease-out;
    }

    .cbcn-interactive-slide1 {
      opacity: 1;
    }

    .cbcn-interactive-slide2 {
      opacity: 0;
    }

    .cbcn-interactive-wrapper.active .cbcn-interactive-slide1 {
      opacity: 0;
    }

    .cbcn-interactive-wrapper.active .cbcn-interactive-slide2 {
      opacity: 1;
    }

    .cbcn-interactive-img {
      width: 49em;
      height: 23.8em;
    }

    .cbcn-interactive-txt {
      width: 806px;
      text-align: center;
      padding-top: 1.2em;
      margin: auto;
    }

    .cbcn-interactive-mouseBtn {
      width: 103px;
      height: 103px;
      position: absolute;
      left: var(--cursorX);
      top: var(--cursorY);
      z-index: 9;
      border-radius: 50%;
      overflow: hidden;
    }

    .cbcn-interactive-section.cursornone .cbcn-interactive-mouseBtn,
    .cbcn-interactive-section.leave .cbcn-interactive-mouseBtn {
      opacity: 0;
    }

    .cbcn-interactive-mouseBtn svg {
      width: 103px;
      height: 103px;
    }

    .cbcn-interactive-mouseBtn.left {
      transform: rotate(180deg);
    }

    .cbcn-interactive-mouseicon {
      width: 0.925em;
      height: 1.85em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-25%, -45%);
      z-index: 9;
    }

    .cbcn-interactive-btnList {
      position: fixed;
      left: 0%;
      right: 0%;
      bottom: -12vh;
      z-index: 100;
      margin: auto;
      width: 20px;

      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.6em;
      cursor: pointer;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.2, 0.75, 0.3, 1.3), width 0.3s ease-in-out;
    }
    .cbcn-interactive-btnList > * {
        flex-shrink: 0;
    }
    .cbcn-interactive-btnList.active{
      width: fit-content;
      opacity: 1;
      bottom: 20px;
      transition-delay: 0.3s;
    }


    .cbcn-interactive-btnBox {
      width: fit-content!important;
      height: 2.1em;
      padding: 0 0.875em;
      align-items: center;
      gap: 0.47em;
      border-radius: 4.95em;
      background: linear-gradient(99deg, rgba(255, 255, 255, 0.72) -10.84%, rgba(226, 226, 226, 0.36) 53.6%, rgba(231, 231, 231, 0.72) 112.76%);
      box-shadow: 2px 2px 6px 0 rgba(225, 225, 225, 0.25), -0.5px -0.5px 3px 0 #FFF inset, 0.5px 0.5px 1px 0 #FFF inset, -1px -1px 3px 0 rgba(205, 205, 205, 0.25) inset, 1px 1px 3px 0 rgba(145, 145, 145, 0.25) inset;
      backdrop-filter: blur(10px);
    }
    .cbcn-interactive-btn {
      position: relative;
      width: 0.35em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(155deg, #E3E3E3 17.66%, #606060 94.73%);
      transition: all 0.3s ease-in;
    }
    .cbcn-interactive-btn.active {
      width: 3.15em;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(182, 182, 182, 0.30) 100%);
    }
    .cbcn-interactive-btn.active .cbcn-interactive-btn-progress {
      opacity: 1;
      width: 100%;
      transition: all 5s linear;
    }
    .cbcn-interactive-btn-progress {
      opacity: 0;
      width: 0;
      height: 0.35em;
      border-radius: 0.35em;
      background: linear-gradient(99deg, rgba(255, 255, 255, 0.72) -10.84%, rgba(226, 226, 226, 0.36) 53.6%, rgba(231, 231, 231, 0.72) 112.76%);
    }
    .cbcn-interactive-refresh {
      width: 2.1em;
      height: 2.1em;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }
    .cbcn-interactive-refresh.active {
      animation: interactivePlay 0.5s forwards;
    }
    @keyframes interactivePlay {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .cbcn-interactive-mouseBtn {
      position: absolute;
      left: var(--cursorX);
      top: var(--cursorY);
      opacity: 1;
      width: 5.15em;
      height: 5.15em;
      z-index: 99;
      border-radius: 50%;
      overflow: hidden;
    }
    .cbcn-interactive-refresh.active {
      animation: interactivePlay 0.5s forwards;
    }
    @keyframes interactivePlay {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  }

  /* display */
  @media screen {
    .cbcn-display-video {
      position: relative;
    }

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

    .cbcn-display-title p,
    .cbcn-display-txt p {
      position: relative;
      z-index: 9;
      text-align: center;
    }

    .cbcn-display-txt {
      width: 762px;
      margin-top: 60px;
      opacity: 0;
      gap: 2em;
    }

    .cbcn-display-txt1 {
      gap: 1.5em;
    }

    .cbcn-display-param {
      top: 50%;
      margin-top: 200px;
      z-index: 9;
      width: 40.7em;
      gap: 1.5em 2.2em;
      opacity: 0;
    }

    .cbcn-display-param .cbcn-param {
      width: 19.2em;
      padding-top: 0.75em;
      border-top: 1px solid #B3B3B3;
      align-items: center;
      text-align: center;
    }
  }

  /* extraordinary */
  @media screen {
    .cbcn-extraordinary-section.bk {
      background: linear-gradient(180deg, #000 60.48%, #0E0F37 123.91%);
    }

    .cbcn-extraordinary-div {
      gap: 20px 20px;
    }

    .cbcn-extraordinary-txt {
      padding-bottom: 60px;
    }

    .cbcn-extraordinary-item1 {
      width: 100%;
      gap: 30px;
      padding: 50px 60px;
      position: relative;
      z-index: 2;
      border-radius: 1.2em;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: radial-gradient(88.77% 117.41% at 52.4% 113.24%, rgba(112, 115, 222, 0.20) 0%, rgba(34, 34, 34, 0.20) 100%);
      box-shadow: -4px 4px 4.3px -2px rgba(255, 255, 255, 0.10) inset, 4px 3px 3px -2px rgba(255, 255, 255, 0.12) inset;
    }

    .cbcn-extraordinary-item2 {
      width: 480px;
      padding: 60px 0;
      gap: 30px;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 2;
      border-radius: 1.2em;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: radial-gradient(88.77% 117.41% at 52.4% 113.24%, rgba(112, 115, 222, 0.20) 0%, rgba(34, 34, 34, 0.20) 100%);
      box-shadow: -4px 4px 4.3px -2px rgba(255, 255, 255, 0.10) inset, 4px 3px 3px -2px rgba(255, 255, 255, 0.12) inset;
    }

    .cbcn-extraordinary-item3 {
      width: 480px;
      padding: 60px 0;
      gap: 30px;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 2;
      border-radius: 1.2em;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: radial-gradient(88.77% 117.41% at 52.4% 113.24%, rgba(112, 115, 222, 0.20) 0%, rgba(34, 34, 34, 0.20) 100%);
      box-shadow: -4px 4px 4.3px -2px rgba(255, 255, 255, 0.10) inset, 4px 3px 3px -2px rgba(255, 255, 255, 0.12) inset;
    }

    .cbcn-extraordinary-bg {
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .cbcn-extraordinary-svg1 {
      width: 82px;
      height: 78px;
      object-fit: cover;
      margin: auto;
    }

    .cbcn-extraordinary-svg2 {
      width: 82px;
      height: 60px;
      object-fit: cover;
      margin: 0 auto;
    }

    .cbcn-extraordinary-svg3 {
      width: 82px;
      height: 64px;
      object-fit: cover;
      margin: 0 auto;
    }

    .cbcn-extraordinary-item1-txt2 {
      padding-top: 10px;
    }

    .cbcn-extraordinary-item1-div2 .cbcn-pc-b2 {
      position: relative;
      width: 652px;
      height: 54px;
    }
    .cbcn-extraordinary-item1-div1 {
      width: 170px;
    }
    .cbcn-extraordinary-item1-div4 {
      position: relative;
      width: 160px;
    }
    .cbcn-extraordinary-item1-div5 {
      position: relative;
      width: 182px;
    }
    .cbcn-extraordinary-item1-div6,
    .cbcn-extraordinary-item1-div3 {
      width: 168px;
    }
    .cbcn-extraordinary-item1-txt1 {
      padding-top: 10px;
    }
  }

  /* performance */
  @media screen {
    .cbcn-performance-title {
      padding: 2.5em 0 0;
      text-align: center;
      z-index: 9;
    }

    .cbcn-performance-content {
      width: 980px;
      bottom: 10em;
      z-index: 9;
    }

    .cbcn-performance-video {
      width: 96em;
      height: 68.95em;
    }

    .cbcn-performance-box {
      position: relative;
      z-index: 9;
      width: 100%;
      justify-content: space-between;
      opacity: 0;
      transform: translateY(100px);
      transition: all 0.5s ease-out;
    }

    .cbcn-performance-box.active {
      opacity: 1;
      transform: translateY(0px);
    }

    .cbcn-performance-card {
      width: 480px;
      padding: 50px 40px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(136, 136, 136, 0.10);
      box-shadow: 1px 1px 3px 0 rgba(217, 217, 217, 0.25) inset;
      backdrop-filter: blur(2px);
      overflow: hidden;
    }

    .cbcn-performance-param {
      margin-top: 30px;
      gap: 10px;
    }

    .cbcn-performance-param .cbcn-param {
      padding-top: 15px;
      width: fit-content;
      min-width: 157px;
      border-top: 1px solid #4D4D4D;
    }
  }

  /* patents */
  @media screen {
    .cbcn-patents-section.bk {
      background: linear-gradient(180deg, #000 0%, #222 70.25%, #0B0B0B 100%);
      padding-bottom: 244px;
    }

    .cbcn-patents-title {
      width: 40.4em;
      text-align: center;
    }

    .cbcn-patents-swiper {
      margin-top: 132px;
      width: 968px;
      padding-bottom: 96px;
    }

    .cbcn-patents-wrapper {
      width: 100%;
      height: 132px;
      position: relative;
    }

    .cbcn-patents-slide {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      animation: patents 0.3s ease-out forwards;
      transition: all 0.3s;
    }

    @keyframes patents {
      0% {
        opacity: 0;
        transform: translate(100%, -50%) scale(0);
      }

      100% {
        opacity: 1;
        transform: translate(0%, -50%) scale(1);
      }
    }

    .cbcn-patents-slide:nth-of-type(1) {
      width: 75.9px;
      left: 0%;
      --filterNum: 21px;
      --showH: 40%;
    }

    .cbcn-patents-slide:nth-of-type(7) {
      width: 75.9px;
      left: 92.16%;
      --filterNum: 21px;
      --showH: 40%;
    }

    .cbcn-patents-slide:nth-of-type(2) {
      width: 88.25px;
      left: 13%;
      --filterNum: 18px;
      --showH: 60%;
    }

    .cbcn-patents-slide:nth-of-type(6) {
      width: 88.25px;
      left: 78%;
      --filterNum: 18px;
      --showH: 60%;
    }

    .cbcn-patents-slide:nth-of-type(3) {
      width: 104.545px;
      left: 27.5%;
      --filterNum: 15px;
      --showH: 80%;
    }

    .cbcn-patents-slide:nth-of-type(5) {
      width: 104.545px;
      left: 63%;
      --filterNum: 15px;
      --showH: 80%;
    }

    .cbcn-patents-slide:nth-of-type(4) {
      width: 130.68px;
      left: 43.75%;
      --filterNum: 12px;
      --showH: 100%;
    }

    .cbcn-patents-icon {
      width: 100%;
    }

    .cbcn-patents-iconshadow {
      position: absolute;
      left: 0;
      bottom: -90px;
      width: 100%;
      height: 45px;
      border-radius: 5px;
    }

    .cbcn-patents-iconshadow img {
      width: 100%;
      height: var(--showH);
      opacity: 0.3;
      filter: blur(var(--filterNum));
      -webkit-filter: blur(var(--filterNum));
    }
  }

  /* remark */
  @media screen {

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

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

@media screen and (max-width: 1441px) and (min-width: 981px) {
  .cbcn-wtbg-shadow {
    width: 49em;
    height: 1.9em;
  }
  /* navigation */
  @media screen {
    .cbcn-navigation-txt.cbcn-title {
      gap: 16px;
    }
    .cbcn-navigation-txt .cbcn-pc-h4 {
      font-size: 30px;
    }
    .cbcn-navigation-txt .cbcn-pc-b2 {
      font-size: 16px;
    }
  }

  /* lightdesign */
  @media screen {
    .cbcn-lightdesign-content .cbcn-pc-h1 {
      font-size: 56px;
    }
  }

  /* design */
  @media screen {
    .cbcn-design-titlebox {
      top: 36px;
      width: 80em;
      height: 70px;
    }
    .cbcn-design-title {
      padding: 1em 1.5em;
    }
    .cbcn-design-title .cbcn-pc-b1 {
      font-size: 20px;
    }
    .cbcn-design-title .cbcn-pc-b3 {
      font-size: 12px;
    }
    .cbcn-design-rttitle {
      width: 40em;
    }

    .cbcn-design-changebtn {
      top: 127px;
    }
  }

  /* immersiveav */
  @media screen {
    .cbcn-immersiveav-video,.cbcn-watchingmovies-video {
      width: 49em;
      height: 20.85em;
      margin-left: -24.5em;
    }
    .cbcn-giantscreen-videoDiv {
      width: 49em;
    }
    .cbcn-giantscreen-videoBox, .cbcn-giantscreen-box {
      width: 49em;
      height: 20.85em;
    }
    .cbcn-giantscreen-box {
      padding-top: 6em;
      gap: 3em;
    }
  }

  /* morefun */
  @media screen {
    .cbcn-morefun-section.cbcn-pc-safeCol {
      padding: 6em 0;
    }

    .cbcn-morefun-section .cbcn-pc-h1 {
      font-size: 56px;
    }

    .cbcn-morefun-section .cbcn-pc-h5 {
      font-size: 21px;
    }

    .cbcn-morefun-section .cbcn-pc-b2 {
      font-size: 15px;
    }
  }

  /* stericimage */
  @media screen {
    .cbcn-stericimage-txt {
      width: 42em;
    }
    .cbcn-stericimage-section .cbcn-pc-h1 {
      font-size: 5em;
    }
    .cbcn-stericimage-section .cbcn-pc-b1 {
      font-size: 1.5em;
    }
  }

  /* gameliving */
  @media screen {
    .cbcn-gameliving-name {
      width: 31em;
    }
    .cbcn-gameliving-section .cbcn-pc-h1 {
      font-size: 3.6em;
    }
    .cbcn-gameliving-section .cbcn-pc-b2 {
      font-size: 0.9em;
    }
  }

  /* moreexperience */
  @media screen {
    .cbcn-moreexperience-section.cbcn-pc-safeCol {
      padding: 6em 0;
    }

    .cbcn-moreexperience-section .cbcn-pc-h1 {
      font-size: 56px;
    }

    .cbcn-moreexperience-section .cbcn-pc-h5 {
      font-size: 21px;
    }

    .cbcn-moreexperience-section .cbcn-pc-b2 {
      font-size: 15px;
    }
  }

  /* multitasking */
  @media screen {
    .cbcn-multitasking-video,.cbcn-spatial-video,.cbcn-spatial2-video {
      width: 49em;
      height: 20.85em;
      margin-left: -24.5em;
    }
  }

  /* display */
  @media screen {
    .cbcn-display-section .cbcn-pc-h1 {
      font-size: 56px;
    }

    .cbcn-display-section .cbcn-pc-h3 {
      font-size: 36px;
    }

    .cbcn-display-section .cbcn-pc-b1 {
      font-size: 16px;
    }

    .cbcn-display-section .cbcn-pc-d2 {
      font-size: 40px;
    }
  }

  /* performance */
  @media screen {
    .cbcn-performance-section .cbcn-pc-h1 {
      font-size: 56px;
    }
  }
}