@font-face {
  font-family: "helvetica";
  src: url("../fonts/Helvetica.woff") format("woff"), url("../fonts/Helvetica.ttf") format("opentype"), url("../fonts/Helvetica.ttf") format("truetype");
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: helvetica, "Noto Serif TC";
  user-select: none;
  background: #eee;
  position: relative;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

.mask {
  position: fixed;
  pointer-events: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1280/600;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3000;
}
.mask::before, .mask::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #eee;
  width: 100%;
  height: 50vh;
  transform: translateY(-100%);
}
.mask::after {
  top: auto;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
}
@media (max-aspect-ratio: 1/1) {
  .mask {
    background: #eee;
  }
}
@media (min-aspect-ratio: 1280/600) {
  .mask {
    width: auto;
    height: 100%;
  }
  .mask::before {
    width: 50vw;
    height: 100%;
    transform: translateX(-100%);
  }
  .mask::after {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    width: 50vw;
    height: 100%;
    transform: translateX(100%);
  }
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  -moz-opacity: 0;
  background: #dedcdf;
  transition: opacity 0.6s;
}
.wrapper.active {
  opacity: 1;
  -moz-opacity: 1;
}

.filler {
  pointer-events: none;
  width: 100%;
  height: 1000%;
  position: relative;
}

.barH {
  width: 100%;
  height: calc(100vh - 100%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  pointer-events: none;
}

.viewH {
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
}

.map,
.department {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.map > div,
.department > div {
  width: 100%;
  height: auto;
  aspect-ratio: 1280/600;
  position: relative;
}
@media (min-aspect-ratio: 1280/600) {
  .map > div,
  .department > div {
    width: auto;
    height: 100%;
  }
}
.map img,
.department img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  z-index: 1;
}

.department {
  z-index: 2;
}
.department .mapchild .wording {
  z-index: 2;
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0s;
}
.department .mapchild.departA .wording1 {
  animation-name: fadeIn;
  animation-delay: 0.6s;
}
.department .mapchild.departB .wording2 {
  animation-name: fadeIn;
  animation-delay: 0.6s;
}
.department .mapchild.departC .wording3 {
  animation-name: fadeIn;
  animation-delay: 0.6s;
}
.department .mapchild.departD .wording4 {
  animation-name: fadeIn;
  animation-delay: 0.6s;
}
.department .mapchild.departE .wording5 {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 0.6s;
}

.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  background: #fff;
}

.logo {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  pointer-events: none;
}
.logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
}

