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: 11.4%;
    top: 6%;
    left: 43%;
    z-index: 1;
}

.thing01-2 {
    width: 79.7%;
    top: 7%;
    left: 12%;
}

.thing01-3 {
    width: 39.1%;
    top: 37.5%;
    left: 54%;
}

.thing01-4 {
    width: 24.0%;
    top: 42%;
    left: 40%;
    z-index: 1;
    mix-blend-mode: screen;
}

.thing01-5 {
    width: 57.0%;
    top: 43%;
    left: 0%;
}

.thing01-6 {
    width: 45.0%;
    top: 57.5%;
    left: 55%;
    z-index: 1;
}

.thing01-7 {
    width: 57.4%;
    top: 60%;
    left: 43%;
}

.thing01-8 {
    width: 21.9%;
    top: 61%;
    left: 78%;
    mix-blend-mode: screen;
}

.thing01-9 {
    width: 45.5%;
    top: 70.5%;
    left: 1.5%;
}


.thing01-10 {
    width: 76.9%;
    top: 32%;
    left: 0%;
    mix-blend-mode: screen;
}


.thing02-1 {
    width: 42.8%;
    top: 26.5%;
    left: 51%;
}

.thing02-2 {
    width: 39.3%;
    top: 48.8%;
    left: 7.5%;
    -webkit-mask: url("../images/thing02-2.png") no-repeat center center;
    mask: url("../images/thing02-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing02-3 {
    width: 22.6%;
    top: 34%;
    left: 78%;
    z-index: 1;
    mix-blend-mode: screen;
}

.thing02-4 {
    width: 49.1%;
    top: 35%;
    left: 43.5%;
    -webkit-mask: url("../images/thing02-4.png") no-repeat center center;
    mask: url("../images/thing02-4.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing02-5 {
    width: 81.9%;
    top: 87%;
    left: 12%;
    -webkit-mask: url("../images/thing02-5.png") no-repeat center center;
    mask: url("../images/thing02-5.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing02-6 {
    width: 33.1%;
    top: 90%;
    left: 48%;
    mix-blend-mode: screen;
}

.thing03-1 {
    width: 79.5%;
    top: 85%;
    left: 12%;
}

.thing08-1 {
    width: 62.1%;
    top: 13%;
    left: 3%;
    -webkit-mask: url("../images/thing08-1.png") no-repeat center center;
    mask: url("../images/thing08-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing08-2 {
    width: 25.0%;
    top: 55%;
    left: 70.5%;
}

.thing08-3 {
    width: 25.0%;
    top: 74%;
    left: 5%;
}

.thing09-1 {
    width: 97.4%;
    top: 28%;
    left: 1.25%;
}

.thing10-1 {
    width: 97.4%;
    top: 0%;
    left: 1.25%;
}


.thing11-1 {
    width: 97.4%;
    top: 0%;
    left: 1.25%;
}

.thing11-2 {
    width: 34.4%;
    top: 47.5%;
    left: 47%;
    z-index: 1;
}

.thing11-3 {
    width: 34.8%;
    top: 21%;
    left: 60.25%;
    clip-path: circle(33.5% at 43% 57%);
}

.thing11-4 {
    width: 30.4%;
    top: -4%;
    left: 69.25%;
    clip-path: circle(36.2% at 50% 57%);
}

.thing11-5 {
    width: 34.8%;
    top: 3%;
    left: 40.25%;
    clip-path: circle(33.5% at 43% 57%);
}


.thing12-1 {
    width: 61.1%;
    top: 5%;
    left: 19%;
}

.thing12-2 {
    width: 91.7%;
    top: 11%;
    left: 2%;
}

.thing12-3 {
    width: 90.6%;
    top: 22%;
    left: 4.5%;
    z-index: 2;
}

.thing12-4 {
    width: 24.7%;
    top: 32.6%;
    left: 2.5%;
}

.thing12-5 {
    width: 24.7%;
    top: 21.4%;
    left: 22.5%;
}

.thing12-6 {
    width: 24.7%;
    top: 22.5%;
    left: 53%;
}

.thing12-7 {
    width: 24.7%;
    top: 35%;
    left: 73%;
}


.thing13-1 {
    width: 90.5%;
    top: 4%;
    left: 6%;
}

.thing14-1 {
    width: 23.1%;
    top: 18%;
    left: 59%;
    z-index: 1;
    mix-blend-mode: screen;
}

.thing14-2 {
    width: 34.6%;
    top: 22%;
    left: 62.5%;
    -webkit-mask: url("../images/thing14-2.png") no-repeat center center;
    mask: url("../images/thing14-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing14-3 {
    width: 75.5%;
    top: 91%;
    left: 12.25%;
}

.thing15-1 {
    width: 72.7%;
    top: 11%;
    left: 13.65%;
}

.thing15-2 {
    width: 75.5%;
    top: 80%;
    left: 12.25%;
}

.thing15-3 {
    width: 23.1%;
    top: 28%;
    left: 53%;
    mix-blend-mode: screen;
    z-index: 1;
}

.thing15-4 {
    width: 40.3%;
    top: 32%;
    left: 55%;
    -webkit-mask: url("../images/thing15-4.png") no-repeat center center;
    mask: url("../images/thing15-4.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing16-1 {
    width: 23.1%;
    top: 0.5%;
    left: 61%;
    z-index: 1;
    mix-blend-mode: screen;
}

.thing16-2 {
    width: 34.6%;
    top: 5.5%;
    left: 64%;
    -webkit-mask: url("../images/thing16-2.png") no-repeat center center;
    mask: url("../images/thing16-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing16-3 {
    width: 75.5%;
    top: 82.5%;
    left: 12.25%;
}

.thing17-1 {
    width: 19.0%;
    top: -1.5%;
    left: 0%;
    z-index: 1;
    mix-blend-mode: screen;
}

.thing17-2 {
    width: 36.2%;
    top: 1.5%;
    left: 5%;
    -webkit-mask: url("../images/thing17-2.png") no-repeat center center;
    mask: url("../images/thing17-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing17-3 {
    width: 86.6%;
    top: 5%;
    left: 10%;
}

.thing17-4 {
    width: 39.0%;
    top: 27%;
    left: 60.5%;
}

.thing17-5 {
    width: 36.7%;
    top: 58.2%;
    left: 7.5%;
}

.thing17-6 {
    width: 75.5%;
    top: 77.5%;
    left: 12.25%;
}

.thing18-1 {
    width: 88.0%;
    top: 42%;
    left: 6%;
}

.thing18-2 {
    width: 84.3%;
    top: 63%;
    left: 7.85%;
}