.banner-1 .banner-container .banner {
    height: auto;
    padding: 20px 50px;
    padding-right: 0;
}

.banner-1 .banner-container {
    background-image: linear-gradient(45deg, #087BA2, #AEEEFF);
}

.banner-1 .banner-container .banner {
    background: transparent;
}

.banner-1 .banner-container .banimg {
    /* box-shadow: 0 0 25px 1px #087BA2; */
    filter: drop-shadow(0 0 25px #087BA2);
}

.banner-1 .banner .banimg {
    min-height: 300px;
    width: 100%;
    max-width: 560px;
}

.banner-1 .banner .banimg .swiper-slide {
    /* background-size: cover; */
}

.banner-2 .banner-container .banner {
    height: auto;
    padding: 0 50px;
    padding-right: 0;
}

.banner-2 .banner-container {
    --b: 5px;
    --s: 65px;
    --c: #0000 75%, rgba(8, 123, 162, 0.35) 0;
    --p1: from -90deg at calc(50% + var(--b)) calc(100% - var(--b));
    --p2: from -90deg at var(--b) calc(50% - var(--b));
    --e: calc(var(--s)/2);
    --e-: calc(var(--s)/-2);
    background: conic-gradient(var(--p1), var(--c)), conic-gradient(var(--p1), var(--c)), conic-gradient(var(--p2), var(--c)), conic-gradient(var(--p2), var(--c)), white;
    background-size: var(--s) var(--s);
    animation: g8 10s infinite;
}

@keyframes g8 {
    0%,
    2% {
        background-position: 0 0, var(--e) var(--e), 0 0, var(--e) var(--e)
    }
    10%,
    15% {
        background-position: 0 0, var(--e) var(--e), 0 var(--e), var(--e) 0
    }
    22.5%,
    27.5% {
        background-position: var(--e) 0, 0 var(--e), 0 var(--e), var(--e) 0
    }
    35%,
    40% {
        background-position: var(--e) 0, 0 var(--e), 0 0, var(--e) var(--e-)
    }
    47.5%,
    52.5% {
        background-position: 0 0, var(--e-) var(--e), 0 0, var(--e) var(--e-)
    }
    60%,
    65% {
        background-position: 0 0, var(--e-) var(--e), 0 var(--e-), var(--e) 0
    }
    72.5%,
    77.5% {
        background-position: var(--e-)0, 0 var(--e), 0 var(--e-), var(--e) 0
    }
    85%,
    90% {
        background-position: var(--e-)0, 0 var(--e), 0 0, var(--e) var(--e)
    }
    98%,
    100% {
        background-position: 0 0, var(--e) var(--e), 0 0, var(--e) var(--e)
    }
}

.banner-3 .banner-container .banner {
    /* height: auto; */
    /* padding: 0 50px; */
    /* padding-right: 0; */
}

.banner-3 .banner-container {
    background-image: linear-gradient(45deg, #087BA2, #AEEEFF);
}

.banner-3 .banner-container .banner {
    background: transparent;
}

.banner-3 .banner-container .banimg {
    box-shadow: 0 0 25px 1px #087BA2;
}

.banner-3 .banner .banimg {
    min-height: 300px;
}

.banner-3 .banner .banimg .swiper-slide {
    background-size: cover;
}

.banner-4 .banner-container .banner {
    /* height: auto; */
    /* padding: 0 50px; */
    /* padding-right: 0; */
}

.banner-4 .banner-container {
    --s: 25px;
    /* --c1: rgba(8, 123, 162, 1); */
    --c1: rgb(102, 189, 218);
    --c2: white;
    --_g: radial-gradient(calc(var(--s)/2), var(--c1) 97%, #0000);
    background: var(--_g), var(--_g) calc(2*var(--s)) calc(2*var(--s)), repeating-conic-gradient(from 45deg, #0000 0 25%, var(--c2) 0 50%) calc(-.707*var(--s)) calc(-.707*var(--s)), repeating-linear-gradient(135deg, var(--c1) calc(var(--s)/-2) calc(var(--s)/2), var(--c2) 0 calc(2.328*var(--s)));
    background-size: calc(4*var(--s)) calc(4*var(--s));
}

.banner-4 .banner-container .banimg {
    box-shadow: 0 0 10px 5px #087BA2;
}

.banner-4 .banner .banimg {
    min-height: 300px;
}