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

.container {
    /* 這裡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(填圖片路徑); */
    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);
}

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

.bg23 {
    background-image: url(../images/BG/BG_23.jpg);
}

.bg24 {
    background-image: url(../images/BG/BG_24.jpg);
}

.bg25 {
    background-image: url(../images/BG/BG_25.jpg);
}

.bg26 {
    background-image: url(../images/BG/BG_26.jpg);
}

.bg27 {
    background-image: url(../images/BG/BG_27.jpg);
}

/* 以此類推 */

/* 定位 */
/* BG-1 */
.thing01-1 {
    width: 23.8%;
    left: 5%;
    bottom: 82.5%;
    animation: bounce 2s infinite ease-in-out;
}

.thing01-2 {
    width: 19.9%;
    left: 27%;
    bottom: 80.5%;
    animation: bounce 2s .25s infinite ease-in-out;
}

.thing01-3 {
    width: 24.7%;
    left: 47%;
    bottom: 82.5%;
    animation: bounce 2s .5s infinite ease-in-out;
}

.thing01-4 {
    width: 22.8%;
    left: 26%;
    bottom: 68%;
    animation: bounce 2s infinite ease-in-out;
}

.thing01-5 {
    width: 21.4%;
    left: 50%;
    bottom: 68%;
    animation: bounce 2s .25s infinite ease-in-out;
}

.thing01-6 {
    width: 21.5%;
    left: 71%;
    bottom: 68%;
    animation: bounce 2s .50s infinite ease-in-out;
}

.thing01-7 {
    width: 25.2%;
    left: 1%;
    bottom: 92%;
    mix-blend-mode: screen;
}

.thing01-8 {
    width: 25.2%;
    left: 53%;
    bottom: 86.5%;
    mix-blend-mode: screen;
}

.thing01-9 {
    width: 25.2%;
    left: 29%;
    bottom: 68.5%;
    mix-blend-mode: screen;
}

.thing01-10 {
    width: 25.2%;
    left: 56%;
    bottom: 73.5%;
    mix-blend-mode: screen;
}

.thing01-11 {
    width: 25.2%;
    left: 77%;
    bottom: 70.5%;
    mix-blend-mode: screen;
}

.thing01-12 {
    width: 35%;
    left: 33.5%;
    bottom: 47%;
}

.thing01-13 {
    width: 53.6%;
    left: 45%;
    bottom: 15%;
}

.thing01-14 {
    width: 32.1%;
    left: 16%;
    bottom: 15.9%;
}

.thing01-15 {
    width: 70.4%;
    left: -19%;
    bottom: 3.9%;
    mix-blend-mode: screen;
}

.thing01-16 {
    width: 70.4%;
    left: 62%;
    bottom: 19.9%;
    mix-blend-mode: screen;
}

/* BG-2 */
.thing02-1 {
    width: 34.3%;
    left: 5%;
    bottom: 37%;
}

.thing02-2 {
    width: 25.6%;
    left: 38.5%;
    bottom: 35%;
}

.thing02-3 {
    width: 36.2%;
    left: 62.5%;
    bottom: 37%;
}

.thing02-4 {
    width: 100%;
    left: 0.5%;
    bottom: 2%;
    scale: 1.214;
}

/* BG-3 */
.BG3-video {
    width: 93%;
    position: absolute;
    top: 6.2%;
    left: 3.1%;
}

.thing03-1 {
    width: 98.3%;
    left: -24%;
    bottom: 90.9%;
    mix-blend-mode: screen;
}

.thing03-2 {
    width: 6.8%;
    left: 93%;
    bottom: 50.9%;
    mix-blend-mode: screen;
}

.thing03-3 {
    width: 22.8%;
    left: 66%;
    bottom: 42.9%;
}

/* BG-4 */
.thing04-1 {
    width: 24.7%;
    top: 12.2%;
    left: 2.1%;
}

