@-webkit-keyframes strokeAnimation {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes strokeAnimation {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; visibility: hidden;
  }
  100% {
    opacity: 1; visibility: visible;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0; visibility: hidden;
  }
  100% {
    opacity: 1; visibility: visible;
  }
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@-webkit-keyframes fadeInBottom {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes fadeInTop {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; visibility: visible;
  }
  100% {
    opacity: 0; visibility: hidden;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1; visibility: visible;
  }
  100% {
    opacity: 0; visibility: hidden;
  }
}

@-webkit-keyframes slide {
  to {
    -webkit-transform: translate(var(--x, 0), var(--y, 0));
    transform: translate(var(--x, 0), var(--y, 0));
  }
}

@keyframes slide {
  to {
    -webkit-transform: translate(var(--x, 0), var(--y, 0));
    transform: translate(var(--x, 0), var(--y, 0));
  }
}

:root {
  --plyr-color-main: #992C2C;

  --banner-height: 4.629630vh;
}

* { box-sizing: inherit; }

html { line-height: 1.5; box-sizing: border-box; }

html, body { -webkit-overflow-scrolling: touch; touch-action: pan-y; }

body { 
  letter-spacing: 1.5px;
  overflow-x: hidden; -webkit-tap-highlight-color: transparent;
  font-family: "FangZhengSuXinShiLiuKaiJianTi", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

ul, ol {list-style: none; }

a { text-decoration: none; }

.overflow-hidden { overflow: hidden; }

[aspect-ratio] { position: relative; }

[aspect-ratio]::before { content: ""; display: block; margin-left: -1px; width: 1px; height: 0; }

[aspect-ratio-content] {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[aspect-ratio-content], [aspect-ratio-content] > img, [aspect-ratio-content] > video { width: 100%; height: 100%; }

[aspect-ratio-content] > img, [aspect-ratio-content] > video {
  -o-object-cover: cover; -o-object-position: center;
  object-fit: cover; object-position: center;
}

[aspect-ratio]::before { padding-top: 56.261860%; }

[aspect-ratio="16/9"]::before { padding-top: 56.25%; }

[aspect-ratio="5/3"]::before { padding-top: 60%; }

[aspect-ratio="1/1"]::before { padding-top: 100%; }

.flex, .flex-center { display: flex; }

.align-center, .flex-center { align-items: center; }

.justify-center, .flex-center { justify-content: center; }

.flex-column { flex-direction: column; }

.flex-row-reverse { flex-direction: row-reverse; }

.fullpage {
  width: 100%; height: var(--html-viewport-height, 100vh); overflow: hidden;
}

#fullpage { z-index: 1; }

.page-wrapper {
  top: 0; left: 0; visibility: hidden; opacity: 0;
  -webkit-transition: visibility 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transition: visibility 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.foreword .page-wrapper.foreword { visibility: visible; opacity: 1; }

.wadang .page-wrapper.wadang { visibility: visible; opacity: 1; }

.page-wrapper.ware { visibility: visible; opacity: 1; }

.page-wrapper {
  position: absolute; width: 100%; height: 100%;
  background-image: url("../images/008.png"), url("../images/008.png"),
    url("../images/014.png"), url("../images/011.png");
  background-size: auto var(--banner-height), auto var(--banner-height), 100% 100%, 100% 100%;
  background-position: 0 0, 0 100%, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-blend-mode: luminosity;
  background-attachment: fixed;
}

.page-wrapper.ware {
  background-image: url("../images/008.png"), url("../images/008.png"),
    url("../images/015.png"), url("../images/014.png"), url("../images/011.png");
  background-size: auto var(--banner-height), auto var(--banner-height), auto 9.259259vh, 100% 100%, 100% 100%;
  background-position: 0 0, 0 100%, 0 96%, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, repeat-x, no-repeat, no-repeat;
}

.page-content { width: 100%; height: 100%; }

.page-title { position: fixed; top: 7.870370vh; left: 1.822917vw; height: 13.703704vh; z-index: 1024; }

.page-title > img { width: auto; height: 100%; }

.page-circle-link, .page-back-link {
  width: 3.125vw; height: 3.125vw; margin: 11.111111vh auto 0px; 
}

.page-back-link {
  position: absolute; top: 11.111111vh; right: 9.375vw;
  width: 2.8125vw; height: 2.8125vw; margin: 0;
}

.page-circle-link > a, .page-back-link > a {
  border-radius: 50%; overflow: hidden; position: relative;
  display: block; width: 100%; height: 100%;
  background-color: #992C2C;
  display: flex; align-items: center; justify-content: center;
  -webkit-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.page-circle-link > a, .page-back-link > a { cursor: pointer; }

.page-circle-link svg, .page-back-link svg { position: absolute; width: 1.666667vw; stroke: #FFFFFF; }

.page-circle-link svg:first-child,
.page-back-link svg:first-child {
  -webkit-transform: translateX(-150%); transform: translateX(-150%);
}

.page-circle-link:hover > a, .page-back-link:hover > a {
  -webkit-transform: scale(1.05); transform: scale(1.05);
}

.page-circle-link:hover svg:first-child,
.page-back-link:hover svg:first-child {
  -webkit-transition: transform 0.3s ease-in-out 0.1s;
  transition: transform 0.3s ease-in-out 0.1s;
  -webkit-transform: translate(0); transform: translate(0);
}

.page-circle-link:hover svg:last-child,
.page-back-link:hover svg:last-child {
  -webkit-transition: transform 0.3s ease-in-out 0.1s;
  transition: transform 0.3s ease-in-out 0.1s;
  -webkit-transform: translateX(150%); transform: translateX(150%);
}

.page-hexagon-title {
  opacity: 0; visibility: hidden; width: 4.6875vw;
  position: absolute; top: 29.629630vh; left: 11.458333vw;
}

.loaded .page-hexagon-title {
  -webkit-animation: fadeIn 1s ease-in-out forwards;
  animation: fadeIn 1s ease-in-out forwards;
}

.page-hexagon-title > img.horizontal { display: none; }

.page-hexagon-title > img.vertical { width: 100%; height: auto; }

.page-hexagon-title > span {
  position: absolute; width: 1.5em; color: #FFFFFF; font-size: 1.458333vw;
  -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;
}

.page-content-link {
  position: absolute; right: 6.25vw; bottom: 14.814815vh;
  font-size: 1.25vw; color: #000000;
}

.page-content-link svg { stroke: #992C2C; width: 1.666667vw; margin-left: .520833vw; }

.page-right-bottom-menu {
  visibility: hidden; opacity: 0;
  position: fixed; right: 33px; bottom: 50px; z-index: 1024;
  -webkit-transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.page-right-bottom-menu.show { visibility: visible; opacity: 1; }

.page-right-bottom-menu-item {
  display: block; width: 3.125vw; height: 3.125vw; cursor: pointer;
  -webkit-transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.page-right-bottom-menu-item.back-top { visibility: hidden; opacity: 0; }

.show-back-top .page-right-bottom-menu-item.back-top {
  visibility: visible; opacity: 1;
}

.page-right-bottom-menu-item + .page-right-bottom-menu-item { margin-top: 15px; }

.page-right-bottom-menu-item > img { width: 100%; height: 100%; }

@keyframes ani-mouse {
  0% { opacity: 1; top: 29%; }

  15% { opacity: 1; top: 50%; }

  50% { opacity: 0; top: 50%; }

  100% { opacity: 0; top: 29%; }
}

.scroll-btn {
  visibility: hidden;
  opacity: 0;
  display: block;
  position: absolute;
  right: 3vw;
  bottom: 3vw;
  text-align: center;
  transform: scale(.85);
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

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

.scroll-btn>* {
  display: inline-block;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  color: rgba(145, 48, 47, .8);
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
}

.scroll-btn .mouse {
  position: relative;
  display: block;
  width: 35px;
  height: 55px;
  margin: 0 auto 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(145, 48, 47, .8);
  border-radius: 23px;
}

.scroll-btn .mouse>* {
  position: absolute;
  display: block;
  top: 29%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: rgba(145, 48, 47, .8);
  border-radius: 50%;
  -webkit-animation: ani-mouse 2.5s linear infinite;
  -moz-animation: ani-mouse 2.5s linear infinite;
  animation: ani-mouse 2.5s linear infinite;
}

@media screen and (max-width: 768px) {
  :root {
    --banner-height: 20px;
  }

  .page-wrapper.ware {
    background-size: auto var(--banner-height), auto var(--banner-height), auto 40px, 100% 100%, 100% 100%;
    background-position: 0 0, 0 100%, 0 calc(100% - 20px), 0 0, 0 0;
  }

  .page-title { top: 30px; left: 10px; height: 75px; }

  .page-circle-link { margin: 30px auto 0px; }

  .page-circle-link, .page-back-link { width: 40px; height: 40px; }

  .page-circle-link svg, .page-back-link svg { width: 20px; }

  .page-back-link { top: 50px; right: 20px; }

  .page-hexagon-title {
    position: static; top: unset; left: unset; margin: 0px auto; width: 200px;
  }

  .page-hexagon-title > img.vertical { display: none; }

  .page-hexagon-title > img.horizontal { display: block; width: 100%; height: auto; }

  .page-hexagon-title > span {
    position: absolute; width: auto; color: #FFFFFF; font-size: 16px; 
    -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb;
  }

  .loaded .page-hexagon-title {
    -webkit-animation: fadeInBottom 1s ease-in-out forwards;
    animation: fadeInBottom 1s ease-in-out forwards;
  }

  .page-content-link { font-size: 16px; bottom: 50px; right: 20px; }

  .page-content-link svg { width: 20px; }

  .page-right-bottom-menu {
    right: 20px; bottom: 40px;
  }
  
  .page-right-bottom-menu-item {
    width: 36px;  height: 36px;
  }

  .scroll-btn {
    right: 12px; bottom: 30px; transform: scale(.65);
  }
}