/* 全局样式重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family:"Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size:14px;
	color:#303133;
	font-weight:500;
	height:100vh;
	min-height:100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align:center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	overflow: hidden;
	}

div,input,form,button,span,label{
	padding:0;
	border:0;
	}

.frameInput{outline:none}

.titleh1{
	font-weight:600;
	font-family:"Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size:36px;
	color: #ffffff;
	margin: 0 0 60px 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	animation: fadeInDown 0.8s ease-out;
}

/* 登录容器 */
.login-con{
	width:400px;
	position:relative;
	z-index:1;
	padding: 40px 0;
	}

/* 登录表单 */
.login-con .dl-con{
	width:100%;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 40px;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
	animation: fadeInUp 0.8s ease-out;
	}

/* 表单组 */
.login-con .dl-con div{
	position:relative;
	width:100%;
	margin-bottom: 24px;
	}

/* 错误提示 */
.login-con .dl-con .error{
	display:none;
	position:relative;
	width:100%;
	height:20px;
	line-height:20px;
	text-align:left;
	margin-bottom: 16px;
}

.login-con .dl-con .error.on{display:block;}	

.login-con .dl-con .error span{
	color:#f56c6c;	
	font-size: 12px;
}

/* 标签 */
label{
	width:51px;
	height:48px;
	line-height:48px;
	text-align:center;
	position: absolute;
	left: 0px;
	color: #606266;
	}	

/* 输入框 */
.frameInput{
	width: 100%;
	height: 48px;
	text-indent:16px;
	font-size:14px;
	font-weight:500;
	line-height:48px;
	vertical-align: middle;
	border: 1px solid #dcdfe6;
	border-radius:8px;
	transition: all 0.3s ease;
	background-color: #ffffff;
	}

.frameInput:focus{
	border-color: #409eff;
	box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
	transform: translateY(-1px);
	}

/* 输入框图标 */
i{width: 20px;height: 20px;position: absolute;right:16px;top:14px;left: auto;}

.login-con .dl-con .username i{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center no-repeat;background-size: contain;}

.login-con .dl-con .password i{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M12 16c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-7h-1V7c0-2.76-2.24-5-5-5S7 4.24 7 7v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 7c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V7zm3 12c-2.76 0-5-2.24-5-5v-2h10v2c0 2.76-2.24 5-5 5z'/%3E%3C/svg%3E") center no-repeat;background-size: contain;}

/* 验证码 */
.login-con .dl-con .verify{display:none;}

.login-con .dl-con .verify.on{display:flex;align-items:center;}

.login-con .dl-con .verify .frameInput{width:120px;margin-right:16px;}

.login-con .dl-con .verify #yzm
{
	width:100px;
	height:40px;  
	cursor: pointer;
	border-radius: 8px;
	overflow: hidden;
	margin-right:12px;
}	

.login-con .dl-con .verify  a{
	width:80px;
	height:40px;
	line-height:40px;
	text-align: center;
	background-color: #ecf5ff;
	color: #409eff;
	text-decoration:none;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.3s ease;
	}

.login-con .dl-con .verify  a:hover{
	background-color: #d9ecff;
	transform: translateY(-1px);
	}

/* 登录按钮 */
.login-con .dl-con .button{margin-bottom: 0;}

.login-con button{
	font-family: "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	width: 100%;
	height: 48px;
	background-color: #409eff;
	color: #fff;
	text-align: center;
	border-radius:8px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
	}

.login-con button:hover{
	background-color: #66b1ff;
	box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
	transform: translateY(-2px);
	}

.login-con button:active{
	background-color: #3a8ee6;
	transform: translateY(0);
	}

/* 动画效果 */
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 响应式设计 */
@media (max-width: 480px) {
	.login-con {
		width: 90%;
		padding: 20px 0;
	}
	
	.login-con .dl-con {
		padding: 30px 24px;
	}
	
	.titleh1 {
		font-size: 28px;
		margin-bottom: 40px;
	}
}

/* 背景装饰 */
.bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	overflow: hidden;
}

.bg::before,
.bg::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
}

.bg::before {
	top: -10%;
	left: -10%;
	width: 400px;
	height: 400px;
	background: rgba(255, 255, 255, 0.3);
}

.bg::after {
	bottom: -10%;
	right: -10%;
	width: 500px;
	height: 500px;
	background: rgba(102, 126, 234, 0.2);
}