@charset "utf-8";
/* Google Fonts - Arimo for numpad */
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap');

/*-----------------------------
            GLOBE SETTING
-----------------------------*/

* {
    font-family: "微軟正黑體", "新細明體", sans-serif;
    font-size: 16px;
}

section {
    position: relative
}

h1, h2, h3, h4, h5, p, ul, ol, img {
    margin-bottom: 0;
    padding: 0;
}

main {
    overflow: hidden;
}

header {
    max-height: 100px;
}

::selection {
    color: #fff;
    background-color: #655040;
}

.ja-font {
    font-family: Crossten, "游ゴシック体", "微软雅黑", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.hb-font {
    font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}

a, a:focus {
    color: #000;
    transition: all .3s;
}

footer a {
    color: #fff;
    font-weight: 600;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

a.bg-cover {
    display: block;
}

a.hover-under-line {
    position: relative;
    padding-bottom: 5px;
}

a.hover-under-line:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0;
    transition: all .3s;
    transform: scaleX(0);
}

a.hover-under-line:hover:after {
    transform: scaleX(1);
}

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

.x-bg {
    background-color: #655040;
    color: #fff;
    position: relative;
}

.x-bg-light {
    background-color: #efefef;
}

.fb-block iframe {
    width: 100% !important;
}

ul.social-btn {
    list-style: none;
    padding-left: unset;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    margin: 20px 0;
}

ul.social-btn li {
    display: inline-block;
}

ul.social-btn li:nth-child(n+2) {
    margin-left: 10px;
}

ul.social-btn li a {
    color: #fff;
    display: block;
}

ul.social-btn li a i.fa {
    width: 40px;
    line-height: 40px;
    text-align: center;
}

ul.social-btn li i.x-icon {
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
    background-color: #333;
}

ul.social-btn li i.x-icon:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.6rem;
}

ul.social-btn li i.x-icon.x-icon-line:after {
    background-color: #72c02c;
    background-image: url(../../images/social/line.png);
}

ul.social-btn li i.x-icon.x-icon-massenger:after {
    background-color: #3398dc;
    background-image: url(../../images/social/messenger.png);
}

ul.social-btn li a {
    border-radius: 8px;
    overflow: hidden;
}

ul.social-btn li a:hover {
    opacity: .8;
}

ol.site-page a {
    color: #655040;
}

ol.site-page a:hover {
    color: #999;
}

ol.site-page {
    font-size: .8rem;
}

ol.site-page li:nth-child(n+2) {
    position: relative;
}

ol.site-page li:nth-child(n+2):before {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f105";
    color: #655040;
    margin-right: 10px;
}

ol.site-page li.active a {
    font-weight: 400;
    color: #999;
    padding-bottom: 2px;
    border-bottom: 1px dashed #ccc;
}

ol.site-page li a span {
    font-size: .8rem;
}

@media (min-width:1199px) {
    .container-lg {
        max-width: 1480px;
    }
    .container-sm {
        max-width: 960px;
    }
}

@media (min-width:992px) {
    .container-sm {
        max-width: 720px;
    }
}

@media (max-width:991px) {
    .container.container-over {
        max-width: none;
    }
}

/*-----------------------------
            GLOBE SETTING End
-----------------------------*/

/* 直書 */

.about-group-v2 h3 span, figure.img-text figcaption, .text-inline h3.cul-text, .content h2, .x-content h2, .home-scenic h2 {
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    text-orientation: upright;
    margin: 0;
}

/* Flex */

.bg-video .ind-title, .block-group .x-block, .block-group, .detail-inline, .about-group-v2 .content ul, .about-group-v2, .about-group-v1 .content, .about-group-v1, .text-inline, footer .inner, .home-room, .home-scenic, .home-scenic h2, .home-news {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/*-----------------------------
            Header
-----------------------------*/

.navbar {
    padding: 0;
    transition: all .3s;
}

.navbar>.container-fluid {
    position: static;
}

ul.navbar-nav li.nav-item {
    margin-left: 20px;
}

ul.navbar-nav li.nav-item.nav-item-check {
    margin-right: -15px;
}

ul.navbar-nav li.nav-item.nav-item-check a {
    display: block;
    background-color: #655040;
    color: #fff !important;
    min-width: 200px;
    text-align: center;
}

ul.navbar-nav li.nav-item.nav-item-check a i {
    margin-right: 5px;
}

ul.navbar-nav li.nav-item a {
    font-size: 12pt;
    transition: all .3s;
    padding: 0 !important;
}

a.navbar-brand {
    padding: 0;
    margin: 0;
}

a.navbar-brand img {
    max-height: 50px;
    display: block;
    transition: all .5s;
}

button.navbar-toggler {
    top: 0px;
}

button.navbar-toggler .hamburger {
    padding: 10px;
}

@media (min-width:1199px) {
    a.navbar-brand {
        padding-left: 10px;
        margin-left: 120px;
    }
    ul.navbar-nav li.nav-item {
        margin-left: 40px;
    }
}

@media (min-width:992px) {
    .js-header-fix-moment a.navbar-brand img {
        max-height: 38px;
    }
    .js-header-fix-moment ul.navbar-nav li.nav-item a {
        line-height: 50px;
    }
    ul.navbar-nav li.nav-item a {
        line-height: 70px;
    }
    .home-group.first-group {
        margin-top: 70px;
    }
}

@media (max-width:1199px) {}

@media (max-width:991px) {
    a.navbar-brand {
        max-width: 150px;
        margin: 0 auto 0 10px;
        padding: 5px 0;
    }
    a.navbar-brand img {
        max-height: 38px;
    }
    #navBar ul.navbar-nav {
        height: calc( 60vh - 48px);
        padding-top: 50px;
        background-color: #f7f7f7;
    }
    #navBar ul.navbar-nav li.nav-item {
        margin: 0 20px;
        text-align: center;
        position: relative;
    }
    #navBar ul.navbar-nav li.nav-item:not(:first-child):before {
        content: "";
        display: block;
        position: absolute;
        top: 0px;
        width: 30px;
        height: 1px;
        background-color: #ddd;
        left: calc( 50% - 15px)
    }
    #navBar ul.navbar-nav li.nav-item a.nav-link {
        padding: 20px 0 !important;
    }
    #navBar ul.navbar-nav li.nav-item-check {
        position: absolute;
        bottom: 0px;
        margin: 0;
        left: 0;
        right: 0;
    }
    #navBar ul.navbar-nav li.nav-item.nav-item-check:before {
        display: none;
    }
}

@media (max-width:767px) {
    #navBar ul.navbar-nav {
        height: calc( 100vh - 48px);
        padding-top: 50px;
    }
}

/*-----------------------------
            Header End
-----------------------------*/

/*-----------------------------
            KV Banner
-----------------------------*/

.kv-divimage {
    background-image: url(../../images/banner/01.jpg);
}

.key-group {
    height: 90vh;
}

.x-bg-about {
    background-image: url(../../images/banner/about.jpg);
}

.x-bg-rooms {
    background-image: url(../../images/banner/rooms.jpg);
}

.x-bg-articles {
    background-image: url(../../images/banner/articles.jpg);
}

.x-bg-scenic {
    background-image: url(../../images/banner/scenic.jpg);
}

.x-bg-helps {
    background-image: url(../../images/banner/helps.jpg);
}

#myVideo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.bg-video {
    height: 100vh;
}

.bg-video .ind-title {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.bg-video .ind-title .item {
    display: inline-block;
    position: absolute;
}

.bg-video .ind-title .item.obj-01 {
    left: 0px;
    animation: lighting 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) both;
    animation-delay: 1s;
}

.bg-video .ind-title .item.obj-02 {
    right: 0px;
    animation: lighting 2s cubic-bezier(0.46, 0.03, 0.52, 0.96) both;
}

