.finger1{
	width: 60%;
	height: 60%;
	position: absolute;
    -webkit-transform: rotateZ(106deg);
	
}
.finger1 img{
	width: 60%;
	height:60%;
	-webkit-animation: joggle .8s  .8s infinite;
}
@-webkit-keyframes joggle{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}
.finger2{
	position: absolute;
}
.finger2 img{
	width: 60%;
	height: 60%;
	-webkit-animation: joggle1 .8s  .8s infinite;
}
@-webkit-keyframes joggle1{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.finger3{
	position: absolute;
}
.finger3 img{
	width:60% ;
	height: 60%;
	position: relative;
	top: -1%;
	z-index: 2;
	-webkit-animation: joggle2 .8s  .8s infinite;
}
@-webkit-keyframes joggle2{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
}
.contaion{
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.contaion .MusicBtn{
	width: 13%;
	height: 8%;
	position: absolute;
	right: 9%;
	top: 2%;
}
.contaion .mark{
	width: 100%;
	height: 60%;
	position: absolute;
	top: 20%;
}
/*
 * 开始页面
 */
.login{
	width: 100%;
	height: 100%;
}
.top-shade{
	height: 50%;
}
.top-shade img{
	width: 100%;
	height:100%;
	position: relative;
	overflow: hidden;
	top:0;
	left:0;
	z-index:3;
}
.rule{
	width: 100%;
	height:35.5%;
	margin-top: -70%;
    z-index: 99;
    position: relative;
    
}
.rule  img{
	width: 100%;
	height:100%;
}
.people{
	height:47%;
}
.people img{
	width: 100%;
	position: absolute;
	top:23.5%;
	z-index:3;
}
.btn{
	width: 50%;
	height: 15%;
	text-align: center;
	position: absolute;
    left: 25%;
    top: 79%;
    z-index: 3;
}
.btn img{
	width: 100%;
	height: 100%;
}
.finger{
	width: 33%;
	height:15%;
	position: absolute;
    left: -4%;
    top: 81%;
    z-index: 3;
    -webkit-animation: shake 1.5s  .8s infinite; 
}
.finger img{
	width: 100%;
	height: 100%;
}
@-webkit-keyframes shake{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}
.bottom-shade{
	height: 50%;
}
.bottom-shade img{
	width: 100%;
	position: relative;
	bottom: 94%;
	left:0;
	z-index: 1;
}
/*
 * 第一部分
 */
.part1{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: url(../img/part1beijing_02.gif) 0 0 no-repeat;
	background-size: cover;
}
.part1 .parts1{
	position: absolute;
    overflow: hidden;
    top: -46%;
    left: 8%;
}
.part1 .parts1 img{
	width: 100%;
	height: 100%;
	
}
/*.partsport{
	-webkit-animation: sport1  3s .8s alternate;
}
@-webkit-keyframes sport1{
	from{top:0%}
	to{top:25%}
}*/
/*SunDay*/
.sunDay{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../img/beijing.gif) 0 0 no-repeat;
	background-size: cover;
}
.sunDayFinger1{
	width: 18%;
	height: 12%;
	position: absolute;
	top: -2%;
    left: 11%;
    -webkit-transform: rotateZ(106deg);
	
}
.sunDayFinger1 img{
	width: 100%;
	height:100%;
	-webkit-animation: sdf1 .8s  .8s infinite;
}
@-webkit-keyframes sdf1{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}
.sunDayFinger2{
	display: none;
	width: 31%;
	height: 11%;
	position: absolute;
	left: 73%;
    bottom: 27%;
}
.sunDayFinger2 img{
	width: 100%;
	height: 100%;
	-webkit-animation: sdf2 .8s  .8s infinite;
}
@-webkit-keyframes sdf2{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.sun{
	width: 100%;
	height: 34%;
	display: flex;
	flex-direction: row;
}
.sun img{
	width: 58%;
	height: 100%;
	margin-top: 2%;
}
.tex{
	display: none;
	font-size: 0.5rem;
    font-weight: bolder;
    font-family: "微软雅黑";
}
.tex1{
    color: #fff214;
    /*margin-top: 32%;
    margin-right: 3%;*/
}
.clouds{
	width:100%;
	height: 58%;
	display: flex;
	flex-direction: row;
}
.cloud{
	position: absolute;
	top: 26%;
    left: -6%;
}
.tex2{
	color: #ffffff;
	margin: 50% 12%;
}
/*Clouded*/
.clouDed{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../img/clouded-over.gif) 0 0 no-repeat;
	background-size: cover;
}
.clouDedFinger1{
	display: none;
	width: 20%;
	height: 17%;
	position: absolute;
	top:0;
	left: 38%;
}
.clouDedFinger1 img{
	width:100% ;
	height: 100%;
	position: relative;
	top: -1%;
	z-index: 2;
	-webkit-animation: cdf1 .8s  .8s infinite;
}
@-webkit-keyframes cdf1{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
}
.bigsun{
	width: 71%;
    height: 32%;
    top: 7%;
    left: 18%;
    position: relative;
    z-index: 1;
    background: url(../img/sun_03.png) -0.1rem -0.07rem no-repeat;
    -webkit-animation: sunImgChange 2.8s .8s infinite;
    /* background-size: cover; */
}

@-webkit-keyframes sunImgChange{
0%{ background-image:url(../img/sun_03.png);}
20%{ background-image:url(../img/sginy_03.png);}
40%{ background-image:url(../img/sun_03.png);}
60%{ background-image:url(../img/sginy_03.png);}
80%{ background-image:url(../img/sun_03.png);}
100%{ background-image:url(../img/sginy_03.png);}
}
.tex3{
    font-size: 0.45rem;
    color: #fff;
    position: absolute;
    top: 2%;
    left: -13%;
	
}
.dark-clouds{
	width: 100%;
	height: 74%;
	position: absolute;
	top: 22%;
	left:0;
}
.dark-clouds img{
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 3;
}
.tex4{
	font-size: 0.49rem;
	color: #9b9a9a;
	position: absolute;
	bottom:25%;
	left:45%;
}
.clouDedFinger2{
	width: 31%;
	height: 11%;
	position: absolute;
	top:59%;
	right: -1%;
}
.clouDedFinger2 img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: cdf2 .8s  .8s infinite;
}
@-webkit-keyframes cdf2{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.last-cloud{
	width: 56%;
	height:17%;
	position: absolute;
	top: 22%;
    z-index: 4;
	right: 0;
}
.last-cloud img{
	width: 100%;
	height: 100%;
	z-index:4;
	
}
.clouDedFinger3{
	display: none;
	width: 31%;
	height: 11%;
	position: absolute;
	top: 29%;
    right: -12%;
}
.clouDedFinger3 img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: cdf3 .8s  .8s infinite;
}
@-webkit-keyframes cdf3{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
/*
 *第二部分 
 */
.part2{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: url(../img/parts2beijing.gif) 0 0 no-repeat;
	background-size: cover;
}
.part2 .parts2{
	position: absolute;
    overflow: hidden;
    top: -46%;
    left: 8%;
}
.part2 .parts2 img{
	width: 100%;
	height: 100%;
}
.sports{
	position: absolute;
	overflow: hidden;
    top: -90%;
    left: 8%;
}
/*smallRainDay*/
.smallrainDay{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../img/rain.gif) 0 0 no-repeat;
	background-size: cover;
}
.smallrainDayFinger{
	width: 45%;
    height: 15%;
    position: absolute;
    right: -4%;
    top: 46%;
    z-index: 3;
    -webkit-animation: srain .8s .8s infinite; 
}
.smallrainDayFinger img{
	width: 100%;
	height: 100%;
}
@-webkit-keyframes srain{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}
/*moderaterainDay*/
.moderaterainDay{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../img/rain-one-the-green-grass1.gif) 0 0 no-repeat;
	background-size: cover;
}
/*heavyrainDay*/
.heavyrainDay{
	display:none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../img/rain-one-the-green-grass.gif) 0 0 no-repeat;
	background-size: cover;
}
/*
 *第三部分 
 */
