@charset "UTF-8";
@-webkit-keyframes playing {
  25% {
    background-image: url(../images/voice1.png);
  }
  75% {
    background-image: url(../images/voice2.png);
  }
  100% {
    background-image: url(../images/voice3.png);
  }
}
@-moz-keyframes playing {
  25% {
    background-image: url(../images/voice1.png);
  }
  75% {
    background-image: url(../images/voice2.png);
  }
  100% {
    background-image: url(../images/voice3.png);
  }
}
@-ms-keyframes playing {
  25% {
    background-image: url(../images/voice1.png);
  }
  75% {
    background-image: url(../images/voice2.png);
  }
  100% {
    background-image: url(../images/voice3.png);
  }
}
@-o-keyframes playing {
  25% {
    background-image: url(../images/voice1.png);
  }
  75% {
    background-image: url(../images/voice2.png);
  }
  100% {
    background-image: url(../images/voice3.png);
  }
}
@keyframes playing {
  25% {
    background-image: url(../images/voice1.png);
  }
  75% {
    background-image: url(../images/voice2.png);
  }
  100% {
    background-image: url(../images/voice3.png);
  }
}
.playing {
  -webkit-animation: playing 1s step-start infinite alternate;
  -moz-animation: playing 1s step-start infinite alternate;
  -ms-animation: playing 1s step-start infinite alternate;
  -o-animation: playing 1s step-start infinite alternate;
  animation: playing 1s step-start infinite alternate;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes clicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes clicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes clicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes clicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.clicker {
  -webkit-animation: clicker 2s ease infinite;
  -moz-animation: clicker 2s ease infinite;
  -ms-animation: clicker 2s ease infinite;
  -o-animation: clicker 2s ease infinite;
  animation: clicker 2s ease infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes twinkling {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@-moz-keyframes twinkling {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@-ms-keyframes twinkling {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@-o-keyframes twinkling {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes twinkling {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
.twinkling {
  -webkit-animation: twinkling 3s ease infinite;
  -moz-animation: twinkling 3s ease infinite;
  -ms-animation: twinkling 3s ease infinite;
  -o-animation: twinkling 3s ease infinite;
  animation: twinkling 3s ease infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes hint {
  0% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@-moz-keyframes hint {
  0% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@-ms-keyframes hint {
  0% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@-o-keyframes hint {
  0% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes hint {
  0% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
.hint {
  -webkit-animation: hint 2s ease infinite;
  -moz-animation: hint 2s ease infinite;
  -ms-animation: hint 2s ease infinite;
  -o-animation: hint 2s ease infinite;
  animation: hint 2s ease infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 0.3%;
  }
  100% {
    margin-top: 0;
  }
}
@-moz-keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 0.3%;
  }
  100% {
    margin-top: 0;
  }
}
@-ms-keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 0.3%;
  }
  100% {
    margin-top: 0;
  }
}
@-o-keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 0.3%;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 0.3%;
  }
  100% {
    margin-top: 0;
  }
}
.upDown {
  -webkit-animation: upDown 3s ease infinite;
  -moz-animation: upDown 3s ease infinite;
  -ms-animation: upDown 3s ease infinite;
  -o-animation: upDown 3s ease infinite;
  animation: upDown 3s ease infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "tauhu-oo", "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-size: 16px;
  font-weight: 300;
}

body {
  background-color: #000000;
}

a {
  cursor: pointer;
  text-decoration: none;
}

.penetrable, .penetrable * {
  pointer-events: none;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.center {
  text-align: center;
}

.clear {
  clear: both;
}

.hand {
  cursor: pointer;
}

.zoom {
  cursor: url(../images/icons/zoom.png), zoom-in;
}

.dragIcon {
  position: absolute;
  display: inline-block;
  background-size: 100%;
  background-repeat: no-repeat;
}

.dragIcon {
  width: 5.88542%;
  height: 14.35185%;
  background-image: url(../images/icons/drag.gif);
  top: 45%;
  left: 47%;
}

.grab {
  cursor: grab;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A") 12 8, default;
}

.grabbing {
  cursor: grabbing;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A") 12 8, default;
}

.clicker {
  width: 2.39583%;
  height: 2.5%;
  background-image: url(../images/more/click.png);
}

.srt {
  display: none;
}

.hide {
  opacity: 0;
}

#do {
  display: none;
}

#caption {
  display: none;
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 100%;
  padding: 1% 7%;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 1px 2px 2px #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000, 1px 0px 0 #000000, 0px 1px 0 #000000, -1px 0px 0 #000000, 0px -1px 0 #000000;
  background-image: url(../images/caption.png);
  background-repeat: repeat-y;
  background-size: 100%;
}

#caption:empty {
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
}
#container #main {
  top: 0;
  left: 0;
  position: absolute;
}
#container #main a.voice {
  position: absolute;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-image: url(../images/voice3.png);
  transition: 0.3s;
}
#container #main a.voice:hover, #container #main a.voice.playing {
  background-size: 110%;
}
#container #main a.voice.loading {
  background-image: url(../images/loading.svg);
  background-size: 70%;
}

#controller {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.5%;
  overflow: hidden;
  top: 0;
  left: 0;
}
#controller div, #controller div * {
  pointer-events: all;
}
#controller div:not(.loading) {
  cursor: pointer;
}
#controller .btn, #controller #closeMore {
  position: absolute;
  display: inline-block;
}
#controller .btn img, #controller #closeMore img {
  width: auto;
  height: 100%;
}
#controller #more, #controller .btn {
  position: absolute;
  display: inline-block;
}
#controller #more img, #controller .btn img {
  width: auto;
  height: 100%;
}
#controller #more {
  background-image: url(../images/more.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: none;
  left: -13%;
  width: 5.36458%;
  height: 6.94444%;
  top: 55.55556%;
}
#controller div.btn {
  width: 5.20833%;
  height: 9.25926%;
  left: 93.75%;
}
#controller div.btn:not(.loading) img {
  opacity: 0.8;
  transition: all 1s;
}
#controller div.btn:not(.loading) img:hover {
  opacity: 1;
}
#controller div.loading img {
  opacity: 0.1;
}
#controller #closeMore, #controller #prevStage, #controller #nextStage {
  opacity: 0;
  transition: opacity 0.5s;
}
#controller #closeMore {
  width: 6.35417%;
  height: 11.2963%;
  top: 78.98148%;
  left: 89.63542%;
  background: url(../images/icons/close.png) no-repeat;
  background-size: cover;
  cursor: pointer;
}
#controller #prevStage {
  left: 1.04167%;
}
#controller #nextStage {
  left: 93.75%;
}
#controller div.row1 {
  top: 1.85185%;
}
#controller div.row2 {
  top: 14%;
}
#controller div.row3 {
  top: 26%;
}
#controller div.row4 {
  top: 39%;
}
#controller div.row5 {
  top: 52%;
}
#controller div.row7 {
  top: 80%;
}
#controller #stage_loading {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  cursor: wait;
  border-radius: 13px;
  z-index: 15000;
}
#controller .stages, #controller .stages * {
  pointer-events: all;
}
#controller .stages {
  position: absolute;
  right: 7%;
  top: 1.5%;
  display: none;
  width: 200px;
  max-width: 68vw;
  margin-top: 2px;
  padding-top: 30px;
  background-color: white;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;
  -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px transparent;
  -moz-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px transparent;
  -o-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px transparent;
  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px transparent;
}
#controller .stages .cont, #controller .stages .bottom {
  display: inline-block;
  width: 100%;
}
#controller .stages .cont {
  -webkit-box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4), inset 0 -7px 9px -7px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4), inset 0 -7px 9px -7px rgba(0, 0, 0, 0.4);
  -o-box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4), inset 0 -7px 9px -7px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4), inset 0 -7px 9px -7px rgba(0, 0, 0, 0.4);
  max-height: calc(80vh - 60px);
  padding: 20px;
  overflow: hidden;
}
#controller .stages .cont dl[data-loaded=false] {
  cursor: wait;
}
#controller .stages .cont dl {
  display: flex;
  margin-bottom: 10px;
  align-items: bottom;
  font-weight: bold;
  font-size: 18px;
  color: #aaa;
  cursor: pointer;
}
#controller .stages .cont dl dd {
  position: relative;
  width: 100%;
  margin-right: 1%;
}
#controller .stages .cont dl dd img {
  max-width: 100%;
}
#controller .stages .cont dl dd div {
  display: table;
  position: absolute;
  top: 0;
  height: calc(100% - 3px);
  width: 100%;
}
#controller .stages .cont dl dd div.playing {
  background: url(../images/icons/play.png) no-repeat 2% 93%;
  -webkit-animation: twinkling 2s ease infinite;
  -moz-animation: twinkling 2s ease infinite;
  -ms-animation: twinkling 2s ease infinite;
  -o-animation: twinkling 2s ease infinite;
  animation: twinkling 2s ease infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}