@keyframes lighting {
    0% {
        top: 100px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

.scroll-down {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
}

.scroll-down a {
    display: block;
    position: relative;
    width: 120px;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 30px;
}

.scroll-down a:after {
    width: 15px;
    height: 15px;
    content: "";
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: absolute;
    transform: rotate(45deg);
    bottom: -15px;
    left: 50%;
    margin-left: -8px;
    animation: aro 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite both;
}

@keyframes aro {
    0% {
        bottom: -15px;
    }
    50% {
        bottom: -25px;
    }
    100% {
        bottom: -15px;
    }
}

.bg-video .ind-title .ind-block {
    position: relative;
    height: 420px;
    width: 124px;
    margin-top: -10%;
}

@media (max-width:767px) {
    .kv-divimage {
        background-image: url(../../images/banner/01-sp.jpg);
    }
    .key-group {
        height: 40vh;
    }
    .x-bg-about {
        background-image: url(../../images/banner/about-sp.jpg);
    }
    .x-bg-rooms {
        background-image: url(../../images/banner/rooms-sp.jpg);
    }
    .x-bg-articles {
        background-image: url(../../images/banner/articles-sp.jpg);
    }
    .x-bg-scenic {
        background-image: url(../../images/banner/scenic-sp.jpg);
    }
    .x-bg-helps {
        background-image: url(../../images/banner/helps-sp.jpg);
    }
}

/*-----------------------------
            KV Banner End
-----------------------------*/

/*-----------------------------
            Home Style
-----------------------------*/

.page-intro {
    max-width: 680px;
    margin: 0 auto;
}

.page-intro p.lead {
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 3rem;
}

.page-intro p {
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1.8rem;
    margin-bottom: 30px;
}

.page-intro h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.page-intro ul {
    padding-left: 20px;
}

.page-intro ul li {
    margin-bottom: 10px;
    font-size: 1rem;
}

.u-go-to-v1:hover, .u-go-to-v1:focus:hover {
    background-color: #655040;
}

.home-group, .room-group {
    padding: 100px 0;
}

.x-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

.x-badge span {
    font-size: 1rem;
    padding: 0 5px;
    display: inline-block;
    line-height: 25px;
    color: #fff;
    display: b;
}

.x-badge span:not(:first-child) {
    margin-left: 5px;
}

.x-badge span.num {
    border-radius: 100%;
    background-color: #FF9800;
    color: #fff;
    width: 25px;
    height: 25px;
    font-family: monospace;
}

.x-badge span.tip {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 4px;
    line-height: 25px;
}

figure.img-text {
    position: relative;
}

figure.img-text figcaption {
    position: absolute;
    top: 50px;
    right: 50px;
    background-color: #000;
    padding: 20px 10px 10px 10px;
    height: 50%;
    max-height: 280px;
    letter-spacing: 4px;
    color: #fff;
}

.x-title-v1 {
    text-align: center;
}

.x-title-v1 h1 span {
    display: block;
    font-size: 10pt;
    color: #aaa;
    letter-spacing: 5px;
    margin-top: 10px;
    text-align: center;
}

.x-title-v1 h3, .x-title-v1 h2, .x-title-v1 h1 {
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: center;
    display: block;
    width: 100%;
}

.x-title-v1 h1:after, .x-title-v1 h2:after, .x-title-v1 h3:after, .x-title-v1 h1:before, .x-title-v1 h2:before, .x-title-v1 h3:before {
    content: "";
    display: block;
    position: absolute;
}

.x-title-v1 h1:after, .x-title-v1 h2:after, .x-title-v1 h3:after {
    width: 50px;
    height: 3px;
    left: calc( 50% - 25px);
    bottom: 0px;
    background-color: #aaa;
}

.x-title-v1 h1:before, .x-title-v1 h2:before, .x-title-v1 h3:before {
    width: 180px;
    height: 1px;
    left: calc( 50% - 90px);
    bottom: 1px;
    border-bottom: 1px dotted #ccc;
}

.x-btn {
    display: block;
    border: 1px solid #9E9E9E;
    max-width: 220px;
    text-align: center;
    line-height: 3rem;
    font-size: 1rem;
    border-radius: 4px;
}

.x-bg-full-v3 .x-btn {
    color: #fff;
}

.x-btn:hover {
    background-color: #655040;
    color: #fff;
}

.x-bg-full-v1 {
    background: url(../../images/bg/bg-v1.jpg);
}

.x-bg-full-v2 {
    background: url(../../images/bg/bg-v2.jpg);
}

.x-bg-full-v3 {
    background: url(../../images/bg/bg-v3.jpg);
}

.x-bg-line-v1 {
    position: relative;
}

.x-bg-line-v1:after {
    content: "";
    display: block;
    position: absolute;
    height: 100px;
    width: 1px;
    border-right: 1px solid #ccc;
    bottom: -50px;
    left: 50%;
}

.x-content {
    justify-content: space-between;
}

.x-content h2 {
    flex: 0 0 20%;
}

.x-content h2 span {
    font-size: 2.4rem;
    display: block;
    margin-right: auto;
    margin-left: auto;
    font-family: "微軟正黑體";
    font-weight: 600;
}

.x-content p {
    line-height: 2.6rem;
    flex: 1 0 70%;
}

.home-room {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.home-room-reverse {
    flex-direction: row-reverse;
}

.home-room-reverse:before {
    left: auto;
    right: 40%;
}

.home-room-reverse .content h2 {
    right: auto;
    left: -50px;
}

.home-room:before {
    content: "";
    position: absolute;
    top: -50px;
    left: 40%;
    width: 100%;
    height: calc( 100% + 100px);
    background: #f5f3ef;
    z-index: 0;
}

.home-room .cover {
    flex: 0 0 60%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.home-room .content {
    flex: 0 0 30%;
    position: relative;
    padding-top: 50px;
}

.home-room .content h2 {
    position: absolute;
    right: -50px;
    top: 0;
    letter-spacing: 4px;
    font-family: "微軟正黑體";
    font-weight: 600;
}

/* 訊息管理：圖片輪播版型 */
.message-gallery {
    padding: 40px 0;
}

.message-gallery-text {
    text-align: center;
    margin-bottom: 40px;
}

.message-gallery-text h2 {
    font-size: 2.4rem;
    margin-bottom: 15px;
    font-family: "微軟正黑體";
    font-weight: 600;
}

.message-gallery-text h3 {
    font-size: 1.5rem;
    color: #666;
    margin-bottom: 10px;
}

.message-gallery-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

.message-gallery-images {
    margin-top: 30px;
    position: relative;
}

.message-gallery-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 訊息輪播箭頭 */
.message-gallery-images .slick-arrow-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #e0e0e0;
    color: #333;
    font-size: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.message-gallery-images .slick-arrow-custom:hover {
    background: #fff;
    color: #000;
    border-color: #8b7355;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transform: translateY(-50%) scale(1.1);
}

.message-gallery-images .slick-arrow-custom-left {
    left: 10px;
}

.message-gallery-images .slick-arrow-custom-right {
    right: 10px;
}

.message-gallery-images .slick-arrow-custom.slick-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* 訊息輪播圖片間距 */
.message-gallery-images .js-slide {
    padding: 0 10px;
}

.message-gallery-images .slick-list {
    margin: 0 -10px;
}

/* 確保輪播軌道正常顯示 */
.message-gallery-images .slick-track {
    display: flex;
    align-items: center;
}

/* 單張圖片時隱藏箭頭 */
.message-gallery-images.slick-slider[data-infinite="false"] .slick-arrow-custom {
    display: none !important;
}

/* 確保圖片不會變形 */
.message-gallery-images .js-slide img {
    object-fit: cover;
    min-height: 200px;
    max-height: 400px;
}

/* 訊息管理：左圖右文/右圖左文 淡入淡出輪播 */
.message-room-carousel {
    position: relative;
    width: 100%;
}

/* 確保 fade 模式的幻燈片正確疊層 */
.message-room-carousel.slick-slider .slick-list {
    position: relative;
    overflow: hidden;
}

.message-room-carousel.slick-slider .slick-track {
    position: relative;
}

/* fade 模式：track 不需要額外高度，由第一張 slide 撐開 */
.message-room-carousel.slick-slider.slick-fade .slick-track {
    position: relative;
    display: block;
}

/* fade 模式：所有幻燈片預設為絕對定位並疊在一起 */
.message-room-carousel.slick-slider.slick-fade .slick-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    float: none;  /* 取消 Slick 預設的 float: left */
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

/* 第一張圖片使用相對定位，撐開容器高度 */
.message-room-carousel.slick-slider.slick-fade .slick-slide:first-child {
    position: relative;
    top: auto;
    left: auto;
}

/* 當前顯示的幻燈片 */
.message-room-carousel.slick-slider.slick-fade .slick-slide.slick-active {
    opacity: 1;
    z-index: 1;
}

/* 訊息輪播導航點樣式 */
.message-room-carousel .slick-paging-white {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 8px;
    z-index: 10;
    padding: 0;
    margin: 0;
    list-style: none;
}

.message-room-carousel .slick-paging-white li {
    margin: 0;
    padding: 0;
}

.message-room-carousel .slick-paging-white li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 0;
    transition: all 0.3s ease;
}

.message-room-carousel .slick-paging-white li button:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: #fff;
}

.message-room-carousel .slick-paging-white li.slick-active button {
    background: #fff;
    border-color: #fff;
}

/* 確保輪播圖片正確顯示 */
.message-room-carousel .js-slide img {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width:992px) {
    .x-bg-line-v1:after {
        height: 140px;
        bottom: -70px;
        z-index: 3;
    }
}

@media (max-width:991px) {
    figure.img-text figcaption {
        font-size: 1rem;
        padding: 10px 5px;
    }
}

@media (max-width:767px) {
    /* 訊息管理區塊：手機版容器設定 */
    .home-group .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .home-room {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        position: relative;
    }
    /* 手機版：隱藏背景裝飾 */
    .home-room:before {
        display: none;
    }
    .home-room-reverse {
        flex-direction: column;
    }
    .home-room-reverse:before {
        display: none;
    }
    .home-room-reverse .content h2 {
        left: auto;
        right: auto;
    }
    .home-room .cover {
        max-width: 100%;
        width: 100%;
        flex: none;
        margin-bottom: 20px;
        overflow: hidden;  /* ✓ 修正：隱藏超出部分，防止垂直排列的元素顯示 */
        position: relative;
        z-index: 1;
        order: 1;
    }
    /* 單張圖片（非輪播）的樣式 */
    .home-room .cover > img {
        width: 100%;
        height: auto;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* 輪播內的圖片不強制 opacity */
    .home-room .cover .slick-slider img {
        width: 100%;
        height: auto;
        display: block !important;
        visibility: visible !important;
        /* opacity 由 slide 的 opacity 控制，不強制設為 1 */
    }
    .home-room .cover .js-carousel,
    .home-room .cover .slick-slider {
        width: 100%;
        display: block !important;
    }
    .home-room .cover .slick-list {
        width: 100% !important;
        overflow: hidden !important;  /* ✓ 確保隱藏超出部分 */
        position: relative !important;
    }
    .home-room .cover .slick-track {
        width: 100% !important;
        position: relative !important;
        /* 不強制 display，讓 Slick 控制 */
    }
    .home-room .cover .js-slide {
        width: 100% !important;
    }
    /* fade 模式特殊處理 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide {
        display: block !important;
        float: none !important;  /* 取消 Slick 預設的 float: left */
    }
    /* 確保非活動幻燈片正確疊層 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:not(.slick-active) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        float: none !important;  /* 取消預設 float */
        opacity: 0 !important;
        z-index: 0 !important;
    }
    /* 第一張圖片（無論是否活動）需要撐開容器 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:first-child {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    /* 當前活動的幻燈片 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide.slick-active {
        opacity: 1 !important;
        z-index: 1 !important;
    }
    /* 當第一張是活動幻燈片時 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:first-child.slick-active {
        position: relative !important;
    }
    /* 當第一張不是活動幻燈片時，仍需相對定位撐開高度 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:first-child:not(.slick-active) {
        position: relative !important;
        opacity: 0 !important;
        z-index: 0 !important;
    }
    .home-room .content {
        order: 2;
        width: 100%;
    }
    .home-room .content p a.x-btn {
        margin: 0 auto;
    }
    .home-room .content h2 {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        -ms-writing-mode: lr-tb !important;
        text-orientation: mixed;
        position: static !important;
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.8rem;
        letter-spacing: 2px;
    }
    .x-content {
        flex-direction: column;
    }
    .x-content h2 {
        writing-mode: inherit;
        text-align: center;
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .x-content h2:after {
        content: "";
        display: block;
        position: absolute;
        height: 2px;
        width: 60px;
        left: calc( 50% - 30px);
        bottom: 0px;
        background-color: #aaa;
    }
    .x-content a.x-btn {
        display: none;
    }
    .x-content p {
        font-size: 1rem;
    }
    /* 訊息管理：圖片輪播版型手機版優化 */
    .message-gallery-text h2,
    .message-gallery-text h3 {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        -ms-writing-mode: lr-tb !important;
        text-orientation: mixed;
        text-align: center;
        margin-bottom: 15px;
    }
    .message-gallery-text h2 {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }
    .message-gallery-text h3 {
        font-size: 1.2rem;
        color: #666;
    }
    /* 訊息輪播箭頭手機版 */
    .message-gallery-images .slick-arrow-custom {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    .message-gallery-images .slick-arrow-custom-left {
        left: 5px;
    }
    .message-gallery-images .slick-arrow-custom-right {
        right: 5px;
    }
    figure.img-text figcaption {
        font-size: 1rem;
        padding: 5px;
        height: auto;
        width: auto;
        max-height: none;
        letter-spacing: normal;
        top: -5px;
        right: 5px;
    }
    .home-group, .room-group {
        padding: 40px 0;
    }
    .home-group.first-group {
        padding-top: 80px;
    }
}

@media (max-width:576px) {
    /* 手機版：保持隱藏背景裝飾，避免遮擋內容 */
    .home-room:before {
        display: none !important;
    }
    .home-room:after {
        display: none !important;
    }
    /* 確保訊息管理圖片完整顯示 */
    .home-room .cover {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;  /* ✓ 隱藏超出部分 */
        position: relative;
        z-index: 1;
    }
    /* 單張圖片 */
    .home-room .cover > img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
        display: block !important;
    }
    /* 輪播圖片 */
    .home-room .cover .slick-slider img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
        display: block !important;
        /* opacity 由 slide 控制 */
    }
    /* 確保輪播容器正確顯示 */
    .home-room .cover .js-carousel,
    .home-room .cover .slick-slider {
        width: 100% !important;
    }
    .home-room .cover .slick-list {
        width: 100% !important;
        overflow: hidden !important;  /* ✓ 隱藏超出部分 */
    }
    .home-room .cover .slick-track {
        width: 100% !important;
    }
    /* fade 模式在小螢幕的特殊處理 */
    .home-room .cover .message-room-carousel {
        position: relative;
    }
    .home-room .cover .message-room-carousel .slick-list {
        overflow: hidden;
    }
    /* 所有幻燈片：取消預設 float */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide {
        float: none !important;
    }
    /* 所有非第一張且非活動的幻燈片：絕對定位疊層 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:not(:first-child):not(.slick-active) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        opacity: 0 !important;
        z-index: 0 !important;
    }
    /* 第一張圖片永遠相對定位（撐開高度） */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:first-child {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    /* 非第一張的活動幻燈片：絕對定位疊在第一張上 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:not(:first-child).slick-active {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        opacity: 1 !important;
        z-index: 1 !important;
    }
    /* 第一張是活動幻燈片時 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:first-child.slick-active {
        position: relative !important;
        opacity: 1 !important;
        z-index: 1 !important;
    }
    /* 第一張不是活動幻燈片時 */
    .home-room .cover .message-room-carousel.slick-slider.slick-fade .slick-slide:first-child:not(.slick-active) {
        position: relative !important;
        opacity: 0 !important;
        z-index: 0 !important;
    }
}

@media (min-width:768px) {
    .home-room .content h2 {
        position: absolute;
        right: -50px;
        top: 0;
        letter-spacing: 4px;
    }
}

/*-----------------------------
            Room
-----------------------------*/

.room {
    padding: 0 10px;
    margin-bottom: 60px;
}

.room .content h3 {
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: 10px;
    padding: 10px 0;
    position: relative;
    border-bottom: 1px solid #ddd;
}

.room .content p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.text-inline h3.cul-text {
    flex: 0 1 100px;
    border-right: 1px solid #ddd;
    padding-right: 10px;
    writing-mode: vertical-rl;
    font-family: "微軟正黑體";
    font-weight: 600;
    white-space: nowrap;
}

.people_body {
    position: relative;
    z-index: 10;
}

.people_body:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 830px;
    height: 460px;
    background: #fff;
    border-top: 2px solid #655040;
    z-index: -1;
}

