.banner .swiper-slide {
  overflow: hidden
}

.banner .swiper-slide img {
  width: 100%;
  height: auto;
  display: block
}

.banner .swiper-slide.swiper-slide-prev img,.banner .swiper-slide.swiper-slide-next img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}

.banner .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
    background-color: unset;
  border-radius: 20px;
  box-shadow: 0 0 7px -1px #a7b5cc59;
  transition: .3s ease-out;
  position: relative;
  opacity: 1
}

.banner .swiper-pagination-bullet:before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #c61e1a;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: .3s ease-out 
}

.banner .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):before {
    width: 12px;
    height: 12px;
    background-color: #ffffff30;
}

.banner .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    border: 2px solid #ffffff30;
}

.banner .swiper-pagination-bullet:hover,.banner .swiper-pagination-bullet-active { 
    border: 2px solid #fff;
}

.banner .swiper-pagination-bullet:hover:before,.banner .swiper-pagination-bullet-active:before {
  width: 12px;
  height: 12px
}

.banner[data-v-6dd8ee9d] {
  transition: opacity 1s
}