#controller .stages .cont dl dd div.loading {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
}
#controller .stages .cont dl dd div.loading span:first-child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  opacity: 0.3;
}
#controller .stages .cont dl dd div.loading span:first-child span {
  display: block;
  text-align: center;
  border: 1px solid #cccccc;
  color: #eee;
  width: 97%;
  margin: 5px auto 0 auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-text-shadow: 0px 0px 5px #000000;
  -moz-text-shadow: 0px 0px 5px #000000;
  -o-text-shadow: 0px 0px 5px #000000;
  text-shadow: 0px 0px 5px #000000;
}
#controller .stages .bottom {
  height: 20px;
  text-align: center;
}
#controller .stages .bottom img {
  margin-top: 8px;
  max-width: 84%;
}

#loading, #loading div.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#loading {
  position: absolute;
}
#loading .wrapper {
  position: relative;
}
#loading .wrapper img {
  width: 100%;
  height: auto;
}
#loading .wrapper span[data-id=subject], #loading .wrapper #loading_txt {
  position: absolute;
}
#loading .wrapper span[data-id=subject] {
  width: 33.85417%;
  top: 19.44444%;
  left: 33.07292%;
}
#loading .wrapper #loading_txt, #loading .wrapper #not_support {
  left: 50%;
  width: 100%;
  margin-left: -50%;
  top: 70%;
  text-align: center;
  font-weight: 500;
  color: #fff;
  font-family: "微軟正黑體";
  font-size: 3vw;
  display: none;
}
#loading .wrapper #loading_txt span, #loading .wrapper #not_support span {
  display: inline-block;
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px;
  margin-right: 0.5vw;
}
#loading .wrapper #loading_percent {
  position: absolute;
  top: 83%;
  left: 50%;
  width: 30%;
  height: 3%;
  margin-left: -15%;
  border: 2px solid white;
  display: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#loading .wrapper #loading_percent span {
  position: absolute;
  display: inline-block;
  width: 0%;
  height: 100%;
  background-color: white;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

div.stage, div.wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div.more {
  top: 0;
  left: 0;
}

div.stage {
  position: absolute;
}
div.stage div.wrapper {
  position: relative;
}
div.stage div.wrapper span, div.stage div.wrapper div.bg {
  position: absolute;
}
div.stage div.wrapper span {
  display: inline-block;
}
div.stage div.wrapper span img {
  width: 100%;
  height: auto;
}
div.stage div.wrapper span svg {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
div.stage div.wrapper span[data-id="rain"] div {
  position: absolute;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.1);
  width: 0.3%;
  height: 10%;
  border-radius: 25%;
  transform: rotate(30deg);
}

#guide span[data-id="btn-start"] {
  width: 9.375%;
  top: 63.98148%;
  left: 76.61458%;
  transition: 0.5s;
  transform: scale(1);
}
#guide span[data-id="btn-start"]:hover {
  transform: scale(1.05);
}

#cover span[data-id="start"] {
  width: 27.86458%;
  top: 66.94444%;
  left: 36.04167%;
  transition: 0.5s;
  transform: scale(1);
}
#cover span[data-id="start"]:hover {
  transform: scale(1.05);
}

#stage01 span[data-id="role"] {
  width: 32.23958%;
  top: 65.18519%;
  left: -14.11458%;
  left: 6.25%;
}
#stage01 span.bike {
  width: 58.90625%;
  top: 0%;
  left: -58.90625%;
}
#stage01 .bg2 {
  width: 100%;
  height: 200%;
}
#stage01 .bg2 span[data-id="car"] {
  width: 18.17708%;
  top: 50%;
  left: -18.22917%;
  top: 62.03704%;
  left: 37.76042%;
}

#stage02 span.deer {
  width: 36.5625%;
  top: -7.68519%;
  left: 18.59375%;
}
#stage02 span.cat {
  width: 28.54167%;
  top: 24.90741%;
  left: 58.69792%;
}
#stage02 span.monkey {
  width: 34.01042%;
  top: -7.68519%;
  left: 79.58333%;
}
#stage02 span[data-id="spin"] {
  width: 26.97917%;
  top: -47.22222%;
  left: 39.0625%;
}
#stage02 span[data-id="drop"] {
  width: 53.28125%;
  top: -86.57407%;
  left: 58.33333%;
}
#stage02 span[data-id="lightning"] {
  background-color: #ffffff;
}

#stage03 span[data-id="cloud1"] {
  width: 118.85417%;
  top: -1.94444%;
  left: 0%;
}
#stage03 span[data-id="cloud2"] {
  width: 87.86458%;
  top: 2.03704%;
  left: 21.04167%;
}
#stage03 span[data-id="deer"] {
  width: 10.10417%;
  top: -25%;
  left: 83.85417%;
}
#stage03 span[data-id="spin"] {
  width: 14.89583%;
  top: -25.92593%;
  left: 46.09375%;
}
#stage03 span[data-id="house"] {
  width: 35.10417%;
  top: 47.22222%;
  left: 64.84375%;
}
#stage03 span.front {
  top: 34.62963%;
  left: 0%;
}
#stage03 span[data-id="monkey"] {
  width: 21.92708%;
  top: 40.74074%;
  left: 23.75%;
}
#stage03 span[data-id="role"] {
  width: 37.86458%;
  top: 0%;
  left: 100%;
  left: 62.13542%;
}
#stage03 span[data-id="rainy"] {
  width: 92.08333%;
  top: 7.96296%;
  left: 4.21875%;
}

