.section3 {
     position: relative;
     padding: 70px 0 140px;
 }

 .section3 .title {
     color: #000;
     text-align: center;
     font-family: DIN;
     font-size: 32px;
     line-height: 1;
     text-transform: uppercase;
 }


 .box3 {
     margin-top: 75px;
 }

 .box3Swiper {
     padding-bottom: 90px;
 }

 .box3Slide {
     position: relative;
     padding-top: 30px;
     padding-bottom: 83px;

 }

 .box3Slide::after {
     content: "";
     display: block;
     width: 100%;
     height: 100%;
     background: #F5F5F5;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 1;
     transition: 0.5s;
 }

 .box3Slide::before {
     content: "";
     display: block;
     width: 0%;
     height: 0%;
     opacity: 0.3;
     background: #BA2540;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 2;
     transition: 0.5s;
 }

 .box3Slide:hover::after {
     transform: scaleY(0.9) scaleX(0.8);
 }


 .box3Slide:hover::before {
     width: 50%;
     height: 80%;
 }

 .box3Slide .img {
     position: relative;
     z-index: 3;
     width: 100%;
     overflow: hidden;
 }

 .box3Slide .img img {
     width: 100%;
     transition: 0.5s;
 }

 .box3Slide .img:hover img {
     transform: scale(1);
 }

 .box3Slide h1 {
     position: relative;
     z-index: 3;
     color: #000;
     text-align: center;
     font-family: DIN;
     font-size: 26px;
     line-height: 1;
     margin-top: 45px;
     margin-bottom: 35px;
 }

 .box3Slide span {
     position: relative;
     z-index: 3;
     color: #686868;
     font-size: 16px;
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .box3Slide span img {
     transform: rotateY(180deg);
     margin-left: 15px;
 }

 .box3Swiper .swiper-pagination span {
     height: 15px;
     width: 4px;
     background: #B4B4B4;
     opacity: 1;
     border-radius: 0;
     transition: 0.5s;
 }

 .box3Swiper .swiper-pagination span.swiper-pagination-bullet-active {
     height: 25px;
     background: var(--color);
 }

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

 @media (max-width: 640px) {
     .box3 {
         margin-top: 45px;
     }

     .section3 {
         position: relative;
     }

     .box3Swiper {
         padding-bottom: 60px;
     }

     .box3Slide h1 {
         font-size: 24px;
         margin-top: 30px;
         margin-bottom: 15px;
     }

     .box3Slide {
         padding-top: 15px;
         padding-bottom: 30px;
     }
 }