/*text-motion*/

/*totop*/
.ttp_motion.common_motion{transform: translateY(25px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.ttp_motion.common_motion.on {transform: translateY(0);opacity: 1;}

/*tobottom*/
.ttp_motion.top_to_bottom {transform: translateY(-25px); /* 위에서 아래로 나타나기 위한 초기 위치 */opacity: 0;transition: transform .8s ease, opacity .4s;}
.ttp_motion.top_to_bottom.on {transform: translateY(0); /* 원위치 */ opacity: 1;}

/*toright*/
.ttp_motion.left_to_right {transform: translateX(-25px); /* 왼쪽에서 오른쪽으로 나타나기 위한 초기 위치 */opacity: 0;transition: transform .8s ease, opacity .4s;}
.ttp_motion.left_to_right.on {transform: translateX(0); /* 원위치 */opacity: 1;}

/*toleft*/
.ttp_motion.right_to_left {transform: translateX(25px); /* 오른쪽에서 왼쪽으로 나타나기 위한 초기 위치 */ opacity: 0;transition: transform .8s ease, opacity .4s;}
.ttp_motion.right_to_left.on {transform: translateX(0); /* 원위치 */opacity: 1;}

.j_delay_01{transition-delay: .2s !important;}
.j_delay_02{transition-delay: .4s !important;}
.j_delay_03{transition-delay: .6s !important;}
.j_delay_04{transition-delay: .8s !important;}
.j_delay_05{transition-delay: 1s !important;}
.j_delay_06{transition-delay: 1.2s !important;}
.j_delay_07{transition-delay: 1.4s !important;}
.j_delay_08{transition-delay: 1.6s !important;}
.j_delay_09{transition-delay: 1.8s !important;}
.j_delay_10{transition-delay: 2s !important;}
.j_delay_11{transition-delay: 2.2s !important;}

.blinking {animation: blink 1s infinite; /* 1초 간격으로 무한 반복 */}
@keyframes blink { 0%, 100% { opacity: 1; /* 시작과 끝 투명도 100% */}50% { opacity: 0; /* 중간에 완전히 투명 */ }}
@keyframes mv_bg{ 0%{transform:scale(1.1);}100%{transform:scale(1);}}

@keyframes logo_motion{ 0%{left:0;}	100%{left:-100%;}	}
@keyframes logo_motion02{ 0%{left:-100%;}	100%{left:0;}	}

.ttp_motion.on .track_up {
	-webkit-animation: track_up 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: track_up 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
			
}



@-webkit-keyframes track_up {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(-500px);
            transform: translateZ(-700px) translateY(-500px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes track_up {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(-500px);
            transform: translateZ(-700px) translateY(-500px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

.ttp_motion.on .slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.ttp_motion.on .slide-in-top02 {
	-webkit-animation: slide-in-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.ttp_motion.on .slide-in-top03 {
	-webkit-animation: slide-in-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.bounce-in-top{animation:bounce-in-top 1.1s both}

@keyframes bounce-in-top {
  0% {
    transform: translate(-50%, -50%) translateY(-500px); /* 초기 위치에서 위로 떨어짐 */
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translate(-50%, -50%) translateY(0); /* 원위치로 돌아옴 */
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translate(-50%, -50%) translateY(-65px); /* 위로 튕기기 */
    animation-timing-function: ease-in;
  }
  72% {
    transform: translate(-50%, -50%) translateY(0); /* 다시 원위치 */
    animation-timing-function: ease-out;
  }
  81% {
    transform: translate(-50%, -50%) translateY(-28px); /* 다시 튕기기 */
    animation-timing-function: ease-in;
  }
  90% {
    transform: translate(-50%, -50%) translateY(0); /* 다시 원위치 */
    animation-timing-function: ease-out;
  }
  95% {
    transform: translate(-50%, -50%) translateY(-8px); /* 마지막 튕기기 */
    animation-timing-function: ease-in;
  }
  100% {
    transform: translate(-50%, -50%) translateY(0); /* 최종 원위치 */
    animation-timing-function: ease-out;
  }
}

@keyframes rotate_circle{ 
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

.bounce-top {
	-webkit-animation: bounce-top 0.9s ease-in both;
	        animation: bounce-top 0.9s ease-in both;
}


@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}