.part3{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: url(../img/parts3beijing.gif) 0 0 no-repeat;
	background-size: cover;
}
.part3 .parts3{
	position: absolute;
    overflow: hidden;
    top: -30%;
}
.part3 .parts3 img{
	width: 100%;
	height: 100%;
}
/*中雨部分样式开始*/
.rainCenter{
	display: none;
	position: absolute;
	top: 0;
	width:100%;
	height:100%;
	background:url(../img/rain-one-the-green-grass_01.gif) no-repeat;
	background-size:100% 100%;
}
.rainCenter .rain{
	width:120%;
	height: 100%;
	position: relative;
	left:-10%;
	background:url(../img/having-rain_02.png) no-repeat  center 2rem;
	background-size:100% 80%;
	position: absolute;
	-webkit-animation: rainAnimation 5s  0s infinite ;
}
@-webkit-keyframes rainAnimation{
	0%{-webkit-transform: translateX(0.6rem);}
	50%{-webkit-transform: translateX(-0.6rem);}
	100%{-webkit-transform: translateX(0.6rem);}
}

.word{
	display: none;
	position: absolute;
}


/*tree----------------------------*/
.rainCenter .tree{
	position: absolute;
	top:3.2rem;
	left:-.3rem;
}
.rainCenter .tree .rainTree{
	top:-1.2rem;
	left:1.5rem;
}
.rainCenter .tree .treeWord{
	right:0;
	top:0;
}

