.wadang.page-wrapper {
  background-image: url("../images/008.png"), url("../images/008.png"), url("../images/031.png"), url("../images/011.png");
  background-size: auto var(--banner-height), auto var(--banner-height), 100% 100%, 100% 100%; z-index: 1;
  background-position: 0 0, 0 100%, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
}

.wadang-list { padding: 20vh 0px; height: calc(100% - (var(--banner-height) * 2)); overflow-y: auto; }

.wadang-list::-webkit-scrollbar { width: 0px; }

.wadang-list::-webkit-scrollbar-track { background: transparent; }

.wadang-list::-webkit-scrollbar-thumb { background: transparent; }

@supports not selector(::-webkit-scrollbar) {
  .wadang-list { scrollbar-color: transparent transparent; }
}

.wadang-item + .wadang-item { margin-top: 6vh; }

.wadang-item .section-inner { margin-left: 10vw; }

.wadang-item-left { position: relative; width: 47.916667vw; }

.wadang-item-left > img {
  pointer-events: none;
  position: absolute; top: 0; left: 0; width: 15.625vw;
  -webkit-transform: translate(-21%, -56%); transform: translate(-21%, -56%);
}

.wadang-item-title { font-size: 1.875vw; color: #992C2C; }

.wadang-item-desc { font-size: 1.458333vw; text-indent: 2em; }

.wadang-item-right { position: relative; width: 20.833333vw; z-index: 1; }

.wadang-item-right [aspect-ratio-content] { padding: 10px; }

.wadang-item.right .wadang-item-right { margin: 0px 0px 0px 3.125vw; }

.wadang-item.left .section-inner { flex-direction: row-reverse; }

.wadang-item.left .wadang-item-right { margin: 0px 3.125vw 0px 0px; }

.wadang-item-right [aspect-ratio-content] {
  -webkit-perspective: 1000px; perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.wadang-image-wrapper {
  position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.wadang-item-right .wadang-original,
.wadang-item-right .wadang-rubbing {
  position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.wadang-item-right .wadang-rubbing, [aspect-ratio].show .wadang-image-wrapper {
  -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}

@media screen and (hover: hover) {
  .wadang-item-right [aspect-ratio]:hover .wadang-image-wrapper {
    -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
  }
}

.wadang-item-right .wadang-original > img,
.wadang-item-right .wadang-rubbing > img { width: 100%; height: 100%; }

.wadang-item-right .wadang-original > img {
  -o-object-fit: contain; object-fit: contain;
  -o-object-position: center; object-position: center;
}

.wadang-item-circle {
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid #992C2C;
}

.wadang-item .rubbing { margin-top: 1.041667vw; font-size: 1.25vw; color: #992C2C; cursor: pointer; }

.wadang-list .page-circle-link { margin: 0px 0px 0px .520833vw; width: 2.34375vw; height: 2.34375vw; }

.wadang-list .page-circle-link svg { width: 1.145833vw; }

.rubbing:hover a {
  -webkit-transform: scale(1.05); transform: scale(1.05);
}

.rubbing: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);
}

.rubbing: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%);
}

.preview-wrapper {
  position: fixed; top: 0; left: 0; z-index: 1024;
  width: 100%; height: var(--html-viewport-height);
  background-color: #5E5E5E; 
}

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

.preview-close-btn > img { width: auto; height: 100%; }

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

.preview-toggle-menu {
  position: absolute; bottom: 12%; left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.preview-toggle-menu-item {
  padding: 5px 15px; border-radius: 99vw;
  font-size: 20px; cursor: pointer; color: #FFFFFF; 
}

.preview-toggle-menu-item.active { background-color: #992C2C; }

.preview-toggle-menu-item + .preview-toggle-menu-item { margin-left: 10px; }

.preview-img { position: absolute; max-height: 55%; max-width: calc(100% - 24px); display: none; }

.preview-img.active { display: block; }

@media screen and (max-width: 768px) {
  .wadang-list { padding: 13vh 0px; }

  .preview-close-btn > span { font-size: 18px; }

  .wadang-item .section-inner {
    flex-direction: column-reverse;
    width: 70%; margin-left: auto; margin-right: auto;
  }

  .wadang-item.left .section-inner { flex-direction: column-reverse; }

  .wadang-item-left { margin-top: 30px; }

  .wadang-item-left, .wadang-item-right { width: 100%; }

  .wadang-item-title { font-size: 20px; }

  .wadang-item-desc { font-size: 16px; }

  .wadang-item.left .wadang-item-right { margin: 0; }

  .wadang-item-right [aspect-ratio] { width: 75%; margin: 0 auto; }

  .wadang-item .rubbing { font-size: 18px; margin-top: 10px; }

  .wadang-list .page-circle-link { width: 22px; height: 22px; margin: 0px 0px 0px 10px; }

  .wadang-list .page-circle-link svg { width: 10px; }

  .wadang-item-left > img {
     width: 100px; transform: translate(0px, -56%);
  }
}