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

.QABG {
    background-image: url('../images/BG/QA_BG.jpg');
    background-repeat: no-repeat;
    background-position: top center;
}

/* 【以上內容勿動!!!  有關基本樣式設定】 */
/* 開版設定 */
.wrap {
    max-width: 1000px;
    margin: 0 auto;
    /* 【超過】 開版範圍 就不呈現 */
    overflow: hidden;
}

.container {
    max-width: 1000px;
    margin: 0 auto;

}
.brSP{
    display: none;
}
@media (max-width: 768px) {
    .brSP{
        display: block;
    }
    .SP_close{
        display: none;
    }
    
}
/* 定位 */
.thing01-1 {
    width: 70.5%;
    top: 12.25%;
    left: 2.75%;
}

.thing01-2 {
    width: 37.7%;
    top: 33.5%;
    left: 15.5%;
}

.thing01-3 {
    width: 28%;
    top: 32.5%;
    left: 54%;
}

.thing01-4 {
    width: 83%;
    bottom: 1.5%;
    left: 8.5%;
}

.FV_light1 {
    width: 54.1%;
    top: 15%;
    left: 0%;
    mix-blend-mode: screen;
}

.FV_light2 {
    width: 52.1%;
    top: 21%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing02-1 {
    width: 36.5%;
    bottom: 12%;
    right: 0%;
}

.thing03-1 {
    width: 39.8%;
    top: 9%;
    right: 0%;
}

.thing03-2 {
    width: 42.9%;
    top: 59%;
    right: 0%;
}

.n-01 {
    width: 27.7%;
    top: 39%;
    left: 36.5%;
}

.n-001-1 {
    width: 12.3%;
    top: 0%;
    left: 0%;
}

.n-001-2 {
    width: 12.3%;
    top: 61.5%;
    left: 22.5%;
    filter: grayscale(1);
}

.n-002-1 {
    width: 12.3%;
    top: 0%;
    left: 0%;
}

.n-002-2 {
    width: 12.3%;
    top: 61.5%;
    left: 54.2%;
    filter: grayscale(1);
}

.n-003-1 {
    width: 11.0%;
    top: 0%;
    left: 0%;
}

.n-003-2 {
    width: 11.0%;
    top: 61.5%;
    left: 88.9%;
    filter: grayscale(1);
}

.n-004-1 {
    width: 12.3%;
    top: 0%;
    left: 0%;
}

.n-004-2 {
    width: 12.3%;
    top: 77.5%;
    left: 22.5%;
    filter: grayscale(1);
}

.n-005-1 {
    width: 12.3%;
    top: 0%;
    left: 0%;
}

.n-005-2 {
    width: 12.3%;
    top: 77.5%;
    left: 54%;
    filter: grayscale(1);
}

.n-006-1 {
    width: 11.0%;
    top: 0%;
    left: 0%;
}

.n-006-2 {
    width: 10.9%;
    top: 77.5%;
    left: 89%;
    filter: grayscale(1);
}



.pd-c01 {
    width: 23.5%;
    top: 29.5%;
    right: 11.5%;
    -webkit-mask: url("../images/pd-c01.png") no-repeat center center;
    mask: url("../images/pd-c01.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.pd-c02 {
    width: 23.5%;
    top: 31.5%;
    left: 38.5%;
    -webkit-mask: url("../images/pd-c02.png") no-repeat center center;
    mask: url("../images/pd-c02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pd-c03 {
    width: 23.5%;
    top: 38%;
    left: 15%;
    -webkit-mask: url("../images/pd-c03.png") no-repeat center center;
    mask: url("../images/pd-c03.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pd-c04 {
    width: 23.5%;
    top: 51.5%;
    left: 7.5%;
    -webkit-mask: url("../images/pd-c04.png") no-repeat center center;
    mask: url("../images/pd-c04.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pd-c05 {
    width: 23.5%;
    top: 65.5%;
    left: 8.5%;
    -webkit-mask: url("../images/pd-c05.png") no-repeat center center;
    mask: url("../images/pd-c05.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pd-c06 {
    width: 23.5%;
    top: 76.5%;
    left: 25%;
    -webkit-mask: url("../images/pd-c06.png") no-repeat center center;
    mask: url("../images/pd-c06.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing06-1 {
    width: 20.8%;
    top: 18.5%;
    left: 0.5%;
}

.thing06-2 {
    width: 19%;
    top: 16%;
    right: 0%;
}

.thing06-3 {
    width: 80%;
    height: 34%;
    top: 35%;
    right: 10%;
    /* background-color: red; */
    border: 1px solid #fff;
    overflow: hidden;
    z-index: -1;
}

.thing06-3 video {
    position: absolute;
    left: -26%;
    top: -38%;
    width: 150%;
    height: 190%;
}

.thing07-1 {
    width: 93%;
    top: 4.5%;
    left: 2%;
    -webkit-mask: url("../images/thing07-1.png") no-repeat center center;
    mask: url("../images/thing07-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing07-2 {
    width: 56.9%;
    top: 59.75%;
    left: 3%;
}

.thing07-3 {
    width: 46.9%;
    top: 71.5%;
    right: 0%;
}

.thing07-4 {
    width: 47.1%;
    top: 80.25%;
    left: 9%;
}

.thing07-5 {
    width: 42.3%;
    top: 87.5%;
    right: 0%;
    z-index: 1;
}

.thing08-1 {
    width: 28.0%;
    top: 11.5%;
    left: 44%;

}

.thing08-2 {
    width: 21.1%;
    top: 31%;
    right: 12%;
}

.thing08-3 {
    width: 24.1%;
    top: 38.5%;
    right: 4%;
}

.thing09-1 {
    width: 100%;
    left: 0%;
    top: 32%;
}

.thing10-1 {
    width: 35.9%;
    top: 29.6%;
    left: 24.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: 39.9%;
    top: 44.5%;
    left: 23%;
}

.thing10-3 {
    width: 31.3%;
    top: 60.5%;
    left: 27.6%;
}

.thing10-4 {
    width: 19.9%;
    top: 68%;
    left: 31%;
}

.thing10-5 {
    width: 33.1%;
    top: 85.1%;
    left: 26.9%;
}

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

.thing12-1 {
    width: 46.7%;
    top: 5.5%;
    left: 45%;
    filter: drop-shadow(24px 35px 10px #500207ad);
}

.thing12-2 {
    width: 44.1%;
    top: 32.5%;
    left: 5%;
    filter: drop-shadow(24px 35px 10px #500207ad);
}

.thing12-3 {
    width: 49.4%;
    top: 47.5%;
    left: 50.5%;
}

.thing13-1 {
    width: 79%;
    height: 42.6%;
    left: 10.1%;
    bottom: 2.4%;
    border-radius: 0 0 83px 83px;
    overflow: hidden;

}

@media (max-width:768px) {
    .thing13-1 {

        border-radius: 0 0 31px 31px;

    }
}

.thing13-1 video {
    position: absolute;
    left: -1%;
    top: 0%;
    width: 111%;
    height: 100%;
}


.thing14-1 {
    width: 16.7%;
    bottom: 16.5%;
    right: 16.3%;
}


.thing15-1 {
    width: 84.9%;
    top: 13.8%;
    left: 7.8%;
}

.thing15-2 {
    width: 38.6%;
    top: 36.4%;
    left: 23.8%;
    -webkit-mask: url("../images/thing15-2.png") no-repeat center center;
    mask: url("../images/thing15-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing15-3 {
    width: 39.9%;
    top: 50.7%;
    left: 23%;
}

.thing15-4 {
    width: 38.5%;
    top: 64.3%;
    left: 23.4%;
}

.thing15-5 {
    width: 20.3%;
    top: 71.8%;
    left: 30.5%;
}

.thing15-6 {
    width: 25.6%;
    top: 87.1%;
    left: 30%;
}

.thing16-1 {
    width: 34.4%;
    left: 1.5%;
    top: 12%;
    mix-blend-mode: screen;
    z-index: 1;
}

.thing16-2 {
    width: 40.3%;
    left: 0%;
    top: 11.5%;
    -webkit-mask: url("../images/Offer/offer-53.png") no-repeat center center;
    mask: url("../images/Offer/offer-53.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;

}

.thing16-3 {
    width: 98.3%;
    left: 1%;
    top: 58.3%;
    transform-origin: left center;
}

.thing19-1 {
    width: 100%;
    left: 0%;
    top: 2%;
}

.thing20-1 {
    width: 64.6%;
    top: 41.5%;
    left: 16.2%;
}

.thing20-2 {
    width: 81.2%;
    top: 44.2%;
    left: 0%;
}

.thing20-3 {
    width: 84.0%;
    top: 62.9%;
    left: 16%;
}

.thing20-4 {
    width: 99.9%;
    top: 81.4%;
    left: 1%;
}

.thing35-1 {
    width: 40.7%;
    top: 8.5%;
    left: 0%;
    -webkit-mask: url("../images/Offer/offer-01-1.png") no-repeat center center;
    mask: url("../images/Offer/offer-01-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing35-2 {
    width: 98.3%;
    top: 56.68%;
    left: 1%;
    transform-origin: left center;
}

.thing36-1 {
    width: 38.3%;
    top: 10%;
    left: 0.3%;
    -webkit-mask: url("../images/Offer/offer-02-1.png") no-repeat center center;
    mask: url("../images/Offer/offer-02-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing36-2 {
    width: 45.4%;
    top: 26.4%;
    right: 0;
    transform-origin: right center;
}

.thing37-1 {
    width: 37.6%;
    top: 11%;
    left: 0.3%;
    -webkit-mask: url("../images/Offer/offer-03-1.png") no-repeat center center;
    mask: url("../images/Offer/offer-03-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing37-2 {
    width: 45.4%;
    top: 27.4%;
    right: 0;
    transform-origin: right center;
}

.thing38-1 {
    width: 39.7%;
    top: 12%;
    left: 0.3%;
    -webkit-mask: url("../images/Offer/offer-04-1.png") no-repeat center center;
    mask: url("../images/Offer/offer-04-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing38-2 {
    width: 45%;
    top: 29.2%;
    right: 0;
    transform-origin: right center;
}

.thing39-1 {
    width: 35.8%;
    top: 22.5%;
    left: 0.3%;
    -webkit-mask: url("../images/Offer/offer-05-1.png") no-repeat center center;
    mask: url("../images/Offer/offer-05-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.discount_header {
    background-color: #ba0000;
    color: #fff;
    text-align: center;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .discount_header {
        padding: 1rem;
        font-size: 2.25rem;
        letter-spacing: 1.5px;
    }
}


.offerNew01-1 {
       width: 50.8%;
    right: 0%;
    top: 9%;
    z-index: 1;
    pointer-events: none;
}

.offerNew01-2 {
       width: 50.8%;
    right: 0%;
    top: 24%;
    z-index: 1;
    pointer-events: none;
}

.offerNew01-3 {
      width: 46.4%;
    right: 0%;
    top: 39.25%;
    z-index: 1;
    pointer-events: none;
}

.offerNew01-4 {
        width: 46.4%;
    right: 0%;
    top: 53.75%;
    z-index: 1;
    pointer-events: none;
}