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

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

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

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

.container {
    max-width: 1000px;
    margin: 0 auto;

}

/* 定位 */

.thing01-1 {
    width: 85.6%;
    top: 1%;
    left: 6.9%;
}

.thing01-2 {
    width: 95.7%;
    top: 5.5%;
    left: 1.8%;
}

.thing01-3 {
    width: 67.7%;
    top: 17.25%;
    left: 0%;
}

.thing01-4 {
    width: 37.0%;
    top: 18.5%;
    right: 0%;
    -webkit-mask: url("../images/thing01-4.png") no-repeat center center;
    mask: url("../images/thing01-4.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing01-5 {
    width: 40.6%;
    top: 16%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing01-6 {
    width: 85.1%;
    top: 14%;
    left: 0%;
}

.thing01-7 {
    width: 32.1%;
    top: 29.5%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing01-8 {
    width: 66.5%;
    top: 44.4%;
    left: 0%;
}

.thing01-9 {
    width: 38.0%;
    top: 45%;
    left: 24.5%;
    mix-blend-mode: screen;
}

.thing01-10 {
    width: 19.9%;
    bottom: 3.25%;
    left: 11%;
    -webkit-mask: url("../images/thing01-10.png") no-repeat center center;
    mask: url("../images/thing01-10.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing01-11 {
    width: 27.9%;
    bottom: 3.25%;
    left: 29.3%;
    -webkit-mask: url("../images/thing01-11.png") no-repeat center center;
    mask: url("../images/thing01-11.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;

}

.thing01-11 .light::after {
    animation-delay: .25s;
}

.thing01-12 {
    width: 27.9%;
    bottom: 3.25%;
    right: 16.75%;
    -webkit-mask: url("../images/thing01-12.png") no-repeat center center;
    mask: url("../images/thing01-12.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;

}

.thing01-12 .light::after {
    animation-delay: .5s;
}

.thing01-13 {
    width: 100.0%;
    top: -10%;
    left: 0%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing01-14 {
    width: 25.3%;
    top: 21.85%;
    right: 11.7%;
    -webkit-mask: url("../images/thing01-14.png") no-repeat center center;
    mask: url("../images/thing01-14.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.thing02-1 {
    width: 100.0%;
    top: 2%;
    left: 0%;
}

.thing02-2 {
    width: 82.4%;
    top: 33.8%;
    left: 9.5%;
}

.thing02-3 {
    width: 28.9%;
    top: 43.2%;
    right: 1%;
}

.thing02-4 {
    width: 35.5%;
    top: 36%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing02-5 {
    width: 31.3%;
    bottom: 20.9%;
    left: 2%;
}

.thing02-6 {
    width: 35.0%;
    bottom: 20%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing03-1 {
    width: 100.0%;
    top: 6.9%;
    left: 0%;
}

.thing03-2 {
    width: 88.7%;
    bottom: 27.8%;
    left: 3.5%;
}

.thing03-3 {
    width: 89.4%;
    top: 0%;
    left: 0%;
}

.thing03-4 {
    width: 100.0%;
    top: 6%;
    left: 0%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing05-1 {
    width: 42.6%;
    top: 34.1%;
    left: 32.5%;
    cursor: pointer;
}

.thing05-2 {
    width: 23.6%;
    top: 33%;
    left: 19%;
    -webkit-mask: url("../images/thing05-2.png") no-repeat center center;
    mask: url("../images/thing05-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing05-3 {
    width: 21.6%;
    top: 20%;
    left: 0%;
}

.thing05-4 {
    width: 49.4%;
    top: 27%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing05-5 {
    width: 38.6%;
    top: 54.25%;
    right: 2.75%;
    cursor: pointer;
}

.thing05-6 {
    width: 40.2%;
    bottom: 1.75%;
    right: 11.25%;
    cursor: pointer;
}

.thing05-7 {
    width: 37.5%;
    bottom: 9.75%;
    right: 0.25%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing06-1 {
    width: 56.0%;
    top: 1.5%;
    left: 22%;
}

.thing06-2 {
    width: 42.6%;
    top: 46.25%;
    left: 25%;
    cursor: pointer;
}

.thing06-3 {
    width: 23.7%;
    top: 45%;
    right: 16%;
    -webkit-mask: url("../images/thing06-3.png") no-repeat center center;
    mask: url("../images/thing06-3.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing06-4 {
    width: 42.2%;
    top: 54.5%;
    right: 0%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing06-5 {
    width: 39.3%;
    top: 60.5%;
    left: 7.75%;
    cursor: pointer;
}

.thing06-6 {
    width: 37.0%;
    top: 76.6%;
    left: 24.6%;
    cursor: pointer;
}

.thing06-7 {
    width: 38.6%;
    top: 83.5%;
    left: 0%;
    cursor: pointer;
}

.thing06-8 {
    width: 34.1%;
    top: 75%;
    left: 0%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing06-9 {
    width: 5.8%;
    top: 55%;
    left: 59%;
    pointer-events: none;
}

.thing07-1 {
    width: 9.9%;
    top: 13.3%;
    right: 6%;
}

.thing07-2 {
    width: 93.7%;
    bottom: 7.4%;
    left: 3.5%;
}

.thing08-1 {
    width: 29.4%;
    top: 25.5%;
    left: 5.5%;
    z-index: 2;
}

.thing08-2 {
    width: 39.8%;
    top: 21.4%;
    left: 30.7%;
    z-index: 1;
}

.thing08-3 {
    width: 35.7%;
    top: 25.5%;
    right: 0%;
}

.thing08-4 {
    width: 29.4%;
    bottom: 5.1%;
    left: 5.6%;
    z-index: 2;
}

.thing08-5 {
    width: 37.9%;
    bottom: 3.65%;
    left: 32.5%;
    z-index: 1;
}

.thing08-6 {
    width: 35.2%;
    bottom: 5.1%;
    right: 0%;
}

.thing10-1 {
    width: 87.2%;
    height: 19%;
    top: 48.35%;
    left: 6.4%;
}

.thing11-1 {
    width: 100.0%;
    top: 21.5%;
    left: 0%;
}

.thing11-1 img {
    margin-left: auto;
}

.thing12-1 {
    width: 100.0%;
    top: 0%;
    left: 0%;
    -webkit-mask: url("../images/thing12-1.png") no-repeat center center;
    mask: url("../images/thing12-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing12-2 {
    width: 57.2%;
    top: 1.5%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing12-3 {
    width: 55.5%;
    top: 28%;
    left: 0%;
}

.thing12-4 {
    width: 53.1%;
    top: 29.9%;
    right: 0%;
}

.thing12-5 {
    width: 15.0%;
    top: 33.5%;
    left: 43%;
}

.thing12-6 {
    width: 93.0%;
    bottom: 11.4%;
    left: 3.5%;
}

.thing12-7 {
    width: 100.0%;
    top: -12%;
    left: 0%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing12-8 {
    width: 100.0%;
    left: 0%;
    bottom: -9%;
    z-index: 1;
    -webkit-mask: url("../images/thing12-8.png") no-repeat center center;
    mask: url("../images/thing12-8.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing12-9 {
    width: 100.0%;
    bottom: -17%;
    left: 0%;
    z-index: 1;
    mix-blend-mode: screen;
}

.thing12-10 {
    width: 100.0%;
    bottom: -8%;
    left: 0%;
    z-index: 1;
}

.thing13-1 {
    width: 100.0%;
    top: 7.2%;
    left: 0%;
    -webkit-mask: url("../images/thing13-1.png") no-repeat center center;
    mask: url("../images/thing13-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing13-2 {
    width: 35.8%;
    top: 25.4%;
    left: 1.6%;
}

.thing13-3 {
    width: 38.9%;
    top: 24%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing13-4 {
    width: 89.9%;
    top: 52.8%;
    left: 3%;
    -webkit-mask: url("../images/thing13-4.png") no-repeat center center;
    mask: url("../images/thing13-4.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.thing13-6 {
    width: 100.0%;
    top: 9.5%;
    left: 0%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing13-7 {
    width: 30.3%;
    top: 27.3%;
    left: 1.6%;
}

.thing14-1 {
    width: 100.0%;
    top: 9.5%;
    left: 0%;
    -webkit-mask: url("../images/thing14-1.png") no-repeat center center;
    mask: url("../images/thing14-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing14-2 {
    width: 37.0%;
    top: 26.6%;
    left: 0.5%;
}

.thing14-3 {
    width: 38.9%;
    top: 24.9%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing14-4 {
    width: 89.9%;
    top: 54.4%;
    left: 3%;
    -webkit-mask: url("../images/thing14-4.png") no-repeat center center;
    mask: url("../images/thing14-4.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing14-5 {
    width: 89.4%;
    top: 0%;
    left: 0%;
}

.thing14-6 {
    width: 100.0%;
    top: 0%;
    left: 0%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing14-7 {
    width: 32.8%;
    top: 28.5%;
    left: 0.6%;
}

.thing15-1 {
    width: 100.0%;
    top: 10.7%;
    left: 0%;
    -webkit-mask: url("../images/thing15-1.png") no-repeat center center;
    mask: url("../images/thing15-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing15-2 {
    width: 36.2%;
    top: 32%;
    left: 1.5%;
}

.thing15-3 {
    width: 38.9%;
    top: 30%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing15-5 {
    width: 30.3%;
    top: 34.3%;
    left: 1.5%;
}

.thing15-6 {
    width: 30.9%;
    top: 41%;
    right: 0.5%;
    -webkit-mask: url("../images/thing15-6.png") no-repeat center center;
    mask: url("../images/thing15-6.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing17-1 {
    width: 79.0%;
    top: 51%;
    left: 11%;
}

.thing17-2 {
    width: 94.7%;
    bottom: 10.2%;
    left: 3%;
}