@charset "UTF-8";

.login-bg{width:100%;height:84vh;background-position: center;background-repeat: no-repeat;background-size: cover;overflow:hidden;display:flex;align-items: center;justify-content:center;border-bottom:var(--mainColor) solid 6px;}
.login-box{width:520px;height:500px;background-color: var(--bgColor);border-radius:8px;padding:60px 80px;}
.login-title{width:100%;text-align: center;margin-bottom:20px;}
.login-title h1{font-size:24px;color:var(--mainColor);line-height:28px;font-weight: bold;}
.login-title p{font-size:16px;color:var(--textColor1);line-height:20px;margin-top:12px;}

.login-form{width:100%;margin-top:32px;}
.login-form li{width:100%;display:flex;align-items: center;justify-content: space-between;position: relative;margin-bottom:20px;}
.login-form li .input-box{width:100%;background-color: var(--bgColor1);border-radius:8px;padding-left:48px;height:48px;display:flex;align-items: center;position:relative;z-index: 2;}
.login-form li .input-box .input{display:block;width:100%;font-size:16px;color:var(--textColor);line-height:32px;padding:8px 0;border:none;outline: none;background:none;}
.login-form li .icon{width:48px;height:48px;display:flex;align-items: center;justify-content:center;font-size:20px;color:#666;position:absolute;left:0;top:0;z-index:5;}
.login-form li .code-input{width:65%;}
.login-form li .code-btn{width:calc(35% - 10px);height:48px;border-radius:8px;font-size:16px;color:#fff;background-color:var(--mainColor);outline:none;border:none;}

.info-box{width:420px;height:400px;}
.info-list li{margin-bottom:0;}
.info-list li .input-box{background:none;font-size:16px;color:#333;padding:0;padding-left:20px;}
.info-list li .input-box .title{color:#888;}

.login-form .forget-txt{text-align:right;margin-top:-8px;}
.login-form .forget-between{display: flex;align-items: center;justify-content:space-between;}
.login-form .forget-txt a{color:var(--mainColor);font-size:16px;line-height:20px;}
.login-form .login-btn{width:100%;margin-top:32px;}
.login-form .login-btn .btn{width:100%;height:46px;border-radius:8px;background-color:var(--mainColor);font-size:18px;color:#fff;border:none;outline:none;box-shadow: 0 4px 15px rgba(234,89,14,0.6);}
.login-form .login-other{width:100%;margin-top:16px;font-size:16px;text-align:center;line-height:24px;color:var(--textColor1);}
.login-form .login-other a{color:var(--mainColor);text-decoration:underline;}

.login-form .register-btn{margin-top:48px;}
.register-box{height:610px;}

@media(max-width:980px){
	.login-bg{border-bottom:var(--mainColor) solid 4px;}
}

@media(max-width:640px){
	.login-box{width:90%;max-width:520px;height:400px;padding:40px;}
	.login-title{margin-bottom:12px;}
	.login-title h1{font-size:20px;line-height:24px;}
	.login-title p{font-size:14px;margin-top:6px;}

	.login-form{margin-top:20px;}
	.login-form li{margin-bottom:16px;}
	.login-form li .input-box{padding-left:40px;height:40px;}
	.login-form li .input-box .input{font-size:14px;line-height:24px;}
	.login-form li .icon{width:40px;height:40px;font-size:16px;}
	.login-form li .code-btn{height:40px;font-size:14px;}
	.login-form .forget-txt{margin-top:-8px;}
	.login-form .forget-txt a{font-size:14px;}
	.login-form .login-btn{margin-top:24px;}
	.login-form .login-btn .btn{height:40px;font-size:16px;}
	.login-form .login-other{margin-top:12px;font-size:14px;}

	.login-form .register-btn{margin-top:40px;}
	.register-box{height:500px;}

	.info-box .info-list li .input-box{font-size:14px;padding-left:20px;}
}