#stage04 span[data-id="roll"] {
  width: 244.16667%;
  left: -144.16667%;
}
#stage04 span.role {
  width: 52.55208%;
  top: 20.74074%;
  left: 90.67708%;
  width: 39.6875%;
  top: 41.94444%;
  left: -39.6875%;
}
#stage04 span[data-id="house"] {
  width: 60.52083%;
  top: 22.03704%;
  left: -60.52083%;
}
#stage04 span[data-id="cat"] {
  width: 18.80208%;
  top: 63.7037%;
  left: 4.73958%;
}
#stage04 span[data-id="monkey"] {
  width: 24.73958%;
  top: 3.88889%;
  left: 24.89583%;
}
#stage04 span[data-id="deer"] {
  width: 28.33333%;
  top: 42.5%;
  left: 59.375%;
}

#stage05 span[data-id="buddha"] {
  width: 29.0625%;
  top: 17.87037%;
  left: 11.92708%;
}
#stage05 span.cat {
  width: 41.35417%;
  height: 39.07407%;
  top: 62.68519%;
  left: 0%;
}
#stage05 span[data-id="cloud"] {
  width: 32.70833%;
  top: 64.72222%;
  left: 0%;
}
#stage05 span.dmh {
  width: 40.78125%;
  top: 22.77778%;
  left: 59.21875%;
}
#stage05 span[data-id="fog1"] {
  width: 97.39583%;
  top: 26.38889%;
  left: -17.70833%;
  top: 11.2963%;
  left: 0%;
}
#stage05 span[data-id="fog2"] {
  width: 47.03125%;
  top: 83.42593%;
  left: 52.96875%;
  left: 100%;
}
#stage05 span[data-id="dot1"] {
  width: 14.53125%;
  top: 25.46296%;
  left: 8.33333%;
}
#stage05 span[data-id="dot2"] {
  width: 24.79167%;
  top: 0%;
  left: 21.97917%;
}
#stage05 span[data-id="dot3"] {
  width: 24.375%;
  top: 61.57407%;
  left: 29.89583%;
}
#stage05 span[data-id="dot4"] {
  width: 8.90625%;
  top: 7.68519%;
  left: 3.28125%;
}

#stage06 span[data-id="top"] {
  width: 142.44792%;
}
#stage06 span[data-id="btm"] {
  top: 100%;
  left: 0;
}
#stage06 span[data-id="cloud1"] {
  width: 62.44792%;
  top: 24.90741%;
  left: -60.46875%;
}
#stage06 span[data-id="cloud2"] {
  width: 73.48958%;
  top: 52.77778%;
  left: 100%;
}
#stage06 span.card {
  width: 28.02083%;
  height: 76.2037%;
  top: 19.53704%;
  left: 34.63542%;
}
#stage06 span.card_btn {
  cursor: pointer;
}
#stage06 span.fly1 {
  width: 10.46875%;
  top: 23.42593%;
  left: -11.14583%;
}
#stage06 span.fly2 {
  width: 22.08333%;
  top: 0%;
  left: -33.22917%;
}
#stage06 span.fly3 {
  width: 5.83333%;
  top: 12.77778%;
  left: -16.92708%;
}
#stage06 span.fly4 {
  width: 9.32292%;
  top: 23.42593%;
  left: -26.40625%;
}
#stage06 span.fly5 {
  width: 10.52083%;
  top: 0%;
  left: -33.02083%;
}
#stage06 span.fly6 {
  width: 10.20833%;
  top: 9.81481%;
  left: -39.89583%;
}
#stage06 span.fly7 {
  width: 8.59375%;
  top: 5.55556%;
  left: -56.82292%;
}
#stage06 span[data-id="float1"] {
  width: 5.41667%;
  top: -13.88889%;
}
#stage06 span[data-id="float2"] {
  width: 4.27083%;
  top: -6.48148%;
}
#stage06 span[data-id="float3"] {
  width: 10.36458%;
  top: -23.14815%;
}
#stage06 span[data-id="float4"] {
  width: 4.42708%;
  left: -4.6875%;
}
#stage06 span[data-id="float5"] {
  width: 16.51042%;
  left: -16.66667%;
}
#stage06 span[data-id="float6"] {
  width: 6.30208%;
  left: 100%;
}
#stage06 span[data-id="float7"] {
  width: 6.25%;
  left: 100%;
}

#stage07 span[data-id="front1"] {
  width: 51.875%;
  top: 15.37037%;
  left: -6.92708%;
}
#stage07 span[data-id="front2"] {
  width: 42.08333%;
  top: 2.12963%;
  left: 57.91667%;
}
#stage07 span[data-id="bird1"] {
  width: 18.75%;
  top: 26.85185%;
  left: 20.41667%;
}
#stage07 span[data-id="bird2"] {
  width: 9.27083%;
  top: 5.74074%;
  left: 82.5%;
  top: -9.25926%;
  left: 100%;
}
#stage07 span[data-id="deer"] {
  width: 44.0625%;
  top: 0%;
  left: 55.72917%;
}
#stage07 span[data-id="cat"] {
  width: 18.48958%;
  top: 62.59259%;
  left: 31.71875%;
}
#stage07 span[data-id="butterfly"] {
  width: 25.83333%;
  top: -6.11111%;
  left: 100%;
}
#stage07 span[data-id="cloud0"] {
  width: 36.14583%;
  top: 0%;
  left: 58.75%;
}
#stage07 span[data-id="rock"] {
  width: 51.66667%;
  top: -18.98148%;
  left: 53.38542%;
}
#stage07 span[data-id="fog"] {
  width: 33.85417%;
  top: 11.38889%;
  left: 48.59375%;
}
#stage07 span.monkey1 {
  width: 56.09375%;
  top: -30.55556%;
  left: 100%;
}
#stage07 span[data-id="monkey2-cloud"] {
  width: 35.52083%;
  top: 55.64815%;
  left: 13.125%;
}
#stage07 span[data-id="monkey2"] {
  width: 38.48958%;
  top: 38.51852%;
  left: 32.60417%;
}

