* {
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	box-sizing: border-box;
}

.ab {
	position: absolute;
}
.cl:after{
	content: '';
	display: block;
	height: 0;
	clear: both;
}
.fl{
	float: left;
}
.fr{
	float: right;
}

img {
	display: block;
	width: 100%;
}

html,
body,
.container {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	background-color: #df1a00;
	font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.container{}
/*bg audio*/
.btn-bgaudio{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: url(btn-bgaudio.png) no-repeat;
  z-index: 200;
  background-size: 100%;
  background-position: left top;
}
.btn-bgaudio.mute{
  background-position: left bottom;
}

.sec{
	position: relative;
}
.sec1{}
.bg{}
.bg-1{}
.header{
	top: 16%;
	left: 20%;
	width: 60%;
	opacity: 0;
}
.active .header{
	transition: all 1s .2s ease;
	opacity: 1;
}
.sec1-f1{
	left: 5%;
	top: 10px;
	width: 50px;
	animation: blink 1.5s .2s alternate infinite linear;
}
.sec1-f2{
	left: 25%;
	top: 15px;
	width: 30px;
	animation: blink 1.5s .3s alternate infinite linear;
}
.sec1-f3{
	left: 5%;
	top: 80px;
	width: 30px;
	animation: blink 1.5s .42s alternate infinite linear;
}
.sec1-f4{
	right: 0;
	top: 40%;
	width: 50px;
	animation: blink 1.5s .1s alternate infinite linear;
}
.sec1-f5{
	right: 15px;
	top: 50%;
	width: 40px;
	animation: blink 1.5s .14s alternate infinite linear;
}
.sec1-f6{
	right: 10px;
	top: 70%;
	width: 40px;
	animation: blink 1.5s .26s alternate infinite linear;
}
.sec1-f7{
	left: 15px;
	top: 49%;
	width: 50px;
	animation: blink 1.5s .26s alternate infinite linear;
}
.sec1-f8{
	left: 25%;
	top: 60%;
	width: 30px;
	animation: blink 1.5s .26s alternate infinite linear;
}
.sec1-yun{
	bottom: -6%;
	left: 5%;
	width: 80%;
	animation: move 1.5s .26s alternate infinite linear;
}

.sec2-t{
	top: 0%;
	left: 12%;
	width: 70%;
	opacity: 0;
	transform: translateY(20px);
}
.tiananmen{
	right: 0;
	top: 48%;
	width: 90%;
	opacity: 0;
	transform: translateY(20px);
}
.active .sec2-t{
	transition: all 1s .3s ease;
	opacity: 1;
	transform: translateY(0);
}
.active .tiananmen{
	transition: all 1s .6s ease;
	opacity: 1;
	transform: translateY(0);
}
.zongshu{
	top: 7%;
	left: 15%;
	width: 70%;
	opacity: 0;
	transform: scale(.5);
}
.active .zongshu{
	transition: all .8s .3s ease;
	opacity: 1;
	transform: scale(1);	
}
.ditu{
	bottom: -1%;
	left: 5%;
	width: 90%;
	z-index: 10;
	opacity: 0;
	transform: scale(.5);
}
.active .ditu{
	transition: all 1s .5s ease;
	opacity: 1;
	transform: scale(1);	
}
.sec4-t1{	
	top: 22%;	
	left: 16%;	
	width: 68%;
	opacity: 0;
	transform: translateY(20px);
}
.active .sec4-t1{
	transition: all 1s .3s ease;
	opacity: 1;
	transform: translateY(0);
}
.rank{
	top: 36%;
	left: 7%;
	width: 88%;
	opacity: 0;
	transform: translateY(20px);
}
.active .rank{
	transition: all 1s .8s ease;
	opacity: 1;
	transform: translateY(0);
}
.sec5-f1{
	left: 9%;
	top: 2%;
	width: 50px;
	animation: blink 1.5s .42s alternate infinite linear;
}
.sec5-f2{
	left: 7%;
	top: 9%;
	width: 30px;
	animation: blink 1s .23s alternate infinite linear;
}
.btn-zhufu a{
	display: block;
}
.btn-zhufu{
	top: 10%;
	left: 32%;
	width: 36%;
	animation: btn-zhufu .8s 1s alternate infinite linear;
}
@keyframes btn-zhufu{
	to{
		transform: scale(.95);
	}
}

@keyframes blink{
	to{
		transform: scale(.7);
		opacity: .5;
	}
}
@keyframes move{
	to{
		transform: translateX(30px);
	}
}