@media only screen and (min-width: 300px) and (max-width: 399px) {
    .banner-img {
        width: 395px !important;
    }
}

@media only screen and (min-width: 400px) and (max-width: 440px) {
    .banner-img {
        width: 440px !important;
    }
}

@media only screen and (min-width: 520px) and (max-width: 992px) {
    .banner-img {
        width: 575px !important;
    }
}

@media only screen and (min-width: 441px) and (max-width: 519px) {
    .banner-img {
        width: 520px !important;
    }
}

.banner-wrap {
    width: 100%;
    height: 454px;
    position: relative;
    overflow: hidden;
}

.Swiper-wrap_4C7jF {
    width: 800px;
    height: 300px;
    margin: 52px 0 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.Swiper-wrap_4C7jF .swiper-container {
    overflow: visible;
}

.Swiper-wrap_4C7jF .swiper-pagination {
    bottom: -40px;
}

.Swiper-wrap_4C7jF .swiper-pagination .swiper-pagination-bullet {
    margin: 0 8px;
}

.Swiper-wrap_4C7jF .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #24b8f2;
}

.swiper-button-common_3vYSe {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: .3s;
}

.Swiper-wrap_4C7jF .swiper-button-common_3vYSe:after {
    display: none;
}

.Swiper-wrap_4C7jF .swiper-button-common_3vYSe img {
    width: 100%;
    height: 100%;
}

.Swiper-wrap_4C7jF .swiper-wrapper {}

.swiper-button-prev {
    left: 10px;
    opacity: 0;
}

.swiper-button-next {
    right: 10px;
    opacity: 0;
}

.Swiper-wrap_4C7jF .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    height: 300px;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: transform .8s;
    cursor: pointer;
}

.Swiper-wrap_4C7jF .swiper-slide .Swiper-slide-inner_1mI5v {
    transition: width .3s, height .3s;
    width: 660px;
    height: 220px;
    box-sizing: border-box;
    background: transparent;
    border-radius: 10px;
    margin: 0 auto;
}

.Swiper-wrap_4C7jF .swiper-slide .Swiper-slide-inner_1mI5v img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 24px 0 rgba(5, 45, 75, .2);
    filter: brightness(75%);
}

.Swiper-wrap_4C7jF .swiper-slide-active {
    opacity: 1;
    pointer-events: auto;
}

.Swiper-wrap_4C7jF .swiper-slide-active .Swiper-slide-inner_1mI5v {
    width: 800px;
    height: 300px;
}

.Swiper-wrap_4C7jF .swiper-slide-active .Swiper-slide-inner_1mI5v img {
    box-shadow: 0 24px 48px 0 rgba(5, 45, 75, .2);
    filter: brightness(100%);
}

.Swiper-wrap_4C7jF .swiper-slide-next,
.Swiper-wrap_4C7jF .swiper-slide-prev {
    opacity: 1;
    pointer-events: auto;
}

.Swiper-wrap_4C7jF .swiper-slide-next .Swiper-slide-inner_1mI5v,
.Swiper-wrap_4C7jF .swiper-slide-prev .Swiper-slide-inner_1mI5v {
    pointer-events: none;
    width: 660px;
    height: 220px;
}

.banner-wrap:hover .swiper-button-prev,
.banner-wrap:hover .swiper-button-next {
    opacity: 1;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    transform: translateY(-50%);
    pointer-events: none;
    transition: .3s;
    font-size: 30px;
    color: #fff;
}