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;
}

/* section{
    overflow: hidden;
} */

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

}

/* 背景設定 【適用於 1920】 若是1000 不必設定*/
.bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


.bg0 {
    max-width: 1920px;
    margin: 0 auto;
    background-image: url(../images/BG/BG_00.jpg);
}

.bg1 {
    /* 這裡放入底圖 */
    /* background-image: url(填圖片路徑); */
    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);
}

.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);
}

@media (max-width:768px) {
    .bg14 {
        background-image: url(../images/BG/BG_14SP.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);
}

/* 以此類推 */

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

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

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

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

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

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

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

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

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

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

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

.bgQA12 {
    background-image: url(../images/QA/12.jpg);
}

.bgQA13 {
    background-image: url(../images/QA/13.jpg);
}

.bgQA14 {
    background-image: url(../images/QA/14.jpg);
}

.bgQA15 {
    background-image: url(../images/QA/15.jpg);
}

.bgQA16 {
    background-image: url(../images/QA/16.jpg);
}

.bgQA17 {
    background-image: url(../images/QA/17.jpg);
}

.bgQA18 {
    background-image: url(../images/QA/18.jpg);
}

.QAthing03-1 {
    width: 31.3%;
    left: 9%;
    top: 5%;
}

.QAthing13-1 {
    width: 41%;
    left: 15%;
    top: 5%;
}

/* 定位 */
/* BG-1 */
.thing01-1 {
    width: 37.2%;
    left: 55.5%;
    bottom: 62%;
}

.thing01-2 {
    width: 40.6%;
    left: 3.5%;
    bottom: 44%;
    -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: 38.8%;
    left: 56%;
    bottom: 44.5%;
    -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: 15.1%;
    left: 17.5%;
    bottom: 49.8%;
    mix-blend-mode: screen;
}

.thing01-5 {
    width: 13.8%;
    left: 69%;
    bottom: 49%;
    mix-blend-mode: screen;
}

.thing01-6 {
    width: 36.1%;
    left: 33%;
    bottom: 16.2%;
}

.thing01-7 {
    width: 33.1%;
    left: 36%;
    bottom: 58.2%;
    mix-blend-mode: screen;
    animation: shinny 1.5s infinite ease-in-out;
}

.thing01-8 {
    width: 100%;
    left: 29%;
    bottom: 3%;
    scale: 1.236;
    mix-blend-mode: screen;
}

.thing01-9 {
    width: 26.3%;
    left: 7.2%;
    bottom: 22.2%;
    animation: moveDown 2s infinite ease-in-out;
}

.thing01-10 {
    width: 12.1%;
    left: 27.2%;
    bottom: 24.2%;
    animation: moveDown 2s infinite ease-in-out;
}

.thing01-11 {
    width: 22.7%;
    left: 71.2%;
    bottom: 25.2%;
    animation: moveDown 2s .25s infinite ease-in-out;
}

.thing01-12 {
    width: 25.5%;
    left: 62.2%;
    bottom: 16.2%;
    animation: moveDown 2s .5s infinite ease-in-out;
}

.thing01-13 {
    width: 10.9%;
    left: 11%;
    top: -36%;
    z-index: 11;
}

@media (max-width:768px) {
    .thing01-13 {
        width: 10.9%;
        left: 11%;
        top: 4%;
        z-index: 9;
    }
}

/* BG-2 */
.thing02-1 {
    width: 31.7%;
    left: 9.5%;
    bottom: 86%;
}

.thing02-2 {
    width: 72%;
    left: 13.5%;
    bottom: 7%;
}

.thing02-3 {
    width: 48.4%;
    left: 62.5%;
    bottom: 19%;
    mix-blend-mode: screen;
    animation: shinny 1.5s infinite ease-in-out;
}

/* BG-3 */
.thing03-1 {
    width: 38.7%;
    left: 11.5%;
    bottom: 88.2%;
}

.thing03-2 {
    width: 46.8%;
    left: -6.5%;
    bottom: 37.2%;
    -webkit-mask: url("../images/thing03-2.png") no-repeat center center;
    mask: url("../images/thing03-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing03-3 {
    width: 100%;
    left: 33.5%;
    bottom: 36.2%;
    scale: 1.246;
}

.thing03-4 {
    width: 22%;
    left: 74.5%;
    bottom: 39.2%;
}

.thing03-5 {
    width: 90%;
    height: 22.2%;
    left: 5%;
    bottom: 4%;
}

/* BG-4 */
.thing04-1 {
    width: 87.2%;
    left: 6%;
    bottom: 55.2%;
    -webkit-mask: url("../images/thing04-1.png") no-repeat center center;
    mask: url("../images/thing04-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing04-2 {
    width: 83.3%;
    left: 2%;
    bottom: 33.2%;
}

.thing04-3 {
    width: 92.3%;
    left: 9%;
    bottom: 23.6%;
}

.thing04-4 {
    width: 90.1%;
    left: 5%;
    bottom: 10%;
    -webkit-mask: url("../images/thing04-4.png") no-repeat center center;
    mask: url("../images/thing04-4.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* BG-5 */
.thing05-1 {
    width: 23.7%;
    left: 19%;
    bottom: 80.5%;
}

.thing05-2 {
    width: 26.6%;
    left: 54%;
    bottom: 80.5%;
}

.thing05-3 {
    width: 96.7%;
    left: 2%;
    bottom: 40.5%;
}

.thing05-4 {
    width: 16%;
    left: -8%;
    bottom: 53.5%;
}

.thing05-5 {
    width: 78.7%;
    left: -2%;
    bottom: 37%;
}

.thing05-6 {
    width: 38.1%;
    left: 8%;
    bottom: 35.5%;
    mix-blend-mode: screen;
}

.thing05-7 {
    width: 38.1%;
    left: 44%;
    bottom: 39.5%;
    mix-blend-mode: screen;
}

/* BG-6 */
.thing06-1 {
    width: 73.7%;
    left: 24%;
    bottom: 82.5%;
    -webkit-mask: url("../images/thing06-1.png") no-repeat center center;
    mask: url("../images/thing06-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing06-2 {
    width: 15.1%;
    left: 36%;
    bottom: 85.5%;
    mix-blend-mode: screen;
}

.thing06-3 {
    width: 13.8%;
    left: 69%;
    bottom: 85.5%;
    mix-blend-mode: screen;
}

.thing06-4 {
    width: 19.5%;
    left: 79.5%;
    bottom: 50.5%;
}

.thing06-5 {
    width: 24.4%;
    left: 66%;
    bottom: 25.5%;
    -webkit-mask: url("../images/thing06-5.png") no-repeat center center;
    mask: url("../images/thing06-5.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}

.thing06-6 {
    width: 77%;
    left: 12%;
    bottom: 12.5%;
}

.thing06-7 {
    width: 82.4%;
    height: 24%;
    left: 8%;
    bottom: 47%;
}

/* BG-7 */
.thing07-1 {
    width: 68.3%;
    left: 30%;
    bottom: 78%;
}

.thing07-2 {
    width: 39%;
    left: 58%;
    bottom: 36%;
}

.thing07-3 {
    width: 37.7%;
    left: 4%;
    bottom: 21%;
}

.thing07-4 {
    width: 37.2%;
    left: 54%;
    bottom: 13%;
}

/* BG-8 */
.thing08-1 {
    width: 37.3%;
    left: 4%;
    bottom: 44.5%;
    animation: rotate 1.5s infinite steps(1);
}

.thing08-2 {
    width: 34.4%;
    left: 26%;
    bottom: 36%;
    animation: rotate 1.5s .25s infinite steps(1);
}

.thing08-3 {
    width: 37.8%;
    left: 60%;
    bottom: 43%;
    animation: rotate 1.5s .5s infinite steps(1);
}

.thing08-4 {
    width: 55.7%;
    left: 21.5%;
    bottom: 18%;
    animation: arrowDown 1.5s infinite ease-in-out;
    transform-origin: top left;
}

.thing08-5 {
    width: 100%;
    left: 0%;
    bottom: 59%;
}

/* BG-9 */
.thing09-1 {
    width: 94.9%;
    left: 3%;
    bottom: 78.5%;
    -webkit-mask: url("../images/thing09-1.png") no-repeat center center;
    mask: url("../images/thing09-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing09-2 {
    width: 37%;
    left: -1%;
    bottom: 76.5%;
    mix-blend-mode: screen;
}

.thing09-3 {
    width: 31.4%;
    left: 48%;
    bottom: 77.5%;
    mix-blend-mode: screen;
}

.thing09-4 {
    width: 36.5%;
    left: -1%;
    bottom: 55.5%;
    animation: moveDown 2s infinite ease-in-out;
}

.thing09-5 {
    width: 36.5%;
    right: 8%;
    bottom: 50.5%;
    animation: moveDown 2s .25s infinite ease-in-out;
}

.thing09-6 {
    width: 36.5%;
    left: 0%;
    bottom: 32%;
    animation: moveDown 2s .5s infinite ease-in-out;
}

.thing09-7 {
    width: 72.2%;
    left: 32.5%;
    bottom: 29%;
}

.thing09-8 {
    width: 100%;
    left: -3%;
    bottom: 30%;
    scale: 1.639;
    mix-blend-mode: screen;
}

.thing09-9 {
    width: 100%;
    left: 9.5%;
    bottom: 10%;
    scale: 1.115;
}

.thing10-1 {
    width: 66.1%;
    left: 29.5%;
    top: 6.5%;
    -webkit-mask: url("../images/thing10-1.png") no-repeat center center;
    mask: url("../images/thing10-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing10-2 {
    width: 93%;
    left: 4.5%;
    top: 26.8%;
}

.thing10-3 {
    width: 97.9%;
    left: -2.5%;
    top: 37%;
}

.thing11-1 {
    width: 65.7%;
    left: 2.5%;
    top: 10.1%;
}

.thing11-2 {
    width: 83.4%;
    left: 4.5%;
    top: 40.5%;
}

.thing11-3 {
    width: 76%;
    left: 6.5%;
    bottom: 2%;
}

.thing12-1 {
    width: 85.6%;
    left: 12.5%;
    top: 5.5%;
}

.thing12-2 {
    width: 25.6%;
    left: 4%;
    top: 35%;
    -webkit-mask: url("../images/thing12-2.png") no-repeat center center;
    mask: url("../images/thing12-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing12-3 {
    width: 69.6%;
    right: 3%;
    top: 43%;
}

.thing12-4 {
    width: 36.8%;
    left: 15.5%;
    top: 56%;
}

.thing12-5 {
    width: 21.8%;
    left: 44.5%;
    top: 61.75%;
    z-index: 1;
}

.thing12-6 {
    width: 36.8%;
    right: 5.5%;
    top: 56%;
}

.thing13-1 {
    width: 75.3%;
    left: 24.5%;
    top: 6.5%;
    -webkit-mask: url("../images/thing13-1.png") no-repeat center center;
    mask: url("../images/thing13-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing13-2 {
    width: 15.1%;
    left: 34%;
    top: 10%;
    mix-blend-mode: screen;
}

.thing13-3 {
    width: 13.8%;
    right: 24.5%;
    top: 5.5%;
    mix-blend-mode: screen;
}

.thing13-4 {
    width: 19.5%;
    right: 0.75%;
    top: 39.25%;
}

.thing13-5 {
    width: 24.4%;
    right: 10%;
    top: 40.5%;
    -webkit-mask: url("../images/thing13-5.png") no-repeat center center;
    mask: url("../images/thing13-5.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}

.thing13-6 {
    width: 28.1%;
    right: -2.5%;
    top: 49%;
    mix-blend-mode: screen;
}

.thing13-7 {
    width: 77%;
    right: 10%;
    bottom: 16%;
}

.thing13-8 {
    width: 84%;
    height: 23.55%;
    left: 8%;
    bottom: 48.5%;
}

.thing14-1 {
    width: 80%;
    left: 10%;
    top: 42%;
}

@media (max-width:768px) {
    .thing14-1 {
        width: 60%;
        left: 18.5%;
        top: 33%;
      
    }
}

.thing15-1 {
    width: 42.8%;
    left: 5%;
    top: 13%;
}

.thing15-2 {
    width: 53.2%;
    left: 44%;
    top: 12.5%;
}

.thing15-3 {
    width: 43.4%;
    left: 3%;
    top: 21%;
}

.thing15-4 {
    width: 47.7%;
    right: 2%;
    top: 18%;
}

.thing15-5 {
    width: 53.1%;
    left: 24.5%;
    top: 34.5%;
}

.thing15-6 {
    width: 100%;
    left: 0%;
    top: 59%;
}

@media (max-width:768px) {
    .thing15-6 {
        width: 85%;
        left: 9%;
        top: 59%;
    }
}


.thing16-1 {
    width: 98.9%;
    left: -3%;
    top: 2.75%;
}

.thing16-2 {
    width: 28.9%;
    left: 8.5%;
    top: 9%;
    mix-blend-mode: screen;
}

.thing16-3 {
    width: 31.4%;
    right: 12%;
    top: 10.25%;
    mix-blend-mode: screen;
}

.thing16-4 {
    width: 98.8%;
    right: 0.6%;
    top: 19%;
}

.thing16-5 {
    width: 2.1%;
    left: 46.5%;
    top: 52.8%;
    z-index: 1;
    animation: moveDown 2s infinite ease-in-out;
}

.thing16-6 {
    width: 99%;
    left: 2%;
    top: 57%;
}

.thing16-7 {
    width: 82%;
    height: 12.32%;
    left: 12%;
    bottom: 10.5%;
}

.thing17-1 {
    width: 89.8%;
    left: 5%;
    top: 2.75%;
}

.thing17-2 {
    width: 43.9%;
    right: 2.5%;
    top: 28.5%;
    -webkit-mask: url("../images/thing17-2.png") no-repeat center center;
    mask: url("../images/thing17-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing17-3 {
    width: 26.2%;
    right: -2%;
    top: 46.25%;
    mix-blend-mode: screen;
}

.thing17-4 {
    width: 42.6%;
    left: 3%;
    top: 55%;
    animation: moveDown 2s infinite ease-in-out;
}

.thing17-5 {
    width: 59.5%;
    left: -12.5%;
    top: 54.8%;
    mix-blend-mode: screen;
    animation: moveDown 2s infinite ease-in-out;
}

.thing17-6 {
    width: 41.1%;
    left: 14%;
    top: 60.5%;
    mix-blend-mode: screen;
    animation: moveDown 2s infinite ease-in-out;
}

.thing19-1 {
    width: 88.6%;
    left: 5.7%;
    top: 8.75%;
}

.thing19-2 {
    width: 33.2%;
    left: 2.5%;
    top: 19%;
}

.thing19-3 {
    width: 33.2%;
    right: 33.5%;
    top: 19%;
}

.thing19-4 {
    width: 33.2%;
    right: 3%;
    top: 19%;
}

.thing19-5 {
    width: 45.7%;
    left: 0%;
    top: 40.8%;
    -webkit-mask: url("../images/thing19-5.png") no-repeat center center;
    mask: url("../images/thing19-5.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing19-6 {
    width: 30.6%;
    left: 26%;
    top: 38.5%;
    mix-blend-mode: screen;
}

.thing19-7 {
    width: 34.3%;
    left: -4%;
    top: 55.5%;
    mix-blend-mode: screen;
}

.thing19-8 {
    width: 89.5%;
    left: 5.4%;
    top: 86.5%;
    cursor: pointer;
}

.thing20-1 {
    width: 82.5%;
    left: 8.75%;
    top: 73%;
}