.fadein {
    opacity: 0.1;
    transform: translate(0, 50px);
    transition: all 800ms cubic-bezier(.17,.67,.67,.91);
}
.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
  }


  .recommend-txt::after {
    animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
  }

  @media screen and (min-width: 768px) {
    .recommend-txt::after {
        animation: pathmove-pc 1.4s ease-in-out infinite;
      } 
  }

  @keyframes pathmove{
	0%{
		height:0;
		bottom:0;
		opacity: 0;
	}
	30%{
		height:55px;
		opacity: 1;
	}
	100%{
		bottom:-25px;
		opacity: 0;
	}
}



@keyframes pathmove-pc{
	0%{
		height:0;
		bottom:0;
		opacity: 0;
	}
	30%{
		height:55px;
		opacity: 1;
	}
	100%{
		bottom:-40px;
		opacity: 0;
	}
}


.w-main.fadein .w-top {
    opacity: 0.1;
    transform: translate(0, -100px);
    transition: all 800ms cubic-bezier(.17,.67,.67,.91);
}

.w-main.fadein.scrollin .w-top,
.w-main.fadein.scrollin .w-left,
.w-main.fadein.scrollin .w-right {
    transform: translate(0, 0);
    opacity: 1;
}

.w-main.fadein .w-left {
    opacity: 0.1;
    transform: translate(-100px,0);
    transition: all 800ms cubic-bezier(.17,.67,.67,.91);
}


.w-main.fadein .w-right {
    opacity: 0.1;
    transform: translate(100px,0);
    transition: all 800ms cubic-bezier(.17,.67,.67,.91);
}


.w-main.fadein .w-text {
    opacity: 0.1;
    transform: translate(20%,0);
    transition-duration: 800ms;
}

.w-main.fadein.scrollin .w-text {
    opacity: 1;
    transform: translate(0,0);
}
