html,body{height: 100%; overflow: hidden;}
#login_page{display: flex; justify-content: space-between; flex-direction: column; height: 100%; box-sizing: border-box; padding-bottom: .3rem;}
/* .loginbox{height: 100vh; overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0;} */
.loginbox .header {display: flex; align-items: center;}
.loginbox.psdlogin .header .goBack,.loginbox.codelogin .header .goBack{display: block; width: .3rem; height: .3rem; background: url(../images/login/login_back.png) no-repeat center/.29rem; margin-left: .4rem;}
.loginbox.codelogin .header .goBack{background-image:url(/static/images/header_back.png) ; width: .9rem; height: .9rem; background-size: .4rem; margin-left: .1rem;}

.logobox{width: 2rem; height: 1.6rem; border-radius: 50%; margin: .4rem auto .4rem;display: flex; align-items: center; justify-content: center;}
.logobox img{max-width: 100%; max-height: 100%; display: block;}

.inputbox {border-bottom: solid 1px #eee;  margin-bottom: .2rem; position: relative;}
.inputbox input{height: .86rem; font-size: .36rem; color: #000; border: none; width: 100%;}
.inputbox.psdinp input{box-sizing: border-box; padding-right: .6rem; }
.inputbox input::placeholder{color: #BBBBC1; font-size: .28rem !important;}
.inputbox .eyeshow{display: block; width: .4rem; height: .4rem; background: url(../images/login/eyeclose.png) no-repeat center/cover; position: absolute; top: 0; right: .1rem; bottom: 0; margin: auto;}
.inputbox .eyeclose.eyeshow{background-image: url(../images/login/eyeopen.png);}
.inputbox input[type="password"]{font-size: .32rem;}
.fpwd{font-size: .26rem; color: #999;}
.formbox{margin: 0 .65rem;}
.formbox .linkbox{text-align: right;}
.formbox .btn_login,.formbox .disabled,.formbox .toagree{display: block; height: .88rem; border-radius: .44rem; text-align: center; color: #fff; font-size: .32rem; background: linear-gradient(-90deg, #F6252F 0%, #FF4621 100%); line-height: .88rem; margin-top: .65rem;}
.formbox .error{background: #ccc !important; pointer-events: none; opacity: 1 !important;}
.formbox .link_group{display: flex; align-items: center; justify-content: center; font-size: .26rem; margin-top: .6rem;}
.formbox .link_group s{display: block; width: .02rem; height: .2rem; background-color: #E3E4E6; margin: 0 .36rem;}
.formbox .link_group a{font-weight: bold; color: #212121;}
.formbox .link_group a.code_login_btn{font-weight: normal; color: #4D4D4D;}

.other_tit{text-align: center; font-size: .26rem; color: #666; margin-bottom: .5rem; display: flex; align-items: center; justify-content: center;}
.other_tit::before,.other_tit::after{content: ''; display: block; width: 2.36rem; height: 1px; background-color: #f5f5f6; margin: 0 .26rem;}
.other_login ul{display: flex; align-items: center; justify-content: center;}
.other_login ul li{width: .7rem; height: .7rem;margin: 0 .15rem; }
.other_login ul li img{display: block; width: 100%; height: 100%; object-fit: cover;}
.oneKeyLogin{position: relative;}
.oneKeyLogin .ftip{display: block; position: absolute;font-size: .2rem; color: #fff; left: .38rem; top: -.25rem; background: url(../images/tflogin_tip.png) no-repeat center/1rem .5rem; width: 1rem; height: .5rem; text-align: center; box-sizing: border-box; padding-top: .1rem; z-index: 3;}
.bottombox .box{text-align: center; margin: 0 .24rem; margin-top: 9vh;}
.bottombox .box p,.pop_agree p{display: inline-block; text-align: left; font-size: .24rem; color: #999; font-weight: 500;}
.bottombox {/* position: fixed; left: 0; right: 0; bottom: .3rem; */ padding-bottom:calc(-.3rem + constant(safe-area-inset-bottom));padding-bottom: calc(-.3rem + env(safe-area-inset-bottom)); position: relative; z-index: 3;}
.bottombox .box p a,.pop_agree p a{color: #000;}
.bottombox .box p.agree::before{content: ''; display: inline-block; width: .32rem; height: .32rem; background: url(../images/login/gou.png) no-repeat center/cover; vertical-align: middle; margin-right: .09rem; margin-bottom: .04rem;}
.bottombox .box p.agree.gou::before{background-image: url(../images/login/gou1.png);}

/* 验证码登录 */
.formbox h2.title{font-size: .48rem; color: #212121; font-weight: bold; margin-top: .6rem; margin-bottom: 1.2rem;}
.inputbox.telinp input{padding-left: 1.64rem;}
.inputbox.telinp .telCode{width: 1.4rem; position: absolute;left: 0; top: 0; bottom: 0;}
.inputbox.telinp .telCode::after{content: ''; display: block; width: 1px; height: .3rem; background-color: #eee; position: absolute; top: 0; right: 0; bottom: 0; margin: auto;}
.telinp .telCode{display: flex; align-items: center; color: #212121; font-size: .3rem;}
.telinp .telCode .showCode{display: block; width: .24rem; height: .24rem; background: url(../images/login/arr_d.png) no-repeat center/cover; margin-left: .16rem;}

.inputbox.codeinp input{padding-right: 1.4rem;}
.getCode{font-size: .24rem; color: #FF4422; position: absolute; right: 0; top: 0; bottom: 0; margin: auto;display: flex; align-items: center;}
.getCode.noclick{pointer-events: none; color: #999;}
.codelogin .formbox .btn_login{margin-top: 1.09rem;}
.formbox .disabled,.formbox .toagree{opacity: .7;}
.formbox .disabled{pointer-events: none;}
[v-cloak]{
    display: none !important;
}


/* 底部弹出 */
.pop_mask,.popl_mask{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.57); z-index: 100001; display: none;}
.popl_mask{z-index: 100001;}
.pop_box,.popl_box{background-color: #fff; position: fixed; bottom: -9rem; left: 0; right: 0;  padding: 0 .24rem; border-radius: .3rem .3rem 0 0; height: 8.2rem; padding-bottom:calc(-.3rem + constant(safe-area-inset-bottom));padding-bottom: calc(-.3rem + env(safe-area-inset-bottom)); z-index: 10000;  transition: .3s transform;}
.popl_box{z-index: 100001;}
.pop_box h3{font-size: .3rem; color: #000; text-align: center; font-weight: bold; padding:.3rem 0; position: relative;}
.pop_box h3 .close_btn{width: .6rem; height: .6rem; background: no-repeat center url(../images/close_btn1.png) ; background-size: cover; display: block; position: absolute; top: .2rem; right: 0; }
.pop_box dl{margin-bottom: .3rem;}
.pop_box dl>dt{font-size: .26rem; color: #1C1C21; font-weight: bold; margin-bottom: .1rem;}
.pop_box dl>dd {border: solid 1px #F5F5F7; border-radius: .06rem;}
.pop_box dl>dd input{font-size: .28rem; border: none; margin: .24rem ; box-sizing: border-box;}
.pop_box dl>dd input::placeholder{color: #BBBCC4;}

/* 区号显示 */
.pop_box dl>dd .acode_show{display: inline-block; padding: .2rem; font-size: .28rem; color: #333;}
.pop_box dl>dd .acode_show::before{content: '+'; }
.pop_box dl>dd .acode_show::after{content: ''; display: inline-block; width: 0; height: 0; border: solid .1rem rgba(0,0,0,0); border-top:  solid .1rem #666; vertical-align: bottom;  margin-left: .06rem;}

.pop_box dl>dd.select,.pop_box dl>dd.option{border: none; display: flex; align-items: center; padding-left: .3rem;}
.pop_box dl>dd.select i{display: block; width: .22rem; height: .22rem; border-radius: 50%; border: solid 1px #BDC1C9; margin-right: .1rem;}
.pop_box dl>dd.select span{display: flex; align-items: center; margin-right: 1.4rem;}
.pop_box dl>dd.select span.chosed i{border: solid 1px #00BA8C; position: relative;}
.pop_box dl>dd.select span.chosed i::before{content: ''; display: block; width: .11rem; height: .11rem; border-radius: 50%; background-color: #00BA8C; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.pop_box dl>dd.textarea{height: 1.7rem; overflow: auto; box-sizing: border-box; padding: .2rem ;}
.pop_box dl>dd.textarea .txt_con{width: 100%; height: 100%; font-size: .28rem; }
.pop_box dl>dd.textarea .txt_con:empty::before{color:#BBBCC4; content:attr(placeholder);}
.pop_box dl>dd.option{display: block;}
.pop_box dl>dd.option span{display: inline-flex; align-items: center; color: #303133; font-size: .28rem; margin-right: .6rem; flex-wrap: wrap; margin-bottom: .2rem;}
.pop_box dl>dd.option span i{display: block; width: .3rem; height: .3rem; background: url(../images/chose1.png) no-repeat center; background-size: cover; margin-right: .1rem;}
.pop_box dl>dd.option span.chosed i{background-image: url(../images/chose2.png);}
.popl_box h2 .back{color: #999; font-size: .3rem; position: absolute; right: .58rem; font-weight: normal;}
.areaList,.timeList{padding-top: 1.4rem; height: 100%; box-sizing: border-box; top: 0; left: 0; right: 0; position: absolute; }
.areaList ul,.timeList ul{height: 100%; overflow: auto;}
.areaList ul li,.timeList ul li{margin: 0 .3rem; line-height: .88rem; color: #333; font-size: .3rem;  border-radius: .1rem; padding: 0 .2rem;}
.areaList ul li.achose,.timeList ul li.achose{background: #F0F0F2; font-weight: bold;}
.anum_box h2{line-height: 1.1rem; text-align: center; font-size: .34rem; color: #000; font-weight: bold; border-bottom: solid 1px #f5f5f8; position: relative; z-index: 10;}
.anum_box h2 .cancel,.pop_box h2 .back{color: #999; font-size: .3rem; position: absolute; right: .58rem; font-weight: normal;}
.anum_box h2 .back{left: .43rem; right: auto; position: absolute;  }

/* 协议弹窗 */
.pop_agree .box{text-align: center; padding-top: .67rem; margin-bottom: .6rem; }
.pop_agree .box p{display: inline-block; text-align: left;}
.pop_agree{width: 5.9rem; height: 3rem; border-radius: .2rem; background-color: #fff; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 100001; display: none; animation: popup .3s; transform-origin: center !important;}
.pop_agree .btn_group{display: flex; align-items: center; justify-content: center;}
.pop_agree .btn_group a{display: flex; width: 2.3rem; height: .7rem; font-size: .28rem; color: #333; text-align: center; align-items: center; justify-content: center; margin: .07rem; border: solid 1px #E1E1E1; box-sizing: border-box; border-radius: .35rem; font-weight: bold;}
.pop_agree .btn_group a.keep_login{color: #fff; background: linear-gradient(-90deg, #F6252F 0%, #FF4621 100%); border: none;}

.loadIcon{display: block; width: 1.1rem; height: 1.1rem; border-radius: .3rem;  background: rgba(0,0,0,.9) ; background-size: .5rem; position: fixed; left: 0; right: 0; margin: auto; top: 50%;}
.loadIcon::before{content: ''; background: url(../images/login/loading.png) no-repeat center; background-size: .5rem; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; animation:rotate_ 1s infinite linear;}


@keyframes rotate_{
	0%{ transform: rotate(0deg);}
	50%{ transform: rotate(180deg);}
	100%{ transform: rotate(360deg);}
}