@charset "utf-8";

#wrap_scroll {
  position: absolute; bottom:0; left:30px; transform: translate(-50%, -50%); z-index: 115;
  display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.scroll-text {
  position: absolute; display: inline-block; font-size: 10px;
  transform: rotate(-90deg); top: -50px;
}
.scroll-circle {
  position: absolute; width:8px; height:8px; border-radius: 50%;
  top: 0%; left: 50%; transform: translate(-50%, 0);
  animation:scroll_circle 2s ease infinite;
}


.scroll-line { position: relative; width:1px; height:100px; background-color: rgba(255,255,255,0.2); }
.scroll-text { color: #fff; }
.scroll-circle { background-color: #fff;}

@keyframes scroll_circle {
  0% { opacity:0  }
  20% { top: 0%; opacity:0  }
  25% { top: 0%; opacity:1;  }
  97% { top:95%; opacity: 1}
  100% { top:100%; opacity: 0}
}