.page_bg{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  object-fit: cover;
}
.container{
  height: 100vh;
  display: flex;
  align-items: center;
}
.welcomeWrap{
  width: 60%;
  max-height: 90vh;
  padding: .24rem .08rem;
  background-color: rgba(255, 255, 255, .3);
  backdrop-filter: blur(7px);
  border-radius: .192rem;
  display: none;
}
.scrollview{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  /* IE 不显示滚动条 */
  -ms-overflow-style: none;
  /* 设置窄滚动条  兼容火狐 webkit */
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.welcomeWrap>.scrollview{
  padding: .096rem .432rem;
  max-height: calc(90vh - .48rem);
}
.welcomeWrap>.scrollview>.logo{
  width: .8rem;
  margin-bottom: .32rem;
}
.welcomeWrap>.scrollview>.content_box>.title{
  font-size: .368rem;
  font-weight: 300;
  color: #131E29;
  margin-bottom: .6em;
}
.welcomeWrap>.scrollview>.content_box>.desc{
  font-size: .144rem;
  color: #131E29;
  line-height: 1.5;
}
.welcomeWrap>.scrollview>.content_box>.form{
  width: 80%;
  margin-top: .28rem;
}
.welcomeWrap>.scrollview>.content_box>.form>.s_title{
  font-size: .112rem;
  font-weight: bold;
  color: #131E29;
  margin-bottom: .8em;
}
.welcomeWrap>.scrollview>.content_box>.form input{
  width: 100%;
  font-size: .112rem;
  padding: .12rem .128rem;
  background-color: #FFFFFFB2;
  border-radius: .08rem;
  border: none;
  outline: none;
}
.welcomeWrap>.scrollview>.content_box>.form button{
  padding: .128rem 0;
  line-height: 1;
  font-size: .128rem;
  font-weight: bold;
  color: #fff;
  border-radius: .064rem;
  background-color: #000;
  border: none;
  outline: none;
}
.welcomeWrap>.scrollview>.content_box>.form button.disabled{
  background-color: #CFCFCF;
  cursor: not-allowed;
}
.welcomeWrap>.scrollview>.content_box>.form>.input_row{
  display: flex;
  margin-bottom: .32rem;
}
.welcomeWrap>.scrollview>.content_box>.form>.input_row>input{
  width: 100px;
  flex: 1;
}
.welcomeWrap>.scrollview>.content_box>.form>.input_row.error>input{
  background-color: #ffdbd7;
}
.welcomeWrap>.scrollview>.content_box>.form>.input_row>button{
  margin-left: .104rem;
  width: 1.16rem;
}
.welcomeWrap>.scrollview>.content_box>.form>.input_row>button.countdown{
  display: none;
}
.welcomeWrap>.scrollview>.content_box>.form>.submit{
  width: 1.48rem;
  padding: .096rem 0;
  margin-bottom: .176rem;
}
.welcomeWrap>.scrollview>.content_box>.form>.login>span{
  font-size: .128rem;
  color: #131E29;
}
.welcomeWrap>.scrollview>.content_box>.form>.login>.toLogin{
  text-decoration: underline;
  margin-left: .12rem;
  cursor: pointer;
  transition: color .3s;
}
.welcomeWrap>.scrollview>.content_box>.form>.login>.toLogin:hover{
  color: #fff;
}

/* login */
.mask{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #00000033;
  /* display: none; */
}
.mask>.container>.logo_box{
  width: 100px;
  flex: 1;
  display: flex;
  justify-content: center;
}
.mask>.container>.logo_box>.logo{
  width: 1.704rem;
}
.mask>.container>.window_box{
  width: 60%;
  height: 100%;
  position: relative;
}
.mask>.container>.window_box>.blockWrap{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90%;
  background-color: #fff;
  border-radius: .192rem;
  padding: .304rem .32rem .384rem;
  display: none;
}
.mask>.container>.window_box>.blockWrap>.scrollview{
  padding: 0 .32rem;
  max-height: calc(90vh - .688rem);
}
.mask>.container>.window_box>.blockWrap>.scrollview>.title{
  font-size: .256rem;
  color: #333;
  margin-bottom: .4em;
  background-color: #fff;
  padding: .08rem 0 .16rem;
  position: sticky;
  top: 0;
  z-index: 9;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap{

}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem{
  margin-bottom: .192rem;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap .formItem .s_title{
  font-size: .112rem;
  font-weight: bold;
  color: #000;
  margin-bottom: .8em;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row>.s_title{
  width: 100px;
  flex: 1;
  margin-right: .12rem;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row>.hidePass{
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row>.hidePass>img{
  width: .16rem;
  margin-right: .08rem;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row>.hidePass>span{
  font-size: .128rem;
  line-height: 1;
  color: #858585;
}
.mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>input.val{
  width: 100%;
  font-size: .112rem;
  color: #131E29;
  padding: .12rem .128rem;
  background-color: #F7F7F7;
  border-radius: .032rem;
  border: none;
  outline: none;
}
.mask>.container>.window_box>.blockWrap>.scrollview p{
  font-size: .128rem;
  color: #131E29;
  margin-bottom: 1em;
}
.mask>.container>.window_box>.blockWrap>.scrollview p>a{
  margin: 0 .04rem;
  color: #131E29;
  text-decoration: underline;
  transition: color .3s;
}
.mask>.container>.window_box>.blockWrap>.scrollview p>a:hover{
  color: #E0C6AD;
}
.mask>.container>.window_box>.blockWrap>.scrollview button.submit{
  width: 100%;
  padding: .12rem;
  font-size: .112rem;
  color: #000;
  line-height: 1;
  background-color: #E0C6AD;
  border-radius: .056rem;
  border: none;
  outline: none;
}
.mask>.container>.window_box>.blockWrap>.scrollview button.submit.disabled{
  background-color: #B9B9B9;
  color: #fff;
  cursor: not-allowed;
}
.mask>.container>.window_box>.blockWrap>.scrollview .submit_row{
  display: flex;
  align-items: center;
}
.mask>.container>.window_box>.blockWrap>.scrollview .submit_row>button.submit{
  width: 2.112rem;
  margin-right: .192rem;
}
.mask>.container>.window_box>.blockWrap>.scrollview .submit_row>p.other{
  line-height: 1;
  margin-bottom: 0;
}
.mask>.container>.window_box>.blockWrap>.scrollview>p.other{
  text-align: center;
  margin-bottom: 0;
  margin-top: 1.5em;
}
.mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row{
  display: flex;
  margin-bottom: .24rem;
  cursor: pointer;
}
.mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row.error{
  background-color: #FFDBD7;
}
.mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row>.checkBox{
  width: .144rem;
  height: .144rem;
  border: solid 1px #111;
  border-radius: 3px;
  margin-top: .024rem;
  margin-right: .08rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row>.checkBox>img{
  width: .096rem;
  display: none;
}
.mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row>.checkBox.checked{
  background-color: #111;
}
.mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row>.checkBox.checked>img{
  display: block;
}

.mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row>p{
  width: 100px;
  flex: 1;
  margin-bottom: 0;
  user-select: none;
}

.mask>.container>.window_box>.loginWrap{
  /* display: flex; */
  display: block;
}
.mask>.container>.window_box>.blockWrap.loginWrap>.scrollview>.form_wrap>.formItem.password{
  margin-bottom: .096rem;
}

.mask>.container>.window_box>.signUpWrap{
  /* display: flex; */
}

.mask>.container>.window_box>.forgetWrap{
  /* display: flex; */
}
.mask>.container>.window_box>.forgetWrap>.scrollview>.title{
  margin-bottom: 0;
  padding-bottom: .12rem;
}
.mask>.container>.window_box>.forgetWrap>.scrollview>p.title_tip{
  font-size: .176rem;
  margin-bottom: 2em;
}

.mask>.container>.window_box>.checkEmailWrap{
  /* display: flex; */
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>.title{
  margin-bottom: 0;
  padding-bottom: .12rem;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>p.title_tip{
  font-size: .176rem;
  margin-bottom: 2em;
  text-align: left;
  margin-top: 0;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>p.title_tip>span{
  font-weight: bold;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>.inputCode_box{
  position: relative;
  margin-bottom: .24rem;
  overflow: hidden;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>.inputCode_box>.inputCode{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>.inputCode_box>.inputCode>.item{
  width: 23%;
  height: .8rem;
  border: solid 1px #D8DADC;
  border-radius: .12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .256rem;
  font-weight: bold;
  color: #131E29;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>.inputCode_box>.inputCode>.item.active{
  border-color: #000;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>.inputCode_box>.transparentInput{
  width: 200%;
  position: absolute;
  left: -100%;
  color: transparent;
  user-select: none;
  top: 0;
  bottom: 0;
  background-color: transparent;
  border: none;
  outline: none;
}



.mask>.container>.window_box>.checkEmailWrap>.scrollview>p{
  margin-top: 1.5em;
  text-align: center;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>p.sendCode{
  cursor: pointer;
}
.mask>.container>.window_box>.checkEmailWrap>.scrollview>p.sendCode.disabled{
  cursor: not-allowed;
}

.mask>.container>.window_box>.resetWrap{
  /* display: flex; */
}
.mask>.container>.window_box>.changedWrap{
  /* display: flex; */
}
.mask>.container>.window_box>.changedWrap>.scrollview>.title{
  text-align: center;
}
.mask>.container>.window_box>.changedWrap>.scrollview>p{
  font-size: .176rem;
  margin-bottom: 1.3em;
  letter-spacing: .3px;
  text-align: center;
}
.mask>.container>.window_box>.changedWrap>.scrollview>button.toLogin{
  width: 3.368rem;
  display: block;
  margin: 0 auto;
}


/* error */
.mask .blockWrap .form_wrap>.formItem.error>input.val{
  background-color: #ffdbd7!important;
}


@media screen and (max-width: 1480px) {
  .welcomeWrap>.scrollview{
    padding-top: 0;
    padding-bottom: 0;
  }
  .welcomeWrap>.scrollview>.logo{
    width: 100px;
  }
  .welcomeWrap>.scrollview>.content_box>.title{
    font-size: 45px;
  }
  .welcomeWrap>.scrollview>.content_box>.desc{
    font-size: 17px;
  }
  .welcomeWrap>.scrollview>.content_box>.form{
    margin-top: 22px;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.input_row{
    margin-bottom: 22px;
  }
}



@media screen and (max-width: 767px) {
  .welcomeWrap{
    width: 100%;
    height: 90vh;
    padding: .8333rem .0833rem;
    border-radius: .4444rem;
  }
  .welcomeWrap>.scrollview{
    padding: .2222rem .3333rem;
  }
  .welcomeWrap>.scrollview>.logo{
    width: 2.1667rem;
    display: block;
    margin: 0 auto;
    margin-bottom: 1.6667rem;
  }
  .welcomeWrap>.scrollview>.content_box>.title{
    font-size: .8889rem;
    margin-bottom: .3em;
  }
  .welcomeWrap>.scrollview>.content_box>.desc{
    font-size: .4444rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form{
    width: 100%;
    margin-top: .6944rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.s_title{
    font-size: .3333rem;
    margin-bottom: .8em;
  }
  .welcomeWrap>.scrollview>.content_box>.form input{
    font-size: .3333rem;
    padding: .4167rem .4444rem;
    border-radius: .2778rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form button{
    padding: .4444rem 0;
    font-size: .4444rem;
    border-radius: .2222rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.input_row{
    margin-bottom: .5556rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.input_row>button{
    margin-left: .2778rem;
    width: 3.8889rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.submit{
    width: 100%;
    padding: .3333rem 0;
    margin-bottom: .5556rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.login{
    display: inline-block;
    margin: 0 auto;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.login>span{
    font-size: .4444rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.login>.toLogin{
    text-decoration: underline;
    margin-left: .1667rem;
  }
  .welcomeWrap>.scrollview>.content_box>.form>.login>.toLogin:hover{
    color: #131E29;
  }


  
  .mask>.container{
    flex-direction: column;
    padding: 0 .5556rem;
  }
  .mask>.container>.logo_box{
    width: 100%;
    flex: unset;
    padding: 1.1111rem 0;
    display: flex;
    justify-content: center;
  }
  .mask>.container>.logo_box>.logo{
    width: 3.25rem;
  }
  .mask>.container>.window_box{
    width: 100%;
    height: 100px;
    flex: 1;
  }
  .mask>.container>.window_box>.blockWrap{
    position: absolute;
    top: 0;
    transform: translateY(0);
    /* display: flex;
    flex-direction: column; */
    width: 100%;
    max-height: 93%;
    border-radius: .4444rem;
    padding: .7778rem .2778rem;
    /* display: none; */
  }
  .mask>.container>.window_box>.blockWrap>.scrollview{
    padding: 0 .2778rem;
    max-height: calc((100vh - 3.6944rem)*0.93 - 1.5556rem);
  }
  .mask>.container>.window_box>.blockWrap>.scrollview>.title{
    font-size: .6667rem;
    margin-bottom: .4em;
    padding: .2778rem 0 .5556rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem{
    margin-bottom: .4444rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap .formItem .s_title{
    font-size: .3333rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row>.s_title{
    margin-right: .4167rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row>.hidePass>img{
    width: .5rem;
    margin-right: .2778rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>.title_row>.hidePass>span{
    font-size: .3333rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview>.form_wrap>.formItem>input.val{
    width: 100%;
    font-size: .3889rem;
    color: #131E29;
    padding: .3611rem .4444rem;
    border-radius: .1111rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview p{
    font-size: .3889rem;
    margin-bottom: 1.3em;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview p>a{
    margin: 0 .1389rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview p>a:hover{
    color: #131E29;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview button.submit{
    width: 100%;
    padding: .4167rem;
    font-size: .3889rem;
    border-radius: .1944rem;
    margin-top: .3611rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview .submit_row{
    flex-direction: column;
    padding-bottom: .2778rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview .submit_row>button.submit{
    width: 100%;
    margin-right: 0;
    margin-bottom: .5rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview .submit_row>p.other{
    line-height: 1;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row{
    margin-bottom: .5556rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row>.checkBox{
    width: .5rem;
    height: .5rem;
    margin-top: .0833rem;
    margin-right: .2778rem;
  }
  .mask>.container>.window_box>.blockWrap>.scrollview .checkbox_row>.checkBox>img{
    width: .3333rem;
  }


  .mask>.container>.window_box>.blockWrap.loginWrap>.scrollview>.form_wrap>.formItem.password{
    margin-bottom: .3333rem;
  }
  .mask>.container>.window_box>.forgetWrap>.scrollview>.title{
    margin-bottom: 0;
    padding-bottom: .4167rem;
  }
  .mask>.container>.window_box>.forgetWrap>.scrollview>p.title_tip{
    font-size: .3889rem;
    margin-bottom: 1.6em;
  }

  .mask>.container>.window_box>.checkEmailWrap>.scrollview>.title{
    margin-bottom: 0;
    padding-bottom: .4167rem;
  }
  .mask>.container>.window_box>.checkEmailWrap>.scrollview>p.title_tip{
    font-size: .3889rem;
    margin-bottom: 1.6em;
    text-align: left;
    margin-top: 0;
  }
  .mask>.container>.window_box>.checkEmailWrap>.scrollview>.inputCode_box{
    position: relative;
    margin-bottom: .6667rem;
  }
  .mask>.container>.window_box>.checkEmailWrap>.scrollview>.inputCode_box>.inputCode>.item{
    height: 1.8333rem;
    border-radius: .4167rem;
    font-size: .8889rem;
  }
  
  .mask>.container>.window_box>.checkEmailWrap>.scrollview>p{
    margin-top: 2em;
  }
  .mask>.container>.window_box>.changedWrap>.scrollview>p{
    font-size: .3889rem;
    margin-bottom: 1.5em;
  }
  .mask>.container>.window_box>.changedWrap>.scrollview>button.toLogin{
    width: 100%;
  }

}