/* 공통 CSS */
@charset "utf-8";

.animation-shake {
	animation-name: kf-shake; 
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
}

.animation-twinkle {
	animation-name: kf-twinkle; 
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
}

.animation-exist-approval {
	animation-name: kf-exist-approval; 
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
}

.animation-dialog-alert {
	animation-name: kf-dialog-alert-shake; 
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
}

@keyframes kf-shake {
	25% { transform: rotate(-25deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(25deg); }
}

@keyframes kf-twinkle {
	0% { opacity: 1; }
	10% { opacity: 0.3;}
	25% { opacity: 1;}
	35% { opacity: 0.3;}
	55% { opacity: 1;}
}

@keyframes kf-exist-approval {
	 0% { color: #666666; }
	10% { color: lawngreen; }
	25% { color: #666666; }
	35% { color: lawngreen; }
	55% { color: #666666; }
}

@keyframes kf-dialog-alert-shake {
	 8% { transform: rotate(-25deg); }
	16% { transform: rotate(0deg); }
	24% { transform: rotate(25deg); }
	32% { transform: rotate(0deg); }
	40% { transform: rotate(-25deg); }
	48% { transform: rotate(0deg); }
	56% { transform: rotate(25deg); }
	64% { transform: rotate(0deg); }
}