@charset "utf-8";
html,body{
	padding: 0;
	margin: 0;
	overflow: hidden;
}
body{
	.container{
		width: 92%;
		margin-left: auto;
		margin-right: auto;
	}
	.bg-img{
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.logo-top{
		position: absolute;
		top: 20px;
		left: 20px;
		img{
			width: 250px;
			height: 60px;
			object-fit: contain;
		}
	}
	.footer{
		width: 100%;
		font-size: 14px;
		color: #717272;
		text-align: center;
		position: absolute;
		bottom: 40px;
		left: 0;
	}
	.form-warp{
		width: 800px;
        display: flex; /* 核心：将父元素转为 Flex 容器 */
        justify-content: center; /* 控制子元素水平居中 */
        //align-items: center;     /* 控制子元素垂直居中 */
		//top: 0;
		//left: 0;
		//right: 0;
		//bottom: 50px;
		margin: auto;
		&--box{
			width: 100%;
			min-height: 280px;
			//background:#fff url(../images/bg-b.png) no-repeat bottom;
			background-size: cover;
			border-radius: 12px;
			//position: absolute;
			top: 42%;
			.logo-form{
                background:rgba(121, 106, 238, 0.9);
				//width: 100%;
				//height: 100px;
				//position: absolute;
                display: flex; /* 核心：将父元素转为 Flex 容器 */
                justify-content: center; /* 控制子元素水平居中 */
                align-items: center;     /* 控制子元素垂直居中 */
				//top: -120px;
				left: 0;
				text-align: center;
				color: #fff;
				.title{
					font-size: 36px;
					font-weight: bold;
					margin-bottom: 10px;
					letter-spacing: 6px;
				}
				.doc{
					color: #eef0f3;
					letter-spacing: 8px;
					font-size: 16px;
				}
			}
			.form{
				padding: 10px 40px 0 40px;
                .form-item-group{
                  width: 350px;
                  margin: 0 auto; /* 水平居中 */
                }
				.input-box{
					margin-top:30px;
					position: relative;
					[class^='icon-']{
						width: 36px;
						height: 36px;
						position: absolute;
						top: 2px;
					}
					.icon-user{
						background: url(../images/user.png) no-repeat center;
						background-size: 15px auto ;
					}
					.icon-password{
						background: url(../images/password.png) no-repeat center;
						background-size:15px auto ;
					}
					&.code{
						display: flex;
						.input{
							width: 140px;
							padding-right: 5px;
							input{
								text-indent: 10px;
							}
						}
						.code-img{
							flex: 1;
							img{
								width: 100%;
								height: 36px;
								object-fit: cover;
							}
						}
					}
					input{
						width: 100%;
						height: 36px;
						border: none;
						border: 1px solid #DBEBF4;
						border-radius: 6px;
						background-color: #F7FCFF;
						text-indent: 40px;
						outline: none;
						&:focus{
							border-color: #3D7BD0;
						}
					}
				}
				.error{
					font-size: 12px;
					color: red;
				}
				.btn-box{
					.submit-btn{
						width: 100%;
						height: 36px;
						line-height: 36px;
						font-size: 14px;
						display: block;
						text-align: center;
						text-decoration: none;
						background-color: #3D7BD0;
						border: 1px solid #3D7BD0;
						color: #fff;
						margin-top: 46px;
						margin-bottom: 30px;
						border-radius: 6px;
						&:active{
							box-shadow: 0 0 16px #4790F4 inset;
							background-color: #376EBA;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
}