.ttl_area {
    text-align: center;
    margin-top: 40px;
    position: relative;
}

.ttl_area h2 {
    padding-bottom: 25px;
    margin-bottom: 30px;
    display: inline-block;
    text-align: center;
    position: relative;
    font-size: 1.5rem;
}

.ttl_area h2:before {
    left: 50%;
    margin-left: -30px;
    background: #655040;
    content: "";
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 3px;
}

.ttl_area h2 span {
    font-family: "Josefin Sans", sans-serif;
    font-size: 2rem;
    display: block;
    margin-top: 15px;
}

.ttl_area h2:after {
    right: 50%;
    margin-right: -30px;
    background: #FF9800;
    content: "";
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 3px;
}

.ttl_area h3 {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-font-feature-settings: initial;
    font-feature-settings: initial;
    font-size: 2rem;
    top: 150px;
    height: 350px;
    line-height: 1.4;
    margin: 0;
    font-family: "微軟正黑體";
    font-weight: 600;
}

.three-photo .img, .people_body .img {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 90px;
}

.three-photo .img {
    margin-top: 0;
}

.three-photo ul, .people_body ul {
    list-style: none;
    margin-left: 10px;
    margin-bottom: 20px;
    padding: 0;
}

.three-photo ul li, .people_body ul li {
    margin-bottom: 10px;
}

.text-inline p {
    flex: 1 1 100%;
    padding-left: 30px;
    font-size: 1rem;
    margin-bottom: 25px;
}

.detail-inline {
    margin-bottom: 30px;
}

.detail-inline .detail-info {
    position: relative;
    flex: 0 0 100%;
}

.detail-inline .detail-info h3 {
    /* position: absolute; */
    font-size: 1.6rem;
    letter-spacing: 4px;
    font-family: "微軟正黑體";
    font-weight: 600;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-align: left;
    margin-bottom: 20px;
}

.detail-inline .detail-info .content {
    margin-left: 0;
    padding: 20px 0;
    border-top: none;
    height: 100%;
}

.detail-inline .detail-info .content ul, .detail-inline .detail-info .content ol {
    list-style: none;
    margin-bottom: 15px;
}

.detail-inline .detail-info .content ul li, .detail-inline .detail-info .content ol li {
    font-size: 1rem;
    list-style: none;
}

.detail-inline .detail-info .content ul li {
    display: inline-block;
    margin-bottom: 5px;
    color: #777;
}

.detail-inline .detail-info .content ul li:not(:last-child) {
    margin-right: 15px;
    position: relative;
}

.detail-inline .detail-info .content ul li:not(:last-child):before {
    content: "";
    display: block;
    position: absolute;
    background-color: #ccc;
    height: 8px;
    width: 1px;
    transform: rotate(30deg);
    top: 7px;
    right: -11px;
}

.detail-inline table {
    border-top: 2px solid #ccc;
}

.detail-inline table th, .detail-inline table td {
    text-align: center;
    font-size: 1rem;
}

.detail-inline table tbody tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.detail-inline .detail-info .content p {
    font-size: 1.1rem;
    text-align: left;
    margin-bottom: 30px;
}

#Gallery ul, article.spot #Gallery ul {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

#Gallery ul li, article.spot #Gallery ul li {
    flex: 0 0 20%;
    padding: 10px;
}

#Gallery ul li a, article.spot #Gallery ul li a {
    display: block;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative;
}

#Gallery ul li a figure, article.spot #Gallery ul li a figure {
    position: absolute;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#Gallery ul li a figure img, article.spot #Gallery ul li a figure img {
    height: auto;
    max-width: none;
    width: 100%;
}

#Gallery figcaption, article.spot #Gallery figcaption {
    display: none;
}

.block-group {
    justify-content: space-between;
}

.block-group .x-block {
    flex-direction: column;
    flex: 1 1 25%;
    justify-content: center;
    align-items: center;
    height: 280px;
    position: relative;
}

.block-group .x-block:before {
    content: "";
    display: block;
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid #ddd;
    border-left: 3px solid #b19885;
    left: calc( 50% - 110px);
    top: 26px;
    transform: rotate(45deg);
    background-color: #fff;
    z-index: 0;
}

.block-group .x-block .x-icon {
    max-width: 70px;
    margin-bottom: 10px;
    position: relative;
}

.block-group .x-block h4 {
    color: #999;
    font-size: 1.4rem;
    position: relative;
}

ol.note-list {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 20px;
}

ol.note-list li:not(:last-child) {
    padding-bottom: 6px;
}

ol.note-list li:not(:first-child) {
    padding-top: 6px;
    border-top: 1px dashed #ccc;
}

ol.note-list li p, ol.note-list li p a u {
    font-size: 1rem;
}

@media (max-width:991px) {
    .people_body:before {
        width: 100%;
    }
    .ttl_area {
        padding-top: 25px;
    }
    .ttl_area h3 {
        -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
        writing-mode: inherit;
        position: relative;
        top: 0;
        font-size: 1.2rem;
        height: auto;
    }
    .people_body .img img {
        max-width: 100%;
    }
    .three-photo .img, .people_body .img {
        display: block;
        margin-top: 30px;
    }
    .three-photo ul, .people_body ul {
        margin-left: 0;
        margin-top: 10px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
    }
    .three-photo ul li, .people_body ul li {
        width: 49%;
        overflow: hidden;
    }
    .three-photo ul li img, .people_body ul li img {
        width: 100%;
    }
}

@media (max-width:768px) {
    .room {
        margin-bottom: 50px;
    }
    .room .content {
        position: relative;
    }
    .room .content h3 {
        font-size: 1.2rem;
        font-weight: 600;
    }
    .room .content p {
        font-size: 1rem;
    }
    .room .content a.x-btn {
        position: absolute;
        top: 10px;
        right: 0px;
        width: 100px;
        line-height: 30px;
    }
    #Gallery ul, article.spot .pg-gallery ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        gap: 10px;
    }
    #Gallery ul li {
        flex: 0 0 85%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: relative;
        scroll-snap-align: center;
    }
    #Gallery ul li:nth-child(3n) {
        flex: 0 0 85%;
    }
    /* 隱藏捲軸 */
    #Gallery ul::-webkit-scrollbar {
        display: none;
    }
    #Gallery ul {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .detail-inline {
        flex-direction: column;
    }
    .detail-inline .detail-info {
        margin-bottom: 40px;
    }
    .detail-inline .detail-info h3 {
        font-weight: 600;
        font-size: 1.4rem;
        letter-spacing: inherit;
        writing-mode: inherit;
        position: relative;
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid #aaa;
    }
    .detail-inline .detail-info .content {
        margin-left: 0px;
        border-left: none;
        padding: 0;
        border-top: none;
    }
    .detail-inline .detail-info .content p {
        font-size: 1rem;
    }
    .block-group {
        flex-wrap: wrap;
    }
    .block-group .x-block {
        flex: 1 1 50%;
        height: inherit;
        margin-bottom: 45px;
        display: block;
        text-align: center;
    }
    .block-group .x-block:before {
        width: 150px;
        height: 150px;
        left: calc( 50% - 75px);
        top: 25px;
        display: none;
    }
    .block-group .x-block .x-icon {
        width: 60px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .block-group .x-block h4 {
        font-size: 1.1rem;
    }
    .text-inline p {
        padding: 0 20px;
    }
}

@media (max-width:576px) {
    .text-inline {
        flex-direction: column;
    }
    .text-inline h3.cul-text {
        writing-mode: inherit;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding-right: 0;
        padding-bottom: 20px;
        flex: none;
        margin-bottom: 20px;
    }
}

