body:after {
	content: " ";
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	background: url("../images/loginBg.jpg") no-repeat;
	background-size: 100% 100%;
}
#header {
	width: 100%;
	height: 1.2rem;
	background: url("../images/logo-1.png") .5rem center no-repeat;
	background-size: 1.85rem .72rem;
	position: fixed;
	top: 0;
	left: 0;
	padding-left: 2.5rem;   
}
#header .logo {
	width: 100%;
	height: 100%;
	display: inline-block;
	position: relative;
}
#header .logo img {
	max-width: 96%;
	max-height: 50%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
#loginTitle {
	opacity: 1;
	width: 5.11rem;
	height: 1.12rem;
	background: url("../images/title-Bg.png") no-repeat;
	background-size: 100% 100%;
	position: fixed;
	right: 1.12rem;
	top: calc(50% - 2.12rem);
	animation: loginTitle .8s 1;
    -webkit-animation:loginTitle .8s 1;
	animation-fill-mode: forwards;
}
@keyframes loginTitle {
	from {
		opacity: 0;
		height: 0.28rem;
		width: 1.4525rem;
		right: 3.29875rem;
		top: calc(50% - 2.56rem);
	}
	to {
		opacity: 1;
		height: 1.12rem;
		width: 5.11rem;
		right: 1.12rem;
		top: calc(50% - 2.12rem);
	}
}
@-webkit-keyframes loginTitle {
	from {
		opacity: 0;
		height: 0.28rem;
		width: 1.4525rem;
		right: 3.29875rem;
		top: calc(50% - 2.56rem);
	}
	to {
		opacity: 1;
		height: 1.12rem;
		width: 5.11rem;
		right: 1.12rem;
		top: calc(50% - 2.12rem);
	}
}
#loginForm {
	opacity: 1;
	width: 3.65rem;
	height: 2.8rem; 
	overflow: hidden;
	text-align: center; 
	border-radius: .03rem;
	display: inline-block;
	border: 1px solid #173151; 
	background: rgba(59,100,150,0.85);
	box-shadow: 0 0 3px 1px rgba(51,51,51,0);
	transition: 0.2s all;
	position: fixed;
	right: 1.12rem;
	top: calc(50% - .85rem);
	animation: login .8s 1;
    -webkit-animation:login .8s 1; 
	animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
	-webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#loginForm:hover {
	background: rgba(59,100,150,0.9);
	box-shadow: 0 0 3px 1px rgba(51,51,51,0.6);
}
#loginForm:before {
	content: "";
	width: 100%;
	height: .1rem;
	border-radius: .05rem;
	display: inline-block;
	border-top: 1px solid #6f94bf;
	position: absolute;
	top: 0;
	left: 0;
}
@keyframes login {
	from {  
		opacity: 0.2;
		right: -4rem; 
		transform: skew(-30deg);
	}
	to   {  
		opacity: 1;
		right: 1.12rem;
		transform: skew(0deg);
	}
}
@-webkit-keyframes login {
	from {  
		opacity: 0.2;
		right: -4rem; 
		transform: skew(-30deg);
	}
	to   {  
		opacity: 1;
		right: 1.12rem;
		transform: skew(0deg);
	}
}
#loginForm h2 {
	color: #fff;
	width: 2.95rem; 
	margin: 0 auto;
	font-size: .24rem;
	padding-top: .1rem;
	line-height: .5rem;
	text-align: center;
	position: relative;
	text-shadow: 2px 2px 5px #333;
}
#loginForm h2:after {
   content: " ";
	width: 100%;
	height: .02rem;
	display: block;
	background-image:-webkit-linear-gradient( 
	to right,   
    rgba(148,167,190,0) 0%,     
    rgba(148,167,190,1) 50%,     
    rgba(148,167,190,0) 100%); 

	background-image: linear-gradient(  
    to right,   
    rgba(148,167,190,0) 0%,     
    rgba(148,167,190,1) 50%,     
    rgba(148,167,190,0) 100%); 

	position: absolute;
	left: 0;
	bottom: 0;
}
#loginForm ul {
	width: 2.95rem; 
	height: 1rem;
	display: inline-block; 
	margin: .1rem auto;
}
#loginForm ul li {
	width: 100%;
	height: .4rem;
	overflow: hidden;
	position: relative;	
}
#loginForm ul li:first-child {
	margin-bottom: .2rem;
}
#loginForm ul li:before {
	content: " ";
	width: .46rem;
	height: .3rem;
	display: inline-block;
	border-right: 1px solid #59779c;
	position: absolute;
	top: .05rem;
	left: 0;
	z-index: 1; 
	transition: .2s all;
}
#loginForm ul li:hover:before {
	border-right: 1px solid #efefef;
}
#loginForm ul li:nth-child(1):before {
	background: url("../images/user.png") center no-repeat;
	background-size: auto 70%;
}
#loginForm ul li:nth-child(2):before {
	background: url("../images/pw.png") center no-repeat;
	background-size: auto 70%;
}
#loginForm ul li input {
	width: 100%;
	height: 100%;
	border: none;
	font-size: .16rem;
	color: #666 !important;
	padding-left: .5rem;
	background: #7d9abd !important;
	border-radius: .03rem;
	border-top: 1px solid #42648b;
	border-bottom: 1px solid #5b81af;  
	transition: .2s all;
}
#loginForm ul li input:focus{
	color: #5e5e5e;
	background: #96b4d6;
 }
#loginForm .error {
	/* opacity: .35; */
	width: 2.95rem;
	height: .18rem; 
	color: #fff;
	display: block;
	font-size: .12rem;
	text-align: left;
	line-height: .18rem;
	position: absolute;
	top: 1.8rem;
	right: 0.35rem;
	transition: .35s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
	-webkit-transition: .35s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#loginForm .error.active {
	opacity: 1;
	right: .35rem;
}
#loginForm .error:before {
	content: "!";
	color: #fff;
	width: .18rem;
	height: .18rem;
	text-align: center;
	border-radius: 50%;
	background: #ff3300;
	margin-right: .05rem;
	display: inline-block;
}
#loginForm .button {
	color: #fff;
	width: 2.95rem;
	height: .45rem;
	cursor: pointer;
	font-size: .18rem;
	margin-top: .25rem;
	line-height: .45rem;
	border-radius: .03rem;
	display: inline-block;
	border: 1px solid #e0780a;
	border-top: 1px solid #feae5c;
	box-shadow: 1px 1px 3px 1px rgba(51,51,51,0.2);
	background: url("../images/button-bg1.jpg") repeat-x;
	background-size: auto 100%;
	transition: .2s all;
	-webkit-transition: .2s all;
}
#loginForm .button:hover{
	border: 1px solid #e3820b;
	border-top: 1px solid #feb665;
	box-shadow: 1px 1px 3px 1px rgba(51,51,51,0.6);  
	background: url("../images/button-bg2.jpg") repeat-x;
	background-size: auto 100%;
}
#loginForm:after {
	content: attr(data-text);
	text-align: center;
	color: #fff;
	width: 100%;
	height: .12rem;
	font-size: .12rem;
	line-height: .12rem;
	position: absolute;
	left: 0;
	top: 2.6rem;
}
#footer {
	color: #fff;
	width: 100%;
	text-align: center;
	position: fixed;
	left: 0;
	bottom: 0;
	height: .33rem;
	line-height: .33rem;
	background: rgba(59,100,150,.8);
}
@media screen and (max-device-width: 1280px) {
	#loginForm {
		width: 4rem;
	}
	
}