@charset "UTF-8";

.bigSizeToSmallSize {
	animation-name: bigSizeToSmallSize;
	animation-duration: 0.4s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-delay: 0.6s;
}

.bigSizeToSmallSizeDelaySlow {
	animation-name: bigSizeToSmallSize;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-delay: 1.5s;
}

@keyframes bigSizeToSmallSize {
	0% {
		opacity: 0;
		transform: scale(10.0);
	}

	50% {
		transform: scale(1.0);
	}

	70% {
		transform: scale(1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1.0);
	}
}

.change2ColorYellowRed {
	animation-name: change2ColorYellowRed;
	animation-duration: 1.7s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes change2ColorYellowRed {
	0% {
		color: #F2B12F;
	}

	50% {
		color: red;
	}

	100% {
		color: #F2B12F;
	}
}

/* 배경 칼라 변경 */
.changeBg2ColorYellowRed {
	animation-name: changeBg2ColorYellowRed;
	animation-duration: 1.7s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes changeBg2ColorYellowRed {
	0% {
		background: #F2B12F;
	}

	50% {
		background: white;
	}

	100% {
		background: #F2B12F;
	}
}

.change2ColorBlueRed {
	animation-name: change2ColorBlueRed;
	animation-duration: 1.7s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes change2ColorBlueRed {
	0% {
		color: blue;
	}

	50% {
		color: red;
	}

	100% {
		color: blue;
	}
}

/* 가로사이즈 줄었다 늘렸다 */
.widthSmallToBigSize {
	animation-name: widthSmallToBigSize;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes widthSmallToBigSize {
	0% {
		transform: scale(0.5, 1);
	}

	50% {
		transform: scale(1, 1);
	}

	100% {
		transform: scale(0.5, 1);
	}
}

/* 상하 마진 이동 */
.moveMarginTopToBottom {
	animation-name: moveMarginTopToBottom;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes moveMarginTopToBottom {
	0% {
		margin-top: 345px;
	}

	50% {
		margin-top: 346px;
	}

	100% {
		margin-top: 345px;
	}
}

/* 3체인지 메세지 */
.fadeIn3ChangeMsg {
	animation-name: fadeIn3ChangeMsg;
	animation-duration: 12s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes fadeIn3ChangeMsg {
	0% {
		transform: scale(1.0);
	}

	16.6% {
		transform: scale(1.05);
	}

	33.2% {
		transform: scale(1.0);
	}

	49.8% {
		transform: scale(1.05);
	}

	66.4% {
		transform: scale(1.0);
	}

	83% {
		transform: scale(1.05);
	}

	96.6% {
		transform: scale(1.0);
	}
}

/* 페이드인 */
.fadeIn {
	animation-name: fadeIn;
	animation-delay: 0.3s;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* 3체인지 메세지 */
.objectShake {
	animation-name: objectShake;
	animation-duration: 0.1s;
	animation-timing-function: normal;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes objectShake {
	0% {
		margin-left: 0px;
		margin-top: 0px;
	}

	100% {
		margin-left: 2px;
		margin-top: 2px;
	}
}

.moveLoopLeftToRightRotate {
	animation-name: moveLoopLeftToRightRotate;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes moveLoopLeftToRightRotate {
	0% {
		transform: translateX(0px) rotateY(0deg);
	}

	45% {
		transform: translateX(-80px) rotateY(0deg);
	}

	50% {
		transform: translateX(-80px) rotateY(180deg);
	}

	95% {
		transform: translateX(0px) rotateY(180deg);
	}

	100% {
		transform: translateX(0px) rotateY(0deg);
	}
}


.moveLoopTopToBottom {
	animation-name: moveLoopTopToBottom;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes moveLoopTopToBottom {
	0% {
		transform: translateY(20px);
	}

	50% {
		transform: translateY(300px);
	}

	100% {
		transform: translateY(20px);
	}
}


.infiniteRotation {
	animation-name: infiniteRotation;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes infiniteRotation {

	100% {
		transform: rotate(360deg);
	}
}

.blink-animate {
	animation: blink 1s ease-in-out infinite;
}

.blink-animate-well {
	animation: blink-well 1s ease-in-out infinite;
}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.2;
	}
}

@keyframes blink-well {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}