@charset "utf-8";


       
   body {
            font-family: 'Noto Sans TC', sans-serif;
            color: var(--text-dark);
            overflow-x: hidden;
        }



/* =========================================
   1. 全域與基礎設定 (Base & Reset)
   ========================================= */
body, td, th {
    font-size: 1em;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
    overflow-x: hidden; /* 防止水平卷軸 */
	  ;
            
}
    /* ... mail link CSS ... */

    /* --- 新增：專屬 Footer Email 連結樣式 --- */
    .footer-mail-link {
        color: #ffffff !important;  /* 強制設定文字為白色，覆蓋所有預設樣式 */
        text-decoration: none;      /* 預設無底線 */
        transition: 0.3s;           /* 增加一點滑順感 */
    }

    /* 設定 滑鼠移過(Hover) 的狀態 */
    .footer-mail-link:hover {
        color: #ffffff !important;  /* 保持白色 */
        text-decoration: underline; /* 出現底線 */
    }

    /* 設定 點擊過(Visited)、點擊中(Active) 的狀態，避免變回藍色或紫色 */
    .footer-mail-link:visited,
    .footer-mail-link:active,
    .footer-mail-link:focus {
        color: #ffffff !important;
        text-decoration: none;
    }
    /* ------------------------------------ */
/* Bootstrap 容器修正 */
.container-fluid { padding: 0px; }
.container { width: 100%;padding: 30px; }

