@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);
	}
}