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: 1920px;
    margin: 0 auto;
    /* 【超過】 開版範圍 就不呈現 */
    overflow: hidden;
}

.STAcontainer {
    /* 這裡1000是因為要符合手機模式 */
    max-width: 1000px;
    margin: 0 auto;

}

/* 背景設定 【適用於 1920】 若是1000 不必設定*/
.bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.header{
    display: none;
    background-image: url(../images/headerPC.jpg);
}
.bg1 {
    background-image: url(../images/BG/BG_01.jpg);
}

.bg2 {
    background-image: url(../images/BG/BG_02.jpg);
}

.bg3 {
    background-image: url(../images/BG/BG_03.jpg);
}

.bg4 {
    background-image: url(../images/BG/BG_04.jpg);
}

.bg5 {
    background-image: url(../images/BG/BG_05.jpg);
}

.bg6 {
    background-image: url(../images/BG/BG_06.jpg);
}

.bg7 {
    background-image: url(../images/BG/BG_07.jpg);
}

.bg8 {
    background-image: url(../images/BG/BG_08.jpg);
}

.bg8-1 {
    background-image: url(../images/BG/BG_08-1.jpg);
}

.bg9 {
    background-image: url(../images/BG/BG_09.jpg);
}

.bg10 {
    background-image: url(../images/BG/BG_10.jpg);
}

.bg11 {
    background-image: url(../images/BG/BG_11.jpg);
}

.bg12 {
    background-image: url(../images/BG/BG_12.jpg);
}

.bg13 {
    background-image: url(../images/BG/BG_13.jpg);
}

.bg14 {
    background-image: url(../images/BG/BG_14.jpg);
}

.bg15 {
    background-image: url(../images/BG/BG_15.jpg);
}

.bg16 {
    background-image: url(../images/BG/BG_16.jpg);
}

.bg17 {
    background-image: url(../images/BG/BG_17.jpg);
}

/* 定位 */
.thing01-1 {
    width: 100%;
    left: 0%;
    top: 34%;
    scale: 1.920;
    z-index: 2;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing01-2 {
    width: 35.2%;
    left: 32.3%;
    top: 25.4%;
    -webkit-mask: url("../images/thing01-2.png") no-repeat center center;
    mask: url("../images/thing01-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing03-1 {
    width: 100%;
    left: 0%;
    top: 22%;
    scale: 1.920;
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
}

.thing03-2 {
    width: 94.7%;
    left: 2.5%;
    top: 18.8%;
}

.thing03-3 {
    width: 100%;
    left: 28%;
    top: 38%;
    scale: 1.184;
    mix-blend-mode: screen;
}

.thing03-4 {
    width: 94.7%;
    left: 2.5%;
    top: 43%;
}

.thing03-5 {
    width: 100%;
    left: 24%;
    top: 60%;
    scale: 1.184;
    mix-blend-mode: screen;
}

.thing03-6 {
    width: 94.7%;
    left: 2.5%;
    top: 67%;
}

.thing03-7 {
    width: 100%;
    left: 7%;
    top: 67.5%;
    scale: 1.543;
    mix-blend-mode: screen;
}

.thing04-1 {
    width: 70.4%;
    left: 5%;
    top: 25.15%;
}

.thing04-2 {
    width: 49.9%;
    left: 39.5%;
    top: 47.5%;
}

.thing04-3 {
    width: 34.1%;
    left: 3.5%;
    top: 78.5%;
    filter: drop-shadow(0px 15px 20px rgba(0, 0, 0, 0.4));
    animation: movedown 2s infinite ease-in-out;
}

.thing04-4 {
    width: 35%;
    left: 36.5%;
    top: 81.6%;
    filter: drop-shadow(0px 15px 20px rgba(0, 0, 0, 0.4));
    animation: movedown 2s .25s infinite ease-in-out;
}

.thing04-5 {
    width: 32.7%;
    left: 63.5%;
    top: 77%;
    filter: drop-shadow(0px 15px 20px rgba(0, 0, 0, 0.4));
    animation: movedown 2s .5s infinite ease-in-out;
}

@media (max-width:768px) {
    .thing04-3 {
        filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.4));
    }

    .thing04-4 {
        filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.4));
    }

    .thing04-5 {
        filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.4));
    }
}

