html {
    height: 100%
}

body.signin {
    background: url(../img/login-background.jpg) no-repeat center fixed;
    background-size:100% 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.signinpanel {
    width: 888px;
    color: rgba(255,255,255,.95);
    height: 456px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -444px;
    margin-top: -304px;
    box-shadow: 0 0 35px #4776e2;
    animation: grow 1s ease;
    z-index: 9;
}

.signinpanel .logopanel {
    float: none;
    width: auto;
    background: 0;
    padding: 0;
}
.signinpanel .logopanel h1{ margin:0; padding:0;}
.signinpanel .signin-info ul {
    list-style: none;
    padding: 0;
    margin: 20px 0
}

.signinpanel .form-control {
    display: block;
    margin-top: 30px;
    border-radius: 20px !important;
    height: 38px !important;
    border: none;
    padding-left: 50px !important;
}
#tab-1{ position: relative;}
#tab-1 .panel-body>span { display: block; width: 38px; height: 38px; position: absolute; z-index: 9;}
#tab-1 .panel-body>span.input_img01{background:url(../img/login_user.png) no-repeat center center;left: 215px;top: 30px;}
#tab-1 .panel-body>span.input_img02{background:url(../img/login_pass.png) no-repeat center center;left: 215px;top: 97px;}
.signinpanel .uname {
    background: #ebf5ff;
    color: #333;
}

.signinpanel .pword {
    background: #ebf5ff;
    color: #333;
}

.signinpanel .code {
    background: #ebf5ff url(../img/login_yzm.png) no-repeat 20px center !important;
    color: #333;
    margin: 0 0 15px 0;
}

.signinpanel .btn {
    margin-top: 30px;
    height: 40px;
    border-radius: 20px;
    font-size: 16px;
    letter-spacing: 2px;
    box-shadow: 5px 5px 12px rgba(77,130,252,.3);
}

.signinpanel form {
    /* background: rgba(255,255,255,.2); */
    /* border: 1px solid rgba(255,255,255,.3); */
    -moz-box-shadow: 0 3px 0 rgba(12,12,12,.03);
    /* -webkit-box-shadow: 0 3px 0 rgba(12,12,12,.03); */
    /* box-shadow: 0 3px 0 rgba(12,12,12,.03); */
    -moz-border-radius: 3px;
    /* -webkit-border-radius: 3px; */
    /* border-radius: 3px; */
    padding: 0 55px 40px 210px;
}

.signup-footer {
    border-top: solid 1px rgba(255,255,255,.3);
    margin: 20px 0;
    padding-top: 15px
}

@media screen and (max-width:768px) {
    .signinpanel,.signuppanel {
        margin: 0 auto;
        width: 380px!important;
        padding: 20px
    }

    .signinpanel form {
        margin-top: 20px
    }

    .signup-footer,.signuppanel .form-control {
        margin-bottom: 10px
    }

    .signup-footer .pull-left,.signup-footer .pull-right {
        float: none!important;
        text-align: center
    }

    .signinpanel .signin-info ul {
        display: none
    }
}

@media screen and (max-width:320px) {
    .signinpanel,.signuppanel {
        margin: 0 20px;
        width: auto
    }
}

.checkbox-custom {
    position: relative;
    padding: 0 0 0 25px;
    text-align: left;
    box-sizing: border-box;
    width: 142px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    margin: 20px 0 0;
}

.checkbox-custom input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 2;
    margin: -6px 0 0 0;
    top: 8px;
    left: 0;
}

.checkbox-custom label:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 15px;
    width: 17px;
    height: 15px;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid ;
    background: #fff;
}

.checkbox-custom input[type="checkbox"]:checked+label:after {
    position: absolute;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    top: 12px;
    left: 17px;
    margin-top: -8px;
    font-size: 6px;
    line-height: 1;
    width: 14px;
    height: 14px;
    color: ;
}

