* {
    padding: 0;
    margin: 0;
}
html {
    position: relative;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
    width: 100%;
    background-color: #F2F2F2;
    background-repeat: repeat-y;
    background-image: -moz-linear-gradient(left,#FFFFFF,#F2F2F2);
    background-image: -webkit-linear-gradient(left,#FFFFFF,#F2F2F2);
    background-image: -o-linear-gradient(left,#FFFFFF,#F2F2F2);
    background-image: linear-gradient(left,#FFFFFF,#F2F2F2);
}
body {
    height: 100%;
    font-family: 'Microsoft Yahei','simsun', "arial", "sans-serif";
    _font-family: "arial",'simsun','Microsoft Yahei', "sans-serif";
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
div, dl, dt, dd, form, h1, h2, h3, h4, h5, h6, img, ol, ul, li, table, th, td, p, span, a {
    border: 0;
    list-style: none;
}
#vlogin {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 360px;
}
    #vlogin > ul {
        padding: 0;
    }
        #vlogin > ul > li.form {
            padding: 20px 0 30px 0;
            background: #FFFFFF;
        }
            #vlogin > ul > li.form > span {
                display: block;
                height: 40px;
                padding: 10px 30px;
                position:relative;
            }
            #vlogin > ul > li.form > span.logo {
                display: block;
                height: 60px;
                padding: 10px 30px 30px 30px;
                position: relative;
            }
                #vlogin > ul > li.form > span.logo > img {
                    display: block;
                    margin: 0 auto;
                    height: 80%;
                    background: #F87C00;
                    padding:10px;
                }
                #vlogin > ul > li.form > span > i {
                    position: absolute;
                    top: 12px;
                    left: 40px;
                    width: 20px;
                    height: 40px;
                    line-height: 38px;
                    color: #353B49;
                }
                #vlogin > ul > li.form > span > input {
                    display: block;
                    width: 100%;
                    height: 45px;
                    padding: 0 10px 0 35px;
                    background: #FFFFFF;
                    border: 1px solid #999999;
                    -moz-border-radius: 3px;
                    -webkit-border-radius: 3px;
                    border-radius: 3px;
                    font-size:0.8rem;
                    box-sizing: border-box;
                    outline:none;
                }
                #vlogin > ul > li.form > span > u {
                    display: block;
                    width: 100%;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                    -moz-border-radius: 3px;
                    -webkit-border-radius: 3px;
                    border-radius: 3px;
                    background: #E2E2E2;
                    color: #485063;
                    text-decoration: none;
                    font-size: 0.75rem;
                    overflow: hidden;
                    font-style: normal;
                }
                    #vlogin > ul > li.form > span > u > i {
                        display: block;
                        width: 50px;
                        height: 45px;
                        text-align: center;
                        line-height: 45px;
                        color: #FFFFFF;
                        position: absolute;
                        background: #F87C00;
                        -moz-border-radius: 2px;
                        -webkit-border-radius: 2px;
                        border-radius: 2px;
                        font-style: normal;
                    }
                        #vlogin > ul > li.form > span > u > i > em {
                            cursor: pointer;
                            width: 50px;
                            height: 45px;
                            float: right;
                            color: #FFFFFF;
                            line-height: 45px;
                            text-align: center;
                            font-size: 1.2rem;
                            font-style: normal;
                        }
                #vlogin > ul > li.form > span.btn > button {
                    display: block;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    cursor: pointer;
                    color: #FAFAFA;
                    letter-spacing: 1px;
                    border: none;
                    box-sizing: border-box;
                    background: #353B49;
                    -moz-border-radius: 3px;
                    -webkit-border-radius: 3px;
                    border-radius: 3px;
                    transition: All 0.3s ease-in-out;
                    -webkit-transition: All 0.3s ease-in-out;
                    -moz-transition: All 0.3s ease-in-out;
                    -o-transition: All 0.3s ease-in-out;
                }
                        #vlogin > ul > li.form > span.btn > button:hover {
                            color: #FFFFFF;
                            background: #222222;
                        }
        #vlogin >label {
            display:block;
            padding: 10px 0;
            line-height: 22px;
            color: #CCCCCC;
            font-size: 12px;
        }
@media screen and (max-width: 640px) {
    #vlogin {
        top:15%;
    }
}