@charset "UTF-8";
@-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 3s ease infinite;
  -moz-animation: clicker 3s ease infinite;
  -ms-animation: clicker 3s ease infinite;
  -o-animation: clicker 3s ease infinite;
  animation: clicker 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 upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 1%;
  }
  100% {
    margin-top: 0;
  }
}
@-moz-keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 1%;
  }
  100% {
    margin-top: 0;
  }
}
@-ms-keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 1%;
  }
  100% {
    margin-top: 0;
  }
}
@-o-keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 1%;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes upDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 1%;
  }
  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;
}

@-webkit-keyframes twinkling {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@-moz-keyframes twinkling {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@-ms-keyframes twinkling {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@-o-keyframes twinkling {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes twinkling {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
.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 twink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-moz-keyframes twink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-ms-keyframes twink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-o-keyframes twink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes twink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.twink {
  -webkit-animation: twink 1s ease infinite;
  -moz-animation: twink 1s ease infinite;
  -ms-animation: twink 1s ease infinite;
  -o-animation: twink 1s ease infinite;
  animation: twink 1s 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 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;
}

* {
  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: "微軟正黑體", 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;
}

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;
}

.clicker {
  width: 8.33333%;
  -webkit-animation: clicker 3s ease infinite;
  -moz-animation: clicker 3s ease infinite;
  -ms-animation: clicker 3s ease infinite;
  -o-animation: clicker 3s ease infinite;
  animation: clicker 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;
  opacity: 0;
}

.srt {
  display: none;
}

.btn1 {
  box-shadow: 0px 10px 14px -7px #013238;
  background: linear-gradient(to bottom, #10a5b6 5%, #006873 100%);
  background-color: #10a5b6;
  border-radius: 8px;
  display: inline-block;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 10px 20px;
  text-shadow: 0px 1px 0px #013238;
  margin: 10px;
  transition: 0.5s;
}

.btn1:hover {
  background: linear-gradient(to bottom, #006873 5%, #10a5b6 100%);
  background-color: #10a5b6;
}

.hide {
  opacity: 0;
}

.zoomer {
  cursor: zoom-in;
}

.zoom00 {
  transform-origin: 0% 0%;
}

.zoomIn {
  transform: scale(1.3);
  cursor: zoom-out;
}

#do {
  display: none;
}

#caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 13% 2% 13%;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  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;
}
#caption div {
  display: block;
  padding-bottom: 3%;
  padding-left: 5%;
  text-align: left;
  background: url(../images/caption-line.png) no-repeat bottom left;
  background-size: 50%;
}

#container {
  width: 100%;
  height: 100%;
}
#container #main {
  top: 0;
  left: 0;
  position: absolute;
}

#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 {
  position: absolute;
  display: inline-block;
}
#controller .btn img {
  width: auto;
  height: 100%;
}
#controller div.btn {
  max-width: 80px;
  height: 12%;
  right: 5px;
  top: 5px;
}
#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 div.row1 {
  top: 1%;
}
#controller div.row2 {
  top: 12%;
}
#controller div.row3 {
  top: 23%;
}
#controller div.row4 {
  top: 34%;
}
#controller div.row5 {
  top: 45%;
}
#controller div.row6 {
  top: 56%;
}
#controller div.row7 {
  top: 75%;
}
#controller #closeMore, #controller #prevStage, #controller #nextStage {
  opacity: 0;
}
#controller #closeMore {
  right: 5%;
}
#controller #prevStage {
  left: 5px;
}
#controller #prevStage, #controller #nextStage {
  transition: all 1s;
}
#controller .stages, #controller .stages * {
  pointer-events: all;
}
#controller .stages {
  position: absolute;
  right: 8%;
  top: 1.75%;
  display: none;
  width: 260px;
  max-width: calc(98vw - 30px);
  padding-top: 30px;
  background-color: white;
  border: 1px solid #ddd;
  -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: 15px 10px;
  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;
  min-width: 167px;
  height: 67px;
  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: 94px;
  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: 70%;
  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 .cont dl dt {
  word-wrap: break-word;
  height: 94px;
  display: inline-block;
}
#controller .stages .cont dl dt table {
  height: 94px;
}
#controller .stages .cont dl dt table td {
  vertical-align: middle;
}
#controller .stages .cont dl dt table td p {
  font-weight: 300;
  color: #666;
  font-size: 16px;
  padding: 5px 1px;
}
#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 #loading_txt {
  position: absolute;
}
#loading .wrapper #loading_txt, #loading .wrapper #not_support {
  left: 50%;
  width: 100%;
  margin-left: -50%;
  top: 40%;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 6vmin;
  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;
}
#loading .wrapper #loading_percent {
  position: absolute;
  top: 55%;
  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;
}

