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;

}

/* 定位 */

.p1_01 {
    width: 77.6%;
    top: 11.5%;
    left: 1.5%;
}

.p1_02 {
    width: 33.6%;
    top: 28.5%;
    left: 7.8%;
    -webkit-mask: url("../images/p1_02.png") no-repeat center center;
    mask: url("../images/p1_02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.p1_02-1 {
    width: 45.9%;
    top: 41.93%;
    left: 7.1%;
}

.p1_03 {
    width: 35.2%;
    bottom: 3.5%;
    left: 4%;
}

.p1_03light {
    width: 16.5%;
    bottom: 13%;
    left: 2%;
    mix-blend-mode: screen;
}

.p1_04 {
    width: 34.2%;
    bottom: 0%;
    left: 30%;
}

.p1_05 {
    width: 35.2%;
    bottom: 2.5%;
    right: 4.4%;
}

.p1_05light {
    width: 16.4%;
    bottom: 2.5%;
    right: 4.4%;
    mix-blend-mode: screen;
}

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

.p3_01-1 {
    width: 28.4%;
    top: 25.5%;
    left: 0.25%;
}

.p3_01-2 {
    width: 80.0%;
    top: 29%;
    right: 2%;
    mix-blend-mode: multiply;
}

.p3_01-3 {
    width: 65.8%;
    top: 30.5%;
    right: 5.9%;
}

.p3_02-1 {
    width: 28.4%;
    top: 39%;
    right: 5%;
}

.p3_02-2 {
    width: 65.0%;
    top: 42%;
    left: 8%;
    mix-blend-mode: multiply;
}

.p3_02-3 {
    width: 51.6%;
    top: 43.1%;
    left: 11.8%;
}

.p3_03-1 {
    width: 28.4%;
    top: 50.5%;
    left: 4.8%;
}

.p3_03-2 {
    width: 71.0%;
    top: 54.8%;
    right: 3%;
    mix-blend-mode: multiply;
}

.p3_03-3 {
    width: 57.5%;
    top: 55.9%;
    right: 6.6%;
}

.p3_04-1 {
    width: 28.4%;
    bottom: 20.6%;
    right: 4.8%;
}

.p3_04-2 {
    width: 59.0%;
    bottom: 22.1%;
    left: 8%;
    mix-blend-mode: multiply;
}

.p3_04-3 {
    width: 41.8%;
    bottom: 24%;
    left: 15%;
}

.p3_05-1 {
    width: 28.4%;
    bottom: 4.4%;
    left: 5%;
}

.p3_05-2 {
    width: 64.0%;
    bottom: 7.5%;
    right: 8%;
    mix-blend-mode: multiply;
}

.p3_05-3 {
    width: 48.9%;
    bottom: 8.9%;
    right: 12%;
}

.p4_01 {
    width: 91.6%;
    bottom: 18%;
    left: 4%;
}

.p4_02 {
    width: 89.6%;
    bottom: 2.6%;
    left: 7%;
}

.p5_01 {
    width: 88.6%;
    bottom: 9%;
    left: 6.5%;
}

.p6_01 {
    width: 50.1%;
    top: 21.5%;
    right: 2.5%;
}

.p6_01light {
    width: 32.5%;
    top: 20%;
    right: 0%;
    mix-blend-mode: screen;
}

.p6_02 {
    width: 64.0%;
    top: 47%;
    left: 0%;
}

.p6_02light {
    width: 28.1%;
    top: 37%;
    left: 0%;
    mix-blend-mode: screen;
}

.p6_03 {
    width: 69.2%;
    top: 57.6%;
    left: 21%;
}

.p7_01 {
    width: 34.2%;
    top: 55.5%;
    left: 3.5%;
    -webkit-mask: url("../images/p7_01.png") no-repeat center center;
    mask: url("../images/p7_01.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.p7_02 {
    width: 41.7%;
    top: 30%;
    right: 1%;
    -webkit-mask: url("../images/p7_02.png") no-repeat center center;
    mask: url("../images/p7_02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.p7_03 {
    width: 30.4%;
    top: 58.5%;
    right: 4%;
    -webkit-mask: url("../images/p7_03.png") no-repeat center center;
    mask: url("../images/p7_03.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.p7_04 {
    width: 44.7%;
    top: 39.5%;
    left: 33.5%;
}

.thing08-1 {
    cursor: pointer;
    width: 100%;
    height: 13%;
    left: 0%;
    top: 1%;
}

.thing08-2 {
    cursor: pointer;
    width: 100%;
    height: 13%;
    left: 0%;
    top: 14.75%;
}

.thing08-3 {
    cursor: pointer;
    width: 100%;
    height: 13%;
    left: 0%;
    top: 28.5%;
}

.thing08-4 {
    cursor: pointer;
    width: 100%;
    height: 13%;
    left: 0%;
    top: 42.4%;
}

.thing09-1 {
    z-index: -1;
    width: 88%;
    height: 57%;
    left: 6.5%;
    top: 35.1%;
}

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

.p11_01 {
    width: 39.7%;
    top: 27.5%;
    left: 2%;
}

.p11_01light {
    width: 32.1%;
    top: 28%;
    left: 5%;
    mix-blend-mode: screen;
}

.p11_02 {
    width: 59.2%;
    bottom: 0%;
    left: 4%;
}

.thing12-1 {
    cursor: pointer;
    width: 100%;
    height: 14.5%;
    left: 0%;
    top: 20.5%;
}

.thing12-2 {
    cursor: pointer;
    width: 100%;
    height: 14.5%;
    left: 0%;
    top: 35.75%;
}

.thing12-3 {
    cursor: pointer;
    width: 100%;
    height: 14.5%;
    left: 0%;
    top: 50.5%;
}

.thing12-4 {
    cursor: pointer;
    width: 100%;
    height: 14.5%;
    left: 0%;
    top: 65.9%;
}

.p13_01 {
    width: 17.4%;
    top: 53%;
    left: 1%;
}

.p13_01light {
    width: 14.6%;
    top: 57.75%;
    left: 8%;
    mix-blend-mode: screen;
}

.p13_02 {
    width: 38.5%;
    bottom: 7.2%;
    left: 5.9%;
}

.thing14-1 {
    width: 88.5%;
    height: 57%;
    left: 6%;
    top: 41.5%;
}

.thing15-1 {
    width: 100%;
    left: 0%;
    bottom: 14%;
}

.thing16-1 {
    width: 100%;
    left: 0%;
    bottom: 4%;
}

.p18_01 {
    width: 54.9%;
    top: 16.5%;
    left: 0%;
}

.p18_01light {
    width: 30.9%;
    top: 21%;
    left: 0%;
    mix-blend-mode: screen;
}

.p18_02 {
    width: 54.9%;
    top: 33%;
    right: 0%;
}

.p18_02light {
    width: 30.6%;
    top: 28%;
    right: 0%;
    mix-blend-mode: screen;
}

.offer01_00 {
    z-index: 1;
    width: 82%;
    top: 29.6%;
    left: 9%;
}

.offer01_01 {
    width: 34.3%;
    top: 20%;
    left: 5%;
    -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_01light {
    width: 18.6%;
    top: 18.5%;
    left: 0%;
    mix-blend-mode: screen;
}

.offer01_02 {
    width: 94.1%;
    top: 55.5%;
    left: 5.8%;
    -webkit-mask: url("../images/offer/02.png") no-repeat center center;
    mask: url("../images/offer/02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.offer02_00 {
    z-index: 1;
    width: 77.7%;
    top: 29.8%;
    left: 10.6%;
}

.offer02_01 {
    width: 34.3%;
    top: 15.5%;
    left: 2%;
    -webkit-mask: url("../images/offer/03.png") no-repeat center center;
    mask: url("../images/offer/03.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.offer02_01light {
    width: 18.6%;
    top: 13.5%;
    left: -3%;
    mix-blend-mode: screen;
}

.offer02_02 {
    width: 94.1%;
    top: 54%;
    left: 5.6%;
    -webkit-mask: url("../images/offer/02.png") no-repeat center center;
    mask: url("../images/offer/02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.offer03_00 {
    z-index: 1;
    width: 82.1%;
    top: 27%;
    left: 9%;
}

.offer03_01 {
    width: 33.6%;
    top: 16%;
    left: 2%;
    -webkit-mask: url("../images/offer/04.png") no-repeat center center;
    mask: url("../images/offer/04.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.offer03_01light {
    width: 18.6%;
    top: 14%;
    left: -3%;
    mix-blend-mode: screen;
}

.offer03_02 {
    width: 94.1%;
    top: 54.4%;
    left: 5.6%;
    -webkit-mask: url("../images/offer/02.png") no-repeat center center;
    mask: url("../images/offer/02.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.offer04_00 {
    z-index: 1;
    width: 59%;
    top: 37%;
    left: 19.6%;
}

.offer04_01 {
    width: 33.6%;
    top: 19.5%;
    left: 2%;
    -webkit-mask: url("../images/offer/05.png") no-repeat center center;
    mask: url("../images/offer/05.png") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.offer04_01light {
    width: 18.6%;
    top: 18%;
    left: -3%;
    mix-blend-mode: screen;
}

.offer05_00 {
    z-index: 1;
    width: 78.2%;
    top: 33%;
    left: 12.2%;
}

.offer05_01 {
    width: 34.3%;
    top: 19%;
    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;
}

.offer05_01light {
    width: 18.6%;
    top: 17%;
    left: -3%;
    mix-blend-mode: screen;
}

.tel {
    width: 100%;
    height: 9%;
    left: 0%;
    top: 14%;
}

.line {
    width: 100%;
    height: 24%;
    left: 0%;
    top: 61%;
}

.mail {
    width: 100%;
    height: 5%;
    left: 0%;
    bottom: 9%;
}