@charset "UTF-8";
@import "../../icon/fa/font-awesome.min.css";
html,body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
body{
	position: fixed;
	width: 100%;
	overflow: hidden!important;
	background-attachment: fixed;
	background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
	background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
}
body::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../../images/login-bg1.jfif") no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0.6; /* 透明度值，可根据需要调整 */
}

@keyframes rotate {
	0% {
		transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
	}
	100% {
		transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
	}
}
.stars {
	transform: perspective(500px);
	transform-style: preserve-3d;
	position: absolute;
	bottom: 0;
	perspective-origin: 50% 100%;
	left: 50%;
	animation: rotate 90s infinite linear;
	background: rgba(0,0,0,.5);
}

.star {
	width: 2px;
	height: 2px;
	background: #F7F7B6;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0 -300px;
	transform: translate3d(0, 0, -300px);
	backface-visibility: hidden;
}

div#sakura {
	padding:0;
	margin:0;
	position: absolute;
	z-index: 0;
	left:0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.4);
}
.login{
	width: 450px;
	height: 350px;
	background: rgba(255,255,255,0.5);
	position: fixed;
	top:calc(50% - 175px);
	left: calc(70% - 230px);
	border-radius: 5px;
	padding: 10px;
	border:1px solid rgba(255,255,255,.8);
	box-shadow: 0px 0px 10px #fff;
}
.logo{
	padding: 0 20px;
	/*margin-top: -30px;*/
	line-height: 60px;
	position: relative;
}
.logo span.title{
	font-family: "Audiowide";
	color: #ff6600;
	/*color: linear-gradient(90deg,orangered,orange,coral,indianred);;*/
	position: absolute;
	left: auto;
	font-size: 30px;
	font-weight: 600;
	text-shadow: 0 0 5px #fff;

	/*-webkit-transition: all 1.5s ease;*/
	/*transition: all 1.5s ease;*/
	/*-webkit-animation: Glow 1.5s ease infinite alternate;*/
	/*animation: Glow 1.5s ease infinite alternate;*/

}
.logo small.smalltitle{
	position: absolute;
	color: #ff6600;
	font-weight: 600;
	font-size: 14px;
	top: 35px;
	text-shadow: 0 0 5px #fff;
}
.logo img{
	background: rgba(255,255,255,0.5);
	border-radius: 100%;
	width: 80px;
	border: 5px solid rgba(255,220,200,0.3);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 52%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	box-shadow: 0 0 1px #fff;
}
.login-form{

}
.login-form .layui-form-label{
	width: 50px;
	letter-spacing: 5px;
}
.login-form .layui-input-block{
	text-align: center;
	margin-left: 0px;
	width: 100%;
	padding: 5px 10%;
}
.login-form .login-input{
	width: 80%;
	padding: 0 0 0 38px;
	background: rgba(0,0,0,.1);
	color: #fff;
}
.login-form .login-input[placeholder]{
	color: #fff!important;
}
input::-webkit-input-placeholder{
	color:#fff;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
	color:#fff;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
	color:#fff;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
	color:#fff;
}
.login-form .login-input:focus{
	outline:none!important;
	border: #fff 1px solid!important;
	box-shadow: 0 0 8px #fff!important;
	caret-color: #fff;
}
.login-btn{
	width: 80%;
	margin-left: -20%;
	letter-spacing: 10px;
	border:none!important;

	background: linear-gradient(90deg,orangered,orange,coral,indianred);
	background-size: 400%;
	/*line-height: 100px;*/
	text-align: center;
	color: white;
	/* 大写字母转换 */
	text-transform: uppercase;
	border-radius: 5px;
	z-index: 1;
}
.login-btn:hover{
	background-color: white;
	animation: light 3s infinite;
}
@keyframes light {
	100% {
		background-position: -400% 0;
	}
}
.verifyImg{
	height: 36px;
	width: 30%;
	position: absolute;
	right: calc(25% + 1px);
	top:6px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	cursor: pointer;
}
.login-form i{
	width: 20px;
	height: 38px;
	text-align: center;
	line-height: 38px;
	color: #fff;
	position: absolute;
	font-size: 20px;
	top:5px;
	left: 10%;
}
.see{
	right: 26.5%;
	left: unset!important;
	cursor: pointer;
}
.see:hover{
	color: rgba(0,0,0,.8);
}
.login-form i.layui-icon{
	font-weight: 600;
}

@media (max-width: 420px){
	.login{
		left: calc(50% - 186px)!important;
		width: 360px;
	}
	.logo img{
		width: 60px;
	}
	.logo span.title{
		font-size: 25px;
		top: -8px;
	}
	.logo small.smalltitle{
		top: 20px;
	}
}
@media (max-width: 360px){
	.login{
		left: calc(50% - 175px)!important;
		width: 340px;
	}
	.logo img{
		width: 60px;
	}
	.logo span.title{
		font-size: 25px;
		top: -8px;
	}
	.logo small.smalltitle{
		top: 20px;
	}
}

@-webkit-keyframes Glow {
	from{
		text-shadow: 0 0 5px #fff,
		0 0 20px #fff,
		0 0 30px #fff,
		0 0 40px #ff6600,
		0 0 70px #ff6600,
		0 0 80px #ff6600,
		0 0 100px #ff6600,
		0 0 150px #ff6600;
	}to{
		text-shadow: 0 0 5px #fff,
		0 0 10px #fff,
		0 0 15px #fff,
		0 0 20px #ff6600,
		0 0 35px #ff6600,
		0 0 40px #ff6600,
		0 0 50px #ff6600,
		0 0 75px #ff6600;
	}
}

@keyframes Glow {

	from {

		text-shadow: 0 0 10px #fff,

		0 0 20px #fff,

		0 0 30px #fff,

		0 0 40px #00a67c,

		0 0 70px #00a67c,

		0 0 80px #00a67c,

		0 0 100px #00a67c,

		0 0 150px #00a67c;

	}

	to {

		text-shadow: 0 0 5px #fff,

		0 0 10px #fff,

		0 0 15px #fff,

		0 0 20px #00a67c,

		0 0 35px #00a67c,

		0 0 40px #00a67c,

		0 0 50px #00a67c,

		0 0 75px #00a67c;

	}

}