html,body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: none;
  font-family: "microsoft yahei","SimSun";
}

#login{
  width: 450px;
  border:1px solid #e5e5e5; 
  background:#ffffff;
  box-shadow: 0px 4px 8px  rgba(120,120,120,0.2);
  padding-bottom: 16px; 
  position: absolute;
  top:50%; 
  right:14%; 
  transform: translate(-0%,-50%);
}

#login .panel-heading {
	position: relative;
}

#login .panel-heading img{
	position: absolute;
	right: 4px;
	top: 4px;
}

#login .loginWay{
  width: 260px;
  margin: 0px auto;
  margin-bottom: 15px;
  overflow: hidden;
}

#login .loginWay li{
  float: left;
  width: 100px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
   font-weight: bold;
}

#login .loginWay li.cur{
  border-bottom: 2px solid #40A0F4;
  color: #40A0F4;
}

#passcodeLoginForm{
  display: none;
}

/*表单验证失败,验证文字样式*/
label.error {font-weight: normal;font-size: 12px; color:red;padding-left: 10px; margin-bottom: 0px;}


/*设备动作*/
.boxs{ width: 550px; height: 440px;position: relative; top:50%; margin-top: -220px; left: 10%; }

.boxs .imgs{width: 218px; height: 189px;  position: absolute; overflow: hidden; cursor: pointer; }

.boxs .imgs .cover{width: 218px; height: 189px; position: absolute; left: 0; top: 0; 
     transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	
    transition: all 0.35s;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
 }

.boxs .img1{ left:2px; top:74px; }
.boxs .img1 .cover{ background: url(../img/img-11.png) no-repeat; 
    transform-origin: right top; 
	-webkit-transform-origin: right top; 
	-moz-transform-origin: right top;   
}

.boxs .img2{ left:2px; top:222px;}
.boxs .img2 .cover{background: url(../img/img-12.png) no-repeat;
    transform-origin: left top; 
	-webkit-transform-origin: left top; 
	-moz-transform-origin: left top; 
}

.boxs .img3{left:130px; top:0px; }
.boxs .img3 .cover{background: url(../img/img-13.png) no-repeat;
    transform-origin: right bottom; 
	-webkit-transform-origin: right bottom; 
	-moz-transform-origin: right bottom; 
}

.boxs .img4{ left:130px; top:148px; }
.boxs .img4 .cover{background: url(../img/img-14.png) no-repeat;
    transform-origin: left bottom; 
	-webkit-transform-origin: left bottom; 
	-moz-transform-origin: left bottom; 
}

.boxs .img5{ left:258px; top:74px; }
.boxs .img5 .cover{background: url(../img/img-15.png) no-repeat;
    transform-origin: right top; 
	-webkit-transform-origin: right top; 
	-moz-transform-origin: right top; 
}

.boxs .img6{ left:258px; top:222px; }
.boxs .img6 .cover{background: url(../img/img-16.png) no-repeat;
    transform-origin: left top; 
	-webkit-transform-origin: left top; 
	-moz-transform-origin: left top; 
}

.boxs .img7{ left:386px; top:150px; }
.boxs .img7 .cover{background: url(../img/img-17.png) no-repeat;
    transform-origin: right bottom; 
	-webkit-transform-origin: right bottom; 
	-moz-transform-origin: right bottom; 
}

.boxs .img8{ left:386px; top:298px; }
.boxs .img8 .cover{background: url(../img/img-18.png) no-repeat;
    transform-origin: left bottom; 
	-webkit-transform-origin:left bottom; 
	-moz-transform-origin:left bottom; 
}

.boxs .imgs:hover .cover{ transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);}