.period-guide-layer {
  display: none;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}

.period-guide {
  width: 1900px;
  height: 1080px;
  margin: 0 auto;
  background-image: url("/assets/images/elementary/bg-period-guide-2ae49127e7f124f422fb6196830d027e.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.period-guide::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
}

.guide-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("/assets/images/elementary/img-period-guide-72121fb0412596087b6aa3af631eec24.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.guide-content .close-button {
  position: absolute;
  top: 11px;
  right: 28px;
}
.guide-content .helper {
  position: absolute;
  color: #fff;
  font-weight: 500;
}
.guide-content .helper-01 {
  top: 110px;
  left: 956px;
}
.guide-content .helper-02 {
  top: 236px;
  left: 1592px;
}
.guide-content .helper-03 {
  top: 306px;
  left: 958px;
}
.guide-content .helper-04 {
  top: 551px;
  left: 154px;
}
.guide-content .helper-05 {
  top: 835px;
  left: 1509px;
}
.guide-content .helper-06 {
  top: 961px;
  left: 396px;
}
.guide-content .helper-07 {
  top: 970px;
  left: 922px;
}
.guide-content .helper h3 {
  color: var(--color-primary);
  font-weight: bold;
  margin-bottom: 4px;
}
.guide-content .helper .text-blur {
  opacity: 0.5;
}