/*========================由左至右淡入=======================================*/

.ani_slideLeft{
    animation-name:ani_slideLeft;
    animation-duration:1s;
    animation-fill-mode: both;
	animation-timing-function: linear;
}

@keyframes ani_slideLeft{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-40px,0,0);
		-ms-transform: translate3d(-40px,0,0);
		transform: translate3d(-40px,0,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

/*========================由左至右淡入=======================================*/

/*========================由右至左淡入=======================================*/

.ani_slideRight{
    animation-name:ani_slideRight;
    animation-duration:1s;
    animation-fill-mode: both;
	animation-timing-function: linear;
}

@keyframes ani_slideRight{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(40px,0,0);
		-ms-transform: translate3d(40px,0,0);
		transform: translate3d(40px,0,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

/*========================由右至左淡入=======================================*/

/*========================由上至下淡入=======================================*/

.ani_slideTop{
    animation-name:ani_slideTop;
    animation-duration:1s;
    animation-fill-mode: both;
	animation-timing-function: linear;
}

@keyframes ani_slideTop{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-40px,0);
		-ms-transform: translate3d(0,-40px,0);
		transform: translate3d(0,-40px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

/*========================由上至下淡入=======================================*/

/*========================由下至上淡入=======================================*/

.ani_slideBottom{
    animation-name:ani_slideBottom;
    animation-duration:1s;
    animation-fill-mode: both;
	animation-timing-function: linear;
}

@keyframes ani_slideBottom{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,40px,0);
		-ms-transform: translate3d(0,40px,0);
		transform: translate3d(0,40px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

/*========================由上至下淡入=======================================*/

/*========================轉圈=======================================*/

.ani_rotate{
    animation-name:ani_rotate;
    animation-duration:5s;
    animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
}

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

/*========================轉圈=======================================*/

/*========================上下抖動=======================================*/

.ani_upDown_sm{
    animation-name:ani_upDown_sm;
    animation-duration:5s;
    animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
}

@keyframes ani_upDown_sm{
	0% {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	25% {
		-webkit-transform: translate3d(0,-5px,0);
		-ms-transform: translate3d(0,-5px,0);
		transform: translate3d(0,-5px,0);
	}
	50% {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	75% {
		-webkit-transform: translate3d(0,5px,0);
		-ms-transform: translate3d(0,5px,0);
		transform: translate3d(0,5px,0);
	}
	100% {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}

.ani_upDown_md{
    animation-name:ani_upDown_md;
    animation-duration:5s;
    animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
}

@keyframes ani_upDown_md{
	0% {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	25% {
		-webkit-transform: translate3d(0,-10px,0);
		-ms-transform: translate3d(0,-10px,0);
		transform: translate3d(0,-10px,0);
	}
	50% {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	75% {
		-webkit-transform: translate3d(0,10px,0);
		-ms-transform: translate3d(0,10px,0);
		transform: translate3d(0,10px,0);
	}
	100% {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}

/*========================上下抖動=======================================*/

/*========================淡入=======================================*/

.ani_fadeIn{
    animation-name:ani_fadeIn;
    animation-duration:5s;
    animation-fill-mode: both;
	animation-timing-function: linear;
}

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

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

/*========================淡入=======================================*/
@keyframes stamp{
  0%{
      transform: scale(1.5);
      opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scaleUp {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ani_main_home{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,40px,0) rotate(5deg);
		-ms-transform: translate3d(0,40px,0) rotate(5deg);
		transform: translate3d(0,40px,0) rotate(5deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0) rotate(5deg);
		-ms-transform: translate3d(0px,0,0) rotate(5deg);
		transform: translate3d(0px,0,0) rotate(5deg);
	}
}

@keyframes ani_main_home2{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,40px,0) rotate(15deg);
		-ms-transform: translate3d(0,40px,0) rotate(15deg);
		transform: translate3d(0,40px,0) rotate(15deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0) rotate(15deg);
		-ms-transform: translate3d(0px,0,0) rotate(15deg);
		transform: translate3d(0px,0,0) rotate(15deg);
	}
}

@keyframes ani_main_cow{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-40px,0,0) rotate(-15deg);
		-ms-transform: translate3d(-40px,0,0) rotate(-15deg);
		transform: translate3d(-40px,0,0) rotate(-15deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0) rotate(-15deg);
		-ms-transform: translate3d(0px,0,0) rotate(-15deg);
		transform: translate3d(0px,0,0) rotate(-15deg);
	}
}

@keyframes ani_main_cow2{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-40px,0,0) rotate(-10deg);
		-ms-transform: translate3d(-40px,0,0) rotate(-10deg);
		transform: translate3d(-40px,0,0) rotate(-10deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,0,0) rotate(-10deg);
		-ms-transform: translate3d(0px,0,0) rotate(-10deg);
		transform: translate3d(0px,0,0) rotate(-10deg);
	}
}

@keyframes ani_cooperation_line{
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 80%;
	}
}

@keyframes about_intro_big_img_date_scaleUp{
  0% {
    transform: scale(0.5) translate(-50%, 50%);
    opacity: 0;
  }
  100% {
    transform: scale(1) translate(-50%, 50%);
    opacity: 1;
  }
}

@keyframes ani_text_focus_in{
	0% {
		opacity: 0;
		-webkit-filter: blur(12px);
        filter: blur(12px);
	}
	100% {
		opacity: 1;
		-webkit-filter: blur(0px);
        filter: blur(0px);
	}
}

@keyframes intro_milk_level_up{
	0% {
		opacity: 0;
		height: 0%;
	}
	100% {
		opacity: 1;
		height: 100%;
	}
}

@keyframes intro_milk_level_up2{
	0% {
		opacity: 0;
		top: calc(100% - 2px);
	}
	100% {
		opacity: 1;
		top: calc(0% - 2px);
	}
}

@keyframes ani_line_extend{
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 100%;
	}
}

@keyframes ani_cloud1{
	0% {
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
	50% {
		-webkit-transform: translate3d(90%,0,0);
		-ms-transform: translate3d(90%,0,0);
		transform: translate3d(90%,0,0);
	}
	100% {
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

@keyframes ani_cloud2{
	0% {
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
	50% {
		-webkit-transform: translate3d(80px,0,0);
		-ms-transform: translate3d(80px,0,0);
		transform: translate3d(80px,0,0);
	}
	100% {
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

@keyframes ani_cloud3{
	0% {
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
	50% {
		-webkit-transform: translate3d(-80%,0,0);
		-ms-transform: translate3d(-80%,0,0);
		transform: translate3d(-80%,0,0);
	}
	100% {
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

@keyframes ani_cloud4{
	0% {
		-webkit-transform: translate3d(0px,0,0) scaleX(-1);
		-ms-transform: translate3d(0px,0,0) scaleX(-1);
		transform: translate3d(0px,0,0) scaleX(-1);
	}
	50% {
		-webkit-transform: translate3d(80%,0,0) scaleX(-1);
		-ms-transform: translate3d(80%,0,0) scaleX(-1);
		transform: translate3d(80%,0,0) scaleX(-1);
	}
	100% {
		-webkit-transform: translate3d(0px,0,0) scaleX(-1);
		-ms-transform: translate3d(0px,0,0) scaleX(-1);
		transform: translate3d(0px,0,0) scaleX(-1);
	}
}

@keyframes ani_intro_process_mark{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-40px,-50%,0);
		-ms-transform: translate3d(-40px,-50%,0);
		transform: translate3d(-40px,-50%,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px,-50%,0);
		-ms-transform: translate3d(0px,-50%,0);
		transform: translate3d(0px,-50%,0);
	}
}

@keyframes ani_intro_process_img7{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-30%,0,0);
		-ms-transform: translate3d(-30%,0,0);
		transform: translate3d(-30%,0,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(-50%,0,0);
		-ms-transform: translate3d(-50%,0,0);
		transform: translate3d(-50%,0,0);
	}
}

@keyframes ani_slideFwdCenter{
  0% {
		opacity: 0;
        -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
		opacity: 1;
        -webkit-transform: translateZ(160px);
            transform: translateZ(160px);
  }
}

@keyframes ani_map_slideBottom{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,40px,0);
		-ms-transform: translate3d(0,40px,0);
		transform: translate3d(0,40px,0);
	}
	100% {
		opacity: 0.2;
		-webkit-transform: translate3d(0px,0,0);
		-ms-transform: translate3d(0px,0,0);
		transform: translate3d(0px,0,0);
	}
}

@keyframes bounce-top {
  0% {
    transform: translateY(0px);
  }
  3% {
    transform: translateY(-24px);
  }
  6% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(0px);
  }
  53% {
    transform: translateY(-24px);
  }
  56% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}