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


/*
==============================================
rotate
==============================================
*/

.rotate {
  -webkit-animation-name: rotate;
  animation-name: rotate;
}
@keyframes rotate{
	100%{transform:rotate(360deg);}
}

@-webkit-keyframes rotate {
	100%{
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

/*
==============================================
feather_effect
==============================================
*/
@keyframes feather_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);
    }
}

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


/**
 * ----------------------------------------
 * @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 fade-in-top
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-245px);
            transform: translateY(-245px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-245px);
            transform: translateY(-245px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}






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


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


@keyframes bounce{
   0%{
     transform:translate(0,0);
     -webkit-transform: translate(0,0)
  }
   100%{
     transform:translate(0,15px);
     -webkit-transform: translate(0,15px)
   }
}  



@keyframes opacity{
   0%{
     opacity: 0.7;
  }
   100%{
     opacity: 1;
   }
}