/* --- 全域 & Body 樣式 --- */
body {
   font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", Verdana, Sans-serif !important;
   background: linear-gradient(135deg,  rgb(254,252,234) 0%,rgb(241,236,247) 100%)!important;
   margin: 0;
   color: #333;
} 

/* --- 主要容器排版 --- */
.Ch6Main1 { max-width: 990px; width: 100%; margin: 1px auto; border: 1px solid #ddd; box-shadow: 2px 2px 4px 2px #ddd; background: #FFF; overflow: hidden; }
.Ch6Main2 { width: 95%; margin: 20px auto; display: flex; justify-content: space-between; gap: 20px; }
.main-sidebar { flex-basis: 220px; flex-shrink: 0; }
.main-content { flex-grow: 1; min-width: 0; }

/* --- 側邊欄樣式 --- */
.sb dt { padding: 2px; border-width:1px; margin: 1px 0; background: linear-gradient(to bottom, rgba(252,227,0,1) 0%,rgba(247,170,46,1) 100%); }
.sb dd { background:#FFC; margin: 2px; padding: 5px 0; display:none; }
.sb dd a { display: block; padding: 3px 0 3px 15px; }
.sb dt a { color: #00F; font-size:14px; text-decoration:none; padding-left:5px; }
.sb dd a { color: #333; font-size:14px; text-decoration:none; }
.sidebar-li { list-style-type: square; margin-left: 30px; }
.sidebar-li a { margin-left: 0; }
.sidebar-special-link { color: red; }
/* --- 側邊欄圖片樣式 (解決圖片比例不一問題) --- */

/* 預設樣式 (手機版): 採用 Flexbox 實現左右併排，並保持圖片原始比例 */
.sidebar-images {
    display: flex;            /* 啟用 Flexbox 排版 */
    justify-content: center;  /* 水平置中對齊 */
    align-items: center;      /* 垂直居中對齊 (讓不同高度的圖片能對齊) */
    gap: 15px;                /* 設定圖片之間的間距 */
    margin-top: 20px;
    padding: 0 10px;
}

.sidebar-images a {
    /* 不再使用 flex: 1 或固定的 width，讓其根據內容大小決定 */
    flex-shrink: 0;           /* 防止連結在空間不足時被過度壓縮 */
    flex-grow: 0;             /* 防止連結在空間有餘時過度拉伸 */
    max-width: 50%;           /* 確保在極小螢幕上不會佔據超過一半 */
    line-height: 0;           /* 移除圖片下方多餘的空間 */
    display: block;
}

.sidebar-images img {
    max-width: 100%;          /* 確保圖片不超出其父連結的寬度 */
    height: auto;             /* 高度自動調整以維持比例 */
    border-width: 0;
    display: block;
}


/* 網頁版樣式: 當螢幕寬度大於 991px 時，改為上下堆疊 */
@media (min-width: 992px) {
    .sidebar-images {
        flex-direction: column; /* 將 Flexbox 的排列方向改為垂直 */
        gap: 10px;              /* 調整垂直堆疊時的間距 */
    }

    .sidebar-images a {
        width: auto;            /* 讓連結寬度適應其圖片內容 */
        max-width: 100%;        /* 確保不超出側邊欄寬度 */
        margin: 0 auto;         /* 垂直堆疊時，讓圖片在水平方向居中 */
    }
    /* 這裡不再需要特別設定 img 的寬度，因為 a 已經適應了 */
}



/* --- 快速連結區 --- */
.quick-links { text-align: center; overflow-x: auto; white-space: nowrap; margin: 20px 0; padding: 10px 0; font-size: 0; }
.quick-links > a { display: inline-block; vertical-align: middle; width: 136px; height: 90px; border: 1px #999 solid; border-radius: 5px; margin: 0 5px; background-color: #fff; }
.quick-links a img { width: 100%; height: 100%; object-fit: fill; }

/* --- 宣傳影片區 --- */
.section-divider { width: 90%; height: 1px; background: #999; margin: 30px auto; border: 0; }
#idvLink { text-align: center; }
#idvLink a { display: inline-block; margin: 0 5px; }
#idvLink img { max-height: 220px; width: auto; border: 1px solid #999; border-radius: 5px; }

/* --- 跑馬燈 --- */
#maqueeDIV { margin-top: 20px; }
.marquee-header { margin-bottom: 5px; }
.marquee-title { background: orange; border: 1px #C0C0C0 dotted; border-radius: 5px 5px 0 0; padding: 2px 5px; color: #FFF; }
#toggleButton { background-color: #EFEFEF; border: 1px solid #CCC; cursor: pointer; padding: 3px 8px; margin-left: 10px; }
/* ▼▼▼【更新】跑馬燈核心樣式 ▼▼▼ */

/* 1. 外層容器 (可視範圍)，樣式維持不變 */
#my_Marquee_box {
    background-color: #FFF2CC;
    border: 1px #999 dashed;
    box-shadow: 1px 1px 1px 1px #CCCCCC;
    height: 120px; /* 維持固定高度 */
    overflow: hidden; /* 隱藏超出範圍的內容 */
    padding: 5px;
}

/* 2. 定義向上滾動的動畫 */
@keyframes scroll-up {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-50%); /* 向上移動 50% 的高度，因為內容已複製一倍 */
    }
}

/* 3. 執行動畫的內容層 */
#my_Marquee_box .marquee-content {
    /* * animation: [動畫名稱] [持續時間] [速度曲線] [延遲] [次數] [方向];
     * 25s 是滾動一輪的時間，您可以調整此數值來控制速度 (越大越慢)
     */
    animation: scroll-up 25s linear infinite;
}

/* 4. 當暫停時，停止動畫 */
#my_Marquee_box .marquee-content.is-paused {
    animation-play-state: paused;
}

/* ▲▲▲【更新結束】跑馬燈核心樣式 ▲▲▲ */


.my_Marquee { font-size: 24px; line-height: 1.5; padding: 2px 0; border-bottom: 1px solid #ddd; }
.my_Marquee:last-child { border-bottom: none; }
.my_Marquee a { color: #000; font-weight: bold; }
.my_Marquee a.marquee-warning { color: red; }
.marquee-footer { text-align: right; margin-top: 5px; }
.marquee-footer a { font-size: 12px; text-decoration: none; background-color: #EEE; border-radius: 3px; padding: 2px 5px; }

/* --- 下方工具區 --- */
.tool-wrapper { width: 95%; margin: 20px auto; }
#toolDIV { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.divTools, .divCDIC, .image-grid-container { border: 1px solid #666; border-radius: 10px; }
.divTools, .divCDIC { flex: 1; min-width: 280px; }
.divTools { background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); }
.divCDIC { background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(255,248,48,1) 100%); }
.tool-header { font-size: 16px; color: #F00; text-align: center; padding: 10px; border-bottom: 1px solid #ddd; }
.tool-header img { vertical-align: middle; height: 20px; margin-right: 5px; }
.tool-content { padding: 10px; }
.tool-content.text-center { text-align: center; }
.employee-photo-link { position: relative; display: inline-block; }
.employee-photo-link img { width: 150px; border: 1px dotted #666; border-radius: 10%; }
.employee-award { position: absolute; bottom: 5px; right: 0; width: 50px !important; border: none !important; }
.tool-list { margin: 10px 0; padding: 0 15px; list-style-type: disc; margin-left:10px;}
.tool-list li { margin-bottom: 8px; }
.special-link { color: blue; }
.cdic-text { font-size: 16px; color: blue; font-weight: bold; }
.cdic-amount { font-size: 24px; color: red; font-weight: bold; font-style: italic; }
.divCDIC .tool-content img { width: 120px; height: auto; border-radius: 10%; margin-top: 10px; }
.divTools-info { flex-grow: 0; flex-basis: 300px; }
.image-grid-container { flex: 2; min-width: 380px; padding: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.image-grid-container > a, .image-grid-container > img { width: calc(50% - 10px); height: 95px; display: flex; justify-content: center; align-items: center; border: 1px solid #999; border-radius: 5%; margin: 0; overflow: hidden; }
.image-grid-container img { max-width: 100%; max-height: 100%; object-fit: contain; border: none; }


/* --- 頁尾聯絡資訊 --- */
.contact-info { width: 90%; margin: 40px auto 20px auto; color: red; line-height: 1.8; display: flex; flex-wrap: wrap; gap: 20px; }
.contact-item { flex: 1; min-width: 300px; }
.contact-item.full-width { flex-basis: 100%; }
.contact-info img { vertical-align: middle; }
.contact-info ul { margin: 0; padding-left: 20px; list-style: disc; }


/* ################### 響應式樣式 (RWD) ################### */
@media (max-width: 991px) {
    .Ch6Main2 { flex-direction: column; }
    .main-content { order: 1; }
    .main-sidebar { order: 2; }
}
@media (max-width: 767px) {
    .quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; white-space: normal; font-size: 1rem; padding: 10px; }
    .quick-links > a { width: calc(50% - 10px); height: auto; margin: 0; }
    .quick-links a img { height: auto; object-fit: initial; }
    #idvLink { display: flex; flex-direction: column; align-items: center; gap: 15px; }
    #idvLink a { width: 95%; }
    #idvLink img { width: 100%; height: auto; max-height: none; }
    #toolDIV { flex-direction: column; align-items: center; }
    .divTools, .divCDIC, .image-grid-container { width: 95%; flex-basis: auto !important; }
    .contact-info { flex-direction: column; }
}

/* --- 輪播圖樣式 (整合電腦/手機版最終修正) --- */

/* 1. 建立輪播圖的定位基準和穩定的長寬比 */
#slider1_container {
    position: relative;     /* 關鍵：為內部絕對定位的控制項提供基準 */
    width: 100%;
    aspect-ratio: 16 / 9;   /* 維持16:9的長寬比，避免頁面跳動。可依需求調整 (例如 4 / 3) */
    background-color: #eee; /* 圖片載入前的淺灰色底色 */
}

/* --- 輪播圖樣式修正 --- */

/* 1. 讓輪播圖本身和圖片填滿容器 (此部分無須修改) */
#carouselSlides, .carousel-inner, .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#carouselSlides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. 控制項 (圓點指示器) 的通用樣式 */
#carouselSlides .carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    /*
     * ▼▼▼ 修改點 ▼▼▼
     * 將 z-index 從 15 調降為 10，使其層級低於左右箭頭。
     */
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
}
#carouselSlides .carousel-indicators li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
}
#carouselSlides .carousel-indicators .active {
    background-color: #fff;
}

/* 3. 控制項 (左右箭頭) 的通用樣式 */
#carouselSlides .carousel-control-prev,
#carouselSlides .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    z-index: 15;
    font-size: 24px;
    line-height: 45px;
    text-align: center;
}
#carouselSlides .carousel-control-prev:hover,
#carouselSlides .carousel-control-next:hover {
    opacity: 1;
}
#carouselSlides .carousel-control-prev { left: 15px; }
#carouselSlides .carousel-control-next { right: 15px; }