.superman {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.superman > div {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1280/600;
  z-index: 1;
  transform: translate(-50%, 50%);
  opacity: 0;
  -moz-opacity: 0;
}
@media (min-aspect-ratio: 1280/600) {
  .superman > div {
    width: auto;
    height: 100%;
  }
}
.superman > div .wing {
  position: absolute;
  z-index: 1;
  top: 32%;
  left: -23%;
}
.superman > div svg {
  display: none;
  fill: #d23121;
  fill-rule: evenodd;
  position: absolute;
  z-index: 1;
  width: 35%;
  height: 40%;
  top: 39%;
  left: 3%;
}
.superman > div svg path {
  animation: pathAnim 0.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim {
  0% {
    d: path("m0,70.9s169.91,12.09,251.77-29.38S438.19,0,438.19,0c0,0-37.15,105.29-126.57,154.14s-134.14-13.07-134.14-13.07c0,0-24.07-21.32-87.01-8.94S0,70.9,0,70.9Z");
  }
  50% {
    d: path("m0,70.9s-80,12.1,251.77-29.38S438.19,50,438.19,0c0,0-37.15,105.29-96.57,154.14s-64.14-13.07-134.14-38.07c0,0-24.07-21.32-87.01-8.94S0,70.9,0,70.9Z");
  }
  100% {
    d: path("m0,70.9s169.91,12.09,251.77-29.38S438.19,0,438.19,0c0,0-37.15,105.29-126.57,154.14s-134.14-13.07-134.14-13.07c0,0-24.07-21.32-87.01-8.94S0,70.9,0,70.9Z");
  }
}
.superman img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  z-index: 5;
  top: 0;
  left: 0;
}
.superman img:nth-child(2) {
  z-index: 4;
}
.superman img:nth-child(3) {
  z-index: 3;
}
.superman img:nth-child(4) {
  z-index: 2;
}
.superman img.slogan {
  opacity: 0;
  -moz-opacity: 0;
}
.superman.active > div {
  animation-name: flyIn;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: both;
}
.superman.active img {
  animation-name: float;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-duration: 2s;
}
.superman.active img.body {
  animation-name: float2;
}
.superman.active img.wing {
  animation-name: float3;
}
.superman.active img.slogan {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-delay: 1.8s;
  animation-iteration-count: 1;
}
@keyframes flyIn {
  from {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    -moz-opacity: 1;
  }
}

.boss {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.boss > div {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1280/600;
  z-index: 1;
  opacity: 0;
  -moz-opacity: 0;
}
@media (min-aspect-ratio: 1280/600) {
  .boss > div {
    width: auto;
    height: 100%;
  }
}
.boss > div img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  z-index: 5;
}
.boss > div img.slogan {
  opacity: 1;
  -moz-opacity: 1;
}
.boss.active > div {
  animation-name: bossIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes bossIn {
  from {
    transform: translate(0, -30%);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    -moz-opacity: 1;
  }
}

.nav {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.nav.final .link {
  display: block;
}
.nav.final .link img {
  width: 20%;
}
.nav.final .next {
  display: none;
}
.nav > div {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1280/600;
  z-index: 1;
  animation-name: slideInUp;
  animation-duration: 0.6s;
}
.nav > div.link {
  display: none;
}
@media (min-aspect-ratio: 1280/600) {
  .nav > div {
    width: auto;
    height: 100%;
  }
}
.nav > div img {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  width: 12%;
  height: auto;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
}
.nav.active .man {
  animation-name: flyIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.nav.active .man img {
  animation-name: float;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-duration: 2s;
}
.nav.active .man img.slogan {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  animation-iteration-count: 1;
}
@keyframes flyIn {
  from {
    transform: translate(-50%, 50%);
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
    -moz-opacity: 1;
  }
}

.cloud {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.cloud.c1 {
  z-index: 24;
}
.cloud.c1 img {
  transform: scale(1);
}
.cloud.c2 {
  z-index: 23;
}
.cloud.c2 img {
  transform: scale(1.35);
}
.cloud.c3 {
  z-index: 22;
}
.cloud.c3 img {
  transform: scale(2.3);
}
.cloud.c4 {
  z-index: 21;
}
.cloud.c4 img {
  transform: scale(2.8);
}
.cloud.c5 {
  z-index: 20;
}
.cloud.c5 img {
  transform: scale(2.5);
}
.cloud.c6 {
  z-index: 19;
}
.cloud.c6 img {
  transform: scale(0.5);
}
.cloud.c7 {
  z-index: 18;
}
.cloud.c7 img {
  transform: scale(1);
}
.cloud.c8 {
  z-index: 17;
}
.cloud.c8 img {
  transform: scale(1);
}
.cloud.c9 {
  z-index: 16;
}
.cloud.c9 img {
  transform: scale(2);
}
.cloud.c10 {
  z-index: 15;
}
.cloud.c10 img {
  transform: scale(1);
}
.cloud.c11 {
  z-index: 14;
}
.cloud.c11 img {
  transform: scale(2.8);
}
.cloud.c12 {
  z-index: 19;
}
.cloud.c12 img {
  transform: scale(1);
}
.cloud.c13 {
  z-index: 12;
}
.cloud.c13 img {
  transform: scale(2.8);
}
.cloud.c14 {
  z-index: 11;
}
.cloud.c14 img {
  transform: scale(1.3);
}
.cloud.c15 {
  z-index: 10;
}
.cloud.c15 img {
  transform: scale(0.6);
}
.cloud.c16 {
  z-index: 9;
}
.cloud.c16 img {
  transform: scale(2);
}
.cloud.c17 {
  z-index: 8;
}
.cloud.c17 img {
  transform: scale(2);
}
.cloud.c18 {
  z-index: 7;
}
.cloud.c18 img {
  transform: scale(1);
}
.cloud.c19 {
  z-index: 6;
}
.cloud.c19 img {
  transform: scale(1);
}
.cloud.c20 {
  z-index: 5;
}
.cloud.c20 img {
  transform: scale(0.7);
}
.cloud img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
}

.notice {
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  line-height: 14px;
  padding: 10px 0;
  position: fixed;
  width: 180px;
  text-align: center;
  bottom: 10px;
  left: 50%;
  margin-left: -90px;
  border-radius: 20px;
  display: none;
  z-index: 3000;
}

.loading {
  font-size: 14px;
  color: #333;
  position: absolute;
  width: 180px;
  text-align: center;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-fill-mode: forwards;
  z-index: 3000;
}

@media (max-aspect-ratio: 1/1) {
  .notice {
    display: block;
  }
}
.assetsPreload {
  position: absolute;
  bottom: 1px;
  left: 0px;
  pointer-events: none;
}
.assetsPreload * {
  position: absolute;
  top: 100%;
  left: -100%;
  max-width: 4px;
  max-height: 4px;
  opacity: 0.1;
  -moz-opacity: 0.1;
  -khtml-opacity: 0.1;
  filter: alpha(opacity=10);
}