/* config var */
.slider{
    width: 100%;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.slider__content{
    min-width: 100%;
    position: absolute;
    top: 17px;
    left: 0;
    transform: translateX(100%);
}

.slider__content:nth-child(1){
    animation: sliderAnime 6s ease-in-out infinite;
    z-index: 6;
}

.slider__content:nth-child(2){
    animation: sliderAnime2 6s ease-in-out 1s infinite;
    z-index: -1;
}

.slider__content:nth-child(3){
    animation: sliderAnime2 6s ease-in-out 3s infinite;
    z-index: -1;
}

@keyframes sliderAnime{
    0%{
        z-index: 5;
        transform: translateX(0);
    }
    16.6%{
        transform: translateX(0);
    }
    33.3%{
        transform: translateX(-100%);
    }
    50%{
        z-index: -1;
        transform: translateX(-100%);
    }
    66.6%{
        transform: translateX(100%);
    }
    83.2%{
        z-index: 5;
        transform: translateX(100%);
    }
    100%{
        z-index: 5;
        transform: translateX(0);
    }
}

@keyframes sliderAnime2{
    0%{
        z-index: 5;
        transform: translateX(100%);
    }
    16.6%{
        transform: translateX(0);
    }
    33.3%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(-100%);
    }
    66.6%{
        z-index: -1;
        transform: translateX(-100%);
    }
    83.2%{
        transform: translateX(100%);
    }
    100%{
        z-index: 5;
        transform: translateX(100%);
    }
}

.slider__img{
    max-width: 100%;
    min-width: 100%;
}