body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  /* vertical-align: middle; */
  display: block;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

*,
*::after,
*::before {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.blendmode_screen {
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 【以上內容勿動!!!  有關基本樣式設定】 */
/* 開版設定 */
.wrap {
  max-width: 1000px;
  margin: 0 auto;
  /* 【超過】 開版範圍 就不呈現 */
  overflow: hidden;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
  position: relative;
}

/* 定位 */
/* --- Auto-generated image classes (Do not edit) --- */
.video01 {
  top: 0%;
  left: 0%;
  width: 100%;
}

.video02_container {
  width: 84.3%;
  height: 24.6%;
  top: 26.75%;
  left: 7.9%;
  border-radius: 43px;
  overflow: hidden;
}

.video02 {
  top: 0%;
  left: -16%;
  width: 133.2%;
}

.video03_container {
  width: 84.3%;
  height: 26.7%;
  top: 14.2%;
  left: 7.9%;
  border-radius: 49px;
  overflow: hidden;
}

.video03 {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .video02_container {
    border-radius: 17px;
  }

  .video03_container {
    border-radius: 15px;
  }
}

.thing-1-1 {
  top: 8.5%;
  left: 0%;
  width: 100%;
}

.thing-1-2 {
  top: 24%;
  left: 59%;
  width: 39.6%;
  -webkit-mask: url("../images/thing-1-2.png") no-repeat center center;
  mask: url("../images/thing-1-2.png") no-repeat center center;
  mask: url("../images/thing-1-2.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing-2-1 {
  top: 2%;
  left: 9%;
  width: 82.2%;
}

.thing-2-2 {
  top: 31%;
  left: 12%;
  width: 21.2%;
}

.thing-2-3 {
  top: 53%;
  left: 72%;
  width: 17.8%;
}

.thing-2-6 {
  top: 48%;
  left: 74.5%;
  width: 13%;
}

.thing-2-4 {
  top: 58.5%;
  left: 64%;
  width: 34.6%;
}

.thing-2-5 {
  top: 42%;
  left: 1%;
  width: 74.2%;
}

.thing-3-1 {
  top: 48.7%;
  left: 5.6%;
  width: 88.9%;
  -webkit-mask: url("../images/thing-3-1.png") no-repeat center center;
  mask: url("../images/thing-3-1.png") no-repeat center center;
  mask: url("../images/thing-3-1.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing-3-2 {
  top: 84.7%;
  left: 14%;
  width: 74.9%;
}

.thing-4-1 {
  top: 11.6%;
  left: 38%;
  width: 48.8%;
}

.thing-4-2 {
  top: 26%;
  left: 21%;
  width: 5.6%;
}

.thing-4-6 {
  top: 31%;
  left: 14%;
  width: 5.6%;
}

.thing-4-3 {
  top: 54.5%;
  left: 58%;
  width: 40.2%;
}

.thing-4-4 {
  top: 71%;
  left: 53%;
  width: 40.4%;
}

.thing-4-5 {
  top: 74%;
  left: 4%;
  width: 28.3%;
}

.thing-5-1 {
  top: 48.5%;
  left: 5%;
  width: 36.5%;
}

.thing-5-2 {
  top: 59%;
  left: 30%;
  width: 33.8%;
}

.thing-5-3 {
  top: 50%;
  left: 61%;
  width: 37%;
}

.thing-5-4 {
  top: 74%;
  left: 22%;
  width: 55.7%;
}

.thing-5-5 {
  top: 7%;
  left: 0%;
  width: 100%;
}

.thing-6-1 {
  top: 11%;
  left: 46%;
  width: 3%;
}

.thing-6-5 {
  top: 11%;
  left: 61.5%;
  width: 3%;
}

.thing-6-6 {
  top: 11%;
  left: 77%;
  width: 3%;
}

.thing-6-2 {
  top: 41%;
  left: 6%;
  width: 34.6%;
}

.thing-6-3 {
  top: 58.5%;
  left: 3%;
  width: 34.6%;
}

.thing-6-4 {
  top: 74%;
  left: 20%;
  width: 34.6%;
}

.thing-7-1 {
  top: 46%;
  left: 3%;
  width: 10.2%;
  z-index: 10;
}

.thing-7-2 {
  top: 46%;
  left: 86%;
  width: 10.2%;
  z-index: 10;
}

.thing-8-1 {
  top: 72.5%;
  left: 58%;
  width: 39.7%;
  cursor: pointer;
}

.thing-9-1 {
  top: 22%;
  left: 4%;
  width: 91.4%;
  -webkit-mask: url("../images/thing-9-1.png") no-repeat center center;
  mask: url("../images/thing-9-1.png") no-repeat center center;
  mask: url("../images/thing-9-1.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing-11-1 {
  top: 2.5%;
  left: 0.5%;
  width: 98.9%;
}

.thing-11-2 {
  top: 14%;
  left: 44%;
  width: 56.3%;
}

.thing-11-3 {
  top: 69.5%;
  left: 8.4%;
  width: 43.3%;
}

.thing-11-4 {
  top: 92%;
  left: 51.5%;
  width: 37.4%;
}

.thing-17-1 {
  top: 12%;
  left: 10%;
  width: 79.1%;
}

.thing-17-2 {
  top: 26%;
  left: 4%;
  width: 92.9%;
  -webkit-mask: url("../images/thing-17-2.png") no-repeat center center;
  mask: url("../images/thing-17-2.png") no-repeat center center;
  mask: url("../images/thing-17-2.avif") no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thing-17-3 {
  top: 50.5%;
  left: 12.2%;
  width: 75.7%;
}

.thing-17-4 {
  top: 73%;
  left: 3%;
  width: 94.7%;
}

/* --- End of auto-generated classes --- */