/* body */
	body:before {
		content: " ";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("images/login2/loginBg.jpg") no-repeat;
		background-size: 100% 100%;
		z-index: -10;
	}
	body:after {
		content: " ";
		/*
		width: 6.45rem;
		height: 5.07rem;
		*/
		width: 7.095rem;
		height: 5.557rem;
		display: inline-block;
		position: fixed;
		left: calc(33.5% - 3.542rem);
		bottom: 0;
		background:  url("images/login2/loginBg2.png") center no-repeat;
		background-size: 100% 100%;
		z-index: -9; 
	}

/* header */
	#header {
		width: 100%;
		height: 1.05rem;
		position: relative;
		padding-left: 2.2rem;
		z-index: 10; 
	}
	#header a:not(.logo) {
		width: 1.85rem;
		height: 0.72rem;
		display: inline-block;
		background:  url("images/login2/logo-1.png") center no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 0.35rem;
		bottom: 0;
	}
	#header .logo {
		height: 0.72rem;
		width: calc(78% - 4.8rem);
		display: inline-block; 
		text-align: left;
		position: absolute;
		left: 2.4rem;
		bottom: 0; 
		color: #efefef;
		font-size: 0.24rem;
		line-height: 0.72rem;
		text-shadow: 0 0 0.2em #6a6a6a,
                     -0 -0 0.2em #6a6a6a;
	}
	#header .logo img {
		height: 100%;
	}
	/*
	#header .logo:after {
		content: attr(data-text);
	}
	*/
	#header > span:not(.logo) {
		width: 4.76rem;
		height: 0.56rem;
		display: inline-block;
		background:  url("images/login2/loginTitle.png") center no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 0;
		right: calc(21.875% - 2.38rem);
		animation: loginTitle .8s 1;
		-webkit-animation:loginTitle .8s 1;
		animation-fill-mode: forwards;
	}
	@keyframes loginTitle {
	from {
		opacity: 0;
		height: 0;
		width: 0;
		right: 21.875%;
		bottom: 0.25rem;
	}
	to {
		opacity: 1;
		height: 0.56rem;
		width: 4.76rem;
		bottom: 0;
		right: calc(21.875% - 2.38rem);
		}
	}
	@-webkit-keyframes loginTitle {
		from {
			opacity: 0;
			height: 0;
			width: 0;
			right: 21.875%;
			bottom: 0.25rem;
		}
		to {
			opacity: 1;
			height: 0.56rem;
			width: 4.76rem;
			bottom: 0;
			right: calc(21.875% - 2.38rem);
		}
	}
	
/* loginBox*/
	#loginBox {
		width: 3.14rem;
		height: 3.28rem;
		text-align: center;
		padding-top: 0.6rem;
		border-radius: 0.05rem;
		border: 1px solid #ddd;
		position: fixed;
		/*
		bottom: 0.7rem;
		*/
		bottom: 0.77rem;
		right: calc(21.875% - 1.57rem);
		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);
	}
	@keyframes login {
		from {  
			opacity: 0.2;
			right: -4rem; 
			transform: skew(-30deg);
	}
		to  {  
		opacity: 1;
		right: calc(21.875% - 1.57rem);
		transform: skew(0deg);
		}
	}
	@-webkit-keyframes login {
		from {  
		opacity: 0.2;
		right: -4rem; 
		transform: skew(-30deg);
	}
		to   {  
		opacity: 1;
		right: calc(21.875% - 1.57rem);
		transform: skew(0deg);
		}
	}
	#loginBox:before {
		content: " ";
		width: 100%;
		height: 100%;
		border-radius: 0.05rem;
		position: absolute;
		top: 0;
		left: 0; 
		background: url("images/login2/loginBg.png"); 
		z-index: -1;
	}
	#loginBox:after {
		content: " ";
		width: 92%;
		height: 0.3rem;
		border-radius: 50%;
		background: rgba(51,51,51,0.25);
		box-shadow: 0 0 0.12rem 0.08rem rgba(51,51,51,0.25);
		position: absolute;
		bottom: -0.18rem;
		left: 4%;
		z-index: -3; 
	}
	
/* #loginBox header */
	#loginBox header {
		width: 2.52rem;
		height: 0.72rem;
		color: #fff;
		font-size: 22px;
		line-height: 0.41rem;
		background: url("images/login2/loginHead.png") top center no-repeat;
		background-size: 1.72rem 0.41rem;
		position: absolute;
		top: -0.08rem;
		left: 0;
		right: 0; 
		bottom: auto;
		margin: auto;
	}
	#loginBox header:after {
		content: "";
		width: 100%;
		height: 0;
		font-size: 0;
		display: inline-block;
		border-top: 0.01rem solid #b0b0b1;
		border-bottom: 0.01rem solid #feffff; 
		position: absolute;
		left: 0;
		bottom: 0;
	}

