@charset "utf-8";

.swiper-wrapper{
  position: relative; 
}
.scroll-container{
    transform: rotate(90deg);
    position: absolute;   
    /* position: relative; */
    z-index: 40;
    bottom: 30px;
    left: 50%;
    /* transform-origin: right bottom; */
    /* transform: translateY(-50%, -50%); */
    /* -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);   */
}
/* @media(max-width: 450px){
  .scroll-container{
    bottom: 135px;
  }
} */

/* @media(max-width: 600px){
  .scroll-container{
    display: none;
  }
} */

.scroll-p{
    position: absolute;
    left: 50%;
    top: 10%;
    color: #36ff04;
    letter-spacing: 1px;
    font-size: large;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.scroll-p::after{
    content: '';
    display: block;
    /* width: 200%;
    height: auto; */
    width: 100px;
    height: 1px;
    background-color: #36ff04;
    transform: scale(1,1000000);
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 100%;
    
}
.scroll-p::after{
    transform: scaleX(0);
    animation: anim-mainVisualScroll 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes anim-mainVisualScroll {

    0% {
      transform: scaleX(0)
    }
    35% {
      transform: scaleX(1);
      transform-origin: left
    }
    40% {
      transform-origin: right
    }
    50% {
      transform: scaleX(1)
    }
    85% {
      transform: scaleX(0);
      transform-origin: right
    }
    100% {
      transform-origin: left
    }
  }

  @media(max-width: 700px){
    .scroll-p{
      font-size: .9rem;
      /* top: 20%; */
    }
    .scroll-container{
      bottom: 120px;
      left: 99%;
  }
  }