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;
    color: #000;
}

*,
*::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;
}

.bg1 {
    background-image: url(../images/BG/BG_1.jpg);
}

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

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

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

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

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

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

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

.bg9 {
    background-image: url(../images/BG/BG_9.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); */
    background-image: url(../images/BG/BG_12-01.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);
}

.bg18 {
    background-image: url(../images/BG/BG_18.jpg);
}

.bg19 {
    background-image: url(../images/BG/BG_19.jpg);
}

.bg20 {
    background-image: url(../images/BG/BG_20.jpg);
}

.bg21 {
    background-image: url(../images/BG/BG_21.jpg);
}

.bg22 {
    background-image: url(../images/BG/BG_22.jpg);
}

.QA1 {
    background-image: url(../images/QA/01.jpg);
}

.QA2 {
    background-image: url(../images/QA/02.jpg);
}

.QA3 {
    background-image: url(../images/QA/03.jpg);
}

.QA4 {
    background-image: url(../images/QA/04.jpg);
}

.QA5 {
    background-image: url(../images/QA/05.jpg);
}

.QA6 {
    background-image: url(../images/QA/06.jpg);
}

.QA7 {
    background-image: url(../images/QA/07.jpg);
}

.QA8 {
    background-image: url(../images/QA/08.jpg);
}

.QA9 {
    background-image: url(../images/QA/09.jpg);
}

.QA10 {
    background-image: url(../images/QA/10.jpg);
}

.QA11 {
    background-image: url(../images/QA/11.jpg);
}

/* 定位 */
.thing01-1 {
    width: 100%;
    left: 0%;
    top: 21%;
    scale: 1.920;
    mix-blend-mode: screen;
    animation: shinny 1.5s infinite ease-in-out;
}

.thing01-2 {
    width: 100%;
    left: 0%;
    top: 11.5%;
    scale: 1.093;
    -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;
}

.thing01-3 {
    width: 100%;
    left: 0%;
    top: 5%;
    scale: 1.920;
    mix-blend-mode: screen;
    animation: shinnyRotate 1.5s .25s infinite ease-in-out;
}

.thing01-4 {
    width: 29%;
    left: -1%;
    top: 34%;
    mix-blend-mode: overlay;
    animation: arrowUP 2s infinite ease-in-out;
}

.thing01-5 {
    width: 22.9%;
    left: 2.5%;
    top: 39.6%;
    animation: arrowUP 2s infinite ease-in-out;
}

.thing01-6 {
    width: 25.6%;
    right: 3%;
    top: 48.5%;
    mix-blend-mode: overlay;
    animation: arrowUP 2s .25s infinite ease-in-out;
}

.thing01-7 {
    width: 21.3%;
    right: 5%;
    top: 53.8%;
    animation: arrowUP 2s .25s infinite ease-in-out;
}

.thing01-8 {
    width: 33.9%;
    left: 26%;
    bottom: 9.4%;
    mix-blend-mode: screen;
    animation: arrowUP 2s .5s infinite ease-in-out;
}

.thing01-9 {
    width: 27.2%;
    left: 30%;
    bottom: 16.3%;
    animation: arrowUP 2s .5s infinite ease-in-out;
}

.thing01-10 {
    width: 67.6%;
    left: 16.2%;
    top: 2.6%;
}

.thing02-1 {
    width: 58.8%;
    right: 37%;
    top: 8%;
    animation: scale 1.5s infinite ease-in-out;
}

.thing02-2 {
    width: 87.5%;
    left: 3.5%;
    bottom: 11.5%;
    mix-blend-mode: multiply;
}

.thing02-3 {
    width: 62.2%;
    left: 24.9%;
    bottom: 13.6%;
}

.thing02-4 {
    width: 60.5%;
    left: 24.2%;
    bottom: 9.3%;
}

.thing03-0 {
    width: 26.7%;
    left: 36.5%;
    bottom: 18.5%;
    z-index: 1;
}

.thing03-1 {
    width: 13.8%;
    left: -3%;
    bottom: 29.5%;
}

.thing03-2 {
    width: 16.3%;
    left: 3%;
    bottom: 26.8%;
}

.thing03-3 {
    width: 19.1%;
    left: 11.6%;
    bottom: 24.5%;
}

.thing03-4 {
    width: 22.4%;
    left: 22.8%;
    bottom: 21.8%;
}

.thing03-5 {
    width: 13.8%;
    left: 90.5%;
    bottom: 29.5%;
}

.thing03-6 {
    width: 16.3%;
    left: 82%;
    bottom: 26.8%;
}

.thing03-7 {
    width: 19.1%;
    left: 70.6%;
    bottom: 24.5%;
}

.thing03-8 {
    width: 22.4%;
    left: 55.6%;
    bottom: 21.8%;

}

.thing03-9 {
    width: 93%;
    left: 3%;
    bottom: 0%;
}



.thing03-10 {
    width: 23.3%;
    left: 8%;
    top: 7%;
    z-index: 1;
    animation: rotate 1s steps(1) infinite;
}

