*{
	margin:0;
	padding:0;
	font-family: "PingFang-SC-Regular","Microsoft YaHei";
	color: #fff;
}
li{list-style:none}
img{vertical-align:top;border:none}
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

button{
	border: none;
	background: none;
	list-style: none;
	list-style-type: none;
}
input,
select{
	outline: none;
	list-style: none;
	border: none;
}
input:focus,
select:focus{
	outline: none;
}
html,body{
	width: 100%;
	height: 100%;
	max-width: 720px;
	margin: 0 auto;
	background-color: #f19e7c;	
	overflow: hidden;
}
.hide{
	display: none;
}
.swiper-container{
	width: 100%;
	max-width: 720px;
	height: 100%;
	background: #e36c68;
}
.showTips{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	text-align: center;
}
.showTips p{
	font-size: 2rem;
	color: #fff;
	text-align: center;
	margin:5rem auto ;
}
/* P1 */
.loading-page{
	background-image: url("../images/p1/bg.png?v=1");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	text-align: center;
	width: 100%;
	min-height: 100%;
}
.logo{
	width: 70%;
	margin: 60px auto;
}
.act-title{
	width: 90%;
	margin: 50px auto 10px;
}
.take-bike{
	width: 70%;
	margin: 30px 0 20px -80px;
}
.graph{ width: 50%; border: 1px solid #fff; border-radius: 10px; margin: 2px auto; height: 10px; } 

.load-bar{ display: block; background: #fff; float: left; border-radius: 10px;
height: 100%; text-align: center; font-family: Verdana; line-height: 10px; color: #FFF; } 


/* P2 */
.main-box{
	height: 100%;
}
.arrows{
    position: fixed;
	width: 84%;
	height: 70px;
	margin-left: 8%;
	top: 56%;
	z-index: 9;
}
.arrows img{
	height: 100%;
}
.arrows .arrow-l{
	float: left;
}
.arrows .arrow-r{
	float: right;
}
.dashboards{
	position: fixed;
	width: 100%;
	height: 120px;
	z-index: 12;
	bottom: 0;
	background-image: url("../images/p2/dashable.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;	
}
.rules{
	float: right;
	width: 120px;
	margin-top: -25px;
}
.click-btn{
	width: 100px;
	height: 66px;
	background-image: url("../images/p2/click1.png?v=1.0");
	background-size: 100%;
	background-repeat: no-repeat;		
	background-position: bottom center;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	margin: 0 auto;
}
.click-btn.isclick{
	background-image: url("../images/p2/click2.png?v=1.0");
}
.guide1{
	width: 100px;
	position: absolute;
	top: -60px;
	left: 50%;
	margin-left: -50px;
}
.guide2{
	width: 100px;
	position: absolute;
	top: -75px;
	right: -16px;
}
#videos{
	width: 100%;
	height: auto;
	min-height: 88%;
	object-fit: fill;
	margin-top: 0;
}
.energy-loading{
	position: absolute;
	top: 60%;
	width: 200px;
	margin-left: -120px;
	left: 50%;
	min-height: 60px;
	padding: 20px;
	text-align: center;
	background-color: rgba(241,158,124,0.6);
}
.teach-box{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 45;
	background-color: rgba(0,0,0,0.7);
}
.teach-box .tips-txt1,.teach-box .tips-txt2,.teach-box .tips-txt3,.teach-box .tips-txt4{
	position: absolute;
}
.teach-box .tips-txt1{
	top: 60%;
	right: 20%;
}
.teach-box .tips-txt2{
	top: 12%;
	right: 0.5rem;
	text-align: center;
}
.teach-box .tips-txt3{
	bottom: 23%;
	right: 0.5rem;
}
.teach-box .tips-txt4{
    top: 40%;
    left: 10%;
}


.teach-box .timer{
	width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 30px;
    margin: 20px;
}
.teach-box .skip{
	width: 50px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	font-size: 14px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 5px;
	margin: 10px;
}



/* P3 */
.success-box{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(241,158,124,0.6);
	z-index: 21;
}
.close-pic{
	position: absolute;
	top: 15px;
	right: 10px;
	width: 70px;
	z-index: 23;
}
.close-pic2{
	position: absolute;
	top: 15px;
	right: 10px;
	width: 70px;
	z-index: 23;
}
.good-title{
	position: absolute;
	z-index: 18;
	width: 100%;
}
.success-city{
	position: absolute;
	width: 100%;
	margin-top: 20%;
	text-align: center;
	z-index: 18;
}
.light-bg{
	position: absolute;
	width: 100%;
	z-index: 17;
}
.flowergif{
	position: absolute;
	width: 100%;
	margin-top: 20%;
	z-index: 20;
}
.save-tips{
	position: absolute;
	width: 200px;
	text-align: center;
	bottom: 17%;
	z-index: 19;
	margin-left: -100px;
	left: 50%;
}
.go-lucky{
	position: fixed;
	bottom: 10%;
	width: 150px;
	margin-left: -75px;
	left: 50%;
	z-index: 26;
}
 
.save-box{
	position: fixed;
	z-index: 21;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.save-box img{
	width: 100%;
	opacity: 0.0001;
}

/* P3 */
.ranking-box{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 26;
	top: 0;
	left: 0;
	background-color: rgba(241,158,124,0.8);	
}
.box-in-rank{
	overflow-y: auto;
	width: 100%;
	height: auto;
}
.rank-title{
	width: 100%;
}
.rank-out{
	overflow: hidden;
	width: 100%;
	background-image: url("../images/p3/rank-bg.png");
	background-size: 100%;
	background-repeat: no-repeat;		
	background-position:top;	
	min-height: 350px;	
}
.rank-in{
	overflow: hidden;
	position: relative;
	background-image: url("../images/p3/rank1.png?v=1");
	background-size: contain;
	background-repeat: no-repeat;		
	background-position:center 40px;
	width: 300px;
	margin: 0 auto;
	min-height: 350px;
	font-size: 1rem;
}
.first-rank{
	margin-top: 29%;
	margin-left: 15%;
	overflow: hidden;
}
.first-rank p:first-child{
	float: left;
}
.first-rank p:last-child{
	float: left;
	margin-left: 20%;
}
.other-rank{
	margin-top: 5%;
	overflow: hidden;
	font-size: 0.9rem;
	width: 100%;
}
.city1,.city2,.city3{
	position: relative;
	background-image: url("../images/p3/rank2.png?v=1");
	background-size: contain;
	background-repeat: no-repeat;		
	background-position:center 0;	
	overflow: hidden;
	margin-top: 5%;
	width: 100%;
}
.city2{
	background-image: url("../images/p3/rank3.png?v=1");
}
.city3{
	background-image: url("../images/p3/rank4.png?v=1");
}

.citys{
	float: left;
	width: 30%;
}
.citys:nth-child(3),.citys:nth-child(4),.citys:nth-child(5),.citys:nth-child(6){
	margin-top: 7%;
}
.citys:nth-of-type(odd){
	margin-left: 15%;
}
.citys:nth-of-type(even){
	margin-left: 16%;
}
.citys p:first-child{
	text-align: left;
}
.citys p:last-child{
	font-size: 0.7rem;
	text-align: left;
	margin-top: 1px;
}

.love-shop{
	width: 100%;
}
.control-btn{
	width: 300px;
	margin: 20px auto;
	height: 40px;
}
.control-btn img:first-child{ height: 100%; float: left;}
.control-btn img:last-child{height: 100%; float: right;}

/* P5 */
.share-box{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 38;
	background-color: rgba(0,0,0,0.5);
}
.share-box .share-pic{
	width: 160px;
	float: right;
	margin: 10px 10px 0 0;
}

/* 音乐控制 */

#musics{
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 19;
}
#musics img{
	width: 1.3rem;
	height: 1.5rem;
	margin: 10px 0 0 13px;
	z-index:3;
}
.audio-control{
	display: block;
	width: 50px;
	height: 50px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background-image: url("../images/common/music-bg.png");
	background-size: contain;
	background-repeat: no-repeat;
}

/* 手机适配 */
@media screen and (max-height:670px){
	.dashboards{
		height: 70px;
	}
	.success-city{
		margin-top: 10%;
	}
	.teach-box .tips-txt3{
		bottom: 16%;
	}
}

@media screen and (max-height:620px){
	.save-tips{
		bottom: 10%;
	}
	.go-lucky{
		bottom: 2%;
	}	
}

@media screen and (max-width:350px){
	.rank-in{
		background-position: center 6px;
	}
	.first-rank{
		margin-top:18%;
	}
	
	
}