#stage08 span[data-id="cloth"] {
  top: 46.2963%;
  left: 0%;
}
#stage08 span[data-id="front"] {
  width: 45.10417%;
  top: 68.98148%;
  left: 46.875%;
}
#stage08 span[data-id="cloud-back"] {
  width: 100%;
  top: 28.14815%;
  left: 0%;
  top: -20.55556%;
}
#stage08 span[data-id="cloud1"] {
  width: 14.32292%;
  top: 56.48148%;
  left: 71.35417%;
  top: 51.2037%;
  left: 66.30208%;
}
#stage08 span[data-id="cloud2"] {
  width: 20.57292%;
  top: 100%;
  left: 83.07292%;
  top: 75.92593%;
  left: 77.34375%;
}
#stage08 span[data-id="cloud3"] {
  width: 35.98958%;
  top: 43.24074%;
  left: 51.61458%;
}
#stage08 span[data-id="cloud4"] {
  width: 36.04167%;
  top: 4.44444%;
  left: 2.39583%;
}
#stage08 span[data-id="bird1"] {
  width: 13.64583%;
  top: 92.59259%;
  left: 56.77083%;
}
#stage08 span[data-id="bird2"] {
  width: 19.16667%;
  top: 10.64815%;
  left: -19.27083%;
}
#stage08 span[data-id="cat1"] {
  width: 40.57292%;
  top: 100%;
  left: 67.70833%;
}
#stage08 span[data-id="cat2"] {
  width: 59.21875%;
  top: 21.2963%;
  left: 12.76042%;
}
#stage08 span[data-id="plate1"] {
  width: 26.40625%;
  top: 18.51852%;
  left: -31.25%;
}
#stage08 span[data-id="plate2"] {
  width: 68.07292%;
  top: 54.44444%;
  left: 0%;
}
#stage08 span[data-id="lotus1"] {
  width: 17.76042%;
  top: 100%;
  left: 41.14583%;
}
#stage08 span[data-id="lotus2"] {
  width: 11.71875%;
  top: 100%;
  left: 48.4375%;
}
#stage08 span[data-id="lotus3"] {
  width: 12.39583%;
  top: 100%;
  left: 40.10417%;
}
#stage08 span[data-id="lotus4"] {
  width: 7.13542%;
  top: 100%;
  left: 55.20833%;
}
#stage08 span[data-id="lotus5"] {
  width: 23.59375%;
  top: 29.53704%;
  left: 11.97917%;
}

#stage09 span[data-id="deer1"] {
  width: 25.83333%;
  top: 55%;
  left: 8.54167%;
}
#stage09 span[data-id="deer2"] {
  width: 26.45833%;
  top: 7.03704%;
  left: 44.01042%;
}
#stage09 span[data-id="deer3"] {
  width: 24.73958%;
  top: 42.77778%;
  left: 74.42708%;
}
#stage09 span.girls {
  width: 32.34375%;
  height: 31.38889%;
  top: 67.96296%;
  left: 7.76042%;
}
#stage09 span[data-id="bird"] {
  width: 8.07292%;
  top: -12.03704%;
  left: 3.90625%;
  top: 4.25926%;
  left: 11.35417%;
}
#stage09 span[data-id="cloud1"] {
  width: 55.98958%;
  top: 12.22222%;
  left: 0%;
}
#stage09 span[data-id="cloud2"] {
  width: 22.8125%;
  top: 1.85185%;
  left: 77.1875%;
}
#stage09 span[data-id="cloud3"] {
  width: 43.75%;
  top: 74.25926%;
  left: 63.07292%;
}
#stage09 span[data-id="tree1"] {
  width: 42.8125%;
  top: 2.31481%;
  left: 1.92708%;
}
#stage09 span[data-id="tree2"] {
  width: 43.33333%;
  top: 37.03704%;
  left: 44.94792%;
}
#stage09 span[data-id="tree3"] {
  width: 24.47917%;
  top: 74.81481%;
  left: 75.26042%;
}

#stage10 span[data-id="tree1"] {
  width: 62.91667%;
  top: -31.57407%;
  left: -30.3125%;
}
#stage10 span[data-id="tree2"] {
  width: 46.30208%;
  top: 65.37037%;
  left: 52.70833%;
}
#stage10 span[data-id="tree3"] {
  width: 28.64583%;
  top: 64.35185%;
  left: 17.08333%;
}
#stage10 span[data-id="tree4"] {
  width: 51.5625%;
  top: 2.96296%;
  left: 64.89583%;
}
#stage10 span[data-id="bird1"] {
  width: 10.72917%;
  top: 27.87037%;
  left: -10.78125%;
}
#stage10 span[data-id="bird2"] {
  width: 24.01042%;
  top: -30.37037%;
  left: 14.27083%;
}
#stage10 span[data-id="bird3"] {
  width: 9.21875%;
  top: 26.11111%;
  left: 100%;
}
#stage10 span[data-id="bird4"] {
  width: 8.85417%;
  top: 11.2037%;
  left: -8.85417%;
}
#stage10 span[data-id="black1"] {
  width: 45.36458%;
  top: 78.24074%;
  left: -45.625%;
}
#stage10 span[data-id="black2"] {
  width: 23.85417%;
  top: 100%;
  left: 83.33333%;
  top: 75.46296%;
  left: 77.08333%;
}
#stage10 span.bm {
  width: 66.19792%;
  top: -90.92593%;
  left: 93.90625%;
  top: 0%;
  left: 33.80208%;
}
#stage10 span[data-id="word1"] {
  width: 7.44792%;
  top: -47.96296%;
  left: 101.71875%;
  top: 43.42593%;
  left: 20%;
}
#stage10 span[data-id="word2"] {
  width: 40.10417%;
  top: -78.7037%;
  left: 101.30208%;
  top: 12.68519%;
  left: 19.58333%;
}
#stage10 span[data-id="word3"] {
  width: 40.78125%;
  top: -74.35185%;
  left: 112.08333%;
  top: 17.03704%;
  left: 30.36458%;
}
#stage10 span[data-id="word4"] {
  width: 41.35417%;
  top: -55.27778%;
  left: 125.15625%;
  top: 37.77778%;
  left: 43.4375%;
}
#stage10 span[data-id="word5"] {
  width: 40.625%;
  top: -57.40741%;
  left: 141.92708%;
  top: 33.98148%;
  left: 60.20833%;
}

#stage11 span[data-id="red"] {
  width: 233.69792%;
  top: 0%;
  left: -133.69792%;
}
#stage11 span[data-id="fold1"] {
  width: 26.04167%;
  top: 11.94444%;
  left: 7.65625%;
}
#stage11 span[data-id="fold2"] {
  width: 21.09375%;
  top: 62.59259%;
  left: 31.09375%;
}
#stage11 span[data-id="fold3"] {
  width: 24.58333%;
  top: 10.46296%;
  left: 68.33333%;
}
#stage11 span[data-id="black1"] {
  width: 44.0625%;
  top: 0%;
  left: 28.125%;
}
#stage11 span[data-id="black2"] {
  width: 23.75%;
  top: 61.2963%;
  left: 70.67708%;
}
#stage11 span[data-id="word1"] {
  width: 26.40625%;
  top: 31.48148%;
  left: 6.14583%;
}
#stage11 span[data-id="word2"] {
  width: 13.22917%;
  top: 0%;
  left: 27.65625%;
}
#stage11 span[data-id="word3"] {
  width: 13.75%;
  top: 37.22222%;
  left: 67.70833%;
}
#stage11 span[data-id="deer1"] {
  width: 12.86458%;
  top: 6.66667%;
  left: 13.17708%;
  top: 3.14815%;
  left: 9.84375%;
}
#stage11 span[data-id="deer2"] {
  width: 25.625%;
  top: 53.51852%;
  left: 30.3125%;
  top: 57.5%;
  left: 27.91667%;
}
#stage11 span[data-id="deer3"] {
  width: 21.92708%;
  top: 6.2037%;
  left: 59.27083%;
  left: 65.625%;
}
#stage11 span.deer4 {
  width: 65.67708%;
  top: 17.87037%;
  left: 5.98958%;
  left: 100%;
}
#stage11 span[data-id="tree0"] {
  width: 29.32292%;
}
#stage11 span[data-id="tree1"] {
  width: 49.21875%;
  top: 20.09259%;
  left: -25.26042%;
  left: -49.21875%;
}
#stage11 span[data-id="tree2"] {
  width: 36.30208%;
  top: 27.77778%;
  left: 22.60417%;
}
#stage11 span[data-id="tree3"] {
  width: 41.19792%;
  top: 70.74074%;
  left: 22.96875%;
}
#stage11 span[data-id="tree4"] {
  width: 11.82292%;
  top: 74.44444%;
  left: 13.90625%;
}
#stage11 span[data-id="tree5"] {
  width: 38.85417%;
  top: 23.98148%;
  left: 51.19792%;
}
#stage11 span[data-id="bird"] {
  width: 11.09375%;
  top: 55.18519%;
  left: 26.71875%;
}