.thing04-2 {
    width: 46.2%;
    top: 22.2%;
    left: 1.1%;
}

.thing04-3 {
    width: 86.5%;
    top: 59.2%;
    left: 7.1%;
}

/* BG-5 */
.thing05-1 {
    width: 93%;
    top: 71.2%;
    left: 3.5%;
}

.thing05-2 {
    width: 96%;
    top: 36.2%;
    left: 3.5%;
}

/* BG-6 */
.thing06-1 {
    width: 86%;
    top: 56%;
    left: 6.5%;
}

.thing06-2 {
    width: 41.2%;
    top: 37.2%;
    left: 31%;
}

.thing06-3 {
    width: 60%;
    top: 75.2%;
    left: 19%;
}

/* BG-7 */
.thing07-1 {
    width: 72%;
    top: 50%;
    left: 13.5%;
}

/* BG-8 */
.thing08-1 {
    width: 17%;
    top: 61%;
    left: 27.5%;
}

.thing08-2 {
    width: 32.1%;
    top: 68%;
    left: 45.5%;
}

/* BG-9 */
.thing09-1 {
    width: 100%;
    top: 22.5%;
    left: 5.5%;
    scale: 1.018;
}

.thing09-2 {
    width: 34.6%;
    top: 83.5%;
    left: 1.5%;
}

.thing09-3 {
    width: 34.6%;
    top: 87.5%;
    left: 32.5%;
}

.thing09-4 {
    width: 34.6%;
    top: 83.5%;
    left: 64.5%;
}

/* BG-11 */
.thing11-1 {
    width: 47.2%;
    top: 23.8%;
    left: 1.5%;
}

.thing11-2 {
    width: 47.7%;
    top: 35.2%;
    left: 50.7%;
}

.thing11-3 {
    width: 56.5%;
    top: 62.5%;
    left: 14.5%;
}

/* BG-15 */
.thing15-1 {
    width: 87.5%;
    top: 5%;
    left: 6%;
}

/* BG-16 */
.thing16-1 {
    width: 87.5%;
    top: 5%;
    left: 6%;
}

/* BG-17 */
.thing17-1 {
    width: 87.5%;
    top: 5%;
    left: 6%;
}

/* BG-18 */
.thing18-1 {
    width: 79.5%;
    top: 5%;
    left: 9%;
}

/* BG-19 */
.thing19-1 {
    width: 16%;
    top: 58%;
    left: 60%;
}

/* BG-20 */
.thing20-1 {
    width: 86.2%;
    top: 11%;
    left: 10%;
}

.thing20-2 {
    width: 88.4%;
    top: 27%;
    left: 3%;
}

.thing20-3 {
    width: 89.1%;
    top: 43%;
    left: 7%;
}

/* BG-23 */
.thing23-1 {
    width: 24.7%;
    top: 12%;
    left: 1%;
}

.thing23-2 {
    width: 46.2%;
    top: 23%;
    left: 1%;
}

.thing23-3 {
    width: 86.5%;
    top: 62%;
    left: 6%;
}

/* BG-24 */
.thing24-1 {
    width: 24.7%;
    top: 1%;
    left: 1%;
}

.thing24-2 {
    width: 50.6%;
    top: 16%;
    left: 1%;
}

.thing24-3 {
    width: 86.5%;
    top: 64%;
    left: 6%;
}

/* BG-25 */
.thing25-1 {
    width: 24.7%;
    top: 1%;
    left: 1%;
}

.thing25-2 {
    width: 35.2%;
    top: 16%;
    left: 1%;
}

.thing25-3 {
    width: 86.6%;
    top: 63%;
    left: 6%;
}

/* BG-26 */
.thing26-1 {
    width: 86.6%;
    top: 56%;
    left: 6%;
}

.tel {
    width: 100%;
    height: 10%;
    left: 0%;
    top: 32%;
}

.mail {
    width: 100%;
    height: 10%;
    left: 0%;
    top: 53%;
}