@charset "utf-8";

@keyframes fade {
    0%{
      opacity: 0;
    }
    20%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    80%{
        opacity: 0;
        z-index: 0;
    }
    100%{
        opacity: 0;
        z-index: 0;
    }
}

@keyframes slideDot {
    0%{
        background-color: #CCC;
    }
    10%{
        background-color: #009586;
    }
    20%{
        background-color: #009586;
    }
    26%{
        background-color: #009586;
    }
    30%{
        background-color: #CCC;
    }
    100%{
        background-color: #CCC;
    }
}
@keyframes slideDotTwo {
    0%{
        background-color: #CCC;
    }
    20%{
        background-color: #009586;
    }
    55%{
        background-color: #009586;
    }
    60%{
        background-color: #CCC;
    }
    100%{
        background-color: #CCC;
    }
}
@keyframes slideDotThree {
    0%{
        background-color: #CCC;
    }
    15%{
        background-color: #009586;
    }
    35%{
        background-color: #009586;
    }
    45%{
        background-color: #CCC;
    }
    100%{
        background-color: #CCC;
    }
}
.feadAnime > *{
    animation-name: fade;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
}
.slideAnime {
    text-align: center;
    margin-top: 15px;
}
.slideAnime > * {
    width: 11px;
    height: 11px;
    margin: 0 9px;
    background-color: #CCC;
    border-radius: 50%;
    display: inline-block;
    animation-name: slideDot;
    animation-duration: 16s;
    animation-iteration-count: infinite;
}
.slideAnime.slideAnimeTwo > * {
    animation-name: slideDotTwo;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}
.slideAnime.slideAnimeThree > * {
    animation-name: slideDotThree;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
.feadAnime.feadAnimeThree > *{
    animation-duration: 12s;
}
.feadAnime.feadAnimeTwo > *{
    animation-duration: 8s;
}
.feadAnime > *:nth-child(1) {
    position: relative;
}
.slideAnime > *:nth-child(2) ,
.feadAnime > *:nth-child(2) {
    animation-delay: 4s;
}
.slideAnime > *:nth-child(3) ,
.feadAnime > *:nth-child(3) {
    animation-delay: 8s;
}
.slideAnime > *:nth-child(4) ,
.feadAnime > *:nth-child(4) {
    animation-delay: 12s;
}