#lightBox {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #777777;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5;
}
#lightBox strong {
  font-weight: bolder;
  color: #064e81;
}
#lightBox .whiteBlock {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  margin: 6% auto 0 auto;
  background-color: #fff;
  padding: 10px 0;
  display: inline-block;
  border-radius: 15px;
}
#lightBox .whiteBlock #lightBoxClose {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url(../images/icons/close.png) no-repeat center;
  background-size: 100% 100%;
  opacity: 0.5;
  transition: opacity 1s;
}
#lightBox .whiteBlock #lightBoxClose:hover {
  opacity: 1;
}
#lightBox .whiteBlock #lightBoxCont {
  max-width: 100%;
  overflow: scroll;
  text-align: center;
  display: block;
}
#lightBox .whiteBlock #lightBoxCont .info {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 10px;
  word-break: break-all;
}
#lightBox .whiteBlock #lightBoxCont .info img {
  max-width: 100%;
}
#lightBox .whiteBlock #lightBoxCont .info dl {
  padding: 0 1%;
  margin-bottom: 3%;
}
#lightBox .whiteBlock #lightBoxCont .info dl dt {
  font-size: 1.5rem;
  color: #444;
}
#lightBox .whiteBlock #lightBoxCont .info dl dd {
  padding: 1% 0;
  line-height: 2;
}
#lightBox .whiteBlock #lightBoxCont .guide {
  width: 500px;
}
#lightBox .whiteBlock #lightBoxCont .guide div.center {
  padding: 10px;
}
#lightBox .whiteBlock #lightBoxCont .guide .icons {
  background: url(../images/loading/bg.jpg) bottom center;
  padding: 10px;
}
#lightBox .whiteBlock #lightBoxCont .guide .icons table {
  font-size: 1rem;
}
#lightBox .whiteBlock #lightBoxCont .guide .icons table th, #lightBox .whiteBlock #lightBoxCont .guide .icons table td {
  padding: 5px;
  font-weight: bold;
  color: #ffffff;
}
#lightBox .whiteBlock #lightBoxCont .guide .icons table td.note {
  font-size: 0.8rem;
  font-weight: normal;
}

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="voice"], div.stage div.wrapper span.play {
  background-image: url(../images/voice3.png);
  background-color: #686868;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 30% 50%;
}
div.stage div.wrapper span[data-id="voice"].loading {
  background-image: url(../images/loading.svg);
  background-size: 80%;
  background-position: 60% 55%;
}

#cover span[data-id="feather"] {
  width: 26.51042%;
  top: 49.44444%;
  left: 12.08333%;
}

#stage01 span[data-id="cloud"] {
  width: 34.16667%;
  top: 29.44444%;
  left: 75%;
}
#stage01 span[data-id="msg"] {
  width: 26.61458%;
  top: 56.85185%;
  left: 59.42708%;
}

#stage02 span[data-id="owl"] {
  width: 26.5625%;
  top: 11.2037%;
  left: -1.77083%;
}
#stage02 span[data-id="msg1-1"] {
  width: 39.89583%;
  top: 65.83333%;
  left: 6.35417%;
}
#stage02 span[data-id="msg1-2"] {
  width: 54.27083%;
  top: 68.42593%;
  left: 6.35417%;
}

