@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(../fonts/style.css);
/* 1. 定義 Bronova 字體 */
@font-face { font-family: 'Bronova'; src: url('/fonts/fonts/Bronova-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Bronova'; src: url('/fonts/fonts/Bronova-Bold.woff') format('woff'); font-weight: bold; font-style: normal; }

/*
  danny 2605
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}





/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Bronova','PingFang TC','Noto Sans TC','Microsoft JhengHei','Helvetica','Arial',sans-serif;}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:'Bronova','PingFang TC','Noto Sans TC','Microsoft JhengHei','Helvetica','Arial',sans-serif; font-size:10px; overflow-x: clip; }





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset、input reset、select reset */
button, input, select{ font-family:'Bronova','PingFang TC','Noto Sans TC','Microsoft JhengHei','Helvetica','Arial',sans-serif; border: none; background: transparent; }

/* 品牌色 CSS variables */
:root{ --gs-primary: #5d0a29; --gs-primary-hover: #7a1338; --gs-bg-light: #f0eeec; --gs-text: #2b2b2b; --gs-white: #ffffff; --header-h-pc: 180px; --header-h-m: 64px; --header-pt-pc: 50px; }

/* common box-sizing */
*, *::before, *::after{ box-sizing: border-box; }

body{ color: var(--gs-text); background: var(--gs-bg-light) url('../images/bg.png') repeat; font-size: 1.6rem; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }




/* ====================================================================
   $Header / $Footer (共用)
   --------------------------------------------------------------------*/
/* ---------- Header ---------- */
.site-header{ position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--header-h-m); background: var(--gs-white); box-shadow: 0 1px 4px rgba(0,0,0,.05); z-index: 100; transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), opacity 1.35s cubic-bezier(.22, 1, .36, 1); will-change: transform, opacity; }
.site-header.is-hidden{ transform: translateY(-100%); opacity: 0; transition: transform .85s cubic-bezier(.55, .06, .68, .19), opacity .55s cubic-bezier(.55, .06, .68, .19); }
.header-inner{ display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 20px; }
.site-header .logo{ display: inline-flex; align-items: center; height: 70%; }
.site-header .logo img{ height: 100%; width: auto; display: block; }
/* 預設 mobile：顯示 logo_m.svg，header 開啟時切到 logo_on_m.svg */
.site-header .logo .logo-pc{ display: none; }
.site-header .logo .logo-m{ display: block; }
.site-header .logo .logo-m-on{ display: none; }
.site-header.is-open .logo .logo-m{ display: none; }
.site-header.is-open .logo .logo-m-on{ display: block; }
/* mobile logo 是橫式 (含字)，原本反白 filter 不再需要 */
.site-header.is-open .logo img{ filter: none; }

/* PC nav - 預設 mobile 先隱藏（mobile 用 .mobile-menu 取代） */
.main-nav{ display: none; position: relative; }
.main-nav ul{ display: flex; align-items: flex-start; gap: 0; }
.main-nav li{ list-style: none; }
/* 統一所有項目：透明外框 100×100 圓，預設看不到；hover / active(.active) 顯示白底 + 酒紅外框 */
.main-nav a{ display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--gs-primary); text-align: center; line-height: 1.3; transition: background-color .25s, border-color .25s; }
.main-nav a:hover,
.main-nav li.active > a{ background: var(--gs-white); border-color: var(--gs-primary); }