#stage12 span[data-id="tree1"] {
  width: 27.13542%;
  top: 0%;
  left: 0%;
}
#stage12 span[data-id="tree2"] {
  width: 57.91667%;
  top: 75.27778%;
  left: 0%;
}
#stage12 span[data-id="tree3"] {
  width: 30.72917%;
  top: 3.88889%;
  left: 77.91667%;
  left: 69.27083%;
}
#stage12 span[data-id="tree3-shadow"] {
  width: 43.38542%;
  top: 1.38889%;
  left: 65.26042%;
  left: 56.61458%;
}
#stage12 span[data-id="cloud"] {
  width: 120.57292%;
  top: 20.18519%;
  left: 2.70833%;
  left: -20.41667%;
}
#stage12 span[data-id="cat"] {
  width: 39.27083%;
  left: 11.30208%;
}
#stage12 span[data-id="bird"] {
  width: 10.20833%;
  top: -24.90741%;
  left: 23.38542%;
  top: 33.14815%;
  left: 32.86458%;
}
#stage12 span[data-id="fly1"] {
  width: 6.45833%;
  top: 14.44444%;
  left: 65.36458%;
}
#stage12 span[data-id="fly2"] {
  width: 6.19792%;
  top: 26.75926%;
  left: 60.57292%;
}
#stage12 span[data-id="fly3"] {
  width: 8.48958%;
  top: 20.09259%;
  left: 51.30208%;
}
#stage12 span.monkey {
  width: 32.55208%;
  top: 1.11111%;
  left: 71.09375%;
  left: 79.6875%;
}

#stage13 span[data-id="red"] {
  top: 65.55556%;
}
#stage13 span[data-id="tree1"] {
  width: 51.5625%;
  top: 69.35185%;
  left: 53.22917%;
}
#stage13 span[data-id="tree2"] {
  width: 21.5625%;
  top: 61.01852%;
  left: 0%;
}
#stage13 span[data-id="tree3"] {
  width: 29.58333%;
  top: 100%;
  left: 48.48958%;
  top: -8.98148%;
  left: 26.71875%;
}
#stage13 span[data-id="tree4"] {
  width: 40.78125%;
  top: 57.77778%;
  left: -40.78125%;
}
#stage13 span[data-id="birds"] {
  width: 61.25%;
  top: 3.7963%;
  left: 2.03125%;
}
#stage13 span[data-id="cloud1"] {
  width: 52.60417%;
  top: 8.14815%;
  left: 47.39583%;
}
#stage13 span[data-id="cloud2"] {
  width: 65.15625%;
  top: 16.38889%;
  left: 0%;
}
#stage13 span[data-id="cloud3"] {
  width: 51.875%;
  top: 67.68519%;
  left: 0%;
}
#stage13 span[data-id="cloud4"] {
  width: 42.13542%;
  top: 60.37037%;
  left: 57.86458%;
}
#stage13 span[data-id="deer1"] {
  width: 97.65625%;
  top: 71.48148%;
  left: -67.55208%;
  top: -7.96296%;
  left: 0%;
  top: 100%;
  left: 47.8125%;
}
#stage13 span[data-id="deer2"] {
  width: 20.36458%;
  top: 62.03704%;
  left: -20.3125%;
}
#stage13 span[data-id="deer3"] {
  width: 20.88542%;
  top: 26.94444%;
  left: 42.39583%;
}
#stage13 span[data-id="pic0"] {
  width: 84.21875%;
  -webkit-mask-image: url(../images/stage13/pic0-mask.png);
  mask-image: url(../images/stage13/pic0-mask.png);
  mask-size: 0%;
  mask-repeat: no-repeat;
  mask-position: 0% 0%;
}
#stage13 span[data-id="pic4"] {
  width: 38.125%;
  top: 11.75926%;
  left: 63.02083%;
}
#stage13 span[data-id="pic5"] {
  width: 44.0625%;
  top: 0%;
  left: 10.05208%;
}
#stage13 span[data-id="pic6"] {
  width: 42.55208%;
  top: 47.22222%;
  left: -3.90625%;
}

#stage14 span.red1 {
  width: 65%;
  top: 36.2963%;
  left: -34.11458%;
}
#stage14 span[data-id="red2"] {
  width: 55.20833%;
  top: 0%;
  left: 83.48958%;
  left: 44.79167%;
}
#stage14 span[data-id="cloud1"] {
  width: 33.17708%;
  top: 81.48148%;
  left: 15.52083%;
}
#stage14 span[data-id="cloud2"] {
  width: 15.52083%;
  top: 51.75926%;
  left: 57.96875%;
}
#stage14 span[data-id="cloud3"] {
  width: 15.9375%;
  top: 18.51852%;
  left: 15.3125%;
}
#stage14 span[data-id="cat"] {
  width: 13.33333%;
  top: 47.5%;
  left: 33.4375%;
}
#stage14 span[data-id="deer"] {
  width: 22.5%;
  top: 4.81481%;
  left: 26.875%;
}
#stage14 span[data-id="monkey"] {
  width: 14.53125%;
  top: 37.03704%;
  left: 42.23958%;
}
#stage14 span[data-id="bird1"] {
  width: 15.9375%;
  top: 35%;
  left: 25.83333%;
}
#stage14 span[data-id="bird2"] {
  width: 12.1875%;
  top: 46.2963%;
  left: 50%;
}
#stage14 span[data-id="bird3"] {
  width: 13.59375%;
  top: 12.5%;
  left: 69.47917%;
}
#stage14 span[data-id="bird4"] {
  width: 10.46875%;
  top: 64.90741%;
  left: 19.6875%;
  top: 100%;
  left: 32.03125%;
}
#stage14 span[data-id="fly"] {
  width: 5.72917%;
  top: 18.33333%;
  left: 55.9375%;
  top: 41.66667%;
}
#stage14 span[data-id="light1"] {
  width: 40.15625%;
  top: 27.87037%;
  left: 59.84375%;
}
#stage14 span[data-id="light2"] {
  width: 30%;
  top: 36.57407%;
  left: 70%;
}

