@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

:root {
    --bg-color01: #f3f3f3;
    --bg-color02: #4a24f3;
    --bg-color03: #8dc499;
    --bg-color04: #8cce11;
    --bg-color05: #d60611;
    --bg-color06: #bbb6b6;
    --bg-color07: #000000;
    --bg-color08: #ffffff;
    --bg-color09: #ff9aa2;
    /* 粉紅糖霜 */
    --bg-color10: #fbc687;
    /* 橘色奶茶 */
    --bg-color11: #c1cfff;
    /* 夢幻天藍 */
    --bg-color12: #8ae9c1;
    /* 薄荷綠 */
    --bg-color13: #ffe066;
    /* 檸檬黃 */
    --bg-color14: #d1a3ff;
    /* 薰衣草紫 */
    --bg-color15: #ff6f91;
    /* 覆盆莓紅 */
    --bg-color16: #0099cc;
    /* 清新科技藍 */
    --bg-color17: #3b3b98;
    /* 藍莓深紫 */
    --bg-color18: #5c5470;
    /* 煙燻灰紫 */
    --bg-color19: rgba(0, 128, 96, 0.7);
    /*森林綠，透明度保留一點背景紋理 */
    --bg-color20: rgba(0, 180, 220, 0.7);
    /* 湖水藍，配上自然綠底不會過於跳脫，透明穩定對比 */
    --bg-color21: rgba(255, 204, 0, 0.7);
    /* 橙黃 醒目黃保留提示效果，但用透明減少刺眼感 */
    --bg-color22: #2e5339;
    /* 深墨綠 */
    --bg--color23: #eedc82;
    /* 卡其黃 */


    --roller-bg01: rgba(255, 174, 0, 0.877);
    --roller-bg02: rgba(255, 136, 0, 0.3);
    --roller-bg03: rgba(212, 247, 18, 0.3);
    --roller-bg04: rgba(0, 253, 21, 0.3);
    --roller-bg05: rgba(0, 217, 255, 0.3);
    --roller-bg06: rgba(255, 154, 162, 0.3);
    /* 粉紅糖霜透明 */
    --roller-bg07: rgba(251, 198, 135, 0.3);
    /* 橘色奶茶透明 */
    --roller-bg08: rgba(193, 207, 255, 0.3);
    /* 天藍透明 */
    --roller-bg09: rgba(255, 111, 145, 0.3);
    /* 覆盆莓透明 */
    --roller-bg10: rgba(0, 153, 204, 0.3);
    /* 清新科技藍透明 */
    --roller-bg11: rgba(0, 0, 0, 0.5);
    /* 透明黑幕 */
    --roller-bg12:rgba(0, 128, 96, 0.3);
    /* 森林綠 */


    --text-color01: #206b7e;
    --text-color02: #444444;
    /* 通用內文灰，眼睛最舒服 */
    --text-color03: #3a3a3a;
    /* 稍微再暗一點，圖片背景時也不會被吃掉 */
}

body {
    font-family: "Zen Maru Gothic", sans-serif;
}

/* 背景色 */
.bg-01 {
    background-color: var(--bg-color01);
}

.bg-02 {
    background-color: var(--bg-color02);
}

.bg-03 {
    background-color: var(--bg-color03);
}

.bg-04 {
    background-color: var(--bg-color04);
}

.bg-05 {
    background-color: var(--bg-color05);
}

.bg-06 {
    background-color: var(--bg-color06);
    
}

.bg-07 {
    background-color: var(--bg-color07);
}

.bg-08 {
    background-color: var(--bg-color08);
}

.bg-09 {
    background-color: var(--bg-color09);
}

.bg-10 {
    background-color: var(--bg-color10);
}

.bg-11 {
    background-color: var(--bg-color11);
}

.bg-12 {
    background-color: var(--bg-color12);
}

.bg-13 {
    background-color: var(--bg-color13);
}

.bg-14 {
    background-color: var(--bg-color14);
}

.bg-15 {
    background-color: var(--bg-color15);
}

