@charset 'utf-8';

/* ============================================================
   index.html 首頁專屬樣式
   - #idx_video_01 滿版影片 + PNG 遮罩
   - #idx_video_02 滿版影片 (無遮罩)
   - #idx_intro 4 個 pill 圖
   - #idx_txt 中英對照引言
   ============================================================ */


/* ============================================================
   首頁 #idx_video_01 — 滿版影片 + PNG 遮罩
   section 100vh 滿版；mask PNG 已在四週延伸 (PC 4800x7680 / 手機 1040x1900)，
   原始內容貼齊 canvas 底部 + 左右各加 padding，文字總是落在下方
   配合 object-position:center bottom，cover 在 0.5~2.5 寬高比視窗都能無痛安全顯示
   ============================================================ */
.idx-video-01{ position: relative; width: 100%; height: 100vh; min-height: 540px; overflow: hidden; background: transparent; }
.idx-video-01 .bg-video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.idx-video-01 .video-mask{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; z-index: 2; }

/* ============================================================
   首頁 #idx_video_02 — 滿版影片 (無遮罩)
   ============================================================ */
.idx-video-02{ position: relative; width: 100%; height: 100vh; min-height: 480px; overflow: hidden; background: #000; }
.idx-video-02 .bg-video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ============================================================
   首頁 #idx_intro — 4 個 pill 圖交錯左右、scroll scrub 移動
   ⬇ 完全分開：手機 = 預設 (沒 media query)、PC = @media min-width 1025
   ============================================================ */

/* ===== Mobile (預設) ===== */
.idx-intro{ position: relative; width: 100%; overflow: hidden; padding: 80px 0 100px; }
.idx-intro .intro-row{ position: relative; display: flex; align-items: center; margin: 0 0 30px 0; }
.idx-intro .intro-row:last-child{ margin-bottom: 0; }
.idx-intro .intro-pill{ display: block; height: 130px; width: auto; max-width: none; will-change: transform, opacity; transform-origin: center center; }

/* 手機 per-pill：照規格的對齊 + padding 秀出對應文字 */
.idx-intro .intro-row:nth-child(1){ justify-content: flex-end;   padding-right: 30px; }  /* pill 1: label 右、離右 30px */
.idx-intro .intro-row:nth-child(2){ justify-content: flex-start; padding-left:  50px; }  /* pill 2: label 左、離左 50px */
.idx-intro .intro-row:nth-child(3){ justify-content: flex-start; padding-left:  0;    }  /* pill 3: 中文完整、label 超出右側 */
.idx-intro .intro-row:nth-child(3) .intro-pill{ margin-left: -240px; }                    /* pill 3 微往左推 60px，label 右側露多一點 */
.idx-intro .intro-row:nth-child(4){ justify-content: flex-start; padding-left:  50px; }  /* pill 4: label 左、離左 50px */


/* ============================================================
   首頁 #idx_txt — 中英對照引言區塊，逐行點亮
   Mobile (base): 文字靠左 + 左側分隔線 + 引號靠左
   PC: 兩欄 (英右對齊 / 中左對齊) + 中央分隔線 + 引號置中
   ============================================================ */
.idx-txt{ position: relative; width: 100%; padding: 80px 20px 100px; overflow: hidden; }
.idx-txt .txt-inner{ position: relative; width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 0 40px 18px; }

/* 引號 SVG (上下都 110px 寬) — 手機 base 靠左、酒紅 */
.idx-txt .txt-icon{ display: block; width: 110px; height: auto; }
.idx-txt .txt-icon--top{ margin: 0 0 30px 0; }
.idx-txt .txt-icon--bottom{ margin: 30px 0 0 0; }

/* 手機分隔線：左側垂直、酒紅，跨整段 txt-inner 高 */
.idx-txt .txt-divider{ display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--gs-primary) 0%, var(--gs-primary) 75%, #C8C8C8 100%); }

/* 文字共通 */
.idx-txt .txt-col{ width: 100%; }
.idx-txt .txt-line{ margin: 0; line-height: 1.4; color: #E0E0E0; transition: color .3s ease; }
.idx-txt .txt-line span{ display: inline-block; }
.idx-txt .txt-line.is-blank{ height: .8em; }

/* 英文：Bronova bold；mobile 字級改用 clamp 隨視窗寬度縮放 (窄機自動變小)，
   並移除 white-space: nowrap → 極窄機時可自動換行，避免長句 "The funeral industry is a service" 被 overflow 裁切 */
.idx-txt .txt-col--en .txt-line{ font-family: 'Bronova','PingFang TC','Helvetica',sans-serif; font-size: clamp(1.5rem, 4.6vw, 2rem); font-weight: 700; letter-spacing: 0; line-height: 1.4; text-align: left; white-space: normal; overflow-wrap: break-word; }

/* 中文：PingFang TC；所有中文（含內文與標題）統一字級 2.8rem (跟標題一樣大) */
.idx-txt .txt-col--zh .txt-line{ font-family: 'PingFang TC','蘋方-繁','Noto Sans TC','Microsoft JhengHei',sans-serif; font-size: 2.8rem; font-weight: 700; letter-spacing: 0.5px; line-height: 1.4; text-align: left; white-space: nowrap; }
.idx-txt .txt-col--zh .txt-line.is-title{ font-size: 2.8rem; color: #E0E0E0; line-height: 1.35; }

/* 點亮狀態：英文 → 深灰；中文 (含內文與標題) → 全部酒紅 */
.idx-txt .txt-col--en .txt-line.is-active{ color: #3A3A3A; }
.idx-txt .txt-col--zh .txt-line.is-active{ color: var(--gs-primary); }

/* 手機 (base)：單欄、中文先、英文後 (中文在上、之間 1em 空白) */
.idx-txt .txt-col--en{ margin-top: 30px; }


/* ============================================================
   首頁 #idx_service — 終極生命事業整合服務
   Mobile (base): 標題垂直堆疊 (小膠囊→中文標→副標→大英文→大CTA)、3 卡 zigzag
   PC (XD 1920×868): 左側標題塊 (約 700px) + logo 雲朵背景，右側 3 卡 zigzag + 對角線
   ============================================================ */
.idx-service{ position: relative; width: 100%; padding: 0 20px 100px; overflow-x: clip; }
.idx-service .service-inner{ position: relative; width: 100%; max-width: 1400px; margin: 0 auto; }

/* ---------- 標題區：直接用 XD 匯出 SVG ----------
   Mobile (idx_service_tit_m.svg)  352.651 × 511.201；CTA 位於 viewBox (7.4, 441.6) 186.7×69.6
   PC     (idx_service_tit.svg)    818.737 × 755.508；CTA 位於 viewBox (194, 632) 235×87.7    */
.idx-service .service-head{ position: relative; text-align: center; margin: 0 auto 60px; max-width: 352.651px; }

.idx-service .service-tit{ display: none; width: 100%; height: auto; }
.idx-service .service-tit--m{ display: block; }

/* CTA 透明點擊區 (mobile) */
.idx-service .service-cta-hit{
	position: absolute;
	left: 2.1%; top: 86.4%;
	width: 52.9%; height: 13.6%;
	z-index: 2;
	border-radius: 999px;
}
.idx-service .service-cta-hit:focus-visible{ outline: 2px solid var(--gs-primary); outline-offset: 4px; }

/* ---------- 服務卡片列表 (Mobile: 完整對齊 XD 390 wide spec，用 vw 等比縮放)
   XD canvas 390 寬 (更新 6/8 16:57)：
   - 圓圖 332×332    @ left:29  → width:85.1vw left:7.4vw
   - 標題 164×82     @ left:15  → width:42.05vw left:3.85vw, PingFang Medium 30px 酒紅 (letter 1.5 / line 40)
   - 描述 201×150    @ left:174 → width:51.5vw left:44.6vw, PingFang Regular 22px #535353 (letter 1.1 / line 40)
   - Line 40 mobile 295×295 @ (15, Card 1 top + 283) → width:75.6vw left:3.85vw top:72.5vw
   ---------- */
.idx-service .service-list{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column;
	gap: 33vw;   /* Card-to-Card gap (line 高 75.6vw 加上文字區後留 ~33vw 給下一張卡) */
}
.idx-service .service-item{
	position: relative;
	width: 100%;
	max-width: none;
	display: block;
}

/* 圓形縮圖：絕對 XD spec 332×332 @ (29, 0 from card top) */
.idx-service .service-thumb{
	display: block;
	margin: 0 auto;
	width: 85.1vw;
	height: 85.1vw;
	max-width: 332px;
	max-height: 332px;
	aspect-ratio: 1 / 1;
	border-radius: 50%; overflow: hidden;
	background: #e7e3e0;
	position: relative;
	z-index: 1;
}
.idx-service .service-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.idx-service .service-item:hover .service-thumb img{ transform: scale(1.05); }

/* 對角線：3 張卡都加 ::after，從圓圖右下延伸往左下 */
.idx-service .service-item::after{
	content: '';
	position: absolute;
	left: 7.85vw;
	top: 55vw;
	width: 75.6vw;
	height: 75.6vw;
	background: url('../images/idx_service_line01.svg') no-repeat center/contain;
	opacity: .55;
	pointer-events: none;
	z-index: 0;
	transition: opacity 1.5s ease-out;
}
/* GSAP scroll 進場：JS 加 .lines-off 在 #idx_service → 所有線 opacity 0；移除 → 1.5s 漸入 */
.idx-service.lines-off .service-item::after{ opacity: 0; }

/* 文字區：title 跟 desc 用絕對位置鎖在 XD spec
   service-info 當 relative 容器，title + desc 各自 absolute */
.idx-service .service-info{
	position: relative;
	display: block;
	margin: 7vw 0 0;        /* 28/390 ≈ 7vw 距圓圖底部 (XD title top 4219 - circle bottom 4191 = 28) */
	padding: 0;
	width: 100%;
	max-width: none;
	height: 38.5vw;          /* 描述高度 150/390 ≈ 38.46vw */
	z-index: 1;
}
.idx-service .service-name{
	position: absolute;
	left: -0.15vw;
	bottom: 23.4vw;
	width: 42.05vw;
	margin: 0; padding: 0;
	color: var(--gs-primary);
	font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
	font-size: 7.69vw;        /* 30/390 = 7.69vw */
	font-weight: 500;
	line-height: 1.333;       /* 40/30 = 1.333 */
	letter-spacing: 0.385vw;  /* 1.5/390 = 0.385vw */
	white-space: nowrap;
}
.idx-service .service-name::after{ display: none; }
.idx-service .service-desc{
	position: absolute;
	left: 35.6vw;
	top: 50px;
	bottom: auto;
	width: 55vw;
	margin: 0; padding: 0;
	color: #535353;
	font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
	font-size: 4.7vw;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.2vw;
}

/* 限制過大的視窗 (tablet 用了 mobile 但 vw 太大時，鎖死 px) */
@media (min-width: 480px) and (max-width: 1024px){
	.idx-service .service-thumb{ width: 332px; height: 332px; }
	.idx-service .service-info{ height: 150px; margin-top: 28px; max-width: 390px; margin-left: auto; margin-right: auto; }
	.idx-service .service-name{
		font-size: 30px; left: 15px; width: 164px; bottom: 68px;
		letter-spacing: 1.5px; line-height: 40px;
	}
	.idx-service .service-desc{
		font-size: 16px; left: 174px; right: auto; top: 59px; bottom: auto; width: 201px;
		letter-spacing: 0.8px; line-height: 23px;
	}
	.idx-service .service-item::after{ left: 15px; top: 283px; width: 295px; height: 295px; }
	.idx-service .service-list{ gap: 130px; }
}


/* ===== PC override (min-width: 1025px) =====
   XD 1920×868 規格：
   - 容器 max 1700、左邊距 60
   - 標題塊：左上絕對定位，寬度 ~700px
     - 小膠囊 (top:0)
     - 中文標 36px (top:60)
     - 副標 16px letter-spacing 0.3em (top:130)
     - 大英文 60px Bronova Bold 3 行 (top:175)
     - 大 CTA (top:430)
     - 背景 logo 雲朵 ~600×600 居中淡入
   - 右側卡片：
     - Card 1 右上 650 圓
     - Card 2 中段左偏 650 圓 (對角線穿過)
     - Card 3 右下 340 小圓
   =================================================== */
@media (min-width: 1025px){
	/* === Reset mobile vw 規則對 PC 的污染 === */
	.idx-service .service-thumb{ max-height: none; height: auto; }
	.idx-service .service-info{ position: static; height: auto; display: block; }
	.idx-service .service-name{ bottom: auto; height: auto; }
	.idx-service .service-desc{ bottom: auto; height: auto; }
	.idx-service .service-item::after{ display: none !important; content: none; }

	.idx-service{ padding: 250px 60px 0px; }
	.idx-service .service-inner{ position: relative; max-width: 1700px; margin: 0 auto; min-height: 2400px; }

	/* 標題區：SVG 左上角對應 XD canvas (234, 4257) = cloud Path 35 位置
	   → service-inner X = 234-110 = 124
	   → service-list top = 4257-4491 = -234 (突出 section top 234px)
	   SVG 自然寬 818.737；max-width 保留 904 給右邊 Card 1 */
	.idx-service .service-head{
		position: absolute;
		left: 124px; top: -234px;
		text-align: left; margin: 0;
		width: 818.737px;
		max-width: calc(100% - 904px);
		z-index: 2;
	}
	.idx-service .service-tit--m{ display: none; }
	.idx-service .service-tit--pc{ display: block; width: 100%; height: auto; }

	/* CTA 透明點擊區 (PC: 23.7%, 83.6%, 28.7% × 11.6% of SVG) */
	.idx-service .service-cta-hit{
		left: 23.7%; top: 83.6%;
		width: 28.7%; height: 11.6%;
	}

	/* ---------- 卡片列表 PC 版 ---------- */
	/* Line 40 (Card 1→2): XD 1293×1293 @ canvas (404.5, 4843.54) → service-inner X 294.5
	   改用 right 錨點 (= 1700 − 1293 − 295 = 112)，讓線跟著 Card 1 (right:80) 一起左移 */
	.idx-service .service-list{ position: relative; list-style: none; padding: 0; margin: 0; display: block; min-height: 2200px; }
	/* GSAP 進場：#idx_service 加 .lines-off → 兩條線 opacity 0；移除 → 1.5s 漸入 */
	.idx-service .service-list::before,
	.idx-service .service-list::after{ transition: opacity 1.5s ease-out; }
	.idx-service.lines-off .service-list::before,
	.idx-service.lines-off .service-list::after{ opacity: 0; }
	.idx-service .service-list::before{
		content: '';
		position: absolute;
		right: 112px; top: 352px;
		width: 1293px; height: 1293px;
		background: url('../images/idx_service_line01.svg') no-repeat center/contain;
		opacity: .55;
		pointer-events: none;
		z-index: 0;
	}

	/* 3 張卡 — absolute zigzag */
	.idx-service .service-item{ position: absolute; max-width: none; align-items: flex-start; z-index: 1; }

	/* Card 1：右上 — XD Group 796 = 670×878.5
	   - Circle 600×600  @ (45,25) within group
	   - Title 273×130   @ (0,653)   — PingFang Medium 50/60 letter-spacing 2.5px 酒紅
	   - Desc  373×101   @ (271,783) — PingFang Regular 24/34 letter-spacing 2.4px 深灰
	   ================================================================ */
	.idx-service .service-item:nth-child(1){
		position: absolute;
		top: 0; right: 80px; left: auto;
		width: 670px; height: 880px;
		display: block;
		max-width: none;
		align-items: stretch;
	}
	.idx-service .service-item:nth-child(1) .service-info{ display: contents; }
	.idx-service .service-item:nth-child(1) .service-thumb{
		position: absolute; top: 25px; left: 45px;
		width: 600px; height: 600px;
		max-width: none; margin: 0; aspect-ratio: auto;
	}
	.idx-service .service-item:nth-child(1) .service-name{
		position: absolute; top: 653px; left: 0;
		width: auto;
		white-space: nowrap;
		margin: 0; padding: 0;
		color: var(--gs-primary);
		font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
		font-size: 5rem; font-weight: 500;
		line-height: 1.2; letter-spacing: 2.5px;
	}
	.idx-service .service-item:nth-child(1) .service-name::after{ display: none; }
	.idx-service .service-item:nth-child(1) .service-desc{
		position: absolute; top: 783px; left: 271px;
		width: 373px;
		margin: 0; padding: 0;
		color: #535353;
		font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
		font-size: 2.4rem; font-weight: 400;
		line-height: 1.42; letter-spacing: 2.4px;
	}

	/* ---------- Card 2: 661×926 @ canvas (332.75, 5248.08) → left 222.75
	   - Circle 600 @ (61, 0)
	   - Title  208×130 @ (0, 626.5)   PingFang Medium 50/60/2.5px 酒紅
	   - Desc   390×169 @ (221, 756.5) PingFang Regular 24/34/2.4px 深灰
	   ---------- */
	.idx-service .service-item:nth-child(2){
		position: absolute;
		top: 757px;
		left: auto; right: 816.25px;  /* = 1700 − 222.75 − 661，跟 Card 1/3 同樣 right 錨點 */
		width: 661px; height: 926px;
		display: block;
		max-width: none;
		align-items: stretch;
	}
	.idx-service .service-item:nth-child(2) .service-info{ display: contents; }
	.idx-service .service-item:nth-child(2) .service-thumb{
		position: absolute; top: 0; left: 61px;
		width: 600px; height: 600px;
		max-width: none; margin: 0; aspect-ratio: auto;
	}
	.idx-service .service-item:nth-child(2) .service-name{
		position: absolute; top: 627px; left: 0;
		width: auto;
		white-space: nowrap;
		margin: 0; padding: 0;
		color: var(--gs-primary);
		font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
		font-size: 5rem; font-weight: 500;
		line-height: 1.2; letter-spacing: 2.5px;
	}
	.idx-service .service-item:nth-child(2) .service-name::after{ display: none; }
	.idx-service .service-item:nth-child(2) .service-desc{
		position: absolute; top: 757px; left: 221px;
		width: 390px;
		margin: 0; padding: 0;
		color: #535353;
		font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
		font-size: 2.4rem; font-weight: 400;
		line-height: 1.42; letter-spacing: 2.4px;
	}

	/* ---------- Card 3: 858×814 @ canvas (841.75, 5801.32) → right 110.75
	   - Circle 600 @ (257.5, 0)
	   - Title  208×130 @ (0, 606.3)
	   - Desc   401×67  @ (218, 746.3)
	   ---------- */
	.idx-service .service-item:nth-child(3){
		position: absolute;
		top: 1310px; right: 111px; left: auto;
		width: 858px; height: 814px;
		display: block;
		max-width: none;
		align-items: stretch;
	}
	.idx-service .service-item:nth-child(3) .service-info{ display: contents; }
	.idx-service .service-item:nth-child(3) .service-thumb{
		position: absolute; top: 0; left: 258px;
		width: 600px; height: 600px;
		max-width: none; margin: 0; aspect-ratio: auto;
	}
	.idx-service .service-item:nth-child(3) .service-name{
		position: absolute; top: 606px; left: 0;
		width: auto;
		white-space: nowrap;
		margin: 0; padding: 0;
		color: var(--gs-primary);
		font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
		font-size: 5rem; font-weight: 500;
		line-height: 1.2; letter-spacing: 2.5px;
	}
	.idx-service .service-item:nth-child(3) .service-name::after{ display: none; }
	.idx-service .service-item:nth-child(3) .service-desc{
		position: absolute; top: 746px; left: 218px;
		width: 401px;
		margin: 0; padding: 0;
		color: #535353;
		font-family: 'PingFang TC','蘋方-繁','Microsoft JhengHei',sans-serif;
		font-size: 2.4rem; font-weight: 400;
		line-height: 1.42; letter-spacing: 2.4px;
	}

	/* ---------- 第二條對角線 Line 39 (Card 2→3): 417×417 @ canvas (867.5, 6306.69)
	   改用 right 錨點 (= 1700 − 417 − 757.5 = 525.5)，跟著 Card 3 (right:111) 一起左移 */
	.idx-service .service-list::after{
		content: '';
		position: absolute;
		right: 525.5px; top: 1816px;
		width: 417px; height: 417px;
		background: url('../images/idx_service_line01.svg') no-repeat center/contain;
		opacity: .55;
		pointer-events: none;
		z-index: 0;
	}
}


/* ===== PC override (min-width: 1025px) ===== */
@media (min-width: 1025px){
	.idx-intro{ padding: 160px 150px 200px; }
	/* PC pill 固定 200px 高 */
	.idx-intro .intro-pill{ height: 200px; max-width: 100%; }
	/* Reset：避免被 mobile margin/padding 影響 */
	.idx-intro .intro-row{ margin: 0; padding: 0; }

	/* PC per-pill：所有 row 垂直 gap 統一 30px；水平 padding 變化 + xPercent 終點變化做交錯感 */
	.idx-intro .intro-row:nth-child(1){ justify-content: flex-start; padding: 0;                margin-bottom: 30px; }
	.idx-intro .intro-row:nth-child(2){ justify-content: flex-end;   padding: 0 0 0 140px;      margin-bottom: 30px; }
	.idx-intro .intro-row:nth-child(3){ justify-content: flex-start; padding: 0 180px 0 0;      margin-bottom: 30px; }
	.idx-intro .intro-row:nth-child(4){ justify-content: flex-end;   padding: 0 0 0 70px;       margin-bottom: 0;    }

	/* ---------- #idx_txt PC 兩欄版面 (flex，分隔線中央、引號置中) ---------- */
	.idx-txt{ padding: 140px 60px 160px; }

	/* 引號改回置中 (覆蓋手機 base 的靠左) */
	.idx-txt .txt-icon{ width: 110px; margin: 0 auto; position: relative; left: auto; }
	.idx-txt .txt-icon--top{ margin: 0 auto 60px; }
	.idx-txt .txt-icon--bottom{ margin: 60px auto 0; }

	.idx-txt .txt-inner{ max-width: 1500px; padding: 0; display: flex; align-items: stretch; justify-content: center; gap: 30px; }

	/* 用 CSS order：英文左 (1)、分隔線中 (2)、中文右 (3) */
	.idx-txt .txt-col--en{ order: 1; margin-top: 0; }
	.idx-txt .txt-divider{ order: 2; position: static; display: block; flex: 0 0 1px; width: 1px; background: linear-gradient(to bottom, var(--gs-primary) 0%, var(--gs-primary) 30%, #C8C8C8 100%); }
	.idx-txt .txt-col--zh{ order: 3; }

	.idx-txt .txt-col{ flex: 1 1 0; min-width: 0; }

	/* 英文欄：靠右對齊、Bronova Bold 44px (依 XD 規格 6rem 微縮以容納 "transformations brought about") */
	.idx-txt .txt-col--en .txt-line{ text-align: right; font-size: 4.4rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

	/* 中文欄：靠左對齊；所有中文統一 5rem (50px) 同標題大小、bold */
	.idx-txt .txt-col--zh .txt-line{ text-align: left; font-size: 5rem; font-weight: 700; line-height: 1.35; letter-spacing: 1px; white-space: nowrap; }
	.idx-txt .txt-col--zh .txt-line.is-title{ font-size: 5rem; line-height: 1.3; }
}


/* ============================================================
   首頁 #idx_8big — 八大版圖互動區
   - Mobile (base): 隱藏 (PC 跟手機內容不同，手機之後再做)
   - PC: 八角形 + 外圍兩層旋轉文字環 + 中央 hover 詳細
   ============================================================ */
.idx-8big{
	display: block;
	position: relative;
	width: 100%;
	overflow-x: clip;
}

/* ============================================================
   Mobile (base，< 1025px)：八大版圖 emblem + 8 張輪播
   ============================================================ */
.idx-8big{
	padding: 70px 5vw 70px;
}

/* PC 互動 stage 在手機隱藏 */
.idx-8big .big8-inner > .big8-stage{ display: none; }

/* 通用旋轉 keyframes (mobile 與 PC 都用)
   translateY(-50%) 用來讓「top: X」定錨在圈圈的『垂直中心』，
   所以 mobile/PC 只要改 top + width 即可，旋轉動畫共用 */
@keyframes big8RotateL{
	from{ transform: translateY(-50%) rotate(0deg); }
	to  { transform: translateY(-50%) rotate(-360deg); }
}
@keyframes big8RotateR{
	from{ transform: translateY(-50%) rotate(0deg); }
	to  { transform: translateY(-50%) rotate(360deg); }
}

/* PC 用的 .big8-circle (大環繞 octagon stage) 在手機隱藏；
   手機改用 .big8-m-circle (定義在上方) 圍繞 emblem */
.idx-8big > .big8-circle{ display: none; }

/* 手機版 inner：用一般 block 排版 (不 flex)，避免 .big8-m / .big8-m-top 被擠成內容寬度 */
.idx-8big .big8-inner{
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}
.idx-8big .big8-m{
	width: 100%;
	display: block;
}

/* ============================================================
   手機版頂部包裝盒 (.big8-m-top)
   - 固定高度，內部用 absolute 將 emblem + 兩側 circle 垂直中心對齊
   ============================================================ */
.idx-8big .big8-m-top{
	position: relative;
	width: 100%;
	height: 52vw;          /* 縮短，emblem 48vw + 些微 padding */
	max-height: 240px;
	margin: 0 auto 0;      /* 拿掉底 margin，輪播緊貼上來 */
	overflow: visible;
}

/* 中央 emblem：絕對置中 */
.idx-8big .big8-m-emblem{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48vw;
	max-width: 230px;
	height: auto;
	z-index: 2;
	user-select: none;
}

/* 手機專屬旋轉文字環 (與 PC 的 .big8-circle 分開兩套 DOM，便於各自定位) */
.idx-8big .big8-m-circle{
	position: absolute;
	top: 50%;
	width: 55vw;
	height: auto;
	transform: translateY(-50%);
	transform-origin: center center;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	opacity: 0; /* GSAP scroll-in 控制淡入 */
	will-change: transform;
}
.idx-8big .big8-m-circle--l{
	left: calc(-40vw + 20px);  /* 比 -40vw 往內 20px */
	animation: big8RotateL 45s linear infinite;
}
.idx-8big .big8-m-circle--r{
	right: calc(-40vw + 20px);
	animation: big8RotateR 40s linear infinite;
}

/* Carousel viewport：橫向 scroll-snap，隱藏 scrollbar */
.idx-8big .big8-m-viewport{
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.idx-8big .big8-m-viewport::-webkit-scrollbar{ display: none; }

.idx-8big .big8-m-track{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
}

.idx-8big .big8-m-slide{
	flex: 0 0 100%;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 5vw; /* 縮 padding 讓圖變大 (~90vw 寬) */
	box-sizing: border-box;
}
.idx-8big .big8-m-slide-link{
	display: block;
	width: 100%;
	max-width: 440px;
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.idx-8big .big8-m-slide img{
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
	user-select: none;
}

/* Pagination dots */
.idx-8big .big8-m-dots{
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.idx-8big .big8-m-dot{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #c8c8c8;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}
.idx-8big .big8-m-dot.is-active{
	background: #5D0A29;
	transform: scale(1.15);
}

@media (min-width: 1025px){
	.idx-8big{
		padding: 140px 60px 200px;
	}
	/* PC：隱藏手機 carousel、顯示 PC 互動 octagon 與大環 */
	.idx-8big .big8-m{ display: none; }
	.idx-8big .big8-inner > .big8-stage{ display: block; }
	.idx-8big > .big8-circle{ display: block; }
	.idx-8big .big8-m-circle{ display: none; }

	.idx-8big .big8-inner{
		position: relative;
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		aspect-ratio: 1 / 1;
	}

	/* 八角形互動主舞台 — 填滿 inner */
	.idx-8big .big8-stage{
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1;
		z-index: 2;
	}

	/* ============================================================
	   兩側裝飾文字環 (idx_8big_circle01 / 02.svg)
	   - 絕對定位於 section (.idx-8big)，黏在「視窗左右兩邊」
	   - 寬度 28vw (max 410px)，靠左/右 -10vw 推出視窗邊緣
	   - 垂直置中於 section
	   - 旋轉：左 CCW 45s / 右 CW 40s (linear infinite，永遠不停)
	   - 預設 opacity 0，由 GSAP scroll 觸發淡入
	   ============================================================ */
	.idx-8big .big8-circle{
		position: absolute;
		top: 50%;
		width: 28vw;
		max-width: 410px;
		height: auto;
		transform: translateY(-50%);
		transform-origin: center center;
		pointer-events: none;
		user-select: none;
		z-index: 1;
		opacity: 0; /* GSAP scroll-in fades to 1 */
		will-change: transform;
	}
	.idx-8big .big8-circle--l{
		left: -10vw;
		animation: big8RotateL 45s linear infinite;
	}
	.idx-8big .big8-circle--r{
		right: -10vw;
		animation: big8RotateR 40s linear infinite;
	}
	/* keyframes 已搬到外層 base，PC + mobile 共用 */

	/* 底層：外圈文字環 inline SVG (寬 1000) 填滿整個 stage */
	.idx-8big .big8-bg--txt{
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		user-select: none;
		display: block;
	}

	/* 外圈標籤 active 高亮：
	   - 實心 badge (大圓): 灰 → 酒紅
	   - 外框 ring-outline: 灰 → 酒紅 (內部白底維持白色)
	   - 文字/tspan：原本是灰色 #535353 的字 → 酒紅 (原本是白色的維持白色)
	   - 用 [fill="#535353"] 屬性選擇器去鎖只變灰色那個字，因為每個 group 灰/白是互換的
	*/
	/* 顏色 transition (灰↔酒紅 漸變)
	   - 0.55s ease-in-out → 比 hover/切換更慢，明顯感受得到顏色淡入
	   - 包括 text 跟內層 tspan，避免任何元件硬切 */
	.idx-8big .big8-bg--txt .big8-txt-grp circle,
	.idx-8big .big8-bg--txt .big8-txt-grp ellipse,
	.idx-8big .big8-bg--txt .big8-txt-grp path,
	.idx-8big .big8-bg--txt .big8-txt-grp text,
	.idx-8big .big8-bg--txt .big8-txt-grp tspan{
		transition: fill 0.55s ease-in-out;
	}

	/* 強制 .big8-txt-ring (白底圓 g) 永遠白色，避免任何繼承/CSS 影響 */
	.idx-8big .big8-bg--txt .big8-txt-ring,
	.idx-8big .big8-bg--txt .big8-txt-ring > path:not(.big8-txt-ring-outline){
		fill: #fff !important;
	}

	/* badge (實心圓) + outline (外框線) 變酒紅 */
	.idx-8big .big8-stage[data-seg="1"] .big8-bg--txt .big8-txt-grp[data-seg="1"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="2"] .big8-bg--txt .big8-txt-grp[data-seg="2"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="3"] .big8-bg--txt .big8-txt-grp[data-seg="3"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="4"] .big8-bg--txt .big8-txt-grp[data-seg="4"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="5"] .big8-bg--txt .big8-txt-grp[data-seg="5"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="6"] .big8-bg--txt .big8-txt-grp[data-seg="6"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="7"] .big8-bg--txt .big8-txt-grp[data-seg="7"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="8"] .big8-bg--txt .big8-txt-grp[data-seg="8"] .big8-txt-badge,
	.idx-8big .big8-stage[data-seg="1"] .big8-bg--txt .big8-txt-grp[data-seg="1"] .big8-txt-ring-outline,
	.idx-8big .big8-stage[data-seg="2"] .big8-bg--txt .big8-txt-grp[data-seg="2"] .big8-txt-ring-outline,
	.idx-8big .big8-stage[data-seg="3"] .big8-bg--txt .big8-txt-grp[data-seg="3"] .big8-txt-ring-outline,
	.idx-8big .big8-stage[data-seg="4"] .big8-bg--txt .big8-txt-grp[data-seg="4"] .big8-txt-ring-outline,
	.idx-8big .big8-stage[data-seg="5"] .big8-bg--txt .big8-txt-grp[data-seg="5"] .big8-txt-ring-outline,
	.idx-8big .big8-stage[data-seg="6"] .big8-bg--txt .big8-txt-grp[data-seg="6"] .big8-txt-ring-outline,
	.idx-8big .big8-stage[data-seg="7"] .big8-bg--txt .big8-txt-grp[data-seg="7"] .big8-txt-ring-outline,
	.idx-8big .big8-stage[data-seg="8"] .big8-bg--txt .big8-txt-grp[data-seg="8"] .big8-txt-ring-outline{
		fill: #5D0A29 !important; /* 酒紅 */
	}

	/* 文字/tspan：原本是灰色 #535353 的字才變酒紅 (白色字繼續白色) */
	.idx-8big .big8-stage[data-seg="1"] .big8-bg--txt .big8-txt-grp[data-seg="1"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="2"] .big8-bg--txt .big8-txt-grp[data-seg="2"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="3"] .big8-bg--txt .big8-txt-grp[data-seg="3"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="4"] .big8-bg--txt .big8-txt-grp[data-seg="4"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="5"] .big8-bg--txt .big8-txt-grp[data-seg="5"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="6"] .big8-bg--txt .big8-txt-grp[data-seg="6"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="7"] .big8-bg--txt .big8-txt-grp[data-seg="7"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="8"] .big8-bg--txt .big8-txt-grp[data-seg="8"] .big8-txt-text[fill="#535353"],
	.idx-8big .big8-stage[data-seg="1"] .big8-bg--txt .big8-txt-grp[data-seg="1"] .big8-txt-tspan-fill[fill="#535353"],
	.idx-8big .big8-stage[data-seg="2"] .big8-bg--txt .big8-txt-grp[data-seg="2"] .big8-txt-tspan-fill[fill="#535353"],
	.idx-8big .big8-stage[data-seg="3"] .big8-bg--txt .big8-txt-grp[data-seg="3"] .big8-txt-tspan-fill[fill="#535353"],
	.idx-8big .big8-stage[data-seg="4"] .big8-bg--txt .big8-txt-grp[data-seg="4"] .big8-txt-tspan-fill[fill="#535353"],
	.idx-8big .big8-stage[data-seg="5"] .big8-bg--txt .big8-txt-grp[data-seg="5"] .big8-txt-tspan-fill[fill="#535353"],
	.idx-8big .big8-stage[data-seg="6"] .big8-bg--txt .big8-txt-grp[data-seg="6"] .big8-txt-tspan-fill[fill="#535353"],
	.idx-8big .big8-stage[data-seg="7"] .big8-bg--txt .big8-txt-grp[data-seg="7"] .big8-txt-tspan-fill[fill="#535353"],
	.idx-8big .big8-stage[data-seg="8"] .big8-bg--txt .big8-txt-grp[data-seg="8"] .big8-txt-tspan-fill[fill="#535353"]{
		fill: #5D0A29 !important;
	}

	/* 中層：八角形 bg01 (寬 774 / 1000 = 77.4%) 居中疊上
	   clip-path 依 .big8-stage[data-seg="N"] 切換 (見下方 8 塊規則)
	   切換效果：用 opacity fade 不做 clip-path morph (避免三角形看起來旋轉) */
	.idx-8big .big8-bg--color{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 77.4%;
		height: 77.4%;
		object-fit: contain;
		user-select: none;
		pointer-events: none;
		transition: opacity 0.25s ease-out; /* 三角形快 */
	}

	/* 8 塊揭示用 clip-path (順時針 1~8，segment 1 為起點，每塊 +45° CW) */
	.idx-8big .big8-stage[data-seg="1"] .big8-bg--color{ clip-path: polygon(28.6% -0.65%, 70.42% -0.65%, 70.42% 41.1%); }
	.idx-8big .big8-stage[data-seg="2"] .big8-bg--color{ clip-path: polygon(70.69% -0.95%, 100.25% 28.62%, 70.73% 58.15%); }
	.idx-8big .big8-stage[data-seg="3"] .big8-bg--color{ clip-path: polygon(100.65% 28.6%, 100.65% 70.42%, 58.9% 70.42%); }
	.idx-8big .big8-stage[data-seg="4"] .big8-bg--color{ clip-path: polygon(100.95% 70.69%, 71.38% 100.25%, 41.85% 70.73%); }
	.idx-8big .big8-stage[data-seg="5"] .big8-bg--color{ clip-path: polygon(71.4% 100.65%, 29.58% 100.65%, 29.58% 58.9%); }
	.idx-8big .big8-stage[data-seg="6"] .big8-bg--color{ clip-path: polygon(29.31% 100.95%, -0.25% 71.38%, 29.27% 41.85%); }
	.idx-8big .big8-stage[data-seg="7"] .big8-bg--color{ clip-path: polygon(-0.65% 71.4%, -0.65% 29.58%, 41.1% 29.58%); }
	.idx-8big .big8-stage[data-seg="8"] .big8-bg--color{ clip-path: polygon(-0.95% 29.31%, 28.62% -0.25%, 58.15% 29.27%); }

	/* 上層：灰色版 bg02 同位置同大小疊上 + Luminosity 混合
	   預設透明 (全彩狀態)，有 [data-seg] 才出現灰化效果 */
	.idx-8big .big8-bg--lum{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 77.4%;
		height: 77.4%;
		object-fit: contain;
		mix-blend-mode: luminosity;
		pointer-events: none;
		user-select: none;
		opacity: 0;
		transition: opacity 0.55s ease-out;
	}
	.idx-8big .big8-stage[data-seg] .big8-bg--lum{
		opacity: 1;
	}

	/* 中央 detail svg：雙層 cross-fade (a / b 兩個 img 互換)
	   - 預設 opacity 0；.is-current 那層顯示 opacity 1
	   - 寬度依各 img 自己的 src：00.svg → 22% / 0N.svg → 31.8%
	   - JS 在 hover 時把背景那層 (.not is-current) 換 src，再 toggle .is-current
	     → 同時新層淡入、舊層淡出，不會有「全暗一下」的閃爍
	   - .is-current 啟用 pointer-events 讓中央 detail 可點擊跳對應頁 */
	.idx-8big .big8-detail{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 31.8%; /* 預設 0N panel 寬 */
		height: auto;
		pointer-events: none; /* 預設不接收 click，由 .is-current 個別啟用 */
		user-select: none;
		z-index: 6;           /* 高於 bg01 (auto)，低於 hits (10) */
		opacity: 0;
		transition: opacity 0.55s ease-in-out;
		cursor: pointer;
	}
	.idx-8big .big8-detail.is-current{
		pointer-events: auto; /* 只有當前顯示的那層可點 */
	}
	.idx-8big .big8-detail[src$="_00.svg"]{
		width: 22%; /* 00 emblem 用較小寬度 */
	}
	.idx-8big .big8-detail.is-current{
		opacity: 1;
	}

	/* 切換中：三角形快速 fade out 到 0 (0.25s)
	   detail 已改用 .is-current cross-fade，不再吃 is-switching-det */
	.idx-8big .big8-stage.is-switching-tri .big8-bg--color{
		opacity: 0;
	}

	/* 8 個透明感應區 (跟 bg01 同大小同位置，再用各自 clip-path 切三角形) */
	.idx-8big .big8-hit{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 77.4%;
		height: 77.4%;
		cursor: pointer;
		z-index: 10;
		/* 純感應區，不顯示任何視覺 */
		background: transparent;
	}
	.idx-8big .big8-hit[data-seg="1"]{ clip-path: polygon(28.6% -0.65%, 70.42% -0.65%, 70.42% 41.1%); }
	.idx-8big .big8-hit[data-seg="2"]{ clip-path: polygon(70.69% -0.95%, 100.25% 28.62%, 70.73% 58.15%); }
	.idx-8big .big8-hit[data-seg="3"]{ clip-path: polygon(100.65% 28.6%, 100.65% 70.42%, 58.9% 70.42%); }
	.idx-8big .big8-hit[data-seg="4"]{ clip-path: polygon(100.95% 70.69%, 71.38% 100.25%, 41.85% 70.73%); }
	.idx-8big .big8-hit[data-seg="5"]{ clip-path: polygon(71.4% 100.65%, 29.58% 100.65%, 29.58% 58.9%); }
	.idx-8big .big8-hit[data-seg="6"]{ clip-path: polygon(29.31% 100.95%, -0.25% 71.38%, 29.27% 41.85%); }
	.idx-8big .big8-hit[data-seg="7"]{ clip-path: polygon(-0.65% 71.4%, -0.65% 29.58%, 41.1% 29.58%); }
	.idx-8big .big8-hit[data-seg="8"]{ clip-path: polygon(-0.95% 29.31%, 28.62% -0.25%, 58.15% 29.27%); }

}
/* .idx-top 已搬到 style.css 並改名為 .site-top，全站共用 */

/* 旋轉圈圈在 section 不在 viewport 時暫停動畫，省 GPU & 電量 (iOS Safari 友善) */
.idx-8big:not(.in-view) .big8-m-circle,
.idx-8big:not(.in-view) .big8-circle{ animation-play-state: paused; }