#stage15 span[data-id="boy"] {
  width: 27.86458%;
  top: 39.44444%;
  left: 31.04167%;
  left: 10.9375%;
}
#stage15 span[data-id="cat"] {
  width: 32.65625%;
  top: 51.01852%;
  left: 3.33333%;
  top: 59.72222%;
  left: -32.65625%;
}
#stage15 span[data-id="deer"] {
  width: 27.76042%;
  top: 60.18519%;
  left: 59.16667%;
  left: 46.35417%;
}
#stage15 span[data-id="house"] {
  width: 60.9375%;
  top: 21.48148%;
  left: -0.20833%;
  left: -24.0625%;
}
#stage15 span[data-id="monkey"] {
  width: 15.67708%;
  top: 16.66667%;
  left: 29.27083%;
  top: 31.01852%;
  left: 16.40625%;
}

#stage16 span[data-id="bg2"] {
  width: 108.38542%;
}
#stage16 span[data-id="cloud1"] {
  width: 15.78125%;
  top: 24.16667%;
  left: -3.85417%;
  left: 0%;
}
#stage16 span[data-id="cloud2"] {
  width: 16.30208%;
  top: 6.2963%;
  left: 16.19792%;
  left: 19.94792%;
}
#stage16 span[data-id="cloud3"] {
  width: 15.78125%;
  top: 30%;
  left: 27.91667%;
  left: 31.71875%;
}
#stage16 span[data-id="cloud4"] {
  width: 18.07292%;
  top: 13.14815%;
  left: 48.07292%;
  left: 51.71875%;
}
#stage16 span[data-id="cloud5"] {
  width: 22.44792%;
  top: 14.25926%;
  left: 57.8125%;
  left: 61.66667%;
}
#stage16 span[data-id="cloud6"] {
  width: 10.625%;
  top: 6.57407%;
  left: 89.47917%;
  left: 93.38542%;
}
#stage16 span[data-id="cloud7"] {
  width: 16.19792%;
  top: 40.18519%;
  left: 84.27083%;
  left: 87.8125%;
}
#stage16 span[data-id="cat"] {
  width: 28.64583%;
  top: 15.27778%;
  left: 56.61458%;
}
#stage16 span[data-id="deer"] {
  width: 18.07292%;
  top: 8.14815%;
  left: 13.95833%;
}
#stage16 span[data-id="monkey"] {
  width: 14.79167%;
  top: 29.44444%;
  left: 28.48958%;
}

#stage17 span[data-id="top"] {
  top: 0;
  left: 0;
}
#stage17 span[data-id="subject"] {
  width: 16.97917%;
  top: 13.51852%;
  left: 5.57292%;
}
#stage17 a.btn {
  position: absolute;
  display: inline-block;
  cursor: pointer;
}
#stage17 span.pg, #stage17 a.btn {
  width: 3.07292%;
  height: 5.46296%;
  top: 12.96296%;
  background: none;
  background-size: 100%;
  background-repeat: no-repeat;
}
#stage17 .p01 {
  left: 24.375%;
}
#stage17 .p02 {
  left: 28.69792%;
}
#stage17 .p03 {
  left: 33.02083%;
}
#stage17 .p04 {
  left: 37.34375%;
}
#stage17 .p07 {
  left: 41.66667%;
}
#stage17 .p08 {
  left: 45.98958%;
}
#stage17 .p09 {
  left: 50.36458%;
}
#stage17 .p10 {
  left: 54.6875%;
}
#stage17 .p11 {
  left: 59.01042%;
}
#stage17 .p12 {
  left: 63.33333%;
}
#stage17 .p13 {
  left: 67.65625%;
}
#stage17 .p14 {
  left: 71.97917%;
}
#stage17 .p15 {
  left: 76.35417%;
}
#stage17 .p16 {
  left: 80.67708%;
}
#stage17 a.p01:hover, #stage17 a.p01.act {
  background-image: url(../images/stage17/p01-hover.png);
}
#stage17 a.p02:hover, #stage17 a.p02.act {
  background-image: url(../images/stage17/p02-hover.png);
}
#stage17 a.p03:hover, #stage17 a.p03.act {
  background-image: url(../images/stage17/p03-hover.png);
}
#stage17 a.p04:hover, #stage17 a.p04.act {
  background-image: url(../images/stage17/p04-hover.png);
}
#stage17 a.p07:hover, #stage17 a.p07.act {
  background-image: url(../images/stage17/p07-hover.png);
}
#stage17 a.p08:hover, #stage17 a.p08.act {
  background-image: url(../images/stage17/p08-hover.png);
}
#stage17 a.p09:hover, #stage17 a.p09.act {
  background-image: url(../images/stage17/p09-hover.png);
}
#stage17 a.p10:hover, #stage17 a.p10.act {
  background-image: url(../images/stage17/p10-hover.png);
}
#stage17 a.p11:hover, #stage17 a.p11.act {
  background-image: url(../images/stage17/p11-hover.png);
}
#stage17 a.p12:hover, #stage17 a.p12.act {
  background-image: url(../images/stage17/p12-hover.png);
}
#stage17 a.p13:hover, #stage17 a.p13.act {
  background-image: url(../images/stage17/p13-hover.png);
}
#stage17 a.p14:hover, #stage17 a.p14.act {
  background-image: url(../images/stage17/p14-hover.png);
}
#stage17 a.p15:hover, #stage17 a.p15.act {
  background-image: url(../images/stage17/p15-hover.png);
}
#stage17 a.p16:hover, #stage17 a.p16.act {
  background-image: url(../images/stage17/p16-hover.png);
}
#stage17 .v1-1, #stage17 .v2-1 {
  top: 32.68519%;
}
#stage17 .v1-1 {
  left: 6.64293%;
}
#stage17 .v2-13 {
  left: 11.21917%;
}
#stage17 .v2-2 {
  top: 45.18519%;
}
#stage17 .v2-3 {
  top: 54.35185%;
}
#stage17 .v2-46 {
  left: 17.69712%;
}
#stage17 .v2-4 {
  top: 60.55556%;
}
#stage17 .v2-5 {
  top: 69.44444%;
}
#stage17 .v2-6 {
  top: 78.24074%;
}
#stage17 .v3-1, #stage17 .v4-1, #stage17 .v7-1, #stage17 .v8-1, #stage17 .v11-1, #stage17 .v12-1, #stage17 .v13-1, #stage17 .v15-1, #stage17 .v16-1 {
  top: 34.16667%;
}
#stage17 .v3 {
  left: 22.38625%;
}
#stage17 .v3-2 {
  top: 50%;
}
#stage17 .v4 {
  left: 28.78604%;
}
#stage17 .v4-2 {
  top: 47.5%;
}
#stage17 .v4-3 {
  top: 62.40741%;
}
#stage17 .v4-4 {
  top: 71.38889%;
}
#stage17 .v7 {
  left: 36.24522%;
}
#stage17 .v7-2 {
  top: 47.5%;
}
#stage17 .v7-3 {
  top: 55.83333%;
}
#stage17 .v7-4 {
  top: 72.40741%;
}
#stage17 .v7-5 {
  top: 80.83333%;
}
#stage17 .v89 {
  left: 43.8173%;
}
#stage17 .v8-2 {
  top: 42.40741%;
}
#stage17 .v9-1 {
  top: 60.09259%;
}
#stage17 .v9-2 {
  top: 68.33333%;
}
#stage17 .v9-3 {
  top: 81.2963%;
}
#stage17 .v10 {
  left: 52.84821%;
}
#stage17 .v10-1 {
  top: 66.01852%;
}
#stage17 .v10-2 {
  top: 80.55556%;
}
#stage17 .v11-1 {
  left: 56.92949%;
}
#stage17 .v11-2 {
  top: 43.05556%;
  left: 57.44182%;
}
#stage17 .v11-3 {
  top: 55.46296%;
  left: 57.876%;
}
#stage17 .v11-4 {
  top: 68.24074%;
  left: 58.91803%;
}
#stage17 .v12 {
  left: 68.84335%;
}
#stage17 .v12-2, #stage17 .v13-2 {
  top: 43.05556%;
}
#stage17 .v12-3 {
  top: 51.94444%;
}
#stage17 .v134 {
  left: 75.70337%;
}
#stage17 .v14-1 {
  top: 66.2037%;
}
#stage17 .v15 {
  left: 83.81382%;
}
#stage17 .v15-2, #stage17 .v16-2 {
  top: 46.94444%;
}
#stage17 .v15-3 {
  top: 60.09259%;
}
#stage17 .v16 {
  left: 92.00243%;
}
#stage17 .v16-3 {
  top: 55.27778%;
}
#stage17 .wrapper .bg {
  width: 599.79167%;
  height: 100%;
  top: 0;
  left: 0;
}
#stage17 .wrapper .bg a.voice {
  width: 0.72942%;
  height: 6.94444%;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
