@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;}

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


.form-group{position:relative;margin-bottom:30px;}
.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 #2E95FF;background:#2E95FF;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:20px;}

.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;display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.other-left{color:#8c8889;}
.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;}