html{
    font-size:10px;
}
*{
    box-sizing:border-box;
}
body{
    margin:0;
}

.root{
    background:url('img/bg.png') no-repeat;
    background-color:#b8e5f8;
    background-attachment:fixed;
    background-size: cover;
    padding:4rem 0 2rem;
    width: 100%;
    height: 100vh;
    overflow: auto;
}

.main{
    width:50rem;
    margin:0 auto;
}

/* 通用类 */
a{
    text-decoration: none;
    cursor: pointer;
}
p{
    margin:0;
}
form{
    font-size:1.4rem;
}
.btn--transparent{
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline-style:none;
    padding:0;
    font-size:1.4rem;
}
.btn--transparent:hover {
    color: grey;
}
button{
    cursor: pointer;
}
.show--none{
    display:none;
}
.show--block{
    display:block;
}
input[type="password"] {
    letter-spacing: 2px;
    font-size: 23px;
}

/* 首页logo */
.logo-block{
    text-align:center;
}
#logo{
    width: 128px;
    height: 81px;
    margin-bottom:2.4rem;
}

/* tab登录标签 */
.tab{
    width:40rem;
    margin:0 auto;
    padding:0;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(26,26,26,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.tab-main{
    padding:0 2.4rem;
    position: relative;
}
/* tab右上角二维码登录 */
.tab-qrcode{
    cursor: pointer;
    position: absolute;
    top:0;
    right:0;
}
.tab-qrcode img{
    width:52px;
    height:52px;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    border-top-right-radius: 5px;
}


/* tab登录header */
.form{
    padding: 0 0 84px;
}
.form-header{
    font-size:20px;
}
.tab-login{
    display: inline-block;
    color: #444;
    font-size: 1.6rem;
    line-height: 6rem;
    height: 6rem;
    margin-right: 2.4rem;
    border:none;
    cursor: pointer;
}
.tab-login--bold{
    font-weight: 600;
    border-bottom: 3px solid #0084ff;
}

/* 二维码登录 */
.login-qrcode{
    padding: 40px 0;
    text-align: center;
}
.login-qrcode>p{
    font-size: 24px;
    color: #1a1a1a;
    line-height: 33px;
    margin-bottom: 50px;
    margin-top: 4px;
}
.login-qrcode img{
    width:150px;
    height:150px;
    margin-bottom:15px;
}
.login-qrcode-info{
    font-size: 14px;
    line-height: 22px;
}
.login-qrcode-info a{
    color:#175199;
}

/* 登录form */
.form-input{
    margin-top:2.4rem;
}
/* 手机区号选择框 */
.form-select{
    border:none;
    min-width:8.2rem;
    outline-style:none;
    color:#8590a6;
    font-size:14px;
    cursor: pointer;
    display:inline-block;
}
.form-select button{
    color:#8590a6;
    font-size:14px;
}
.form-select img{
    width:12px;
    height:20px;
    float:right;
    vertical-align:middle;
    margin-left:8px;
}
.form-options{
    position: absolute;
    top:0;
    left:0;
    overflow: auto;
    max-height: 500px;
    min-width:213px;
    padding: 8px 0;
    border-radius: 4px;
    z-index:20;
    background:#fff;
    border: 1px solid #ebebeb;
}
.form-options ul{
    list-style:none;
    font-size:14px;
    margin:0;
    padding:0;
}
.form-options li{
    width: 100%;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    color: #8590a6;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.form-options li:hover{
    background: #ebebeb;
}
.form-input-line--margin{
    margin-bottom:12px;
}
.form-input-line{
    border-bottom: 1px solid #ebebeb;
    position:relative;
}
.form-input-line span{
    width: 1px;
    height: 22px;
    margin: 0 12px;
    border-right: solid #ebebeb 1px;
}
.login-input{
    height: 48px;
    color: #1a1a1a;
    line-height: 2.4rem;
    border:none;
    outline-style:none;
    /* min-width:24rem; */
    font-size:14px;
}
.login-input::placeholder{
    font-size:14px;
    color:#8590a6;
}
.login-input--red::placeholder{
    color:red;
}
.login-input-tip{
    font-size:14px;
    color:red;
    position:absolute;
    right:0;
    line-height:48px;
    background:#fff;
    z-index:5;
}
.login-captcha{
    font-size:14px;
    position: absolute;
    top: 24px;
    right: 0;
    color: #175199;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.form-captcha-line{
    margin-top:1.2rem;
}
.login-captcha--gray{
    float:right;
    color:#8590a6;
}
.login-oversea{
    color: #175199;
    display:inline-block;
}
#login-password-block img{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:25px;
    height:22px;
    cursor: pointer;
}

/* 登录按钮 */
.login-btn{
    display:inline-block;
    height:36px;
    line-height:36px;
    color:#fff;
    text-align:center;
    background: none;
    background-color: #0084ff;
    border-radius:3px;
    border:none;
    margin-top:30px;
    width:100%;
    font-size:14px;
}
.login-btn:hover{
    background-color: #0084ffcb;
}

/* 下载知乎App二维码 */
.tab-download{
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    height:0;
    opacity:0;
    text-align:center;
    background:#fff;
    transition:opacity .3s, height .3s;
}
.tab-download-transition{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:375px;
    opacity:100;
    transition:opacity .3s, height .3s;
}
.tab-download img{
    width:232px;
    position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
 

/* 协议同意提示文字 */
.form-info{
    padding:12px 24px;
    font-size:13px;
    color: grey;
    font-size: 1.3rem;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}
.form-info a{
    color:grey;
}
.form-info a:active{
    color:grey;
}

/* tab底部，分割线&社交账号 */
.tab--bottom{
    padding:0 2.4rem;
    position: relative;
    overflow: hidden;
}
#form-social-line{
    border-top: 1px solid #ebebeb;
}
/* 社交账号 */
.social{
    color: #8590a6;
    height: 6rem;
    line-height: 6rem;
    font-size:1.5rem;
}
.social p{
    display:inline-block;
}
/* .social div{
    display:inline-block;
} */
.social>div{
    float:right;
}
.social-block{
    display:inline-block;
    font-size:1.4rem;
    cursor: pointer;
    margin-left:2.2rem;
}
.social .social-block:nth-child(1) {
    margin-left:0;
}
.social-block:hover{
    color:grey;
}
.social-block img{
    width:20px;
    height:20px;
    margin-right:6px;
    vertical-align:middle;
}

/* tab的footer信息 */
.tab-footer{
    color: #0084FF;
    height: 6rem;
    line-height:6rem;
    padding:0 2.4rem;
    background-color: #F6F6F6;
    font-size:15px;
    position:relative;
    clear:both;
}
.tab-footer-block:hover{
    cursor: pointer;
}
.tab-footer .tab-footer-block:nth-child(1){
    display: inline-block;
}
.float--right{
    float:right;
    margin-left:-100%;
}
.tab-footer span{
    width: 1px;
    height: 22px;
    border-right: solid #ebebeb 1px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translateY(-50%);
}
.tab-footer-block p{
    display:inline-block;
    vertical-align: middle;
}
.tab-footer img{
    width:26px;
    height:26px;
    vertical-align: middle;
}

/* footer */
.footer{
    margin-top:4.7rem;
    color:#fff;
    font-size:12px;
    text-shadow: 0 1px 2px #999;
}
.footer-line{
    text-align: center;
    line-height:21px;
}
.footer-line p{
    display:inline-block;
}
.link{
    color:#fff;
}
.link:hover{
    text-decoration:underline solid #fff;
}
.footer-line *::after{
    content: " \B7 ";
    white-space: pre;
    display: inline-block;
}
.footer-line :last-child::after{
    content:none;
}