body{
	background-image: url('../img/beijing.jpg');
	background-repeat: no-repeat;
	background-size: 110% 110%;
	background-position: 50% 50%;
}
#canvas{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*background-color: black;*/
}
#canvas canvas{
	display: block;
}
.bodyer{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.bodyer .autoCenterBox{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1024px;
	height: 666px;
}
.autoCenterBox .top, .autoCenterBox .bottom{
	height: 50%;
	position: relative;
}
.autoCenterBox .top{
	perspective: 700px;
}
.autoCenterBox .top .rotate{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	height: 100%;
	animation: imgRotate 60s linear infinite 1s;
}
@keyframes imgRotate{
	to{
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
.autoCenterBox .top .logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 29%;
}
.ornaments{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
}
.ornaments:nth-of-type(1){
	margin-left: -130px;
	margin-top: -130px;
}
.ornaments:nth-of-type(2){
	margin-left: -170px;
	margin-top: 0px;
}
.ornaments:nth-of-type(3){
	margin-left: -130px;
	margin-top: 130px;
}
.ornaments:nth-of-type(4){
	margin-left: 130px;
	margin-top: -130px;
}
.ornaments:nth-of-type(5){
	margin-left: 170px;
	margin-top: 0px;
}
.ornaments:nth-of-type(6){
	margin-left: 130px;
	margin-top: 130px;
}
.ornamentsSet{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: red;
	/*transition: all 0.5s ease;*/
}
.autoCenterBox .bottom .left,
.autoCenterBox .bottom .middle,
.autoCenterBox .bottom .right{
	/*width: 386px;
	height: 128px;*/
	width: 260px;
	height: 86px;
	/*background-color: #fff;*/
	margin: 100px 40px 0;
}
.autoCenterBox .bottom .left{
	float: left;
	background-image: url('../img/Event button01.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}
.autoCenterBox .bottom .left:hover{
	background-image: url('../img/Event button02.png');
}
.autoCenterBox .bottom .middle{
	float: left;
	background-image: url('../img/weibo button01.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}
.autoCenterBox .bottom .middle:hover{
	background-image: url('../img/weibo button02.png');
}

.autoCenterBox .bottom .right{
	float: left;
	background-image: url('../img/trends button01.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}
.autoCenterBox .bottom .right:hover{
	background-image: url('../img/trends button02.png');
}
p.copyright{
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	color: #7e8690;
}
p.copyright img{
	display: inline-block;
	height: 14px;
	position: relative;
	top: -3px;
}

@media screen and (max-width: 640px) {
	html, body{
		overflow: hidden;
	}
	.bodyer .autoCenterBox{
		width: 100%;
		height: 100%;
	}
	.autoCenterBox .top{
		/*height: 30%;*/
		/*margin-top: 20%;*/
		height: 2rem;
		margin-top: 0.6rem;
	}
	.ornamentsSet{
		/*transform: scale(0.5);*/
		zoom: 0.6;
	}
	.autoCenterBox .bottom .left,
	.autoCenterBox .bottom .right{
		margin: 0.5rem auto;
		float: none;
		width: 2.14rem;
		height: 0.71rem;
	}
	p.copyright{
		text-align: center;
		font-size: 0.1rem;
	}
	p.copyright img{
		height: 0.14rem;
		top: -0.02rem;
		line-height: 1.5;
	}
}