@media (min-width: 901px) {
  .L4 .q-wrap {
    align-items: start !important;
    padding-top: 132px !important;
  }
  .L4 .q-hero {
    margin-top: 36px !important;
  }
}
.ychk-l {
  display: flex;
  flex-direction: column;
  margin: 8px 0 4px;
}
.ychk {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}
.ychk:last-child {
  border-bottom: 0;
}
.ychk span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 12.5px;
  font-weight: 800;
}
.ychk.warn span {
  background: #E9B64F;
  color: #173B39;
}
.ychk p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #2C3E3C;
  flex: 1;
  min-width: 0;
}
.sch-ic {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 12px 26px -14px rgba(22, 63, 60, .45), 0 0 0 1px rgba(22, 63, 60, .06);
}
.sch-ic img {
  width: 46px;
  height: auto;
  display: block;
}
.nx .fs:not(:last-child):before {
  content: "";
  position: absolute;
  top: 5px;
  right: 18px;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background:
    linear-gradient(
      270deg,
      #F6D58C,
      #E9B64F);
  box-shadow: 0 0 10px rgba(233, 182, 79, .75);
  z-index: 0;
  animation: nxf1 3.6s ease-in-out .3s 1 forwards;
}
.nx .fs:nth-child(2):before {
  animation-name: nxf2;
}
@keyframes nxf1 {
  0% {
    width: 0;
  }
  38%, 100% {
    width: calc(100% - 22px);
  }
}
@keyframes nxf2 {
  0%, 48% {
    width: 0;
  }
  86%, 100% {
    width: calc(100% - 22px);
  }
}
.nx .fs:nth-child(1) .dot {
  animation: nxd1 3.6s .3s 1 forwards;
}
.nx .fs:nth-child(2) .dot {
  animation: nxd2 3.6s .3s 1 forwards;
}
.nx .fs:nth-child(3) .dot {
  animation: nxd3 3.6s .3s 1 forwards;
}
@keyframes nxd1 {
  0%, 100% {
    background: #E9B64F;
    box-shadow: 0 0 0 5px rgba(233, 182, 79, .25);
  }
}
@keyframes nxd2 {
  0%, 36% {
    background: #7FC4B6;
    box-shadow: 0 0 0 4px rgba(127, 196, 182, .18);
    transform: scale(1);
  }
  41% {
    transform: scale(1.35);
  }
  48%, 100% {
    transform: scale(1);
    background: #E9B64F;
    box-shadow: 0 0 0 5px rgba(233, 182, 79, .25);
  }
}
@keyframes nxd3 {
  0%, 84% {
    background: #7FC4B6;
    box-shadow: 0 0 0 4px rgba(127, 196, 182, .18);
    transform: scale(1);
  }
  90% {
    transform: scale(1.35);
  }
  96%, 100% {
    transform: scale(1);
    background: #E9B64F;
    box-shadow: 0 0 0 6px rgba(233, 182, 79, .3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nx .fs:before,
  .nx .dot {
    animation: none !important;
  }
}
.exb {
  border: 1px solid #EFE3C4;
  background:
    linear-gradient(
      180deg,
      #FFFCF4 0%,
      #fff 60%);
  position: relative;
  overflow: hidden;
}
.exb:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background:
    linear-gradient(
      90deg,
      #1F5F5B,
      #E9B64F,
      #F6D58C,
      #E9B64F,
      #1F5F5B);
}
.exb-h {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.exb-h h2 {
  margin: 0;
  font-size: 21px;
}
.exb-h p {
  margin: 3px 0 0;
  color: #7A8A88;
  font-size: 14px;
}
.exb-ic {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px -14px rgba(160, 122, 34, .6), 0 0 0 1px #F2E6C8;
  flex: none;
}
.exb-ic img,
.exb-ic svg {
  width: 34px;
  height: 34px;
}
.exb-n {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: #FFF4D9;
  color: #8A6A1F;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}
.exb-n b {
  font-size: 20px;
  color: #6E5214;
}
.exb-g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.exc {
  position: relative;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #EFEAE0;
  padding: 22px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  box-shadow: 0 14px 30px -24px rgba(22, 63, 60, .5);
}
.exc.first {
  background:
    linear-gradient(
      170deg,
      #1F5F5B,
      #163F3C);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 20px 40px -22px rgba(22, 63, 60, .8);
}
.exc-rb {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  background: #E9B64F;
  color: #163F3C;
  border-radius: 999px;
  padding: 2px 10px;
}
.exc-av {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 3px;
  background:
    conic-gradient(
      #E9B64F,
      #F6D58C,
      #E9B64F,
      #C9962E,
      #E9B64F);
  margin-bottom: 8px;
  box-sizing: border-box;
}
.exc-av i {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  font-size: 24px;
  background: #FFF8E6;
  color: #8A6A1F;
  border: 3px solid #fff;
}
.exc.first .exc-av i {
  border-color: #1F5F5B;
  background: #E9B64F;
  color: #163F3C;
}
.exc b {
  font-size: 15.5px;
  color: #163F3C;
}
.exc.first b {
  color: #fff;
}
.exc small {
  font-size: 12.5px;
  color: #8A9A98;
}
.exc.first small {
  color: rgba(232, 245, 242, .7);
}
.exc-t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #8A6A1F;
  background: #FFF4D9;
  border-radius: 999px;
  padding: 5px 12px;
}
.exc-t svg {
  width: 15px;
  height: 15px;
}
.exc.first .exc-t {
  background: rgba(233, 182, 79, .18);
  color: #F6D58C;
}
.exc.empty {
  background: transparent;
  border: 1.5px dashed #E6DFD1;
  box-shadow: none;
}
.exc.empty .exc-av {
  background: #F1ECE3;
}
.exc.empty .exc-av i {
  background: #FAF7F1;
  color: #C9BFAE;
}
.exc.empty .exc-av svg {
  width: 24px;
  height: 24px;
}
.exc.empty b {
  color: #9AA6A4;
}
html.dark .exb,
html.dark .exc:not(.first) {
  background: #16302E;
  border-color: #24403D;
}
html.dark .exc:not(.first) b {
  color: #E3ECEA;
}
html.dark .sch-ic {
  background: #1C3836;
}