.section4 {
       background: url(https://ss-res.oss-cn-hangzhou.aliyuncs.com/site_res/213/20240409143523_pVW0IrA7.jpg) no-repeat center;
       background-size: cover;
       padding: 120px 0px;
   }

   .section4 .box4 {
       position: relative;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
   }

   .box4 .imgBox {
       width: 70%;
       display: flex;
   }

   .box4 .imgBox .item {
       position: relative;
       display: block;
       flex: 1;
       transition: 1s;
   }

   .box4 .imgBox .item:hover {
       flex: 0 1 50%;
   }

   .box4 .imgBox .item .bjImg {
       position: relative;
       z-index: 1;
       width: 100%;
       height: 450px;
       object-fit: cover;
   }

   .box4 .imgBox .item span {
       position: absolute;
       left: 0;
       bottom: 25%;
       z-index: 2;
       width: 100%;
       height: 50%;
       background: rgba(255, 255, 255, 0.7);
       transition: 0.5s;
       padding: 30px 20px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .box4 .imgBox .item span img {
       width: 70px;
       transition: 0.5s;
       opacity: 1;
   }

   .box4 .imgBox .item span .text {
       transition: 0.5s;
       position: absolute;
       left: 20px;
       top: 30px;
       opacity: 0;
   }

   .box4 .imgBox .item span .text h1 {
       font-size: 20px;
       color: #fff;
       line-height: 1;
   }

   .box4 .imgBox .item span .text h2 {
       font-size: 16px;
       color: #fff;
       line-height: 1;
   }

   .box4 .imgBox .item:hover span {
       opacity: 1;
       bottom: 0;
       height: auto;
       padding-bottom: 10px;
       background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
   }

   .box4 .imgBox .item:hover span .text {
       opacity: 1;
   }

   .box4 .imgBox .item:hover span img {
       opacity: 0;
       width: 50px;
   }

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

   @media (max-width: 1440px) {
       .section4 {
           padding: 90px 0px;
       }

       .box4 .imgBox {
           width: 65%;
           display: flex;
       }

       .box4 .imgBox .item .bjImg {
           height: 350px;
       }
   }

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

       .section4 .box4 {
           display: flex;
           flex-direction: column-reverse;
           align-items: flex-start;
       }

       .section4 .box4 .textBox {
           width: 100%;
           margin-bottom: 30px;
       }

       .box4 .imgBox {
           width: 100%;
       }
   }

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


   }

   @media (max-width: 640px) {
       .section4 {
           padding: 45px 0px;
       }

       .section4 .box4 .textBox {
           margin-bottom: 15px;
       }

       .box4 .imgBox {
           display: flex;
           flex-wrap: wrap;
       }

       .box4 .imgBox .item {
           flex: none;
           transition: 1s;
           width: 50%;
       }

       .box4 .imgBox .item:hover {
           flex: none;
       }

       .box4 .imgBox .item .bjImg {
           height: auto;
       }

       .box4 .imgBox .item span img {
           width: 45px;
       }

       .box4 .imgBox .item:hover span img {
           width: 30px;
       }

       .box4 .imgBox .item span .text {
           left: 10px;
           top: 20px;
       }

       .box4 .imgBox .item span .text h1 {
           font-size: 18px;
       }
   }