/* ================================================================================================================ */

* { margin:0; padding:0; box-sizing: content-box; }
a { margin:0; outline:none; text-decoration:none; color:#000; }
a:hover { text-decoration:none; }
p { margin:0; }
li { list-style-type:none; }
h2 { margin:0; padding:0; }
h3 { margin:0; padding:0; }
img { display:block; border:none; outline:none; max-width:100%; }

/* ================================================================================================================ */

@font-face {
	font-family: "hhicon";
	src: url("../font/hhicon.eot"); /* IE9*/
	src: url("../font/hhicon.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
	url("../font/hhicon.woff") format("woff"), /* chrome、firefox */
	url("../font/hhicon.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url("../font/hhicon.svg#statefont") format("svg"); /* iOS 4.1- */
}

/* ================================================================================================================ */

html,body { height: 100%; }
body {
    background-color: #20222A;
    background-image: radial-gradient(400px circle at 53% 50%, #555, #20222A);
}

.wrapper { position:absolute; left:50%; top:50%; margin:-350px 0 0 -400px; width:800px; border:0px solid #f00; }
.logo { height:80px; margin:auto; }

form { position: relative; width:300px; margin: 50px auto 80px; padding:50px 60px; background:#fff; border-radius: 3px; border:0px solid #f00; }
form:before { position:absolute; top: 0; left: -45%; width: 190%; height: 40px; content: ""; background: url(../image/form_line.png) no-repeat; background-size: 100% auto; }
form h1 { margin-bottom:40px; font:30px/1em "微软雅黑"; color:#3a8ee6; text-align:center; }

.hh_inputbox { position:relative; margin-bottom:15px; border:0px solid #f00; }
.hh_inputbox:before { position:absolute; left:15px; top:0; color:#ddd; }
.hh_inputbox.user:before { font:24px/45px "hhicon"; content:"\e664"; }
.hh_inputbox.pswd:before { font:22px/45px "hhicon"; content:"\e697"; }
.hh_inputbox.yzm:before  { font:22px/45px "hhicon"; content:"\e6cf"; }
.hh_inputbox .input { display: block; font:15px/25px "微软雅黑"; color: #666; width: 240px; padding:10px 10px 10px 50px; outline: none; background: #fff; border:1px solid #ececec; border-radius: 3px; }
.hh_inputbox .input:focus { border-color:#66b1ff; }
.hh_inputbox .input::-moz-placeholder { color: #ddd; }
.hh_inputbox .input::-ms-input-placeholder { color: #ddd; }
.hh_inputbox .input::-webkit-input-placeholder { color: #ddd; }

.hh_inputbox.yzm input { width:100px; }
.hh_inputbox.yzm img { position:absolute; right:0; top:0; height:45px; }

.label { font:15px/20px "微软雅黑"; color:#6f6f6f; }
.button { display: block; margin-top:40px; font:15px/45px "微软雅黑"; color:#fff; text-align:center; background-color:#3a8ee6; background-image: linear-gradient(to top,#3a8ee6,#66b1ff); cursor: pointer; border-radius: 3px; }

.copyright { text-align:center; border:0px solid #f00; }
.copyright * { font:15px/1.5em "微软雅黑"; color:#fff; opacity: 0.3; }
.copyright a:hover { opacity: 0.5; border-bottom: 1px solid #fff; }

/* ================================================================================================================ */