.htmlBox {
       width: 100%;
       height: 100vh;
   }

   section {
       width: 100%;
       height: 100%;
   }

   /* .htmlSlide {
       top: 200px;
       transform: scale(0.8) !important;
       transition: 1s;
       z-index: 1;
   }

   .htmlSlide.swiper-slide-active {
       top: 0;
       transform: scale(1) !important;
       z-index: 2;
   } */

   @media (max-width: 1200px) {
       .htmlBox {
           display: block;
           height: auto;
       }

       .htmlBox>.swiper-wrapper {
           display: block;
       }
   }

   @media (max-width: 1440px) {}

   @media (max-width: 1260px) {}

   @media (max-width: 720px) {}

   .sectionTitle {
       font-family: PuHuiTi85;
       font-size: 48px;
       line-height: 1;
       color: #101010;
   }

   @media (max-width: 1660px) {
       .sectionTitle {
           font-size: 40px;
       }
   }


   @media (max-width: 1260px) {
       .sectionTitle {
           font-size: 32px;
       }
   }

   @media (max-width: 720px) {
       .sectionTitle {
           font-size: 24px;
       }
   }

   .IndexMore {
       overflow: hidden;
       position: relative;
       z-index: 2;
       width: 250px;
       height: 60px;
       border: 1px solid var(--color);
       border-radius: 50px;
       font-family: PuHuiTi85;
       color: var(--color);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: row-reverse;
   }

   .IndexMore::before {
       content: "";
       display: block;
       background: url(../../../../ss-res.oss-cn-hangzhou.aliyuncs.com/site_res/223/20240525145219_qIFiOYWt.png) no-repeat center;
       background-size: contain;
       width: 21px;
       height: 12px;
       margin-left: 30px;
   }

   .IndexMore:hover::before {
       filter: brightness(0) invert(1);
   }

   .IndexMore:hover {
       color: #fff;
   }

   .IndexMore::after {
       content: "";
       display: block;
       background: var(--color);
       width: 0;
       height: 100%;
       position: absolute;
       z-index: -1;
       left: 0;
       top: 0;
       transition: 0.5s;
   }

   .IndexMore:hover::after {
       width: 100%;
   }

   @media (max-width: 1200px) {
       .IndexMore {
           width: 180px;
           height: 40px;
       }
   }

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

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





   ::-webkit-scrollbar {
       width: 4px;
       height: 4px;
       background-color: #fff;
   }

   /*定义滚动条轨道 内阴影+圆角*/
   ::-webkit-scrollbar-track {
       -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
       border-radius: 0px;
       background-color: #ffffff;
   }

   /*定义滑块 内阴影+圆角*/
   ::-webkit-scrollbar-thumb {
       border-radius: 10px;
       -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, );
       background: var(--color);
   }