.content,
.content .swiper-slide,
.popup,
.popup-tran,
.loading{
	width: 100%;
	height: 100%;
	background: #101c33;
	font-family: PingFangSC-Regular, sans-serif;
	color: #fff;
}
.loading p{
	line-height: 100vh;
	text-align: center;
	font-size: 12px;
}
.loading{
	z-index: 1001 !important;
}
@-webkit-keyframes music-btn{
	25%{
		height: 18px;
	}
	50%{
		height: 9px;
	}
}
@keyframes music-btn{
	25%{
		height: 18px;
	}
	50%{
		height: 9px;
	}
}
.music-btn{
	position: absolute;
	top: 5.4vw;
	right: 4vw;
	z-index: 1000;
	width: 20px;
	height: 20px;
}
.music-btn span{
	width: 2px;
	height: 9px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
}
.music-btn.active span{
	-webkit-animation: music-btn 1s linear infinite;
	animation: music-btn 1s linear infinite;
}
.music-btn span:nth-of-type(2){
	left: 9px;
	animation-delay: .2s;
}
.music-btn span:nth-of-type(3){
	left: 13px;
	animation-delay: .4s;
}
.popup,
.popup-tran,
.loading{
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 999;
	transition: all .3s;
}
.popup.active,
.popup-tran.active,
.loading.active{
	visibility: visible;
	opacity: 1;
}
.popup-tran{
	background: rgba(0, 0, 0, .8);
}
.logo{
	position: absolute;
	top: 3.86vw;
	left: 8vw;
	/*width: 27.46vw;
	height: 6.26vw;*/
	
	width: 22.93vw;
	height: 3.2vw;
	z-index: 1;
	background-image: url(../images/logo.png);
	background-size: cover;
}
.back-home{
	color: #fff;
	font-size: 3.73vw;
	position: absolute;
	top: 5.33vw;
	right: 10vw;
	z-index: 1;
}
.bg,
.top-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.login-bg{
	background-image: url(../images/login-bg.jpg);
}
.playgame-bg{
	/*background-image: url(../images/playgame-bg.jpg);*/
	background-image: url(../images/login-bg.jpg);
}
.top-bg{
	height: 50vw;
	background-image: url(../images/game-top.jpg);
}
.score-bg{
	background-image: url(../images/score-top.jpg);
}
.prize-bg{
	background-image: url(../images/prize-top.jpg);
}
input{
	border: none;
	border-radius: 0;
	background: none;
	outline: none;
	display: block;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.login-form{
	position: absolute;
	font-size: 3.73vw;
	background: #fff;
	border-radius: 1.2vw;
	width: 80vw;
	top: 63vh;
	left: 50%;
	transform: translateX(-50%);
	padding: 5.33vw;
}
.login-form label{
	width: 100%;
	display: block;
	margin-bottom: 2.66vw;
}
.login-form label:last-child{
	margin-bottom: 0;
}
.login-form label:after{
	content: '';
	display: block;
	clear: both;
}
.login-form input{
	width: 100%;
	height: 9.6vw;
	border-radius: 0.4vw;
	padding: 0 4vw;
	background: #e4e4e4;
	font-size: inherit;
	color: #6d6d6d;
}
.login-form input[type=tel]:focus{
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
}
.login-form input::placeholder{
	color: #6d6d6d;
}
.login-form input[type=button]{
	text-align: center;
	padding: 0;
}
.login-form span{
	display: inline-block;
	width: 100%;
}
.login-form span.code{
	width: 45.86vw;
	float: left;
}
.login-form span.getcode{
	width: calc(100% - 46.79vw);
	float: right;
}
.login-form span.getcode input{
	font-size: 3.46vw;
	color: #11b9cd;
	background: #c9ebf8;
}
.login-btn input,
.playgame-btn{
	background: #37cadc;
	color: #fff;
	border-radius: 1.06vw;
}
.playgame-btn{
	width: 32.53vw;
	height: 10.66vw;
	position: absolute;
	top: 122.66vw;
	left: 50%;
	transform: translateX(-50%);
	font-size: 4.26vw;
}
.title{
	position: absolute;
	width: 50.4vw;
	height: 6.93vw;
	line-height: 6.93vw;
	font-size: 3.46vw;
	background: #37cadc;
	border-radius: 0.4vw;
	text-align: center;
	top: 30.8vw;
	left: 50%;
	transform: translateX(-50%);
	text-shadow: 0 1px 1px rgba(0, 124, 139, .75);
}
.remaining,
.paiming{
	color: #dae7ea;
	font-size: 2.93vw;
	position: absolute;
	text-align: center;
	top: 39.6vw;
	width: 100%;
}
.remaining span,
.paiming span{
	color: #fdd000;
	font-size: 3.73vw;
}
.game-touch-wrap{
	position: absolute;
	top: 32vh;
	padding: 0 7.6vw;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.col-33{
	padding: 0 8vw;
}
.game-touch-wrap li{
	background-size: cover;
}
.game-touch-wrap li.active{
	opacity: .2;
}
.item-0{
	background-image: url(../images/game-item-00.png);
}
.item-1{
	background-image: url(../images/game-item-01.png);
}
.item-2{
	background-image: url(../images/game-item-02.png);
}
.item-3{
	background-image: url(../images/game-item-03.png);
}
.item-4{
	background-image: url(../images/game-item-04.png);
}
.item-5{
	background-image: url(../images/game-item-05.png);
}
.item-6{
	background-image: url(../images/game-item-06.png);
}
.col-33 li{
	/*width: 22.93vw;
	height: 16.8vw;
	margin-bottom: 6.13vw;*/
	
	width: 21.33vw;
	height: 12.53vw;
	margin-bottom: 8.53vw;
}
.col-44 li{
	/*width: 18.66vw;
	height: 13.86vw;
	margin-bottom: 5.46vw;*/
	width: 15.46vw;
	height: 9.06vw;
	margin: 0 2vw 6.93vw;
}
.col-45 li{
	/*width: 16vw;
	height: 12vw;
	margin: 0 2vw 4.13vw;*/
	width: 15.46vw;
	height: 9.06vw;
	margin: 0 2vw 5.33vw;
}
.time-progress{
	font-size: 3.2vw;
	position: absolute;
	width: 100%;
	top: 80vh;
	text-align: center;
}
.time-progress .progress{
	display: inline-block;
	width: 66.66vw;
	height: 2.13vw;
	background: #004789;
	border-radius: 1.66vw;
	vertical-align: middle;
}
.time-progress .progress-in{
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: #37cadc;
	border-radius: 1.66vw;
	transition-property: width;
	transition-timing-function: linear;
}
.time-progress .progress-in.active{
	width: 0%;
}
.bottom-btn-group{
	position: absolute;
	width: 69.33vw;
	top: 89.13vh;
	left: 50%;
	transform: translateX(-50%);
}
.bottom-btn-group .btn,
.lingqu-btn{
	width: 30.66vw;
	height: 9.6vw;
	line-height: 9.6vw;
	text-align: center;
	border-radius: 0.4vw;
	font-size: 4vw;
}
.score{
	background: #37cadc;
	float: left;
}
.prize,
.lingqu-btn{
	background: #fdd000;
	color: #000;
	float: right;
}
.score-list{
	width: 74.26vw;
	position: absolute;
	top: 48vw;
	left: 50%;
	transform: translateX(-50%);
	background: #f2f2f2;
	/**/
	height: 90.93vw;
}
.score-list-in{
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.score-list-top{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #f2f2f2;
}
.score-list:before,
.score-list:after{
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-size: cover;
}
.score-list:before{
	width: 75.46vw;
	height: 2vw;
	top: -2vw;
	background-image: url(../images/score-list-top.png);
}
.score-list:after{
	width: 100%;
	height: 1.34vw;
	bottom: -1.34vw;
	background-image: url(../images/score-list-bottom.png);
}
.score-list li{
	border-bottom: 1px solid #d9d9d9;
	text-align: center;
	line-height: 10.13vw;
	font-size: 3.73vw;
	color: #000;
}
.score-list li:not(.thead) span:first-child,
.score-list li:not(.thead) span:last-child{
	font-size: 3.46vw;
}
.score-list li:last-child{
	border: 0;
}
.score-list li.thead{
	font-size: 4.53vw;
}
.score-list li span{
	width: 33.3333%;
	display: inline-block;
}
.score-list .icon{
	width: 4.26vw;
}
.score-list .no{
	width: 3.73vw;
	height: 3.73vw;
	border-radius: 50%;
	background: #ffd249;
	color: #a75803;
	line-height: 1;
}
.prize-list{
	width: 100%;
	position: absolute;
	top: 28.52vh;
	padding: 0 4vw;
	font-size: 3.73vw;
}
.prize-list li{
	margin-bottom: 4.8vw;
}
.prize-list li:after{
	content: '';
	display: block;
	clear: both;
}
.prize-list-left,
.prize-list-right{
	float: left;
}
.prize-list-left img{
	width: 16.66vw;
	margin: 0 4.8vw;
}
.prize-list-right{
	padding: 2vw 0;
	line-height: 6.26vw;
	max-width: calc(100% - 26.26vw);
}
.prize-name span{
	font-size: 4.26vw;
	color: #37cadc;
	font-weight: bold;
}
.prize-content{
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.rules{
	width: 92vw;
	padding: 3.73vw 4vw;
	background: #283348;
	border-radius: 2.4vw;
	position: absolute;
	top: 69.65vh;
	left: 50%;
	transform: translateX(-50%);
	line-height: 2;
	font-size: 3.46vw;
}
.rules p:after{
	content: '';
	display: block;
	clear: both;
}
.rules span{
	display: inline-block;
	/*float: left;
	max-width: calc(100% - 6em);*/
}
.rules:before,
.rules:after{
	width: 4vw;
	height: 4vw;
	background: url(../images/rules-icon.png);
	background-size: cover;
	content: '';
	display: block;
	position: absolute;
	top: 3.73vw;
}
.rules:before{
	left: 3.73vw;
}
.rules:after{
	right: 3.73vw;
}
.rules-bottom{
	position: absolute;
	width: 1px;
	height: 10vw;
	top: 100%;
}
.rules-title{
	text-align: center;
	font-size: 4vw;
	line-height: 1;
	margin-bottom: 2vw;
}
.rules-foot{
	text-align: center;
	font-size: 2.66vw;
	margin-top: 2vw;
}
.receive-content{
	background-image: url(../images/receive-content-bg.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.receive-main{
	position: absolute;
	top: 31.1vh;
	width: 100%;
}
.results{
	font-size: 4.8vw;
	color: #fdd000;
	text-align: center;
}
.results span{
	font-size: 8vw;
}
.head-img{
	width: 30.66vw;
	height: 30.66vw;
	box-sizing: content-box;
	border: 2px solid #7c8190;
	border-radius: 50%;
	overflow: hidden;
	margin: 6vw auto 0;
	background: #efefef;
	position: relative;
}
.head-img img{
	width: 22.5vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.receive-phone-number{
	font-size: 3.73vw;
	text-align: center;
	color: #fefefe;
	padding: 4vw 0;
}
.lv{
	font-size: 3.37vw;
	text-align: center;
	line-height: 1.5;
	display: none;
}
.lv span{
	font-size: 4.26vw;
	color: #37cadc;
}
.lingqu-btn{
	float: none;
	margin: 6vw auto 0;
}
.popup-tran-in{
	width: 72vw;
	height: 48vw;
	background: url(../images/game-popup.png) no-repeat;
	background-size: cover;
	box-shadow: 0 0 6px 3px rgba(17, 81, 162, .54);
	border-radius: 1.2vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.popup-tran-in .close{
	width: 5.33vw;
	height: 5.33vw;
	overflow: hidden;
	position: absolute;
	top: 4vw;
	right: 4vw;
}
.popup-tran-in .close:before,
.popup-tran-in .close:after{
	width: 150%;
	height: 2px;
	background: #fff;
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
}
.popup-tran-in .close:after{
	transform: translate(-50%, -40%) rotate(45deg);
}
.popup-tran-in .close:before{
	transform: translate(-50%, -50%) rotate(135deg);
}
.win .popup-tran-in:before,
.next .popup-tran-in:before{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/game-popup-win.png) no-repeat;
	background-size: cover;
	content: '';
	display: block;
	z-index: -1;
}
.win-text{
	font-size: 6.93vw;
	text-shadow: 0 2px 1px rgba(5, 74, 120, .5);
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
.popup-tran-in .lingqu-btn{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 3.33vw;
}
.lose-title{
	font-size: 4.8vw;
	margin: 7vw 0 6vw;
}
.lose-text{
	font-size: 3.73vw;
}
.share,
.share-add{
	background-image: url(../images/share.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.share-add{
	background-image: url(../images/share-add.png);
}
.prize-code .popup-tran-in{
	background: rgba(255, 255, 255, .8);
	box-shadow: none;
	color: #333;
	line-height: 2;
}
.prize-code .close:before,
.prize-code .close:after{
	background: #333;
}
.prize-code .lose-title{
	margin: 3vw 0;
}
.prize-code .copy{
	border: none;
}