@charset "utf-8";
body{background: #f4f6f8;}
#mydiv{
height: 100%;width:100%;align-items: center;margin: 50vh 0;display: grid;}
.login-main {margin: 0 auto;border: 1px solid #ddd;background: #fff;padding: 0 20px; width: 400px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; 
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    -webkit-box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);-moz-box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);}
.layui-tit{width: 100%;line-height: 38px;font-size: 20px;font-weight: bolder;text-align: center;margin: 0 auto;color: #6d67c3;padding-top: 10px;}
.login-main .layui-elip {margin-top: 4%;height: 35px; line-height: 35px; font-size: 30px; text-align: center;color: #69749f; }
.login-main .layui-elip span.version {font-size: 12px; }
.login-main form .layui-input-inline,.login-main form .layui-input-inline button{width: 100%; }
.login-main form .verify-box input {display: inline-block; width: 60%; }
.login-main .layui-elip{margin-bottom: 15px; }
.login-main form .verify-box img {display: inline-block; margin-left: 2%; width: 36%; height: 38px; }
.lay-user-jump-change {float: right; }
.lay-link {color: #4a0297!important; }

.lay-user-login-other>* {display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 14px }
.lay-user-login-other {font-size: 0; line-height: 38px; }
.lay-user-login-other .layui-icon {position: relative; top: 2px; font-size: 26px }
.lay-user-login-other a:hover {opacity: .8 }

@media screen and (max-width: 450px) {
    .layui-form-item .layui-input-inline {
        margin: 0 0 10px 0px;
    }
    .login-main .layui-elip {
        font-size: 20px;
    }
    .login-main {
        border:none;
        width: 90%;
        padding:15px;
    }
}