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

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

a {
    color: #000;
}

/*-----------------------------------------------
|   Font family
-----------------------------------------------*/
/* @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,700;1,400&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap'); */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

body {
    font-family: "Mulish", "Noto Sans TC", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial;
    line-height: 2;
    font-weight: 400;
    overflow-x: hidden;
}

/*-----------------------------------------------
|   variable
-----------------------------------------------*/
:root {
    --transition-ease: all 0.4s ease;
}

/*-----------------------------------------------
|   spacer
-----------------------------------------------*/
.mb-12 {
    margin-bottom: 48px;
}

.mb-15 {
    margin-bottom: 60px;
}

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

.mb-25 {
    margin-bottom: 100px;
}

.mb-30 {
    margin-bottom: 120px;
}

.mb-40 {
    margin-bottom: 140px;
}

.mb-50 {
    margin-bottom: 200px;
}

.mt-12 {
    margin-top: 48px;
}

.mt-20 {
    margin-top: 80px;
}

.mt-25 {
    margin-top: 100px;
}

.pt-12 {
    padding-top: 48px;
}

.pt-25 {
    padding-top: 100px;
}

.pt-50 {
    padding-top: 200px;
}

.pb-25 {
    padding-bottom: 100px;
}

.pb-50 {
    padding-bottom: 200px;
}

@media (min-width: 576px) {
    .mb-sm-12 {
        margin-bottom: 48px;
    }

    .mb-sm-15 {
        margin-bottom: 60px;
    }

    .mb-sm-20 {
        margin-bottom: 80px;
    }

    .mb-sm-25 {
        margin-bottom: 100px;
    }

    .mb-sm-30 {
        margin-bottom: 120px;
    }

    .mb-sm-40 {
        margin-bottom: 140px;
    }

    .mt-sm-12 {
        margin-top: 48px;
    }

    .mt-sm-20 {
        margin-top: 80px;
    }

    .mt-sm-25 {
        margin-top: 100px;
    }

    .pt-sm-25 {
        padding-top: 100px;
    }

    .pt-sm-50 {
        padding-top: 200px;
    }

    .pb-sm-25 {
        padding-bottom: 100px;
    }

    .pb-sm-50 {
        padding-bottom: 200px;
    }
}

@media (min-width: 768px) {
    .mb-md-12 {
        margin-bottom: 48px;
    }

    .mb-md-15 {
        margin-bottom: 60px;
    }

    .mb-md-20 {
        margin-bottom: 80px;
    }

    .mb-md-25 {
        margin-bottom: 100px;
    }

    .mb-md-30 {
        margin-bottom: 120px;
    }

    .mb-md-40 {
        margin-bottom: 140px;
    }

    .mt-md-12 {
        margin-top: 48px;
    }

    .mt-md-20 {
        margin-top: 80px;
    }

    .mt-md-25 {
        margin-top: 100px;
    }

    .pt-md-25 {
        padding-top: 100px;
    }
    
    .pt-md-50 {
        padding-top: 200px;
    }

    .pb-md-25 {
        padding-bottom: 100px;
    }

    .pb-md-50 {
        padding-bottom: 200px;
    }
}

@media (min-width: 992px) {
    .mb-lg-12 {
        margin-bottom: 48px;
    }

    .mb-lg-15 {
        margin-bottom: 60px;
    }

    .mb-lg-20 {
        margin-bottom: 80px;
    }

    .mb-lg-25 {
        margin-bottom: 100px;
    }

    .mb-lg-30 {
        margin-bottom: 120px;
    }

    .mb-lg-40 {
        margin-bottom: 140px;
    }

    .mt-lg-12 {
        margin-top: 48px;
    }

    .mt-lg-20 {
        margin-top: 80px;
    }

    .mt-lg-25 {
        margin-top: 100px;
    }

    .pt-lg-25 {
        padding-top: 100px;
    }
    
    .pt-lg-50 {
        padding-top: 200px;
    }

    .pb-lg-25 {
        padding-bottom: 100px;
    }

    .pb-lg-50 {
        padding-bottom: 200px;
    }
}

@media (min-width: 1200px) {
    .mb-xl-12 {
        margin-bottom: 48px;
    }

    .mb-xl-15 {
        margin-bottom: 60px;
    }

    .mb-xl-20 {
        margin-bottom: 80px;
    }

    .mb-xl-25 {
        margin-bottom: 100px;
    }

    .mb-xl-30 {
        margin-bottom: 120px;
    }

    .mb-xl-40 {
        margin-bottom: 140px;
    }

    .mt-xl-12 {
        margin-top: 48px;
    }

    .mt-xl-20 {
        margin-top: 80px;
    }

    .mt-xl-25 {
        margin-top: 100px;
    }

    .pt-xl-25 {
        padding-top: 100px;
    }
    
    .pt-xl-50 {
        padding-top: 200px;
    }

    .pb-xl-25 {
        padding-bottom: 100px;
    }

    .pb-xl-50 {
        padding-bottom: 200px;
    }
}

@media (min-width: 1400px) {
    .mb-xxl-12 {
        margin-bottom: 48px;
    }

    .mb-xxl-15 {
        margin-bottom: 60px;
    }

    .mb-xxl-20 {
        margin-bottom: 80px;
    }

    .mb-xxl-25 {
        margin-bottom: 100px;
    }

    .mb-xxl-30 {
        margin-bottom: 120px;
    }

    .mb-xxl-40 {
        margin-bottom: 140px;
    }

    .mt-xxl-12 {
        margin-top: 48px;
    }

    .mt-xxl-20 {
        margin-top: 80px;
    }

    .mt-xxl-25 {
        margin-top: 100px;
    }

    .pt-xxl-25 {
        padding-top: 100px;
    }
    
    .pt-xxl-50 {
        padding-top: 200px;
    }

    .pb-xxl-25 {
        padding-bottom: 100px;
    }

    .pb-xxl-50 {
        padding-bottom: 200px;
    }
}