@charset "UTF-8";

.login-bg{width:100%;height:88vh;background-position: center;background-repeat: no-repeat;background-size: cover;overflow:hidden;display:flex;align-items: center;justify-content:center;}
.login-box{width:520px;height:480px;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;}

.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(230,0,18,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:660px;}

.radio-box{width:100%;display: flex;align-items:center;}
.radio-item{width:40%;display: flex;align-items:center;cursor: pointer;}
.radio-item .radio-icon{width:14px;height:14px;border-radius:50%;border:#e1e1e1 solid 1px;display: flex;align-items:center;justify-content:center;}
.radio-item .radio-icon .iconfont{display:none;}
.radio-item .radio-label{font-size:16px;color:#888;line-height:20px;margin-left:12px;}
.radio-item.active .radio-icon{border:var(--mainColor) solid 1px;background-color:var(--mainColor);}
.radio-item.active .radio-icon .iconfont{display:block;font-size:10px;color:#fff;}

.register-auto-bg{height:auto;padding:80px 0;}
.register-auto{height:auto;}

@media(max-width:1080px){
	.register-auto-bg{padding:60px 0;}
}

@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:480px;}

	.radio-item .radio-label{font-size:14px;margin-left:8px;}

	.register-auto-bg{padding:40px 0;}
	.register-auto{height:auto;}
}