.logo {
  height: 38px;
  width: 285px;
  background-size: cover;
  display: inline-block;
  float: left;
}

.login {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  position: fixed;
  min-height: 100%;
  background-image: url('../../assets/images/login.svg');
  background-repeat: no-repeat;
  //background-size: cover;
  background-size: 100% 100%;
  background-position: center;
  min-width: 1220px;

  &-con {

    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }


    .form-con {
      //position: absolute;
      //top: 23vh;
      //left: 57vw;
      //width: 32vw;
      //height: 62vh;
      //top: 20%;
      //left: 38%;
      //width: 30%;
      //height: 55%;
      //top:50%;
      //left: 50%;
      width: 550px;
      height: 380px;
      margin-top: -50px;
      //margin-top: -250px;
      //margin-left: -230px;
      //min-width: 460px;
      //min-height: 480px;
      //background: linear-gradient(181.51deg, rgba(255, 255, 255, 0.5) -0.89%, rgba(255, 255, 255, 0.5) 41.59%);
      //background: #fff;
      //opacity: 0.86;
      mix-blend-mode: normal;
      backdrop-filter: blur(50px);
      /* Note: backdrop-filter has minimal browser support */
      border-radius: 5px;

      .hj-logo {
        //padding-top: 20px;
        display: flex;
        justify-content: center;
      }

      .tab-class {
        width: 60%;
        margin-left: 20%;
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn-class {
          cursor: pointer;
          font-weight: 500;
          font-size: 20px;
          line-height: 40px;
          display: flex;
          align-items: center;
          color: #1B365D;
        }

        .btn-active-class {
          cursor: pointer;
          font-weight: 500;
          text-decoration: underline;
          text-underline-offset: 10px;
          font-size: 20px;
          line-height: 40px;
          display: flex;
          align-items: center;
          color: #1B365D;
        }
      }

      .content {
        padding-top: 25px;
        width: 66%;
        margin-left: 17%;
        justify-content: center;
        align-items: center;
      }

      .scan {
        //padding-top: 6%;
        width: 70%;
        height: 296px;
        margin-left: 15%;
        justify-content: center;
        align-items: center;
        display: flex;

        .scan-image {
          width: 150px;
          height: 150px;
          border: 1px solid #1B365D;
          border-radius: 8px;
        }
      }
    }

    .login-tip {
      font-size: 16px;
      text-align: center;
      color: #c3c3c3;
    }
  }
}

//.title{
//  color: #f35626;
//  background: coral;
//  background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
//  -webkit-background-clip: text;
//  -webkit-text-fill-color: transparent;
//  -webkit-animation: hue 10s infinite linear;
//  letter-spacing: 10px;
//}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}
