/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/*html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}*/

.home h1 {
    font-size: 2em;
    margin: .67em 0
}

.home main {
    display: block
}

.home a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

.home abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

.home img {
    border-style: none
}

.home [hidden] {
    display: none
}


/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    font-family: "微軟正黑體";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: #727E8C;
    text-align: left;
    background-color: #F2F4F4;
}
*/
.home h1,
.home h2,
.home h3,
.home h4,
.home h5,
.home h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.home p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.home ol,
.home ul,
.home dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

    .home ol ol,
    .home ul ul,
    .home ol ul,
    .home ul ol {
        margin-bottom: 0;
    }

.home a {
    color: #ff6000;
    text-decoration: none;
    background-color: transparent;
}

    .home a:hover {
        color: #b34300;
        text-decoration: none;
        font-weight: 600;
    }


.home img {
    vertical-align: middle;
    border-style: none;
}

.home h1, .home h2, .home h3, .home h4, .home h5, .home h6,
.home .h1, .home .h2, .home .h3, .home .h4, .home .h5, .home .h6 {
    margin-bottom: 0.5rem;
    font-family: "微軟正黑體";
    font-weight: 400;
    line-height: 1.2;
    color: #475F7B;
}

.home h1, .home .h1 {
    font-size: 2.53rem;
}

.home h2, .home .h2 {
    font-size: 2.13rem;
}

.home h3, .home .h3 {
    font-size: 1.73rem;
}

.home h4, .home .h4 {
    font-size: 1.47rem;
}

.home h5, .home .h5 {
    font-size: 1.3rem;
}

.home h6, .home .h6 {
    font-size: 1rem;
}

