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


.pointer {
    cursor: pointer;
    transition: all .3s;
}

.pointer:hover {
    opacity: 0.8;
}

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

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

}

/* 定位 */

.FV_arrow {
    width: 21.1%;
    top: 45.5%;
    left: 45%;
    z-index: 1;
}

.FV_pd1 {
    width: 51.7%;
    top: 47.75%;
    left: 1.5%;
}

.FV_pd2 {
    width: 48.7%;
    top: 67%;
    left: 51%;
}

.FV_title {
    width: 99.6%;
    top: 10%;
    left: 0%;
    -webkit-mask: url("../images/FV_title.png") no-repeat center center;
    mask: url("../images/FV_title.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.FV_15 {
    width: 59.7%;
    top: 64.25%;
    left: 0%;
}

.FV_43 {
    width: 35.7%;
    top: 34%;
    left: 4%;
    -webkit-mask: url("../images/FV_43.png") no-repeat center center;
    mask: url("../images/FV_43.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.FV_title2 {
    width: 32.3%;
    top: 87.5%;
    right: 9.6%;
}

.FVLight {
    width: 24.5%;
    top: 60%;
    right: 0%;
    mix-blend-mode: screen;
}

.thing02-1 {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
    transition: all .3s;
}

.P-03 {
    width: 53.3%;
    top: 64.5%;
    left: 27%;
}

.P-01 {
    width: 36.6%;
    top: 21%;
    left: 57%;
}

.P-02 {
    width: 33.0%;
    top: 43%;
    left: 11%;
}

.N-03 {
    width: 48.3%;
    top: 66.5%;
    left: 2.5%;
    z-index: 1;
}

.N-04 {
    width: 49.3%;
    top: 56.5%;
    left: 50.5%;
    z-index: 1;
}

.N-05 {
    width: 47.2%;
    top: 35%;
    right: 0%;
}

.N-06 {
    width: 72.1%;
    top: 43.75%;
    left: 17.5%;
}

.N-01 {
    width: 14.9%;
    top: 19.5%;
    right: 16%;
}

.N-02 {
    width: 48.1%;
    top: 32.25%;
    left: 1%;
}

.PD-01 {
    width: 43.5%;
    top: 23%;
    left: 9%;
}

.PD-02 {
    width: 33.1%;
    top: 51%;
    right: 0%;
    z-index: 1;
}

.PD-03 {
    width: 41.4%;
    top: 65%;
    right: 0%;
}

.PD-04 {
    width: 35.0%;
    top: 31.5%;
    left: 0%;
}

.PD-05 {
    width: 39.7%;
    top: 47.5%;
    left: 0%;
}

.PD-06 {
    width: 39.2%;
    top: 22.5%;
    right: 3%;
}

.PD-07 {
    width: 59.2%;
    top: 33.5%;
    left: 25%;
    -webkit-mask: url("../images/PD-07.png") no-repeat center center;
    mask: url("../images/PD-07.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing07-1 {
    width: 29.3%;
    top: 0%;
    left: 0%;
}

.thing07-2 {
    width: 29.3%;
    top: 0%;
    left: 0%;
}

.thing07-3 {
    width: 30.5%;
    top: 22%;
    left: 4%;
}

.thing07-4 {
    width: 24.9%;
    top: 45.7%;
    left: 31%;

}

.thing07-5 {
    width: 100%;
    left: 0%;
    top: 7%;
    mix-blend-mode: screen;
    pointer-events: none;
}

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

.thing09-1 {
    width: 81%;
    left: 10%;
    top: 0.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: 80.3%;
    right: 0%;
    top: 42%;
    -webkit-mask: url("../images/thing09-2.png") no-repeat center center;
    mask: url("../images/thing09-2.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

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

.C-01 {
    width: 98.9%;
    top: 4%;
    left: 1%;
}

.S-01 {
    width: 100%;
    top: 3.5%;
    left: 0%;
}

.S-02 {
    width: 100%;
    top: 69.5%;
    left: 0%;
    -webkit-mask: url("../images/S-02.png") no-repeat center center;
    mask: url("../images/S-02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing13-1 {
    width: 100%;
    top: 23%;
    left: 0%;
}

.videoControl {
    position: relative;
    left: 4%;
    width: 92%;
    height: 56.25%;
}

.thing13-2 {
    width: 95.4%;
    right: 3.5%;
    top: 58%;
}

.S-03 {
    width: 98.2%;
    top: 37.5%;
    right: 0%;
}

.S-04 {
    width: 97.4%;
    top: 77%;
    left: 0%;
}

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

.Offer01-1 {
    width: 49.7%;
    top: 23.7%;
    left: 45%;
    -webkit-mask: url("../images/Offer01-1.png") no-repeat center center;
    mask: url("../images/Offer01-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.Offer01-2 {
    width: 63.5%;
    top: 34.15%;
    left: 19%;
}

.Offer-02 {
    width: 35.5%;
    top: 1.5%;
    right: 0%;
}

.Offer02-1 {
    width: 20.5%;
    top: 47.8%;
    left: 61%;
    -webkit-mask: url("../images/Offer02-1.png") no-repeat center center;
    mask: url("../images/Offer02-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.Offer02-2 {
    width: 63.5%;
    top: 58%;
    left: 19.5%;
}

.Offer-03 {
    width: 43.7%;
    bottom: -6.5%;
    left: 0%;
    z-index: 1;
}

.Offer03-1 {
    width: 37.6%;
    top: 70.5%;
    left: 51%;
    -webkit-mask: url("../images/Offer03-1.png") no-repeat center center;
    mask: url("../images/Offer03-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.Offer03-2 {
    width: 63.5%;
    top: 80.5%;
    left: 20%;
}

.Offer04-1 {
    width: 63.5%;
    top: 94.75%;
    left: 19.5%;
}

.Offer05-1 {
    width: 51.0%;
    top: 19.5%;
    left: 44%;
    -webkit-mask: url("../images/Offer05-1.png") no-repeat center center;
    mask: url("../images/Offer05-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.Offer05-2 {
    width: 63.5%;
    top: 30.75%;
    left: 19%;
}

.Offer06-1 {
    width: 24.8%;
    top: 45%;
    left: 57%;
    -webkit-mask: url("../images/Offer06-1.png") no-repeat center center;
    mask: url("../images/Offer06-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.Offer06-2 {
    width: 63.5%;
    top: 55.6%;
    left: 20%;
}

.Offer07-1 {
    width: 39.9%;
    top: 67.5%;
    left: 49%;
    -webkit-mask: url("../images/Offer07-1.png") no-repeat center center;
    mask: url("../images/Offer07-1.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.Offer07-2 {
    width: 63.5%;
    top: 77.9%;
    left: 20%;
}

.Offer08-1 {
    width: 63.5%;
    top: 91.2%;
    left: 20%;
}

.tel {
    width: 100%;
    height: 24%;
    left: 0;
    top: 67%;
}