@import url(common.css);
html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #fff;
}

#main.first {
  animation: bg-show .6s 1.2s both;
}

#main:not(.first) {
  animation: bg-show 0s 0s both;
}

#main .frm .logo {
  animation: show 1s both;
}
#main .frm ul li input {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
  padding-left: 45px;
  padding-right: 5px;
  transition: all 200ms 0s ease;
}
#main .frm ul li input:focus {
  background: #EDFBED;
  color: #f34662 !important;
  transform: scale(1.05, 1.09);
}
#main .frm ul li input:focus + span {
  left: 10px;
  color: #249be0 !important;
}
#main .frm ul li input:not(:placeholder-shown) {
  color: #249be0;
}
#main .frm ul li span {
  transition: all 300ms 0s ease;
}
#main .frm .btn {
  transition: all 300ms 0s ease;
}
#main .frm .btn button {
  background: #f34662;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 300ms 0s ease;
}
#main .frm .btn button:hover {
  background: #f88e9f;
}
#main .frm .btn button:active {
  transform: scale(1.05, 1.09);
}
#main .frm .btn.btn-wait {
  padding-top: 8px;
}
#main .frm .btn.btn-wait button {
  background: #ccc;
  width: 50%;
  height: 30px;
  line-height: 30px;
  border-radius: 0;
}
#main .frm.first .logo {
  animation: logo-show .4s 1s both;
}
#main .frm.first ul input {
  animation: input-show .4s 1.2s both;
}
#main .frm.first ul input + span {
  animation: icon-show .4s 1.2s both;
}
#main .frm.first ul input[type="password"] {
  animation-delay: 1.4s;
}
#main .frm.first ul input[type="password"] + span {
  animation-delay: 1.4s;
}
#main .frm.first .btn button {
  animation: btn-show .4s 1.6s both;
}
#main .frm.success .logo {
  animation: logo-success .8s both;
}
#main .frm.success ul input {
  animation: input-success .8s 0.4s both;
}
#main .frm.success ul input + span {
  animation: icon-success .8s 0.4s both;
}
#main .frm.success ul input[type="password"] {
  animation-delay: 0.6s;
}
#main .frm.success ul input[type="password"] + span {
  animation-delay: 0.6s;
}
#main .frm.success .btn button {
  background: #33c942;
  animation: btn-success .4s 0.8s both;
}

@keyframes logo-show {
  0% {
    padding-top: 100px;
    transform: scale(1.3, 1.3);
  }
  70% {
    transform: scale(1, 1);
  }
  100% {
    padding-top: 0;
  }
}
@keyframes input-show {
  0% {
    opacity: 0;
    width: 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
  }
}
@keyframes icon-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes btn-show {
  0% {
    margin-top: 20px;
    opacity: 0;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes bg-show {
  0% {
    background: transparent;
  }
  100% {
    background: #f3f3f3;
  }
}
@keyframes logo-success {
  100% {
    transform: scale(0.7, 0.7);
    opacity: 0;
  }
}
@keyframes input-success {
  50% {
    opacity: 0;
  }
  100% {
    width: 0%;
    opacity: 0;
  }
}
@keyframes icon-success {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}
@keyframes btn-success {
  100% {
    margin-top: 20px;
    opacity: 0;
  }
}