﻿.swiper-container {
    width: 100vw;
    height: 100vh;
}

.swiper-slide {
    background-color: #fcfcfc;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fcfcfc;
    font-size: 24px;
}

    .swiper-slide > .swiper-slide-cover {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: transparent no-repeat 50% 50% /cover;
    }

body {
    text-align: center;
}
.swiper.swiper-scale-effect {
    width: 90%;
    margin: 10rem auto 0 auto;
    border-radius: 40px 175px 40px 40px;
}
.swiper-slide .slide-01 {
    background-image: url('../img/banner/banner-img1.jpg');
    transform-origin: 50% 50%;
}

.swiper-slide .slide-02 {
    background-image: url('../img/banner/banner-img2.jpg');
    transform-origin: 50% 50%;
}

.swiper-slide .slide-03 {
    background-image: url('../img/banner/banner-img3.jpg');
    transform-origin: 50% 50%;
}

.swiper-slide{
    position: relative;
}
.swiper-slide .content_div{
    position: absolute;
    left: 10%;
    top: 30%;
}

    .swiper-slide .content_div h1 {
        color: #fff;
        font-size: 7rem;
        font-weight: 600;
        text-shadow: 2px 2px 2px #000;
    }
    .swiper-slide .content_div p {
        color: #fff;
        text-shadow: 2px 2px 2px #000;
        font-size: 18px;
    }
.swiper-scale-effect .swiper-slide-cover {
    transition-timing-function: linear;
    transition-duration: 20s;
    transform: scale(1);
}

.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
    transform: scale(1.3);
}

:root {
    --swiper-pagination-bottom: 40px;
    --swiper-theme-color: rgba(252, 252, 252, 0.85) !important;
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #FCFCFC;
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #262626;
}

.swiper-button-prev,
.swiper-button-next {
    background: transparent;
    opacity: 0.55;
    --swiper-navigation-color: rgba(252, 252, 252, 0.85);
    transition: opacity 0.3s ease, color 0.3s ease;
}

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        background: transparent;
        opacity: 0.85;
        --swiper-navigation-color: #fcfcfc;
    }

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 10px)) !important;
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 10px)) !important;
    box-shadow: inset 1px 1px 1px rgba(38, 38, 38, 0.85);
    background: var(--swiper-pagination-bullet-inactive-color, rgba(252, 252, 252, 0.85)) !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.55) !important;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}

.swiper-pagination-bullet-active {
    box-shadow: inset 1px 1px 1px rgba(38, 38, 38, 0.85);
    background: var(--swiper-pagination-bullet-active-color, rgba(252, 252, 252, 0.85)) !important;
    opacity: var(--swiper-pagination-bullet-active-opacity, 0.85) !important;
    --swiper-pagination-bullet-horizontal-gap: 10px;
}
