:root {
  --red-color: #D83828;
  --active-red-color: #ca0d18;
  --white-color: #ffffff;
  --black-color: #000000;
  --blue-color: #004b8b;
  --section-width: 82.3529vw;
  --tooltip-arrow-height: 0.4412vw;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  font-family: FZLanTingHei-H-GBK;
  background-image: url(/static/assets/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.full {
  width: 100%;
  height: 100%;
}

.full-x {
  width: 100%;
}

a {
  text-decoration: none;
  background-color: transparent;
}

#app {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  grid-template-rows: max-content 1fr max-content;
}

#app>header,
#app>main {
  width: var(--section-width);
  margin-inline: auto;
}

#app>footer {
  width: 100%;
}

#app .breadcrumb {
  display: flex;
  align-items: center;
  gap: 1.0294vw;
  height: 4.2647vw;
  color: #7b818b;
  font-size: 1.0294vw;
}

#app .breadcrumb a,
#app .breadcrumb .location-link {
  color: #7b818b;
}

#app .breadcrumb a:last-of-type,
#app .breadcrumb .location-link:last-of-type {
  color: var(--red-color);
  font-weight: 700;
}

#app .breadcrumb .location-separator {
  color: #8e949c;
}

#app .breadcrumb a.location-link:last-child+.location-separator {
  display: none;
}