.slider {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
}

.slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    animation: slider 12.5s infinite;
}

.slider .slide:nth-child(1) {
    background-image: url('/images/pbg1.jpg');
    animation-delay: 0s;
}

.slider .slide:nth-child(2) {
    background-image: url('/images/pbg2.jpg');
    animation-delay: -5s;
}

.slider .slide:nth-child(3) {
    background-image: url('/images/pbg3.jpg');
    animation-delay: -10s;
}

.slider .slide:nth-child(4) {
    background-image: url('/images/pbg4.jpg');
    animation-delay: -15s;
}

.slider .slide:nth-child(5) {
    background-image: url('/images/pbg5.jpg');
    animation-delay: -20s;
}
.slider .slide:nth-child(6) {
    background-image: url('/images/pbg6.jpg');
    animation-delay: -25s;
}

@keyframes slider {
    0%, 16%, 100% {
        transform: translateX(0);
        animation-timing-function: ease;
    }
    20% {
        transform: translateX(-100%);
        animation-timing-function: step-end;
    }
    96% {
        transform: translateX(100%);
        animation-timing-function: ease;
    }
}
.slider1 {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
}

.slider1 .slide1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    animation: slider 12.5s infinite;
}

.slider1 .slide1:nth-child(1) {
    background-image: url('/images/pbg1.jpg');
    animation-delay: 0s;
}

.slider1 .slide1:nth-child(2) {
    background-image: url('/images/pbg2.jpg');
    animation-delay: -5s;
}

.slider1 .slide1:nth-child(3) {
    background-image: url('/images/pbg3.jpg');
    animation-delay: -10s;
}

.slider1 .slide1:nth-child(4) {
    background-image: url('/images/pbg4.jpg');
    animation-delay: -15s;
}

.slider1 .slide1:nth-child(5) {
    background-image: url('/images/pbg5.jpg');
    animation-delay: -20s;
}
.slider1 .slide1:nth-child(6) {
    background-image: url('/images/pbg6.jpg');
    animation-delay: -25s;
}

@keyframes slider1 {
    0%, 16%, 100% {
        transform: translateX(0);
        animation-timing-function: ease;
    }
    20% {
        transform: translateX(-100%);
        animation-timing-function: step-end;
    }
    96% {
        transform: translateX(100%);
        animation-timing-function: ease;
    }
}