*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

:root{
	--bg:#f5f7fb;
	--gray-color:#666;
}

html,body{
	width:100%;
	height:100%;
	font-size:125%;
	-webkit-tap-highlight-color:transparent;
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	scroll-behavior:smooth;
	text-rendering:optimizeLegibility;
	transform:none!important;
}

body{
	background:var(--bg);
	width:100%;
	height:100%;
	display:flex;
	flex-flow:column nowrap;
	align-items:center;
	justify-content:center;
	font-family:"WenQuanYi Micro Hei","PingFang SC","Microsoft YaHei",sans-serif;
	font-size:.6rem;
	line-height:1.5;
	text-align:center;
	-webkit-font-smoothing:antialiased;
	overflow:hidden;
}

a{
	color:inherit;
	text-decoration:none;
}

.login-container{
	margin:0 auto;
	padding:0;
	position:relative;
	width:100%;
	height:auto;
	display:flex;
	flex-flow:row nowrap;
	justify-content:center;
	align-items:center;
	align-content:center;
	text-align:left;
}

.brand-panel{
	padding:1.5rem 2rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:20rem;
	height:24rem;
	background:linear-gradient(135deg,#2f6fed 0%,#1a4fcf 100%);
	color:#fff;
	border-radius:.8rem 0 0 .8rem;
	box-shadow:0 .05rem .5rem rgba(0,0,0,.3);
}

.brand-panel .logo{
	margin:0 auto .8rem auto;
}

.brand-panel .logo img{
	width:3.8rem;
	height:auto;
}

.brand-panel .slogan{
	margin:1rem auto 0 auto;
	font-size:.8rem;
	line-height:1.8;
}

.brand-panel .slogan-en{
	margin:1.2rem auto 0 auto;
	font-size:.6rem;
	opacity:.5;
	letter-spacing:.05rem;
}

.form-panel{
	padding:1.5rem 2rem;
	position:relative;
	width:100%;
	max-width:21rem;
	height:24rem;
	background:#fff;
	border-radius:0 .8rem .8rem 0;
	box-shadow:0 .2rem 1.2rem rgba(0,0,0,.2);
}

.form-panel.loading{
	pointer-events:none;
	overflow:hidden;
}

.form-panel.loading::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:#fff;
	background-image:url(../images/loading.gif);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:3.8rem auto;
	z-index:10;
}

.form-panel h2{
	font-size:1.1rem;
	font-weight:600;
	color:#1a1a2e;
	margin-bottom:.4rem;
}

.form-panel .sub{
	margin:0 auto 1.1rem auto;
	font-size:.7rem;
	color:#888;
}

.form-panel label{
	margin:.8rem auto .3rem auto;
	display:block;
	font-size:.7rem;
	font-weight:500;
	color:#444;
}

.form-panel input{
	width:100%;
	height:2.2rem;
	padding:0 .7rem;
	border:1.5px solid #e0e4ec;
	border-radius:.25rem;
	font-size:.7rem;
	outline:none;
	transition:border-color .2s;
}

.form-panel input:focus{
	border-color:#2f6fed;
}

.form-panel .options{
	margin:.5rem auto 0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:.7rem;
}

.form-panel .options label{
	height:min-content;
	display:flex;
	align-items:center;
	gap:.3rem;
	margin:0;
	cursor:pointer;
	white-space:nowrap;
}

.form-panel .btn-login{
	margin:.5rem auto 0 auto;
	width:100%;
	height:2.3rem;
	background:#2f6fed;
	color:#fff;
	border:none;
	border-radius:.25rem;
	font-size:.9rem;
	font-weight:600;
	cursor:pointer;
	transition:background .2s;
}

.form-panel .btn-login:hover{
	background:#1a4fcf;
}

.form-panel .divider{
	margin:.8rem 0 .5rem;
	text-align:center;
	position:relative;
	font-size:.7rem;
	color:#bbb;
}

.form-panel .divider::before,
.form-panel .divider::after{
	content:'';
	position:absolute;
	top:50%;
	width:38%;
	height:.025rem;
	background:#ddd;
}

.form-panel .divider::before{
	left:0;
}

.form-panel .divider::after{
	right:0;
}

.form-panel .register-link{
	text-align:center;
	font-size:.7rem;
	color:#666;
}

.form-panel .register-link a{
	font-weight:500;
}

.copyrights{
	margin:0 auto;
	padding:1.5rem 1rem .5rem 1rem;
	width:100%;
	line-height:150%;
	color:var(--gray-color);
}

.copyrights p{
	padding:.05rem 0;
	line-height:1.5;
}

.copyrights a{
	margin:0 .25rem;
}

.copyrights>.copyrights-beian{
	padding:.5rem 0 0 0;
}

.copyrights>.copyrights-span{
	padding:.15rem 0;
	width:min-content;
	line-height:150%;
}

.copyrights>.copyrights-span:not(.last){
	margin:0 .4rem 0 0;
}

.copyrights .gongan{
	padding:0 0 0 .8rem;
	background-image:url(../images/gongan.png);
	background-position:left center;
	background-repeat:no-repeat;
	background-size:auto .7rem;
}

.dot{
	margin:0 .15rem;
	width:min-content!important;
}

.dot::before{
	content:'‧';
}

a.common-a-link:visited{
	text-decoration:none;
	color:#2f6fed;
}

a.common-a-link:link{
	text-decoration:none;
	color:#2f6fed;
}

a.common-a-link:hover{
	text-decoration:underline;
}

/**
 * toast
 */
.toast{
	position:absolute;
	left:50%;
	top:50%;
	width:auto;
	max-width:15rem;
	height:auto;
	transform:translateX(-50%) translateY(-50%);
	background:rgba(0,0,0,.8);
	color:#fff;
	font-size:.7rem;
	padding:.5rem 1rem;
	border-radius:.25rem;
	opacity:0;
	pointer-events:none;
	white-space:pre;
	transition:opacity .2s ease, transform .2s ease;
	z-index:9999;
	overflow:hidden;
}

.toast.show{
	opacity:1;
	transform:translateX(-50%) translateY(0);
}

.toast.common{
	background:rgba(0,0,0,1);
	color:#fff;
}

.toast.success{
	background:rgba(0,138,0,1);
	color:#fff;
}

.toast.fail{
	background:rgba(255,51,0,1);
	color:#fff;
}

@media(max-width:480px){
	body{
		background:#fff;
	}

	.brand-panel{
		padding:1rem 2rem;
		display:none;
	}

	.form-panel{
		padding:1rem 2rem;
		border-radius:0;
		box-shadow:none;
	}

	.copyrights{
		padding:1rem 1rem .5rem 1rem;
	}
}