@-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scale-circle {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

.position.page-content { height: var(--html-viewport-height); }

.schematic-diagram {
  position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  height: 49.351852vh; margin-top: -1vh; z-index: 1;
}

.schematic-diagram > img, .wa > img,
.page-menu-item > img, .page-menu-close > img { display: block; width: auto; height: 100%; }

.schematic-diagram > img, .page-hexagon-title {
  opacity: 0; visibility: hidden;
  transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
}

.page-hexagon-title {
  -webkit-animation: none !important; animation: none !important;
}

.line, .wa, .wa .wa-title, .decoration { position: absolute; }

.wa { z-index: -1; }

.left-line { left: 30.5%; bottom: 0%; width: 4%; }

.middle-line { left: 52%; bottom: -17%; width: 21%; }

.right-line { left: 63.5%; bottom: -4%; width: 7.5%; }

.left-line svg, .middle-line svg, .right-line svg, .wa .wa-link-btn,
.wa .wa-title, .left-wadang > img, .middle-banwa > img, .right-tongwa > img {
  opacity: 0; visibility: hidden;
}

.left-wadang { height: 16.55%; left: 21.5%; bottom: -17%; cursor: pointer; }

.middle-banwa { height: 12.2%; left: 75%; bottom: -19%; }

.right-tongwa { height: 12.45%; left: 72%; bottom: 1%; }

.wa-title-circle {
  position: absolute;
  left: 0%; top: -16%;
  width: 12px; height: 12px;
}

.wa-title-circle::before, .wa-title-circle::after {
  content: ""; position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background-color: #992C2C;
  -webkit-animation: scale-circle 1.5s linear infinite;
  animation: scale-circle 1.5s linear infinite;
} 

.wa-title-circle::after { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }

.wa-link-btn {
  position: absolute; bottom: -92%; left: 55%;
  width: 7.291667vw; font-size: 1.145833vw; color: #FFFFFF;
}

.wa-link-btn > img { width: 100%; height: auto; }

.wa-link-btn > span { position: absolute; }

body:not(.played) .active .left-line svg,
body:not(.played) .active .middle-line svg,
body:not(.played) .active .right-line svg {
  stroke-dasharray: 500; stroke-dashoffset: 500;
  opacity: 1; visibility: visible;
  -webkit-animation: strokeAnimation 1s ease-in-out 5s forwards;
  animation: strokeAnimation 1s ease-in-out 5s forwards;
}

body:not(.played) .active .middle-line svg { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; }

body:not(.played) .active .right-line svg { -webkit-animation-delay: 2s; animation-delay: 2s; }

.active .middle-banwa > img, .active .right-tongwa > img {
  -webkit-animation: fadeIn 1s ease-in-out 5.5s forwards;
  animation: fadeIn 1s ease-in-out 5.5s forwards;
}

.active .middle-banwa > img { -webkit-animation-delay: 4s; animation-delay: 4s; }

.active .right-tongwa > img { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }

.wa .wa-title { font-size: 1.666667vw; white-space: nowrap; }

.active .wa .wa-title {
  -webkit-animation: fadeIn 1s ease-in-out 6s forwards;
  animation: fadeIn 1s ease-in-out 6s forwards;
}

.active .wa .wa-link-btn {
  -webkit-animation: fadeIn 1s ease-in-out 6.5s forwards;
  animation: fadeIn 1s ease-in-out 6.5s forwards;
}

.active .wa.middle-banwa .wa-title { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; }

.active .wa.right-tongwa .wa-title { -webkit-animation-delay: 3s; animation-delay: 3s; }

.loaded.played .wa .wa-title,
.loaded.played .wa > img,
.loaded.played .schematic-diagram > img,
.loaded.played .wa .wa-link-btn {
  visibility: hidden; opacity: 0;
  transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
}

.active .schematic-diagram > img,
.active .page-hexagon-title,
.loaded.played .active .wa .wa-title,
.loaded.played .active .wa > img,
.loaded.played .active .schematic-diagram > img,
.loaded.played .active .wa .wa-link-btn {
  -webkit-animation: none !important; animation: none !important;
  transition: visibility 1s ease-in-out 0.7s, opacity 1s ease-in-out 0.7s;
  visibility: visible; opacity: 1;
}

.loaded.played .active .left-line svg,
.loaded.played .active .middle-line svg,
.loaded.played .active .right-line svg {
  stroke-dasharray: 0; stroke-dashoffset: 0; display: block;
  -webkit-animation: fadeIn 1s ease-in-out 0.7s forwards;
  animation: fadeIn 1s ease-in-out 0.7s forwards;
}

.loaded.played .active .schematic-diagram > img, .loaded.played .wa .wa-link-btn,
.loaded.played .active .wa .wa-title, .loaded.played .active .left-wadang > img, .loaded.played .active .middle-banwa > img, .loaded.played .active .right-tongwa > img {
  opacity: 1; visibility: visible;
}

.active .left-wadang > img {
  -webkit-animation: fadeIn 1s ease-in-out 5.5s forwards,
    pulsate-bck 1s infinite ease-in-out 6.5s;
  animation: fadeIn 1s ease-in-out 5.5s forwards,
    pulsate-bck 1s infinite ease-in-out 6.5s;
}

.loaded.played .active .left-wadang > img {
  -webkit-animation: pulsate-bck 1s infinite ease-in-out !important;
  animation: pulsate-bck 1s infinite ease-in-out !important;
}

.wa.left-wadang .wa-title { color: #992C2C; left: 55%; bottom: -35%; }

.wa.middle-banwa .wa-title { left: 90%; bottom: -25%; }

.wa.right-tongwa .wa-title { left: 85%; bottom: -25%; }

.page-menu {
  visibility: hidden; opacity: 0;
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; z-index: 1024;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
  transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
}

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

.page-menu-close {
  position: absolute; top: 5.555556vh; right: 3.125vw;
  height: 6.481481vh; cursor: pointer;
}

.page-menu-close > span {
  position: absolute; font-size: 1.25vw; color: #FFFFFF;
}

.page-menu-item {
  position: relative; display: block; height: 65.462963vh;
  -webkit-transition: box-shadow 0.2s ease-in-out;
  visibility: hidden; opacity: 0;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out,
    visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
}

.page-menu.show .page-menu-item {
  visibility: visible; opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.page-menu.show .page-menu-item:hover {
  -webkit-transform: translateY(-10px) scale(1.02);
  transform: translateY(-10px) scale(1.02);
}

.page-menu-item:hover {
  box-shadow: 0px 1px 29px rgba(255, 255, 255, 0.37);
}

.page-menu-item + .page-menu-item { margin-left: 3.125vw; }

.page-menu-content {
  position: absolute; top: 10px; left: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
  border: 1px solid #E8B37B;
}

.page-menu-content .decoration {
  width: 20px; height: 20px;
  background: url("../images/019.png") center / cover;
}

.page-menu-content .left-top-decoration,
.page-menu-content .left-bottom-decoration { left: 10px; }

.page-menu-content .right-top-decoration,
.page-menu-content .right-bottom-decoration { right: 10px; }

.page-menu-content .left-top-decoration,
.page-menu-content .right-top-decoration { top: 10px; }

.page-menu-content .left-bottom-decoration,
.page-menu-content .right-bottom-decoration { bottom: 10px; }

.page-menu-content .right-top-decoration {
  -webkit-transform: rotate(90deg); transform: rotate(90deg);
}

.page-menu-content .right-bottom-decoration {
  -webkit-transform: rotate(-180deg); transform: rotate(-180deg);
}

.page-menu-content .left-bottom-decoration {
  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}

.page-menu-content .page-menu-title {
  position: absolute; top: 6.481481vh; left: 2.604167vw;
  color: #FFFFFF; font-size: 1.666667vw;
  -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;
}

.page-menu-content .page-menu-link {
  position: absolute; left: 2.604167vw; bottom: 4.629630vh;
  color: #FFFFFF; font-size: 1.458333vw;
}

.page-menu-content .page-menu-link svg {
  stroke: #FFFFFF; width: 1.302083vw; margin-left: .260417vw;
}

.navbar {
  visibility: hidden; opacity: 0; padding: 0;
  position: fixed; left: 10vw; top: 50%; transform: translateY(-50%); 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;
}

.navbar.show { visibility: visible; opacity: 1; }

.navbar .navbar-item { position: relative; overflow: hidden; cursor: pointer; }

.navbar .navbar-item::before {
  content: ""; position: absolute; left: 50%; bottom: 16px;
  width: 0px; height: 20vh; border-right: 1px dashed #992C2C;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
}

.navbar .navbar-item .navbar-circle {
  width: 16px; height: 16px;
  position: relative; border-radius: 50%;
  border: 1px solid #992C2C;
}

.navbar .navbar-item .navbar-circle::before {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border: 1px solid #992C2C;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.navbar .navbar-item.active .navbar-circle::before {
  background-color: #992C2C;
}

.navbar .navbar-item + .navbar-item {
  padding-top: 3.240741vh;
}

@media screen and (max-width: 1400px) {
  .left-wadang .click-tips-circle {
    width: 10px; height: 10px;
    -webkit-transform: translate(-100%, -10%);
    transform: translate(-100%, -10%);
  }

  .wa-link-btn {
    position: absolute; bottom: -100%; left: 55%;
  }
}

@media screen and (max-width: 768px) {
  .left-wadang .click-tips-circle { width: 8px; height: 8px; left: 10%; top: -10%; }

  .position.page-content {
    flex-direction: column; align-items: flex-start; padding-bottom: 20%;
  }

  .schematic-diagram {
    width: calc(100% - 24px); height: auto;
    position: relative; top: 0; left: 0; margin: 60px auto 0px;
    -webkit-transform: translate(0, 0); transform: translate(0, 0);
  }

  .left-wadang { height: 40px; left: 18.5%; bottom: -22%; }

  .middle-banwa { height: 30px; left: 65%; bottom: -30%; }

  .right-tongwa { height: 35px; left: 75%; bottom: 0%; }

  .wa .wa-title { font-size: 16px; }

  .page-menu-wrapper { justify-content: center; }

  .page-menu-close { width: 100px; }

  .page-menu-item { width: 45%; height: auto; }

  .page-menu-content .decoration { width: 12px; height: 12px; }

  .page-menu-content .left-top-decoration,
  .page-menu-content .left-bottom-decoration { left: 5px; }

  .page-menu-content .right-top-decoration,
  .page-menu-content .right-bottom-decoration { right: 5px; }

  .page-menu-content .left-top-decoration,
  .page-menu-content .right-top-decoration { top: 5px; }

  .page-menu-content .left-bottom-decoration,
  .page-menu-content .right-bottom-decoration { bottom: 5px; }

  .page-menu-content .page-menu-title { top: 25px; left: 10px; font-size: 14px; }

  .page-menu-content .page-menu-link {
    font-size: 14px; left: unset; right: 10px; bottom: 20px;
  }

  .page-menu-close > span { font-size: 16px; }

  .wa-link-btn {
    position: absolute; bottom: -100%; left: 55%; width: 85px; font-size: 14px;
  }

  .schematic-diagram > img, .page-menu-item > img, .page-menu-close > img { width: 100%; height: auto; } 

  .navbar { left: 20px; }

  .navbar .navbar-item .navbar-circle {
    width: 12px; height: 12px;
  }

  .navbar .navbar-item::before { bottom: 12px; }
  
  .navbar .navbar-item .navbar-circle::before {
    width: 6px; height: 6px;
  }

  .wa-title-circle { left: -10%; top: -28%; }

  .wa.left-wadang .wa-title { bottom: -38%; }
}