#stage03 span[data-id="msg1-1"] {
  width: 38.59375%;
  top: 56.01852%;
  left: 7.39583%;
}
#stage03 span[data-id="msg1-2"] {
  width: 29.27083%;
  top: 51.48148%;
  left: 7.39583%;
}

#stage04 span[data-id="img1"] {
  width: 59.58333%;
  top: 69.62963%;
  left: 5.10417%;
}
#stage04 span[data-id="img2"] {
  width: 27.86458%;
  top: 0%;
  left: 72.13542%;
}
#stage04 span[data-id="img3"] {
  width: 16.40625%;
  top: 37.03704%;
  left: 66.875%;
}
#stage04 span[data-id="msg1-1"] {
  width: 20.36458%;
  top: 9.07407%;
  left: 4.94792%;
}
#stage04 span[data-id="msg1-2"] {
  width: 20.67708%;
  top: 9.44444%;
  left: 4.94792%;
}

#stage05 span[data-id="msg1-1"] {
  width: 38.59375%;
  top: 14.53704%;
  left: 47.03125%;
}
#stage05 span[data-id="msg1-2"] {
  width: 32.13542%;
  top: 13.33333%;
  left: 47.03125%;
}

#stage06 span[data-id="msg1-1"] {
  width: 37.29167%;
  top: 73.61111%;
  left: 6.61458%;
}
#stage06 span[data-id="msg1-2"] {
  width: 37.08333%;
  top: 74.16667%;
  left: 6.61458%;
}

#stage07 span[data-id="owl"] {
  width: 25.9375%;
  top: 20%;
  left: 43.48958%;
  top: 4.72222%;
  left: 59.01042%;
}
#stage07 span[data-id="msg1-1"] {
  width: 36.04167%;
  top: 6.85185%;
  left: 6.04167%;
}
#stage07 span[data-id="msg1-2"] {
  width: 36.77083%;
  top: 6.85185%;
  left: 5.52083%;
}

#stage08 span[data-id="msg1-1"] {
  width: 32.08333%;
  top: 77.77778%;
  left: 60.98958%;
}
#stage08 span[data-id="msg1-2"] {
  width: 41.51042%;
  top: 75.46296%;
  left: 55%;
}

#stage09 span[data-id="cloud"] {
  width: 43.95833%;
  top: 16.57407%;
  left: 0%;
}
#stage09 span[data-id="feather1"] {
  width: 12.39583%;
  top: 13.24074%;
  left: 54.53125%;
}
#stage09 span[data-id="feather2"] {
  width: 36.92708%;
  top: 42.59259%;
  left: 4.63542%;
}
#stage09 span[data-id="msg1-1"] {
  width: 26.875%;
  top: 40.55556%;
  left: 38.33333%;
}
#stage09 span[data-id="msg1-2"] {
  width: 31.66667%;
  top: 39.25926%;
  left: 37.1875%;
}

#stage10 span[data-id="feather"] {
  width: 12.60417%;
  top: 38.24074%;
  left: 56.30208%;
  top: 41.11111%;
  left: 54.27083%;
}
#stage10 span[data-id="msg1-1"] {
  width: 30.72917%;
  top: 64.16667%;
  left: 6.35417%;
}
#stage10 span[data-id="msg1-2"] {
  width: 38.54167%;
  top: 66.85185%;
  left: 7.5%;
}

#stage11 span[data-id="feather"] {
  width: 20.10417%;
  top: 4.07407%;
  left: 5.98958%;
}
#stage11 span[data-id="msg1-1"] {
  width: 32.08333%;
  top: 72.12963%;
  left: 60.52083%;
}
#stage11 span[data-id="msg1-2"] {
  width: 38.85417%;
  top: 70.83333%;
  left: 53.75%;
}

#stage12 span[data-id="feather"] {
  width: 10.26042%;
  top: 84.90741%;
  left: 29.89583%;
}
#stage12 span[data-id="man"] {
  width: 45.88542%;
  left: 0;
  top: 51.01852%;
}
#stage12 span[data-id="msg1-1"] {
  width: 17.70833%;
  top: 69.53704%;
  left: 50.36458%;
}
#stage12 span[data-id="msg1-2"] {
  width: 24.53125%;
  top: 72.22222%;
  left: 50.36458%;
}

