.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
}

.banner .swiper-pagination-bullet {
   width: 15px;
   height: 15px;
   padding: 5px;
   cursor: pointer;
   color: transparent;
   border: 0;
   outline: none;
   background-color: #fff;
   border-radius: 10px;
   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: #428dc3;
   border-radius: 50px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: .3s ease-out
}

.banner .swiper-pagination-bullet:hover,
.banner .swiper-pagination-bullet:focus,
.banner .swiper-pagination-bullet-active {
   box-shadow: 0 0 0 1px #e8e3e3
}

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

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

.slide-style[data-v-dc9edb5c] {
   width: 100%;
   height: 100%;
   object-fit: fill
}