* {
	margin: 0;
	outline: 0;
	padding: 0;
	font-size: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

a {
	color: black;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35)
}

html {
	height: 100%;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: "微软雅黑";
	font-size: .6rem;
	line-height: 1.231;
	-webkit-touch-callout: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-align: stretch;
	-moz-box-align: stretch;
	position: relative
}

img {
	-ms-interpolation-mode: bicubic;
	vertical-align: middle
}

.hide {
	display: none
}

.body {
	width: 100%;
	height: 100%;
	margin: auto;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	min-height: 100%;
	position: relative
}

.home {
	width: 100%;
	height: 100%;
	text-align: center
}

.gameInfoBox {
	position: absolute;
	top: .5rem;
	width: 100%
}

.home .titleImg {
	top: 0
}

.home .titleImg img {
	width: 100%;
	height: auto;
	margin: 0 auto
}

.home .joinNumLine {
	color: #fff;
	font-size: .7rem;
	margin-top: .3rem
}

.home .joinNumLine .specil {
	color: #fff799;
	font-size: .8rem
}

.home .startBtn {
	position: absolute;
	top: 11.5rem;
	left: 0;
	right: 0
}

.gameBox {
	width: 100%;
	height: 100%
}

#gameBgBox {
	width: 100%;
	height: 100%;
	min-height: 25.2rem;
	overflow: hidden
}

#gameBgBox img {
	width: 100%;
	height: auto
}

.gameBox .userInfoBox {
	margin-left: .75rem
}

.gameBox .userInfoBox .userImgBox {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-block;
	border-radius: 999px;
	border: .1rem solid rgba(255, 255, 255, 0.3)
}

.gameBox .userImgBox .userImg {
	width: 100%;
	height: 100%;
	display: inline-block;
	border-radius: 999px
}

.gameBox .userInfoBox .grade {
	display: inline-block;
	font-size: .9rem;
	line-height: 2.6rem;
	vertical-align: top;
	margin-left: .3rem
}

.gameBox .timeBox {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	text-align: center;
	font-size: .8rem;
	margin-top: .5rem;
	width: 4rem
}

.gameBox .timeBox .time {
	font-size: 1.3rem;
	font-weight: bold
}

#gameLayerBox {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 20rem
}

.mc {
	width: 2.5rem;
	height: 2.75rem;
	margin-top: -0.38rem;
	display: inline-block
}

.tada {
	-moz-animation: tada .6s ease 0s infinite forwards;
	-o-animation: tada .6s ease 0s infinite forwards;
	-webkit-animation: tada .6s ease 0s infinite forwards;
	animation: tada .6s ease 0s infinite forwards
}

.startTada {
	animation: tada .6s ease 0s 1 forwards;
	-webkit-animation: tada .6s ease 0s 1 forwards;
	-moz-animation: tada .6s ease 0s 1 forwards;
	-o-animation: tada .6s ease 0s 1 forwards
}

.titleDown {
	animation: bounceInDown 1s ease 1;
	-webkit-animation: bounceInDown 1s ease 1;
	-moz-animation: bounceInDown 1s ease 1;
	-o-animation: bounceInDown 1s ease 1
}

@
-moz-keyframes tada { 0%{
	-moz-transform: scale3d(1, 1, 1)
}

10%,20%{
-moz-transform
:scale3d
(
.9
,
.9
,
.9
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
30%,50%,70%,90%{
-moz-transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,3
deg
)
}
40%,60%,80%{
-moz-transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
100%{
-moz-transform
:scale3d
(1
,
1,1)
}
}
@
-o-keyframes tada { 0%{
	-o-transform: scale3d(1, 1, 1)
}

10%,20%{
-o-transform
:scale3d
(
.9
,
.9
,
.9
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
30%,50%,70%,90%{
-o-transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,3
deg
)
}
40%,60%,80%{
-o-transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
100%{
-o-transform
:scale3d
(1
,
1,1)
}
}
@
-webkit-keyframes tada { 0%{
	-webkit-transform: scale3d(1, 1, 1)
}

10%,20%{
-webkit-transform
:scale3d
(
.9
,
.9
,
.9
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
30%,50%,70%,90%{
-webkit-transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,3
deg
)
}
40%,60%,80%{
-webkit-transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
100%{
-webkit-transform
:scale3d
(1
,
1,1)
}
}
@
keyframes tada { 0%{
	transform: scale3d(1, 1, 1)
}

10%,20%{
transform
:scale3d
(
.9
,
.9
,
.9
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
30%,50%,70%,90%{
transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,3
deg
)
}
40%,60%,80%{
transform
:scale3d
(1
.1
,
1
.1
,
1
.1
)
 
rotate3d
(0
,
0,1,-3
deg
)
}
100%{
transform
:scale3d
(1
,
1,1)
}
}
@
-webkit-keyframes bounceInDown { 0%{
	opacity: 0;
	-webkit-transform: translateY(-2000px)
}

60%{
opacity
:
1;-webkit-transform
:translateY(30px)
}
80%{
-webkit-transform
:translateY(-10px)
}
100%{
-webkit-transform
:translateY(0)
}
}
@
-moz-keyframes bounceInDown { 0%{
	opacity: 0;
	-moz-transform: translateY(-2000px)
}

60%{
opacity
:
1;-moz-transform
:translateY(30px)
}
80%{
-moz-transform
:translateY(-10px)
}
100%{
-moz-transform
:translateY(0)
}
}
@
-o-keyframes bounceInDown { 0%{
	opacity: 0;
	-o-transform: translateY(-2000px)
}

60%{
opacity
:
1;-o-transform
:translateY(30px)
}
80%{
-o-transform
:translateY(-10px)
}
100%{
-o-transform
:translateY(0)
}
}
@
keyframes bounceInDown { 0%{
	opacity: 0;
	-webkit-transform: translateY(-2000px)
}
60%{
opacity
:
1;-webkit-transform
:translateY(30px)
}
80%{
-webkit-transform
:translateY(-10px)
}
100%{
-webkit-transform
:translateY(0)
}
}