.thing05-1 {
    width: 46%;
    left: -7%;
    top: 39%;
}

.thing05-2 {
    width: 65.9%;
    left: 3%;
    top: 61.8%;
}

.thing05-3 {
    width: 87.9%;
    left: 9.5%;
    top: 75%;
}

.thing06-1 {
    width: 36.3%;
    left: 6%;
    top: 26.4%;
}

.thing06-2 {
    width: 32.2%;
    right: 2.5%;
    top: 36%;
}

.thing06-3 {
    width: 35.4%;
    left: 2%;
    top: 54.1%;
}

.thing06-4 {
    width: 42.9%;
    left: 8%;
    top: 69.8%;
}

.thing06-5 {
    width: 45.7%;
    left: 29%;
    bottom: 4.05%;
}

.thing06-6 {
    width: 58.7%;
    left: 42.5%;
    top: 51%;
}

.thing06-7 {
    width: 41.1%;
    left: 32.5%;
    top: 27.4%;
}

.thing07-1 {
    width: 34.8%;
    left: 4.5%;
    top: 16.6%;
    filter: drop-shadow(-20px 25px 20px rgba(213, 137, 62, 0.8));
}

.thing07-2 {
    width: 30.8%;
    right: 3%;
    bottom: 29.6%;
    filter: drop-shadow(-20px 25px 20px rgba(0, 0, 0, 0.4));
}

.thing07-3 {
    width: 32.3%;
    left: 11.5%;
    bottom: 14.2%;
    filter: drop-shadow(-5px 5px 20px rgba(213, 137, 62, 0.8));
}

.thing07-4 {
    width: 41.4%;
    left: 2.5%;
    bottom: 7.8%;
    filter: drop-shadow(-20px 25px 20px rgba(213, 137, 62, 0.8));
}

@media (max-width:768px) {

    .thing07-1 {
        filter: drop-shadow(-10px 7.5px 10px rgba(213, 137, 62, 0.8));
    }

    .thing07-2 {
        filter: drop-shadow(-10px 7.5px 10px rgba(0, 0, 0, 0.4));
    }

    .thing07-3 {
        filter: drop-shadow(-5px 5px 20px rgba(213, 137, 62, 0.8));
    }

    .thing07-4 {
        filter: drop-shadow(-10px 7.5px 10px rgba(213, 137, 62, 0.8));
    }
}

.thing09-1 {
    width: 92.6%;
    height: 21%;
    right: 3.6%;
    top: 27.9%;
}

.thing09-2 {
    width: 21.3%;
    right: 8%;
    bottom: 30.3%;
    z-index: 1;
}

.thing09-3 {
    width: 38.6%;
    right: -13%;
    bottom: 28%;
    mix-blend-mode: difference;
    pointer-events: none;
}

.thing10-1 {
    width: 100%;
    left: 0%;
    top: 27%;
    scale: 1.920;
    mix-blend-mode: screen;
    z-index: 3;
    pointer-events: none;
}

.thing11-1 {
    width: 17.8%;
    right: 13%;
    bottom: 13%;
}

.thing12-1 {
    width: 63.5%;
    right: 18%;
    bottom: 17%;
}
@media (max-width:768px) {
    .thing12-1{
        bottom: 8%;
    }
}

.thing15-1 {
    width: 100%;
    left: 0%;
    top: 5%;
    scale: 1.920;
    mix-blend-mode: screen;
    z-index: 3;
    pointer-events: none;
}

.thing15-2 {
    width: 48.1%;
    left: 7%;
    top: 11%;
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
}

.thing15-3 {
    width: 48.1%;
    left: 7%;
    top: 11%;
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
}

.thing15-4 {
    width: 48.1%;
    left: 7%;
    top: 11%;
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
}

.mail {
    width: 100%;
    height: 16%;
    left: 0%;
    top: 33%;
}
.tel {
    width: 100%;
    height: 15%;
    left: 0%;
    top: 51%;
}
.infourl {
    width: 90%;
    left: 4%;
    bottom: 11%;
    display: flex;
    justify-content: space-evenly;
    gap: 2vw;
}