html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: url(../img/cqbg.jpg) no-repeat center;
	background-size: cover;/* 保持比例并覆盖整个容器 */
	}
	text-align: center;
	height: 100%;
}

a:link {
	text-decoration: none;
}

canvas {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
}

#btn{
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -99999999em;
	position: absolute;
	top: 0;
}





#logo,#logotxt{
	margin: 0 auto;
	display: block;
	position: relative;
}


#logo{
	top: 120px;
 	/* Logo初始状态 */
 	opacity: 0;
 	visibility: visible;
}

#logotxt{
	top: 150px;
	/* 初始隐藏状态（JS控制） */
	opacity: 0;
}


/* Logo的旋转动画 */
@keyframes rotateIn {
	0% {
		opacity: 0;
		transform: scale(3) rotateY(180deg); /* 初始：放大、水平翻转、透明 */
	}
	100% {
		opacity: 1;
		transform: scale(1) rotateY(0); /* 结束：正常大小、无旋转、完全可见 */
	}
}

/* 文本的撞顶回落动画 */
@keyframes bounceFadeUp {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0.6;
	}
	80% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}

/* Logo动画类 */
.logo-animate {
	animation: rotateIn 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

/* logotxt动画类 */
.txt-animate {
	animation: bounceFadeUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}