@keyframes fadeInTop {
	0% {
		transform: translateY(-10%);
		opacity: 0;
	}

	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

@keyframes moveBgTop2Bottom {
	0% {
		background-position: 0% -1200%;
	}
	100% {
		background-position: 0% 1200%;
	}
}

@keyframes moveGradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes slideToRight {
	0% {
		transform: translateX(-40%);
		opacity: 0;
	}

	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

@keyframes fadeToRight {
	0% {
		background-size: 0% 100%;
	}
	100% {
		background-size: 100% 100%;
	}
}

/* 폭죽 머리 */
@keyframes fireWorksHead {
	0% {
		background-size: 0% 0%;
		opacity: 0;
	}

	17.5% {
		background-size: 0% 0%;
		filter: blur(0);
		opacity: 0;
	}

	50% {
		filter: blur(2px) drop-shadow(0 0 10px #fff895);
		opacity: 1;
	}

	65% {
		opacity: 0;
	}

	100% {
		background-size: 150% 150%;
		opacity: 0;
	}
}

/* 폭죽몸통 */
@keyframes fireWorksBody {
	0% {
		background-position: center bottom;
		background-size: 50% 0%;
		opacity: 0;
		filter: blur(4px);
	}

	12.5% {
		background-size: 50% 80%;
		background-position: center top;
	}

	20% {
		filter: blur(2px) drop-shadow(0 0 10px #fff895);
		opacity: 1;
	}

	26% {
		background-position: center top;
		opacity: 0;
	}

	30% {
		background-size: 50% 0%;
		opacity: 0;
	}

	100% {
		background-position: center bottom;
		opacity: 0;
	}
}

@keyframes slideToDiagonal {
	0% {
		transform: translate(100%, 100%) rotate(-180deg) scale(0);
	}
	100% {
		transform: translate(0%, 0%) rotate(0deg) scale(1);
	}
}

@keyframes shockwaveJump02 {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.1);
	}
	50% {
		transform: scale(0.98);
	}
	55% {
		transform: scale(1.05);
	}
	60% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(1);
	}
}

/* card move */

@keyframes moveCard01 {
	0% {
		bottom: -1%;
		right: 9%;
	}
	100% {
		bottom: 49%;
		right: 69%;
	}
}
@keyframes moveCard01Img {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	2% {
		opacity: 0;
		transform: scale(0.8);
	}
	5% {
		opacity: 1;
		transform: scale(0.8);
	}
	75% {
		opacity: 1;
		transform: scale(1);
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes moveCard02 {
	0% {
		bottom: 7%;
		right: 0;
	}
	100% {
		bottom: 41%;
		right: 80%;
	}
}
@keyframes moveCard02Img {
	0% {
		transform: rotate(45deg) scale(0.8);
		filter: blur(2px);
		opacity: 0;
	}
	2% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	30% {
		transform: rotate(45deg) scale(0.8);
		filter: blur(0px);
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		transform: rotate(40deg) scale(1);
		filter: blur(2px);
		opacity: 0;
	}
}

@keyframes moveCard03 {
	0% {
		bottom: 5%;
		right: 0;
	}
	100% {
		bottom: 55%;
		right: 40%;
	}
}

@keyframes moveCard03Img {
	0% {
		transform: rotate(55deg) scale(0.8);
		filter: blur(4px);
		opacity: 0;
	}
	2% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	30% {
		transform: rotate(55deg) scale(0.8);
		filter: blur(0px);
	}
	75% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		transform: rotate(75deg) scale(1);
		filter: blur(2px);
		opacity: 0;
	}
}

@keyframes moveCard04 {
	0% {
		bottom: -11%;
		right: 1%;
	}
	10% {
		bottom: -4%;
		right: 20%;
	}

	100% {
		bottom: 0%;
		right: 75%;
	}
}

@keyframes moveCard04Img {
	0% {
		transform: rotate(-13deg) scale(0.9);
		opacity: 0;
	}
	2% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		transform: rotate(-74deg) scale(1);
		opacity: 0;
	}
}

@keyframes moveCard05 {
	0% {
		bottom: -3%;
		right: 0;
	}
	100% {
		bottom: 39%;
		right: 45%;
	}
}

@keyframes moveCard05Img {
	0% {
		transform: rotate(-35deg);
		opacity: 0;
	}
	2% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		transform: rotate(15deg);
		opacity: 0;
	}
}

/* wiggle02 */

@keyframes wiggle02 {
	0% {
		transform: rotate(-3deg);
	}
	40% {
		transform: rotate(-30deg);
	}
	100% {
		transform: rotate(0);
	}
}

/* twinkleAnimate */
@keyframes twinkleAnimate {
	0% {
		filter: brightness(1);
		transform: scale(0.7);
	}
	50% {
		filter: brightness(1.5);
		transform: scale(1);
	}
	100% {
		filter: brightness(1.1);
		transform: scale(0.9);
	}
}

@keyframes flip02 {
	0% {
		transform: perspective(700px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(700px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(700px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(700px) rotateY(360deg) scale(0.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(700px) scale(1);
		animation-timing-function: ease-in;
	}
}

@media (max-width: 767px) {
	@keyframes bounce2 {
		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-60%);
		}
		60% {
			transform: translateY(-30%);
		}
	}
}