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: 99.5%;
    top: 16%;
    left: 0%;
    -webkit-mask: url("../images/thing01-1.png") no-repeat center center;
    mask: url("../images/thing01-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing01-2 {
    width: 41.4%;
    top: 53.5%;
    left: 59%;
}

.thing01-3 {
    width: 100.0%;
    top: 73%;
    left: 0%;
}

.thing01-4 {
    width: 100.0%;
    top: -11%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing02-1 {
    width: 47.9%;
    top: 33%;
    left: 52%;
}

.thing02-2 {
    width: 40.8%;
    top: 41%;
    left: 1%;
}

.thing02-3 {
    width: 45.1%;
    top: 78%;
    left: 55%;
    z-index: 3;
}

.thing02-4 {
    width: 72.3%;
    top: 40%;
    left: 0%;
    mix-blend-mode: screen;
    z-index: 3;
}

.thing02-5 {
    width: 51.8%;
    top: 58.5%;
    left: 25.1%;
    z-index: 2;
}


.thing03-1 {
    width: 81.9%;
    top: 76.5%;
    left: 6%;
    z-index: 1;
}

.thing03-2 {
    width: 45.3%;
    top: 72%;
    left: 52%;
}

.thing03-3 {
    width: 18.5%;
    top: 70%;
    left: 81%;
    mix-blend-mode: screen;
}

.thing04-1 {
    width: 24.3%;
    top: 16.2%;
    left: 1%;
    transition: opacity .5s;
}

.thing04-2 {
    width: 24.0%;
    top: 16.2%;
    left: 23%;
    transition: opacity .5s;
}

.thing04-3 {
    width: 25.1%;
    top: 20.8%;
    left: 42%;
    transition: opacity .5s;
}

.thing04-4 {
    width: 32.1%;
    top: 21%;
    left: 65.5%;
    transition: opacity .5s;
}

.thing04-5 {
    width: 39.2%;
    top: 43.5%;
    left: 6.5%;
}

.thing05-1 {
    width: 17.2%;
    top: 26%;
    left: 14%;
    mix-blend-mode: screen;
    z-index: 1;
}

.thing05-2 {
    width: 29.2%;
    top: 22.5%;
    left: 7%;
}

.thing05-3 {
    width: 29.4%;
    top: 55.6%;
    left: 68%;
}

.thing05-4 {
    width: 18.8%;
    top: 29%;
    left: 64%;
    mix-blend-mode: screen;
    z-index: 1;
}

.thing05-5 {
    width: 66.2%;
    top: 30.5%;
    left: 15%;
}


.thing06-1 {
    width: 34.3%;
    top: 61%;
    left: 6%;
}

.thing06-2 {
    width: 74.8%;
    top: 81%;
    left: 13%;
}

.thing06-3 {
    width: 40.6%;
    top: 78%;
    left: 1%;
    mix-blend-mode: screen;
}

.thing07-1 {
    width: 43.2%;
    top: 45%;
    left: 53%;
}

.thing07-2 {
    width: 43.4%;
    top: 50%;
    left: 2%;
}

.thing07-3 {
    width: 37.2%;
    top: 71.5%;
    left: 2%;
}

.thing07-4 {
    width: 38.4%;
    top: 81%;
    left: 14%;
}

.thing07-5 {
    width: 43.4%;
    top: 89.5%;
    left: 42.2%;
}

.thing08-1 {
    width: 86.0%;
    top: 14%;
    left: 7%;
}

.thing08-2 {
    width: 25.9%;
    top: 51.2%;
    left: 34%;
}

.thing08-3 {
    width: 16.8%;
    top: 81.3%;
    left: 42%;
}

.thing09-1 {
    width: 32.9%;
    top: 57%;
    left: 33%;
}

.thing10-1 {
    width: 32.9%;
    top: 39%;
    left: 6%;
}

.thing10-2 {
    width: 31.6%;
    top: 42.5%;
    left: 68.5%;
}

.thing10-3 {
    width: 40.4%;
    top: 65.5%;
    left: 0%;
}

.thing10-4 {
    width: 100.0%;
    top: -42.5%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing11-1 {
    width: 34.3%;
    top: 47.3%;
    left: 5%;
}

.thing11-2 {
    width: 74.8%;
    top: 78%;
    left: 12.6%;
}

.thing12-1 {
    width: 22.3%;
    top: 27.4%;
    left: 52%;
    z-index: 1;
}

.thing12-2 {
    width: 30.7%;
    top: 20%;
    left: 68.5%;
}

.thing12-3 {
    width: 74.6%;
    top: 67%;
    left: 12.6%;
    -webkit-mask: url("../images/thing12-3.png") no-repeat center center;
    mask: url("../images/thing12-3.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing13-1 {
    width: 29.7%;
    top: 27%;
    left: 66%;
}

.thing13-2 {
    width: 74.6%;
    top: 68%;
    left: 12.7%;
    -webkit-mask: url("../images/thing13-2.png") no-repeat center center;
    mask: url("../images/thing13-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: 0%;
}

.thing14-1 {
    width: 74.6%;
    top: 70%;
    left: 13%;
    -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;
    mask-position: 0%;
}