/*-----------------------------
            Footer
-----------------------------*/

footer {
    background-color: #44413c;
}

footer .inner .footer-logo {
    flex: 0 0 200px;
}

footer .inner .content {
    padding-left: 50px;
}

footer p, footer p span, footer ul.footer-nav li a {
    color: #fff;
    font-size: 1rem;
}

footer p {
    line-height: 2rem;
}

footer p span {
    margin: 0 5px;
    display: inline-block;
}

footer ul.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer ul.footer-nav li {
    list-style: none;
    display: inline-block;
}

footer ul.footer-nav li a {
    padding: 6px 15px;
    display: block;
    position: relative;
}

footer ul.footer-nav li:first-child a {
    padding-left: 0;
}

footer ul.footer-nav li:not(:first-child) a:before {
    content: "";
    display: block;
    position: absolute;
    height: 10px;
    width: 1px;
    background-color: #aaa;
    left: 0px;
    top: 10px;
    transform: rotate(24deg)
}

footer .copyright {
    background-color: #38332c;
}

footer .copyright p {
    color: #999;
    font-size: .9rem !important;
    text-align: center;
    margin-bottom: 0;
}

footer .copyright p a {
    color: #999;
    font-size: 1rem;
}

@media (max-width:991px) {
    footer .inner {
        flex-direction: column;
        align-items: center;
    }
    footer .inner .footer-logo {
        flex: none;
        margin-bottom: 30px;
    }
    footer .inner .content {
        padding: 0;
        width: 100%;
        text-align: center;
    }
}

/*-----------------------------
            Scenic - 卡片式設計
-----------------------------*/

/* 整個區塊淺色背景 */
.x-bg-full-v2 {
    background: #f8f9fa !important;
    padding: 80px 0 !important;
}

/* 首頁景點區塊專用 padding */
.home-scenic-section {
    padding: 20px 0 !important;
}

.home-scenic {
    display: block !important;
}

/* 加快景點卡片的淡入動畫速度 */
.scenic.animated {
    animation-duration: 0.4s !important;
}

/* 所有景點卡片同時淡入，不使用延遲 */
.scenic[data-animation] {
    animation-delay: 0s !important;
}

/* 景點標題和篩選器區塊 */
.scenic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    gap: 30px;
}

.home-scenic h2 {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-align: left;
    font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    color: #333;
    margin: 0;
    padding-left: 0;
    flex-shrink: 0;
}

.home-scenic h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-scenic h2 .guide-count {
    font-size: 1rem;
    font-weight: 400;
    color: #888;
    line-height: 1;
}

.home-scenic h2:after {
    display: none;
}

/* 篩選器容器 - 新版布局 */
.scenic-filters-wrapper {
    width: 100%;
    margin-top: 0;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.filter-row:last-child {
    margin-bottom: 0;
}

/* 搜尋行 */
.filter-row-search {
    justify-content: center;
}

/* 簡化版篩選行 */
.filter-row-simple {
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-row-simple .filter-group {
    flex: 0 0 auto;
}

.filter-row-simple .filter-search-group {
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 300px;
}

.filter-search-group {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.filter-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 1.1rem;
    pointer-events: none;
}

/* 篩選行 */
.filter-row-filters {
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.filter-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label i {
    color: #9dc815;
}

.filter-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #d0d0d0 20%, #d0d0d0 80%, transparent);
}

.filter-section-action {
    margin-left: auto;
}

.filter-group {
    flex: 0 0 auto;
    width: auto;
}

/* 下拉選單樣式 */
.scenic-select {
    min-width: 160px;
    padding: 10px 36px 10px 16px;
    font-size: 0.95rem;
    color: #555;
    background-color: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scenic-select:hover {
    border-color: #9dc815;
    background-color: #fff;
}

.scenic-select:focus {
    outline: none;
    border-color: #9dc815;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(157, 200, 21, 0.15);
}

/* 搜尋框樣式 */
.scenic-search {
    width: 100%;
    padding: 14px 20px 14px 50px;
    font-size: 1.05rem;
    color: #555;
    background-color: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.scenic-search:hover {
    border-color: #9dc815;
    box-shadow: 0 3px 12px rgba(157,200,21,0.15);
}

.scenic-search:focus {
    outline: none;
    border-color: #9dc815;
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(157,200,21,0.2);
}

.scenic-search::placeholder {
    color: #aaa;
}

/* 排序選單特殊樣式 */
.scenic-sort {
    background-color: rgba(157, 200, 21, 0.1);
    border-color: rgba(157, 200, 21, 0.3);
}

.scenic-sort:hover {
    background-color: rgba(157, 200, 21, 0.15);
    border-color: rgba(157, 200, 21, 0.5);
}

/* 清除篩選按鈕 */
.scenic-clear-btn {
    padding: 10px 20px;
    font-size: 0.95rem;
    color: #666;
    background-color: transparent;
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 500;
}

.scenic-clear-btn:hover {
    background-color: #f5f5f5;
    border-color: #999;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.scenic-clear-btn i {
    margin-right: 5px;
    transition: transform 0.3s ease;
}

.scenic-clear-btn:hover i {
    transform: rotate(180deg);
}

.home-scenic .inner {
    flex: 1;
    padding-left: 0;
}

/* 卡片樣式 */
.scenic {
    margin-bottom: 30px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e8e8e8;
}

.scenic:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 圖片區域 */
.scenic .cover {
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}

.scenic .cover figure {
    margin: 0;
    height: 240px;
    overflow: hidden;
}

.scenic .cover figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.scenic:hover .cover figure img {
    transform: scale(1.05);
}

/* 標題標籤（左上角） */
.scenic .cover h3 {
    position: absolute;
    font-size: 0.95rem;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 4px 8px;
    top: 10px;
    left: 10px;
    bottom: auto;
    margin: 0;
    border-radius: 4px;
    font-weight: 600;
    color: #333;
    z-index: 2;
}

/* 內容區域 */
.scenic .content {
    padding: 20px;
    background: #ffffff;
}

.scenic .content h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.scenic .content p {
    font-size: 0.95rem;
    margin: 0 0 15px 0;
    text-align: left;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 點閱數字統計 */
.scenic-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 12px;
    border-top: 1px solid #e8e8e8;
}

.scenic-meta .views {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.scenic-meta .views i {
    color: #888;
    font-size: 0.9rem;
}

/* 底部更多資訊區塊 */
.scenic-more {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #444;
}

.scenic-more p {
    line-height: 2rem;
    padding: 0 20px;
    color: #bbb !important;
    font-size: 1.1rem;
}

.three-photo {
    max-width: 930px;
    margin: 0 auto;
}

#Scenic .home-room .content {
    flex: 0 0 35%;
    padding: 50px 20px 20px 30px;
    background-color: #fff;
    border-top: 2px solid #655040;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
}

#Scenic .home-room .content p {
    margin-bottom: 20px;
}

#Scenic .home-room:before {
    display: none;
}

#Scenic .home-scenic .inner {
    padding: 0;
}

#Scenic .scenic {
    margin-bottom: 50px;
}

/* 響應式設計 */
@media (max-width:991px) {
    .scenic-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .scenic {
        margin-bottom: 30px;
    }
    .scenic .cover figure {
        height: 200px;
    }
    .scenic-more {
        margin-top: 40px;
    }
    .scenic-more a.x-btn {
        margin: 30px auto;
    }
}

/* 平板響應式 */
@media (max-width: 991px) {
    .filter-row-filters {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .filter-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .filter-controls {
        width: 100%;
    }

    .filter-group {
        width: 100%;
    }

    .scenic-select {
        width: 100%;
    }

    .filter-divider {
        display: none;
    }

    .filter-section-action {
        margin-left: 0;
    }

    .scenic-clear-btn {
        width: 100%;
    }
}

/* 手機響應式 */
@media (max-width:767px) {
    .x-bg-full-v2 {
        padding-top: 0 !important;
    }

    .scenic-header {
        margin-bottom: 30px;
    }

    .scenic-filters-wrapper {
        margin-top: 8px;
    }

    .filter-search-group {
        max-width: 100%;
    }

    .scenic-search {
        font-size: 1rem;
        padding: 12px 16px 12px 45px;
    }

    .filter-icon {
        left: 16px;
        font-size: 1rem;
    }

    .filter-row-filters {
        padding: 15px 20px;
        gap: 15px;
    }

    /* 簡化版篩選行的手機版樣式 */
    .filter-row-simple {
        flex-direction: column;
        gap: 15px;
    }

    .filter-row-simple .filter-group {
        width: 100%;
    }

    .filter-row-simple .filter-search-group {
        min-width: 100%;
        max-width: 100%;
    }

    .filter-label {
        font-size: 0.9rem;
    }

    .scenic-select {
        font-size: 0.9rem;
        padding: 9px 32px 9px 14px;
        width: 100%;
    }

    .scenic-clear-btn {
        font-size: 0.9rem;
        padding: 9px 16px;
    }
}
    .home-scenic h2 {
        text-align: center;
        font-size: 1.8rem;
        margin: 0;
    }
    .home-scenic .inner {
        padding: 0;
    }
    .scenic .cover figure {
        height: 180px;
    }
    .scenic .content {
        padding: 15px;
    }
    .scenic-more p {
        padding: 0 10px;
        font-size: 1rem;
    }
}

/* 篩選結果提示 */
.scenic-filter-result {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 1.1rem;
}

.scenic-filter-result i {
    font-size: 3rem;
    color: #ccc;
    margin-bottom: 15px;
    display: block;
}

/*-----------------------------
            News
-----------------------------*/

.home-news {
    position: relative;
    margin: 50px 0;
}

.home-news .event {
    flex: 0 0 60%;
    position: relative;
}

.home-news:before {
    content: "";
    position: absolute;
    top: -50px;
    right: 60%;
    width: 100%;
    height: calc( 100% + 100px);
    background: #f5f3ef;
}

.no-bef:before {
    display: none !important;
}

.no-aft:after {
    display: none !important;
}

.home-news .event figure {
    position: relative;
}

.home-news .event figure a {
    display: block;
}

.home-news .event figure figcaption {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
}

.home-news .event figure figcaption h3 {
    font-size: 1.4rem;
    padding: 10px;
}

.home-news ul.news-list {
    flex: 1 1 60%;
    list-style: none;
    margin: 0;
    padding: 0 0 0 40px;
    position: relative;
}

.home-news ul.news-list li {
    list-style: none;
    padding-bottom: 10px;
}