/*
 * ▼▼▼ 修改點 ▼▼▼
 * 在選擇器前面加上輪播圖的 ID "#carouselSlides"，
 * 提高此規則的權重，確保它能強制隱藏預設圖示。
 */
#carouselSlides .carousel-control-prev-icon,
#carouselSlides .carousel-control-next-icon {
    display: none;
}




/* 4. 手機版微調 (螢幕寬度小於 767px 時) */
@media (max-width: 767px) {
    /* 在手機上，讓控制項小一點，更貼近邊緣 */
    #carouselSlides .carousel-indicators {
        bottom: 8px;
    }
    #carouselSlides .carousel-indicators li {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
    #carouselSlides .carousel-control-prev,
    #carouselSlides .carousel-control-next {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 18px;
    }
    #carouselSlides .carousel-control-prev { left: 8px; }
    #carouselSlides .carousel-control-next { right: 8px; }
}


/* 5. 圖片放大與淡入淡出動畫效果 (維持不變) */
#carouselSlides .carousel-item { overflow: hidden; }
/*#carouselSlides.carousel-fade .carousel-item { opacity: 0; transition: opacity 0.8s ease-in-out; }
#carouselSlides.carousel-fade .carousel-item.active { opacity: 1; }*/
/*#carouselSlides .carousel-item.active img { animation: kenburns-zoom 5s linear forwards; }*/
/*#carouselSlides .carousel-item.active,
#carouselSlides .carousel-item-next,
#carouselSlides .carousel-item-prev {
    transform: translateX(0); 
}

#carouselSlides .carousel-item-next {
    transform: translateX(100%); 
}

#carouselSlides .carousel-item-prev {
    transform: translateX(-100%); 
}*/
/*@keyframes kenburns-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}*/
@media (max-width: 767px) {
    #carouselSlides .carousel-control-prev,
    #carouselSlides .carousel-control-next { width: 30px; height: 30px; line-height: 30px; font-size: 16px; }
    #carouselSlides .carousel-control-prev { left: 5px; }
    #carouselSlides .carousel-control-next { right: 5px; }
    #carouselSlides .carousel-indicators { bottom: 2px; }
    #carouselSlides .carousel-indicators li { width: 8px; height: 8px; margin: 0 3px; }
}
/* --- 下方工具區 - 圖示網格樣式 (結構統一最終版) --- */

