/*
==============================================
move (메인스크롤)
==============================================
*/
.move{
	animation-name: move;
	-webkit-animation-name: move;	
	visibility: visible !important;	
}
@keyframes move {
	0% {
	opacity: 1;
	top:28px;
	}
	70%{
	opacity: 0.9;
	}
	100% {
	opacity: 0;
	top:40px;
	}
  }


/*
==============================================
swing 
==============================================
*/
@keyframes swing {
  
  0% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

/*
==============================================
swingswing
==============================================
*/
@keyframes swingswing { 
  20% { transform: rotate(15deg); } 
  40% { transform: rotate(-10deg); } 
  60% { transform: rotate(5deg); } 
  80% { transform: rotate(-5deg); } 
  100% { transform: rotate(0deg); } 
}


/*
==============================================
flower_effect
==============================================
*/
@keyframes flower_effect
{
    0%
    {
        opacity: 0;
        top: -10%;
        transform: translateX(20px) rotate(0deg);
    }
    10%
    {
        opacity: 1;
    }
    20%
    {
        transform: translateX(-20px) rotate(45deg);
    }
    40%
    {
        transform: translateX(-20px) rotate(90deg);
    }
    60%
    {
        transform: translateX(20px) rotate(135deg);
    }
    80%
    {
        transform: translateX(-20px) rotate(180deg);
    }
    100%
    {
        top: 110%;
        transform: translateX(-20px) rotate(225deg);
    }
}


@keyframes tail {
  0% {
    width: 0;
  }
  
  30% {
    width: 300px;
  }
  
  100% {
    width: 0;
  }
}


@keyframes shooting {
 0% {
    transform: translateX(0);
  }
  
  100% {
    transform: translateX(-300px);
  }
}


@keyframes glitter {
  0% {
    -webkit-transform: scale(0.6) ;
    opacity: 0.4;
  }
  25% {
    -webkit-transform: scale(0.8) ;
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.6);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.8);
    opacity: 0.4;
  }
}



/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  80% {
    -webkit-transform: translateY(1.4px);
            transform: translateY(1.4px);
  }
  90% {
    -webkit-transform: translateY(-1.4px);
            transform: translateY(-1.4px);
  }
}
@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  80% {
    -webkit-transform: translateY(1.4px);
            transform: translateY(1.4px);
  }
  90% {
    -webkit-transform: translateY(-1.4px);
            transform: translateY(-1.4px);
  }
}



/**
 * ----------------------------------------
 * @animation flicker
 * ----------------------------------------
 */
@-webkit-keyframes flicker {
  0% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.6;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0.6;
  }
  30% {
    opacity: 0.6;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0.6;
  }
  45% {
    opacity: 0.6;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0.6;
  }
  57% {
    opacity: 0.6;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0.6;
  }
  65% {
    opacity: 0.6;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0.6;
  }
  77% {
    opacity: 0.6;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0.6;
  }
  86% {
    opacity: 0.6;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flicker {
  0% {
    opacity: 0.6;
  }
  10% {
    opacity: 0.6;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0.6;
  }
  20% {
    opacity: 0.6;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0.6;
  }
  30% {
    opacity: 0.6;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0.6;
  }
  45% {
    opacity: 0.6;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0.6;
  }
  57% {
    opacity: 0.6;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0.6;
  }
  65% {
    opacity: 0.6;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0.6;
  }
  77% {
    opacity: 0.6;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0.6;
  }
  86% {
    opacity: 0.6;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  25%{
    -webkit-transform: translateX(5px);
        transform: translateX(5px);
  }
  55%{
    -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
  }
  75%{
    -webkit-transform: translateX(5px);
        transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  25%{
    -webkit-transform: translateX(5px);
        transform: translateX(5px);
  }
  55%{
    -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
  }
  75%{
    -webkit-transform: translateX(5px);
        transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
}