.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%;
}
.top-shade{
	height: 50%;
}
.top-shade img{
	width: 100%;
	height:100%;
	position: relative;
	overflow: hidden;
	top:0;
	left:0;
	z-index:3;
}
.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 .8s  .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;
}
.sunDay{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../images/images/beijing.gif) 0 0 no-repeat;
}
.finger1{
	width: 18%;
	height: 12%;
	position: absolute;
	top: -2%;
    left: 11%;
    -webkit-transform: rotateZ(106deg);
	
}
.finger1 img{
	width: 100%;
	height:100%;
	-webkit-animation: joggle .8s  .8s infinite;
}
@-webkit-keyframes joggle{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}
.rule {
	width: 100%;
	height: 30%;
	position: absolute;
	top: 6%;
	left:-7%;
	z-index: 4;
}
.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: 6% 3%;
}
.clouds{
	width:100%;
	height: 58%;
	display: flex;
	flex-direction: row;
}
.cloud{
	position: absolute;
	top: 26%;
    left: -6%;
}
.tex2{
	color: #ffffff;
	margin: 50% 12%;
}	
.finger2{
	display: none;
	width: 31%;
	height: 11%;
	position: absolute;
	left: 73%;
    bottom: 27%;
}
.finger2 img{
	width: 100%;
	height: 100%;
	-webkit-animation: joggle1 .8s  .8s infinite;
}
@-webkit-keyframes joggle1{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.clouDed{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../images/clouded-over.gif) 0 0 no-repeat;
}
.finger3{
	display: none;
	width: 20%;
	height: 17%;
	position: absolute;
	top:0;
	left: 38%;
}
.finger3 img{
	width:100% ;
	height: 100%;
	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);}
}
.bigsun{
	width: 58%;
    height: 32%;
    top: 7%;
    left: 18%;
    position: relative;
    z-index: 1;
    background: url(../images/images/sun_03.png)-0.01rem -0.07rem no-repeat;
    -webkit-animation: sunImgChange 2.8s .8s infinite;
    background-size: cover;
}

@-webkit-keyframes sunImgChange{
0%{ background-image:url(../images/images/sun_03.png);}
20%{ background-image:url(../images/images/sginy_03.png);}
40%{ background-image:url(../images/images/sun_03.png);}
60%{ background-image:url(../images/images/sginy_03.png);}
80%{ background-image:url(../images/images/sun_03.png);}
100%{ background-image:url(../images/images/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%;
}
.finger4{
	width: 31%;
	height: 11%;
	position: absolute;
	top:59%;
	right: -1%;
}
.finger4 img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: joggle3 .8s  .8s infinite;
}
@-webkit-keyframes joggle3{
	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;
	
}
.finger5{
	display: none;
	width: 31%;
	height: 11%;
	position: absolute;
	top: 29%;
    right: -12%;
}
.finger5 img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: joggle4 .8s  .8s infinite;
}
@-webkit-keyframes joggle4{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.rainDay{
	display:none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../images/rain.gif) 0 0 no-repeat;
	background-size: cover;
}
.tx5{
	font-size: 0.8rem;
	color: #fff;
	text-align: center;
	margin-top: 50%;
	margin-left: -1.5rem;
	-webkit-animation: textChange .8s  .8s infinite;
}
@-webkit-keyframes textChange{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(0.5rem);}
}
.finger6{
	display: block;
	width: 31%;
	height: 11%;
	position: absolute;
	top: 29%;
    right: -12%;
}
.finger6 img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: joggle5 .8s  .8s infinite;
}
@-webkit-keyframes joggle5{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.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%;
}
.bybys{
	width: 30%;
    height: 22%;
	position: absolute;
	top: 3%;
    left: 7%;
    z-index: 4;
}
.bybys img{
	width: 100%;
	height:100%;
}

.sign{
	width: 27%;
	height: 20%;
	position: absolute;
	z-index: 3;
	top:1%;
	right:1%;
	
}
.sign img{
	width: 100%;
	height:100%;
	-webkit-animation: overturn 1.5s .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%;}
}