/* #loginBox form */ 
	#loginBox #form {
		width: 2.52rem;
		margin: 0 auto;
		position: relative;
		padding-top: 0.2rem;
		position: relative;
		z-index: 1;
	}
	#loginBox #form:before {
		content: " ";
		width: 0.5rem;
		height: 0.3rem;
		background: url("images/login2/icon-user.png")  center  no-repeat;
		background-size: 0.23rem 0.25rem;
		position: absolute;
		left: 0;
		top: 0.41rem;
		z-index: 2;
	}
	#loginBox #form:after {
		content: " ";
		width: 0.5rem;
		height: 0.3rem;
		background: url("images/login2/icon-lock.png")  center  no-repeat;
		background-size: 0.24rem 0.24rem;
		position: absolute;
		left: 0;
		top: 0.98rem;
	}
	#loginBox input {
		width: 100%;
		height: 0.42rem;
		color: #666;
		position: relative;
		font-size: 0.16rem;
		margin-top: 0.15rem;
		padding-left: 0.5rem;
		padding-right: 0.2rem;
		border-radius: 0.03rem;
		border-top: 0.01rem solid #bcbcbc;
		border-left: 0.01rem solid #e0e0e0;
		border-right: 0.01rem solid #e0e0e0;
		border-bottom: 0.01rem solid #fefeff;
		box-shadow: 0 0.01rem 0.01rem 0 rgba(51,51,51,0.35) inset;
		background: #f5f5f5;
		transition: 0.2s all;
	}
	#loginBox input:focus{
		background: #FEFFFF;
	}
	#loginBox .button {
		color: #fffcf9;
		width: 100%;
		height: 0.41rem;
		cursor: pointer;
		font-weight: 400;
		font-size: 0.22rem;
		margin-top: 0.25rem;
		line-height: 0.4rem;
		border-radius: 0.03rem;
		background: transparent;
		border: none; 
		box-shadow: 0 0 0 0.01rem #cb7300 inset;
		display: inline-block;
		transition: 0.2s all;
		position: relative;
		
	}
	#loginBox .button:hover {
		color: #fff;
		box-shadow: 0 0 0 0.01rem #d17d00 inset;
	}
	#loginBox .button:before, #loginBox .button:after {
		content: " ";
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border-radius: 0.03rem;
		position: absolute;
		top: 0;
		left: 0;
	}
	#loginBox .button:before {
		opacity: 1;
		border-top: 0.02rem solid #ffb85c;
		border-left: 0.02rem solid #eaa64b;
		border-right: 0.02rem solid #eaa64b;
		border-bottom: 0.02rem solid #e19f45;
		background: #ed9725;
		background: -webkit-linear-gradient(#fea634,#da8613);
		background: linear-gradient(#fea634,#da8613);
		z-index: -1;
		transition: 0.2s all;
	}
	#loginBox .button:hover:before {
		opacity: 0;
	}
	#loginBox .button:after {
		border-top: 0.02rem solid #ffbf65;
		border-left: 0.02rem solid #f3b559;
		border-right: 0.02rem solid #f3b559;
		border-bottom: 0.02rem solid #e4a84c;
		background: -webkit-linear-gradient(#feb140,#dd8e13);
		background: linear-gradient(#feb140,#dd8e13);
		z-index: -2;
	}
	#form .error {
		width: 2.95rem;
		height: .18rem; 
		color: #666;
		display: block;
		font-size: .12rem;
		text-align: left;
		line-height: .18rem;
		position: absolute;
		top: 1.38rem;
		left: 0;
		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);
	}
	#form .error.active {
		opacity: 1;
		right: .35rem;
	}
	#form .error:before {
		content: "!";
		color: #fff;
		width: .18rem;
		height: .18rem;
		text-align: center;
		border-radius: 50%;
		background: #ff3300;
		margin-right: .05rem;
		display: inline-block;
	}

/* #loginBox footer */ 
	#loginBox > footer {
		width: 2.52rem;
		margin: 0 auto;
		padding: 0.1rem 0;
		line-height: 0.2rem;
		font-size: 0.13rem;
		text-align: left;
		position: relative;
	}
	#loginBox > footer > b {
		width: 0.7rem;
		text-align: right;
		display: inline-block;
		float: left;
	}
	#loginBox > footer > span {
		width: calc(100% - 0.7rem);
		display: inline-block;
	}
	
/* footer */
	#loginFoot {
			width: 100%;
			height: 0.4rem;
			color: #6d6d6d;
			font-size: 0.13rem;
			text-align: center;
			line-height: 0.4rem;
			background: rgba(255,255,255,0.8);
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1;
	}