@keyframes banner-load{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
@keyframes avatar-load{
  0%{
    transform:translateY(-100%)
  }
  100% {
    transform:translateY(0%)
  }
}
.login-page{
  width:100%;
  height: 100%;
  position: relative;
  margin: 0;
  .login-banner-box{
    width:100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    z-index: -1;
    .login-banner{
      width: 100%;
      height: 100%;
      display: block;
      animation:banner-load 1s;
    }
  }
  .login-box{
    z-index: 1;
    .login-avatar{
      width: $component-size-huger;
      height: $component-size-huger;
      border-radius: 100%;
      animation:avatar-load 1s;
      @include transition(0.3s);
      display: block;
      margin: 0 auto;
    }
    .login-title{
      text-align: center;
      margin: 0;
      padding: 2rem $content-padding;
      background-color: #E38664;
      color:#fff;
      @include user-select-none;
    }
    .login-form{
      padding: 5rem 1rem 3.2rem 1rem;
    }
  }
}