:root {
	--main-color:#0084ff
}

html,body{
	height: 100%;
}

input{font-size:1.2rem;}

input::placeholder{
	color:#00d2ff;
}

.fullscreen{
	height: 100%;
}

.fullscreen .container-fluid{
	height: 100%;
}

.enLetterSpacing {
	font-size:1rem!important;
	letter-spacing:0!important
}
#canvasBase {
	position:absolute;
	top:0;
	left:0;
	background:#000;
	width:100%;
	height:100%
}
#canvasOverlay {
	position:absolute;
	top:0;
	left:0;
	mix-blend-mode:hard-light;
	width:100%;
	height:100%
}
.container-fluid {
	position:absolute;
	z-index:999;
	width:100%;
	min-height: 100%;
	display: flex;
	overflow:hidden
}
.container-fluid>div {
	display:flex;
	width:100%;
	height:100%
}
.container-fluid .login {
	width:100%;
	max-width:1200px;
	font-size:1.2rem;
	
}
.container-fluid .login .user-input,.container-fluid .login .useremail,.container-fluid .login .username,.container-fluid .login .userpwd {
	box-shadow:0 0 20px #0084ff inset;
	padding:10px;
	position:relative;
	margin-top:1.5rem;
	border-radius:25px;
	background:0 0;
	border:solid 1px var(--main-color)
}
.container-fluid .login .user-input .pwd_tips,.container-fluid .login .user-input>input,.container-fluid .login .useremail .pwd_tips,.container-fluid .login .useremail>input,.container-fluid .login .username .pwd_tips,.container-fluid .login .username>input,.container-fluid .login .userpwd .pwd_tips,.container-fluid .login .userpwd>input {
	width:100%;
	height:2rem;
	color:#e6f3ff;
	background:0 0;
	border:none;
	text-align:center;
	outline:0;
	text-shadow:2px 2px 2px #000
}

.container-fluid .login .user-input .pwd_tips,.container-fluid .login .useremail .pwd_tips,.container-fluid .login .username .pwd_tips,.container-fluid .login .userpwd .pwd_tips {
	position:absolute
}

.container-fluid .login .user-input.error,.container-fluid .login .useremail.error,.container-fluid .login .username.error,.container-fluid .login .userpwd.error {
	box-shadow:0 0 20px #ff3000 inset;
	border:solid 1px #ff3000
}
.container-fluid .login .user-input.error .pwd_tips,.container-fluid .login .useremail.error .pwd_tips,.container-fluid .login .username.error .pwd_tips,.container-fluid .login .userpwd.error .pwd_tips {
	color:#ffd200
}
.container-fluid .login .user-input.error input,.container-fluid .login .useremail.error input,.container-fluid .login .username.error input,.container-fluid .login .userpwd.error input {
	color:#ffd200
}
.container-fluid .login .confrimpwd>div:last-child,.container-fluid .login .userpwd>div:last-child {
	width:100%;
	position:relative
}
.container-fluid .login .confrimpwd>div:last-child input,.container-fluid .login .userpwd>div:last-child input {
	width:100%;
	background:0 0;
	height:2rem;
	border:none;
	outline:0;
	text-align:center;
	color:#00d2ff
}
.container-fluid .login .confrimpwd>div:last-child i,.container-fluid .login .userpwd>div:last-child i {
	font-size:1.6rem;
	color:var(--main-color);
	height:2rem;
	position:absolute;
	right:.2rem;
	cursor:pointer;
	top:0px;
}
.container-fluid .login .confrimpwd>div:last-child i:before,.container-fluid .login .userpwd>div:last-child i:before {
	display:block;
	line-height:2rem
}

.container-fluid .login .userpwd{display: flex;}

.container-fluid .login .userpwd .iconeye-slash{
	height: 32px; display: block; width:32px; position: relative; 
}
.container-fluid .login .userpwd .iconeye-slash:before{
	position: absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
	line-height: 1;
	font-size:1.6rem; 
	color:var(--main-color);
}

