html{
    width: 100%;
    min-height: 100%; 
    font-size: 62.5%;
    color: #222;
    font-family: '微软雅黑';
}
body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: url(../image/bg1.jpg) no-repeat;
    background-size: cover;
}
h1{
    font-family: "黑体";
    font-size: 5rem;
    text-align: center;
    padding-top: 10rem;
}
.login-info{
    width: 48rem;
    margin: 3% auto;
}
.info-top{
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
    background-color: #23232E;
    border-radius: 1.5rem 1.5rem 0 0;
}
.info-input{
    background-color: #2B2B36;
    overflow: hidden;
}
.info-input p{
    text-align: center;
}
.info-input input{
    width: 70%;
    height: 5rem;
    display: inline-block;
    margin: 1rem auto;
    background-color: #2B2B36;
    border: 1px solid #484856;
    outline: none;
    font-size: 18px;
    padding-left: 10%;
}
#username{
    color: #39D0FE;
    background: url(../image/adm.png) no-repeat 1rem 1.3rem;
}
#password{
    color: #dd3e3e;
    background: url(../image/key.png) no-repeat 1rem 2.2rem;
}
#checkcode{
    color: #F77721;
    background: url(../image/pass.png) no-repeat 1rem 1.6rem;
    width: 60%;
    float: left;
    padding-left: 12%;
}
.info-input p:nth-of-type(3){
    padding: 0 10%;
}
.info-input img{
    width: 25%;
    height: 5rem;
    float: right;
    margin-top: 1rem;
}
.login-btn{
    height: 7rem;
    line-height: 7rem;
    text-align: center;
    background-color: #3EA751;
    border-radius: 0 0 1.2rem 1.2rem;
    font-size: 3rem;
    font-weight: 600;
    color: #FFF;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
.login-btn:hover{
    background-color: #FA3174;
}
.copyright{
    text-align: center;
    color: #FFF;
    font-size: 1.8rem;
    margin-top: 10rem;
}
.copyright a{
    color: #FF2A75;
}
.copyright a:hover{
    color: #3E9B4D;
}
@media only screen and (max-width: 1366px){
    .login-info{ 
        width: 38rem; 
    }
    .info-input input{ 
        height: 4.5rem;
    }
    .login-btn{ 
        height: 6rem; 
        line-height: 6rem;
    }
    .copyright{
        margin-top: 5rem;
    }
}
@media only screen and (max-width: 768px) {
    .login-info{ 
        width: 38rem; 
    }
    .info-input input{ 
        height: 4.5rem;
    }
    .login-btn{ 
        height: 6rem; 
        line-height: 6rem;
    }
    .copyright{
        margin-top: 5rem;
    }
}
@media only screen and (max-width: 620px) {
    .login-info{ 
        width: 68%; 
    }
    .info-input input{ 
        height: 4rem;
        padding-left: 14%;
    }
    .info-input p:nth-of-type(3){ 
        padding: 0 8%; 
    }
    .info-input img{ 
        height: 4rem; 
    } 
    .login-btn{ 
        height: 5rem; 
        line-height: 5rem;
    }
    .copyright{
        margin-top: 5rem;
    }
}
@media only screen and (max-width: 480px) {
    .info-top{
        height: 4rem;
        line-height: 4rem;
        font-size: 1.8rem;
    }
    .info-input input{ 
        height: 3rem;
        font-size: 1.5rem;
    }
    .login-btn{ 
        height: 4rem; 
        line-height: 4rem;
        font-size: 1.8rem;
    }
    .copyright{
        margin-top: 5rem;
        font-size: 1.5rem;
    }
    #username{ background: url(../image/adm.png) no-repeat 0.5rem 0.4rem; }
    #password{ background: url(../image/key.png) no-repeat 0.5rem 1rem; }
    #checkcode{ background: url(../image/pass.png) no-repeat 0.3rem 0.6rem; width: 54%; padding-left: 17%;}
    .info-input img{height: 3rem; }
    .info-input p:nth-of-type(3){ padding: 0 7%;}
}
@media only screen and (max-width: 320px) {
    .copyright{
        margin-top: 2rem;
    }
}