/* CSS Document */
/*http://blog.shihshih.com/pure-css-slider/   */
/*https://chiayilai.com/%E8%B6%85%E7%B4%9A%E7%B0%A1%E5%96%AE%E7%9A%84%E7%B4%94-css-%E5%9C%96%E7%89%87%E8%BC%AA%E6%92%AD/ */
.slider_container {
  margin: 30px auto;
  width: 700px;
  height: 200px;
  position: relative;
  border: 0px solid;
}
.slider_container div {
  position: absolute;
  left: 12px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-animation: round 21s linear infinite;
  animation: round 21s linear infinite;
}
.slider_container div img {
  width: 100%;
  height: auto;
  display: block;
}
@-webkit-keyframes round {
  3% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 0 - 1¬í ²H¤J*/
  }
  14% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 1- 5¬íÀR¤î*/
  }
  20% {
    opacity: 0;
    filter: alpha(opacity=0);
    /* 5-6¬í²H¥X*/
  }
}
@keyframes round {
  4% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 0 - 1¬í ²H¤J*/
  }
  14% {
    opacity: 1;
    filter: alpha(opacity=100);
    /* 1- 5¬íÀR¤î*/
  }
  20% {
    opacity: 0;
    filter: alpha(opacity=0);
    /* 5-6¬í²H¥X*/
  }
}

.slider_container div:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.slider_container div:nth-child(6) {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.slider_container div:nth-child(5) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
.slider_container div:nth-child(4) {
  -webkit-animation-delay: 9s;
  animation-delay: 9s;
}
.slider_container div:nth-child(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}
.slider_container div:nth-child(2) {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}
.slider_container div:nth-child(1) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}

.slider_container span {
  color: #000;
  background: #fff;
  position: absolute;
  left: 0%; 
  width: 700px;
  height: 200px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}