/* 網格容器 (最終修正：使用 align-content 讓內容垂直集中) */
.image-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 兩欄 */
    row-gap: 8px;                    /* 行的上下間距 (可自行調整) */
    column-gap: 8px;               /* 左右間距 (可自行調整) */
    padding: 8px;                  /* 容器內邊距 */

    /* * --- ▼▼▼ 關鍵修改 ▼▼▼ ---
     * 將所有網格「集中」在容器的「中間」。
     * 預設值是 'stretch' (伸展)，這會導致行距被拉開。
     * 改成 'center' 會讓所有內容在垂直方向上集中。
     * (如果您希望它們靠上方，請改用 'start')
     */
    align-content: start;
}

/* 網格中的項目 */
.image-grid-wrapper > a {
    /* 5. 關鍵：移除 width: calc(...)，Grid 會自動處理寬度 */
    height: 75px;            /* 6. 縮小高度 (可自行調整) */
    
    /* 以下維持不變，用於置中圖片 */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    margin: 0;
    position: relative;
}

/* 網格中的圖片 */
.image-grid-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持比例不變形 */
    border: none;
}

/* WebATM 提示框的樣式 (維持不變) */
#webatm_notify {
    position: absolute;
    display: none;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    z-index: 999;
    pointer-events: none;
}
/* --- WebATM 通知彈窗顯示最終修正 --- */
.webatm-container {
    overflow: visible !important;
}

