.main-slider.swiper{ width: 100%;  }

.main-slider .swiper-wrapper{ z-index: 0}
.main-slider img { width: 100%; }

.main-slider > div {height: 100%; }

.main-slider .main-slider-arrows {position:static; height:0; z-index: 2; }

.main-slider .swiper-arrow { position: absolute; top:0; left: 0; bottom: 0; width: 40px; background: rgb(0 0 0 / 40%) }
.main-slider .swiper-arrow.arrow-next {left: auto; right: 0 }
.main-slider .swiper-arrow .icon { display: block; position:absolute; width: 16px; height: 24px; top: 50%; left: 0; right: 0; margin: auto; transform: translateY(-50%); fill: #fff; }
.main-slider .swiper-arrow.arrow-prev .icon{ transform: rotate(180deg)}

.main-slider .swiper-arrow .swiper-arrow:hover {   transition: background-color 0.2s;    background-color: rgba(0, 0, 0, 0.6); }
.main-slider .swiper-arrow .swiper-arrow:not(:hover) {    transition: background-color 0.2s; }

.main-slider .swiper-button-prev {  left: -100%; }
.main-slider .swiper-button-prev .arrow {  transform: rotate(180deg);  right: 22px; }

.main-slider .swiper-button-next {  right: -100%; }
.main-slider .swiper-button-next .arrow {  left: 22px; }
@media (min-width: 950px) {

  .main-slider.swiper{ width: 800px; overflow: visible  }
  .main-slider .swiper-arrow.arrow-next {width: 60px; right: -60px; background: transparent   }

  .main-slider .swiper-arrow.arrow-prev {width: 60px; left: -60px;  background: transparent }
  .main-slider .swiper-slide:after{ content: ""; position: absolute; display: block; top:0; bottom: 0; right: 0; left: 0; background: rgb(0 0 0 / 50%) }
  .main-slider .swiper-slide.swiper-slide-active:after{ display: none}

  .main-slider .swiper-arrow .icon {  width: 22px; height: 28px;}

}
@media (min-width: 1200px) {

  .main-slider.swiper{ width: 1000px; overflow: visible  }
}