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: 94.3%;
    top: 0.25%;
    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;
}

.thing01-2 {
    width: 100%;
    top: -4.55%;
    left: 0%;
    mix-blend-mode: screen;
}

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

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

.thing01-5 {
    width: 43.5%;
    top: 21.5%;
    left: 0%;
}

.thing01-6 {
    width: 46.4%;
    top: 37.5%;
    left: 20.5%;
}

.thing02-1 {
    width: 76.8%;
    top: 3.3%;
    right: 2.7%;
    -webkit-mask: url("../images/thing02-1.png") no-repeat center center;
    mask: url("../images/thing02-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing02-2 {
    width: 22.3%;
    top: 45.5%;
    right: 3%;
    z-index: 1;
}

.thing02-3 {
    width: 20.2%;
    top: 49.5%;
    right: 0%;
    mix-blend-mode: screen;
    z-index: 1;
}

.thing02-4 {
    width: 81.7%;
    height: 23.4%;
    left: 9%;
    top: 28.2%;
}

.thing03-1 {
    width: 24.4%;
    top: 21.25%;
    right: 16.5%;
}

.thing03-2 {
    width: 24.4%;
    top: 22.8%;
    left: 32.75%;
}

.thing03-3 {
    width: 24.4%;
    top: 29.6%;
    left: 10%;
}

.thing03-4 {
    width: 24.4%;
    top: 40.65%;
    left: 2.5%;
}

.thing03-5 {
    width: 24.4%;
    top: 52.6%;
    left: 2.4%;
}

.thing03-6 {
    width: 24.4%;
    top: 61.5%;
    left: 17.6%;
}

.thing03-7 {
    width: 24.4%;
    top: 67.69%;
    left: 39.7%;
}

.thing04-1 {
    width: 82.9%;
    top: 8.2%;
    left: 8.8%;
}

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

.thing04-3 {
    width: 34.0%;
    top: 27.22%;
    left: 0%;
}

.thing04-4 {
    width: 22.5%;
    top: 52.85%;
    left: 0.7%;
}

.thing04-5 {
    width: 33.1%;
    top: 32.8%;
    right: 0%;
}

.thing04-6 {
    width: 19.0%;
    top: 53.7%;
    right: 0%;
}

.thing04-7 {
    width: 93.0%;
    bottom: 4.6%;
    left: 3.5%;
    -webkit-mask: url("../images/thing04-7.png") no-repeat center center;
    mask: url("../images/thing04-7.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing04-8 {
    width: 100.0%;
    top: -19.25%;
    left: 0%;
    mix-blend-mode: screen;
}


.thing05-1 {
    width: 23.6%;
    top: 24.5%;
    left: 19%;
}

.thing05-2 {
    width: 21.6%;
    top: 14%;
    left: 0%;
}

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

.thing05-4 {
    width: 42.6%;
    top: 25.4%;
    left: 32.6%;
}

.thing05-5 {
    width: 38.6%;
    top: 42%;
    right: 3%;
}

.thing05-6 {
    width: 40.2%;
    top: 57%;
    right: 11%;
}

.thing05-7 {
    width: 37.5%;
    top: 52%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing05-8 {
    width: 56.0%;
    bottom: 4%;
    left: 22%;
}

.thing06-1 {
    width: 23.7%;
    top: 29.5%;
    right: 16%;
}

.thing06-2 {
    width: 42.2%;
    top: 39%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing06-3 {
    width: 42.6%;
    top: 31.6%;
    left: 25%;
}

.thing06-4 {
    width: 39.3%;
    top: 48.5%;
    left: 8%;
}

.thing06-5 {
    width: 35.8%;
    top: 67.5%;
    left: 24.5%;
}

.thing06-6 {
    width: 38.6%;
    top: 76%;
    left: 0%;
}

.thing06-7 {
    width: 34.1%;
    top: 66%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing06-8 {
    width: 45%;
    height: 12%;
    top: 76.5%;
    right: 0%;
    cursor: pointer;
}

.thing06-9 {
    width: 5.8%;
    bottom: 9%;
    right: 4.5%;
    pointer-events: none;
}


.thing07-1 {
    width: 49.3%;
    top: 2%;
    left: 7.5%;
}

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

.thing07-3 {
    width: 100.0%;
    top: 47.3%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing09-1 {
    width: 32.6%;
    top: 33.5%;
    left: 38%;
}

.thing10-1 {
    width: 32.7%;
    top: 18.5%;
    left: 38%;
}

.thing11-1 {
    width: 93.5%;
    top: 2.5%;
    left: 3.5%;
}

.thing11-2 {
    width: 99.1%;
    top: 12.5%;
    left: 1%;
    mix-blend-mode: screen;
}

.thing11-3 {
    width: 40.4%;
    top: 22.5%;
    left: 0%;
}

.thing11-3-1 {
        width: 31.9%;
    top: 23.95%;
    left: 4.55%;
    -webkit-mask: url("../images/thing10-3-1.png") no-repeat center center;
    mask: url("../images/thing10-3-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing11-4 {
    width: 45.7%;
    top: 44%;
    left: 4.5%;
}

.thing11-4-1 {
      width: 31.6%;
    top: 45.6%;
    left: 15%;
    -webkit-mask: url("../images/thing10-4-1.png") no-repeat center center;
    mask: url("../images/thing10-4-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing11-5 {
    width: 49.8%;
    top: 15%;
    left: 0%;
    mix-blend-mode: screen;
}

.thing11-6 {
    width: 40.0%;
    top: 24.25%;
    left: 0%;
}


.thing12-1 {
    width: 34.2%;
    top: 16.5%;
    right: 0%;
}

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

.thing12-3 {
    width: 30.4%;
    top: 22.4%;
    right: 3.85%;
}

.thing13-1 {
    width: 34.2%;
    top: 17.5%;
    right: 0%;
}

.thing13-2 {
    width: 36.6%;
    top: 16%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing13-3 {
    width: 30.4%;
    top: 21.8%;
    right: 3.85%;
}
.tel{
       width: 100%;
    height: 9%;
    left: 0%;
    top: 72%;
}

.mail{
       width: 100%;
    height: 5%;
    left: 0%;
    bottom: 7%;
}