﻿.loop_wrap {
  display: flex;
  flex-direction: column;
  width: 230px;
  height: 850px;
  overflow: hidden;
  margin : 20px 0px;
}

.loop_wrap ul {
  width: 100%;
  height: auto;
  padding : 0px;
  margin : 0px;
}

.loop_wrap li {
  list-style-type: none;
  text-align: center;
  height: 70px;
  display:flex;
  align-items: center;
  justify-content: center;
}

@keyframes loop {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-200%);
  }
}

.loop_wrap ul:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap ul:last-child {
  animation: loop2 50s linear infinite;
}

.loop_wrap:hover ul {
  animation-play-state: paused;
}