.checkbox-custom label {
    cursor: pointer;
    font-weight: normal;
    text-align: left;
    color: #4d82fc;
    font-size: 12px;
    width: auto;
    display: inline-block;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    padding: 0 0 0 12px;
    margin: 0;
}

.form-control,.form-control:focus,.has-error .form-control:focus,.has-success .form-control:focus,.has-warning .form-control:focus,.navbar-collapse,.navbar-form,.navbar-form-custom .form-control:focus,.navbar-form-custom .form-control:hover,.open .btn.dropdown-toggle,.panel,.popover,.progress,.progress-bar {
    box-shadow: none
}

.form-control {
    border-radius: 1px!important;
    padding: 6px 12px!important;
    height: 34px!important
}

.form-control:focus {
    border-color: #1ab394!important;
}


.login_box{height:100%;position: relative;}
.login_left{ float:left; width:618px; height:100%; background:url(../img/login_l_bg.png) left center no-repeat;}
.login_right{position:absolute;right:0;top: 0;background: url(../img/login_r_bg.png) left center no-repeat;background-size:auto 456px;height: 100%;width: 530px;}

.logo_yzm{margin-top: 30px;height: 38px;clear: both;}
.logo_yzm_l{width:50%; float:left;}
.login_yzm_img{border-radius: 30px;overflow:hidden;padding:0;height: 38px;margin-left: 10px;width: 45%;float: right;}
.login_yzm_img img{display:block;width: 105%;height: 110%;margin: -2px 0 0 -2px;}
.tabs-container .nav-tabs{border: none;padding: 30px 0 0 210px;}
.tabs-container .nav-tabs>li.active>a, .tabs-container .nav-tabs>li.active>a:hover, .tabs-container .nav-tabs>li.active>a:focus{border:none;color: #3e72e9;}
.nav-tabs>li>a{font-size: 18px;color:#aeaeae;letter-spacing: 1px;font-weight: normal; position:relative; display:block;}
.nav-tabs li.active a:after{content:"";display:block;position:absolute;bottom: 0;left: 38%;width: 24%;height:2px;background: #4d82fc;box-shadow: 1px 1px 2px rgba(77,130,252,.7);border-radius: 3px;}
.tabs-container .tab-content>.ewm_con{color: #444;text-align: center;padding: 70px 0 20px;}
.login_man{display:block;width: 270px;position:absolute;bottom:0;right:50%;margin-right: -646px;animation: mango 1.5s ease;z-index: 10;}
.login_right .tabs-container .tab-pane .panel-body{ border: none; background:none; padding: 0; margin:0;}

.tabs-container .nav-tabs>li.active>a, .tabs-container .nav-tabs>li.active>a:hover, .tabs-container .nav-tabs>li.active>a:focus, .tabs-container .nav-tabs{ border: none !important;}
.nav-tabs>li>a{ font-weight: normal !important;}

@-webkit-keyframes grow {
    0%{
        transform:scale(0); opacity:0;
    }
    100%{
        transform:scale(1); opacity:1;
    }
}
@keyframes grow {
    0%{
        transform:scale(0); opacity:0;
    }
    100%{
        transform:scale(1); opacity:1;
    }
}
@-webkit-keyframes growSlowly {
    0%{
        transform:scale(0); opacity:0;
    }
    50%{
        transform:scale(.1); opacity:.2;
    }
    100%{
        transform:scale(1); opacity:1;
    }
}
@keyframes growSlowly {
    0%{
        transform:scale(0); opacity:0;
    }
    50%{
        transform:scale(.1); opacity:.2;
    }
    100%{
        transform:scale(1); opacity:1;
    }
}
@-webkit-keyframes mango {
    0%{
        right:0;
        margin-right: 0; 
    }
    100%{
        right:50%;
        margin-right: -646px; 
    }
}
@keyframes mango {
    0%{
        right:0;
        margin-right: 0; 
    }
    100%{
        right:50%;
        margin-right: -646px; 
    }
}