/*tree--over--------------------------*/




/*brownFence-----------------------------*/
.brownFence{
	position: absolute;
	bottom: 1.3rem;
	left:-5rem;
	z-index: 1;
}
.brownFence .brownFenceImg{
	width:100%;
}
.brownFence .rainbrownFence{
	display: none;
	bottom: -0.5rem;
	right:0.7rem;
}
.brownFence .brownFenceWord{
	bottom: 0.5rem;
	right:-0.7rem;
}
/*brownFence-over----------------------------*/
/*house*/
.house{
	position: absolute;
	bottom: 3.8rem;
	left:.4rem;
}
.house .houseImg{
	width:100%;
}
.house .rainHouse{
	display: none;
	bottom:0rem;
	left: -0.7rem;
}
.house .houseWord{
	bottom: 1rem;
	right:-2rem;
}

/*house--over*/


/*yellowflower-----------------------*/
.yellowFlower{
	position: absolute;
	bottom: 2.24rem;
	left:0rem;
	z-index: 1;
}
.yellowFlower .rainyellowFlower{
	display: none;
	bottom:0rem;
	left: -.5rem;
}
.yellowFlower .yellowFlowerWord{
	bottom: .3rem;
	right:.3rem;
}
/*yellowflower-over----------------------*/

/*pubuleflower-----------------------*/
.purbuleFlower{
	position: absolute;
	bottom: 2.24rem;
	left:1.9rem;
	z-index: 1;
}
.purbuleFlower .rainpurbuleFlower{
	display: none;
	bottom:0rem;
	left: -.5rem;
}
.purbuleFlower .yellowFlowerWord{
	bottom: .3rem;
	right:.3rem;
}
/*publeflower-over----------------------*/





/*rode*/
.rode{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0;
}
.rode .rainrode{
	display: none;
	position: absolute;
	bottom:0;
	right: 2rem;
}
.rode .rodeWord{
	bottom: .3rem;
	right:3rem;
}

