h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 1.7em;
}

h3 {
  font-size: 1.1em;
}

a {
  color: #6f6fff;
}

body {
  background: radial-gradient(circle at 20% 20%, rgba(72, 255, 0, 0.13), transparent 70%), radial-gradient(circle at 80% 20%, rgba(255, 0, 0, 0.178), transparent 90%), radial-gradient(circle at 20% 80%, rgba(255, 0, 85, 0.363), transparent 80%), radial-gradient(circle at 90% 90%, rgba(162, 0, 255, 0.267), transparent 40%), linear-gradient(to right bottom, #23004b, #000511);
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main.shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5em;
  align-items: center;
  color: #e5e7eb;
  padding: 5em 10% 5em 10%;
}
main.shell > * {
  width: 100%;
}
main.shell .eyebrow {
  background: rgba(255, 255, 255, 0.1);
  border: 0.1em solid;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  width: fit-content;
  padding: 0.3em 0.7em;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  align-self: flex-start;
}
main.shell .content-text {
  opacity: 0.7;
  white-space: wrap;
  word-break: break-all;
}
main.shell h1 {
  white-space: nowrap;
  word-break: keep-all;
}
main.shell h1 .title-sub-part {
  font-size: 0.6em;
}
main.shell h1 .brand {
  color: #bebeff;
}

.card-1 {
  border-radius: 2em;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.212);
  background-color: rgba(165, 219, 255, 0.075);
  padding: 1.5em;
  position: relative;
  box-shadow: 0.3em 0.3em 0.5em rgba(0, 195, 255, 0.096), -0.3em -0.3em 1em rgba(119, 0, 255, 0.144), inset 0.5em 0.5em 1em rgba(255, 255, 255, 0.0470588235), inset -0.5em -0.5em 1em rgba(0, 0, 0, 0.1176470588);
}
.card-1::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: url(#svg-filter);
  opacity: 0.1;
}
@supports (corner-shape: squircle) {
  .card-1 {
    corner-shape: squircle;
    border-radius: 3em;
  }
}

.card-2 {
  border-radius: 1em;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.034);
  background-color: rgba(114, 123, 255, 0.103);
  box-shadow: inset 0.5em 0.5em 1em rgba(255, 255, 255, 0.0352941176), inset -0.5em -0.5em 1em rgba(0, 0, 0, 0.0666666667);
  padding: 1em;
}
@supports (corner-shape: squircle) {
  .card-2 {
    corner-shape: squircle;
    border-radius: 2em;
  }
}

.link-card {
  text-decoration: none;
  color: unset;
  cursor: pointer;
  font-size: 0.9em;
  padding: 1em;
  display: block;
  border-radius: 1em;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.034);
  background-color: rgba(114, 123, 255, 0.13);
  box-shadow: inset 0.5em 0.5em 1em rgba(255, 255, 255, 0.0352941176), inset -0.5em -0.5em 1em rgba(0, 0, 0, 0.0666666667);
  transition: 0.3s;
}
.link-card:hover {
  transform: scale(1.02);
}
.link-card:active {
  box-shadow: inset 0.5em 0.5em 1em rgba(0, 0, 0, 0.0666666667), inset -0.5em -0.5em 1em rgba(255, 255, 255, 0.0352941176);
  transform: scale(0.98);
}

.hero .link-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
.hero .link-list > li {
  flex: 1 0 auto;
}
@media (max-width: 50em) {
  .hero .link-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
}

.card-1-list {
  display: flex;
  gap: 1.5em;
}
.card-1-list > * {
  flex: 1 1 0;
}
@media (max-width: 50em) {
  .card-1-list {
    flex-direction: column;
  }
}

.card-2-list {
  display: flex;
  gap: 1.5em;
}
.card-2-list > * {
  flex: 1 1 0;
}
@media (max-width: 50em) {
  .card-2-list {
    flex-direction: column;
  }
}

.footer-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 1em;
}
.footer-card .footer-content {
  word-break: keep-all;
  white-space: nowrap;
  text-align: center;
}
.footer-card a {
  color: unset;
}
.footer-card .gongan-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
}