/* Section3 */
   .section3 {
       display: block;
       position: relative;
       padding: 0;
   }

   .Box3 {
       position: absolute;
       left: 0;
       top: 0;
       width: calc(100% - var(--container) * 2);
       z-index: 2;
       left: var(--container);
       padding-top: var(--p120);
   }


   .Box3 .indexTitle * {
       color: #fff;
   }

   .item3Box {
       margin-top: 90px;
       width: 50%;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       overflow: hidden;
   }


   .item3 {
       width: 100%;
       border-radius: 8px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.30);
       border-right: 1px solid rgba(255, 255, 255, 0.30);
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       grid-gap: 15px;
       padding: 45px 15px;
       margin-bottom: -1px;
       margin-left: 2px;
       overflow: hidden;
   }

   .item3::after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(231deg, var(--color) 7.22%, var(--color2) 100%);
       z-index: -1;
       opacity: 0;
       transition: 0.5s;
   }

   .item3.on::after {
       opacity: 1;
   }

   .item3 .icon3 {
  
       object-fit: contain;
       position: relative;
       z-index: 2;
   }

   .item3 h1 {
       color: #FFF;
       text-align: center;
       font-size: 16px;
       position: relative;
       z-index: 2;
   }

   .bj3 {
       position: relative;
   }

   .bj3 img {
       position: relative;
       width: 100%;
       height: 960px;
       object-fit: cover;
       display: none;
   }

   .bj3 img.on {
       display: block;
   }

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

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

   @media (max-width: 1200px) {
       .item3Box {
           margin-top: 30px;
           grid-template-columns: repeat(2, 1fr);
       }

       .item3 {
           padding: 15px;
       }

       .item3 .icon3 {
           max-width: 90px;
       }
   }

   @media (max-width: 900px) {
       .item3 {
           padding: 10px;
           grid-gap: 5px;
       }

       .item3 .icon3 {
          max-height:50px;
       }

       .item3 h1 {
           font-size: 14px;
       }

       .bj3 img {
           height: 760px;
           object-position: 60%;
           width:200%;
           right:100%
       }
   }

   @media (max-width: 600px) {
       .Box3 {
           position: unset;
           width: 100%;
           padding: 0 var(--container);
       }

       .Box3 .indexTitle * {
           color: #000;
       }

       .Box3 .indexTitle a {
           color: #fff;
       }

       .item3Box {
           width: 100%;
           margin-bottom: 30px;
       }

       .item3 {
           border-bottom: 1px solid rgba(0, 0, 0, 0.3);
           border-right: 1px solid rgba(0, 0, 0, 0.3);
           justify-content: center;
       }

       .item3 img,
       .item3 h1 {
           filter: invert(1);
       }

       .item3.on img,
       .item3.on h1 {
           filter: invert(0);
       }


       .bj3 img {
           height: auto;
           object-position: unset;
       }

       .item3 .icon3 {
           max-width: 45px;
       }
   }

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