@charset 'utf-8';
/* ============================================================
   about.html 關於顧世頁專屬樣式
   命名規範：使用 .about-* prefix 避免與其他頁面樣式互相干擾
   結構：base = Mobile (XD 390×7561)，PC 寫在 @media (min-width:1025px) (XD 1920×4982)
   Mobile XD 實測：
   - GS GROUP 60px x27 y109 / Our Mission 35px ls-3.5px y237
   - 線條 10×160 x27 y289 / 創立宗旨 16px x57 / 大字 50px/60 ls2.5px x57 y319
   - 照片 438×456 x-16 y449（左右出血）
   - 按鈕膠囊 高67 x62、文字 23px ls13.8px、標籤在膠囊下方
   - intro 段落 22px/40 ls2.2px x15 w360 / 卡片 360 寬置中
   ============================================================ */

/* ---------- section 外框 ---------- */
.about-section{ position: relative; padding-bottom: 70px; }

/* PC 換行手機隱藏 */
.br-pc{ display: none; }

/* ---------- 共用元件：英文小標 / 標籤 / 大字（酒紅左線條） ---------- */
/* 英文小標：Bronova Bold 酒紅（XD 字距 -3.5px/35px = -.1em 緊排；PC -6px/60px 同比例） */
.about-subtit{ color: var(--gs-primary); font-family: 'Bronova','PingFang TC',sans-serif; font-size: 3.5rem; font-weight: 700; line-height: 1; letter-spacing: -.1em; }

