@charset "UTF-8";
body {
    text-align: center;
    background-color: #f0f8ff;
    color: #000000; 
    width:1000px;
    table-align: center;
    margin-left: auto;
    margin-right: auto;
}
p {
    color: #000000;
}

li {
    color: #000000;
    text-align:left;
}
h1 {
    color: #000000;
}
h2 {
    color: #000000;
}

a {
    font-size: 20px;
    color: #0000cd;
    height: 100%;
}
br {
    color: #000000;
}
h3 {
    color: #FF0004;
}
table {
    text-align: center;
}


.loop_wrap {
  display: flex;
  width: 100vw;
  height: 250px;
  overflow: hidden;
}

.loop_wrap img {
  width: auto;
  height: 100%;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}