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;

}

.QA_BG {
    background-image: url(../images/QA/QA_bg.jpg);
    background-repeat: repeat;
    background-position: top center;
    background-size: contain;
}

/* 定位 */


.thing01-1 {
    width: 49.3%;
    left: 2%;
    top: 40.25%;
    animation: arrowUP 2s infinite ease-in-out;
}

.thing01-2 {
    width: 23.3%;
    left: 34%;
    top: 65%;
}

.thing01-3 {
    width: 49.3%;
    left: 0%;
    top: 41%;
    mix-blend-mode: screen;
    animation: arrowUP 2s infinite ease-in-out;
}

.thing01-4 {
    width: 64.6%;
    right: -6%;
    top: 34.5%;
    animation: arrowUP 2s .25s infinite ease-in-out;
}

.thing01-5 {
    width: 27%;
    right: 1%;
    top: 56.5%;
}

.thing01-6 {
    width: 64.6%;
    right: -6%;
    top: 34.5%;
    mix-blend-mode: screen;
    animation: arrowUP 2s .25s infinite ease-in-out;
}

.thing01-7 {
    width: 100%;
    left: 0%;
    bottom: 4%;
    scale: 1.15;
}

.thing02-1 {
    width: 55.4%;
    left: 25%;
    bottom: 2.5%;
    cursor: pointer;
}

.thing03-1 {
    width: 51.4%;
    left: 0%;
    top: 34%;
}

.thing03-2 {
    width: 34.3%;
    left: 0%;
    top: 26%;
}

.thing03-3 {
    width: 19.8%;
    left: 0;
    top: 20%;
    mix-blend-mode: screen;
}

.thing03-4 {
    width: 65.5%;
    left: 25%;
    top: 32.5%;
}

.thing03-5 {
    width: 73.5%;
    left: 30%;
    top: 33.5%;
    mix-blend-mode: screen;
    
}

.thing05-1 {
    width: 61.2%;
    left: 13%;
    bottom: 1%;
    cursor: pointer;
}

.thing06-1A {
    width: 23.3%;
    left: 11%;
    top: 68.5%;
    animation: arrowUP 2s infinite ease-in-out;
    z-index: 1;
}

.thing06-1 {
    width: 23.3%;
    left: 11%;
    top: 68.5%;
    animation: arrowUP 2s infinite ease-in-out;
}

.thing06-2 {
    width: 24.2%;
    left: 8%;
    top: 66.25%;
    mix-blend-mode: screen;
    animation: arrowUP 2s infinite ease-in-out;
}

.thing06-3A {
    width: 23.3%;
    left: 33.5%;
    top: 70.5%;
    z-index: 1;
    animation: arrowUP 2s .25s infinite ease-in-out;
}

.thing06-3 {
    width: 23.3%;
    left: 33.5%;
    top: 70.5%;
    animation: arrowUP 2s .25s infinite ease-in-out;
}

.thing06-4 {
    width: 24.2%;
    left: 30.25%;
    top: 68.25%;
    mix-blend-mode: screen;
    animation: arrowUP 2s .25s infinite ease-in-out;
}


.thing06-5A {
    width: 23.3%;
    left: 19.75%;
    top: 78.25%;
    z-index: 1;
    animation: arrowUP 2s .5s infinite ease-in-out;
}

.thing06-5 {
    width: 23.3%;
    left: 19.75%;
    top: 78.25%;
    animation: arrowUP 2s .5s infinite ease-in-out;
}

.thing06-6 {
    width: 24.2%;
    left: 16.75%;
    top: 76%;
    mix-blend-mode: screen;
    animation: arrowUP 2s .5s infinite ease-in-out;
}

.thing08-1 {
    width: 55.4%;
    left: 22.5%;
    bottom: 6%;
    cursor: pointer;
}

.thing09-1 {
    width: 20.2%;
    left: 41%;
    top: 46%;
    animation: scale 1s infinite ease-in-out;
}

.thing09-2 {
    width: 42.7%;
    right: -4%;
    top: 44.8%;
}

.thing12-1 {
    width: 100%;
    left: 0%;
    top: 33%;
}

.thing14-1 {
    width: 20.2%;
    left: 41%;
    top: 46%;
    animation: scale 1s infinite ease-in-out;
}

.thing14-2 {
    width: 42.7%;
    right: -4%;
    top: 44.8%;
}

.thing15-1 {
    width: 92%;
    left: 4%;
    top: 67.75%;
}

.thing15-2 {
    width: 87.3%;
    right: 0%;
    top: 29.3%;
}

.thing16-1 {
    width: 90%;
    left: 5%;
    top: 24%;
}

.thing17-1 {
    width: 52.1%;
    left: 1%;
    top: 29%;
    animation: arrowUP 2s infinite ease-in-out;
}

.thing17-2 {
    width: 57.8%;
    right: 0%;
    top: 39%;
    animation: arrowUP 2s .25s infinite ease-in-out;
}

.thing18-1 {
    width: 20.2%;
    left: 41%;
    top: 54%;
    animation: scale 1s infinite ease-in-out;
}

.thing18-2 {
    width: 42.7%;
    right: -4%;
    top: 52.8%;
}

.pointer {
    cursor: pointer;
}

.QA_01 .arrow {
    width: 4.2%;
    right: 9%;
    top: 41%;
}

.QA_02 .arrow {
    width: 4.2%;
    right: 9%;
    top: 62%;
}

.QA_03 .arrow {
    width: 4.2%;
    right: 9%;
    top: 66%;
}

.QA_04 .arrow {
    width: 4.2%;
    right: 9%;
    top: 66%;
}

.QA_05 .arrow {
    width: 4.2%;
    right: 9%;
    top: 66%;
}

.QA_06 .arrow {
    width: 4.2%;
    right: 9%;
    top: 65%;
}

.arrow {
    transition: all .3s;

}

.arrow--active {
    rotate: 180deg;
}

.tel {
    width: 100%;
    height: 7%;
    top: 26%;
    left: 0%;
}

.mail {
    width: 100%;
    height: 7%;
    top: 18%;
    left: 0%;
}