/* 酒紅左線條框：標籤 + 大字（XD 線條 = 寬10 圓角膠囊條，mobile 高160 = 滿框） */
.about-box{ position: relative; margin-top: 17px; padding-left: 30px; }
.about-box::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--gs-primary); border-radius: 30px; }
/* 標籤（創立宗旨/創新基因/發展願景）：散字距灰字 (mobile 16px / PC 20px ls.5em) */
.about-label{ display: block; color: #535353; font-size: 1.6rem; font-weight: 400; letter-spacing: .5em; line-height: 1.4; }
/* 大字：PingFang Semibold 灰（mobile 50px/60 ls2.5px；PC 80px/90 ls4px） */
.about-big{ margin-top: 8px; color: #535353; font-size: min(5rem, 12.4vw); font-weight: 600; letter-spacing: .05em; line-height: 1.2; }

/* ---------- hero ---------- */
/* 高度 = 照片底 905 + 預留按鈕區 100（gray intro 由下方負 margin 疊上來） */
.about-hero{ position: relative; z-index: 1; padding: calc(var(--header-h-m) + 45px) 27px 100px; overflow: hidden; }
.about-hero-inner{ position: relative; }
/* GS GROUP：Bronova Bold 60px 酒紅 (x27 y109 w323 h60、字距 0) */
.about-title{ color: var(--gs-primary); font-family: 'Bronova','PingFang TC',sans-serif; font-size: min(6rem, 15vw); font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }
/* Our Mission y237（標題底 169 → 間距 68） */
.about-mission{ margin-top: 68px; }

/* 創辦人照片：左右出血 (438 寬 x-16 → 相對內距 27：左-43、右溢出) */
.about-photo{ width: calc(100% + 102px); max-width: none; margin: 0 0 0 -43px; }
.about-photo img{ width: 100%; height: auto; display: block; }

/* ---------- 創辦人的話按鈕 ----------
   膠囊+尾勾+播放鈕 = about_btn02.svg（曲線與 about_btn01.svg 完全一致）
   mobile：膠囊寬 279（XD x62 y898）、標籤 16px 在膠囊下方置中 */
.about-founder{ position: absolute; left: 35px; bottom: -86px; z-index: 2; display: flex; flex-direction: column; width: 279px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; }
.about-founder:hover{ opacity: .88; transition: opacity .25s ease; }
.about-founder:focus-visible{ outline: 2px solid var(--gs-primary); outline-offset: 4px; border-radius: 8px; }
.founder-pill-img{ order: 1; width: 100%; height: auto; display: block; }
/* 標籤：mobile 在膠囊下方置中 */
.founder-label{ order: 2; margin-top: 10px; color: var(--gs-primary); font-size: 1.6rem; letter-spacing: 1.1em; line-height: 1; text-align: center; text-indent: 1.1em; white-space: nowrap; }

/* ---------- intro：灰底沿革段落（灰底上緣疊到照片下半 y775） ---------- */
.about-intro{ position: relative; z-index: 0; margin-top: -230px; padding: 255px 15px 55px; background: rgba(0,0,0,.035); }
.about-intro-inner p{ color: #535353; font-size: 2.2rem; font-weight: 400; letter-spacing: .1em; line-height: 1.82; }
.about-intro-inner p + p{ margin-top: 40px; }

/* ---------- Innovation DNA / Vision for the Future ---------- */
.about-block{ padding: 75px 15px 0; }
/* 手機：文字在上、圓圖在下（DOM 圖在前，用 flex order 反轉）；標題/線框與 hero 對齊內縮 12px */
.about-block-inner{ position: relative; display: flex; flex-direction: column; }
.about-block-body{ order: 1; }
.about-block-img{ order: 2; margin: 35px auto 0; width: min(340px, 88%); border-radius: 50%; overflow: hidden; }
.about-block-img img{ width: 100%; height: auto; display: block; }

/* 描述段落（mobile 22px/40 #535353；PC 20px #767676） */
.about-desc{ margin-top: 35px; }
.about-desc p{ color: #535353; font-size: 2.2rem; font-weight: 400; letter-spacing: .1em; line-height: 1.82; }
.about-desc p + p{ margin-top: 40px; }

/* ---------- 膠囊卡片（整卡圖片，PC/手機切換）360 寬置中 ---------- */
.about-cards{ margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 35px; }
.about-card{ width: min(360px, 100%); }
.about-card img{ width: 100%; height: auto; display: block; }
.about-card .card-pc{ display: none; }
.about-card .card-m{ display: block; }

/* ---------- 元件化卡片 .acard ----------
   mobile：沿用今天以前的整張合成圖（.acard-m），元件結構(.acard-inner)隱藏 */
.acard{ width: min(360px, 100%); }
.acard .acard-m{ display: block; width: 100%; height: auto; }
.acard .acard-inner{ display: none; }

/* ---------- Mobile 回到頂端 (top)：同 news 頁樣式 ---------- */
.about-top{ position: absolute; right: 14px; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; display: none; }
.about-top-line{ width: 1px; height: 46px; background: #9a9a9a; transform: rotate(30deg); transform-origin: bottom center; }
.about-top-txt{ color: #767676; font-size: 2rem; letter-spacing: 1px; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }




/* $Pc
--------------------------------------------------------------------------------------
   XD 1920×4982 實測座標（內容欄 max-width 1530，左右留 195）：
   hero：GS GROUP 200px/190 ls-10px x254 y244、Our Mission 60px ls-6px y534、
         線條 10×220 圓角30 x260 y614、創立宗旨 20px ls10px x312、大字 80px/90 ls4px x301 y650、
         按鈕 235×88 x990 y717、照片 732×762 x1123 y107 貼 hero 底（hero 高 868）
   intro：灰底 y866-1290、段落 20px/32 x312
   Innovation：圓圖 600 x265、標題 60px x960 y1605、大字 80px x1001 w500、描述 20px w500
   卡片：1200×200 整卡圖、左緣交錯 c1:371 c2:42 c3:204 c4:0 c5:315 c6:159（相對內容欄）
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

.about-section{ padding-bottom: 90px; }
.br-pc{ display: inline; }

/* ---------- 共用元件 ---------- */
.about-subtit{ font-size: 6rem; }
/* 線條 x260、標籤 x312 → padding 52；大字 x301 → 41 */
.about-box{ margin-top: 20px; padding-left: 41px; }
.about-box::before{ top: 2px; bottom: 2px; }
.about-label{ padding-left: 11px; font-size: 2rem; }
.about-big{ margin-top: 8px; font-size: 8rem; letter-spacing: 4px; line-height: 1.125; }

/* ---------- hero：高 868（透明 header 浮在上方）；照片絕對定位防外溢 ---------- */
.about-hero{ height: 868px; padding: 244px 60px 0; }
.about-hero-inner{ max-width: 1530px; height: 100%; margin: 0 auto; }
/* GS GROUP 200px/190 ls-10px x254 y244 → 內容欄 +59 */
.about-title{ margin-left: 59px; font-size: 20rem; line-height: .95; letter-spacing: -.05em; }
/* Our Mission 60px x260 y534（標題底 444 → 間距 90；內容欄 +65，
   讓 創立宗旨(x312)/大字(x301) 與 intro 段落(x312) 同一條對齊線） */
.about-mission{ margin-top: 90px; margin-left: 65px; }

/* 照片：XD x1123 y107 w732 h762（貼 hero 底）→ 相對內容欄 left:928 */
.about-photo{ position: absolute; left: 928px; bottom: 0; width: 732px; margin: 0; }

/* ---------- 按鈕：膠囊 XD x990 y717（235×88）；標籤在上 ----------
   XD 標籤(基線)疊進 svg 上緣空白帶（膠囊本體距 svg 頂 27.658）→ 負 margin 貼齊 */
.about-founder{ left: 795px; top: 470px; bottom: auto; width: 235px; }
.founder-label{ order: 0; position: relative; z-index: 1; margin: 0 0 -12px; font-size: 1.5rem; letter-spacing: 1.35em; text-indent: 0; text-align: left; padding-left: 23px; }

/* ---------- intro ---------- */
.about-intro{ margin-top: 0; padding: 75px 60px; }
.about-intro-inner{ max-width: 1530px; margin: 0 auto; padding-left: 117px; }
.about-intro-inner p{ font-size: 2rem; letter-spacing: .04em; line-height: 1.6; }
.about-intro-inner p + p{ margin-top: 30px; }

/* ---------- Innovation / Vision：圓圖 + 文字兩欄 ---------- */
.about-block{ padding: 110px 60px 0; }
.about-block-inner{ max-width: 1530px; margin: 0 auto; flex-direction: row; align-items: center; }
/* Innovation：圓圖左 (x265 → 內容欄 70)、文字右 (x960 → 765) */
.about-block-img{ order: 0; width: 600px; margin: 0 0 0 70px; flex: none; }
.about-block-body{ order: 0; width: 620px; margin-left: 95px; }
/* 描述段落與大字左緣切齊（XD desc x1001 = 大字 x1001）；
   斷行以 br-pc 固定 = XD 原稿，不靠寬度自動折行 */
.about-desc{ margin-top: 65px; max-width: none; padding-left: 41px; }
.about-desc p{ white-space: nowrap; }
.about-desc p{ color: #767676; font-size: 2rem; letter-spacing: .04em; line-height: 1.6; }
.about-desc p + p{ margin-top: 32px; }

/* Vision：圓圖右、文字左（鏡像） */
.about-vision .about-block-img{ order: 2; margin: 0 0 0 175px; }
.about-vision .about-block-body{ margin-left: 70px; }

/* ---------- 膠囊卡片：1200×200 交錯 ---------- */
.about-cards{ max-width: 1530px; margin: 100px auto 0; align-items: flex-start; gap: 50px; }
.about-card{ width: min(1200px, 79%); }
.about-card .card-pc{ display: block; }
.about-card .card-m{ display: none; }
/* 左緣交錯（XD 實測 c1:371 c2:42 c3:204 c4:0 c5:315 c6:159 / 1530） */
.card-1{ margin-left: 24.2%; }
.card-2{ margin-left: 2.7%; }
.card-3{ margin-left: 13.3%; }
.card-4{ margin-left: 0; }
.card-5{ margin-left: 20.6%; }
.card-6{ margin-left: 10.4%; }

/* ---------- 元件化卡片 .acard（PC：1200×200 橫向膠囊 + hover） ----------
   灰底 rgba(39,39,39,.05) → hover 轉白；英文 Color-Burn 疊在圓圖上、hover 淡出消失；
   hover 時中文小字於固定位置以跑馬燈進場 */
.acard{ width: min(1200px, 79%); }
.acard .acard-m{ display: none; }          /* PC 隱藏手機合成圖 */
.acard .acard-inner{
	position: relative; display: block;
	width: 100%; aspect-ratio: 6 / 1;
	border-radius: 100px; overflow: hidden;
	background: rgba(39,39,39,.05);
	transition: background .4s ease, box-shadow .4s ease;
}
.acard-inner:hover{ background: #ffffff; box-shadow: 0 18px 40px rgba(0,0,0,.08); }

/* 中文標題：左側、垂直置中 (XD ~40px Semibold #535353) */
.acard-zh{ position: absolute; z-index: 4; left: 5%; top: 50%; transform: translateY(-50%); margin: 0; color: #535353; font-size: 4rem; font-weight: 600; letter-spacing: .06em; line-height: 1; white-space: nowrap; }

/* 橢圓圖：靠右、佔卡高、寬 400/1200 = 33.3% */
.acard-photo{ position: absolute; z-index: 1; right: 0; top: 0; width: 33.34%; height: 100%; margin: 0; }
.acard-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* 英文標題：Bronova Bold 50px / 字距 -2.5px / 顏色 #535353 / 垂直置中；
   以圓圖中心為起點（右緣 ≈ 圓圖中心 83.3%）向左排出去；
   圖層混合模式 Color-Burn（XD 規格）疊在圖上；hover 時淡出消失 */
.acard-en{ position: absolute; z-index: 2; top: 0; right: calc(16.7% - 100px); left: auto; height: 100%; display: flex; align-items: center; color: #535353; font-family: 'Bronova','PingFang TC',sans-serif; font-size: clamp(2.2rem, 2.4vw, 4.7rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; white-space: nowrap; mix-blend-mode: color-burn; pointer-events: none; transition: opacity .4s ease; }
.acard-inner:hover .acard-en{ opacity: 0; }

/* 中文小字：固定視窗（標題與圓圖之間），hover 淡入；文字無縫連續跑馬燈、速度很慢可閱讀
   （參考 codepen israynotarray/qBKxMmW：track 內兩份相同文字，translateX 0 → -50% 無縫循環） */
/* 預設（正常卡、6 字標題 card-1/3）：跑馬燈填滿「標題右緣 ~ 圓圖左緣」空檔
   各卡再依標題長度/左右排列覆寫（見下方） */
.acard-marquee{ position: absolute; z-index: 3; top: 0; left: 28%; right: 35%; height: 100%; display: flex; align-items: center; overflow: hidden; opacity: 0; transition: opacity .5s ease; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%); }
/* 正常卡 4 字標題（card-5）：標題較短、起點更靠左 */
.card-5 .acard-marquee{ left: 21%; }
.acard-inner:hover .acard-marquee{ opacity: 1; }
.acard-marquee-track{ display: flex; flex: none; width: max-content; flex-wrap: nowrap; animation: acard-marq 50s linear .4s infinite; animation-play-state: paused; }
/* hover 才開始跑；開頭停 .4s 後無縫往左循環 */
.acard-inner:hover .acard-marquee-track{ animation-play-state: running; }
/* 兩份文字都要顯示（translateX -50% 無縫銜接）；flex:none 防止被 flex 容器壓縮導致位移錯亂 */
.acard-marquee-seg{ flex: none; display: block; padding-right: 90px; white-space: nowrap; color: #535353; font-size: 2.2rem; font-weight: 400; letter-spacing: .04em; line-height: 1; }
/* 較長的文字（卡 2 / 卡 4）拉長時間以維持相近的閱讀速度 */
.card-2 .acard-marquee-track,
.card-4 .acard-marquee-track{ animation-duration: 72s; }
/* 起點在容器右緣外、終點到左緣外：文字由右往左掃過 */
/* 無縫雙段循環：0 → -50%（恰一段寬），文字隨時可見、慢速連續 */
@keyframes acard-marq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .acard-marquee-track{ animation: none; } }

/* ---------- 鏡像卡（card-2 / card-4 / card-6）：圓圖在左、中文標題在右、英文由左側圓圖中心往右排 ---------- */
.card-2 .acard-photo, .card-4 .acard-photo, .card-6 .acard-photo{ right: auto; left: 0; }
.card-2 .acard-zh,    .card-4 .acard-zh,    .card-6 .acard-zh{ left: auto; right: 5%; }
.card-2 .acard-en,    .card-4 .acard-en,    .card-6 .acard-en{ right: auto; left: calc(16.7% - 100px); text-align: left; }
/* 鏡像卡：跑馬燈填滿「圓圖右緣 ~ 標題左緣」空檔，起點固定 35%（圓圖右緣後） */
.card-2 .acard-marquee, .card-4 .acard-marquee, .card-6 .acard-marquee{ left: 35%; }
/* 終點依標題長度：6 字（card-2）止於 73%；4 字（card-4/6）標題更靠右、可延伸到 80% */
.card-2 .acard-marquee{ right: 27%; }
.card-4 .acard-marquee, .card-6 .acard-marquee{ right: 20%; }

/* top 按鈕僅手機版顯示 */
.about-top{ display: none; }

}


/* ============================================================
   創辦人的話 影片燈箱（全螢幕 overlay + 16:9 影片 + 白色圓形 X）
   依 XD 互動原型：深色半透明遮罩、影片置中、右上白圓關閉鈕
   ============================================================ */
.video-modal{ position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.video-modal.is-open{ opacity: 1; visibility: visible; }

/* 遮罩 */
.video-modal-overlay{ position: absolute; inset: 0; background: rgba(30,28,30,.88); cursor: pointer; }

/* 影片容器：16:9、最大寬度、進場輕微放大 */
/* 寬度同時受視窗高度限制（167vh ≈ 16:9 換算），避免高螢幕外溢 */
.video-modal-dialog{ position: relative; width: min(1500px, 94vw, 167vh); transform: scale(.96); transition: transform .35s ease; }
.video-modal.is-open .video-modal-dialog{ transform: scale(1); }
.video-modal-frame{ position: relative; width: 100%; padding-top: 56.25%; background: #000; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.video-modal-player{ position: absolute; inset: 0; }
.video-modal-player iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* 白色圓形關閉鈕：影片右上角外側（z-index 高於 iframe 才能點擊） */
.video-modal-close{ position: absolute; z-index: 3; top: -22px; right: -22px; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--gs-white); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .25s ease, background .25s ease; }
.video-modal-close::before, .video-modal-close::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2.5px; background: #2b2b2b; border-radius: 2px; }
.video-modal-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.video-modal-close::after{  transform: translate(-50%,-50%) rotate(-45deg); }
.video-modal-close:hover{ transform: rotate(90deg); }
.video-modal-close:focus-visible{ outline: 2px solid var(--gs-primary); outline-offset: 3px; }

/* 開啟時鎖住背景捲動 */
body.modal-open{ overflow: hidden; }

/* 手機：X 鈕移到容器內右上、縮小邊距 */
@media screen and (max-width: 1024px){
	.video-modal{ padding: 20px; }
	.video-modal-dialog{ width: 100%; }
	.video-modal-close{ top: -56px; right: 0; width: 44px; height: 44px; }
	.video-modal-close::before, .video-modal-close::after{ width: 18px; }
}