#stage17 .wrapper .bg span.pg {
  width: 0.51233%;
  height: 5.46296%;
  top: 25.64815%;
}
#stage17 .wrapper .bg span.pg-act {
  opacity: 0;
}
#stage17 .wrapper .bg span.pg-act.act {
  opacity: 1;
}
#stage17 .wrapper .bg span.in01 {
  left: 5.93956%;
}
#stage17 .wrapper .bg span.in02 {
  left: 10.5158%;
}
#stage17 .wrapper .bg span.in03 {
  left: 21.81313%;
}
#stage17 .wrapper .bg span.in04 {
  left: 28.21292%;
}
#stage17 .wrapper .bg span.in07 {
  left: 35.55922%;
}
#stage17 .wrapper .bg span.in08 {
  left: 43.24418%;
}
#stage17 .wrapper .bg span.in09 {
  top: 51.57407%;
  left: 43.24418%;
}
#stage17 .wrapper .bg span.in10 {
  top: 57.5%;
  left: 52.28378%;
}
#stage17 .wrapper .bg span.in11 {
  left: 56.36506%;
}
#stage17 .wrapper .bg span.in12 {
  left: 66.70719%;
}
#stage17 .wrapper .bg span.in13 {
  left: 75.13025%;
}
#stage17 .wrapper .bg span.in14 {
  top: 57.68519%;
  left: 75.13025%;
}
#stage17 .wrapper .bg span.in15 {
  left: 83.24071%;
}
#stage17 .wrapper .bg span.in16 {
  left: 91.42932%;
}

#copyright span[data-id="subject"] {
  width: 18.80208%;
  top: 17.96296%;
  left: 4.58333%;
}
#copyright span[data-id="logo"] {
  width: 10.3125%;
  top: 42.87037%;
  left: 6.40625%;
}
#copyright span[data-id="cat"] {
  width: 37.08333%;
  top: 61.57407%;
  left: -0.15625%;
}
#copyright span[data-id="deer"] {
  width: 54.89583%;
  top: 31.85185%;
  left: -54.89583%;
}
#copyright span[data-id="monkey"] {
  width: 22.23958%;
  top: 19.72222%;
  left: 82.91667%;
}

div.more .wrapper span[data-id="styling"] {
  opacity: 0;
}
div.more .wrapper dl.content {
  color: #fff;
  position: absolute;
  display: inline-block;
  text-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
}
div.more .wrapper dl.content dt, div.more .wrapper dl.content dd, div.more .wrapper dl.content hr {
  display: block;
}
div.more .wrapper dl.content dt {
  font-family: "Noto Serif TC";
  font-weight: 700;
}
div.more .wrapper dl.content dd {
  line-height: 1.8;
}
div.more .wrapper dl.content hr {
  border-bottom: 1px solid #fff;
  height: 1px;
  margin: 2% 0;
}
div.more .wrapper span[data-id="sliderY"] {
  width: 2.08333%;
  height: 77.68519%;
  background-image: url(../images/more/y-slider-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
div.more .wrapper span[data-id="sliderY"] span[data-id="sliderYBar"] {
  width: 100%;
  height: 25%;
  background-image: url(../images/more/y-slider-bar.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
div.more .wrapper span[data-id="sliderX"] {
  width: 93.69792%;
  height: 3.7037%;
  top: 65.92593%;
  left: 3.17708%;
  background-image: url(../images/more/x-slider-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
div.more .wrapper span[data-id="sliderX"] span[data-id="sliderXBar"] {
  width: 12%;
  height: 100%;
  background-image: url(../images/more/x-slider-bar.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#more05 {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 40%, black 64%, black 100%);
}
#more05 dl.content {
  width: 33.33333%;
  height: 46.2963%;
  top: 42.59259%;
  left: 55.72917%;
}
#more05 dl.content hr {
  width: 28.90625%;
}
#more05 dl.content dd {
  height: 100%;
  padding-right: 5px;
  overflow-x: hidden;
  overflow: auto;
}
#more05 dl.content dt {
  position: relative;
}
#more05 dl.content dt a.voice {
  width: 15%;
  height: 110%;
}

#more06 {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(0, 0, 0, 0.95) 53%, black 90%);
}
#more06 dl.content {
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 0%;
  align-items: center;
  width: 85.15625%;
  height: 20.37037%;
  top: 74.07407%;
  left: 3.38542%;
}
#more06 dl.content dt, #more06 dl.content dd {
  height: 100%;
}
#more06 dl.content dt {
  width: 15%;
  height: 80%;
  border-right: 1px solid white;
  margin-right: 2%;
}
#more06 dl.content dt span[data-id="title"] {
  width: 12.70833%;
  margin-top: -3.5%;
  margin-left: 2%;
}
#more06 dl.content dt a.voice {
  width: 5.13761%;
  height: 34.09091%;
  top: 50%;
  left: 4.5%;
}
#more06 dl.content dd {
  width: 83.18043%;
  padding-top: 1.5%;
  overflow: auto;
}
#more06 span[data-id="scroll-area"] {
  height: 61.48148%;
  top: 9.25926%;
  left: 0%;
}
#more06 span[data-id="scroll-area"] span[data-id="fabric"] {
  width: 192.23958%;
  height: 84.93976%;
}

