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

.scroll {
  display: inline-block;
  position: absolute;
  top: 20%;
  left: 55%;
  z-index: 2;
  height:220px;
  overflow: hidden;
  /*color: #000;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;*/
}
.scroll::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  width: 1px;
  height: 220px;
  background: #000;
}

.scroll::after {
  animation: sdl 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


.scroll-left {
  display: inline-block;
  position: absolute;
  top: 20%;
  left: 30%;
  z-index: 2;
  height:220px;
  overflow: hidden;
  /*color: #000;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;*/
}
.scroll-left::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  width: 1px;
  height: 220px;
  background: #000;
}

.scroll-left::after {
  animation: sdl 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}