.thing03-11 {
    width: 100%;
    left: 0%;
    top: -12%;
    scale: 1.920;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing03-12 {
    width: 100%;
    left: 0%;
    top: 10%;
    scale: 1.920;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing04-1 {
    width: 30.3%;
    left: 2%;
    top: 7%;
    animation: rotate 1s steps(1) infinite;
}

.thing04-2 {
    width: 28.2%;
    right: 4%;
    top: 8.5%;
    animation: rotate 1s steps(1) infinite alternate;
}

.thing04-3 {
    width: 62.2%;
    left: 19%;
    top: 32.8%;
    z-index: 1;
    pointer-events: none;
}

.thing04-4 {
    width: 57.1%;
    left: 22%;
    top: 39.3%;
}

.thing05-1 {
    width: 47.5%;
    right: 9.4%;
    top: 16%;
    -webkit-mask: url("../images/thing05-1.png") no-repeat center center;
    mask: url("../images/thing05-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing05-2 {
    width: 100%;
    right: 0%;
    top: -10.5%;
    scale: 1.920;
    mix-blend-mode: screen;
    pointer-events: none;
}

.thing05-3 {
    width: 23.4%;
    left: 15%;
    top: 45.4%;
    /* z-index: 1; */
}

.thing05-4 {
    width: 56%;
    height: 18.5%;
    left: 31%;
    top: 46%;
}

.thing05-5 {
    width: 75.5%;
    left: 12%;
    bottom: 10.5%;
}

.thing06-1 {
    width: 40.8%;
    left: 32%;
    top: 5%;
}

.thing06-2 {
    width: 87.7%;
    left: 7%;
    top: 8%;
}

.thing06-3 {
    width: 89%;
    left: 5.5%;
    top: 34.1%;
}

.thing06-4 {
    width: 41.8%;
    left: 2.5%;
    top: 36.5%;
}

.thing06-5 {
    width: 88.9%;
    left: 5.5%;
    top: 52.4%;
}

.thing06-6 {
    width: 46.7%;
    left: 52%;
    top: 55.4%;
}

.thing06-7 {
    width: 90.6%;
    left: 6%;
    top: 86%;
}

.thing07-1 {
    width: 29.5%;
    left: 5%;
    bottom: 19.65%;
}

.thing07-2 {
    width: 29.5%;
    left: 5%;
    bottom: 19.65%;
}

.thing07-3 {
    width: 29.5%;
    left: 35.7%;
    bottom: 19.7%;
}

.thing07-4 {
    width: 29.5%;
    left: 35.7%;
    bottom: 19.7%;
}

.thing07-5 {
    width: 29.5%;
    right: 4.5%;
    bottom: 19.8%;
}

.thing07-6 {
    width: 29.5%;
    right: 4.5%;
    bottom: 19.8%;
}

.thing08-1 {
    width: 45.3%;
    left: 46.6%;
    bottom: 47.65%;
}

.thing08-2 {
    width: 45.3%;
    left: 1.5%;
    bottom: 27.65%;
}

.thing09-1 {
    width: 80%;
    left: 10%;
    top: 46%;
}

@media (max-width:768px) {
    .thing09-1 {
        width: 60%;
        left: 20.5%;
        top: 41%;

    }
}

.thing10-1 {
    width: 24.7%;
    left: 14.4%;
    bottom: 51.6%;
}

.thing10-2 {
    width: 24.4%;
    left: 39%;
    bottom: 51.6%;
}

.thing10-3 {
    width: 22.2%;
    left: 62.7%;
    bottom: 51.5%;
}


.thing10-4 {
    width: 95.4%;
    left: 2.5%;
    bottom: -20.5%;
}

.thing10-5 {
    width: 49.5%;
    left: 36.6%;
    bottom: 25%;
    mix-blend-mode: screen;
}

.thing10-6 {
    width: 49.5%;
    left: -6%;
    bottom: 8.65%;
    mix-blend-mode: screen;
}

.thing10-7 {
    width: 27.6%;
    left: 5%;
    bottom: 2%;
}

.thing11-1 {
    width: 28.7%;
    left: 0.4%;
    bottom: 32.7%;
    animation: arrowUP 1.5s infinite ease-in-out;
}

.thing11-2 {
    width: 31.6%;
    left: 37.2%;
    bottom: 33.5%;
    animation: arrowUP 1.5s .25s infinite ease-in-out;

}

.thing11-3 {
    width: 27%;
    left: 72.8%;
    bottom: 40.6%;
    animation: arrowUP 1.5s .5s infinite ease-in-out;

}

.thing12-1 {
    width: 89.6%;
    left: 5%;
    bottom: 10%;
    z-index: 1;
    pointer-events: none;
}

.thing12-2 {
    width: 89.4%;
    height: 18.85%;
    left: 5.1%;
    bottom: 10.1%;
}

.thing13-1 {
    width: 22.1%;
    left: 2.5%;
    bottom: 43.7%;
    animation: circleRotate 6s infinite linear;
}

.thing13-2 {
    width: 22.1%;
    left: 9.5%;
    top: 38.4%;
    animation: circleRotate 6s .1s infinite linear;
}

.thing13-3 {
    width: 27.4%;
    left: 29.8%;
    top: 29.6%;
    animation: circleRotate 6s .2s infinite linear;
}

.thing13-4 {
    width: 27.4%;
    right: 11%;
    top: 32.8%;
    animation: circleRotate 6s .3s infinite linear;
}

.thing13-5 {
    width: 22%;
    right: 2.5%;
    top: 44%;
    animation: circleRotate 6s .4s infinite linear;
}

.thing13-6 {
    width: 100%;
    left: 0%;
    top: 25%;
    scale: 1.920;
    mix-blend-mode: screen;
    pointer-events: none;
}

/*
    thing14 S
*/
.thing14CardBtn-01 {
    width: 26.1%;
    right: 39%;
    top: 16.2%;
}

.thing14Card-01 {
    width: 42.8%;
    right: 1%;
    top: 14%;
    pointer-events: none;
}

.thing14CardBtn-02 {
    width: 23.4%;
    left: 7.5%;
    top: 27.2%;
}

.thing14Card-02 {
    width: 42.8%;
    right: 28.8%;
    top: 24.4%;
    pointer-events: none;
}

.thing14CardBtn-03 {
    width: 23.4%;
    left: 2.6%;
    top: 41.6%;
}

.thing14Card-03 {
    width: 42.8%;
    left: 20%;
    top: 38.8%;
    pointer-events: none;
}

.thing14CardBtn-04 {
    width: 23.3%;
    left: 4%;
    top: 57.9%;
}

.thing14Card-04 {
    width: 42.8%;
    right: 34%;
    top: 54%;
    pointer-events: none;
}

.thing14CardBtn-05 {
    width: 23.4%;
    right: 36.6%;
    bottom: 24%;
}

.thing14Card-05 {
    width: 42.8%;
    right: -1%;
    bottom: 35.56%;
    pointer-events: none;
}



/*
    thing14 E
*/

.thing15-1 {
    width: 24.4%;
    left: 24%;
    top: 14.5%;
}

.thing15-2 {
    width: 24.4%;
    left: 51.8%;
    top: 14.6%;
}

.thing15-3 {
    width: 24.4%;
    left: 9.5%;
    top: 29%;
}

.thing15-4 {
    width: 24.4%;
    left: 37.6%;
    top: 29%;
}

.thing15-5 {
    width: 24.4%;
    right: 9.6%;
    top: 29%;
}

.thing16-1 {
    width: 86.7%;
    right: 9.6%;
    top: 10%;
}

.thing19-1 {
    width: 25.2%;
    left: 3%;
    top: 1%;
    -webkit-mask: url("../images/free.png") no-repeat center center;
    mask: url("../images/free.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing20-1 {
    width: 25.2%;
    left: 3%;
    top: 2%;
    -webkit-mask: url("../images/free.png") no-repeat center center;
    mask: url("../images/free.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing21-1 {
    width: 25.2%;
    left: 3%;
    top: 3%;
    -webkit-mask: url("../images/free.png") no-repeat center center;
    mask: url("../images/free.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.mail {
    width: 88.8%;
    left: 6%;
    top: 36%;
}

.tel {
    width: 88.8%;
    left: 6%;
    top: 53%;
}

/* QA S */
.QA2-arrow {
    width: 4%;
    right: 10%;
    bottom: 34%;
    transition: all .3s;
}

.QA4-arrow {
    width: 4%;
    right: 10%;
    bottom: 45%;
    transition: all .3s;
}

.QA6-arrow {
    width: 4%;
    right: 10%;
    top: 35%;
    transition: all .3s;
}

.QA8-arrow {
    width: 4%;
    right: 10%;
    top: 40%;
    transition: all .3s;
}

.QA10-arrow {
    width: 4%;
    right: 18%;
    top: 42%;
    transition: all .5s;
}

.arrow-active {
    rotate: -180deg
}

/* QA E */

/* eventsBanner */
.tenth {
    background-image: url(../images/BG/header_20251010_HK1_01.jpg);
}

.eleven {
    background-image: url(../images/BG/header_20251111_HK2_01.jpg);
}
.W12 {
    background-image: url(../images/BG/header_20260101_HK25_01.jpg);
}

.newYear {
    background-image: url(../images/BG/header_20260101_HK3_01.jpg);
}

.momDay {
    background-image: url(../images/BG/header_20260401_HK4_01.jpg);
}

.eventsBanner {
    display: none;
}

/* RWD  */
@media (max-width:768px) {
    .tenth {
        background-image: url(../images/BG/header_20251010_HK1_02.jpg);
    }

    .eleven {
        background-image: url(../images/BG/header_20251111_HK2_02.jpg);
    }
    .W12 {
        background-image: url(../images/BG/header_20260101_HK25_02.jpg);
    }
    .newYear {
        background-image: url(../images/BG/header_20260101_HK3_02.jpg);
    }

    .momDay {
        background-image: url(../images/BG/header_20260401_HK4_02.jpg);
    }

    .thing09-1 {
        width: 60%;
        left: 20.5%;
        top: 41%;
    }
}