.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}body,td,th {
    font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
    background-image: url();
}
.box-icon-modern {
    display: flex;
    align-items: flex-start;
}
.box-icon-inner {
    margin-right: 15px;
    padding-top: 10px;
}
.bg-light-blue {
    background: linear-gradient(to bottom, #e6f2fa, #ffffff);
}

/* 
 * 時間線樣式 - Timeline Styles
 * ----------------------------------------------
 * 這個部分包含了時間線的所有樣式，包括：
 * - 時間線容器
 * - 時間線項目
 * - 時間線連接線
 * - 時間線點
 * - 時間線年份
 * - 互動效果（懸停、點擊）
 */

/* 時間線容器 - 控制整個時間線區域 */
.timeline-container {
    width: 100%;
    padding: 0;
    position: relative;
    overflow-x: auto; /* 在小螢幕上允許水平滾動 */
}

/* 時間線行 - 包含所有時間線項目的容器 */
.timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-width: 600px; /* 確保在小螢幕上有足夠的寬度 */
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0;
}

/* 連接時間線項目的線 - 水平線 */
.timeline-row:before {
    content: '';
    position: absolute;
    top: 30px; /* 控制線的垂直位置 */
    height: 1px; /* 線的粗細 */
    width: 100%;
    background-color: #ddd; /* 線的顏色 */
    z-index: 1;
}

/* 時間線項目 - 每個年份的容器 */
.timeline-item {
    text-align: center;
    position: relative;
    z-index: 2; /* 確保項目顯示在線的上方 */
    cursor: pointer;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 時間線項目的點 - 每個年份上方的圓點 */
.timeline-item:before {
    content: '';
    width: 10px; /* 點的大小 */
    height: 10px;
    border-radius: 50%; /* 使其成為圓形 */
    background-color: #516ca9; /* 點的顏色 - 藍色 */
    display: block;
    border: 2px solid #fff; /* 白色邊框 */
    box-shadow: 0 0 0 1px #516ca9; /* 外部陰影 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
    margin-bottom: 15px;
}

/* 懸停時的點樣式 */
.timeline-item:hover:before {
    transform: scale(1.3); /* 放大效果 */
    background-color: #fff; /* 懸停時點變為白色 */
}

/* 激活（點擊）時的點樣式 */
.timeline-item.active:before {
    background-color: #fff; /* 點擊時點變為白色 */
    transform: scale(1.3); /* 放大效果 */
}

/* 時間線項目的年份文字 */
.timeline-item h4 {
    font-weight: normal;
    color: #516ca9; /* 年份顏色 - 藍色 */
    margin: 0;
    font-size: 16px;
    transition: all 0.3s ease; /* 平滑過渡效果 */
}

/* 
 * 時間線內容樣式 - Timeline Content Styles
 * ----------------------------------------------
 * 這個部分包含了時間線內容區域的樣式，包括：
 * - 內容容器
 * - 內容區塊
 * - 激活狀態
 * - 動畫效果
 */

/* 內容容器 - 包含所有年份內容的外層容器 */
.timeline-content-container {
    margin-top: 40px; /* 與時間線的間距 */
    width: 100%;
}

/* 內容區塊 - 每個年份的內容 */
.timeline-content {
    display: none; /* 預設不顯示 */
    padding: 25px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 20px;
    border-radius: 4px;
    animation: fadeIn 0.5s ease-in-out; /* 淡入動畫 */
}

/* 激活的內容區塊 - 顯示當前選中年份的內容 */
.timeline-content.active {
    display: block;
}

/* 激活的時間線項目年份文字樣式 */
.timeline-item.active h4 {
    font-weight: bold; /* 選中後年份變粗 */
    color: #516ca9;
}

/* 淡入動畫 - 內容顯示時的效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 
 * 財報區塊樣式 - Financial Reports Styles
 * ----------------------------------------------
 */
.financial-reports-filter {
    margin-bottom: 30px;
}

.financial-reports-filter .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.financial-reports-filter .btn {
    margin: 5px;
    transition: all 0.3s ease;
}

.financial-reports-filter .btn-outline-primary {
    color: #516ca9;
    border-color: #516ca9;
}

.financial-reports-filter .btn-outline-primary:hover,
.financial-reports-filter .btn-outline-primary.active {
    background-color: #516ca9;
    color: #fff;
}

.financial-year-group {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.financial-year-title {
    color: #516ca9;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
    position: relative;
    padding-left: 15px;
}

.financial-year-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    background-color: #516ca9;
}

.financial-report-item {
    transition: all 0.3s ease;
    padding: 8px 15px;
    border-radius: 4px;
}

.financial-report-item:hover {
    background-color: rgba(81, 108, 169, 0.05);
}

.financial-report-item a {
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.financial-report-item:hover a {
    color: #516ca9;
}

@media (max-width: 768px) {
    .financial-reports-filter .btn {
        font-size: 0.9rem;
        padding: 0.375rem 0.5rem;
    }
    
    .financial-year-title {
        font-size: 1.1rem;
    }
}

/* Responsive styles for timeline */
@media (max-width: 768px) {
    .timeline-row {
        overflow-x: auto;
        padding: 0 20px;
        justify-content: flex-start;
    }
    .timeline-item {
        flex: 0 0 auto;
        margin: 0 20px;
    }
}

@media (max-width: 768px) {
    .timeline-row {
        justify-content: flex-start;
    }
    .timeline-item {
        flex: 0 0 120px;
    }
}