body,div{
	margin:0;
	padding:0;	
}

/*竖屏*/
@media only screen and (orientation:portrait ) {
	.msg{
		display:none;
	}
}
/*横屏*/
@media only screen and (orientation:landscape) {
	.msg{
		position: absolute;
		left: 0px;
		top: 0px;
		display:block;
		width:100%;
		height: 100%;
		z-index: 101;
		background-color: #B4D4ED;
	}
}

.msg img{
	margin-top: 15%;
	width:20%;
	margin-left: 40%;
}

.container{
	width:100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	background-color: #b4d4ed;	
}

.loading{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(../img/bg.png);
	background-size: 100%;
}

.loading .logo{
	width: 190px;
	height: 190px;
	margin:50% auto 0 auto;
	background-image: url(../img/风车序列.png);
	-webkit-animation-name: loading-ani;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function: steps(1);
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes loading-ani{
    0%, 6.25%{  background-position: 0 0;  }
    6.25%, 12.5%{  background-position: -190px 0;  }
    12.5%, 18.75%{  background-position: -380px 0 ;  }
    18.75%, 25%{  background-position: -570px 0 ;  }
    25%, 31.25%{  background-position: 0 -190px;  }
    31.25%, 43.75%{  background-position: -190px -190px;  }
    43.75%, 50%{  background-position: -380px -190px ;  }
    50%, 56.25%{  background-position: -570px -190px ;  }
    56.25%, 62.5%{  background-position: 0 -380px;  }
    62.5%, 68.75%{  background-position: -190px -380px;  }
    68.75%, 75%{  background-position: -380px -380px ;  }
    75%, 81.25%{  background-position: -570px -380px ;  }
    81.25%, 87.5%{  background-position: 0 -570px;  }
    87.5%, 93.75%{  background-position: -190px -570px;  }
    93.75%, 100%{  background-position: -380px -570px;  }
    100%, 100%{  background-position: -570px -570px;  }
}

.playaudio{
	position: absolute;
	width: 80px;
	height:80px;
	top:20px;
	right:20px;
}

.loading img{
	width: 50%;
	float: left;
	padding-top: 5%;
	margin-left: 25%;
}

.page02{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(../img/bg.png);
	background-size: 100%;
}

.page02 .bg01{
	width: 90%;
	float: left;
	padding-top: 20%;
	margin-left: 5%;
	display: none;
}
.page02 .bg02{
	width: 76%;
	float: left;
	padding-top: 10%;
	margin-left: 12%;
	display: none;
}
.page02 .bg03{
	width: 76%;
	float: left;
	padding-top: 10%;
	margin-left: 12%;
	display: none;
}


.main{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	overflow: hidden;
	display: none;
}

.main .bg{
	width: 100%;
}

.main #title{
	position: absolute;
	left: 20%;
	top: -10%;
	width: 60%;
}

.main .mark{
	position: absolute;
	width:160px;
	height:500px;	
	display: none;
	overflow: visible;
	/*
	background: url(../img/animation.png);
	-webkit-animation-name: run;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count:1; 
    -webkit-animation-timing-function: steps(1);
    -webkit-animation-fill-mode: forwards;*/
}

@-webkit-keyframes run{
    0%, 5.5%{  background-position: 0 0;  }
    5.5%, 11%{  background-position: -160px 0;  }
    11%, 16.5%{  background-position: -320px 0 ;  }
    16.5%, 22%{  background-position: -480px 0 ;  }
    22%, 27.5%{  background-position: -640px 0 ;  }
    27.5%, 33%{  background-position: -800px 0 ;  }
    33%, 38.5%{  background-position: -960px 0 ;  }
    38.5%, 44%{  background-position: -1120px 0 ;  }
    44%, 49.5%{  background-position: -1280px 0 ;  }
    49.5%, 55%{  background-position: 0 -500px;  }
    55%, 60.5%{  background-position: -160px -500px;  }
    60.5%, 66%{  background-position: -320px  -500px;  }
    66%, 71.5%{  background-position: -480px  -500px;  }
    71.5%, 77%{  background-position: -640px  -500px;  }
    77%, 82.5%{  background-position: -800px  -500px;  }
    82.5%, 88%{  background-position: -960px  -500px;  }
    88%, 93.5%{  background-position: -1120px  -500px;  }
    93.5%, 100%{  background-position: -1280px  -500px;  }
    }
    
.main .mark img{
	position: relative;
	display: none;
}

.main #mark01{
	left: 52%;
	top: 16%;
}

.slogan01{
	width: 300%;
	top:-20%;
	left: -20%;
}

.main #mark02{
	left: 45%;
	top: 22%;
}

.slogan02{
	width: 300%;
	top:25%;
	left: 10%;
}

.main #mark03{
	left: 48%;
	top: 33%;
}

.slogan03{
	width: 300%;
	top:16%;
	left: -32%;
}

.main #mark04{
	left: 49%;
	top: 46%;
}

.slogan04{
	width: 300%;
	top:16%;
	left: -32%;
}
.main #mark05{
	left: 20%;
	top: 60%;
}

.slogan05{
	width: 300%;
	top:-18%;
	left: -60%;
}

.main #mark06{
	left: 51%;
	top: 74.5%;
}