.home-news ul.news-list li:not(:first-child) {
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.home-news ul.news-list li p {
    margin: 0;
}

.home-news ul.news-list li p span.date {
    display: inline-block;
    font-size: .8rem;
    color: #fff;
    padding: 2px 8px;
    background-color: #9E9E9E;
}

.home-news ul.news-list li p a {
    font-size: 1.1rem;
    color: #666;
    display: block;
}

@media (max-width:991px) {
    .home-news {
        flex-direction: column;
    }
    .home-news .event {
        flex: inherit;
        margin-bottom: 30px;
    }
    .home-news:before {
        height: 60px;
        top: -20px;
        right: -30px;
        width: calc( 100% + 60px);
        background-color: #fff;
        border-top: 1px solid #ccc;
    }
    .home-news ul.news-list {
        padding: 0;
    }
    .home-news a.x-btn {
        margin: 0 auto;
    }
}

@media (max-width:767px) {
    .home-news .event figure figcaption h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0;
        padding: 4px 10px;
    }
}

/*-----------------------------
            About
-----------------------------*/

.about-group-v1 {
    align-items: center;
    position: relative;
    /* margin-bottom: 100px; */
}

.about-group-v1 .cover {
    flex: 0 0 900px;
}

.about-group-v1 .content {
    flex-direction: column;
    position: absolute;
    background-color: #fff;
    padding: 30px;
    width: 320px;
    height: 280px;
    right: 0px;
    top: calc( 50% - 140px);
    justify-content: center;
    border-top: 2px solid #655040;
}

.about-group-v1 .content h3 {
    color: #765635;
    line-height: 1.8rem;
    font-size: 1.3rem;
    margin-bottom: 15px;
    padding-bottom: 15px;
    position: relative;
}

.about-group-v1 .content h3:after {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 0px;
    bottom: 0px;
    background-color: #9E9E9E;
}

.about-group-v1 .content p {
    font-size: 1rem;
}

.about-group-v1:nth-child(odd) {
    flex-direction: row-reverse;
}

.about-group-v1:nth-child(odd) .content {
    right: inherit;
    left: 0px;
}

.about-group-v2 {
    position: relative;
    padding-top: 50px;
}

.about-group-v2:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 60%;
    width: 300%;
    background-color: #edeae1;
    z-index: 0;
    max-height: 200px;
}

.about-group-v2 h3 {
    flex: 0 0 200px;
    text-align: center;
    position: relative;
}

.about-group-v2 h3 span {
    font-size: 2rem;
    letter-spacing: 2px;
    font-family: "微軟正黑體";
    font-weight: 600;
}

.about-group-v2 .content {
    flex: 1 1 100%;
    position: relative;
}

.about-group-v2 .content ul {
    list-style: none;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-group-v2 .content ul li {
    width: 32%;
    margin-bottom: 30px;
}

.about-group-v2 .content ul li figure {
    position: relative;
}

.about-group-v2 .content ul li figure a {
    display: block;
}

.about-group-v2 .content ul li figure figcaption {
    position: absolute;
    font-size: 1rem;
    background-color: #fff;
    padding: 5px 10px;
    bottom: 10px;
    left: 10px;
    margin: 0;
}

@media (max-width:991px) {
    .about-group-v1, .about-group-v1:nth-child(odd) {
        flex-direction: column;
    }
    .about-group-v1 .cover, .about-group-v1:nth-child(odd) .cover {
        flex: inherit;
    }
    .about-group-v1 .content, .about-group-v1:nth-child(odd) .content {
        width: calc( 100% - 20px);
        top: -20px;
        height: inherit;
        position: relative;
        right: -20px;
    }
    .about-group-v1:nth-child(odd) .content {
        right: inherit;
        left: -20px;
    }
}

@media (max-width:767px) {
    .about-group-v2 {
        flex-direction: column;
    }
    .about-group-v2:before {
        display: none;
    }
    .about-group-v2 h3 {
        flex: inherit;
        padding: 30px 0;
        background-color: #edeae1;
        margin-bottom: 30px;
    }
    .about-group-v2 h3 span {
        writing-mode: inherit;
    }
    .about-group-v2 .content ul li {
        width: calc( 50% - 10px);
        margin-bottom: 20px;
    }
    .about-group-v2 .content ul li figure figcaption {
        font-size: .8rem;
    }
}

@media (max-width:576px) {
    .about-group-v1 {
        margin-bottom: 30px;
    }
    .about-group-v1 .content, .about-group-v1:nth-child(odd) .content {
        right: inherit;
        left: inherit;
        top: inherit;
        width: 100%;
    }
    .about-group-v1 .content h3 {
        font-size: 1.3rem;
    }
    .about-group-v2 .content ul li figure figcaption {
        display: none;
    }
    .about-group-v2 .content ul li:nth-child(3n) {
        width: 100%;
    }
}

/*-----------------------------
    QA
-----------------------------*/

#qa_cate {
    margin-bottom: 50px;
}

#qa_cate h2.title {
    padding: 30px 0;
    position: relative;
    margin-bottom: 0;
}

#qa_cate h2.title:after {
    width: 50px;
    height: 2px;
    background-color: #655040;
    left: 0;
    bottom: 13px;
    content: "";
    position: absolute;
}

#qa_cate .card {
    border: none;
}

#qa_cate .card-header {
    background-color: unset;
    transition: all .3s;
}

#qa_cate .card-header:hover {
    background-color: #f3f3f3;
}

#qa_cate .card-header a {
    color: #2d385a;
    position: relative;
    display: block !important;
    padding-left: 20px;
    visibility: visible;
}

#qa_cate .card-header a span.num {
    margin-right: 5px;
}

#qa_cate .card-header a:after, #qa_cate .card-header a:before {
    display: block;
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #ddd;
    left: 0px;
    transition: all .5s;
}

#qa_cate .card-header a:before {
    top: 10px;
    transform: rotate(270deg);
}

#qa_cate .card-header a:after {
    top: 10px;
    transform: rotate(180deg);
}

#qa_cate .card-header a[aria-expanded=true]:before {
    transform: rotate(0deg);
}

#qa_cate .card-header a[aria-expanded=true]:after {
    transform: rotate(-180deg);
}

#qa_cate .card-block {
    padding: 10px 10px 10px 35px;
}

#qa_cate .card-block ol {
    padding-left: 20px;
    margin-bottom: 25px;
}

#qa_cate .card-block ol li a {
    color: #999;
    font-size: 1rem;
    line-height: 25px;
}

#qa_cate .card-block img {
    max-width: 100%;
}

#qa_cate .card p {
    margin-bottom: 20px;
}

@media (max-width:578px) {
    #qa_cate h2.title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 0px;
    }
    #qa_cate .card p {
        font-size: 1rem;
    }
}

/*-----------------------------
                QA end
-----------------------------*/

/*-----------------------------
            Article
-----------------------------*/

.news-article .article-title {
    margin-bottom: 50px;
}

.news-article .article-body {
    min-height: 60vh;
}

.news-article .article-body .article-content {
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    padding: 30px 15px;
}

.news-article .article-body .article-content p {
    font-size: 1.25rem;
    line-height: 3rem;
    text-align: justify;
    margin-bottom: 50px;
}

ul.article-date {
    list-style: none;
    margin-bottom: 30px;
}

ul.article-date li {
    display: inline-block;
    list-style: none;
}

ul.article-date li:first-child {
    margin-right: 10px;
}

ul.article-date li time, ul.article-date li strong {
    font-size: 11pt;
}

.pg-footer-title {
    margin: 50px 0;
}

.pg-footer-title .content {
    padding: 20px;
    border: 1px dashed #ddd;
}

.pg-footer-title .content h1, footer.pg-footer-title .content p {
    margin-bottom: 0;
}

.pg-footer-title .content h1 {
    font-size: 1.2rem;
    font-weight: 600;
}

/*-----------------------------
    HEADER
-----------------------------*/

.kv-banner {
    overflow: hidden;
    background: #fff;
    padding: 80px 0 40px 0;
}

.kv-banner .js-carousel {
    margin: 0 auto;
}

.kv-banner .js-slide {
    padding: 0 10px;
    outline: none;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.kv-banner .js-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* 當前中間的圖片放大 */
.kv-banner .slick-center .js-slide img {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* 左右兩側的圖片縮小並垂直置中 */
.kv-banner .slick-slide:not(.slick-center) img {
    opacity: 0.6;
    filter: brightness(0.8);
    transform: scale(0.95);
    margin: auto 0;
}

/* 原有樣式：只針對包含圖片的 h1 標籤（保留以防其他頁面使用） */
.kv-banner h1 {
    margin: 0;
    width: 100%;
    height: 100vh;
    display: block;
    position: absolute;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.kv-banner h1 img {
    display: block;
    z-index: 3;
    height: 20vh;
    margin-bottom: 150px;
}

.scroll-down {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
}

.scroll-down a {
    display: block;
    position: relative;
    width: 120px;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 30px;
}

.scroll-down a:after {
    width: 15px;
    height: 15px;
    content: "";
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: absolute;
    transform: rotate(45deg);
    bottom: -15px;
    left: 50%;
    margin-left: -8px;
    animation: aro 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
}

@keyframes aro {
    0% {
        bottom: -15px;
    }
    50% {
        bottom: -25px;
    }
    100% {
        bottom: -15px;
    }
}

.kv-banner-pomo {
    position: absolute;
    z-index: 3;
    right: 0px;
    bottom: 70px;
}

.kv-banner-pomo a {
    background: #EAEBED;
    padding: 8px 16px;
    color: #626F7F;
    line-height: 1.4;
    display: block;
}

.kv-banner-pomo a:hover {
    padding-right: 30px;
    background: #9dc815;
    color: #fff;
    text-decoration: none;
}

/* Banner Carousel Arrows - 參考設計的左右箭頭樣式 */
.kv-banner .slick-arrow-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kv-banner .slick-arrow-custom:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: #fff;
}

.kv-banner .slick-arrow-custom:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.kv-banner .slick-arrow-left {
    left: 50px;
}

.kv-banner .slick-arrow-left:before {
    transform: translate(-40%, -50%) rotate(-135deg);
}

.kv-banner .slick-arrow-right {
    right: 50px;
}

.kv-banner .slick-arrow-right:before {
    transform: translate(-60%, -50%) rotate(45deg);
}

/* 響應式調整箭頭位置 */
@media (max-width: 768px) {
    .kv-banner .slick-arrow-left {
        left: 20px;
    }

    .kv-banner .slick-arrow-right {
        right: 20px;
    }
}

/* Banner Carousel Dots - 底部圓點指示器樣式 */
.kv-banner .js-pagination,
.kv-banner .slick-paging-custom {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 10 !important;
    display: block !important;
    text-align: center !important;
    padding: 20px 0 0 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: auto !important;
}

.kv-banner .js-pagination li,
.kv-banner .slick-paging-custom li {
    list-style: none !important;
    margin: 0 6px !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

/* 針對 span 設定圓點樣式（因為框架用的是 span 不是 button） */
.kv-banner .js-pagination li span,
.kv-banner .slick-paging-custom li span {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #999 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    overflow: hidden !important;
}

/* 當前選中的圓點 */
.kv-banner .js-pagination li.slick-active span,
.kv-banner .slick-paging-custom li.slick-active span {
    background: #666 !important;
    width: 30px !important;
    border-radius: 5px !important;
}

/* Hover 效果 */
.kv-banner .js-pagination li:hover span,
.kv-banner .slick-paging-custom li:hover span {
    background: #666 !important;
}

/* Banner Slide Wrapper - 每個輪播項目的容器 */
.banner-slide-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Banner Text Overlay - 動態文字覆蓋層 */
.banner-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* 只在中間的 active slide 顯示文字 */
.kv-banner .slick-center .banner-text-overlay {
    opacity: 1;
}

.banner-content {
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
    pointer-events: all;
    position: relative;
    z-index: 20;
}

/* Banner 文字標題 - 使用更具體的選擇器提高優先級 */
.kv-banner .banner-text-overlay .banner-title,
.kv-banner .banner-content h1.banner-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    /* 覆蓋原有 .kv-banner h1 的樣式 */
    position: relative !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 0 20px 0 !important;
}

.banner-description {
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.7);
    margin-bottom: 35px;
    line-height: 1.6;
    font-weight: 300;
}

.banner-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.banner-btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-shadow: none;
    letter-spacing: 0.05em;
}

