/***************************************
- loading
***************************************/
#loading {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 9999999;
  transition: all 1s;
  transition-delay: 1s;
}
#loading .background {
  display: block;
  width: 160px;
  height: 24px;
  background: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-mask-image: url('../img/logo.png');
  mask-image: url('../img/logo.png');
  -webkit-mask-size: cover;
  mask-size: cover;
}
#loading .background::before {
  content: '';
  display: block;
  width: 160px;
  height: 24px;
  background: #2a528f;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 forwards 2.0s 1 ease-in;
  animation: load7 forwards 2.0s 1 ease;
}
@-webkit-keyframes load7 {
  from {
    top: 108%;
  }
  to {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
@keyframes load7 {
  from {
    top: 100%;
  }
  to {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.loaded {
  opacity: 0;
  visibility: hidden;
}