@charset "utf-8";
/*-----------------初始化---------------------*/
* {padding: 0;margin: 0; }
html, body { height: 100%; }
ul,ol,li {list-style: none;}
em,i {font-style: normal;}
a {text-decoration: none;color: #333;}
img {display: block;border: 0 none;}
body {
    color: #333;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 24px;
    background: url(/Content/themes/images/register.jpg) no-repeat center -58px;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
.clearfix { *zoom: 1; }
.clearfix:after {content: '\20';display: block;height: 0;clear: both;visibility: hidden;}
input{font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;}
.container{ width: 1200px; margin: 0 auto; }
/*-----------------初始化---------------------*/

/* header */
.header  { position: absolute; top: 0; width: 100%; height: 94px; background: #690; background:url(/Content/themes/images/headjb.png) center 0 repeat-x; }
.header .logo{ display: inline-block; margin-top: 3px; }
.header .logo img { height: 86px; }

/* main */
.main{ position: absolute; top: 94px; bottom: 78px; width: 100%; overflow: auto }
.main .container { position: relative; height: 100%; }
.main .container .main-bg { position: absolute; left: 0; bottom: 0; width: 537px; height: 610px; background:url(/Content/themes/images/mainbglogin.png) no-repeat ; background-size: cover; }
.main .container .login{ 
    box-sizing: border-box; position: absolute; right: 0; top: 50%; margin-top: -210px; padding: 20px 30px; border-radius: 10px; 
    width:366px; height:420px; background: #fff;
}
.main .container .login .system-text {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
}
.main .container .login .system-text h3 {
    padding: 0 12px;
    position: relative;
    display: inline-block;
    z-index: 10;
    top: 12px; 
    background-color: #fff;
    font-size: 18px;
    font-weight: normal;
    color: #999;
}
.main .container .login .login-text {
    text-align: center; font-size:22px; color:#007de6; height:35px; line-height:35px; padding-top:20px; font-weight: normal;
}

.main .container .login .username, .main .container .login .password, .main .container .login .verify{ position: relative; margin-top: 10px;}
.main .container .login .username input,.password input{ border: solid 1px #ddd; padding: 8px 40px; height: 20px; width: 223px;border-radius: 3px;}
.main .container .login .verify input{ border: solid 1px #ddd; padding: 8px 8px; height: 20px; width: 287px;border-radius: 3px;}
.main .container .login .username_icon{position: absolute; width: 23px; height: 16px; background: url(/Content/themes/images/user.png); display: block;top: 10px; left: 5px;}
.main .container .login .password_icon{position: absolute; width: 23px; height: 16px; background: url(/Content/themes/images/password.png); display: block;top: 10px; left: 5px;}
.main .container .login .verifyimg{padding-top:10px;}
.main .container .login .verifyimg img{width:110px; height: 40px;float: left;}
.main .container .login .verifyimg a{ float: left;cursor: pointer;color: #666;margin-left: 10px; margin-top: 10px;}
.main .container .login .tips {
    color:#f00; padding-top: 5px;display:none;width:305px;
}
.main .container .login .login_btn{background: #007de6;cursor: pointer;  display: block; color: #fff; font-size: 18px; height: 40px; width:100%;  line-height: 40px; text-align: center; margin-top: 15px; border-radius: 3px; transition: all .5s;}
.main .container .login .login_btn:hover {background: #00a10b; transition: all .5s;}

/* footer */
.footer{ position: absolute; bottom: 0; width: 100%; height: 78px; background-color: #282828; color: #fff; text-align: center; }
.footer p { margin-top: 10px; }

@media only screen and (max-width:1200px) {

    .container{ width: 960px; margin: 0 auto; }

    /* header */
    .header  { height: 74px; }
    .header .logo img { height: 66px; }

    /* main */
    .main{ top: 74px; bottom: 58px; }
    .main .container .main-bg { width: 396px; height: 450px; }
    .main .container .login{ padding: 15px 25px; width:300px; height: 360px; margin-top: -180px;}
    .main .container .login .username input, .password input { padding: 4px 20px 4px 40px;
    width: 190px; }
    .main .container .login .verify input {
        padding: 4px;
        height: 20px;
        width: 242px;
    }
    .main .container .login .verifyimg img { width: 83px; height: 30px; }
    .main .container .login .login_btn { height: 30px; line-height: 30px; font-size: 14px; }
    .main .container .login .verifyimg a { margin-top: 2px; }
    
    /* footer */
    .footer{ height: 58px; }
    .footer p { margin-top: 2px; font-size: 12px; }
}


@media (max-height: 800px) {
    .main .container .main-bg { width: 450px; height: 510px; }
}

@media (max-height: 768px) {

    .container{ width: 960px; margin: 0 auto; }

    /* header */
    .header  { height: 74px; }
    .header .logo img { height: 66px; }

    /* main */
    .main{ top: 74px; bottom: 58px; }
    .main .container .main-bg { width: 378px; height: 430px; }
    .main .container .login{ padding: 15px 25px; width:300px; height: 360px; margin-top: -180px;}
    .main .container .login .username input, .password input { padding: 4px 20px 4px 40px;
    width: 190px; }
    .main .container .login .verify input {
        padding: 4px;
        height: 20px;
        width: 242px;
    }
    .main .container .login .verifyimg img { width: 83px; height: 30px; }
    .main .container .login .login_btn { height: 30px; line-height: 30px; font-size: 14px; }
    .main .container .login .verifyimg a { margin-top: 2px; }
    
    /* footer */
    .footer{ height: 58px; }
    .footer p { margin-top: 2px; font-size: 12px; }
}