#stage13 span[data-id="msg1-1"] {
  width: 24.21875%;
  top: 76.94444%;
  left: 5.72917%;
}
#stage13 span[data-id="msg1-2"] {
  width: 18.75%;
  top: 69.25926%;
  left: 5.72917%;
}

#stage14 span[data-id="msg1-1"] {
  width: 39.84375%;
  top: 78.14815%;
  left: 5.88542%;
}
#stage14 span[data-id="msg1-2"] {
  width: 29.73958%;
  top: 76.01852%;
  left: 5.88542%;
}

#stage15 span[data-id="feather"] {
  width: 38.85417%;
  top: 70.83333%;
  left: 5.41667%;
}
#stage15 span[data-id="msg1-1"] {
  width: 29.47917%;
  top: 38.24074%;
  left: 12.91667%;
}
#stage15 span[data-id="msg1-2"] {
  width: 35.72917%;
  top: 40.55556%;
  left: 12.96875%;
}

#stage16 span[data-id="feather"] {
  width: 8.33333%;
  top: 26.48148%;
  left: 33.4375%;
}
#stage16 span[data-id="head"] {
  width: 16.71875%;
  top: 64.53704%;
  left: 19.63542%;
}
#stage16 span[data-id="msg1-1"] {
  width: 31.71875%;
  top: 76.2037%;
  left: 63.17708%;
}
#stage16 span[data-id="msg1-2"] {
  width: 32.34375%;
  top: 74.07407%;
  left: 62.55208%;
}

#stage17 span[data-id="img"] {
  width: 28.33333%;
  top: 0%;
  left: 71.66667%;
}
#stage17 span[data-id="msg1-1"] {
  width: 21.61458%;
  top: 18.7037%;
  left: 55.78125%;
}
#stage17 span[data-id="msg1-2"] {
  width: 23.02083%;
  top: 17.03704%;
  left: 54.89583%;
}

#stage18 span[data-id="img1"] {
  width: 24.53125%;
  top: 26.85185%;
  left: 1.66667%;
}
#stage18 span[data-id="img2"] {
  width: 53.38542%;
  top: 56.94444%;
  left: 34.47917%;
}
#stage18 span[data-id="msg1-1"] {
  width: 25.52083%;
  top: 35.92593%;
  left: 23.07292%;
}
#stage18 span[data-id="msg1-2"] {
  width: 28.80208%;
  top: 37.5%;
  left: 22.96875%;
}

#stage19 span[data-id="feather"] {
  width: 79.0625%;
  top: 2.12963%;
  left: 0%;
}
#stage19 span[data-id="owl"] {
  top: 0%;
  left: 0%;
}
#stage19 span[data-id="msg1-1"] {
  width: 24.32292%;
  top: 74.72222%;
  left: 66.45833%;
}
#stage19 span[data-id="msg1-2"] {
  width: 28.90625%;
  top: 75.37037%;
  left: 65%;
}