.slogan06{
	width: 300%;
	top:-20%;
	left: -10%;
}


 .dropDown{
 	position: absolute;
 	width: 10%;
 	left: 45%;
 	bottom: 3%;
 	-webkit-animation-name: arrow;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count:infinite;
 }
 
 .dropDown02{
 	position: absolute;
 	width: 10%;
 	left: 45%;
 	bottom: 3%;
 	-webkit-animation-name: arrow;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count:infinite;
    display: none;
 }
 
 @-webkit-keyframes arrow{
    0%{  bottom: 3%;  }
    50%{  bottom: 6%;  }
    100%, 100%{  bottom: 3%;  }
    }
 


.page03{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: #3984c0;
	overflow: hidden;
}

.page03 .bg01{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	display: block;
}

.page03 .bg02{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	display: none;
}

.page03 .building01{
	position: absolute;
	left: 0%;
	top: -10%;
	width: 100%;
	display: block;
}

.page03 .building02{
	position: absolute;
	left: 0%;
	top: -10%;
	width: 100%;
	display: none;
}

.page03 .expAni{
	position: absolute;
	top: 30%;
	left: 30%;
	width:450px;
	height:450px;
	background-image: url(../img/P3-特效.png);
	-webkit-animation-name: exp-ani;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count:12; 
    -webkit-animation-timing-function: steps(1);
    -webkit-animation-fill-mode: forwards;
    display: none;
}

@-webkit-keyframes exp-ani{
	0%, 4%{  background-position: 0 0;  }
    4%, 8%{  background-position: -450px 0;  }
    8%, 12%{  background-position: -900px 0 ;  }
    12%, 16%{  background-position: -1350px 0 ;  }
    16%, 20%{  background-position: -1800px 0 ;  }
    20%, 34%{  background-position: -2250px 0 ;  }
    24%, 28%{  background-position: 0 -300px ;  }
    28%, 32%{  background-position: -450px -450px ;  }
    32%, 36%{  background-position: -900px -450px ;  }
    36%, 40%{  background-position: -1350px -450px;  }
    40%, 44%{  background-position: -1800px -450px;  }
    44%, 48%{  background-position: -2250px  -450px;  }
    48%, 52%{  background-position: 0  -900px;  }
    52%, 56%{  background-position: -450px  -900px;  }
    56%, 60%{  background-position: -900px  -900px;  }
    60%, 64%{  background-position: -1350px  -900px;  }
    64%, 68%{  background-position: -1800px  -900px;  }
    68%, 72%{  background-position: -2250px  -900px;  }
    72%, 76%{  background-position: 0  -1350px;  }
    76%, 80%{  background-position: -450px  -1350px;  }
    80%, 84%{  background-position: -900px  -1350px;  }
    84%, 88%{  background-position: -1350px  -1350px;  }
    88%, 92%{  background-position: -1800px  -1350px;  }
    92%, 100%{  background-position: -2250px  -1350px;  }
}



.page03 .b00{
	position: absolute;
	left: 56%;
	top: 14%;
	width: 40%;
}
.page03 .b01{
	position: absolute;
	left: 2%;
	top: 12%;
	width: 40%;
}
.page03 .b02{
	position: absolute;
	left: 1%;
	top: 52%;
	width: 50%;
}
.page03 .b03{
	position: absolute;
	left: 60%;
	top: 62%;
	width: 40%;
}
.page03 .b04{
	position: absolute;
	left: 30%;
	top: 76%;
	width: 40%;
}
.page03 .b05{
	position: absolute;
	left: 30%;
	top: 1%;
	width: 40%;
}

.page03 .finger{
	display: none;
 	position: absolute;
 	width: 20%;
 	left: 50%;
 	top: 25%;
 	-webkit-animation-name: fingermove;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count:infinite;
 }
 
 @-webkit-keyframes fingermove{
    0%{  top: 25%;  }
    50%{  top: 30%;  }
    100%, 100%{  top: 25%;  }
    }
   
 .page04{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(../img/bg.png);
	background-size: 100%;
}

.page04 .bg01{
	float: left;
	width: 90%;
	padding-top: 20%;
	margin-left: 5%;
	display: none;
}
.page04 .bg02{
	float: left;
	width: 64%;
	padding-top: 8%;
	margin-left: 21%;
	display: none;
}

.page04 .bg03{
	float: left;
	width: 86%;
	padding-top: 8%;
	margin-left: 7%;
	display: none;
}
.page04 .bg04{
	float: left;
	width: 84%;
	padding-top: 2%;
	margin-left: 8%;
	display: none;
}
 
.page05{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-image: url(../img/bg.png);
	background-size: 100%;
	overflow: hidden;
}

.page05 .bg01{
	float: left;
	width: 90%;
	padding-top: 40%;
	margin-left: 5%;
	display: block;
}
.page05 .bg02{
	float: left;
	width: 60%;
	padding-top: 20%;
	margin-left: 20%;
	display: block;
}

.page05 .linkBtn{
	width: 40%;
	float: left;
	padding-top: 30%;
	margin-left: 30%;
	display: block;
}

.page05 .shareBtn{
	width: 40%;
	float: left;
	padding-top: 30%;
	margin-left: 10%;
	display: block;
}


.shareSign{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(100,100,100,0.8);
	overflow: hidden;
}

.shareSign .bg01{
	width: 60%;
	float: left;
	padding-top: 5%;
	margin-left: 35%;
	display: block;
}