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;

}

header {
    display: none;
}

/* ▼footer▼ */

footer {
    background: #000;
    padding: 3% 0;
}

footer div {
    color: #fff;
    text-align: center;
    font-size: 0.75em;
    font-weight: 500;
    letter-spacing: 1px;
}


/* ▲footer▲ */
/* 定位 */
.thing01-1 {
    width: 92.5%;
    left: 4.5%;
    top: 11.5%;
    -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;
}

.thing01-2 {
    width: 84.9%;
    left: 5%;
    top: 35.5%;
}

.thing01-3 {
    width: 81%;
    left: 3%;
    top: 36.75%;
    opacity: 0;
}

.thing01-4 {
    width: 78.2%;
    left: 62.4%;
    top: 23%;
    transform: translate(-70.5%, 38%);
}

.thing01-5 {
    width: 86.7%;
    left: 5.5%;
    top: 38%;
    mix-blend-mode: screen;
    opacity: 0;
}

.thing01-6 {
    width: 85.7%;
    left: 10%;
    bottom: 10%;
}

.thing02-1 {
    width: 88%;
    left: 7.5%;
    top: 7.25%;
}

.thing02-2 {
    width: 100%;
    left: 5%;
    bottom: 2.75%;
    scale: 1.570;
}

.thing03-1 {
    width: 82%;
    height: 41.2%;
    left: 9%;
    top: 0.5%;
}

.thing03-2 {
    width: 82%;
    left: 9%;
    bottom: 38%;
}

.thing04-1 {
    width: 20.7%;
    left: 3.6%;
    bottom: 3%;
}

.thing04-2 {
    width: 20.6%;
    left: 27.2%;
    bottom: 3%;
}

.thing04-3 {
    width: 23.4%;
    left: 49%;
    bottom: 3%;
}

.thing04-4 {
    width: 25.4%;
    right: 0.8%;
    bottom: 3%;
}

.thing05-1 {
    width: 20.7%;
    left: 3.4%;
    bottom: 39.3%;
}

.thing05-2 {
    width: 20.7%;
    left: 26.7%;
    bottom: 39.3%;
}

.thing05-3 {
    width: 23.4%;
    left: 48.7%;
    bottom: 39.3%;
}

.thing05-4 {
    width: 24.4%;
    right: 1.5%;
    bottom: 39.3%;
}

.thing05-5 {
    width: 79.6%;
    right: 9.5%;
    bottom: 14.5%;
    animation: arrowup 2s infinite ease-in-out;
}

.thing06-1 {
    width: 67.5%;
    left: 17%;
    top: 12.5%;
}

.thing06-2 {
    width: 31.5%;
    left: 0%;
    top: 26.5%;
    -webkit-mask: url("../images/thing06-2.png") no-repeat center center;
    mask: url("../images/thing06-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing06-3 {
    width: 38.6%;
    left: 8.5%;
    bottom: 4.75%;
}

.thing06-4 {
    width: 39.1%;
    left: 52.5%;
    bottom: 5.25%;
}

.thing07-1 {
    width: 82%;
    left: 8.5%;
    bottom: 57%;
    -webkit-mask: url("../images/thing07-1.png") no-repeat center center;
    mask: url("../images/thing07-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* ▼footer▼ */
footer {
    background: #000;
    padding: 3% 0;
}

footer div {
    color: #fff;
    text-align: center;
    font-size: 0.75em;
    font-weight: 500;
    letter-spacing: 1px;
}

footer div a {
    display: inline-block;
    color: #fff;
    margin: 0 0 20px 0;
    text-decoration: underline;
}

footer div a:hover {
    text-decoration: none;
}

@media screen and (max-width: 1024px) {
    footer {
        padding: 5% 0;
    }
}
/* ▲footer▲ */