#more07 {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(0, 0, 0, 0.95) 53%, black 90%);
}
#more07 dl.content {
  width: 50%;
  height: 32.40741%;
  top: 62.96296%;
  left: 39.0625%;
}
#more07 dl.content hr {
  width: 19.27083%;
}
#more07 dl.content dd {
  height: 68.57143%;
  padding-right: 5px;
  overflow-x: hidden;
  overflow: auto;
}
#more07 dl.content dt {
  position: relative;
}
#more07 dl.content dt a.voice {
  width: 9%;
  height: 110%;
}
#more07 span[data-id="scroll-area"] {
  width: 35.41667%;
  top: 0%;
  left: 3.125%;
}
#more07 span[data-id="scroll-area"] span[data-id="bone"] {
  width: 85.14706%;
}
#more07 span[data-id="sliderY"] {
  top: 15.74074%;
  left: 35.15625%;
}

#more08 {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(0, 0, 0, 0.95) 53%, black 90%);
}
#more08 dl.content {
  width: 62.5%;
  height: 44.44444%;
  top: 39.81481%;
  left: 6.25%;
}
#more08 dl.content hr {
  width: 15.41667%;
}
#more08 dl.content dd {
  height: 100%;
  padding-right: 5px;
  overflow-x: hidden;
  overflow: auto;
}
#more08 dl.content dt {
  padding-bottom: 7%;
  position: relative;
}
#more08 dl.content dt a.voice {
  width: 8%;
  height: 45%;
  top: 51%;
  left: -2%;
}
#more08 span[data-id="plate"] {
  width: 71.77083%;
  top: -33.42593%;
  left: 25.05208%;
}

#more09 {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(0, 0, 0, 0.95) 53%, black 90%);
}
#more09 dl.content {
  min-width: 10%;
  height: 55.55556%;
  top: 20%;
  left: 28%;
  white-space: nowrap;
  text-align: left;
}
#more09 dl.content hr {
  width: 55%;
  margin-left: 20%;
}
#more09 dl.content dt {
  padding: 5px;
  padding-left: 13%;
  position: relative;
}
#more09 dl.content dt a.voice {
  width: 25%;
  height: 85%;
  margin-left: 5%;
}
#more09 dl.content dd {
  text-align: center;
  width: 100%;
  height: 83.33333%;
  padding: 5px;
  overflow-x: hidden;
  overflow: auto;
}
#more09 span[data-id="girl01"] {
  width: 13.75%;
  top: 10%;
  left: 45.625%;
}
#more09 span[data-id="girl02"] {
  width: 9.11458%;
  top: 5.64815%;
  left: 16.04167%;
}
#more09 span[data-id="girl03"] {
  width: 11.19792%;
  top: 10.83333%;
  left: 82.5%;
}
#more09 span[data-id="girl04"] {
  width: 10.20833%;
  top: 73.61111%;
  left: 48.64583%;
}
#more09 span[data-id="girl05"] {
  width: 7.29167%;
  top: 5.83333%;
  left: 5.3125%;
}
#more09 span[data-id="girl06"] {
  width: 7.60417%;
  top: 5%;
  left: 61.45833%;
}
#more09 span[data-id="girl07"] {
  width: 9.53125%;
  top: 56.48148%;
  left: 11.30208%;
}
#more09 span[data-id="girl08"] {
  width: 7.44792%;
  top: 14.81481%;
  left: 70.67708%;
}
#more09 span[data-id="girl09"] {
  width: 6.875%;
  top: 56.2963%;
  left: 23.125%;
}
#more09 span[data-id="girl10"] {
  width: 9.6875%;
  top: 50.55556%;
  left: 61.45833%;
}
#more09 span[data-id="girl11"] {
  width: 8.90625%;
  top: 43.33333%;
  left: 1.82292%;
}
#more09 span[data-id="girl12"] {
  width: 12.86458%;
  top: 63.88889%;
  left: 32.86458%;
}
#more09 span[data-id="girl13"] {
  width: 10.46875%;
  top: 64.25926%;
  left: 74.47917%;
}
#more09 span.girl {
  transform: scale(1);
  transition: 0.5s;
}

#more10 {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(0, 0, 0, 0.95) 53%, black 90%);
}
#more10 dl.content {
  width: 33.85417%;
  height: 69.44444%;
  top: 25.92593%;
  left: 4.16667%;
}
#more10 dl.content hr {
  width: 28.46154%;
}
#more10 dl.content dd {
  height: 84%;
  padding-right: 5px;
  overflow-x: hidden;
  overflow: auto;
}
#more10 dl.content dt {
  padding-bottom: 11%;
  position: relative;
}
#more10 dl.content dt a.voice {
  width: 15%;
  height: 40%;
  top: 55%;
  left: -3%;
}
#more10 span[data-id="sliderY"] {
  top: 15.74074%;
  left: 85.36458%;
}
#more10 span[data-id="scroll-area"] {
  width: 47.91667%;
  top: 0%;
  left: 39.84375%;
}
#more10 span[data-id="scroll-area"] span {
  top: 0;
  left: 0;
  width: 93.91304%;
}
#more10 span[data-id="scroll-area"] span[data-id="scroll-bg"] {
  height: 156.01852%;
  -webkit-mask-image: url(../images/more10/mask.png);
  mask-image: url(../images/more10/mask.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: 0% 0%;
}
#more10 span[data-id="scroll-area"] span[data-id="scroll-btm"] {
  top: 12.03704%;
}

#more13 {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(0, 0, 0, 0.95) 53%, black 90%);
}
#more13 dl.content {
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 0%;
  align-items: center;
  width: 85.15625%;
  height: 24.07407%;
  top: 72.22222%;
  left: 3.38542%;
}
#more13 dl.content dt, #more13 dl.content dd {
  height: 100%;
}
#more13 dl.content dt {
  width: 15.625%;
  height: 90%;
  border-right: 1px solid white;
  margin-right: 2%;
}
#more13 dl.content dt span[data-id="title"] {
  width: 12.70833%;
  margin-top: -1%;
  margin-left: 3%;
}
#more13 dl.content dt a.voice {
  width: 5.13761%;
  height: 25%;
  top: 50%;
  left: 4.5%;
}
#more13 dl.content dd {
  width: 83.18043%;
  overflow: auto;
  line-height: 1.7;
}
#more13 span[data-id="img-area"] {
  height: 64.81481%;
  top: 0;
  left: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#more13 span[data-id="img-area"] span {
  -webkit-box-reflect: below -7px linear-gradient(180deg, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.7) 100%);
}

#not_support {
  position: absolute;
  font-size: 1.8rem;
}
#not_support div {
  display: none;
}

@media only screen and (max-width: 640px) {
  #not_support {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 780px) {
  .more dl.content dd {
    padding-bottom: 10px;
  }
}
@media only screen and (max-width: 460px) {
  #more10 dl.content dt a.voice {
    top: 67%;
  }
}
div.stage {
  z-index: 2000;
}

#moreBG {
  z-index: 2900;
}

div.more {
  z-index: 3000;
}
div.more .img {
  z-index: 3001;
}

#loading {
  z-index: 4000;
}

#caption {
  z-index: 5000;
}

#lightBox {
  z-index: 6000;
}
#lightBox .whiteBlock #lightBoxClose {
  z-index: 6001;
}

#controller {
  z-index: 7000;
}
#controller .stages {
  z-index: 8000;
}