/*=========================================================
  14 -> Banner
*===========================================================*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.banner2{
  width: 1500px;
  height: 500px;
  border: 1px solid #b30000;
  margin: auto;

  

  animation: banner2 10s infinite linear alternate;
  
  background-size: 100% 100%;

   
}

@keyframes banner2{
  0%, 30%{
    background-image: url("img/banner/4.jpg");
    opacity: 1;
  }
  31%, 34% {
    opacity: 0.5;
  }
  35%, 65% {
    background-image: url("img/banner/5.jpg");
    opacity: 1;
  }
  66%, 69% {
    opacity: 0.5;
  }
  70%, 100% {
   
    background-image: url(img/banner/6.jpg);
  }
}

@media only screen and (min-width: 10px) and (max-width: 700px)
{
  .banner2{
    width: 400px;
    height: 250px;
  }
}