.page-wrapper.foreword {
  background-image: url("../images/008.png"), url("../images/008.png"),
    url("../images/009.png"), url("../images/010.png"),
    url("../images/011.png"); z-index: 1;
  background-size: auto var(--banner-height), auto var(--banner-height), auto 130%, auto 53.888889%, 100% 100%;
  background-position: 0 0, 0 100%, 103.958333% -34.444444vh, -8.072917vw 103.888889%, 0 0;
  background-repeat: no-repeat;
}

.foreword.page-content { width: 77.291667%; margin: auto; }

.paragraph-title {
  margin: 0 0 10.185185vh; text-align: center;
  font-size: 2.5vw; color: #992C2C;
  visibility: hidden; opacity: 0;
  transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
}

.active .paragraph-title {
  transition: visibility 1s ease-in-out .5s, opacity 1s ease-in-out .5s;
  visibility: visible; opacity: 1;
}

.paragraph {
  margin: 0; font-size: 1.5625vw; text-indent: 2em; visibility: hidden; opacity: 0;
  transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
}

.paragraph + .paragraph { margin-top: 1vh; }

.active .foreword .paragraph {
  visibility: visible; opacity: 1;
  transition: visibility 1s ease-in-out 1s, opacity 1s ease-in-out 1s;
}

.foreword .page-circle-link {
  visibility: hidden; opacity: 0;
  transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
}

.active .foreword .page-circle-link {
  visibility: visible; opacity: 1;
  transition: visibility 1s ease-in-out 1.5s, opacity 1s ease-in-out 1.5s;
}

@media screen and (max-width: 768px) {
  .page-wrapper {
    background-size: 100% auto, 100% auto, 100% auto, 100% auto, 100% 100%;
    background-position: 0 0, 0 100%, 100% 0, 0 100%, 0 0;
  }
  
  .paragraph-title { font-size: 24px; margin: 0 0 30px; }

  .paragraph { font-size: 16px; }

  .paragraph + .paragraph { margin-top: 10px; }
}