#login-footer{
    z-index:10000 !important;
  }
  #face-login .head_img {
    padding-top: 46.7%;
  }
  body{
    position:relative;
    width:100%;
    height: 100%;
  }
  
  #face-login {text-align: center;
    background-color: #414141;
    width:100%;
    height:100%;
    position: relative;
  }
  #face-login .demo_5 {
    /* position:relative */
    position: absolute;
    z-index: 9999;
    width: 100%;
    height:100%;
  }
  #face-login .demo_5 canvas#canvas{
    transform: rotateY(180deg);
  }
  #face-login .src-video{
    display: none;
    /* margin-bottom: -128px; */
    /* width: 100vw; */
    /* height:100vh; */
    /* border-radius:50%; */
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /* border-radius: 50% */
  }
  #face-login #canvas{
    display: none;
    /* width: 100vw !important;height: 100vh !important; */
  }
  #face-login .photo{
    border-radius: 50% ;
    /* margin-bottom:28px; */
    /* display:none */
    width: 320px;
    /* margin-top: 10%; */
    transform: rotateY(180deg);
    margin-top: 120px;
    margin: 0 auto;
  }
  #face-login .isSuccessFalse{
    display:none
  }
  #face-login .isSuccessTrue{
    width:100vw;
    height:100vh;
    font-size: 23px;
    position:absolute;
    z-index:999;
    /* left:50%;top:50%; */
    /* margin-top:-50vh; */
    /*高度的一半*/
    /* margin-left:-50vw; */
  }
  #face-login .fontsizeclass{
    font-size: 22px;
    line-height: 1.6;
    font-weight: 400;
    padding: 5px;
    color:#fff
  
  }
  #face-login .headlogo{
    position: absolute;
    top: 45px;
    left:60px;
    z-index: 1000;
  
  }
  .headlogo img{
    height: 4.25rem;
  }
  
  #face-login .mask2 {
    /* -webkit-mask-image: radial-gradient(circle, #080808 160px, rgba(0,0,0,.05) -37%); */
  }
  #face-login .layoutDiv{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #face-login .btn{
    margin-right: 10px;
    height:36px;
    width:80px;
    color: #333;
  }
  #face-login .btn-primary{
    background-color:#1890ff;
    border-color: #1890ff;
    width:120px  !important ;
    margin-left: 10px;
    color: #fff;
  }
  #face-login .btn-primary:hover{
    /* color:#1890ff; */
    height:36px;
  
  }
  
  #face-login .inner {
    width: 75.3%;
    margin: 0 auto;
  }
  #face-login .input_box {
    margin: 35px 0 45px 0;
    position: relative;
  }
  #face-login .input_box i{
    position: absolute;
    background:url(../images/user.jpg) no-repeat center;
    background-size: contain;
    left: 0;
    top: 6px;
    height: 27px;
    width: 27px;
  }
  #face-login .demo_2 .input_box i{
    position: absolute;
    background:url(../images/keyword.jpg) no-repeat center;
    background-size: contain;
    left: 0;
    top: 6px;
    height: 27px;
    width: 27px;
  }
  #face-login .input_box input[type="text"] {
    font-size: 16px;
    line-height: 42px;
    border: 0;
    border-bottom: 1px solid #e3e3e3;
    width: 100%;
    text-indent: 40px;
  }
  #face-login .input_box input[type="password"] {
    font-size: 16px;
    line-height: 42px;
    border: 0;
    border-bottom: 1px solid #e3e3e3;
    width: 100%;
    text-indent: 40px;
  }
  #face-login .t_next {
    font-size: 19px;
    text-align: center;
    background: #0e419c;
    color: #fff;
    border-radius: 5px;
    padding: 13px 0;
  }
  #face-login .t_next:active{
    background: #0f52ca;
  }
  #face-login .forget {
    float: left;
  }
  #face-login .change_face {
    float: right;
  }
  #face-login .operating {
    margin: 15px 0;
  }
  #face-login .operating div:active{
    color:#0e419c;
  }
  #face-login .head_bg {
    padding-top: 20%;
    background: #fff;
    position: relative;
  }
  #face-login .head_bg:after{
    content: "";
    border-top: 2px solid #fff;
    position: absolute;
    top: calc(50% - 1px);
    width: 80%;
    left: 10%;
    z-index: 1;
  }
  #face-login .head_bg i{
    position: absolute;
    color: #fff;
    font-size: 18px;
    top: calc(50% - 13px);
    padding: 2px 6px;
    border: 2px solid;
    border-radius: 50%;
    background:#0459aa;
    z-index: 2;
  }
  #face-login .head_bg i.selected{
    background:#fff;
    color:#0459aa;
    border-color:#fff;
  }
  #face-login .head_bg .items_1{
    left: 10%;
  }
  #face-login .head_bg .items_2{
    left: calc(50% - 13px);
  }
  #face-login .head_bg .items_3{
    right: 10%;
  }
  #face-login .img_box img{
    width:100%;
    height: auto;
    border-radius: 50%;
  }
  #face-login  .img_box {
    padding: 7px;
    border: 5px solid #e4e4e4;
    border-radius: 50%;
  
  }
  #face-login .img_tt {
    font-size: 22px;
    text-align: center;
    margin:50px 0 75px 0;
  }
  #face-login .demo_4 .img_box{
    border:0;
    border-radius: 0;
  }
  #face-login .demo_4 .img_ss{
    padding:45px 0 5px 0;
  }
  #face-login .demo_4 .img_box img{
    border-radius: 0;
  }
  #face-login .demo_4 .img_tt{
    margin: 20px 0 55px 0;
  }
  #face-login .demo_4 .t_next{
    border-radius: 50px;
    margin:23px 0;
    padding:16px 0;
  }
  #face-login .demo_4 .mox{
    width: 73.3%;
    margin: 0 auto;
  }
  #face-login .demo_4 .t_tit{
    text-align: center;
    background: url(../images/icon.jpg) no-repeat 47px center;
    background-size: contain;
    color:#a1a1a1;
  }
  #face-login .demo_4 .mox_con{
    position: relative;
  }
  #face-login .demo_4 input#photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 0;
    opacity: 0;
  }
  #face-login .demo_5 .img_ss{
    position: relative;
  }
  #face-login .demo_5 .sub_simg{
    position: absolute;
    text-align: center;
    padding: 7px;
    border: 5px solid transparent;
    border-radius: 50%;
    margin-top:-100%;
  }
  #face-login div#load_src{
    width:100%;
  }
  #face-login  .img_ss {
    padding: 45px 0px;
  }
  #face-login .demo_5 .t_next{
    font-size: 14px;
    padding: 20px 0;
    border-radius:0;
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  #face-login .demo_5 video#video{
    border-radius: 50%;
    position: relative;
    z-index: 1;
  }
  #face-login .demo_5 canvas#canvas{
    border-radius: 50%;
  }
  #face-login .demo_5 .show canvas#canvas{
    z-index: 1;
  }
  #face-login .demo_5 .bpx {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
  }
  #face-login .demo_5 .img_box img{
    width:100%;
    height: auto;
  }
  #face-login .demo_5 input#photo{
    font-size: 14px;
    padding: 20px 0;
    border-radius: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    opacity: 0;
  }
  #face-login .rekey {
    position: absolute;
    left: 50px;
    border: 1px solid;
    padding: 5px 8px;
    border-radius: 50%;
    z-index: 1;
  }
  #face-login .loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 2;
    opacity: 0.8;
    display: none;
  }
  #face-login .loading.show{
    display: block;
  }
  #face-login .load_tt {
    position: absolute;
    top:calc(50% - 6px);
    left: calc(50% - 36px);
    color: #000;
    z-index: 999;
    font-size:18px;
  }
  
  #face-login .demo_5 .t_next_1{
    font-size: 14px;
    padding: 20px 0;
    border-radius:0;
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    background: #0e419c;
    color: #fff;
    z-index: 1;
  }
  @media screen and (max-width: 321px) {
    #face-login  .demo_4 .img_tt{
      font-size:20px;
      margin: 10px 0 35px 0;
    }
    #face-login  .demo_4 .t_next{
      padding: 14px 0;
      font-size: 16px;
    }
    #face-login  .demo_4 .t_tit{
      background: url(../images/icon.jpg) no-repeat 35px center;
      background-size: contain;
    }
    #face-login .demo_5 .img_tt{
      font-size:20px;
    }
  
  }
  
  
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .circle {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: white;
    -webkit-background-clip: content-box;
    background-clip: content-box;
    mix-blend-mode: screen;
  }
  
  .video-container {
    height: 100%;
    width: 100%;
    position: fixed;
    background: rgba(255, 255, 255, .1);
    -webkit-mask-image: radial-gradient(circle, #080808 160px, rgba(0, 0, 0, .05) -37%), radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px);
  }
  
  .videobox {
    background-color: #000;
    position:relative
  }
  .centered-image {
    position: absolute;
    height: 260px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* 确保图片位于视频上层 */
  }
  @media screen and (max-width: 600px) {
    /* 当屏幕宽度小于等于600px时应用的样式 */
    .centered-image {
        position: absolute;
        height: 260px;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999; /* 确保图片位于视频上层 */
      }
  }
  

  
  .myVideofilter {
    filter: blur(10px);
  }
  
  
  #myCanvas {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    /* background: #000; */
  }
  
  #loadingcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
  }
  #videobox{
    display: none;
    height: 100%;
    width: 100%;
    /* background: #000; */
  }
  
  .facemsg{
    display:none;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 9999;
    color: #fff;
    top:60px
  }
  .centered-image-box{
    /* width: 612px;
    height: 612px;
    transform: translate(0, 142px); */
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
  }
  
  
  @media screen and (max-width: 728px)  {
    body #face-login  .headlogo {
      left: 0;
      right: 0;
      text-align: center;
    }
  
    body #face-login  .headlogo img{
      height: 48px;
    }
  
  
    #mobile-login .logo img {
      /* display:none; */
      width: 60%;
      /* width: 19.5rem; */
    }
    #mobile-login .message_login{
      padding: 72px 0 60px !important;
    }
  
  
  
    .facemsg{
      top: 130px;
    }
  }
  
  .pc-login-mini .content-box {
    width: auto;
    max-width: 360px;
    margin: 0 auto;
    position: static;
    padding: 24px 40px;
  }
  .pc-login-mini .logobox {
    position: static;
  }
  .pc-login-mini .left {
    flex-direction: column;
  }
.shugang{
  width: 1px;
  display: inline-block;
  background: #fff;
  height: 1.5rem;
  margin: 0 10px;
}
.templdate1{
  position: absolute;
  top: 5%;
  right: 10%;
  display: flex;
  align-items: center;
}
.usetip {
  /*    position: absolute;
  right: 10%;
  top: 10%;*/
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 400;
}

.usetip1 {
  /*    position: absolute;
  right: 14%;
  top: 10%;*/
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 400;
}