/* --- WebATM 通知彈窗圖片放大 (最終修正) --- */
#webatm_notify img {
    width: 250px;           /* 設定您想要的寬度 */
    height: auto;           /* 高度自動調整以保持比例 */
    max-width: none;        /* 關鍵：移除最大寬度限制，允許圖片自由縮放 */
}


/* --- Add this new section for the carousel pause/play button --- */
.carousel-pause-btn {
    position: absolute;
    bottom: 15px; /* Aligns with the carousel indicators */
    right: 60px; /* Position it to the right of the indicators */
    z-index: 20; /* Ensure it's above other elements */
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px; /* 增加字體大小，讓圖示更明顯 */
    line-height: 1; /* 調整行高，確保圖示置中 */
    transition: background-color 0.2s;
}

.carousel-pause-btn:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* Adjust for smaller screens */
@media (max-width: 767px) {
    .carousel-pause-btn {
        right: 40px;
        bottom: 8px;
        padding: 3px 8px;
        font-size: 16px; /* 手機版字體大小 */
    }
}
/* 將連結移出可見區域 */
.goCenter {
    position: absolute;
    left: -9999px; /* 將元素移到畫面的很遠的地方 */
}

/* 當連結被聚焦時顯示 */
.goCenter:focus {
    position: static; /* 恢復正常位置 */
    z-index: 999;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #000;
}