.catch{
    display:none;
  }

.u-fade-type-left{ transform: translateX(-100px); opacity: 0;}
.u-fade-type-left.is-active{ transition: 1s; transform: translateX(0);  opacity: 1; }

.u-fade-type-right{ transform: translateX(100px);  opacity: 0; }
.u-fade-type-right.is-active{  transition: 1s; transform: translateX(0);  opacity: 1; }

.u-fade-type-down{  transform: translateY(50px); opacity: 0; }
.u-fade-type-down.is-active{transform: translateY(0); opacity: 1; }

.u-fade-type-up{  transform: translateY(50px);  opacity: 0; }
.u-fade-type-up.is-active{  transition: 1s;  transform: translateY(0); opacity: 1; }

.u-fade-type-static{ opacity: 0; }
.u-fade-type-static.is-active{opacity: 1; }

.delay0{transition-delay: 0s; transition-duration: 1s; }
.delay1{transition-delay: 0.3s; transition-duration: 1s; }
.delay2{transition-delay: 0.7s; transition-duration: 1s; }
.delay3{transition-delay: 1s; transition-duration: 1s; }
.delay4{transition-delay: 1.5s; transition-duration: 1s; }
.delay5{transition-delay: 1.8s; transition-duration: 1s; }





/*animaion**************************************************************************************/

/*section0*/
.is-active #ani0-a{animation-name: ani0 ; animation-delay: 0s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-b{animation-name: ani0 ; animation-delay: 0.1s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-c{animation-name: ani0 ; animation-delay: 0.2s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-d{animation-name: ani0 ; animation-delay: 0.3s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-e{animation-name: ani0 ; animation-delay: 0.4s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-f{animation-name: ani0 ; animation-delay: 0.5s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-g{animation-name: ani0 ; animation-delay: 0.6s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-h{animation-name: ani0 ; animation-delay: 0.7s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani0-i{animation-name: ani0 ; animation-delay: 0.8s; animation-duration:0.3s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani0{
	0%,100%{transform:none; scale:1}
	50%{transform:translate3d(0,-10%,0); scale:1.5}
}

 

/*section1*/
.is-active #ani1-a{animation-name: ani1-1 ; animation-delay: 0.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani1-c{animation-name: ani1-1 ; animation-delay: 1s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani1-e{animation-name: ani1-1 ; animation-delay: 1.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani1-1{
	0%,100%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in; top:0px;scale:1
	}
	40%,49%{top:-30px;scale:1.3 }
}
.is-active #ani1-b{animation-name: ani1-2 ; animation-delay: 0.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani1-d{animation-name: ani1-2 ; animation-delay: 1s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani1-f{animation-name: ani1-2 ; animation-delay: 1.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani1-2{
	0%,100%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in; top:0px;scale:1;position:relative
	}
	40%,49%{top:-30px;scale:1.5 }
}


/*section2*/
.is-active .slick-active .ani2-a{animation-name: ani2-1 ; animation-delay: 0.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active .slick-active .ani2-c{animation-name: ani2-1 ; animation-delay: 1s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active .slick-active .ani2-e{animation-name: ani2-1 ; animation-delay: 1.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active .slick-active .ani2-g{animation-name: ani2-1 ; animation-delay: 2s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani2-1{
	0%,100%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in; top:0px;scale:1
	}
	40%,49%{top:-30px;scale:1.3 }
}
.is-active .slick-active .ani2-b{animation-name: ani2-2 ; animation-delay: 0.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active .slick-active .ani2-d{animation-name: ani2-2 ; animation-delay: 1s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active .slick-active .ani2-f{animation-name: ani2-2 ; animation-delay: 1.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani2-2{
	0%,100%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in; top:0px;scale:1;position:relative
	}
	40%,49%{top:-30px;scale:1.5 }
}



/*section4*/
.is-active #ani4-a{animation-name: ani4-1 ; animation-delay: 1s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani4-b{animation-name: ani4-1 ; animation-delay: 1.5s; animation-duration:0.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani4-1{
	0%,100%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in;scale:1
	}
	40%,49%{scale:1.3 }
}


/*section5*/
.is-active #ani5-a .t1{animation-name: ani5-1 ; animation-delay: 1s; animation-duration:0.4s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani5-a .t2{animation-name: ani5-1 ; animation-delay: 1.5s; animation-duration:0.4s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani5-a .t3{animation-name: ani5-1 ; animation-delay: 2s; animation-duration:0.4s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani5-a .t4{animation-name: ani5-1 ; animation-delay: 2.5s; animation-duration:0.4s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani5-a .t5{animation-name: ani5-1 ; animation-delay: 3s; animation-duration:0.4s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani5-a .t6{animation-name: ani5-1 ; animation-delay: 3.5s; animation-duration:0.4s; animation-iteration-count:1;animation-fill-mode : forwards}
.is-active #ani5-a .t7{animation-name: ani5-1 ; animation-delay: 4s; animation-duration:0.4s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani5-1{
	0%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in; opacity:0
	}
	100%{opacity:1 }
}
.is-active #ani5-b{animation-name: ani5-2 ; animation-delay: 1s; animation-duration:3.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani5-2{
	0%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in;transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,20deg)
	}
	10%,20%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,10deg) }
	25%,35%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,5deg) }
	40%,50%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,0deg) }
	55%,65%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-5deg) }
	70%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-10deg) }
	85%,95%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-15deg) }
	100%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-20deg) }
}
.is-active #ani5-c{animation-name: ani5-3 ; animation-delay: 1s; animation-duration:3.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani5-3{
	0%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in;
	}
	10%,20%{bottom:110px; }
	25%,35%{bottom:140px; }
	40%,50%{bottom:170px; }
	55%,65%{bottom:200px; }
	70%,80%{bottom:230px; }
	85%,95%{bottom:250px; }
	100%{bottom:280px; }
}
.is-active #ani5-a{animation-name: ani5-4 ; animation-delay: 1s; animation-duration:3.5s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani5-4{
	0%{
		-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in;
	}
	10%,20%{bottom:230px; }
	25%,35%{bottom:200px; }
	40%,50%{bottom:170px; }
	55%,65%{bottom:140px; }
	70%,80%{bottom:110px; }
	85%,95%{bottom:80px; }
	100%{bottom:50px; }
}
.is-active #ani5-d{animation-name: ani5-5 ; animation-delay: 4.5s; animation-duration:1s; animation-iteration-count:1;animation-fill-mode : forwards}
@keyframes ani5-5{
	0%,100%,20%,53%,80%{
		-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
			transition-timing-function:cubic-bezier(0.215,.61,.355,1);
		-webkit-transform:translate3d(0,0,0) rotate3d(0,0,1,0deg);
			transform:translate3d(0,0,0) rotate3d(0,0,1,0deg);
	}
	40%,43%{
		-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);
			transition-timing-function:cubic-bezier(0.755,.050,.855,.060);
		-webkit-transform:translate3d(0,-40px,0) rotate3d(0,0,1,-10deg);
			transform:translate3d(0,-40px,0)rotate3d(0,0,1,-10deg);
	}
	70%{
		-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);
			transition-timing-function:cubic-bezier(0.755,.050,.855,.060);
		-webkit-transform:translate3d(0,-20px,0) rotate3d(0,0,1,0deg);;
			transform:translate3d(0,-20px,0)rotate3d(0,0,1,0deg);
	}
	90%{
		-webkit-transform:translate3d(0,-4px,0);
			transform:translate3d(0,-4px,0)
	}
}