/*text-motion*/

/* 공통 설정 */
.j_motion.common_motion {opacity: 0;transition: transform 0.8s ease, opacity 0.4s;}
.j_motion.common_motion.on {opacity:1;}
/* 위에서 아래 */
.j_motion.top_to_bottom { transform: translateY(-25px); }
.j_motion.top_to_bottom.on { transform: translateY(0); opacity: 1; }

/* 아래에서 위 */
.j_motion.bottom_to_top { transform: translateY(25px); }
.j_motion.bottom_to_top.on { transform: translateY(0); opacity: 1; }

/* 왼쪽에서 오른쪽 */
.j_motion.left_to_right { transform: translateX(-25px); }
.j_motion.left_to_right.on { transform: translateX(0); opacity: 1; }

/* 오른쪽에서 왼쪽 */
.j_motion.right_to_left { transform: translateX(25px); }
.j_motion.right_to_left.on { transform: translateX(0); opacity: 1; }

/*효과*/
.masking {clip-path: inset(100% 0 0 0);  /* 초기 상태 - 완전 가림 */opacity: 0; /* 초기 상태 - 안 보임 */animation: revealDown 3.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;animation-delay: 0.5s;/* 1.5초 뒤에 시작 */}

.swirl-in-bck {-webkit-animation: swirl-in-bck 0.65s ease-out both;animation: swirl-in-bck 0.65s ease-out both;}

.stampDrop  {animation: stampDrop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;}

.slide-in-bck-center {transform: translateZ(600px);opacity: 0;}

.slide-in-bck-center.on{  animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.scale-in-hor-center {transform: scaleX(0);  opacity: 0;}

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

.blink {animation: blink-effect 2s step-end infinite;}

.blink2 {animation: blink2 1s linear infinite;}


.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;}

.ad01 { animation-delay: .2s !important; }
.ad02 { animation-delay: .4s !important; }
.ad03 { animation-delay: .6s !important; }
.ad04 { animation-delay: .8s !important; }
.ad05 { animation-delay: 1s !important; }
.ad06 { animation-delay: 1.2s !important; }
.ad07 { animation-delay: 1.4s !important; }
.ad08 { animation-delay: 1.6s !important; }
.ad09 { animation-delay: 1.8s !important; }
.ad10 { animation-delay: 2s !important; }
.ad11 { animation-delay: 2.2s !important; }


/*keyFrame*/

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


@keyframes revealDown {
  0% {
    clip-path: inset(100% 0 0 0); /* 위에서 아래로 마스킹됨 */
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0); /* 전체 보임 */
    opacity: 1;
  }
}

@-webkit-keyframes swirl-in-bck {
  0% {
    -webkit-transform: rotate(540deg) scale(5);
            transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@keyframes swirl-in-bck {
  0% {
    -webkit-transform: rotate(540deg) scale(5);
            transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}

@keyframes stampDrop {
  0% {
    transform: translateY(-300px) scaleY(1.2); /* 살짝 늘어진 채 위에서 */
    opacity: 0;
  }
  70% {
    transform: translateY(0) scaleY(0.9); /* 착지 + 눌림 */
    opacity: 1;
  }
  100% {
    transform: translateY(0) scaleY(1); /* 원래대로 복원 */
  }
}


@keyframes slide-in-bck-center {
  0% {
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

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

@keyframes popIn3D {
	from {
		transform: perspective(800px) translateZ(-300px) scale(0.8);
		opacity: 0;
	}
	to {
		transform: perspective(800px) translateZ(0) scale(1);
		opacity: 1;
	}
}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

@keyframes blink2 {
    0% { }
    25% { opacity: 0; }
    50% { opacity: 1; }
    100% { }
}