body,*{ margin:0; padding:0;}
body{
    background:#f5f5f5;
    --border-color:rgba(22,20,22,.12);
    color:#212322;
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.2;
}
a{ color:#212322; }
a:hover{ text-decoration: none; color:#007bee; transition: all .3s ease; }


.form-control:focus{ border-color: #86b7fe; }


.main{
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,.11) ;
    display: flex; flex-direction: column;
    width: calc(100% - 40px); max-width: 450px;
    margin:calc(50vh - 300px) auto 0 auto;  }
.site-name{ padding:30px 0; font-size: 24px; font-weight: bold; color:#777777; display: flex; justify-content: center; align-items: center; }

.login-form{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
.form-item{ display: flex; flex-direction: row; width: 80%; margin-bottom:20px; }
.form-input-item{ border:0 !important; flex:1;}
.form-input-item:focus{border:0 !important;box-shadow:none; }
.form-input{ width: 100%; display: flex; flex-direction: row; border:1px solid #f1f1f1; border-radius: 5px; align-items: center;}
.form-verify{ width: 100px; color:#007bee; cursor: pointer; }
.form-input:focus-within{ border:1px solid #007bee50; overflow: hidden;}

.control-btn{ background:#007bee; cursor: pointer;
    width: 100%; font-size: 16px; border-radius: 10px;
    height: 40px; display: flex; justify-content: center;  align-items: center; color: #ffffff; }

.form-space-box{ display: flex; flex-direction: row; width: calc(100% - 40px); margin:20px auto; justify-content: space-between; align-items: center;}
.form-space-line{ width: 100%;  height: 1px; background: #f1f1f1; }
.form-space-text{ margin:0 12px; color:#21232280; white-space: nowrap;  }

.third-login{ display: flex; flex-direction: row; justify-content: center; align-items: center; padding:20px 0 50px 0;}
.login-item img{ width: 32px; height: 32px; }
.login-item{ margin-right:10px;}
.third-login .right-item{ margin-right:0px; }