.banner-btn-primary {
    background: rgba(157, 200, 21, 0.9);
    color: #fff;
    border: 2px solid rgba(157, 200, 21, 0.9);
}

.banner-btn-primary:hover {
    background: rgba(157, 200, 21, 1);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(157, 200, 21, 0.4);
    color: #fff;
    text-decoration: none;
}

.banner-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
}

.banner-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
}

/* 響應式設計 - 平板 */
@media (max-width: 991px) {
    .kv-banner .banner-text-overlay .banner-title,
    .kv-banner .banner-content h1.banner-title {
        font-size: 2.5rem !important;
    }

    .banner-description {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }

    .banner-btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

/* 響應式設計 - 手機 */
@media (max-width: 767px) {
    /* Banner 容器設定 */
    .kv-banner {
        width: 100% !important;
        overflow: hidden !important;
    }

    .kv-banner .g-pos-rel {
        width: 100% !important;
    }

    /* 完全覆蓋 center mode 設定 */
    .kv-banner .slick-list {
        overflow: hidden !important;
        height: 280px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .kv-banner .slick-track {
        display: flex !important;
        height: 280px !important;
    }

    .kv-banner .slick-slide {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 280px !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Banner slide 內容 */
    .kv-banner .js-slide {
        padding: 0 !important;
        margin: 0 !important;
        height: 280px !important;
        width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f5f5f5 !important;
    }

    .kv-banner .banner-slide-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 280px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 圖片設定 */
    .kv-banner .js-slide img,
    .kv-banner .banner-slide-wrapper img {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    /* 移除所有 center mode 效果 */
    .kv-banner .slick-slide:not(.slick-center) img {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .kv-banner .slick-center .js-slide img {
        transform: scale(1) !important;
        box-shadow: none !important;
    }

    /* 確保文字覆蓋層正確顯示 */
    .kv-banner .banner-text-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        z-index: 2 !important;
        text-align: center !important;
        opacity: 1 !important;
    }

    .kv-banner .slick-active .banner-text-overlay,
    .kv-banner .slick-center .banner-text-overlay {
        opacity: 1 !important;
    }

    .kv-banner .banner-content {
        padding: 15px !important;
    }

    /* 手機版箭頭位置調整 */
    .kv-banner .slick-arrow-custom {
        top: 140px !important;
        transform: translateY(0) !important;
        background: transparent !important;
        border: none !important;
    }

    .kv-banner .slick-arrow-custom:hover {
        background: transparent !important;
        border: none !important;
    }

    .kv-banner .slick-arrow-left {
        left: 10px !important;
    }

    .kv-banner .slick-arrow-right {
        right: 10px !important;
    }

    .kv-banner .banner-text-overlay .banner-title,
    .kv-banner .banner-content h1.banner-title {
        font-size: 1.8rem !important;
        margin-bottom: 12px !important;
    }

    .banner-description {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .banner-buttons {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .banner-btn {
        padding: 3px 5px;
        font-size: 0.8rem;
        width: auto;
        max-width: 120px;
    }
}

/* Header 深色樣式 - 確保導覽文字為白色 */
.u-header__section--dark .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.u-header__section--dark .nav-link:hover {
    color: #fff !important;
}

.u-header__section--dark .hamburger-inner,
.u-header__section--dark .hamburger-inner::before,
.u-header__section--dark .hamburger-inner::after {
    background-color: #fff;
}

/* Header 預設背景 */
.u-header__section {
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Header 捲動時的透明背景效果 */
.u-header.js-header-fix-moment .u-header__section,
.u-header.js-header-fix-moment .u-header__section--light {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* 確保 sticky header 在最上層 */
.u-header--sticky-top.js-header-fix-moment {
    z-index: 9999 !important;
}

/* 自訂透明背景 class */
.u-header-bg-transparent {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/*-----------------------------
            影音播放區塊
-----------------------------*/

.video-section {
    margin: 40px 0;
}

.video-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
    font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
}

.video-container {
    max-width: 900px;
    margin: 0 auto;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.video-wrapper iframe,
.video-wrapper .video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: none;
    border-radius: 12px;
}

.video-wrapper iframe.active,
.video-wrapper .video-player.active {
    display: block;
}

/* 影片預覽佔位符 */
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-placeholder:hover {
    background: rgba(0, 0, 0, 0.7);
}

.video-placeholder.hidden {
    display: none;
}

.play-button {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.video-placeholder:hover .play-button {
    transform: scale(1.1);
    color: #fff;
}

.video-placeholder p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

/* 響應式設計 */
@media (max-width: 767px) {
    .video-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .play-button {
        font-size: 60px;
    }

    .video-placeholder p {
        font-size: 1rem;
    }
}

/*-----------------------------
            相簿內的影音項目
-----------------------------*/

/* 影音項目容器 */
.gallery-video-item {
    flex: 0 0 20%;
    padding: 10px;
    position: relative;
}

.gallery-video-wrapper {
    position: relative;
    padding-bottom: 100%; /* 1:1 正方形比例，與相簿圖片一致 */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 4px;
}

.gallery-video-player {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-height: 100%;
    display: none;
}

.gallery-video-player.active {
    display: block;
}

/* 相簿影片佔位符 */
.gallery-video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-video-placeholder:hover {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-video-placeholder.hidden {
    display: none;
}

.gallery-play-button {
    font-size: 50px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.gallery-video-placeholder:hover .gallery-play-button {
    transform: scale(1.1);
    color: #fff;
}

.gallery-video-placeholder figcaption {
    display: block !important;
}

.gallery-video-placeholder figcaption p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

/* 響應式設計 */
@media (max-width: 991px) {
    .gallery-video-item {
        flex: 1 1 50%;
    }
}

@media (max-width: 767px) {
    .gallery-play-button {
        font-size: 40px;
    }

    .gallery-video-placeholder figcaption p {
        font-size: 0.85rem;
    }
}

/*-----------------------------
    詳情頁影音播放器樣式
-----------------------------*/

/* 主要媒體容器 - 垂直水平置中 */
.detail-media-wrapper {
    width: 100%;
    max-width: 800px; /* 從 1200px 縮小到 800px */
    margin: 0 auto 30px;
    position: relative;
}

/*-----------------------------
    YouTube 播放器樣式
-----------------------------*/

/* YouTube 容器 */
.detail-youtube-container {
    position: relative;
    width: 100%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 16:9 比例容器 */
.detail-youtube-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* YouTube iframe */
.detail-youtube-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 5;
}

.detail-youtube-player.active {
    display: block;
}

/* 影片容器 */
.detail-video-container {
    position: relative;
    width: 100%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 16:9 比例容器 */
.detail-video-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* 影片播放器 - 絕對定位實現垂直水平置中 */
.detail-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持影片比例，垂直水平置中 */
    background-color: #000;
    display: block; /* 改為預設顯示 */
    z-index: 1; /* 確保在預覽畫面下方 */
}

.detail-video-player.playing {
    display: block;
    z-index: 5; /* 播放時提升層級 */
}

/* 播放前的預覽畫面 */
.detail-video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 預設半透明背景 */
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10; /* 確保預覽畫面在最上層 */
    overflow: hidden; /* 防止內容溢出 */
}

/* 預覽背景圖片 */
.video-placeholder-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* 預覽遮罩層（包含播放按鈕和文字） */
.video-placeholder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4); /* 半透明黑色遮罩 */
    z-index: 2;
    transition: background 0.3s ease;
}

.detail-video-placeholder:hover .video-placeholder-overlay {
    background: rgba(0, 0, 0, 0.5); /* hover 時遮罩稍微變深 */
}

/* 沒有背景圖片時的 hover 效果 */
.detail-video-placeholder:not(:has(.video-placeholder-bg)):hover {
    background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
}

.detail-video-placeholder.hidden {
    display: none;
}

/* 播放按鈕 */
.detail-play-button {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 15px;
    transition: all 0.3s ease;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.detail-video-placeholder:hover .detail-play-button {
    transform: scale(1.1);
    color: #fff;
}

.detail-play-button i {
    display: block;
}

.detail-video-placeholder > p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 圖片模式（當沒有影片時） */
.detail-media-wrapper figure.img-text {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.detail-media-wrapper figure.img-text img {
    width: 100%;
    height: auto;
    display: block;
}

.detail-media-wrapper figure.img-text figcaption {
    padding: 15px 20px;
    background-color: #f8f9fa;
    color: #333;
    font-size: 0.95rem;
    text-align: center;
    border-top: 1px solid #e8e8e8;
}

/* 音訊播放器容器（圖片+音訊模式） */
.detail-audio-container {
    padding: 15px 20px;
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-audio-player {
    width: 100%;
    max-width: 500px;
    outline: none;
}

.detail-audio-player::-webkit-media-controls-panel {
    background-color: #f8f9fa;
}

/* 提示訊息樣式 */
.detail-media-wrapper .alert {
    margin: 0;
    text-align: center;
    border-radius: 8px;
}

/* 自訂影片控制列 */
.detail-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 15; /* 控制列在預覽畫面之上 */
}

.detail-video-container:hover .detail-video-controls,
.detail-video-controls.show {
    opacity: 1;
}

/* 控制按鈕 */
.video-control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.video-control-btn:active {
    transform: scale(0.95);
}

.video-control-btn i {
    pointer-events: none;
}

/* 播放/暫停按鈕 */
.video-play-pause-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* 快轉快退按鈕 */
.video-skip-btn {
    position: relative;
}

.video-skip-btn::after {
    content: attr(data-skip);
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
}

/* 進度條容器 */
.video-progress-container {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.video-progress-bar {
    height: 100%;
    background: #8b7355;
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.video-progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* 進度條可拖動區域擴大 */
.video-progress-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: -10px;
}

/* 拖動時的樣式 */
.video-progress-container.dragging {
    cursor: grabbing;
}

.video-progress-container.dragging .video-progress-bar {
    transition: none;
}

.video-progress-container:hover .video-progress-bar::after,
.video-progress-container.dragging .video-progress-bar::after {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* 時間顯示 */
.video-time {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    min-width: 90px;
    text-align: center;
}

/* 音量控制 */
.video-volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

.video-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.video-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* 全螢幕按鈕 */
.video-fullscreen-btn {
    margin-left: 5px;
}

/* 響應式設計 */
@media (max-width: 991px) {
    .detail-play-button {
        font-size: 60px;
    }

    .detail-video-placeholder > p {
        font-size: 1rem;
    }

    .detail-video-controls {
        padding: 12px 15px;
        gap: 10px;
    }

    .video-control-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .video-volume-container {
        display: none; /* 在平板上隱藏音量控制 */
    }
}

@media (max-width: 767px) {
    .detail-media-wrapper {
        margin-bottom: 20px;
    }

    .detail-play-button {
        font-size: 50px;
        margin-bottom: 10px;
    }

    .detail-video-placeholder > p {
        font-size: 0.9rem;
    }

    .detail-media-wrapper figure.img-text figcaption {
        padding: 12px 15px;
        font-size: 0.85rem;
    }
}

/*-----------------------------
    音訊播放模式樣式（圖片+音訊）
-----------------------------*/

/* 音訊容器 */
.detail-audio-container {
    position: relative;
    width: 100%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 16:9 比例容器 */
.detail-audio-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* 音訊背景圖片 */
.audio-background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* 音訊播放器覆蓋層 */
.audio-player-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

/* 隱藏原生 audio 元素 */
.detail-audio-player {
    display: none;
}

/* 音訊控制列 */
.audio-controls {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 70%, transparent 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 音訊控制按鈕 */
.audio-control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    flex-shrink: 0;
}

.audio-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.audio-control-btn:active {
    transform: scale(0.95);
}

.audio-control-btn i {
    pointer-events: none;
}

/* 播放/暫停按鈕 */
.audio-play-pause-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* 快轉快退按鈕 */
.audio-skip-btn {
    position: relative;
}

/* 音訊進度條容器 */
.audio-progress-container {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.audio-progress-bar {
    height: 100%;
    background: #8b7355;
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.audio-progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* 音訊進度條可拖動區域擴大 */
.audio-progress-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: -10px;
}

/* 音訊拖動時的樣式 */
.audio-progress-container.dragging {
    cursor: grabbing;
}

.audio-progress-container.dragging .audio-progress-bar {
    transition: none;
}

.audio-progress-container:hover .audio-progress-bar::after,
.audio-progress-container.dragging .audio-progress-bar::after {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* 時間顯示 */
.audio-time {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    min-width: 90px;
    text-align: center;
    flex-shrink: 0;
}

/* 音量控制 */
.audio-volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.audio-volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

.audio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.audio-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* 響應式設計 - 音訊控制列 */
@media (max-width: 991px) {
    .audio-controls {
        padding: 12px 15px;
        gap: 10px;
    }

    .audio-control-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .audio-volume-container {
        display: none; /* 在平板上隱藏音量控制 */
    }
}

@media (max-width: 767px) {
    .audio-controls {
        padding: 10px 12px;
        gap: 8px;
    }

    .audio-control-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .audio-play-pause-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .audio-time {
        font-size: 11px;
        min-width: 70px;
    }
}
/*-----------------------------
    Header 導覽編號搜尋樣式
-----------------------------*/

/* 導覽搜尋容器 */
.nav-item-search {
    display: flex;
    align-items: center;
}

/* 電腦版：隱藏漢堡選單旁的搜尋框，顯示選單內的搜尋框 */
@media (min-width: 992px) {
    .nav-item-search {
        display: none !important; /* 隱藏漢堡選單旁的搜尋框 */
    }

    .nav-item-search-desktop {
        display: flex !important; /* 顯示選單內的搜尋框 */
        align-items: center;
    }
}

/* 手機版/平板版：顯示漢堡選單旁的搜尋框，隱藏選單內的搜尋框 */
@media (max-width: 991px) {
    .nav-item-search-desktop {
        display: none !important; /* 隱藏選單內的搜尋框 */
    }
}

.nav-search-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background-color: #f8f9fa;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-search-wrapper:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 搜尋輸入框 */
.nav-search-input {
    border: none;
    background: transparent;
    outline: none;
    width: 120px;
    padding: 5px 10px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}

.nav-search-input::placeholder {
    color: #999;
    font-size: 13px;
}

.nav-search-input:focus {
    width: 140px;
}

/* 錯誤狀態 */
.nav-search-input.error {
    animation: shake 0.5s;
    background-color: rgba(255, 0, 0, 0.1);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 搜尋按鈕 */
.nav-search-btn {
    background-color: #6c757d;
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    flex-shrink: 0;
}

.nav-search-btn:hover {
    background-color: #5a6268;
    transform: scale(1.1);
}

.nav-search-btn:active {
    transform: scale(0.95);
}

.nav-search-btn i {
    pointer-events: none;
}

/* 響應式設計 */
@media (max-width: 991px) {
    /* 平板版：搜尋框移到選單外，右上角顯示 */
    .nav-item-search {
        position: absolute;
        top: 10px;
        right: 60px; /* 在漢堡選單左側 */
        z-index: 100;
    }

    .nav-search-wrapper {
        width: auto;
        justify-content: flex-end;
        margin-top: 0;
        padding: 3px 8px;
    }

    .nav-search-input {
        width: 100px;
        font-size: 13px;
        padding: 3px 8px;
    }

    .nav-search-input:focus {
        width: 120px;
    }

    .nav-search-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    /* 手機版：搜尋框在三條線旁邊，更精簡 */
    .nav-item-search {
        position: absolute;
        top: 0px;
        right: 55px; /* 在漢堡選單左側 */
        z-index: 100;
    }

    .nav-search-wrapper {
        padding: 2px 6px;
        gap: 3px;
    }

    .nav-search-input {
        width: 70px;
        font-size: 12px;
        padding: 3px 6px;
    }

    .nav-search-input:focus {
        width: 90px;
    }

    .nav-search-input::placeholder {
        font-size: 11px;
    }

    .nav-search-btn {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

/* 影音時長顯示 */
.video-duration {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-left: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: inline-block;
}

/* 詳情頁標題區塊 */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
}

/* 上一則/下一則導覽按鈕 */
.prev-guide,
.next-guide {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
}

.prev-guide a,
.next-guide a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.prev-guide a:hover,
.next-guide a:hover {
    background: #8b7355;
    color: #fff;
    border-color: #8b7355;
    box-shadow: 0 2px 8px rgba(139,115,85,0.3);
}

.prev-guide a:focus,
.next-guide a:focus {
    outline: none;
    box-shadow: none;
}

.prev-guide a:hover {
    transform: translateX(-3px);
}

.next-guide a:hover {
    transform: translateX(3px);
}

.prev-guide a i,
.next-guide a i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.prev-guide a:hover i {
    transform: translateX(-3px);
}

.next-guide a:hover i {
    transform: translateX(3px);
}

.detail-header .title {
    margin-bottom: 0 !important;
}

/* 詳情頁 meta 資訊 */
.detail-meta {
    display: flex;
    gap: 20px;
    margin: 15px 0;
    padding: 12px 0;
    border-bottom: 1px solid #e8e8e8;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
}

.detail-meta span {
    font-size: 0.95rem;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.detail-meta span i {
    color: #999;
    font-size: 1rem;
}

.detail-meta .duration {
    font-weight: 500;
}

.detail-meta .views {
    font-weight: 400;
}

@media (max-width: 767px) {
    .detail-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .detail-header .title {
        display: none;
    }

    .prev-guide,
    .next-guide {
        display: flex;
        width: auto;
    }

    .prev-guide a,
    .next-guide a {
        width: auto;
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    .detail-meta {
        flex-direction: column;
        gap: 10px;
    }
}

/* 相關播放區塊 */
.related-divider {
    border: none;
    border-top: 2px solid #e8e8e8;
    margin: 60px 0 40px 0;
}

.related-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    text-align: left;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
}

.related-carousel {
    position: relative;
    padding: 0;
}

.related-card {
    margin: 0 10px 30px 10px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e8e8e8;
}

.related-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.related-card-cover {
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}

/* 導覽編號 - 圓形背景 */
.guide-number {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20; /* 確保編號顯示在所有元素之上 */
    width: 42px;
    height: 42px;
    background: rgba(157, 200, 21, 0.95);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

/* 詳情頁預設封面佔位符（在 JS 載入前顯示） */
.detail-cover-placeholder {
    position: relative;
    width: 100%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.detail-cover-placeholder img {
    width: 100%;
    height: auto;
    display: block;
}

.detail-cover-placeholder .guide-number {
    width: 50px;
    height: 50px;
    top: 20px;
    right: 20px;
    font-size: 1.3rem;
}

/* 詳情頁封面的編號樣式 */
.detail-youtube-container .guide-number,
.detail-video-container .guide-number,
.detail-audio-container .guide-number,
.img-text .guide-number {
    width: 50px;
    height: 50px;
    top: 20px;
    right: 20px;
    font-size: 1.3rem;
}

@media (max-width: 767px) {
    .detail-cover-placeholder .guide-number,
    .detail-youtube-container .guide-number,
    .detail-video-container .guide-number,
    .detail-audio-container .guide-number,
    .img-text .guide-number {
        width: 40px;
        height: 40px;
        top: 15px;
        right: 15px;
        font-size: 1.1rem;
    }
}

.related-card:hover .guide-number,
.scenic:hover .guide-number {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(157, 200, 21, 0.5);
}

.related-card-cover figure {
    margin: 0;
    height: 180px;
    overflow: hidden;
}

.related-card-cover figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card:hover .related-card-cover figure img {
    transform: scale(1.05);
}

.related-card-cover figcaption {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.related-card-cover h3 {
    margin: 0;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
}

.related-card-content {
    padding: 15px;
    background: #ffffff;
}

.related-card-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.related-card-content p {
    font-size: 0.9rem;
    margin: 0 0 12px 0;
    text-align: left;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.related-card-meta span {
    font-size: 0.85rem;
    color: #999;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.related-card-meta span i {
    font-size: 0.9rem;
}

/* 輪播箭頭 */
.related-carousel .slick-arrow-custom {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 10;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #e0e0e0;
    color: #333;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.related-carousel .slick-arrow-custom:hover {
    background: #fff;
    color: #000;
    border-color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transform: translateY(-50%) scale(1.1);
}

.related-carousel .slick-arrow-custom-left {
    left: 10px;
}

.related-carousel .slick-arrow-custom-right {
    right: 10px;
}

.related-carousel .slick-arrow-custom.slick-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 767px) {
    .related-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .related-card-cover figure {
        height: 150px;
    }

    .related-carousel .slick-arrow-custom {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .related-carousel .slick-arrow-custom-left {
        left: 5px;
    }

    .related-carousel .slick-arrow-custom-right {
        right: 5px;
    }
}

/*-----------------------------
    數字鍵盤彈出層
-----------------------------*/

/* 數字鍵盤觸發按鈕 */
.nav-numpad-trigger {
    background: transparent;
    border: none;
    padding: 1px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    font-size: 1.8rem;
}

.nav-numpad-trigger:hover {
    color: #9dc815;
    transform: scale(1.1);
}

.nav-numpad-trigger:focus {
    outline: none;
}

/* SVG 圖示樣式 */
.nav-icon-svg {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
}

.nav-numpad-trigger:hover .nav-icon-svg {
    filter: brightness(0) saturate(100%) invert(75%) sepia(28%) saturate(1141%) hue-rotate(29deg) brightness(98%) contrast(88%);
    transform: scale(1.1);
}

/* 手機版耳機圖示大小 */
@media (max-width: 991px) {
    .nav-numpad-trigger {
        font-size: 2.5rem;
        padding: 0 10px 8px 10px;
        position: relative;
        top: -10px;
    }

    .nav-icon-svg {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* 彈出層遮罩 */
.numpad-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.numpad-overlay.active {
    display: flex;
    opacity: 1;
}

/* 數字鍵盤容器 */
.numpad-container {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.numpad-overlay.active .numpad-container {
    transform: scale(1);
}

/* 數字鍵盤標題 */
.numpad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.numpad-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #333;
    font-weight: 600;
}

.numpad-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    padding: 5px;
    transition: all 0.3s ease;
    line-height: 1;
}

.numpad-close:hover {
    color: #333;
    transform: rotate(90deg);
}

.numpad-close:focus {
    outline: none;
}

/* 數字顯示框 */
.numpad-display {
    margin-bottom: 15px;
}

.numpad-display input {
    width: 100%;
    padding: 15px;
    font-family: 'Arimo', sans-serif;
    font-size: 3rem;
    text-align: center;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #f8f9fa;
    color: #333;
    letter-spacing: 0.5rem;
    font-weight: 600;
}

.numpad-display input::placeholder {
    color: #ccc;
}

/* 數字鍵盤按鍵 */
.numpad-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}

.numpad-key {
    height: 70px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arimo', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    color: #333;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.numpad-key:hover {
    background: #9dc815;
    color: #fff;
    border-color: #9dc815;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(157, 200, 21, 0.3);
}

.numpad-key:active {
    transform: translateY(0);
    box-shadow: none;
}

.numpad-key:focus {
    outline: none;
}

/* 清除按鈕 - C + 清除文字 */
.numpad-key-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.numpad-key-clear .clear-c {
    font-family: 'Arimo', sans-serif;
    font-size: 2rem;
    font-weight: 600;
}

.numpad-key-clear .clear-text {
    font-size: 1rem;
    font-weight: 500;
}

/* 提交按鈕（數字鍵盤格子中的輸入按鈕） */
.numpad-key-submit {
    background: #9dc815 !important;
    color: #fff !important;
    border-color: #9dc815 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.numpad-key-submit:hover {
    background: #8ab612 !important;
    border-color: #8ab612 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(157, 200, 21, 0.4) !important;
}

.numpad-key-submit:active {
    transform: translateY(0);
    box-shadow: none !important;
}

.numpad-key-submit:focus {
    outline: none;
}

.numpad-key-submit i {
    font-size: 1.2rem;
}

.numpad-key-submit .submit-text {
    font-family: '微軟正黑體', sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

/* 響應式設計 */
@media (max-width: 767px) {
    .numpad-container {
        padding: 20px;
        max-width: 340px;
    }

    .numpad-header {
        margin-bottom: 12px;
    }

    .numpad-header h3 {
        font-size: 1.15rem;
    }

    .numpad-display {
        margin-bottom: 12px;
    }

    .numpad-display input {
        font-size: 2.5rem;
        padding: 12px;
    }

    .numpad-keys {
        gap: 8px;
        margin-bottom: 12px;
    }

    .numpad-key {
        padding: 12px;
        font-size: 2rem;
    }

    .numpad-submit {
        font-size: 1rem;
        padding: 12px;
    }
}

/*-----------------------------
    字體大小控制按鈕
-----------------------------*/

.content {
    position: relative;
}

.font-size-controls {
    position: absolute;
    top: -10px;
    right: 0;
    display: flex;
    gap: 5px;
    z-index: 10;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    margin-bottom: 30px;
    align-items: center;
}

.font-size-label {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

.content p:first-of-type {
    margin-top: 10px;
}

.font-size-btn {
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px 10px;
    min-width: 36px;
}

.font-size-btn:hover {
    color: #9dc815;
    transform: scale(1.1);
}

.font-size-btn:active {
    transform: scale(1);
}

.font-size-btn:focus {
    outline: none;
}

.font-size-btn.active {
    color: #9dc815;
}

/* 大字按鈕 */
#fontSizeLarge {
    font-size: 1.1rem;
}

/* 文字放大狀態 */
.content.font-large,
.content.font-large p,
.content.font-large .guide-description,
.content.font-large .guide-content,
.content.font-large .guide-content p,
.content.font-large .guide-content div {
    font-size: 1.35em !important;
    line-height: 1.9 !important;
}

.content.font-large h1,
.content.font-large h2,
.content.font-large h3,
.content.font-large h4 {
    font-size: 1.4em !important;
}

/* 全站字體放大狀態（用於跨頁記憶） */
body.font-large-mode .detail-info .content,
body.font-large-mode .detail-info .content p,
body.font-large-mode .detail-info .guide-description,
body.font-large-mode .detail-info .guide-content,
body.font-large-mode .detail-info .guide-content p {
    font-size: 1.35em !important;
    line-height: 1.9 !important;
}

/* 響應式 */
@media (max-width: 767px) {
    .font-size-controls {
        position: static;
        justify-content: flex-end;
        margin-bottom: 15px;
    }

    .font-size-label {
        font-size: 0.9rem;
    }

    .font-size-btn {
        font-size: 0.95rem;
        padding: 5px 8px;
        min-width: 32px;
    }

    #fontSizeLarge {
        font-size: 0.95rem;
    }
}

/* 導覽列表分類標籤 */
.scenic-category-tag {
    display: inline-block;
    background: #8b7355;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
}

/* 篩選表單樣式優化 */
.filter-row-simple {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-row-simple .filter-group {
    flex: 0 0 auto;
}

.filter-row-simple .filter-search-group {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    position: relative;
}

.filter-row-simple .filter-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.filter-row-simple .scenic-search {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 14px;
    transition: all 0.3s;
}

.filter-row-simple .scenic-search:focus {
    outline: none;
    border-color: #8b7355;
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.filter-row-simple .scenic-select {
    padding: 10px 35px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 14px;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center;
    background-size: 12px;
    appearance: none;
    cursor: pointer;
    min-width: 150px;
}

.filter-row-simple .scenic-select:focus {
    outline: none;
    border-color: #8b7355;
}

@media (max-width: 767px) {
    .filter-row-simple {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-row-simple .filter-search-group {
        max-width: none;
    }
    
    .filter-row-simple .scenic-select {
        width: 100%;
    }
}

/* 導覽編號標籤 */
.guide-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8b7355;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    margin-right: 15px;
    vertical-align: middle;
}

/* 詳情頁 meta 資訊 */
.detail-meta-info {
    display: none;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.detail-meta-info .meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

.detail-meta-info .meta-tag i {
    color: #8b7355;
}

/* 數字鍵盤提示 */
.numpad-hint {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    min-height: 40px;
}

.numpad-hint.success {
    color: #10b981;
}

.numpad-hint.error {
    color: #ef4444;
}

/* 導覽內容樣式 */
.guide-description {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.guide-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.guide-content p {
    margin-bottom: 15px;
}

/* 上下則導覽按鈕 */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.detail-header .title {
    flex: 1;
    text-align: center;
    font-size: 1.3rem;
    color: #333;
    margin: 0 20px;
}

.prev-guide a, .next-guide a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 25px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.prev-guide a:hover, .next-guide a:hover {
    background: #8b7355;
    color: #fff;
}

@media (max-width: 767px) {
    .guide-number-badge {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin-right: 10px;
    }

    .detail-header {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }

    .detail-header .title {
        display: none;
    }

    .prev-guide, .next-guide {
        width: auto;
    }

    .prev-guide a, .next-guide a {
        width: auto;
        justify-content: center;
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

/* ============================================
   Simple Fade Carousel - 純 JavaScript 輪播
   ============================================ */

/* 輪播容器 */
.simple-fade-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 幻燈片包裝器 */
.sfc-slides {
    position: relative;
    width: 100%;
}

/* 單張幻燈片 */
.sfc-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s;
    z-index: 0;
}

/* 第一張幻燈片（撐開容器高度） */
.sfc-slide:first-child {
    position: relative;
    top: auto;
    left: auto;
}

/* 活動的幻燈片 */
.sfc-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* 圖片樣式 */
.sfc-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 導航點容器 */
.sfc-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    padding: 0;
    margin: 0;
}

/* 單個導航點 */
.sfc-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.sfc-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: #fff;
}

.sfc-dot.active {
    background: #fff;
    border-color: #fff;
}

/* 手機版優化 */
@media (max-width: 767px) {
    .sfc-dots {
        bottom: 10px;
        gap: 6px;
    }

    .sfc-dot {
        width: 8px;
        height: 8px;
        border-width: 2px;
    }
}

/* 訊息管理區塊中的輪播 */
.home-room .simple-fade-carousel {
    width: 100%;
}

.home-room .cover .simple-fade-carousel {
    width: 100%;
}

/* 確保在 home-room 中正確顯示 */
@media (max-width: 767px) {
    .home-room .cover {
        width: 100%;
        overflow: hidden;
    }

    .home-room .simple-fade-carousel {
        width: 100%;
    }

    .home-room .sfc-slide img {
        width: 100%;
        height: auto;
    }
}