*{
	padding: 0;
	margin: 0;
}
body{
	background-color: #444;
}
section{
	width: 1vw;
	height: 1wh;
}

.header{
	width: 100%;
	height: 20%;
	text-align: center;
	position: fixed;
	top:0;
}

.header ul li a{
	display: block;
	color:#444;
}
.header ul li a:hover{
	color:#fff;
}
.header ul li{
	float: left;
	text-decoration: none;
	padding: 4em;
	display: block;
}
.main{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 20em;
}
.main h1{
	font-size:4em;
	color:red;
	letter-spacing: 2em;
	text-transform: uppercase;
	animation:tiao 2s linear 1;

}
.enter{
	width: 1vw;
	position: absolute;
	top:30em;
	left: 48%;
	text-align: center;
}
.enter a{
	font-size: 2em;
	color:#e3e3e3;
	transform:all 2s ease-in-out;
	animation:tiao 2s linear 1 2s;	
}
.footer{
	font-size: 1em;
	width: 100%;
	height: 10%;
	position: fixed;
	bottom: 0;
	text-align: center;
}

a{
	text-decoration: none;
}

@media screen and (min-width: 1228px){
	.main h1{
		font-size: 4em;
	}
}
@media screen and (max-width: 1228px){
	.main h1{
		font-size: 3em;
	}
}
@media screen and (max-width: 992px){
	.main{
		top:30em;
	}
	.enter{
		top:40em;
	}
}
@keyframes tiao{
	0%{
		font-size: 0em;
	}
	30%{
		font-size: 2em;
	}
	60%{
		font-size: 0em;
	}
	100%{
		font-size: 2em;
	}
}