.lefttxt {
    position: absolute;
    animation: 2s textAnimation forwards;
  }

  @keyframes textAnimation {
    0% {
      left: -500px;
    }
    100% {
      left: 0;
    }
  }
  

/* Fade in up */

.word{
  overflow: hidden;
  animation: reveal-in 1.2s  both;
  animation-delay: calc( .2s * var(--line-index) ); 
  opacity: 0.1;
  transition: 2s;

 }



@keyframes reveal-in {
  0% {
    transform: translateY(100%); 
    visibility: hidden;
  }
  100% {
    transform: translateY(0%); 
   opacity: 1;
    visibility: visible;
  }
 }




.scale-in-hor-left {
	-webkit-animation: scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}





/*페이드 인*/

.letterani {
    display: flex;
    justify-content: center;
    align-items: center;
}

.letterani span {
    letter-spacing: 3px;
    display: inline-block;
    opacity: 0;
    text-transform: uppercase;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;
}

.letterani  span:nth-child(1) {
    animation-delay: 0.2s;
    animation-name: fadeInLeft;
}

.letterani span:nth-child(2) {
    animation-delay: 0.4s;
    animation-name: fadeInLeft;
}

.letterani  span:nth-child(3) {
    animation-delay: 0.6s;
    animation-name: fadeInLeft;
}

.letterani span:nth-child(4) {
    animation-delay: 0.8s;
    animation-name: fadeInLeft;
}

.letterani span:nth-child(5) {
    animation-delay: 1s;
    animation-name: fadeInLeft;
}

.letterani span:nth-child(10) {
    animation-delay: 0s;
    animation-name: fadeInRight;
}

.letterani  span:nth-child(9) {
    animation-delay: 0.2s;
    animation-name: fadeInRight;
}

.letterani  span:nth-child(8) {
    animation-delay: 0.4s;
    animation-name: fadeInRight;
}

.letterani span:nth-child(7) {
    animation-delay: 0.6s;
    animation-name: fadeInRight;
}

.letterani  span:nth-child(6) {
    animation-delay: 0.8s;
    animation-name: fadeInRight;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(10%, 30%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-10%, -30%, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}



/*reveal  CSS 옆에서 서서히 등장하는 효과*/



/*이미지 다 감싸는 배경*/
.reveal {
    position: relative;
}


@keyframes reveal {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
    }
}


/*오른쪽으로 가는 애니*/


[data-aos="reveal-right"]:before {
     content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    transform-origin: top right;
    z-index: 2;
    transform: scale(1, 1);
    transition: transform 0.9s cubic-bezier(0.84, -0.01, 0.48, 0.995);
}


[data-aos="reveal-right"] .image-bg {
 position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center center;
    transform: translate(-40px, 0);
    transition: transform 0.9s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
}

/*애니적용후*/

[data-aos="reveal-right"].aos-animate .image-bg {
       transform: translate(0, 0);
}


[data-aos="reveal-right"].aos-animate:before{
      transform: scale(0, 1);
}


/*왼쪽으로 가는 애니*/


[data-aos="reveal-left"]:before {
     content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    transform-origin: top left;
    z-index: 2;
    transform: scale(1, 1);
    transition: transform 1.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
}


[data-aos="reveal-left"] .image-bg {
 position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center center;
    transform: translate(0, -40px);
    transition: transform 1s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
}

/*애니적용후*/

[data-aos="reveal-left"].aos-animate .image-bg {
       transform: translate(0, 0);
}


[data-aos="reveal-left"].aos-animate:before{
      transform: scale(0, 1);
}




/*hover effect*/