html,body{
    height: 100%;
    padding: 0;
    margin: 0;
}
.login{
    width: 100%;
    height: 100%;
    background: url("../images/login.jpg") center no-repeat ;
    background-size: 100% 100%;
}
[v-cloak] { display: none; }
.l-name{
    padding: 35px 50px;
}
.l-name img{
    width: 256px;
}
.l-content{
    position: relative;
    width: 556px;
    margin: 2% auto 0;
    padding: 30px;
    background: rgba(255,255,255,0.2);
    box-shadow:  5px 0px 40px #888888;
}
.form-group{
    margin-top: 25px;
}
.form-horizontal{
    margin-top: 75px;
}
.title{
    position: absolute;
    top: -18px;
    left: -23px;
}
.title img{
    width: 556px;
}
.header{
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 10px;
    width: 556px;
    left: 50%;
    margin-left: -278px;
}
.btnlayer{
    position: fixed;
    top: 49%;
    left: 47%;
    height: 33px;
    width: 154px;
    margin-left: -28px;
    z-index: 1050;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    color: #fff;
    background-color: #333;
    border-color: #2000;
}
#vm .btnlayer :hover{
    color:#fff;
}
@media screen and (max-width: 1025px) {
    .l-name {
        padding: 30px 50px;
    }
    .title img {
        width: 422px;
    }
    .l-content {
         position: relative;
         width: 462px;
         margin: 2% auto 0;
         padding: 30px;
         background: rgba(255,255,255,0.2);
         box-shadow: 5px 0px 40px #888888;
     }
    .title {
        position: absolute;
        top: -14px;
        left: -19px;
    }
    .form-group {
        margin-top: 0px;
    }
    .form-horizontal {
        margin-top: 49px;
    }
}