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;
}
.blendmode_overlay {
    mix-blend-mode: overlay;
    pointer-events: none;
}
/* 【以上內容勿動!!!  有關基本樣式設定】 */
/* 開版設定 */
.wrap {
  max-width: 1000px;
  margin: 0 auto;
  /* 【超過】 開版範圍 就不呈現 */
  overflow: hidden;
}

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

/* 定位 */
.item01-1 {
    top: 9%;
    left: 9.5%;
    width: 84.4%;
}
.item01-2 {
    top: 21%;
    left: 38%;
    width: 39.4%;
    -webkit-mask: url("../images/01-thing-02.png") no-repeat center center;
    mask: url("../images/01-thing-02.png") no-repeat center center;
    mask: url("../images/01-thing-02.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    z-index: 1;
}
.item01-3 {
    top: 21%;
    left: 46%;
    width: 24.5%;
    z-index: 1;
}
.item01-4 {
    top: 28%;
    left: 14%;
    width: 39.1%;
}
.item01-5 {
    top: 28%;
    left: 41%;
    width: 42.4%;
}
.item01-6 {
    top: 32%;
    left: 12%;
    width: 87.8%;
}
.item01-7 {
    top: 88.8%;
    left: 4%;
    width: 94%;
    -webkit-mask: url("../images/01-thing-07.png") no-repeat center center;
    mask: url("../images/01-thing-07.png") no-repeat center center;
    mask: url("../images/01-thing-07.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    z-index: 1;
}
.item01-8 {
    top: 85%;
    left: 30%;
    width: 59.3%;
    z-index: 1;
}
.item02-1 {
    top: 1.5%;
    left: 3.5%;
    width: 18.5%;
}
.item02-2 {
    top: 29%;
    left: 14.5%;
    width: 62.4%;
    -webkit-mask: url("../images/02-thing-02.png") no-repeat center center;
    mask: url("../images/02-thing-02.png") no-repeat center center;
    mask: url("../images/02-thing-02.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item02-3 {
    top: 29%;
    left: 10.5%;
    width: 60.9%;
}
.item02-4 {
    top: 44.5%;
    left: 5.5%;
    width: 81.6%;
}
.item02-5 {
    top: 44.5%;
    left: 5.5%;
    width: 81.6%;
}
.item02-6 {
    top: 90.5%;
    left: 9%;
    width: 82%;
    -webkit-mask: url("../images/02-thing-06.png") no-repeat center center;
    mask: url("../images/02-thing-06.png") no-repeat center center;
    mask: url("../images/02-thing-06.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item02-7 {
    top: 95.5%;
    left: 19.97%;
    width: 60.6%;
    z-index: 1;
}
.item02-8 {
    top: 98.2%;
    left: 69%;
    width: 9.9%;
    z-index: 1;
}
.item03-1 {
    top: 18.2%;
    left: 41%;
    width: 57.3%;
}
.item03-2 {
    top: 18.2%;
    left: 52.2%;
    width: 45.1%;
}
.item03-3 {
    top: 41%;
    left: 8.84%;
    width: 82.3%;
    -webkit-mask: url("../images/03-thing-03.png") no-repeat center center;
    mask: url("../images/03-thing-03.png") no-repeat center center;
    mask: url("../images/03-thing-03.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item03-4 {
    top: 45.5%;
    left: 19.97%;
    width: 60.6%;
    z-index: 1;
}
.item03-5 {
    top: 49%;
    left: 68%;
    width: 9.9%;
    z-index: 1;
}
.item03-6 {
    top: 84.8%;
    left: 8.84%;
    width: 82.3%;
    -webkit-mask: url("../images/03-thing-06.png") no-repeat center center;
    mask: url("../images/03-thing-06.png") no-repeat center center;
    mask: url("../images/03-thing-06.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item03-7 {
    top: 90%;
    left: 19.97%;
    width: 60.6%;
    z-index: 1;
}
.item03-8 {
    top: 93.5%;
    left: 68%;
    width: 9.9%;
    z-index: 1;
}
.item04-1 {
    top: 24%;
    left: 25.5%;
    width: 47.5%;
    -webkit-mask: url("../images/04-thing-01.png") no-repeat center center;
    mask: url("../images/04-thing-01.png") no-repeat center center;
    mask: url("../images/04-thing-01.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item04-2 {
    top: 12.5%;
    left: 0%;
    width: 100%;
}
.item04-3 {
    top: 62.5%;
    left: 9.4%;
    width: 20.5%;
}
.item04-4 {
    top: 56.5%;
    left: 0%;
    width: 100%;
}
.item04-5 {
    top: 86.5%;
    left: 3.25%;
    width: 93.5%;
    -webkit-mask: url("../images/04-thing-05.png") no-repeat center center;
    mask: url("../images/04-thing-05.png") no-repeat center center;
    mask: url("../images/04-thing-05.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item05-1 {
    top: 10%;
    left: 12.05%;
    width: 75.9%;
}
.item05-2 {
    top: 21%;
    left: 2%;
    width: 53.3%;
}
.item05-3 {
    top: 69.5%;
    left: 56%;
    width: 32.9%;
    -webkit-mask: url("../images/05-thing-03.png") no-repeat center center;
    mask: url("../images/05-thing-03.png") no-repeat center center;
    mask: url("../images/05-thing-03.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item06-1 {
    top: 7%;
    left: 45%;
    width: 39.9%;
}
.item06-2 {
    top: 32%;
    left: 40%;
    width: 56.3%;
}
.item06-2-A {
    top: -15%;
    left: 15%;
    width: 46%;
    -webkit-mask: url("../images/06-thing-02.png") no-repeat center center;
    mask: url("../images/06-thing-02.png") no-repeat center center;
    mask: url("../images/06-thing-02.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item06-2-B {
    top: 75%;
    left: 82%;
    width: 23%;
}
.item06-3 {
    top: 47%;
    left: 40%;
    width: 56.3%;
}
.item06-4 {
    top: 62%;
    left: 40%;
    width: 56.3%;
}
.item07-1 {
    top: 5%;
    left: 6%;
    width: 39.9%;
}
.item07-2 {
    top: 33%;
    left: 5%;
    width: 56.3%;
}
.item07-2-A {
    top: -20%;
    left: 10%;
    width: 46%;
    -webkit-mask: url("../images/07-thing-02.png") no-repeat center center;
    mask: url("../images/07-thing-02.png") no-repeat center center;
    mask: url("../images/07-thing-02.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item07-2-B {
    top: 76%;
    left: 76%;
    width: 23%;
}
.item07-3 {
    top: 48%;
    left: 5%;
    width: 56.3%;
}
.item07-4 {
    top: 61%;
    left: 5%;
    width: 56.3%;
}
.item07-5 {
    top: 75%;
    left: 5%;
    width: 56.3%;
}
.item08-1 {
    top: 6%;
    left: 9.85%;
    width: 80.3%;
}
.item08-2 {
    top: -5%;
    left: 23.85%;
    width: 58.4%;
}
.item08-3 {
    top: 32%;
    left: 4.3%;
    width: 91.4%;
    -webkit-mask: url("../images/08-thing-03.png") no-repeat center center;
    mask: url("../images/08-thing-03.png") no-repeat center center;
    mask: url("../images/08-thing-03.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item08-4 {
    top: 9%;
    left: 0%;
    width: 100%;
}
.item08-5 {
    top: 53%;
    left: 16.7%;
    width: 66.6%;
}
.item09-1 {
    top: 6%;
    left: 5%;
    width: 90%;
}
.item09-2 {
    top: 88%;
    left: 10.55%;
    width: 78.9%;
}
.item10-1 {
    top: 35%;
    left: 42.5%;
    width: 6.9%;
}
.item10-2 {
    top: 66%;
    left: 42.5%;
    width: 7.3%;
}
.item11-1 {
    top: 24.5%;
    left: 8.5%;
    width: 22.2%;
}
.item11-2 {
    top: 24.5%;
    left: 38.5%;
    width: 22.2%;
}
.item11-3 {
    top: 24.5%;
    left: 69.5%;
    width: 22.2%;
}
.item12-1 {
    top: 6.5%;
    left: 23.5%;
    width: 53%;
}
.item12-2 {
    top: 25.7%;
    left: 3%;
    width: 16.4%;
    -webkit-mask: url("../images/12-thing-02.png") no-repeat center center;
    mask: url("../images/12-thing-02.png") no-repeat center center;
    mask: url("../images/12-thing-02.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item12-3 {
    top: 24%;
    left: 3%;
    width: 22.5%;
}
.item12-4 {
    top: 25.4%;
    right: 2%;
    width: 16.4%;
    -webkit-mask: url("../images/12-thing-04.png") no-repeat center center;
    mask: url("../images/12-thing-04.png") no-repeat center center;
    mask: url("../images/12-thing-04.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.item12-5 {
    top: 23.5%;
    right: 0%;
    width: 17.5%;
}
.item12-6 {
    top: 63.5%;
    left: 41%;
    width: 23%;
}
.item12-7 {
    top: 75.5%;
    left: 41%;
    width: 30.1%;
}
.item12-8 {
    top: 87.5%;
    left: 46.5%;
    width: 11.4%;
}
.item12-9 {
    top: 87.5%;
    left: 68.5%;
    width: 17.7%;
}
.item12-10 {
    top: 55%;
    left: 0%;
    width: 25.2%;
}
.item12-11 {
    top: 55.5%;
    left: 0%;
    width: 31.9%;
}
.item12-12 {
    top: 65%;
    left: 67%;
    width: 32.3%;
}
.item12-13 {
    top: 65.5%;
    left: 66%;
    width: 32.3%;
}