.narrate .narrate-video {
  margin-top: 6.018519vh; height: 59.166667vh; visibility: hidden; opacity: 0;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.narrate .narrate-video-decoration {
  position: absolute; top: -10%; left: 50%; width: 110%; z-index: 1;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
}

.narrate .narrate-video-decoration > img { width: 100%; height: auto; }

.narrate .page-circle-link {
  visibility: hidden; opacity: 0;
  margin: 0; position: absolute; bottom: 0; right: -12%;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

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

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

.copyright {
  position: absolute;
  right: 0; bottom: 0;
  transform: translateY(150%);
  font-size: .833333vw;
  font-size: max(14px, .833333vw);
  font-family: "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media screen and (max-width: 768px) {
  .narrate .narrate-video { margin-top: 0px; width: calc(100% - 60px); height: auto; }

  .narrate .narrate-video-decoration {
    top: 0; -webkit-transform: translate(-50%, -78.5%); transform: translate(-50%, -78.5%);
  }

  .narrate .page-circle-link { position: static; margin: 50px auto 0px; }

  .copyright { font-size: 16px; }
}