.home body,
.home div,
.home h1,
.home h2,
.home h3,
.home h4,
.home h5,
.home h6,
.home html,
.home img,
.home p,
.home section,
.home span,
.home ul {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

.home body {
    line-height: 1;
}

.home main,
.home section {
    display: block;
}

.home ul {
    list-style: none;
}

.home a {
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 100%;
    text-decoration: none;
    vertical-align: baseline;
    background: transparent;
    outline: none;
}

    .home a:hover {
        color: #555555;
        text-decoration: underline;
    }

.home * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.home .container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

@media all and (min-width: 1280px) {
    .home .container {
        min-width: 1240px;
    }
}

@media screen and (min-width: 1100px) {
    .home .container-fluid {
        width: 80%;
        min-width: 960px;
        max-width: 1240px;
    }
}

@media screen and (max-width: 1100px) {
    .home .container-fluid {
        max-width: 940px;
        min-width: 940px;
    }
}

/*html,
body {
    min-width: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
    font-family: "微軟正黑體", Verdana, "Microsoft JhengHei", sans-serif;
}
*/

.home .fade:not(.show) {
    opacity: 1 !important;
}

.home .cs-l-container {
    width: 100%;
}

@media all and (min-width: 1280px) {
    .home .cs-l-container {
        min-width: 1280px;
    }
}

.home .FlexColumnTop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.home a,
.home a:hover {
    text-decoration: none;
}

.home .sticky .svg-icon g,
.home .sticky .svg-icon path {
    fill: #fff;
}

.home li.on .svg-icon g,
.home li.on .svg-icon path {
    fill: #ff5100;
}

/*KV Banner*/
.home .KVbanner {
    position: relative;
    max-height: 420px;
    overflow: hidden;
}

.home .sliderArea {
    width: 100%;
    height: 3rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    z-index: 3;
}

.home .sliderP {
    width: .6rem;
    height: .6rem;
    border-radius: 100px;
    background-color: #fff;
    margin: 0 0.5rem;
}

    .home .sliderP:hover {
        width: .6rem;
        height: .6rem;
        border-radius: 100px;
        background-color: #ff7e25;
        margin: 0 0.5rem;
    }

.home .KVbanner img {
    height: 100%;
    width: auto;
    vertical-align: middle;
}

@media all and (min-width: 940px) {
    .home .KVbanner {
        height: 420px;
        max-height: 420px;
        overflow: hidden;
    }
}

@media all and (max-width: 940px) {
    .home .KVbanner {
        height: 420px;
        max-height: 420px;
        overflow: hidden;
    }
}

@media all and (max-width: 640px) {
    .home .KVbanner {
        height: 280px;
        overflow: hidden;
    }

        .home .KVbanner img {
            height: 100%;
            width: 100%;
            max-height: 280px;
            vertical-align: middle;
        }

    .home .sliderArea {
        width: 100%;
        height: 2rem;
        text-align: center;
        position: absolute;
        bottom: 0;
    }
}



@media only screen and (min-width: 320px) {
    .home .rwd-mobile {
        display: none !important;
    }

    .home .rwd-desktop {
        display: block !important;
    }
}

@media all and (max-width: 959.9px) {
    .home .hidden-phone {
        display: none;
    }
}

.home .logo img {
    width: 133px;
}

@media all and (max-width: 960px) {
    .home .logo img {
        display: none;
    }
}

@media all and (max-width: 960px) {
    .home .l-mobileHeader__logo img {
        width: 94px;
    }
}
/*最新活動 & NEWS 共用*/
.home .eventArea {
    width: 74%;
    margin: 2rem auto 3.5rem auto;
    display: flex;
    flex-direction: row;
    align-items: start;
}

.home .event-b-01 {
    width: 50%;
    padding: 0 1rem;
    display: block;
}

    .home .event-b-01 h2 {
        color: #000;
        font-size: larger;
        font-weight: 600;
        margin-bottom: 1rem;
    }
/*最新活動*/
.home .event-comtent {
    display: flex;
    flex-direction: row;
    align-items: center;
}

@media all and (min-width: 640px) {
    .home .event-comtent-i {
        max-height: 180px;
        margin: 0 0.5rem;
        display: flex;
        flex-direction: row;
        align-items: start;
    }

    .home .event-comtent-arrow {
        margin: 0;
    }

    .home .event-comtent-bn {
        width: 300px;
        height: 180px;
        /*margin: 0 1rem 0 0.5rem;*/
        overflow: hidden;
        cursor: pointer;
    }

        .home .event-comtent-bn:hover {
            transform: scale(1.05,1.05);
            transition: all 0.5s ease-in-out;
            overflow: hidden;
        }

        .home .event-comtent-bn img {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

    .home .event-comtent-word {
        color: #000;
        font-size: 1.125rem;
        line-height: 1.2;
        padding: 0 0.5rem;
        font-weight: bolder;
        max-height: 180px;
    }

        .home .event-comtent-word p {
            color: #000;
        }

            .home .event-comtent-word p:hover, a:focus {
                color: #ff4400;
            }

        .home .event-comtent-word .title {
            max-height: 40px;
            overflow: hidden;
            word-break: break-all;
        }

        .home .event-comtent-word .detail {
            color: #b5b5b5;
            font-size: 1rem;
            margin: 0.5rem 0;
            font-weight: normal;
            max-height: 70px;
            overflow: hidden;
            word-break: break-all;
        }

            .home .event-comtent-word .detail p {
                color: #b5b5b5;
            }

                .home .event-comtent-word .detail p:hover, p:focus {
                    color: #ff4400;
                    font-weight: normal;
                }

        .home .event-comtent-word .date {
            color: #00a64e;
            font-size: 0.875rem;
            margin: 0.5rem 0;
            font-weight: bold;
            max-height: 70px;
            overflow: hidden;
            word-break: break-all;
        }

            .home .event-comtent-word .date p {
                color: #00a64e;
            }

                .home .event-comtent-word .date p:hover, p:focus {
                    color: #ff4400;
                }
}

@media all and (max-width: 640px) {
    .home .event-comtent-i {
        margin: 0 0.5rem;
        display: flex;
        flex-direction: row;
        align-items: start;
    }

    .home .event-comtent-arrow {
        margin: 0;
    }

    .home .event-comtent-bn {
        width: 300px;
        height: 180px;
        margin: 0 1rem 0 0.5rem;
        overflow: hidden;
        cursor: pointer;
    }

        .home .event-comtent-bn:hover {
            transform: scale(1.05,1.05);
            transition: all 0.5s ease-in-out;
            overflow: hidden;
        }

        .home .event-comtent-bn img {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

    .home .event-comtent-word {
        color: #000;
        font-size: 1.125rem;
        line-height: 1.2;
        padding: 0 0.5rem;
        font-weight: bolder;
    }

        .home .event-comtent-word p {
            color: #000;
        }

            .home .event-comtent-word p:hover, a:focus {
                color: #ff4400;
            }

        .home .event-comtent-word .date {
            color: #00a64e;
            font-size: 0.875rem;
            margin: 0.5rem 0;
            font-weight: bold;
        }

            .home .event-comtent-word .date p {
                color: #00a64e;
            }

                .home .event-comtent-word .date p:hover, p:focus {
                    color: #ff4400;
                }

        .home .event-comtent-word .detail {
            color: #b5b5b5;
            font-size: 1rem;
            margin: 0.5rem 0;
            font-weight: normal;
        }

            .home .event-comtent-word .detail p {
                color: #b5b5b5;
            }

                .home .event-comtent-word .detail p:hover, p:focus {
                    color: #ff4400;
                    font-weight: normal;
                }
}

.home .EventsliderArea {
    width: 100%;
    padding: 1.5rem 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.home .sliderPE {
    width: .6rem;
    height: .6rem;
    border-radius: 100px;
    background-color: #8b8b8b;
    margin: 0 0.5rem;
}

    .home .sliderPE:hover {
        width: .6rem;
        height: .6rem;
        border-radius: 100px;
        background-color: #ff7e25;
        margin: 0 0.5rem;
    }

@media all and (max-width: 1456px) {
    .home .eventArea {
        width: 88%;
        margin: 2rem auto;
        display: flex;
    }
}

@media all and (max-width: 1240px) {
    .home .eventArea {
        width: 96%;
        margin: 2rem auto;
        display: flex;
    }
}

@media all and (max-width: 959.9px) {
    .home .eventArea {
        width: 92%;
        margin: 2rem auto;
        display: flex;
        flex-direction: column;
    }

    .home .event-b-01 {
        width: 100%;
        margin: 1rem 0;
    }

    .home .event-comtent-arrow {
        margin: 0;
        display: none;
    }

    .home .EventsliderArea {
        width: 100%;
        padding: 1.5rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media all and (max-width: 639.9px) {
    .home .eventArea {
        width: 98%;
        margin: 1rem auto;
        display: flex;
        flex-direction: column;
    }

    .home .event-b-01 {
        width: 98%;
        margin: 0.5rem 0;
    }

        .home .event-b-01 h2 {
            color: #000;
            font-size: larger;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

    .home .event-comtent-i {
        width: 100%;
        margin: 0 0.125rem;
        display: block;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    }

    .home .event-comtent-bn {
        width: 100%;
        height: 240px;
        margin: 0 auto;
        overflow: hidden;
        border: #dfdfdf solid 1px;
        cursor: pointer;
    }

        .home .event-comtent-bn:hover {
            transform: none;
            transition: none;
        }

        .home .event-comtent-bn img {
            max-width: 100%;
            width: 100vw;
        }

    .home .event-comtent-word {
        width: 100%;
        height: 140px;
        border: #cfcfcf solid 1px;
        color: #000;
        font-size: 1.125rem;
        line-height: 1.2;
        padding: 0.5rem 1rem;
        font-weight: bolder;
    }

    .home .EventsliderArea {
        width: 100%;
        padding: 1.215rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media all and (max-width: 419.9px) {
    .home .event-comtent-bn {
        width: 100%;
        height: 180px;
        margin: 0 auto;
        overflow: hidden;
        border: #dfdfdf solid 1px;
        cursor: pointer;
    }

        .home .event-comtent-bn:hover {
            transform: none;
            transition: none;
        }

        .home .event-comtent-bn img {
            max-width: 100%;
            width: 100vw;
        }
}

/*NEWS*/
.home .news-title-position {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

    .home .news-title-position span {
        color: #bbb;
        font-size: 0.875rem;
    }

        .home .news-title-position span a, a:visited {
            color: #00a64e;
            text-decoration: none;
        }

            .home .news-title-position span a:hover, a:active {
                color: #ff4400;
                text-decoration: none;
            }

.home .news-list-style {
    list-style-type: none;
    list-style-position: inside;
    color: #000;
    font-size: 1rem;
    font-weight: bold;
}

    .home .news-list-style li::before {
        content: "\2027";
        color: #00a64e;
        display: inline-block;
        width: 0.875rem;
    }

    .home .news-list-style li {
        padding: 0.6rem;
        border-bottom: #d2d2d2 dotted 2px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        .home .news-list-style li:hover {
            background-color: #fff6d6;
        }

        .home .news-list-style li a, a:visited {
            color: #333;
        }

            .home .news-list-style li a:hover, a:focus {
                color: #ff4400;
            }

        .home .news-list-style li .date {
            color: #00a64e;
            font-size: 0.875rem;
            margin-right: 1rem;
        }

@media all and (max-width: 639.9px) {
    .home .news-mb36 {
        margin-bottom: 2rem;
    }
}

.slick-dots li button:before {
    font-size: 12px;
    opacity: 1;
    color: #666;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ff5100;
}

.KVbanner .slick-slider .slick-dots {
    position: relative;
    margin-top: -60px;
}

.banner-item {
    display: flex;
    align-items: center;       /* 垂直置中 */
    justify-content: center;   /* 水平置中 */
    width: 100%;
    height: 100%;              /* 你可以固定高度，例如 300px */
    overflow: hidden;          /* 超出裁切 */
    background-color: #f5f5f5; /* 可以設定背景，避免破圖 */
}