body,
html {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 16px;
	background-color: white;
	width: 100%;
	height: 100%;
	position: relative;
	font-family: "microsoft yahei";
	background: url(images/back.jpg) no-repeat;
	background-size: cover;
}
* {
	-webkit-text-size-adjust: none;
	margin: 0;
	padding: 0;
	border: none;
}
.logo {
	width: 10%;
	height: auto;
	position: absolute;
	left: 15%;
	top: 5%;
	opacity: 0;
	animation: bounceInLeft 1s 1s linear forwards;
}
.title {
	width: 25%;
	height: auto;
	position: absolute;
	left: 20%;
	top: 15.5%;
	z-index: 99;
	opacity: 0;
	animation: bounceInLeft 1s 1.5s linear forwards;
}
.qiu {
	width: 80%;
	height: auto;
	position: absolute;
	left: -25%;
	right: 0;
	top: 36%;
	/*bottom: 0;*/
	margin: auto;
	opacity: 0;
	animation: bounceInShow 1s 2.5s linear forwards;
}
.people {
	width: 5%;
	height: auto;
	position: absolute;
	top: 76%;
	/*bottom: 11%;*/
	right: 0;
	left: 0;
	margin: auto;
	opacity: 0;
	animation: bounceInShow 1s 3s linear forwards;
}
.btn {
	width: 5%;
	height: auto;
	position: absolute;
	left: 70%;
	top: 20%;
	opacity: 0;
	animation: bounceblink 2s 3.5s infinite;
	z-index: 999;
}
@keyframes bounceblink {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 100;
	}
	100% {
		opacity: 0;
	}
}
@keyframes bounceInShow {
	from,
	60%,
	75%,
	90%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0.1;
	}
	20% {
		opacity: 0.2;
	}
	30% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.5;
	}
	60% {
		opacity: 0.6;
	}
	70% {
		opacity: 0.7;
	}
	80% {
		opacity: 0.8;
	}
	90% {
		opacity: 0.9;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@keyframes bounceInLeft {
	from,
	60%,
	75%,
	90%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		transform: translate3d(-50px, 0, 0);
	}
	60% {
		opacity: 1;
		transform: translate3d(25px, 0, 0);
	}
	75% {
		transform: translate3d(-10px, 0, 0);
	}
	90% {
		transform: translate3d(5px, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@-webkit-keyframes bounceIn {
	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
		transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
	}
	0% {
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}
	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9);
	}
	60% {
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
		opacity: 1;
	}
	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}
@media only screen and (min-width: 320px) and (max-width: 413px) {
	.logo {
		width: 35%;
		height: auto;
		position: absolute;
		left: 15%;
		top: 5%;
		opacity: 0;
		animation: bounceInLeft 1s 1s linear forwards;
	}
	.title {
		width: 60%;
		height: auto;
		position: absolute;
		left: 20%;
		top: 15.5%;
		z-index: 99;
		opacity: 0;
		animation: bounceInLeft 1s 1.5s linear forwards;
	}
	.qiu {
		width: 172%;
		height: auto;
		position: absolute;
		left: -71%;
		right: 0;
		/* bottom: 7%; */
		margin: auto;
		opacity: 0;
		animation: bounceInShow 1s 2.5s linear forwards;
	}
	.people {
		width: 15%;
		height: auto;
		position: absolute;
		bottom: 8%;
		right: 0;
		left: 0;
		margin: auto;
		opacity: 0;
		animation: bounceInShow 1s 3s linear forwards;
	}
	.btn {
		width: 12%;
		height: auto;
		position: absolute;
		left: 45%;
		top: 42%;
		opacity: 0;
		z-index: 999;
		animation: bounceIn 1s 3.5s linear forwards;
	}
}
@media only screen and (min-width: 414px) and (max-width: 768px) {
	.logo {
		width: 25%;
		height: auto;
		position: absolute;
		left: 15%;
		top: 5%;
		opacity: 0;
		animation: bounceInLeft 1s 1s linear forwards;
	}
	.title {
		width: 65%;
		height: auto;
		position: absolute;
		left: 20%;
		top: 15.5%;
		z-index: 99;
		opacity: 0;
		animation: bounceInLeft 1s 1.5s linear forwards;
	}
	.qiu {
		width: 170%;
		height: auto;
		position: absolute;
		left: -70%;
		right: 0;
		bottom: 0;
		margin: auto;
		opacity: 0;
		animation: bounceInShow 1s 2.5s linear forwards;
	}
	.people {
		width: 11%;
		height: auto;
		position: absolute;
		bottom: 9%;
		right: 0;
		left: 0;
		margin: auto;
		opacity: 0;
		animation: bounceInShow 1s 3s linear forwards;
	}
	.btn {
		width: 15%;
		height: auto;
		position: absolute;
		left: 42%;
		top: 43%;
		opacity: 0;
		z-index: 999;
		animation: bounceIn 1s 3.5s linear forwards;
	}
}
@media only screen and (min-width: 320px) and (max-width: 374px) {
	.logo {
		width: 34%;
		height: auto;
		position: absolute;
		left: 8%;
		top: 5%;
		opacity: 0;
		animation: bounceInLeft 1s 1s linear forwards;
	}
	.title {
		width: 64%;
		height: auto;
		position: absolute;
		left: 20%;
		top: 15.5%;
		z-index: 99;
		opacity: 0;
		animation: bounceInLeft 1s 1.5s linear forwards;
	}
	.qiu {
		width: 174%;
		height: auto;
		position: absolute;
		left: -71%;
		right: 0;
		bottom: 0%;
		margin: auto;
		opacity: 0;
		animation: bounceInShow 1s 2.5s linear forwards;
	}
	.people {
		width: 13%;
		height: auto;
		position: absolute;
		bottom: 8%;
		right: 0;
		left: 0;
		margin: auto;
		opacity: 0;
		animation: bounceInShow 1s 3s linear forwards;
	}
	.btn {
		width: 15%;
		height: auto;
		position: absolute;
		left: 44%;
		top: 40%;
		opacity: 0;
		z-index: 999;
		animation: bounceIn 1s 3.5s linear forwards;
	}
}