.header {
  padding: 0 5rem;
  height: 100%;
  vertical-align: middle;
  user-select: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 6.75rem;
  z-index: 99;
}
.header .logo {
}
.header .logo > img {
  height: 4.25rem;
  user-select: none;
}
.header .date-time {
  color: #fff;
}
.header .date-time .top {
  font-size: 2.5rem;
  font-weight: bold;
}

.header .date-time .bottom {
  font-weight: bold;
  font-size: 1.5rem;
  gap: 1rem;
}
.header .menu {
  gap: 1rem;
}
.header .menu .btn {
  color: #000;
  font-size: 1.5rem;
  gap: 4px;
  cursor: pointer;
  background-color: #ecf8ff;
  border-radius: 0.25rem;
  height: 4rem;
  padding: 1rem;
  min-width: 10rem;
  font-weight: 500;
  user-select: none;
}
.header .menu .btn .svg {
  width: 1.5rem;
  height: 1.5rem;
}
.header .menu .btn .svg > svg {
  width: 1.5rem;
  height: 1.5rem;
}
.header .menu .btn .svg > img {
  width: 1.5rem;
  height: 1.5rem;
}

/* 小于等于960px时 */
@media screen and (max-width: 960px) {
  .header {
    height: 10rem;
    padding: 0 2rem;
  }
  .header .logo > img {
    height: 8rem;
    user-select: none;
  }
  .header .date-time {
    display: none !important;
  }
  .header .menu {
    display: none !important;
  }
}
/* 小于等于480px时 */
@media screen and (max-width: 480px) {
  .header {
    height: 10rem;
    padding: 0 2rem;
  }
  .header .date-time {
    display: none !important;
  }
  .header .menu {
    display: none !important;
  }
}