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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

a {
  color: var(--secondary-color);
}

.button, body > main form #id_submit {
  padding: 0.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--secondary-color);
  background: white;
  color: var(--secondary-color);
  transition: all 0.3s ease;
}
.button:hover, body > main form #id_submit:hover {
  background: var(--secondary-color);
  color: white;
}

.price-list {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
.price-list article {
  border: 1px solid var(--primary-color);
  padding: 1rem;
  background: white;
}
.price-list article h1 {
  color: var(--primary-color);
}
.price-list article p {
  margin-bottom: unset;
}
.price-list article p.money, .price-list article p.data {
  font-weight: bold;
}
.price-list article p.money span, .price-list article p.data span {
  font-weight: normal;
  color: var(--secondary-color);
}
@media screen and (min-width: 1068px) {
  .price-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

:root {
  --primary-color: #ffD700;
  --secondary-color: #EB0000;
  --background-color: #EEE;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #383838;
  font-size: 16px;
}

body > nav {
  background: var(--primary-color);
  padding: 1rem;
}
body > nav a#logo {
  color: var(--secondary-color);
  font-size: 1.25rem;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  body > nav {
    padding: 1rem calc(50vw - 350px);
  }
}
@media screen and (min-width: 1024px) {
  body > nav {
    padding: 1rem calc(50vw - 450px);
  }
}
body > header {
  padding: 2rem 1rem;
  text-align: center;
}
body > header img {
  width: 80%;
  max-width: 200px;
  margin: 0 auto 1rem;
}
body > header p {
  font-size: 1.25rem;
}
body > main form {
  background: var(--background-color);
  padding: 2rem 1rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
body > main form > div {
  display: flex;
  flex-flow: column nowrap;
}
body > main form > div label {
  color: var(--secondary-color);
  position: relative;
}
body > main form > div label::after {
  content: ":";
}
body > main form > div input {
  padding: 0.5rem;
  outline: none;
  border: 1px solid var(--primary-color);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body > main form > div input:focus {
  border: 1px solid var(--secondary-color);
  box-shadow: 0 0 5px var(--secondary-color);
}
body > main form > div:has(input:required) label::before {
  content: "*";
  position: absolute;
  right: 100%;
}
body > main section {
  padding: 1rem;
  margin-bottom: 2rem;
}
body > main section:not(last-child) {
  margin-bottom: unset;
}
body > main section#process .process-list {
  display: flex;
  flex-flow: row nowrap;
}
body > main section#process .process-list .process-item {
  flex: 1;
  display: flex;
  align-items: center;
}
body > main section#process .process-list .process-item span {
  flex: none;
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
body > main section#process .process-list .process-item::before {
  content: "";
  flex: 1;
  height: 8px;
  display: block;
  background-color: var(--secondary-color);
}
body > main section#process .process-list .process-item:first-child {
  flex: 0;
}
body > main section#process .process-list .process-item:first-child::before {
  display: none;
}
body > main section#price {
  padding: 1rem;
}
body > main section#message {
  background: var(--primary-color);
}
body > main section#message span.email {
  color: var(--secondary-color);
}
body > main section#warning time {
  color: var(--secondary-color);
}
body > main section#task_list ul#id_task_list {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
body > main section#task_list ul#id_task_list .task-item {
  border: 1px solid var(--primary-color);
  padding: 1rem;
  background: white;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
body > main section#task_list ul#id_task_list .task-item p {
  margin-bottom: unset;
}
body > main section#task_list ul#id_task_list .task-item p.task-link {
  color: var(--secondary-color);
}
body > main section#task_list ul#id_task_list .task-item p.task-link a {
  word-break: break-all;
  overflow-wrap: break-word;
}
body > main section#task_list ul#id_task_list .task-item ul.task-status {
  display: flex;
}
body > main section#task_list ul#id_task_list .task-item ul.task-status li.task-status-item {
  flex: 1;
  display: flex;
  align-items: center;
}
body > main section#task_list ul#id_task_list .task-item ul.task-status li.task-status-item span {
  flex: none;
  display: block;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}
body > main section#task_list ul#id_task_list .task-item ul.task-status li.task-status-item::before {
  content: "";
  flex: auto;
  display: block;
  height: 8px;
  background-color: var(--secondary-color);
}
body > main section#task_list ul#id_task_list .task-item ul.task-status li.task-status-item:first-child {
  flex: none;
}
body > main section#task_list ul#id_task_list .task-item ul.task-status li.task-status-item:first-child::before {
  display: none;
}
body > main section#task_list ul#id_task_list .task-item ul.task-status li.task-status-item.active ~ .task-status-item span {
  background-color: var(--background-color);
  color: #666;
}
body > main section#task_list ul#id_task_list .task-item ul.task-status li.task-status-item.active ~ .task-status-item::before {
  background-color: var(--background-color);
}
@media screen and (min-width: 768px) {
  body > main {
    padding: 1rem calc(50vw - 350px);
  }
}
@media screen and (min-width: 1024px) {
  body > main {
    padding: 1rem calc(50vw - 450px);
  }
}
body > footer {
  background: var(--background-color);
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  body > footer {
    padding: 1rem calc(50vw - 350px);
  }
}
@media screen and (min-width: 1024px) {
  body > footer {
    padding: 1rem calc(50vw - 450px);
  }
}
body > footer ul li {
  display: flex;
}
body > footer ul li span.name {
  flex: none;
  width: 10ch;
}

/*# sourceMappingURL=style.css.map */