.s1, .s2, .s3, .s4{
    display: block;
    position: absolute;
    width: 100%;
    height: 300px;
    z-index: -1;
    background-position: center;
    background-size: cover;
    text-align: center;
}
.s1{
    background-image: url(slide/p1.jpg);
    animation: fade1 20s infinite;
}
.s2{
    background-image: url(slide/p2.jpg);
    animation: fade2 20s infinite;
}
.s3{
    background-image: url(slide/p3.jpg);
    animation: fade3 20s infinite;
}
.s4{
    background-image: url(slide/p4.jpg);
    animation: fade4 20s infinite;
}
@keyframes fade1{
    0%{opacity: 1;}
    25%{opacity: 0;}
    50%{opacity: 0;}
    75%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes fade2{
    0%{opacity: 0;}
    25%{opacity: 1;}
    50%{opacity: 0;}
    75%{opacity: 0;}
    100%{opacity: 0;}
}
@keyframes fade3{
    0%{opacity: 0;}
    25%{opacity: 0;}
    50%{opacity: 1;}
    75%{opacity: 0;}
    100%{opacity: 0;}
}
@keyframes fade4{
    0%{opacity: 0;}
    25%{opacity: 0;}
    50%{opacity: 0;}
    75%{opacity: 1;}
    100%{opacity: 0;}
}