body,
html {
    width: 100%;
    max-width: 100%;
    height: 100%;
}


.page {
    width: 100%;
    min-width: 1200px;
    min-height: 100%;
    overflow: hidden;
    background: url(../images/sy_banner.png) 0% 0% / 100% 100% no-repeat;
    position: relative;
    font-size: 12px;
}
.main {
    /*width: 1300px;*/
    margin: 5% auto 0;
    /* overflow: hidden; */
    padding-bottom: 50px;
     /*background-color: palegoldenrod;*/ 
}

    .main .top {
        width: 1100px;
        margin: 0 auto;
    }

        .main .top img {
            display: block;
            width: 100%;
        }
.main-body {
    margin: 5% auto ;
}
/*.main-body { top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); overflow: hidden; }*/
.login-main .login-bottom .center .item {
    background: #eeeeee;
    border-radius: 5px;
    position: relative;
}
    .login-main .login-bottom .center .item input {
        display: inline-block;
        width:90%;
        height: 45px;
        box-sizing: border-box;
        padding-left: 15px;
        position: absolute;
        border: 0;
        outline: 0;
        font-size: 14px;
        /*background:lightblue;*/
        background: transparent;
        letter-spacing: 0;
    }


.login-main .login-bottom .center .item .icon-1 { background: url(../images/icon-login.png) no-repeat 1px 0; }

.login-main .login-bottom .center .item .icon-2 { background: url(../images/icon-login.png) no-repeat -54px 0; }
.login-main .login-bottom .center .item .icon-3 { background: url(../images/icon-login.png) no-repeat -106px 0; }

.login-main .login-bottom .center .item .icon-4 { background: url(../images/icon-login.png) no-repeat 0 -43px; position: absolute; right: -8px;top:10px; cursor: pointer; }

.login-main .login-bottom .center .item .icon-5 { background: url(../images/icon-login.png) no-repeat -55px -43px; }
.login-main .login-bottom .center .item .icon-6 { background: url(../images/icon-login.png) no-repeat 0 -93px; position: absolute; right: -10px; margin-top: 8px; cursor: pointer; }
.login-main .login-bottom .tip .icon-nocheck { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: solid 1px #9abcda; position: relative; top: 2px; margin: 1px 8px 1px 1px; cursor: pointer; }
.login-main .login-bottom .tip .icon-check { margin: 0 7px 0 0; width: 14px; height: 14px; border: none; background: url(../images/icon-login.png) no-repeat -111px -48px; }
.login-main .login-bottom .center .item .icon { display: inline-block; width: 33px; height: 22px; }


.login-main .login-bottom .center .item 
{ width: 100%; height: 45px;  margin-bottom: 20px; }
.login-main .login-bottom .center .item_code {
    background: transparent;
}
    .login-main .login-bottom .center .item_code input {
        width: 65%;
        background: #eeeeee;
        border-radius: 5px;
    }
    .login-main .login-bottom .center .item_code img{
        width:30%;
    }
     .login-main {
        width: 428px;
       /* position: relative;
        float: left;*/
       margin:0 auto;
    }



    .login-main .login-top {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #42a552;
        padding-top:20px;
        border-radius:12px 12px 0 0;
        background: #fff;
    }

        .login-main .login-top .tips {
            margin: 0 12px;
            font-weight:bold;
            font-size: 23px;
        }

        .login-main .login-top .circle {
            width: 5px;
            height: 5px;
            background-color: #42a552;
            border-radius: 50%;
        }


.login-main .login-bottom { width: 428px; background: #fff; border-radius: 0 0 12px 12px; padding-bottom: 43px; }
.login-main .login-bottom .center { width: 360px; margin: 0 auto; padding-top: 40px; padding-bottom: 15px; position: relative; }
.login-main .login-bottom .tip { clear: both; height: 16px; line-height: 16px; width: 288px; margin: 0 auto; }




input::-webkit-input-placeholder { color: #9E9E9E; }
input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #9E9E9E; }
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #9E9E9E; }
input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #9E9E9E; }

input:-webkit-autofill { /* 取消Chrome记住密码的背景颜色 */
    -webkit-box-shadow: 0 0 0 1000px #eeeeee inset !important;
}
html { height: 100%; }
.login-main .login-bottom .tip { clear: both; height: 16px; line-height: 16px; width: 288px; margin: 0 auto; }
.login-main .login-bottom .tip .login-tip { font-family: MicrosoftYaHei; font-size: 12px; font-weight: 400; font-stretch: normal; letter-spacing: 0; color: #9abcda; cursor: pointer; }
 
.login-main .login-bottom .tip .forget-password { font-stretch: normal; letter-spacing: 0; color: #1391ff; text-decoration: none; position: absolute; right: 62px; }

.login-main .login-bottom .login-btn {
    width: 360px;
    height: 45px;
    background-color: #42A552;
    border-radius: 5px;
    margin: 0px auto 0;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
}

.login-main .login-bottom .center .item .validateImg { position: absolute; right: 1px; cursor: pointer; height: 43px; border: 1px solid #e6e6e6; }

.footer {
    /*background:lightblue;*/
    left: 50%; bottom: 0;transform:translate(-50%); color: #fff;  position: absolute; text-align: center; line-height: 30px; padding-bottom: 30px; font-size: 16px; }
.padding-5 { padding: 5px !important; }
.footer a, .footer span { color: #fff; }

@media screen and (max-width:428px) {
    .login-main { width: 360px !important; }
    .login-main .login-top { width: 360px !important; }
    .login-main .login-bottom { width: 360px !important; }
}