@charset "utf-8";
/* CSS Document */

body {
    margin: 0px;
    padding: 0px;
}
img {
    width: 100%;
    height: auto;
}
.logopng {
    position: absolute;
    z-index: 9;
    right: 0;
    left: 0;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 55px;
}

    .loop_wrap {
    display: flex;
    width: 100vw;
    height: 580px;
    overflow-x: hidden;
    overflow-y: 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;
}

@media screen and (max-width:600px){
.loop_wrap {
    display: flex;
    width: 100vw;
    overflow: hidden;
    height: 90vh;
}
.logopng {
    position: absolute;
    z-index: 9;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 55px;
    width: 50%;
}
}