@charset "utf-8";


@keyframes slide1 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide3 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


.mainimg {
    clear: left;
    width: 100%;
    margin: 0 auto;
    position: relative;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.1);
}


.slide1,
.slide2,
.slide3 {
    animation-duration: 15s;
    animation-iteration-count: infinite;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
    animation-fill-mode: both;
    animation-delay: 1s;
}


.slide0 {
    position: relative;
    width: 100%;
    height: auto;
}

.slide1 {
    animation-name: slide1;
}

.slide2 {
    animation-name: slide2;
}

.slide3 {
    animation-name: slide3;
}

@media screen and (max-width:550px) {
    .mainimg {
        clear: left;
        width: 100%;
        margin: 0 auto;
        position: relative;
        box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.1);
        padding-top: 5rem
    }

    .slide1,
    .slide2,
    .slide3 {
        animation-duration: 15s;
        animation-iteration-count: infinite;
        position: absolute;
        left: 0px;
        top: 5rem;
        width: 100%;
        height: auto;
        animation-fill-mode: both;
        animation-delay: 1s;
    }
}

@media screen and (max-width:480px) {
    .mainimg {
        clear: left;
        width: 100%;
        margin: 0 auto;
        position: relative;
        box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.1);
        padding-top: 11rem
    }

    .slide1,
    .slide2,
    .slide3 {
        animation-duration: 15s;
        animation-iteration-count: infinite;
        position: absolute;
        left: 0px;
        top: 11rem;
        width: 100%;
        height: auto;
        animation-fill-mode: both;
        animation-delay: 1s;
    }
}