#stage20 span.n02 {
  width: 26.30208%;
  height: 7.59259%;
  top: 16.94444%;
  left: 4.84375%;
}
#stage20 span.n03 {
  width: 20.9375%;
  height: 10.09259%;
  top: 26.57407%;
  left: 4.84375%;
}
#stage20 span.n04 {
  width: 23.75%;
  height: 12.31481%;
  top: 39.07407%;
  left: 4.84375%;
}
#stage20 span.n05 {
  width: 18.38542%;
  height: 12.31481%;
  top: 54.07407%;
  left: 4.84375%;
}
#stage20 span.n06 {
  width: 20.78125%;
  height: 9.53704%;
  top: 68.88889%;
  left: 4.84375%;
}
#stage20 span.n07 {
  width: 19.16667%;
  height: 12.12963%;
  top: 80.92593%;
  left: 4.84375%;
}
#stage20 span.n08 {
  width: 21.51042%;
  height: 7.40741%;
  top: 16.75926%;
  left: 34.94792%;
}
#stage20 span.n09 {
  width: 29.63542%;
  height: 5.37037%;
  top: 27.96296%;
  left: 34.94792%;
}
#stage20 span.n10 {
  width: 10.625%;
  height: 5.55556%;
  top: 37.59259%;
  left: 34.94792%;
}
#stage20 span.n12 {
  width: 20.52083%;
  height: 7.59259%;
  top: 47.87037%;
  left: 34.94792%;
}
#stage20 span.n13 {
  width: 9.42708%;
  height: 4.07407%;
  top: 58.7963%;
  left: 34.94792%;
}
#stage20 span.n14 {
  width: 16.14583%;
  height: 3.98148%;
  top: 66.85185%;
  left: 34.94792%;
}
#stage20 span.n15 {
  width: 17.86458%;
  height: 5.46296%;
  top: 75.37037%;
  left: 34.94792%;
}
#stage20 span.n16 {
  width: 22.34375%;
  height: 7.59259%;
  top: 84.25926%;
  left: 34.94792%;
}
#stage20 span.n17 {
  width: 12.70833%;
  height: 4.07407%;
  top: 47.96296%;
  left: 62.55208%;
}
#stage20 span.n18 {
  width: 23.95833%;
  height: 4.07407%;
  top: 57.03704%;
  left: 62.55208%;
}
#stage20 span.n19 {
  width: 22.29167%;
  height: 5.18519%;
  top: 65.46296%;
  left: 62.55208%;
}
#stage20 span[data-id="voice"], #stage20 span.play {
  width: 2.08333%;
  height: 3.7037%;
}

#stage21 span.u02 {
  width: 26.77083%;
  height: 13.61111%;
  top: 17.68519%;
  left: 4.63542%;
}
#stage21 span.u03 {
  width: 30.72917%;
  height: 8.05556%;
  top: 34.16667%;
  left: 4.63542%;
}
#stage21 span.u04 {
  width: 38.95833%;
  height: 13.61111%;
  top: 45.27778%;
  left: 4.63542%;
}
#stage21 span.u07 {
  width: 33.22917%;
  height: 8.05556%;
  top: 61.75926%;
  left: 4.63542%;
}
#stage21 span.u08 {
  width: 26.82292%;
  height: 7.96296%;
  top: 72.87037%;
  left: 4.63542%;
}
#stage21 span.u09 {
  width: 33.17708%;
  height: 7.87037%;
  top: 84.44444%;
  left: 4.63542%;
}
#stage21 span.u12 {
  width: 24.53125%;
  height: 7.87037%;
  top: 17.68519%;
  left: 45.78125%;
}
#stage21 span.u15 {
  width: 31.77083%;
  height: 12.68519%;
  top: 28.61111%;
  left: 45.78125%;
}
#stage21 span.u16-1 {
  width: 35.26042%;
  height: 12.5%;
  top: 44.90741%;
  left: 45.78125%;
}
#stage21 span.u16-2 {
  width: 34.21875%;
  height: 13.61111%;
  top: 60.46296%;
  left: 45.78125%;
}
#stage21 span.u19 {
  width: 31.19792%;
  height: 8.33333%;
  top: 77.77778%;
  left: 45.78125%;
}
#stage21 span[data-id="voice"], #stage21 span.play {
  width: 2.08333%;
  height: 3.7037%;
}

#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: 768px) {
  #controller table td.prevNext {
    height: 20%;
  }
}
@media only screen and (max-width: 448px) {
  #controller #more1-title, #controller #more2-title {
    font-size: 12px;
    padding: 0;
    bottom: 0;
  }
  #controller .stages .cont dl {
    font-size: 12px;
  }

  #lightBox {
    font-size: 1rem;
  }
  #lightBox .whiteBlock #lightBoxCont .guide .icons table {
    font-size: 0.8rem;
  }
  #lightBox .whiteBlock #lightBoxCont .guide .icons table th {
    width: 20%;
  }

  .btn1 {
    font-size: 1rem;
  }
}
div.stage {
  z-index: 2000;
}

div.more {
  z-index: 3000;
}

#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;
}