@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap";
@import"https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Brygada+1918:ital,wght@0,400..700;1,400..700&display=swap";

.ratio-object {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.ratio-img img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.ratio-16-9 {
    aspect-ratio: 16/9
}

.ratio-3-2 img {
    aspect-ratio: 3/4
}

.rounded-8 {
    border-radius: 8px
}

.fw-700 {
    font-weight: 700
}

.title-before {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-margin-after: 30px;
    margin-block-end: 30px
}

    .title-before::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 24px;
        -webkit-margin-end: 8px;
        margin-inline-end: 8px;
        border-radius: 4px;
        background-color: #0b7f8e
    }

.btn-video-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media(min-width: 768px) {
    .btn-video-box {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start
    }
}

.btn-video {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .5rem;
    color: #0b7f8e;
    background-color: #fff;
    border: 1px solid #0b7f8e;
    border-radius: 6px
}

    .btn-video::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: .5rem;
        background-repeat: no-repeat;
        background-position: center
    }

    .btn-video[aria-current=true], .btn-video:focus-visible, .btn-video:hover {
        color: #fff;
        background-color: #0b7f8e
    }

.btn-video-01::before {
    background-image: url(../images/btn-icon-video01.svg)
}

.btn-video-01[aria-current=true]::before, .btn-video-01:focus-visible::before, .btn-video-01:hover::before {
    background-image: url(../images/btn-icon-video01-hover.svg)
}

.btn-video-02::before {
    background-image: url(../images/btn-icon-video02.svg)
}

.btn-video-02[aria-current=true]::before, .btn-video-02:focus-visible::before, .btn-video-02:hover::before {
    background-image: url(../images/btn-icon-video02-hover.svg)
}

@media(min-width: 992px) {
    .btn-video {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

        .btn-video::before {
            margin-right: 0;
            margin-bottom: 4px
        }
}

.list-card {
    display: block;
    color: #212529
}

    .list-card:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .list-card:hover .fs-4 {
        color: #0b7f8e
    }

.ratio-shorts {
    aspect-ratio: 270/480
}

.shorts-iframe {
    text-align: center
}

    .shorts-iframe iframe {
        vertical-align: middle
    }

.btn-clean {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem .5rem;
    color: #0b7f8e;
    border: 1px solid #adb5bd;
    border-radius: 12px
}

    .btn-clean:hover, .btn-clean:focus {
        color: #fff;
        background-color: #0b7f8e;
        border: 1px solid #0b7f8e
    }

@media(min-width: 992px) {
    .btn-clean {
        height: 90px
    }
}

.clean-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

@media(min-width: 992px) {
    .clean-grid {
        grid-template-columns: repeat(6, 1fr)
    }
}

@media(min-width: 1400px) {
    .clean-grid {
        grid-template-columns: repeat(8, 1fr)
    }
}

.clean-table {
    width: 100%
}

    .clean-table th {
        padding: .75rem;
        color: #fff;
        background-color: #0b7f8e
    }

    .clean-table td {
        padding: .75rem;
        vertical-align: middle;
        border-bottom: 2px solid #fff
    }

        .clean-table td:nth-child(1) {
            color: #0f7066;
            text-align: center;
            background-color: #f8f9fa
        }

        .clean-table td:nth-child(2) {
            background-color: #fdfaf2
        }

@media(max-width: 767.98px) {
    .clean-table {
        display: block
    }

        .clean-table caption {
            display: block;
            padding: .5rem;
            padding: .75rem;
            color: #fff;
            background-color: #0b7f8e
        }

        .clean-table thead {
            display: none
        }

        .clean-table tbody, .clean-table tr, .clean-table td {
            display: block
        }

        .clean-table tr {
            margin-top: 1rem;
            border: 1px solid #dee2e6
        }
}

.clean-table-badge {
    display: inline-block;
    padding: 2px .25rem;
    background-color: #fff;
    border-radius: 1rem
}

.mp-wrap {
    height: calc(100dvh - 58px)
}

@media(min-width: 992px) {
    .mp-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: calc(100dvh - 174px);
        margin-top: 80px
    }
}

.mp-side {
    width: 100%
}

@media(min-width: 992px) {
    .mp-side {
        width: min(430px,100%)
    }
}

@media(max-width: 991.98px) {
    .mp-tool-wrap {
        position: fixed;
        z-index: 2;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-transform: translateY(104px);
        transform: translateY(104px);
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out
    }

        .mp-tool-wrap.open {
            bottom: 124px;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
}

.mp-tool {
    padding: .5rem;
    background-color: #e6e6e6
}

@media(min-width: 992px) {
    .mp-tool {
        padding: 1rem
    }
}

.mp-tool .btn-group {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: .25rem
}

    .mp-tool .btn-group label.btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-inline: .25rem;
        color: #0b7f8e;
        background-color: #fff
    }

        .mp-tool .btn-group label.btn:focus, .mp-tool .btn-group label.btn:hover, .mp-tool .btn-group label.btn.active {
            color: #fff;
            background-color: #0b7f8e
        }

.mp-btn-search {
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-bottom: 10px;
    background-color: #0b7f8e;
    background-image: url(../images/mp-btn-search.svg);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    border: none
}

    .mp-btn-search.open {
        background-image: url(../images/mp-btn-search-close.svg)
    }

@media(min-width: 992px) {
    .mp-btn-search {
        display: none
    }
}

.mp-map {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #dee2e6
}

@media(max-width: 991.98px) {
    .mp-map {
        height: calc(100vh - 182px)
    }
}

@media(min-width: 992px) {
    .mp-map {
        min-width: calc(100% - 430px);
        width: 70%;
        height: 100%;
        margin-left: auto
    }
}

