/*---animation---*/
.animated{
  opacity: 0;
}


.ef-view{opacity:0;}
.view{opacity: 1;}

.effect {
	overflow: hidden;
}
.effect li {
	transition: .8s;
}
.ef-fade01 {
	opacity: 0;
	transition: .8s;
}
.fade01 {
	opacity: 1.0;
}

.ef-fade02 {
	opacity: 0;
		transition: .8s;
	transform: translate(0, 60px);
	-webkit-transform: translate(0, 60px);
}
.fade02 {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}
.ef-fade02_s {
	opacity: 0;
		transition:3s;
	transform: translate(0, 60px);
	-webkit-transform: translate(0, 60px);
}
.fade02_s {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}

.ef-zoom {
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	transition: .8s;
}
.zoom {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}
.ef-rotation {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transition: .8s;
}
.rotation {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
}