/* 八大版圖 第二層子選單：橫向膠囊，hover 出現 */
/* 右邊與 main-nav (第一層) 右側對齊；字級維持 2.2rem，膠囊自然往左撐到容納所有項目 */
.main-nav .hasdrop{ position: static; }
/* 第二層膠囊：display 常駐 flex，靠 clip-path + opacity 開合 (從右邊展開) */
.main-nav .submenu{ display: flex; position: absolute; top: 0; right: 0; left: auto; height: 100px; width: max-content; flex-direction: row; align-items: center; justify-content: center; padding: 0 60px; background: var(--gs-white); border: 1px solid var(--gs-primary); border-radius: 50px; gap: 0; white-space: nowrap; box-shadow: 0 4px 18px rgba(0,0,0,.06); z-index: 5; opacity: 0; pointer-events: none; clip-path: inset(0 50% 0 50%); transition: clip-path .55s cubic-bezier(.65,0,.35,1), opacity .25s ease; }
.main-nav .hasdrop:hover .submenu{ opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0); }
.main-nav .submenu li{ display: flex; align-items: center; opacity: 0; transform: translateY(-4px); transition: opacity .28s ease-out, transform .28s ease-out; }
.main-nav .hasdrop:hover .submenu li{ opacity: 1; transform: translateY(0); }
/* 8 項依序錯開進場 — 配合 clip-path 從中心展開，項目也從中間往兩邊浮現 */
.main-nav .hasdrop:hover .submenu li:nth-child(4),
.main-nav .hasdrop:hover .submenu li:nth-child(5){ transition-delay: .18s; }
.main-nav .hasdrop:hover .submenu li:nth-child(3),
.main-nav .hasdrop:hover .submenu li:nth-child(6){ transition-delay: .26s; }
.main-nav .hasdrop:hover .submenu li:nth-child(2),
.main-nav .hasdrop:hover .submenu li:nth-child(7){ transition-delay: .34s; }
.main-nav .hasdrop:hover .submenu li:nth-child(1),
.main-nav .hasdrop:hover .submenu li:nth-child(8){ transition-delay: .42s; }
.main-nav .submenu li:not(:last-child)::after{ content: '/'; margin: 0 22px; color: var(--gs-primary); opacity: .5; font-weight: 300; }
.main-nav .submenu a{ width: auto; height: auto; border: none; border-radius: 0; padding: 0; font-size: 2.2rem; font-weight: 300; letter-spacing: 2px; line-height: 1.2; transition: font-weight .15s; }
.main-nav .submenu a:hover{ border: none; color: var(--gs-primary); font-weight: 700; }

/* ---------- 漢堡按鈕（2 條線） ---------- */
.menu-toggle{ display: inline-flex; flex-direction: column; justify-content: space-between; width: 28px; height: 16px; cursor: pointer; padding: 0; }
.menu-toggle span{ display: block; width: 100%; height: 2px; background: var(--gs-primary); transition: transform .3s, background .3s; transform-origin: center; }
/* 開啟時：2 條合成 X 並改成白色 */
.menu-toggle.is-open span{ background: var(--gs-white); }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ transform: translateY(-7px) rotate(-45deg); }

/* 開啟時 header 變酒紅色（logo 切換由上面 .logo-m / .logo-m-on 處理） */
.site-header.is-open{ background: var(--gs-primary); }

/* ---------- Mobile 全螢幕選單 ---------- */
.mobile-menu{ position: fixed; top: var(--header-h-m); left: 0; width: 100%; height: calc(100vh - var(--header-h-m)); background: var(--gs-primary); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; overflow: hidden; }
.mobile-menu.is-open{ opacity: 1; visibility: visible; }
.mobile-menu-inner{ position: relative; width: 100%; height: 100%; }
.bubble-nav{ position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 340px; height: 340px; }
/* 4 顆泡泡後面的 logo02.svg 底圖（svg 本身已是 10% 黑） */
.bubble-nav::before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: url('../images/logo02.svg') no-repeat center/contain; z-index: 0; pointer-events: none; }
.bubble-nav .bubble{ z-index: 1; }
.bubble-nav .bubble{ position: absolute; width: 95px; height: 95px; border-radius: 50%; background: transparent; border: 1px solid rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; text-align: center; transition: background .25s, transform .25s; opacity: 0; }
.mobile-menu.is-open .bubble-nav .bubble{ opacity: 1; }
.bubble-nav .bubble a{ color: var(--gs-white); font-size: 2rem; font-weight: 300; letter-spacing: 2px; line-height: 1.3; }
.bubble-nav .bubble:hover{ background: rgba(255,255,255,.12); transform: scale(1.04); }
/* 子選單開啟時：保留上 / 右 / 下 3 顆泡泡與 logo 底圖；僅藏掉被白膠囊蓋住的左側「八大版圖」泡泡，避免穿透 */
.bubble-nav.has-open-sub .bubble-2{ opacity: 0; pointer-events: none; transition: opacity .25s; }
/* 4 顆泡泡的位置：上下左右皆 24px */
.bubble-nav .bubble-1{ top: 24px;    left: 50%; transform: translateX(-50%); } /* 關於顧世（上） */
.bubble-nav .bubble-2{ top: 50%;     left: 24px;  transform: translateY(-50%); } /* 八大版圖（左） */
.bubble-nav .bubble-3{ top: 50%;     right: 24px; transform: translateY(-50%); } /* 集團新訊（右） */
.bubble-nav .bubble-4{ bottom: 24px; left: 50%; transform: translateX(-50%); } /* 合作洽詢（下） */

