/*手指动画效果*/
/*.finger{
	width: 60%;
	height: 60%;
	position: absolute;
    z-index: 3;
    -webkit-animation: shake .8s  .8s infinite; 
}
.finger img{
	width:100%;
	height: 100%;
}
@-webkit-keyframes shake{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}*/
.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;
}
.login{
	width: 100%;
	height: 100%;
	background: url(../images/bheand-login.gif) top center no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}
.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:31.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;
}


/*中雨部分样式开始*/
.rainCenter{
	display: none;
	position: relative;
	width:100%;
	height:100%;
	background:url(../images/rainImg/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(../images/rainImg/having-rain_02.png) no-repeat  center 2rem;
	background-size:100% 60%;
	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:2.95rem;
	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: -1rem;
}
.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;
}
/*.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{
	-webkit-transform: translate(.1rem,.1rem);
}
.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;
	overflow: hidden;
	/*display: block !important;*/
	width:100%;
	height:100%;
	background: url(../images/rainImg/rainbow-beijing.gif) no-repeat;
	background-size: 100% 100%;
	position: relative;
}
.rainbowDay .rainbow{
	position: absolute;
	top:2.4rem;
	left:-1rem;
}
.rainbowDay .rainbowImg{
	width: 100%;
	height: 100%;
	
}
.rainbowChange{
	-webkit-animation: stops 2.5 infinite;
}
@-webkit-keyframes stops{
	0%{}
	20%{}
}
.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;
	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 .icon{
	width: 22%;
	height: 12%;
	position: fixed;
	right: 1%;
    bottom: 0%;
	z-index: 99;
}
 .contaion .return{
	width: 22%;
	height: 12%;
	position: fixed;
	left: 1%;
	bottom: 0%;
	z-index: 99;
}
 /*.rainbowDay .icon{
	width: 22%;
	height: 12%;
	position: fixed;
	right: 5%;
	bottom: 3%;
	z-index: 0;
}*/
/*.contaion .MusicBtn{
	width: 13%;
	height: 8%;
	position: absolute;
	right: 5%;
	top: 3%;
}*/