html,
body{
	height: 100%;
	--global-primary-color: #16baaa;
	background:url("../../style/images/background.svg") no-repeat center center fixed;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.layui-row {
	width: 1000px;
	height: 600px;
	box-shadow: 2px 0 6px rgba(0, 21, 41, .20);
	border: 3px solid whitesmoke;
	border-radius: 15px;
}

.login-bg {
	height: 100%;
	box-sizing: border-box;
	background-color: rgb(250, 250, 250);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom-left-radius: 15px;
	border-top-left-radius: 15px;
}

.login-bg-img {
	width: 90%;
	display: inline-block;
	margin: 0 auto;
	border-radius:10px;
}

.login-form {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
}

.layui-form {
	width: 360px;
	text-align: center;
}

.top-log-title {
	align-items: center;
	justify-content: center;
	display: flex;
	margin-bottom: 30px;
}

.top-log-title img{
	width: 50px;
	border-radius: 12px;
	margin-right: 20px;
	height: 50px;
}

.top-log-title span {
	font-size: 32px;
	font-weight: 700;
	color: var(--global-primary-color);
}

.top-desc {
	font-size: 14px;
	color: #808695;
}

.layui-input {
	border-radius: 4px;
	line-height: 40px;
	height: 40px;
}

.login-btn {
	width: 100%;
	box-sizing: border-box;
}

.layui-btn {
	width: 100%;
	border-radius: 4px;
	background-color: var(--global-primary-color);
}

@media(min-width: 992px) and  (max-width:1200px){
	.layui-row{	width: 900px;}
}
@media(min-width: 768px) and (max-width:992px){
	.layui-row{	width: 90%;}
	.form-center{width: 90%;}
}
/* 针对手机端的优化 */
@media (max-width: 768px) {
    html, body {
        height: auto; 
        min-height: 100%;
        display: flex;
				justify-content: center;
				align-items: center;
				padding: 20px; /* 增加内边距，防止内容贴边 */
				background: #fff;
    }

    .layui-row {
        width: 100%;             /* 宽度占满 */
        height: auto;            /* 允许高度随内容撑开 */
        border: none;
        border-radius: 0;        /* 手机端通常不需要圆角，或者只保留部分 */
        box-shadow: none;
        display: flex;           /* 确保内部 flex 布局生效 */
        flex-direction: column;  /* 垂直排列 */
    }

    /* 3. 调整登录表单容器 */
    .login-form {
        padding: 20px 0;         /* 增加上下内边距，防止内容贴边 */
        box-sizing: border-box;
    }
    
    .login-bg {
        display: none !important; 
    }
}