@charset "utf-8";
.login-main{width: 100%;height: 100%;display: flex;}
.bg{min-width: 0;flex: 1;height: 100%;background-repeat: no-repeat;background-size: cover;background-position: center;}
.container{width: 700px;height: 100%;display: flex;align-items: center;justify-content: center;background-color: #fff;}
.container .form-box{width: 420px;}
.container .form-box .head-title{width: 100%;text-align: center;font-size: 32px;font-weight: bold;color: #333;}
.container .form-box .form{width: 100%;margin-top: 60px;}
.layui-input{padding: 0 40px !important}
.layui-input,.layui-btn{height: 55px;line-height: 55px;}
.layui-input-prefix, .layui-input-suffix{width: 40px;padding: 0;line-height: 55px;vertical-align: middle;}
.layui-input-prefix .layui-icon, .layui-input-suffix .layui-icon{font-size: 20px;}

.login-submit-btn{margin-top: 40px;font-size: 16px;}

@media screen and (min-width: 1201px) {
    .container{max-width: 40%;}
}
@media screen and (max-width: 1200px) {
    .login-main{position: relative;}
    .bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
    .container{width: 100%;background-color: transparent;}
    .container .form-box{padding: 40px 20px;box-sizing: border-box;background-color: #fff;border-radius: 10px;overflow: hidden;}
}
@media screen and (max-width: 768px) {
    .container .form-box{width: 85%;max-width: 420px;padding: 20px;}
    .container .form-box .form{margin-top: 40px;}
    .layui-input,.layui-btn{height: 50px;line-height: 50px;}
    .layui-input-prefix, .layui-input-suffix{line-height: 50px;}
    .login-submit-btn{margin-top: 20px;}
}