@keyframes aaaa{
	0%{
		opacity: 0;
	}
	to{ 
		opacity: 1;
	}
}
@keyframes bbbb{
	0%{
		transform: translateX(-100px);
		opacity: 0;
	}
	to{ 
		opacity: 1;
	}
}
@keyframes cccc{
	0%{
		transform: translateX(-400px);
		opacity: 0;
	}
	to{ 
		opacity: 1;
	}
}
@keyframes dddd{
	0%{
		transform: translateX(-500px);
		opacity: 0;
	}
	to{ 
		opacity: 1;
	}
}
@keyframes eeee{
	0%{
		color: #fff;
	}
	to{ 
		color: #000;
	}
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fade {
 from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*<----------------------------------------------------->*/
.index_program-program-box,
.index_program-title,
.index_program-program-title{
	opacity: 0;
}
.index_activity-title-box.active{
	animation: aaaa 1s ease both;
}
.index_program-program-title.active{
	animation: fadeInUp .8s ease 0s 1 both;
}
.index_program-program-box.active:nth-child(3n+1){
	animation: fadeInRight 1s ease 0s 1 forwards ;
}
.index_program-program-box.active:nth-child(3n+2){
	animation: fade 1s ease 0s 1 forwards;
}
.index_program-program-box.active:nth-child(3n+3){
	animation:  fadeInLeft 1s ease 0s 1 forwards ;
}
.index_program-title.active{
	animation: bounceInRight 1s ease 0s 1 forwards;
}


/*<--------------------------------------------->*/
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  100%{
  	opacity: 1;
  	-webkit-transform: scale3d(0, 0, 0) translate3d(0, 0px, 0);
    transform: scale3d(0, 0, 0) translate3d(0, 0px, 0);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
    animation-timing-function:cubic-bezier(0, 0, 0, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
    	opacity: 1;
        transform: translate3d(0px,0,0)
    }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@media only screen and (max-width: 1000px){
	.index_program-title,
	.index_activity-title-box,
	.index_program-program-box,
	.index_program-program-title,
	.index_program-title{
		animation: none!important;
		opacity: 1!important;
	}

}