/*小车*/
.smallCar{
	position: absolute;
	top: 7.5rem;
	right:0.21rem;
	-webkit-transition: all 1s;
}
.smallCar:hover{
	/*-webkit-transform: translate(.8rem,.3rem);*/
}
.smallCar .fingerNone{
	display: none;
	position: absolute;
	top:-1rem;
}
.bigCar{
	display: none;
	position: absolute;
	bottom: 2rem;
	right:0.55rem;
	-webkit-transition: all 1s;
	z-index: 1;
}
.bigCar:hover{
}
.bigCar .wordCar{
	position: absolute;
	top:-.5rem;
	left:1.1rem;
}
.bigCar .fingerNone{
	position: absolute;
	top: -2.5rem;
	left: .7rem;
}
/*动画*/
.holdAnimate{
	-webkit-animation-iteration-count: infinite ;
	-moz-webkit-animation-iteration-count: infinite;
	-ms-webkit-animation-iteration-count: infinite;
	-o-webkit-animation-iteration-count: infinite;
	webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 5s;
	-o-animation-duration: 5s;
	animation-duration: 3s;
}
/*中雨部分样式结束*/


/*彩虹天*/
.rainbowDay{
	display: none;
	/*display: block !important;*/
	width:100%;
	height:100%;
	top: 0;
	background: url(../img/newsbeijing.gif) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}
.rainbowDay .rainbowImg{
	position: absolute;
	top:2.4rem;
	left:-1rem;
}
.rainbowDay .fingerNone{
	position: absolute;
	top:3.7rem;
	left:2.7rem;
}
.rainbowDay .rainbowWord{
	position: absolute;
	top:1.16rem;
	left:.54rem;
}
/*end*/
.end{
	display:none;
	width: 100%;
	height:100%;
	position: absolute;
	top:0;
	z-index: 99;
	overflow: hidden;
	background-color: #fff;
}
.top-shader{
	height:50%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
	overflow: hidden;
}
.topstop{
	-webkit-animation: topstops .8s .8s linear;
}
@-webkit-keyframes topstops{
	from{top:0%;}
	to{top:50%;}
}
.top-shader img{
	width: 100%;
	height: 100%;
}
.sign{
	width: 29%;
	height: 29%;
	position: absolute;
	z-index: 3;
	top:1%;
	right:1%;
	
}
.child {
    width: 30%;
   height: 23%;
    position: absolute;
    z-index: 3;
    top: 4%;
    left: 4%;
}
.child img{
	width: 100%;
	height: 100%;
}
.sign img{
	width: 100%;
	height:100%;
	-webkit-animation: overturn 1s .8s infinite;
}

@-webkit-keyframes overturn{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
} 
.endd{
	width: 85%;
    height: 18%;
    text-align: center;
    margin-top: 60%;
    position: relative;
    z-index: 3;
}
.bnt1{
	width: 52%;
	height: 14%;
	position: absolute;
	bottom:14%;
	z-index: 3;
	left:23%;
}
.bnt1 img{
	width: 100%;
	height: 100%;
}
.finger7{
	display: block;
	width: 36%;
    height: 15%;
    position: absolute;
    top: 77%;
    left: -2%;
}
.finger7 img{
	width:100% ;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: joggle5 .8s  .8s infinite;
}
@-webkit-keyframes joggle5{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
}
.bottom-shader{
	height:50.05%;
	width: 100%;
	position: absolute;
	bottom:0;
	overflow: hidden;
}
.bottom-shader img{
	width: 100%;
	height: 100%;
}
.botomstop{
	-webkit-animation:bottomstops .8s .8s linear;
}
@-webkit-keyframes bottomstops{
	from{bottom:0%;}
	to{bottom:50%;}
}
.contaion .mark{
	width: 100%;
	height: 60%;
	position: absolute;
	top: 20%;
	
}
.contaion .return{
	width: 22%;
	height: 12%;
	position: fixed;
	left: 1%;
	bottom: 0%;
	z-index: 99;
}
.contaion .icon{
	width: 22%;
	height: 12%;
	position: fixed;
	right: 1%;
	bottom: 0%;
	z-index: 99;
}
/*.contaion .MusicBtn{
	width: 13%;
	height: 8%;
	position: absolute;
	right: 5%;
	top: 3%;
}*/