#login-bd {background-color:#39A6EC; height:480px; margin-top:14px; background-image:url(http://i.bianji.com/statics/images/bianji/bg.jpg);}
#login-bd #hb{ background-color:hsla(0, 100%, 100%, 0.85);border-radius: 18px;height:396px; width:460px; margin:40px 0; float:right;font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53; border:2px solid hsla(0, 100%, 100%, 0.4);word-spacing:8px;letter-spacing: 6px;}
#login-bd #hb h3{ text-align:center; font-size:26px; line-height:47px; margin-top:8px;}
#login-bd #hb h3{ text-align:center;}
#login-bd #hb .u-input-box{ display:block; margin:24px 8%; width:84%; }
#login-bd #hb .u-input-box input{ height:46px; border:1px solid #CCC; background-color:#FFF; line-height:40px;width:82%; padding:0 6% 0 12%; font-size:24px;}
#login-bd #hb .u-input-box input#code{width:42%; margin-right:20px;}
#login-bd #hb .u-input-box input[type=submit]{width:100%;margin-right:20px;background-color:#69BBFC;padding:0; color:#FFF;word-spacing:8px;letter-spacing:16px;}
#login-bd #hb .u-input-box input[type=button]{width:100%;margin-right:20px;background-color:#69BBFC;padding:0; color:#FFF;word-spacing:8px;letter-spacing:16px;}
#login-bd #hb .u-input-box input#username{background:#FFF url(http://i.bianji.com/statics/images/bianji/i_ico.gif) 0px 0px no-repeat;}
#login-bd #hb .u-input-box input#password{background:#FFF url(http://i.bianji.com/statics/images/bianji/i_ico.gif) 0px -50px no-repeat;}

#bdf .TArea{}
#bdf .TArea ul{ width:100%; height:75px; padding:30px;}
#bdf .TArea ul li{height:75px; width:350px; float:left; margin-right:25px;}
#bdf .TArea ul li a{ display:block; width:350px; height:75px;}
#bdf .TArea ul li i{height:60px; width:60px;float:left;background:url(http://i.bianji.com/statics/images/bianji/i_ico.gif); margin:12px;background-repeat:no-repeat;}
#bdf .TArea ul li#getpassword{}
#bdf .TArea ul li#getpassword i{ background-position:5px -95px; }
#bdf .TArea ul li#registered{}
#bdf .TArea ul li#registered i{background-position:5px -195px;}
#bdf .TArea ul li#login{margin-right:0px;}
#bdf .TArea ul li#login i{background-position:5px -295px;}
#bdf .TArea ul li em{ width:260px; display:block; font-style:normal; color:#CCC; }
#bdf .TArea ul li a:hover em{color:#999;}
#bdf .TArea ul li a:hover{text-decoration:none;}
#bdf .TArea ul li div{ width:260px; display:block; font-style:normal; font-size:20px; margin:14px 0 8px; float:right;}


.hi-icon {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: 15px 30px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}





/* Effect 4 */
.hi-icon-effect-4 .hi-icon {
	width: 60px;
	height: 60px;
	box-shadow: 0 0 0 4px rgba(140,201,252,1);	
}

.hi-icon-effect-4a .hi-icon {
	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
	transition: box-shadow 0.2s;
}

.hi-icon-effect-4 .hi-icon:before {
	line-height: 60px;
}

.hi-icon-effect-4 .hi-icon:after {
	top: -4px;
	left: -4px;
	padding: 0;
	z-index: 10;
	border: 4px dashed #8CC9Fc;
}

.hi-icon-effect-4 .hi-icon:hover {
	box-shadow: 0 0 0 0px rgba(140,201,252,1);
	color: #8CC9Fc;
}

/* Effect 4b */
.hi-icon-effect-4b .hi-icon:hover {
	-webkit-transition: box-shadow 0.2s;
	-moz-transition: box-shadow 0.2s;
	transition: box-shadow 0.2s;
}

.hi-icon-effect-4b .hi-icon:hover:after {
	-webkit-animation: spinAround 9s linear infinite;
	-moz-animation: spinAround 9s linear infinite;
	animation: spinAround 9s linear infinite;
}

@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}