@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap");

* {
    margin: 0;
    padding: 0;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

p {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans TC", sans-serif;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.content {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
}

.bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bg1 {
    background-image: url(./LP_01.jpg?t=1774863992081);
}

.bg2 {
    background-image: url(./LP_02.jpg?t=1774863992081);
}

.bg3 {
    background-image: url(./LP_03.jpg?t=1774863992081);
}

.bg4 {
    background-image: url(./LP_04.jpg?t=1774863992081);
}

.bg5 {
    background-image: url(./LP_05.jpg?t=1774863992081);
}

.bg6 {
    background-image: url(./LP_06.jpg?t=1774863992081);
}

.bg7 {
    background-image: url(./LP_07.jpg?t=1774863992081);
}

.bg8 {
    background-image: url(./LP_08.jpg?t=1774863992081);
}

.bg9 {
    background-image: url(./LP_09.jpg?t=1774863992081);
}

.bg10 {
    background-image: url(./LP_10.jpg?t=1774863992081);
}

.bg11 {
    background-image: url(./LP_11.jpg?t=1774863992081);
}

.bg12 {
    background-image: url(./LP_12.jpg?t=1774863992081);
}

.bg13 {
    background-image: url(./LP_13.jpg?t=1774863992081);
}

.bg14 {
    background-image: url(./LP_14.jpg?t=1774863992081);
}

.bg15 {
    background-image: url(./LP_15.jpg?t=1774863992081);
}

.bg16 {
    background-image: url(./LP_16.jpg?t=1774863992081);
}

.bg17 {
    background-image: url(./LP_17.jpg?t=1774863992081);
}

.bg18 {
    background-image: url(./LP_18.jpg?t=1774863992081);
}

.bg19 {
    background-image: url(./LP_19.jpg?t=1774863992081);
}

.bg20 {
    background-image: url(./LP_20.jpg?t=1774863992081);
}

.bg21 {
    background-image: url(./LP_21.jpg?t=1774863992081);
}

.bg22 {
    background-image: url(./LP_22.jpg?t=1774863992081);
}

.bg23 {
    background-image: url(./LP_23.jpg?t=1774863992081);
}

.bg24 {
    background-image: url(./LP_24.jpg?t=1774863992081);
}

.bg25 {
    background-image: url(./LP_25.jpg?t=1774863992081);
}

.bg26 {
    background-image: url(./LP_26.png?t=1774863992081);
}



/* 定位 */

.thing01-1 {
    width: 88.9%;
    left: 6%;
    top: 17%;
}

.thing01-2 {
    width: 88.9%;
    left: 6%;
    bottom: 48%;
}

.thing01-3 {
    width: 94.1%;
    left: 6%;
    bottom: 25.5%;
}

.thing01-4 {
    width: 88.9%;
    left: 6%;
    bottom: 12%;
}

@media (max-width:768px) {
    .thing01-1 {
        width: 89.7%;
        left: 6%;
        bottom: 66%;
    }

    .thing01-2 {
        width: 89.7%;
        left: 6%;
        bottom: 48%;
    }

    .thing01-3 {
        width: 89.7%;
        left: 6%;
        bottom: 31%;
    }

    .thing01-4 {
        width: 89.7%;
        left: 6%;
        bottom: 12%;
    }
}

@media (max-width:375px) {
    .thing01-1 {
        width: 89.7%;
        left: 6%;
        bottom: 66%;
    }

    .thing01-2 {
        width: 89.7%;
        left: 6%;
        bottom: 48%;
    }

    .thing01-3 {
        width: 89.7%;
        left: 6%;
        bottom: 31%;
    }

    .thing01-4 {
        width: 89.7%;
        left: 6%;
        bottom: 12%;
    }
}

/* .thing01-4 {
    width: 90.5%;
    left: 5%;
    bottom: 17%;
} */


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

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

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

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

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

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

.thing09-1 {
    width: 100%;
    height: 90%;
    left: 0;
    top: 3%;
}

.thing10-1 {
    width: 50%;
    height: 90%;
    left: 0;
    top: 3%;
}

.thing10-2 {
    width: 50%;
    height: 90%;
    left: 50%;
    top: 3%;
}

.thing11-1 {
    width: 50%;
    height: 90%;
    left: 0;
    top: 3%;
}

.thing11-2 {
    width: 50%;
    height: 90%;
    left: 50%;
    top: 3%;
}

.thing12-1 {
    width: 50%;
    height: 90%;
    left: 0;
    top: 5%;
}

.thing12-2 {
    width: 50%;
    height: 90%;
    left: 50%;
    top: 5%;
}

.thing13-1 {
    width: 50%;
    height: 90%;
    left: 0;
    top: 5%;
}

.thing13-2 {
    width: 50%;
    height: 90%;
    left: 50%;
    top: 5%;
}

.thing14-1 {
    width: 60%;
    height: 20%;
    left: 20%;
    top: 50%;
}

/*-------------
    活動說明
--------------- */

.d-flex {
    display: flex;
}

.pop-mb {
    margin-bottom: 24px;
}

.pop-mb-sm {
    margin-bottom: 8px;
}

.w-20 {
    width: 20%;
}

.w-col {
    width: 100%;
}

.popBG {
    position: fixed;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgb(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
}

.popConatiner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 90%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 10px;
}

.main {
    width: 100%;
    height: 87.5%;
    padding: 1.5%;
    overflow: hidden;
}


/* 文字設定 */

.popHeader {
    border-radius: 10px 10px 0 0;
    background-color: #0F9AD5;
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 1.5px;
    padding: 1% 0;
    font-weight: 500;
}

.popfooter {
    box-shadow: 0px 2px 15px rgb(0, 0, 0, 0.5);
    padding: 1% 0;
    z-index: 1;
    position: relative;
    transition: all 0.3s;
}

.popfooter:hover {
    background-color: #1d1d1d8e;
    border-radius: 0 0 10px 10px;
    color: #fff
}

.popTitle {
    padding-left: 0.5rem;
    border-left: 5px solid #A2D5D5;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.txt_big {
    font-size: 1.5rem;
    letter-spacing: 1.5px;
    font-weight: 500;
}

.txt_xl {
    font-size: 1.4rem;
    letter-spacing: 1.5px;
    font-weight: 500;
}

.txt_md {
    font-size: 1.25rem;
    letter-spacing: 1.5px;
    line-height: 1.8rem;
}


/* table */

.table_Container {
    width: 70%;
}

.td-w20 {
    width: 25%;
    border-left: 1px solid #c6c6c6;
}

.center {
    text-align: center;
}

.txt_justify {
    text-align: justify;
}

.td_border-bottom {
    border-bottom: 1px solid #c6c6c6;
}

td {
    padding: 1%;
    border-top: 1px solid #c6c6c6;
    border-right: 1px solid #c6c6c6;
}

.tr_bg-gray {
    background-color: #EEEEEE;
}

.tr_bg-dark {
    background-color: #404040;
    color: #fff;
}

/* pop效果 */

.js-close {
    cursor: pointer;
}

.show {
    opacity: 1;
    visibility: visible;
}

.overflowY-close {
    overflow: hidden;
}

.overflowY-show {
    overflow-y: scroll;
}

.headerClose {
    width: 8%;
    top: 50%;
    transform: translateY(-50%);
    right: 2.5%;
    padding: 0.5%;
    border: 1px solid #000;
    border-radius: 5px;
    transition: all 0.3s;
}

.headerClose:hover {
    border: 1px solid #fff;
    color: #fff;
    background-color: #0000007c;
    z-index: 1;
}

@media (max-width:768px) {
    .popConatiner {
        width: 95%;
        height: 90%;
    }

    .main {
        height: 86.4%;
        padding: 3%;
    }

    .popHeader {
        font-size: 1.4rem;
        padding: 2% 0;
    }

    .d-flex {
        display: block;
    }

    .w-20 {
        width: 100%;
        margin-bottom: 8px;
    }

    .pop-mb {
        margin-bottom: 20px;
    }

    .pop-mb-sm {
        margin-bottom: 8px;
    }

    .popTitle {
        padding-left: 0.5rem;
        border-left: 5px solid #A2D5D5;
        display: inline-block;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.25rem;
    }

    .txt_big {
        font-size: 1.3rem;
        text-align: center;
    }

    .txt_xl {
        font-size: 1.2rem;
    }

    .txt_md {
        font-size: 1.1rem;
    }

    .table_Container {
        width: 100%;
    }

    .td-w20 {
        width: 30%;
    }

    .ol_SP {
        width: 94%;
        margin-left: 6%;
    }

    .headerClose {
        width: 19%;
        padding: 0 1%;
    }
}