@charset "utf-8";
body{
	width:100%;
	height:100%;
	min-height:100vh;
	/*background:#F7F6FC url('../images/bg.jpg') no-repeat center;*/
	background-size:cover;
}
.container{
	position:relative;
	padding:50px 0;
	/*height:100vh;*/
	overflow:hidden;
}
.container::before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background:rgba(53,48,48,0);}

.container .logo{display:block;position:absolute;left:64px;top:45px;-webkit-user-select:none;z-index:2;}
.container .logo img{height:50px;}
.container .left-text-container{position:absolute;left: 16.6%;top:36%;z-index: 2;}
.container .left-text-container h2{font-size:38px;color:#2E95FF;font-weight:bold;line-height:40px;margin-bottom:30px;}
.container .left-text-container p{color:#666;font-size:18px;line-height:35px;margin:14px 0 0;}
.container .left-text-container p i{font-size:32px;margin-right:15px;}
.container .left-text-container p:hover{color:#f30;}
.container .left-bottom-container{position:absolute;bottom:24px;left:64px;z-index:2;}
.container .left-bottom-container p{line-height:18px;color:rgba(51,51,51,0.5);font-size:15px;margin:0 0 4px;}
.container .left-bottom-container .links a{display:inline-block;margin-right:8px;font-size:15px;color:rgba(51,51,51,0.7);line-height:18px;transition: 0.3s;}
.container .left-bottom-container .links a:hover{color:#f30;}

/*.container .right-container{z-index:2;right:16.667%;position:absolute;background:#fff;border-radius:32px;box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.08);top:50%;transform: translateY(-50%);padding:32px 48px 0 48px;width:92%;max-width:488px;margin:0 auto;}*/
.container .right-container {
	z-index:2;
	/*right:16.667%;*/
	/*position:absolute;*/
	background:#fff;
	border-radius:8px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
	top:0%;transform:translateY(0%);
	padding:22px 30px 10px 30px;
	width:100%;
	max-width:450px;
	margin:0 auto;
	margin-top: 80px;
}

.login-title{font-size:24px;font-weight:bold;margin-bottom:10px;}
.right-container form{padding:20px 0;}


.form-group{position:relative;margin-bottom:20px;}
.form-group label{position:absolute;left:15px;top:15px;transition:all 0.5s ease;padding:0 10px;height:20px;line-height:20px;font-size:16px;color:#B2BAC2;border-radius:0px;overflow:hidden;}
.form-group .input{border:1px solid #e8e8e8;border-radius:4px;padding:0 20px;height:50px;line-height:50px;outline:none;width:100%;-webkit-box-shadow:0 0 0px 1000px #fff inset;}
.form-group .input:hover{border-color:#2E95FF;}
.form-group .input:focus~label,.form-group label:hover{transform:translateY(-27px);color:#2E95FF;background:#fff;}
.form-group .input.active~label,.form-group .input:valid~label{color:#B2BAC2;transform:translateY(-27px);background:#fff;}
.form-group label:hover,.form-group .input:focus~label{color:#2E95FF;}
.form-group .button{border:1px solid #fff;background:linear-gradient(to right, #ff8e29, #ffbc65);color:#fff;width:100%;padding:10px 0;font-size:16px;border-radius:4px;}

.form-group a,.form-group img{position:absolute;top:50%;right:15px;background:#fff;transform:translateY(-50%);display:block;line-height:40px;cursor:pointer;}
.form-group .send{position:absolute;top:50%;right:5px;background:#fff;transform:translateY(-50%);display:block;cursor:pointer;}
.form-text{color:#8c8889;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}

.form-text a{color:#2E95FF;position:relative;transition:all 0.5s ease;display:inline-block;line-height:30px;}
.form-text a:hover{color:#2E95FF;}
.form-text a:after{width:0;height:1px;content:'';transition:0.3s;position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#2E95FF;}
.form-text a:hover:after{width:100%;}

.other{border-top:1px solid #f0f0f0;padding-top:20px;justify-content:space-between;align-items:center;margin-bottom:30px;}
.other-left{color:#999; font-size:14px; text-align:center}
.other-left a{color:#8c8889;}
.other-left a:hover{color:#FF6300;}
.other-right a{display:inline-block;width:50px;height:50px;line-height:40px;margin-left:10px;background:#fff;border:1px solid #f3f3f3;border-radius:50%;text-align:center;}
.other-right a i{font-size:28px;}
.other-right a i.red{color:#ff4837;}
.other-right a i.green{color:#19BE6B;}
.other-right a i.yellow{color:#ff8037;}
.other-right a:hover{border-color:#eaeaea;}
.other-left a img{ width:46px; height:auto; padding-right:10px}