/* 八大版圖點開後浮出的子選單 — 高瘦膠囊，水平蓋在 bubble-2「八大版圖」(左) 泡泡上 */
/* 水平：bubble-2 中心 = 螢幕中心 - 98.5（bubble-nav 半寬 170 - bubble-2 中心 71.5） */
/* 垂直：top: 16px、padding 與 gap 統一 30px，高度由內容自動撐起，避免 min-height + center 把空白多算進去 */
.mobile-submenu{ position: absolute; top: 16px; left: calc(50% - 98.5px); transform: translateX(-50%); background: var(--gs-white); border-radius: 50px; padding: 40px 0; display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 25px; width: 95px; z-index: 3; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.mobile-submenu.is-open{ display: flex; }
.mobile-submenu li{ width: 100%; }
.mobile-submenu a{ color: var(--gs-primary); font-size: 2rem; font-weight: 300; letter-spacing: 2px; text-align: center; width: 100%; line-height: 1.2; }
.mobile-submenu a:hover{ color: var(--gs-primary-hover); }

/* ---------- main ---------- */
/* 首頁影片要滿版到 viewport 頂，預設 padding-top: 0；後續一般內頁可在 section 自己 padding-top */
.site-main{ flex: 1 0 auto; padding-top: 0; }

/* === 頁面專屬樣式請寫在自己的 css 檔 ===
   首頁: css/index.css
   新訊: css/news.css
   合作: css/partner.css
   關於: css/about.css
   ============================================================ */

/* ---------- Footer (永遠貼底) ---------- */
.site-footer{ flex-shrink: 0; background: transparent; padding: 22px 20px; text-align: center; }
.footer-inner{ width: 100%; }
.site-footer .copyright{ color: var(--gs-primary); font-size: 1.3rem; letter-spacing: 1px; }




/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; -webkit-text-size-adjust:none; }





/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){


}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

html,body{ min-width: 100%; }

/* header 變高 + 內距加大 + 拿掉底色 */
.site-header{ height: var(--header-h-pc); background: transparent; box-shadow: none; }
/* 內容靠上對齊，離上面 50px */
.header-inner{ padding: var(--header-pt-pc) 60px 0; align-items: flex-start; height: auto; }
/* PC logo: 寬 70px (高 auto，因 SVG 比例自動推算) */
.site-header .logo{ height: auto; }
.site-header .logo img{ height: auto; }
.site-header .logo .logo-pc{ display: block; width: 70px; }
.site-header .logo .logo-m,
.site-header .logo .logo-m-on{ display: none; }
/* PC：site-main 不再 padding-top，影片區塊就會貼到 viewport 頂端，透明 header 浮在上面 */
.site-main{ padding-top: 0; }
.mobile-menu{ display: none !important; }
.menu-toggle{ display: none; }

/* 顯示 PC 主導覽 — 文字 2 行、2.2rem、Light 300（外圈預設透明、hover 才顯示） */
.main-nav{ display: block; }
.main-nav ul{ gap: 40px; }
.main-nav a{ font-size: 2.2rem; font-weight: 300; letter-spacing: 3px; }

/* footer 拿掉底色、內距加大 */
.site-footer{ background: transparent; padding: 28px 60px; }
.site-footer .copyright{ font-size: 1.4rem; letter-spacing: 2px; }

/* PC #idx_video_01：sizing 已在 base 處理完 (100vh + cover)，
   _full 版 mask 已預先上下延伸，PC 寬螢幕 cover 會把延伸出的純白半透明往外裁，不影響原始文字 */

}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}

/* ============================================================
   全站浮動「回到頂端」按鈕 .site-top
   - toparrow.svg (直線 + 箭頭尖) + 右側直書 "top" (t→o→p 上往下)
   - 固定於視窗右下，scroll 過 300px 才淡入顯示
   - 手機版顯示、PC 隱藏
   ============================================================ */
.site-top{
	position: fixed;
	right: 18px;
	bottom: 24px;
	z-index: 80;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 0;
	text-decoration: none;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.3s ease-out;
}
.site-top.is-visible{
	opacity: 1;
	pointer-events: auto;
}
.site-top-svg{
	display: block;
	width: 14.413px;
	height: 127.659px;
	user-select: none;
	pointer-events: none;
}
.site-top-txt{
	color: #212121;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1;
	writing-mode: vertical-rl;
	white-space: nowrap;
	margin-left: -8px;
}

/* .site-top 不分裝置都顯示 (若要 PC 隱藏可加 @media (min-width:1025px){ .site-top{display:none;}} ) */