.con{
width: 500px;
height: 320px;
/*border: 5px solid red;*/
margin: 0 auto;
padding: 20px;
/*margin: 50px auto;*/
overflow: hidden;
/*position: relative;*/
}



.imgBanner{
position: absolute;
width: 500px;
height: 320px;
margin: 0 auto;
animation: mm 25s infinite;
-webkit-animation: mm 25s infinite;
opacity: 0;
}


@keyframes mm{
10%{opacity:1;}
50%{opacity:0;}
}

@-webkit-keyframes{
10%{opacity:1;}
50%{opacity:0;}
}

img:nth-child(0) {animation-delay: 0s;-webkit-animation-delay: 0s;}
img:nth-child(1) {animation-delay: 05s;-webkit-animation-delay: 05s;}
img:nth-child(2) {animation-delay: 10s;-webkit-animation-delay: 10s;}
img:nth-child(3) {animation-delay: 15s;-webkit-animation-delay: 15s;}
img:nth-child(4) {animation-delay: 20s;-webkit-animation-delay: 20s;}


@media screen and (max-width: 630px) {

.con{
width: 299px;
height: 225px;

}

.imgBanner{
width: 299px;
height: 225px;
}
}

@media screen and (max-width: 400px) {

.con{
width: 199px;
height: 150px;

}

.imgBanner{
width: 199px;
height: 150px;
}
}