html,body
{
	width:100%;
	height:100%;
}
body{
	background-image: url(../img/img3.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	 -webkit-animation: skygradient 15s ease infinite alternate;
  -moz-animation: skygradient 15s ease infinite alternate;
  -o-animation: skygradient 15s ease infinite alternate;
  animation: skygradient 15s ease infinite alternate;
  font-family:"微软雅黑";
}
/* @-webkit-keyframes skygradient {
  0%{background-image: url(../img/img1.jpg);}
  20%{background-image: url(../img/img2.jpg);}
  40%{background-image: url(../img/img1.jpg);}
  60%{background-image: url(../img/img2.jpg);}
  80%{background-image: url(../img/img1.jpg);}
  100%{background-image: url(../img/img2.jpg);}
 }
@-moz-keyframes skygradient {
  0%{background-image: url(../img/img1.jpg);}
  20%{background-image: url(../img/img2.jpg);}
  40%{background-image: url(../img/img1.jpg);}
  60%{background-image: url(../img/img2.jpg);}
  80%{background-image: url(../img/img1.jpg);}
  100%{background-image: url(../img/img2.jpg);}
 }
@-o-keyframes skygradient {
  0%{background-image: url(../img/img1.jpg);}
  20%{background-image: url(../img/img2.jpg);}
  40%{background-image: url(../img/img1.jpg);}
  60%{background-image: url(../img/img2.jpg);}
  80%{background-image: url(../img/img1.jpg);}
  100%{background-image: url(../img/img2.jpg);}
 }
@keyframes skygradient {
  0%{background-image: url(../img/img1.jpg);}
  20%{background-image: url(../img/img2.jpg);}
  40%{background-image: url(../img/img1.jpg);}
  60%{background-image: url(../img/img2.jpg);}
  80%{background-image: url(../img/img1.jpg);}
  100%{background-image: url(../img/img2.jpg);}
 } */
.big
{
	height:auto;
	padding: 10px;
	border-radius: 5px;
	background-color:rgba(80%,80%,80%,0.6);/*	opacity: 0.2;这是另一种透明方式，但子层会跟随变化*/
	border:1px solid white;
	box-shadow: 5px 5px 3px #2C294B;
	/*text-emphasis-color: white;*/
	margin:0 auto;
    transform: translate(-50%,-50%);
	-webkit-box-reflect: below 20px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.7));
	box-reflect: below 20px linear-gradient(transparent 60%,rgba(0,0,0,.7));
	position: absolute;
    top: 40%;
	left: 50%;
}
.mybut
{
	border:0px solid white;
	width:100px;
	height:40px;
	position: absolute;
	left: 150px;
	top:260px;
}
#login-form
{
	margin-top:1em;
	width: 300px;
    margin: 10px auto;
}
#loginform3-verifycode-image
{
	width: 60px;
	height: 30px;
	cursor: pointer;
	margin-left: 10px;
}
button.btn
{
	width:80px;
	background-color:#274a80;
	letter-spacing:.5em;
	cursor:pointer;
	color:white;
	text-align:center;
}
button.reset
{
	width:80px;
	background-color:#233544;
	letter-spacing:.5em;
	cursor:pointer;
	color:white;
	margin-right:10px;
	text-align:center;
}
label.control-label
{
	color:white;
	font-weight:bold;
	font-size: 1.1em;
}
p.help-block-error
{
	font-size:14px;
	color:#f00;
	text-shadow: 1px 1px 1px #000;
}
.xg
{
	/*background-color:white;*/
	border:0px solid white;
	width:50px;
	height:50px;
	position: absolute;
	left: 41px;
	top: 40px;
	animation: onekey 5s ease infinite alternate;
	-webkit-animation: onekey 5s ease infinite alternate;
	-moz-animation: onekey 5s ease infinite alternate;
	-o-animation: onekey 5s ease infinite alternate;
	
}
@keyframes onekey{
	0%{transform: rotate(0deg);opacity: 0;}
	50%{transform: rotate(180deg);opacity: 1;}
	100%{transform: rotate(360deg);opacity: 0;}
}
@-webkit-keyframes onekey{
	0%{transform: rotate(0deg);opacity: 0;}
	50%{transform: rotate(180deg);opacity: 1;}
	100%{transform: rotate(360deg);opacity: 0;}
}
@-o-keyframes onekey{
	0%{transform: rotate(0deg);opacity: 0;}
	50%{transform: rotate(180deg);opacity: 1;}
	100%{transform: rotate(360deg);opacity: 0;}
}
@-moz-keyframes onekey{
	0%{transform: rotate(0deg);opacity: 0;}
	50%{transform: rotate(180deg);opacity: 1;}
	100%{transform: rotate(360deg);opacity: 0;}
}