.personnel-header {
  margin-bottom: 50px;
  .header-title {
    text-align: center;
    color: var(--text-dark);
    font-size: 28px;
    overflow: hidden;
  }
  .sub-header-title {
    text-align: center;
    font-size: 12px;
    color: var(--text);
    margin-top: 16px;
  }
  .header-title-loading {
    height: 70px;
  }
  .header-title-nums {
    text-align: center;
    margin-top: 8px;
    display: inherit;
    .header-title-num {
      display: inline-block;
      font-size: 20px;
      color: var(--primary);
      background: var(--app-header-color);
      text-align: right;
      padding: 6px;
      margin-right: 4px;
      border: 1px solid var(--bg-lv2);
      border-radius: 2px;
      overflow: hidden;
    }
    .header-title-comma {
      display: inline-block;
    }
    .animate-num {
      animation: countLoaded 0.3s ease-in-out;
    }
    @keyframes countLoaded {
      0% {
        transform: translateX(2000px);
        border-radius: 3px;
      }
      80% {
        transform: translateX(-8px);
        border-radius: 20px/3px/20px/3px;
      }
      100% {
        transform: translateX(0);
        border-radius: 3px;
      }
    }
    .zero {
      color: var(--text-light);
    }
  }
}