/* 通用圖片設定 */
.page-title-photo {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

/* =========================================
   2. 元件樣式 (Components)
   ========================================= */

/* --- 廣告輪播 (Carousel) --- */
       /* 1. 移除圖片超連結的預設樣式 */
        .carousel-item > a {
            display: block;
            text-decoration: none;
            border: 0;
            outline: none;
        }

        /* 2. 調整輪播指示器(下方小圓點)樣式 */
        .carousel-indicators [data-bs-target] {
            background-color: #fff; 
            border-bottom: 2px solid #000;
        }
        
        /* 3. 確保圖片寬度填滿 */
        .carousel-item img {
            width: 100%;
            height: auto;
        }

        /* --- 重點修改：控制淡入淡出的速度 --- */
        /* Bootstrap 預設約為 0.6s，這裡覆蓋它 */
        .carousel-fade .carousel-item {
            opacity: 0; /* 確保非活動項目透明 */
            transition-property: opacity;
            /* 在這裡修改秒數，例如 1.5s 代表轉場過程花費 1.5秒 */
            transition-duration: 1.5s; 
            transition-timing-function: ease-in-out; /* 轉場曲線 (慢進慢出) */
        }

        /* 確保 active 狀態下是不透明的 (這是 BS5 運作原理，保留即可) */
        .carousel-fade .carousel-item.active,
        .carousel-fade .carousel-item-next.carousel-item-start,
        .carousel-fade .carousel-item-prev.carousel-item-end {
            opacity: 1;
        }

/* --- 通用按鈕 (Buttons) --- */
.text-red { color: #ff0045; }
.bg-red { background-color: #ff0045; }

/* 紅色主按鈕 */
.btn-custom-red {
    width: 250px;
    background-color: #ff0045;
    color: white;
    border-radius: 10px;
    padding: 15px 30px;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 1.4em;
    font-family: "微軟正黑體", sans-serif;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.btn-custom-red:hover {
    background-color: #cc0038;
    color: white;
}

/* 詳細資訊小按鈕 */
.btn-detail {
    background-color: #ff0045;
    color: white;
    border-radius: 20px;
    padding: 5px 20px;
    font-size: 1rem;
    font-family: "微軟正黑體", sans-serif;
    text-decoration: none;
    display: inline-block;
}

.btn-detail:hover {
    background-color: #d60036;
    color: white;
}

/* LINE 按鈕修正 (Modal 內的按鈕) */
.btn-line-fix:active,
.btn-line-fix:focus {
    background-color: #146c43 !important;
    color: #ffffff !important;
    border-color: #146c43 !important;
    box-shadow: none !important;
}
.btn-line-fix:hover {
    background-color: #157347 !important;
    color: #ffffff !important;
}

/* --- Footer (頁尾) --- */
.footer-main { background-color: #fe0040; color: white; padding: 60px 0; }
.footer-main h5 {  font-size: 1.6rem; font-weight: bold; font-family: 'Noto Serif TC', "微軟正黑體", serif; margin-bottom: 20px;    }
.footer-main .small{font-size: 1rem; font-weight: bold; font-family: "微軟正黑體"; margin-bottom: 20px; line-height: 26px;}   
.footer-links a {font-size: 1rem; font-family: "微軟正黑體"; color: white; text-decoration: none; line-height: 26px; display: block; margin-bottom: 8px; }
.footer-social a { color: white; font-size: 1.5rem; margin-right: 15px; text-decoration: none; background-color: transparent; }
.footer-social a:hover { background-color: transparent !important; opacity: 0.8; }
.logo-s{ display: block; width: 400px; } 
.foot-icon{ margin-left: -10px;}

.copyright { background: white; color: #fe0040; text-align: center; padding: 15px 0; font-size: 0.8rem; }

/* =========================================
   3. 懸浮 LINE 按鈕 (Floating Line Button)
   [★已修正截圖中超出邊界的問題]
   ========================================= */
.floating-line {
    position: fixed;
    z-index: 1000;
    display: block;
    
    /* 桌機預設值 */
    width: 70px;
    height: 70px;
    bottom: 40px;
    right: 40px;
    
    /* ★關鍵修正：強制歸零 margin，避免 HTML 上的 m-4 影響定位 */
    margin: 0 !important; 
    padding: 0 !important;
    
    /* 增加陰影與互動 */
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

/* ★關鍵修正：確保圖片鎖在按鈕內，不會爆開 */
.floating-line img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.floating-line:hover {
    transform: scale(1.1);
}

/* =========================================
   4. RWD 斷點設定 - 一般螢幕與行動裝置
   [桌機優先 Desktop First: max-width]
   ========================================= */

/* 平板與小筆電 (< 992px) */
@media (max-width: 991.98px) {
    /* 稍微縮小懸浮按鈕 */
    .floating-line {
        width: 60px;
        height: 60px;
        bottom: 30px;
        right: 30px;
    }
.logo-s{ display: block; width: 300px; } 
.foot-icon{ margin-left: -10px;}

}

/* 橫向手機 (< 768px) */
@media (max-width: 767.98px) {
    .footer-main { padding: 60px 0; }
    .carousel-item { height: auto; min-height: 200px; }
    /* 手機版按鈕滿版 */
    .btn-custom-red { width: 100%; max-width: 300px; padding: 12px 20px; }
}

/* 直向手機 (< 576px) */
@media (max-width: 575.98px) {
    .footer-main { padding: 40px 0; }
    
    /* ★關鍵修正：解決截圖中按鈕被切邊的問題 */
    .floating-line {
        width: 55px;      /* 縮小尺寸 */
        height: 55px;
        bottom: 20px;
        right: 15px;      /* 距離右邊 15px，確保不切邊也不擋字 */
    }
.logo-s{ display: block; width: 270px; } 
.foot-icon{ margin-left: -10px;}

}

/* =========================================
   5. RWD 斷點設定 - 2K 與 4K 超大螢幕
   [針對 > 1920px 使用 min-width 覆蓋]
   ========================================= */

@media (min-width: 1921px) {
    /* 1. 放大全站基礎字體 */
    body {
        font-size: 1.2em; 
    }
    /* 2. 放寬容器 */
    .container {
        max-width: 1600px; 
    }
    /* 3. 放大按鈕尺寸 */
    .btn-custom-red {
        width: 300px;
        font-size: 1.6em;
        padding: 20px 40px;
    }
    /* 4. Footer 增加間距 */
    .footer-main {
        padding: 100px 0;
    }
    
    /* 5. 放大懸浮按鈕 */
    .floating-line {
        width: 100px;
        height: 100px;
        bottom: 60px;
        right: 60px;
    }
}