#init_loading {
      position: fixed;
      text-align: center;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
      top: 0;
      z-index: 20;
      background: #f6f6f6;
      opacity: 1;
      transition: opacity 0.5s ease-in;
    }

    #init_loading.fade-out{
      opacity: 0;
    }
    
    #init_loading > img {
      width: 38px;
      height: 38px;
      animation-name: spin;
      animation-duration: 1500ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      filter: grayscale(1);
    }
    
    #init_loading .text {
      height: 18px;
      font-size: 12px;
      color: #9b9b9b;
      margin-top: 8px;
      font-family: "SF Pro Display", "Roboto", "Ping Fang TC", "Ping Fang TC", Arial, Helvetica, sans-serif;
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .text-tiny {
      font-size: 0.7em;
    }
    .text-small {
      font-size: 0.85em;
    }
    .text-big {
      font-size: 1.4em;
    }
    .text-huge {
      font-size: 1.8em;
    }