@charset "utf-8";



.up, .down, .transform1, .transform2 {
	position: relative;
	opacity: 0;
}


.upstyle, .downstyle, .transform1style, .transform2style {
	opacity: 1;
	transition: 1s 0.5s;
}


.up {
	bottom: -20px;
}

.upstyle {
	bottom: 0px;
}


.down {
	top: -20px;
}

.downstyle {
	top: 0px;
}


.transform1 {
	transform: scaleX(0);
}

.transform1style {
	transform: scaleX(1);
}


.transform2 {
	transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}

.transform2style {
	transform: perspective(400px) translateZ(0px) rotateX(0deg);
}


.blur {
	opacity: 0;
	filter: blur(30px);
	transform: scale(1.1);
}

.blurstyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 1s 0.5s;
}


@keyframes transform3 {
0% {
	transform: scale(0);
}
50% {
	transform: scale(1.1);
}
70% {
	transform: scale(0.99);
}
100% {
	transform: scale(1);
}
}

.transform3 {
	transform: scale(0);
}

.transform3style {
	animation: transform3 0.3s ease-out 0.5s both;
}