* {  
	margin: 0; 
	padding: 0; 
}
a {
	color: black;
	text-decoration: none;
}
html, body {
	max-width: 420px;
	height: 100vh;
	margin: 0 auto;
}
.auth {
	width: 100%;
	min-height: 100%;
	background: #E4F2FF url('../images/login_bg.jpg') no-repeat top left/100%;
	padding: 48% 0 20px;
	box-sizing: border-box;
}
.auth-container {
	background: white;
	margin: 0 auto;
	width: 90%;
	min-height: 70%;
	box-sizing: border-box;
	border-radius: 15px;
	box-sizing: border-box;
	padding-bottom: 20px;                                                    
}
.auth-tab {
	display: flex;
	align-items: center;
	background: #E8F2FE;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	position: relative;
}
.auth-tab.active-left:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background: url('../images/login_tab_bg.png') no-repeat top left/100% #E8F2FE;
}
.auth-tab.active-right:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotateY(180deg);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background: url('../images/login_tab_bg.png') no-repeat top left/100% #E8F2FE;
}
.auth-tab a {
	width: 50%;
	text-align: center;
	font-size: 15px;
	padding: 10px 0;
	position: relative;
}
.auth-form {
	padding: 20px 20px 15px;
}
.auth-form-item {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
	background: #ebeef7;
	padding: 8px 10px;
	border-radius: 6px;
	box-sizing: border-box;
	height: 48px;
}
.auth-form-input {
	flex: 1;
}
.auth-form-input input {
	display: block;
	width: 100%;
	font-size: 14px;
	padding: 0 10px 0 5px;
	background: none;
	border: 0;
	outline: none;
}
.auth-form-verify-img {
	display: block;
	width: 90px;
	height: 34px;
	border-radius: 6px;
}
.auth-form-getcode {
	background: none;
	border: 0;
	outline: none;
	color: #477bff;
	padding: 0;
	font-size: 12px;
}
.auth-form-btn {
	width: 100%;
	border-radius: 6px;
	background-color: #789eff;
	border: 0;
	outline: none;
	color: white;
	font-size: 15px;
	padding: 12px 0;
	margin-top: 10px;
}
.auth-form-btn:hover {
	background-color: #4a83ff;
}
.auth-footer {
	display: flex;
	align-items: center;
}
.auth-footer p {
	flex: 1;
	text-align: center;
	height: 14px;
	line-height: 14px;
}
.auth-footer p:first-child {
	border-right: 0;
}

.auth-footer p a {
	font-size: 12px;
	color: #999;
}
.agreement {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #4a83ff;
}
.agreement p {
	margin: 0 5px 0 0;
	display: flex;
	align-items: center;
	position: relative;
	width: 14px;
	height: 14px;
}
.agreement p input {
	opacity: 0;
	position: absolute;
	z-index: 1;
}
.agreement p span {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	border: 1px solid #4a83ff;
	border-radius: 50%;
}
.agreement p input:checked+span {
	background: url('../images/single-yes.png') no-repeat center/120%;
}
.agreement a {
	color: #4a83ff;
}
.agreement a:hover {
	color: #4a83ff;
}