.container-fluid .login .userpwd.discpassword input{
	-webkit-text-security: disc; /* 用圆圈替换字符 */
    text-security: disc;
}
/*.container-fluid .login .forget_btn {
	display:block;
	height:2rem;
	line-height:2rem;
	text-align:center;
	margin:1.5rem 0;
	background:var(--main-color);
	border:solid 1px var(--main-color);
	border-radius:25px;
	padding:10px;
	color:#fff;
	letter-spacing:4px;
	box-sizing:content-box;
	transition:all .5s
}*/
.container-fluid .login .forget_btn.hidden {
	height:0;
	padding:0;
	border:0;
	overflow:hidden;
	margin:0
}
.container-fluid .login .btn-login {
	font-size:1rem;
	text-align:center;
	color:#00d2ff;
	letter-spacing:2px;
	width:1px;
/*	text-shadow:2px 2px 2px #000*/
}
.container-fluid .login .btn-login .iconfont {
	padding:10px;
	height:calc(2rem - 2px);
	line-height:1;
	box-sizing:content-box;
/*	border:solid 1px var(--main-color);*/
	color:var(--main-color);
	border-radius:25px;
	font-size:1.8rem;
	margin-bottom:.6rem
}
.container-fluid .login .btn-login:hover {
	color:#3bfff3
}
.container-fluid .login .btn-login:active {
	color:#fff
}
.container-fluid .login .forget_sucess {
	display:none
}
.container-fluid .login .third {
	margin-top:1rem
}
.container-fluid .login .third .btn-login {
	marin-top:1rem!important
}
/*.container-fluid .login .facebook,.container-fluid .login .forget_btn,.container-fluid .login .google,.container-fluid .login .line,.container-fluid .login .login_btn {
	position:relative;
	background:radial-gradient(circle,#0000 1%,var(--c) 1%) 50%/0 var(--c);
	transition:background .6s;
	border-radius:25px;
	box-sizing:content-box;
	display:block;
	height:2rem;
	padding:10px
}*/
.container-fluid .login .facebook {
	--c:#05267e;
	color:#0B486B;
	-webkit-box-reflect:below 10px -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(250,250,250,.7)))
}
.container-fluid .login .facebook:hover {
	background-size:15000%;
	background-color:#0046ff
}
.container-fluid .login .facebook:active {
	background-color:var(--r,#5af5ff);
	background-size:100%;
	transition:0s
}
.container-fluid .login .line {
	--c:#307e00;
	color:#0B486B;
	-webkit-box-reflect:below 10px -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(250,250,250,.7)))
}
.container-fluid .login .line:hover {
	background-size:15000%;
	background-color:#4ecd00
}
.container-fluid .login .line:active {
	background-color:var(--r,#FA6900);
	background-size:100%;
	transition:0s
}
.container-fluid .login .google {
	--c:#3c0096;
	color:#0B486B;
	-webkit-box-reflect:below 10px -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(250,250,250,.7)))
}
.container-fluid .login .google:hover {
	background-size:15000%;
	background-color:#7e28ff
}
.container-fluid .login .google:active {
	background-color:var(--r,#FA6900);
	background-size:100%;
	transition:0s
}


.login_btn{--r:#3d00ac; --c:#ff9000; border-width: 1px; height:2rem; margin-top:1.5rem; padding: 10px 0px; box-sizing: content-box; text-align: center; color:#00d2ff; margin-bottom:1.5rem;}
.login_btn:hover{--r:#8c0095;  color:#f0ff00;}
.login_btn:active{--r:#ff9000; color:#fff; background-size:15000%;}


.container-fluid .login .facebook img,.container-fluid .login .google img,.container-fluid .login .line img {
	position:absolute;
	max-width:100%;
	max-height:80%;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto
}
.button20 {
	background:0 0;
	overflow:hidden;
	position:relative;
	transform:translateZ(0);
	transition:color .5s ease
}
.button20:after {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	border-radius:100%;
	content:'';
	transform:scale(0);
	transition:transform .5s ease-out;
	z-index:-1
}
.button20:hover {
	border:solid 2px #3bfff3!important
}
.button20:hover:before {
	color:#3bfff3
}
.button20:active {
	border:solid 2px #fff!important
}
.button20:active:before {
	color:#fff
}
.button20:hover:after {
	transform:scale(2);
	background:#3c00ff
}
.button20:active:after {
	background:#ff4e00
}