.bg-16 {
    background-color: var(--bg-color16);
}

.bg-17 {
    background-color: var(--bg-color17);
}

.bg-18 {
    background-color: var(--bg-color18);
}

.bg-19 {
    background-color: var(--bg-color19);
}

.bg-20 {
    background-color: var(--bg-color20);
}

.bg-21 {
    background-color: var(--bg-color21);
}

.bg-22 {
    background-color: var(--bg-color22);
    color: white;
}

.bg-23{
    background-color: var(--bg--color23);
}

/* 字體大小 */
.fw-900 {
    font-weight: 900;
}

.fw-800 {
    font-weight: 800;
}

.fw-700 {
    font-weight: 700;
}

.fw-600 {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.fw-400 {
    font-weight: 400;
}

.fw-300 {
    font-weight: 300;
}

.fw-200 {
    font-weight: 200;
}

.fw-100 {
    font-weight: 100;
}


/*背景圖*/
.bg-cover {
    background-position: center center;
    background-size: cover;
}

/* 背景圖 - 完整顯示不裁切 */
.bg-cover1 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    /* 避免透明背景突兀 */
}

/* ===============================
    圖片滑入動畫樣式
   =============================== */
/* 背景圖 hover 時放大效果（跑馬燈圖片用） */
.bg-cover01:hover {
    transform: scale(1.1);
    /* 放大 1.1 倍 */
    transition: transform 0.5s ease-in-out;
    /* 動畫時間與曲線 */
}

/*roller由上進入 .roller-box:外層  .roller:內層 */
.top-roller-box {
    position: relative;
    overflow: hidden;
}

.top-roller-box .top-roller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--roller-bg10);
    transform: translateY(-100%);
    display: flex;
    align-items: center;
}

.top-roller-box:hover .top-roller {
    transform: translateX(0);
    transition: transform 1.5s;
}

/*roller由左進入 .roller-box:外層  .roller:內層 */
.left-roller-box {
    position: relative;
    overflow: hidden;
}

.left-roller-box .left-roller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--roller-bg12);
    transform: translateX(-100%);
    display: flex;
    align-items: center;
}

.left-roller-box:hover .left-roller {
    transform: translateX(0);
    transition: transform 1.5s;
}

/*roller由右進入 .roller-box:外層  .roller:內層 */
.right-roller-box {
    position: relative;
    overflow: hidden;
}

.right-roller-box .right-roller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--roller-bg08);
    transform: translateX(100%);
    display: flex;
    align-items: center;
}

.right-roller-box:hover .right-roller {
    transform: translateX(0);
    transition: transform 1.5s;
}

/*roller由下進入 .roller-box:外層  .roller:內層 */
.botton-roller-box {
    position: relative;
    overflow: hidden;
}

.botton-roller-box .botton-roller {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--roller-bg04);
    transform: translateY(-100%);
    display: flex;
    align-items: center;
}

.botton-roller-box:hover .botton-roller {
    transform: translateX(0);
    transition: transform 1.5s;
}

/* ===============================
   🧭 Timeline 時間軸區塊樣式
   =============================== */

/* 整個 timeline 區塊容器：設定相對定位 */
.timeline-section {
    position: relative;
}

/* 中央垂直線：使用偽元素畫出一條線條在正中央 */
.timeline-section::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    opacity: 0.3;/* 故意改變透明 */
    width: 8px;
    border: 7px dashed var(--bg-color07);
    /* 可變色主軸線條 */
    left: 50%;
    transform: translateX(-50%);
    /* 水平置中 */
}





/* 每個時間點外層容器：設為相對定位 */
.timeline-section-pointer {
    position: relative;
}

/* 圓形節點：使用偽元素畫圓形節點（外圈＋內圈） */
.timeline-section-pointer::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    background-color: var(--bg-color03);
    /* 節點內圈顏色 */
    border: 7px solid var(--bg-color07);
    /* 節點外圈顏色 */
    border-radius: 50%;
    /* 做出圓形 */
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    /* 水平置中 */
}