.section3 {
       display: block;
       padding-left: 0;
       padding-right: 0;
   }

   .Box3 {
       padding-left: var(--container);
       padding-right: var(--container);
       display: block;
       position: relative;
       width: 100%;
       z-index: 2;
   }

   .Box3 .indexTitle h1 {
       font-size: 20px;
   }

   .desc3 {
       margin-top: 45px;
       margin-bottom: 60px;
       color: #505050;
       font-size: 16px;
       line-height: 1.75;
       text-align: center;
   }

   .shuzi3 {
       height: 125px;
       display: flex;
       flex-wrap: wrap;
       position: relative;
       z-index: 2;
   }

   .shuzi3::after {
       content: "";
       display: block;
       width: 0%;
       height: 100%;
       position: absolute;
       z-index: -1;
       top: 0;
       left: 0;
       background: linear-gradient(90deg, var(--color), #d9d5cc);
       transition: 0.5s;
   }

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

   .shuzi3:hover * {
       color: #fff;
   }

   .shuzi3 li {
       width: 25%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   .shuzi3 li h1 {
       font-size: 26px;
       color: var(--color);
   }

   .shuzi3 li p {
       font-size: 18px;
       color: #6c6c6c;
   }

   .video3 {
       margin-top: 60px;
       width: 100%;
   }

   .video3 video {
       display: block;
       width: 100%;
   }


   @media (max-width: 1200px) {
       .desc3 {
           margin-bottom: 15px;
       }

       .shuzi3 li p {
           font-size: 14px;
           text-align: center;
       }

       .video3 {
           margin-top: 30px;
       }
   }

   @media (max-width: 720px) {
       .shuzi3 {
           grid-gap: 30px 0;
           height: auto;
           padding: 30px;
       }

       .shuzi3 li {
           width: 50%;
       }
   }

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

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