@charset "UTF-8";

.container{
  width: 100vw;
  height: 30vw;
  position: relative;
}

.image{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 44s infinite;
}

.src1{
  background-image: url(../slideshow/00.jpg);
}
.src2{
  background-image: url(../slideshow/01.jpg);
}
.src3{
  background-image: url(../slideshow/02.jpg);
}
.src4{
  background-image: url(../slideshow/03.jpg);
}
.src5{
  background-image: url(../slideshow/04.jpg);
}
.src6{
  background-image: url(../slideshow/05.jpg);
}
.src7{
  background-image: url(../slideshow/06.jpg);
}
.src8{
  background-image: url(../slideshow/07.jpg);
}
.src9{
  background-image: url(../slideshow/08.jpg);
}
.src10{
  background-image: url(../slideshow/09.jpg);
}
.src11{
  background-image: url(../slideshow/10.jpg);
}


.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 4s;
}
.image:nth-of-type(3) {
  animation-delay: 8s;
}
.image:nth-of-type(4) {
  animation-delay: 12s;
}
.image:nth-of-type(5) {
  animation-delay: 16s;
}
.image:nth-of-type(6) {
  animation-delay: 20s;
}
.image:nth-of-type(7) {
  animation-delay: 24s;
}
.image:nth-of-type(8) {
  animation-delay: 28s;
}
.image:nth-of-type(9) {
  animation-delay: 32s;
}
.image:nth-of-type(10) {
  animation-delay: 36s;
}
.image:nth-of-type(11) {
  animation-delay: 40s;
}


@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  10%{ opacity: 1;}
  20%{ opacity: 0;}
  100%{ opacity: 0;}
}