.section4 {
       background: var(--white);

   }

   .section4_1 {
       position: relative;
       overflow: hidden;
       background: url(https://ss-res.oss-cn-hangzhou.aliyuncs.com/site_res/220/20240518131954_hhOWqtEK.png) no-repeat center;
       background-size: cover;
   }

   .section4 .sectionTitle {
       padding: 0 var(--container);
       height: 160px;
       line-height: 160px;
       border-bottom: 1px solid #ffffff80;
       color: var(--white);
       margin: 0;
   }

   .Box4 {
       padding: 90px 0;
       display: flex;
       justify-content: space-between;
       position: relative;
   }

   .lt4 {
       width: 560px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .item4 {
       width: 100%;
   }

   .text4 {
       display: flex;
       align-items: center;
   }

   .text4 h1 {
       width: 100px;
       font-family: 'Impact';
       font-size: 40px;
       line-height: 1;
       color: #FFFFFF;
   }

   .text4 h1 span {
       font-family: 'Impact';
   }

   .text4 h2 {
       margin-left: 10px;
       font-size: 16px;
       line-height: 1;
       color: #FFFFFF;
   }

   .item4 .aa {
       margin-top: 15px;
       display: block;
       width: 100%;
       height: 6px;
       border-radius: 50px;
       overflow: hidden;
   }

   .item4 .a1 {
       display: block;
       height: 6px;
       position: relative;
       border-radius: 50px;
       overflow: hidden;
   }

   @keyframes progress-animation {
       0% {
           background-position: 100% 0;
           /* 渐变开始位置在最右边 */
       }

       100% {
           background-position: -100% 0;
           /* 渐变结束位置在最左边，完成一个循环 */
       }
   }

   .item4 .a2 {
       position: absolute;
       z-index: 2;
       left: 0;
       top: 0;
       width: 0%;
       height: 100%;
       background: linear-gradient(90deg, #000000 0%, #FFCFA9 30%, #FFFFFF 50%, #FFCFA9 70%, #000000 100%);
       background-size: 200% 100%;
       animation: progress-animation 5s linear infinite;
   }

   .item4 .a2.active {
       width: 100%;
       transition: 5s ease;
   }

   .rt4 {
       width: 920px;
       height: 400px;
       overflow: hidden;
   }

   .swiper4 {
       width: calc(100% + 2px);
       height: calc(100% + 2px);
   }

   .swiper4 .swiper-slide {
       height: 33.3333%;
       display: flex;
       align-items: center;
       justify-content: center;
       border-bottom: 1px solid #ffffff80;
       border-right: 1px solid #ffffff80;
   }

   .swiper4 .swiper-slide img {
       max-width: 80%;
       max-height: 80%;
       object-fit: contain;
   }

   @media (max-width: 1700px) {
       .lt4 {
           width: 500px;
       }

       .rt4 {
           width: 900px;
       }
   }

   @media (max-width: 1540px) {
       .lt4 {
           width: 400px;
       }

       .rt4 {
           width: 600px;
           height: 300px;
       }
   }

   @media (max-width: 1200px) {
       .Box4 {
           padding: 60px 0;
       }

       .section4 .sectionTitle {
           height: 120px;
           line-height: 120px;
       }

       .lt4 {
           width: 350px;
       }

       .text4 h1 {
           width: 72px;
           font-size: 32px;
       }

       .rt4 {
           width: 450px;
           height: 250px;
       }
   }

   @media (max-width: 900px) {
       .Box4 {
           flex-wrap: wrap;
       }

       .lt4 {
           width: 100%;
       }

       .item4 {
           margin-bottom: 45px;
       }

       .rt4 {
           width: 100%;
           height: 250px;
       }
   }

   @media (max-width: 720px) {
       .section4 .sectionTitle {
           height: 90px;
           line-height: 90px;
       }

       .Box4 {
           padding: 45px 0;
       }

       .swiper4 {
           width: calc(100% + 3px);
           height: calc(100% + 3px);
           position: relative;
           left: -1px;

       }
   }

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