.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: 5vw;
    height: 5vw;
    padding: .5vw;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background-color: unset;
    border-radius: 20vw;
    box-shadow: 0 0 7px -1px #a7b5cc59;
    transition: .3s ease-out;
    position: relative;
    opacity: 1
}

.banner .swiper-pagination-bullet:before {
    content: "";
    width: 5vw;
    height: 5vw;
    background-color: #ffcc00;
    border-radius: 20vw;
    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: 2vw;
    height: 2vw;
    background-color: #ffffff30;
}

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

.banner .swiper-pagination-bullet-active {
    border: .8vw solid #fff;
}

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

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