@font-face {
	  font-family: 'MyFont';   
	  src: url("http://m.shihuo.cn/fonts/SourceHanSansCN-Medium.otf");        
	}
	
    body{
    		width: 100%;
    		height: 100%;    		
    	}
    .ready{
	  font-family: MyFont !important;
	}
    	#home{
    		position: relative;
    		width: 100%;
    		height: 100%;
    		overflow: auto;
    		margin: 0;
    		padding: 0;
    		font-size: 0;
    		color: white;
    		-webkit-overflow-scroll:touch;
            -webkit-overflow-scrolling: touch;
    	}
    	.loadingContent{
    		width: 100%;
    		height: 100%;
    		background-color: white;
    	}
    	.gameContent{
    		width: 100%;
    		height: 100%;
    		position: relative;
    		font-size: 16px;
    		display: none;
    	}
    	.congruatulaion{
    		position: fixed;
    		top: 50%;
    		left: 50%;
    		color: white;
    		font-size: 14px;
    		padding: 4px 6px;
    		transform: translateX(-50%) translateY(-50%);
    		background-color: rgba(0,0,0,0.5);
    	}
    	.top{
    		width: 100%;
    		height: 100%;
    		position: relative;
    		top: 0;
    		left: 0;
    		z-index: 10;
    		background-image: url(http://sh1.shihuocdn.cn/app/modules/nike_joyride/1.0.0/images/start_bg.jpg);
    		background-repeat:no-repeat;
    		background-size: 100% 100%;
    		background-position: 0 0;
    	}
    	.running{
    		width: 300px;
    		position: absolute;
    		top: 100px;
    		left: 50%;
    		transform: translateX(-50%);
    		z-index: 10;
    	}
    	.joyride{
    		width: 220px;
    		position: absolute;
    		bottom: 110px;
    		left: 50%;
    		transform: translateX(-50%);
    		z-index: 10;
    	}
    	.topstart{ 
    		position: absolute;
    		bottom: 64px;
    		left:18%; 	
    		width: 64%;
    		height: 40px;
    		line-height: 40px;
    		font-size: 16px;
    		text-align: center;
    		white-space:nowrap;
    		background-color: black;
    		border-radius: 5px;
    		text-align: center;
    		color:white;   		
    	}
    	.go_nike{
    		width: 100%;
    		position: absolute;
    		bottom: 34px;
    		left:0; 	
    		text-align: center;
    		color: black;
    		font-size: 16px;
    		letter-spacing: 2px;
    		text-decoration: underline;
    	}
    	.check{
    		font-size: 12px;
    		color: #00FF00;
    		text-align: center;
    		position: absolute;
    		bottom: 40px;
    		left:50%;
    		transform: translateX(-50%);
    		white-space:nowrap;
    	}
    	#content{
    		position: absolute;
    		top: 0;
    		left:0;
    		width: 100%;
    		height: 100%;
    		background-image: url(http://sh1.shihuocdn.cn/app/modules/nike_joyride/1.0.0/images/change_bg.jpg);
    		background-repeat:no-repeat;
    		background-size: 100% 100%;
    		background-position: 0 0;
    		overflow-x: hidden;
    		overflow-y: scroll;
    	}
    	.content_joyride{
    		width: 260px;
    		margin-top:30px;
    		margin-left: 50%;
    		transform:translateX(-50%);
    	}
    	.content_running{
    		width: 320px;
    		margin-top:20px;
    		margin-left: 50%;
    		transform:translateX(-50%);
    	}
    	.total{
    		margin-top: 30px;
    		width: 100%;
    		overflow: hidden;
    	}
    	.total_num,.total_light{
    	  	width: 50%;
    	  	float: left;
    	  	text-align: center;
    	  	color:black;
    	  	display: inline-block;
    	  	overflow: hidden;
    	}
    	.total_num span,.total_light span{
    		width: 113px;
    		height: 20px;
    		display: inline-block;
    		text-align: center;
    		overflow: hidden;
    	}
    	.lightBox{
    		margin-top: 10px;
    		width: 100%;
    		color: black;
    		overflow: hidden;
    	}
    	.lightBox li{
    		margin-top: 30px;
    		float: left;
    		width: 50%;
    		font-size: 14px;
    		text-align: center;
    	}
    	.lightBox li img{
    		width: 70px;
    		display: inline-block;
    	}
    	.lightBox .lighed{
    		background-color: pink;
    	}
    	.changeGoods{
    		margin-top: 30px;
    		width: 64%;
    		margin-left: 18%;
    		height: 40px;
    		line-height: 40px;
    		font-size: 16px;
    		text-align: center;
    		white-space:nowrap;
    		background-color: black;
    		border-radius: 5px;
    		text-align: center;
    		color:white;   		
    	}
    	.go_nikes{
    		margin-top: 10px;
    		margin-bottom: 20px;
    		width: 100%;
    		text-align: center;
    		color: black;
    		font-size: 16px;
    		letter-spacing: 2px;
    		text-decoration: underline;
    	}
    	.changeContent{
    		position: absolute;
    		top:0;
    		left:0;
    		width: 100%;
    		height: 100%;
    		color: black;
    		background-repeat:no-repeat;
    		background-size: 100% 100%;
    		background-position: 0 0;
    	}
    	.changeContent{
    		background-image: url(http://sh1.shihuocdn.cn/app/modules/nike_joyride/1.0.0/images/change_bg.jpg);
    	}
    	.endurance_rule,.glamour_rule,.wit_rule,.partaner_rule{
    		width: 70%;
    		margin-left: 15%;
    		font-size: 14px;
    		text-align: left;
    	}
    	.endurance_rule span,.glamour_rule span,.wit_rule span,.partaner_rule span{
    		font-size: 16px;
    		font-weight: 600;
    	}
    	.all_question{
    		font-size: 16px;
    		margin-top: 40px;
    		text-align: left;
    	}
    	.tips-box{
    		width: 16px;
    		height: 16px;
    		text-align: center;
    		line-height: 15px;
    		border: 1px solid black;
    		border-radius: 8px;
    		font-size: 14px;
    		color: black;
    		text-decoration: none;
    		display: inline-block;
    	}
    	.question_content{
    		width: 70%;
    		margin-left: 15%;
    	}
    	.question_content p{
    		width: 100%;
    		margin-top: 30px;
    		margin-bottom: 30px;
    		font-weight: 600;
    	}
    	.question_content li{
    		position: relative;
    		padding-left: 60px;
    		margin:6px 0;
    		line-height: 30px;
    	}
    	.question_content li .check_box{
    		position: absolute;
    		top:0;
    		left: 4px;
    		display: inline-block;
    	}
    	.question_content li .check_box img{
    		width: 30px;
    		position: absolute;
    	}
    	.question_content li .check_box img:nth-child(2n){
    		top: -4px;
    		left: 4px;
    	}
    	.checked_btn{
    		display: none;
    	}
    	.detail_content{
    		font-size: 16px;
    		position: absolute;
    		top: 200px;
    		left: 50%;
    		transform: translateX(-50%);
    		text-align: center;
    	}
    	.title_img{
    		margin-top: 30px;
    		width: 300px;
    		margin-left: 50%;
    		transform: translateX(-50%);
    	}
    	.detail_contents{
    		margin-top: 60px;
    		font-size: 16px;
    		margin-left: 50%;
    		transform: translateX(-50%);
    		text-align: center;
    	}
    	.detail_content img,.detail_contents img{
    		width: 100px;
    		display: inline-block;
    	}
    	.detail_content p,.detail_contents p{
    		font-size: 16px;
    		margin: 10px;
    	}
    	.detail_content .fir_p,.detail_contents .fir_p{
    		font-size: 20px;
    		font-weight: 600;
    	}
    	.endurance,.glamour,.wit,.partaner{
    		width: 100%;
    		height: 100%;
    		overflow-x: hidden;
    		overflow-y: scroll;
    		position: absolute;
    		top: 0;
    		left: 0;
    		color: black;
    		padding: 0;
    		margin: 0;
    		font-size: 0;
    		background-size: 100% 100%;
    		background-image: url(http://sh1.shihuocdn.cn/app/modules/nike_joyride/1.0.0/images/change_bg.jpg);
    		text-align: center;
    	}
    	.now_states{
    		font-size: 16px;
    		font-weight: 600;
    	}
    	
    	.bottom_btn{
    		position: absolute;
    		bottom: 54px;
    		left:18%; 	
    		width: 64%;
    		height: 40px;
    		line-height: 40px;
    		font-size: 16px;
    		text-align: center;
    		white-space:nowrap;
    		background-color: black;
    		border-radius: 5px;
    		text-align: center;
    		color:white;   		
    	}
    	.return_btn{
    		width: 100%;
    		position: absolute;
    		bottom: 24px;
    		left:0; 	
    		text-align: center;
    		color: black;
    		font-size: 16px;
    		letter-spacing: 2px;
    		text-decoration: underline;
    	}
    	
    	.wit_btn,.partaner_btn{
    		margin-top: 60px;
    		width: 64%;
    		height: 40px;
    		line-height: 40px;
    		font-size: 16px;
    		text-align: center;
    		white-space:nowrap;
    		background-color: black;
    		border-radius: 5px;
    		text-align: center;
    		color:white;  
    		display: inline-block; 	
    	}
    	.wit_return,.partaner_return{	
    		font-size: 16px;
    		margin: 20px 0 30px 0;
    		color: black;
    		text-decoration: underline;
    	}
    	.alert_remainWindow{
    	    width: 250px;
    		position: fixed;
    		top:50%;
    		left: 50%;
    		transform: translateX(-50%) translateY(-50%);
    		text-align: center;
    		color: white;
    		z-index: 1;
    	}
    	.alert_remainWindow img{
    		width: 100%;
    	}
    	.alert_remainWindow .title{
    		width: 80%;
    		position: absolute;
    		top: 40px;
    		left: 10%;
    	}
    	.alert_remainWindow .code{
    		position: absolute;
    		bottom: 40px;
    		left: 15%;
    		width: 70%;
    		height: 40px;
    		line-height: 40px;
    		background-color: white;
    		border-radius: 4px;
    		color: black;
    	}
    	.user_list{
    		width: 90%;
    		margin-top: 10px;
    		margin-left: 5%;
    		font-size: 16px;
    		/*display: none;*/
    	}
    	.user_list li{
    		float: left;
    		position: relative;
    		width: 48.5%;
    		height: 220px;
    		background-color: black;
    		margin-left: 1%;
    		margin-bottom: 6px;
    		display: inline-block;
    		overflow: hidden;
    	}
    	.user_list li p{
    		width: 90px;
    		height: 30px;
    		font-size: 14px;
    		line-height: 30px;
    		position: absolute;
    		top: 10px;
    		left: 10px;
    		color: white;
    		border: 1px solid white;
    		text-align: center;
    		overflow: hidden;
    		white-space: nowrap;
    		text-overflow: ellipsis;
    		z-index: 10;
    	}
    	.user_list li .user_name{
    		background-color: black;
    		border: 1px solid black;
    		overflow: hidden;
    	}
    	.user_list li img{
    		width: 100%;
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translateX(-50%) translateY(-50%);
    		
    	}
    	.uploadBtn{
    		width: 60%;
    		height: 60px;
    		color: black;
    	}
    	.subBtn{
    		margin-top: 40px;
    		width: 60%;
    		height: 60px;
    		left: 20%;
    		border: 1px solid black;
    		text-align: center;
    		color: black;
    	}
    	.alert_bg{
    		position: fixed;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background-color: rgba(0,0,0,0.6);
    	}
    	.alert_congratulation{
    		width: 250px;
    		position: fixed;
    		top:50%;
    		left: 50%;
    		transform: translateX(-50%) translateY(-50%);
    		background-color: white;
    		text-align: center;
    		color: white;
    		z-index: 1;
    		font-size:0 ;
    	}
    	.alert_congratulation img{
    		width: 100%;
    	}
    	.alert_congratulation .title{
    		width: 100%;
    		position: absolute;
    		top: 40px;
    		font-size: 20px;
    		text-align: center;
    		font-weight: 600;
    	}
    	.alert_congratulation .code{
    		width: 100%;
    		position: absolute;
    		top: 160px;
    		text-align: center;
    		font-size: 18px;
    		color: gray;
    	}
    	.alert_congratulation span{
    		position: absolute;
    		top: 200px;
    		left: 50%;
    		transform: translateX(-50%);
    		width: 120px;
    		height: 30px;
    		color: black;
    		background-color: white;
    		line-height: 30px;
    		font-size: 14px;
    		text-align: center;
    		border: 1px solid black;
    		border-radius: 4px;
    		display: inline-block;
    	}
    	.alert_congratulation .bottom{
    		width: 100%;
    		text-align: center;
    		position: absolute;
    		bottom: 40px;
    		font-size: 14px;
    		text-align: center;
    	}
        .changeContent .joyride{
        	width: 270px;
        	top: 58px;
        }
        .changeContent .total{
        	margin-top: 100px;
        }
        .changeContent .lightBox{
        	width: 80%;
        	margin-left: 10%;
        	margin-bottom: 20px;
        }
        .changeContent .lightBox{
        	margin-top: 10px;
        }
        .changeContent .lightBox img{
        	width: 80px;
        }
        .changeContent .check_btn{
        	padding: 10px;
    	     width: 80%;
    	     margin-top:20px;
    	     margin-left: 10%;
    	     text-align: center;
    	     font-size: 14px;
    	     line-height: 24px;
    	     border: 1px solid black;
    	     border-radius: 4px;
    	     color: black;
    	}  	
    	.changeContent .checked{
    		color: black;
    	}
    	.getFirst{
    		text-align: center;
    		margin: 0 auto;
    		margin-top: 10px;
    	}
    	.getSec{
    		text-align: center;
    		margin: 0 auto;
    		margin-top: 10px;
    		display: inline-block;
    		margin-left: 50%;
    		transform: translateX(-50%);
    		text-decoration: underline;
    	}