.pic-ctn {
    width: 100vw;
    height: 300px;
}

@media only screen and (min-width: 688px) {
    @keyframes display {
        0% {
            transform: translateX(200px);
            opacity: 0;
        }
        10% {
            transform: translateX(0);
            opacity: 1;
        }
        20% {
            transform: translateX(0);
            opacity: 1;
        }
        30% {
            transform: translateX(-200px);
            opacity: 0;
        }
        100% {
            transform: translateX(-200px);
            opacity: 0;
        }
    }
}

@media only screen and (max-width: 687px) {
    @keyframes display {
        0% {
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        20% {
            opacity: 1;
        }
        30% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
}

.pic-ctn {
    position: relative;
    width: 100vw;
    height: 300px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.pic-ctn>img {
    position: absolute;
    height: 300px;
    width: 300px;
    top: 0;
    left: calc(50% - 150px);
    opacity: 0;
    animation: display 15s infinite;
}

img:nth-child(2) {
    animation-delay: 3s;
}

img:nth-child(3) {
    animation-delay: 6s;
}

img:nth-child(4) {
    animation-delay: 9s;
}

img:nth-child(5) {
    animation-delay: 12s;
}