@charset "utf-8";



html, body{height:100%;}

*{font-weight:500; box-sizing:border-box;}

.login_form{height:100%; background:url(../images/login/bg_user_login.jpg) no-repeat; background-size:cover;}

.terms_form{background:url(../images/login/bg_user_login.jpg);}

.login_form .login_box{position:fixed; display:flex; justify-content:center; align-items:center; left:50%; top:50%; width:735px; margin-top:-234.5px; margin-left:-367.5px; padding:60px 20px 50px; background:#fff; border-radius:50px; box-shadow:0 0 10px rgba(0, 0, 0, 0.3);}

.terms_form .terms_box{justify-content:center; align-items:center; margin-left:20%; width:735px; padding:60px 20px 50px; background:#fff;box-shadow:0 0 10px rgba(0, 0, 0, 0.3);}

.login_form .login_box .left{margin-right:50px; padding-right:45px; border-right:1px solid #eee;}

.login_form .login_box .left .img{width:215px; height:264px; background:#f3f3f3; border-radius:20px; overflow:hidden; box-shadow:0 0 5px rgba(0, 0, 0, 0.2);}

.login_form .login_box .left .img img{display:block; width:100%; height:100%;}

.login_form .login_box h1{text-align:center;}

.login_form .login_box h1 span{display:block; width:146px; height:37px; margin:0 auto;}

.login_form .login_box h1 em{display:block; margin-top:15px; color:#036a7f; font-size:30px; font-weight:800;}

.login_form .login_box .sub_text{margin-top:10px; color:#888; font-size:14px; text-align:center;}

.login_form .login_box .sub_text i{color:#eb2020; font-weight:800;}

.login_form .login_box .login_list{margin-top:40px; text-align:center;}

.login_form .login_box .login_list li{margin-top:15px;}

.login_form .login_box .login_list li:first-child{margin-top:0;}

.login_form .login_box .login_list li > div{position:relative; width:330px; height:45px; margin:0 auto;}

.login_form .login_box .login_list li > div:before{content:''; display:block; position:absolute; left:20px; top:50%; width:18px; height:20px; margin-top:-10px;}

.login_form .login_box .login_list li > div.id:before{background:url(../images/login/ico_id.png) no-repeat;}

.login_form .login_box .login_list li > div.password:before{background:url(../images/login/ico_password.png) no-repeat;}

.login_form .login_box .login_list li input{width:330px; height:45px; padding-left:50px; color:#333; font-size:15px; border:0; box-shadow:0 0 3px rgba(0, 0, 0, 0.2); border-radius:50px; transition:all 0.3s ease 0s;}

.login_form .login_box .login_list li input::placeholder{color:#ccc; font-size:14px; font-weight:400;}

.login_form .login_box .login_list li input:focus{box-shadow:0 0 5px rgba(29, 66, 100, 0.8);}

.login_form .login_box .login_list button{position:relative; width:330px; height:54px; margin-top:30px; color:#fff; font-size:18px; font-weight:700; line-height:54px; text-align:center; background:#1d3764; border-radius:50px; transform:translateZ(0); transition:color 0.3s ease; overflow:hidden;}

.login_form .login_box .login_list button:before{content:''; display:block; position:absolute; left:0; right:0; top:0; bottom:0; height:100%; background:linear-gradient(to right, #036a7f, #1d3764); border-radius:50px; transform:scaleX(0);; transform-origin:0 100%; z-index:-1; transition:transform 0.3s ease-out;}

.login_form .login_box .login_list button:hover:before,

.login_form .login_box .login_list button:active:before,

.login_form .login_box .login_list button:focus:before{transform:scaleX(1);}

.login_form .login_box .login_list .find{display:block; margin-top:20px; color:#aaa; font-size:14px; font-weight:400; letter-spacing:-0.5px;}

.login_information{margin-top:40px;}

.login_information ul{width:432px; margin:0 auto; border-top:1px solid #1a908e;}

.login_information ul li{border-bottom:1px solid #ccced9;}

.login_information .title{float:left; width:170px; height:50px; padding-left:20px; background:#eef7f9;}

.login_information .title p{color:#1a908e; font-size:16px; font-weight:700; line-height:50px;}

.login_information .title p i{display:inline-block; padding-right:3px; color:#eb2020; font-size:16px; font-weight:800; vertical-align:middle;}

.login_information .information_list{float:left; width:262px; height:50px; padding:10px 0 10px 20px;}

.login_information .information_list input{width:232px; height:30px; padding-left:10px; color:#333; font-size:15px; border:1px solid #ddd; border-radius:5px;}

.login_information .information_list input::placeholder{color:#ccc; font-size:12px; font-weight:300; letter-spacing:-0.5px;}

.login_information ul li:after{content:''; display:block; clear:both;}

.button_box{margin:30px auto 0; text-align:center;}

.button_box button{display:inline-block; position:relative; width:160px; height:54px; font-size:18px; font-weight:600; border-radius:50px; vertical-align:middle; transform:translateZ(0); transition:color 0.3s ease; overflow:hidden;}

.button_box button:before{content:''; display:block; position:absolute; left:0; right:0; top:0; bottom:0; height:100%; border-radius:50px; transform:scaleX(0);; transform-origin:0 100%; z-index:-1; transition:transform 0.3s ease-out;}

.button_box button + button{margin-left:5px;}

.button_box .button_green{color:#fff; background:#036a7f;}

.button_box .button_green:before{color:#fff; background:linear-gradient(to right, #1d3764, #036a7f);}

.button_box .button_gray{color:#777; background:#f3f3f3;}

.button_box .button_gray:before{color:#fff; background:linear-gradient(to right, #c0d2d6, #f3f3f3);}

.button_box button:hover:before,

.button_box button:active:before,

.button_box button:focus:before{transform:scaleX(1);}