html,body{
	width: 100%;
	height: 100%;
	max-width: 750px;
	position: relative;
	margin: 0 auto;
}
.music{
	top: 0.40rem !important;
	right: 1.70rem !important;
}
.page{
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
}
.loading{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 0.48rem;
}
.bj{
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.indexpage {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.container{
	width: 7.50rem;
	height: 13.34rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6.67rem 0 0 -3.75rem;
}
.wcontainer{
	width: 100%;
	height: 13.34rem;
	position: absolute;
	top: 50%;
	left: 0%;
	margin: -6.67rem 0 0 0;
}
.logo{
	width: 3.95rem;
	height: auto;
	position: absolute;
	top: 0.40rem;
	left: 0.40rem;
	z-index: 1;
}
.main{
	width: 7.82rem;
	height: 6.75rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -5.2rem 0 0 -4rem;
	z-index: 1;
}
.ruleBtn{
	width: 1.62rem;
	height: auto;
	position: absolute;
	top: 0.40rem;
	right: 0.40rem;
	z-index: 1;
}
.btip{
	width: 2.20rem;
	height: 0.20rem;
	position: absolute;
	bottom: 0.50rem;
	left: 50%;
	margin: 0 0 0 -1.10rem;
	z-index: 1;
}
.img00{
	width: 9.73rem;
	height: 10.04rem;
	position: absolute;
	top: 1.21rem;
	left: -0.84rem;
}
.startBtn{
	width: 4.39rem;
	height: auto;
	position: absolute;
	bottom: 0.80rem;
	left: 50%;
	margin: 0 0 0 -2.2rem;
	z-index: 1;
}
.ruleWarp{
	width: 8.18rem;
	height: 11.48rem;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -6.425rem 0 0 -3.49rem;
}
.ruleWarp p{
	width: 100%;
	font-size: 0.22rem;
	color: #7e7e7e;
	position: absolute;
	left: 0.78rem;
	top: 3.96rem;
}
.ruleImg{
	width: 8.18rem;
	height: 11.48rem;
}
.backBtn{
	width: 1.54rem;
	height: 0.58rem;
	position: absolute;
	bottom: 0.60rem;
	left: 50%;
	margin: 0 0 0 -0.77rem;
	z-index: 1;
}
.rulewarp{
	width: 5.60rem;
	position: absolute;
	top: 2.25rem;
	left: 50%;
	margin: 0 0 0 -2.80rem;
	padding: 1.30rem 0.35rem;
	text-align: justify;
	line-height: 0.30rem;
	font-size: 0.22rem;
	color: #7a7a7a;
}

.rbt{
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	margin: 3.70rem 0 0 0;
	z-index: 1;
}
.ruleng{
	width: 8.18rem;
	height: 9.71rem;
	position: absolute;
	bottom: 2.68rem;
	left: 50%;
	margin: 0 0 0 -4.15rem;
}
.rulewarp p{
	margin: 0 0 0.20rem;
}
.bott{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}

	50% {
		-webkit-transform: scale3d(1.10, 1.10, 1.10);
		transform: scale3d(1.10, 1.10, 1.10)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes pulse {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}

	50% {
		-webkit-transform: scale3d(1.10, 1.10, 1.10);
		-ms-transform: scale3d(1.10, 1.10, 1.10);
		transform: scale3d(1.10, 1.10, 1.10)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse
}
.qrcode{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
}
#app{
	width: 100%;
	height: 100%;
}
.qrcodeText{
	width: 100%;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: 50%;
	margin: -200px 0 0 0;
}