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-01 {
    width: 96.3%;
    top: 2.1%;
    left: 3.5%;
}

.FV-02 {
    width: 100%;
    top: 33.7%;
    left: 9%;
    scale: 1.090;
    z-index: 1;
    -webkit-mask: url("../images/FV-02.png") no-repeat center center;
    mask: url("../images/FV-02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.FV-03 {
    width: 61.4%;
    top: 19%;
    left: -5%;
}

.PR-01 {
    width: 98.6%;
    top: 0.9%;
    left: 0.7%;
    -webkit-mask: url("../images/PR-01.png") no-repeat center center;
    mask: url("../images/PR-01.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.PR-02 {
    width: 48.4%;
    top: 16.65%;
    left: 33%;
}

.PR-03 {
    width: 100%;
    bottom: 18.7%;
    left: -5%;
    scale: 1.039;
}

.PR-04 {
    width: 100%;
    bottom: -0.3%;
    left: 6.5%;
    scale: 1.010;
}

.thing03-3 {
    width: 41.5%;
    height: 12%;
    left: 11%;
    top: 27%;
    /* background-color: red; */
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #1D218D;
}

.thing03-3 video {
    position: absolute;
    width: 101%;
    height: 101%;
    left: -0.5%;
    top: -0.25%;
}

.Offer-00-1 {
    width: 99.9%;
    left: 1%;
    top: 27.5%;
    z-index: 1;
}

.Offer-00-2 {
    width: 49.5%;
    left: 52%;
    top: 20%;
}

.Offer-00-3 {
    width: 94.6%;
    left: 2.5%;
    top: 57.3%;
    -webkit-mask: url("../images/Offer-00-3.png") no-repeat center center;
    mask: url("../images/Offer-00-3.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.WHE-01 {
    width: 92.1%;
    top: 6%;
    left: 4%;
    -webkit-mask: url("../images/WHE-01.png") no-repeat center center;
    mask: url("../images/WHE-01.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.WHE-02 {
    width: 43.4%;
    top: 36%;
    left: 4%;
}

.WHE-03 {
    width: 41.1%;
    top: 60.5%;
    right: 2%;
}

.W-01 {
    width: 96.9%;
    top: 0.3%;
    left: 1.5%;
}

.W-02 {
    width: 100%;
    top: 69.8%;
    left: 11.4%;
    scale: 1.370;
    -webkit-mask: url("../images/W-02.png") no-repeat center center;
    mask: url("../images/W-02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.thing09-1 {
    width: 39%;
    height: 14.5%;
    right: 4.6%;
    top: 21.65%;
    /* background-color: red; */
    overflow: hidden;
}

.marquee01 {
    width: 1000%;
    display: flex;
    top: 13%;
    position: absolute;
}

.thing09-2 {
    width: 39%;
    height: 14.2%;
    right: 4.6%;
    top: 46.3%;
    /* background-color: red; */
    overflow: hidden;
}

.marquee02 {
    width: 550%;
    display: flex;
    top: 13%;
    position: absolute;
}

.thing09-3 {
    width: 41.5%;
    height: 12%;
    left: 3.1%;
    top: 86.8%;
    /* background-color: red; */
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #1D218D;
}

.thing09-3 video {
    position: absolute;
    width: 180%;
    height: 130%;
    left: -50%;
    top: -15.25%;
}

.W-03 {
    width: 64.3%;
    top: 23.6%;
    left: 40%;
}

.W-04 {
    width: 48.4%;
    top: 8.5%;
    right: 7.7%;
}

.W-05 {
    width: 22.8%;
    top: 33%;
    left: 23.6%;
}

.PD-02_light {
    width: 94.1%;
    top: 24%;
    left: 13%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.PD-03 {
    width: 100%;
    top: 38.4%;
    left: 10.4%;
    scale: 1.172;
    pointer-events: none;
}

.PD-04 {
    width: 36.5%;
    top: 60%;
    left: 5%;
    cursor: pointer;
}

.PD-05 {
    width: 67.5%;
    top: 83%;
    right: -8%;
    -webkit-mask: url("../images/PD-05.png") no-repeat center center;
    mask: url("../images/PD-05.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.PD-01_light {
    width: 100%;
    top: 21%;
    left: 0%;
    scale: 1.663;
    mix-blend-mode: screen;
}

.PD-06 {
    width: 48.2%;
    top: 16.6%;
    right: 1.6%;
    -webkit-mask: url("../images/PD-06.png") no-repeat center center;
    mask: url("../images/PD-06.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;

}

.C-01 {
    width: 91.0%;
    top: 3%;
    left: 5.2%;
}

.C-02 {
    width: 55.4%;
    top: 12%;
    right: 2%;
}

.C-03 {
    width: 100%;
    top: 23.4%;
    left: -3%;
    scale: 1.023;
}

.C-04 {
    width: 100%;
    top: 60.7%;
    right: -5%;
    scale: 1.034;
}

.C-05 {
    width: 55.9%;
    top: 4%;
    left: 2%;
    z-index: 1;
}

.C-06 {
    width: 64.1%;
    top: 37%;
    left: -7.5%;
}

.C-07 {
    width: 55.5%;
    top: 52%;
    left: 37%;
}

.C-08 {
    width: 90.1%;
    top: 64.6%;
    left: 7.5%;
}



.thing01 {
    width: 56.6%;
    top: 3.5%;
    left: 23.5%;
}

.Offer-01-1 {
    width: 95.6%;
    top: 28%;
    left: 2.5%;
    z-index: 1;
}

.Offer-01-2 {
    width: 52.9%;
    top: 20%;
    left: 47%;
}

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

.tel {
    width: 100%;
    height: 8%;
    left: 0%;
    top: 61%;
}