.mp-map .custom-info-window {
    position: relative;
    z-index: 1;
    width: 260px;
    max-width: 80%;
    font-family: "Noto Sans TC",sans-serif;
    border: none;
    overflow: hidden;
    border-radius: 1rem
}

    .mp-map .custom-info-window .close-button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: rgba(0,0,0,0);
        border-radius: 0;
        border: none
    }

@media(min-width: 992px) {
    .mp-map .custom-info-window {
        width: 400px
    }
}

.mp-mapPopup {
    width: 100%;
    padding: 1rem;
    background-color: #fff
}

    .mp-mapPopup .mp-list-item + .mp-list-item {
        margin-top: .5rem
    }

@media(max-width: 991.98px) {
    .mp-content {
        position: fixed;
        bottom: 0;
        z-index: 2
    }
}

.mp-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
    background-color: #fff;
    overflow-x: auto;
    -ms-scroll-snap-type: both mandatory;
    scroll-snap-type: both mandatory
}

    .mp-list .mp-list-link {
        scroll-snap-align: start
    }

@media(min-width: 992px) {
    .mp-list {
        display: block;
        width: 100%;
        height: calc(100vh - 415px);
        padding-top: 1rem;
        overflow-y: auto
    }
}

.mp-list-link {
    display: block;
    padding: .5rem;
    color: #212529;
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6
}

@media(min-width: 992px) {
    .mp-list-link .fs-5 {
        margin-bottom: .5rem
    }
}

.mp-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    font-size: 1rem
}

    .mp-list-item img {
        margin-top: 2px
    }

@media(min-width: 992px) {
    .mp-list-item {
        margin-bottom: .25rem;
        font-size: 1.25rem
    }
}

.annex-file-code {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    vertical-align: bottom;
    background-color: #e6e6e6;
    border-radius: 4px
}

    .annex-file-code:hover {
        background-color: #0b7f8e
    }

        .annex-file-code:hover img {
            -webkit-filter: brightness(100);
            filter: brightness(100)
        }

.table-Hash {
    width: 100%
}

    .table-Hash th, .table-Hash td {
        padding: 1rem;
        border: 1px solid #dee2e6
    }

    .table-Hash th {
        color: #fff;
        background-color: #0b7f8e
    }

    .table-Hash td {
        background-color: #f8f9fa;
        word-break: break-all
    }

        .table-Hash td:first-child {
            text-align: center
        }

@media(max-width: 767.98px) {
    .table-Hash {
        display: block
    }

        .table-Hash thead {
            display: none
        }

        .table-Hash tbody, .table-Hash tr, .table-Hash td {
            display: block
        }

        .table-Hash td {
            padding: .5rem
        }

            .table-Hash td:not(:first-child) {
                border-top: none
            }

            .table-Hash td::before {
                content: attr(data-label) "：";
                display: block;
                font-weight: bold;
                padding-right: .25rem
            }

            .table-Hash td:first-child {
                text-align: left;
                color: #fff;
                background-color: #0b7f8e;
                border: 1px solid #0b7f8e
            }

                .table-Hash td:first-child::before {
                    display: inline-block
                }
}

@media(min-width: 768px) {
    .crpd-img {
        width: 449px;
        margin: 0 auto
    }
}

.promote-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
    margin: 4px;
    color: #212529
}

    .promote-item:hover {
        color: #0b7f8e
    }

        .promote-item:hover img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }

.promote-controls {
    padding-block: .5rem
}

@media(min-width: 992px) {
    .promote-controls {
        padding-block: 1rem
    }
}

.sp-disability-pagination, .sp-promote-pagination {
    position: static
}

    .sp-disability-pagination .swiper-pagination-bullet, .sp-promote-pagination .swiper-pagination-bullet {
        width: 1rem;
        height: 4px;
        border-radius: 0
    }

    .sp-disability-pagination .swiper-pagination-bullet-active, .sp-promote-pagination .swiper-pagination-bullet-active {
        width: 2rem
    }

.disability-wrsp {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: 1rem;
    padding: 1rem;
    background-color: #fdfff9;
    border-radius: 1rem
}

@media(min-width: 992px) {
    .disability-wrsp {
        display: block
    }
}

.spDisability {
    width: 100%
}

.ratio-disability {
    overflow: hidden;
    border-radius: 20px
}

    .ratio-disability img {
        aspect-ratio: 409/230
    }

@media(min-width: 992px) {
    .ratio-disability {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 409px
    }
}

.disability-item-body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.disability-item-tit {
    position: relative;
    -webkit-margin-after: 1.5rem;
    margin-block-end: 1.5rem;
    padding-block: .75rem;
    color: #000;
    font-size: 1.5rem
}

    .disability-item-tit::before, .disability-item-tit::after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: 0;
        height: 2px
    }

    .disability-item-tit::before {
        left: 0;
        width: 82px;
        background-color: #0b7f8e
    }

    .disability-item-tit::after {
        right: 0;
        width: calc(100% - 86px);
        background-color: #dee2e6
    }

.disability-item {
    display: block;
    color: #212529;
    margin: 4px
}

@media(min-width: 992px) {
    .disability-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem
    }
}

.disability-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(min-width: 992px) {
    .disability-controls {
        position: absolute;
        z-index: 2;
        top: 1rem;
        right: 1rem;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

.sp-disability-prev, .sp-disability-next {
    position: static;
    margin: 0;
    width: 24px;
    height: 24px
}

    .sp-disability-prev::after, .sp-disability-next::after {
        background: url(../images/disability-arrow.svg) no-repeat center
    }