@charset "UTF-8";
/* ==========================================================================
gdetail-refine.css
飛美家旅遊｜團體行程明細頁（/products/group/detail/…）風格樣式優化
--------------------------------------------------------------------------
‧ 純樣式層：不改動任何 HTML 架構，全部以覆寫方式進行
‧ 所有選擇器均限定在 body.D_products_group_detail 之下，不影響其它頁面
（注意：團型明細頁是 D_products_group_molddetail，兩者互不干擾）
‧ 需在 custom_style.css 之後載入（若無法調整順序，本檔已用較高權重確保生效）
‧ 搭配 gdetail-refine.js 可啟用側欄高亮、進場動效、天數導覽列對位等加值
--------------------------------------------------------------------------
設計方向：與團型明細頁（molddetail-refine.css）同一套設計語言 ——
延續站上既有的「深藍 #14264b + 淺灰 #ECEFF2」路線，
以卡片化、圓角、柔和陰影與清楚的字級層次取代原本的硬邊框平面感。
兩份檔案刻意各自獨立（各帶一份 token），部署時互不相依。
========================================================================== */
/* 大標題襯線字（僅大標題使用，用字量少，unicode-range 分片後實際下載量很小）
若希望更快，可改為在 內加：
並移除下面這行 @import。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap");
/* ==========================================================================
1. 設計 token（與 molddetail-refine.css 同一組值）
========================================================================== */
body.D_products_group_detail {
/* 主色階（深藍） */
--jf-navy: #14264b;
--jf-navy-700: #1d3563;
--jf-navy-500: #2f4c80;
--jf-navy-300: #6d81a8;
--jf-navy-100: #dbe3ef;
--jf-navy-050: #eceff2;
--jf-navy-025: #f5f7f9;
/* 輔助色 */
--jf-sky: #05acf2; /* 系統原生藍，保留於次要指示 */
--jf-gold: #c8912f; /* 點綴金 */
--jf-gold-soft: #f7efdf;
--jf-price: #d3455b; /* 價格紅 */
--jf-ok: #2f8f6f; /* 可報名綠 */
--jf-meal: #d98324; /* 餐食橘 */
/* 中性色 */
--jf-ink: #22272e;
--jf-ink-2: #4a5260;
--jf-muted: #7b838f;
--jf-line: #e3e7ec;
--jf-line-2: #eef1f5;
/* 圓角 */
--jf-r-sm: 6px;
--jf-r: 12px;
--jf-r-lg: 18px;
--jf-r-pill: 999px;
/* 陰影 */
--jf-sh-1: 0 1px 2px rgba(20, 38, 75, .05), 0 2px 8px rgba(20, 38, 75, .05);
--jf-sh-2: 0 4px 10px rgba(20, 38, 75, .07), 0 10px 28px rgba(20, 38, 75, .08);
--jf-sh-3: 0 12px 36px rgba(20, 38, 75, .16);
/* 動態 */
--jf-ease: cubic-bezier(.22, .61, .36, 1);
--jf-t: .28s;
/* 字型 */
--jf-font-display: "Noto Serif TC", "Source Han Serif TC", serif;
--jf-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei",
"PingFang TC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}
/* ==========================================================================
2. 基礎排版
========================================================================== */
body.D_products_group_detail {
color: var(--jf-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 頁首底色補滿 —— 與 molddetail 相同的既有問題：
選單模組 .mega-menu 是 max-width:1280px + margin:0 auto，白底只有中間那段，
而 .row.header 本身滿版且固定在畫面上方，>1280px 的螢幕左右各留一條透明縫隙，
捲動中的內容會從縫隙穿過去。只補底色，選單內容維持 1280px 置中不動。 */
@media (min-width: 1281px) {
body.D_products_group_detail .row.header {
background-color: #fff;
}
}
/* 收掉頁面底部的水平捲軸 —— 同樣是站上既有狀況：
頁尾是 Bootstrap 的 .row（margin: 0 -15px），外層沒有對應的 padding 抵銷，
整份文件被撐寬 30px。負邊距歸零即可，頁尾自身的內距與置中不受影響。 */
body.D_products_group_detail .row.footer {
margin-left: 0;
margin-right: 0;
}
/* ---- 版面寬度 ----
團型明細頁的內容區多包了一層 .DetailContainer，在 1600px 以下是 80% 寬，
裡面的 .container 再取 85%，最後落在視窗的 68%；個團明細頁少了中間那層，
所以同樣的螢幕上內容整整寬了一截（1440px 時 1224 對 979）。
這裡把各區段的 .container 直接收成 68%，量出來的寬度就與團型明細頁一致。
1600px 以上團型明細頁那層會放開成 100%，此時兩邊都是 85% 寬（上限 1440），
本來就相同，不需要處理。 */
/* Bootstrap 在各斷點給 .container 的 max-width（540/720/960/1140）會在中等
螢幕先一步封頂，讓寬度停在整數值；團型明細頁的 .container 是 max-width: 1440px，
一路交給百分比決定。先把上限拉齊，下面的百分比才會真的生效。 */
body.D_products_group_detail section.group_table > .container,
body.D_products_group_detail section.group_banner.trip_banner .basic_box > div > .container {
max-width: 1440px;
}
@media (min-width: 992px) and (max-width: 1600px) {
body.D_products_group_detail section.group_table > .container,
body.D_products_group_detail section.group_banner.trip_banner .basic_box > div > .container {
width: 68%;
}
}
/* 站上在 1199.98px 以下把 .container 放寬到 88%，團型明細頁同樣尺寸下是 85%
（中間那層已經放開成 100% 寬），小螢幕再收成滿版。一起對齊。 */
@media (max-width: 991.98px) {
body.D_products_group_detail section.group_table > .container,
body.D_products_group_detail section.group_banner.trip_banner .basic_box > div > .container {
width: 85%;
}
}
@media (max-width: 767.98px) {
body.D_products_group_detail section.group_table > .container,
body.D_products_group_detail section.group_banner.trip_banner .basic_box > div > .container {
width: 100%;
}
}
/* 其它說明那一段的 多帶了一個 .col-12（左右各 15px 內距），
它的 .container 因此比其它區段窄 20px。內距歸零才對得齊。 */
body.D_products_group_detail section.group_table.trip_note {
padding-left: 0;
padding-right: 0;
}
/* 鍵盤操作可見的焦點框 */
body.D_products_group_detail a:focus-visible,
body.D_products_group_detail button:focus-visible,
body.D_products_group_detail select:focus-visible,
body.D_products_group_detail [tabindex]:focus-visible {
outline: 2px solid var(--jf-sky);
outline-offset: 2px;
border-radius: var(--jf-r-sm);
}
/* ==========================================================================
3. 麵包屑
========================================================================== */
body.D_products_group_detail .basic_box nav.Detail .breadcrumb {
padding-top: 0;
padding-bottom: .5rem;
margin-bottom: .5rem;
font-size: .8125rem;
background: transparent;
}
body.D_products_group_detail .basic_box nav.Detail .breadcrumb a {
color: var(--jf-navy-500);
-webkit-transition: color var(--jf-t) var(--jf-ease);
transition: color var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .basic_box nav.Detail .breadcrumb a:hover {
color: var(--jf-navy);
text-decoration: underline;
}
/* 最後一節是目前頁面，壓成灰字不再強調 */
body.D_products_group_detail .basic_box nav.Detail .breadcrumb li:last-child {
color: var(--jf-muted);
}
/* ==========================================================================
4. 區段大標題（特色介紹／每日行程／其它說明／出發日期）
--------------------------------------------------------------------------
站上這幾個標題帶是「背景照片 ＋ 白色黑體字」。這裡加一層深藍漸層遮罩讓字浮起來，
標題本身改襯線字並加上英文副標（副標由 gdetail-refine.js 寫入 data-en）。
========================================================================== */
body.D_products_group_detail section.group_table > .container > .text-center {
position: relative;
z-index: 2;
}
/* ---- 標題帶的上下留白 ----
數值比照團型明細頁的 section.AnchorPoint（量測自實際頁面，各斷點都相同）：
上：section 上緣到標題頂 5.5rem（88px）
下：標題下方短線到內容卡片 3rem（48px）
站上原本是 padding-top 3rem、.group_table_box margin-top 5.5rem，
標題貼著上一區、離下面的內容卡片又太遠，剛好是相反的配置。
.text-center 的 .mb-5 與 .group_table_box 的 margin-top 是相鄰的兄弟外距，
兩者會合併取大值，因此把 .mb-5 歸零，下方間距一律交給 .group_table_box 控制。 */
body.D_products_group_detail section.group_table {
padding-top: 5.5rem;
}
body.D_products_group_detail section.group_table > .container > .text-center {
margin-bottom: 0 !important; /* 蓋掉 Bootstrap .mb-5 的 !important */
}
/* 站上在窄螢幕給 h2 一個 margin-top: 20px，因為外距合併會穿透 .text-center 與
.container，把整個標題帶往下推 20px，上方留白就對不齊了。 */
body.D_products_group_detail section.group_table > .container > .text-center > h2 {
margin-top: 0;
}
/* 選擇器要比站上的 section.group_table.trip_features .container .group_table_box
（四個 class）更具體，才蓋得過它寫死的 margin-top: 5.5rem */
body.D_products_group_detail section.group_table .container .group_table_box {
margin-top: 3rem;
}
body.D_products_group_detail section.group_table > .container > .text-center > h2 {
font-family: var(--jf-font-display);
/* 字級／行高／陰影與團型明細頁的 h2.APtitle 同一組值。
clamp 的結果：390px→28px、768px→33px、1440px 以上→40px */
font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem);
font-weight: 700;
line-height: 1.35;
letter-spacing: .08em;
color: #fff;
text-shadow: 0 2px 18px rgba(9, 18, 38, .45);
margin-bottom: 0;
}
/* 英文副標（JS 寫入 data-en；沒有 JS 時整段不會出現） */
body.D_products_group_detail section.group_table > .container > .text-center > h2[data-en]::before {
content: attr(data-en);
display: block;
font-family: var(--jf-font-ui);
/* 同團型明細頁 .APtitle[data-en]::before：11px / 600 / 白 72% / 不加陰影 */
font-size: .6875rem;
font-weight: 600;
letter-spacing: .34em;
text-indent: .34em; /* 補回 letter-spacing 造成的視覺偏移 */
line-height: 1;
color: rgba(255, 255, 255, .72);
text-shadow: none;
margin-bottom: .85rem;
}
/* 標題下方的短線。與團型明細頁一樣用「兩端透明、中間金色」的漸層，
不是實心色塊。 */
body.D_products_group_detail section.group_table > .container > .text-center > h2::after {
content: "";
display: block;
width: 56px;
height: 2px;
margin: 16px auto 0;
border-radius: 2px;
background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), color-stop(50%, var(--jf-gold)), to(rgba(255, 255, 255, 0)));
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--jf-gold) 50%, rgba(255, 255, 255, 0));
}
/* ---- 照片帶的遮罩 ----
與團型明細頁 section.AnchorPoint 同一個作法。
站上結構相同：::before 是視差背景圖、::after 是遮罩，原本是 #04abf2 半透明亮藍，
整條標題帶偏藍濁且照片幾乎看不出來。改成深藍漸層、底部收白，
照片保留色彩、白字浮起來，下方的白色內容卡片也能自然接續。 */
body.D_products_group_detail section.group_table {
position: relative;
}
body.D_products_group_detail section.group_table > .container {
position: relative;
z-index: 2;
}
body.D_products_group_detail section.group_table::before {
-webkit-filter: grayscale(.3) saturate(1.05) brightness(.92);
filter: grayscale(.3) saturate(1.05) brightness(.92);
}
body.D_products_group_detail section.group_table::after {
opacity: 1;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(20, 38, 75, .78)),
color-stop(38%, rgba(20, 38, 75, .56)),
color-stop(64%, rgba(20, 38, 75, .30)),
color-stop(88%, rgba(255, 255, 255, .78)),
to(#fff));
background: linear-gradient(180deg,
rgba(20, 38, 75, .78) 0,
rgba(20, 38, 75, .56) 38%,
rgba(20, 38, 75, .30) 64%,
rgba(255, 255, 255, .78) 88%,
#fff 100%);
}
/* 行動裝置關閉 fixed 視差，避免 iOS/Android 上的破圖與抖動 */
@media (max-width: 991.98px) {
body.D_products_group_detail section.group_table::before {
background-attachment: scroll !important;
background-position: center center !important;
}
}
/* ==========================================================================
5. 內容容器卡片化
--------------------------------------------------------------------------
站上各區段的內容盒 .group_table_box 是方角白底，這裡統一成圓角卡片。
========================================================================== */
body.D_products_group_detail .group_table .group_table_box {
border-radius: var(--jf-r-lg);
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
border: 1px solid var(--jf-line);
}
/* ---- 區塊內的小標題 ----
與團型明細頁的 .MainTitle 同一個樣式：襯線深藍字 ＋ 左側深藍→亮藍的漸層色條。
套用對象：「行程說明」(.title_s) 以及「團票說明／出團備註／小費建議」等
說明區的手風琴標題（手風琴的互動樣式另見第 10 節）。 */
body.D_products_group_detail .group_table .title_s,
body.D_products_group_detail .trip_note #accordion .card-header a.btn-link {
position: relative;
display: block;
font-family: var(--jf-font-display);
font-size: 1.375rem;
font-weight: 700;
color: var(--jf-navy);
letter-spacing: .04em;
background: none;
border: 0;
border-radius: 0;
padding-left: 16px;
}
/* 色條垂直置中。手風琴標題的 有上下 padding，用 top:.2em 會讓色條被推到
文字上方，所以一律以中線對齊，與 padding 無關。 */
body.D_products_group_detail .group_table .title_s::before,
body.D_products_group_detail .trip_note #accordion .card-header a.btn-link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 5px;
height: 1.05em;
border-radius: 3px;
background: -webkit-gradient(linear, left top, left bottom,
from(var(--jf-navy)), to(var(--jf-sky)));
background: linear-gradient(180deg, var(--jf-navy), var(--jf-sky));
}
/* 站上 .title_s 是置中的，改為靠左，與其它小標題對齊 */
body.D_products_group_detail .group_table .title_s {
margin-bottom: 1.5rem;
text-align: left;
margin-top: 0;
}
@media (max-width: 575px) {
body.D_products_group_detail .group_table .title_s,
body.D_products_group_detail .trip_note #accordion .card-header a.btn-link {
font-size: 1.1875rem;
}
}
/* ==========================================================================
6. 主視覺與基本資訊（group_banner / basic_box）
========================================================================== */
/* 主視覺下緣加一道漸層，讓下方的白色資訊卡浮起來 */
body.D_products_group_detail section.group_banner.trip_banner .img_box {
position: relative;
}
body.D_products_group_detail section.group_banner.trip_banner .img_box::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 45%;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(10, 20, 40, 0)), to(rgba(10, 20, 40, .34)));
background: linear-gradient(180deg, rgba(10, 20, 40, 0), rgba(10, 20, 40, .34));
pointer-events: none;
}
/* 站上 .basic_box 帶著 padding-top:150px（桌機）用來避開上方絕對定位的 banner 圖，
留白過多。改為 padding-top:0 並用負的上外距把整塊往上收，讓資訊卡更貼近主視覺。 */
body.D_products_group_detail section.group_banner.trip_banner .basic_box {
padding-top: 0;
margin-top: -30px;
}
/* 資訊卡本體。
注意不能把底色加在 .basic_box 上 —— 站上刻意把它設成 transparent，
一旦給了底色，它的內距就會變成一大片可見的空白並蓋住主視覺。
白卡要加在真正裝內容的 .container 上。 */
body.D_products_group_detail section.group_banner.trip_banner .basic_box > div > .container {
background: #fff;
border-radius: var(--jf-r-lg);
border: 1px solid var(--jf-line);
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
/* 主標題 */
body.D_products_group_detail section.group_banner.trip_banner h1 {
font-family: var(--jf-font-display);
font-size: 1.875rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: .01em;
color: var(--jf-navy);
}
/* 「名額有限 即將滿團」這類提示 */
body.D_products_group_detail section.group_banner.trip_banner h5.text-danger {
font-size: .9375rem;
font-weight: 600;
color: var(--jf-price) !important;
}
/* 「保證出發」標籤改膠囊 */
body.D_products_group_detail section.group_banner .btn.btn-danger.tag {
background: var(--jf-price);
border-color: var(--jf-price);
border-radius: var(--jf-r-pill);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .04em;
padding: .35em 1.1em;
-webkit-box-shadow: 0 2px 8px rgba(211, 69, 91, .3);
box-shadow: 0 2px 8px rgba(211, 69, 91, .3);
}
/* 團號與 QR code */
body.D_products_group_detail section.group_banner .group_num h6 {
font-size: .8125rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--jf-navy-500);
background: var(--jf-navy-025);
border: 1px solid var(--jf-line);
border-radius: var(--jf-r-pill);
padding: .4em 1em;
display: inline-block;
}
/* ---- 售價 ---- */
body.D_products_group_detail section.group_banner.trip_banner h3.price {
color: var(--jf-price);
font-size: 2.375rem;
font-weight: 700;
letter-spacing: -.01em;
-webkit-font-feature-settings: "tnum" 1;
font-feature-settings: "tnum" 1;
}
body.D_products_group_detail section.group_banner.trip_banner h3.price span,
body.D_products_group_detail section.group_banner.trip_banner h3.price small {
color: var(--jf-muted);
font-size: 42%;
font-weight: 600;
letter-spacing: .06em;
}
/* 「我要報名」主要行動鈕 */
body.D_products_group_detail section.group_banner.trip_banner .basic_box .price_box .iteam h3.price + a {
border-radius: var(--jf-r-pill);
background: var(--jf-price);
font-size: 1.0625rem;
letter-spacing: .06em;
padding: 12px 30px;
-webkit-box-shadow: 0 6px 18px rgba(211, 69, 91, .32);
box-shadow: 0 6px 18px rgba(211, 69, 91, .32);
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail section.group_banner.trip_banner .basic_box .price_box .iteam h3.price + a:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 10px 24px rgba(211, 69, 91, .4);
box-shadow: 0 10px 24px rgba(211, 69, 91, .4);
}
/* ---- 大人／小孩佔床／小孩不佔床 售價面板 ---- */
body.D_products_group_detail section.group_banner .price_content .panel-info {
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
overflow: hidden;
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
}
body.D_products_group_detail section.group_banner .price_content .panel-info .panel-heading {
background: -webkit-gradient(linear, left top, right top,
from(var(--jf-navy)), to(var(--jf-navy-700)));
background: linear-gradient(90deg, var(--jf-navy), var(--jf-navy-700));
font-size: .9375rem;
font-weight: 700;
letter-spacing: .06em;
padding: 11px 10px;
}
body.D_products_group_detail section.group_banner .price_content .panel-info .panel-body {
color: var(--jf-navy);
font-weight: 700;
font-size: 1.0625rem;
-webkit-font-feature-settings: "tnum" 1;
font-feature-settings: "tnum" 1;
background: #fff;
}
/* ---- 報名截止／成團人數／每人訂金 ---- */
body.D_products_group_detail section.group_banner.trip_banner .brief h5 {
font-size: .9375rem;
color: var(--jf-ink-2);
line-height: 2;
}
/* ---- 去程／回程 航班摘要 ---- */
body.D_products_group_detail .basic-air-info {
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
background: var(--jf-navy-025);
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
}
body.D_products_group_detail .basic-air-info .go h3,
body.D_products_group_detail .basic-air-info .back h3 {
color: var(--jf-navy-500);
font-size: .9375rem;
font-weight: 700;
letter-spacing: .1em;
}
body.D_products_group_detail .basic-air-info .go h3 i,
body.D_products_group_detail .basic-air-info .back h3 i {
color: var(--jf-navy-300);
font-size: 1.5rem;
}
body.D_products_group_detail .basic-air-info .go h4,
body.D_products_group_detail .basic-air-info .back h4 {
font-family: var(--jf-font-display);
color: var(--jf-navy);
font-size: 1.3125rem;
font-weight: 700;
-webkit-font-feature-settings: "tnum" 1;
font-feature-settings: "tnum" 1;
}
/* 中間的「11天8夜」。站上這一欄只有 20% 寬，字一加粗就會被擠成兩行，
所以不加字距並明確禁止換行。 */
body.D_products_group_detail .basic-air-info .time {
color: var(--jf-ink-2);
font-weight: 700;
white-space: nowrap;
border-bottom-color: var(--jf-navy-100);
}
/* 「航班詳情」次要按鈕 */
body.D_products_group_detail .basic-air-btn > a {
display: inline-block;
background: transparent;
color: var(--jf-navy);
border: 1px solid var(--jf-navy-100);
border-radius: var(--jf-r-pill);
font-size: .9375rem;
font-weight: 600;
letter-spacing: .04em;
padding: 9px 24px;
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .basic-air-btn > a:hover {
background: var(--jf-navy);
border-color: var(--jf-navy);
color: #fff;
text-decoration: none;
}
/* ==========================================================================
7. 每日行程（trip_day）
========================================================================== */
/* ---- 天數快速導覽列 ----
站上這一列是 Swiper（.swiper_day），天數是 .swiper-slide > a，
捲到每日行程時會被加上 .day_fixed 固定在頁首下方（top 由站上 JS 動態量測，
會把頁首所有 fixed 元素的高度加總，所以不需要像團型頁那樣自己校正）。
這裡只換外觀：圓形按鈕改膠囊，並在固定時加上毛玻璃底與陰影。 */
/* 只動上下留白。左右寬度不能碰 —— Swiper 是用 slidesPerView:10 在初始化時
依容器寬度算好每一格的寬，事後用 CSS 改左右 padding 它不會重算，
最後一天就會被切掉半個。 */
body.D_products_group_detail .Day_menu {
background: rgba(255, 255, 255, .96);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
padding-top: 8px;
padding-bottom: 8px;
}
body.D_products_group_detail .Day_menu.day_fixed {
border-bottom: 1px solid var(--jf-line);
-webkit-box-shadow: 0 4px 16px rgba(20, 38, 75, .08);
box-shadow: 0 4px 16px rgba(20, 38, 75, .08);
}
/* Swiper 用 transform 平移滑塊，容器一定要 hidden；
站上若留著 overflow-x:auto 會長出一條水平捲軸，並把整列撐高 15px。 */
body.D_products_group_detail .Day_menu .swiper_day {
overflow: hidden;
}
body.D_products_group_detail .Day_menu .swiper-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
body.D_products_group_detail .Day_menu .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: auto;
}
/* 站上是 50px 的圓形按鈕（width / height / line-height / border-radius 都寫死），
三個尺寸屬性要一起蓋掉才會變成隨字寬撐開的膠囊。 */
body.D_products_group_detail .Day_menu .swiper-slide > a {
display: block;
width: auto;
height: auto;
line-height: 1.5;
white-space: nowrap;
font-size: .875rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--jf-navy-500);
background-color: transparent;
border: 0;
border-radius: var(--jf-r-pill);
padding: 6px 14px;
margin: 0 2px;
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .Day_menu .swiper-slide > a:hover {
background-color: var(--jf-navy-050);
color: var(--jf-navy);
text-decoration: none;
}
/* 目前所在的那一天（.jf-active 由 gdetail-refine.js 標記） */
body.D_products_group_detail .Day_menu .swiper-slide > a.jf-active {
background-color: var(--jf-navy);
color: #fff;
-webkit-box-shadow: 0 2px 8px rgba(20, 38, 75, .28);
box-shadow: 0 2px 8px rgba(20, 38, 75, .28);
}
/* 前後切換箭頭改小圓鈕（站上是 27px 粗的藍色大箭頭，壓在膠囊上很搶眼） */
body.D_products_group_detail .Day_menu .swiper-button-prev,
body.D_products_group_detail .Day_menu .swiper-button-next {
width: 26px;
height: 26px;
margin-top: -13px;
color: var(--jf-navy-500);
background: #fff;
border: 1px solid var(--jf-line);
border-radius: 50%;
-webkit-box-shadow: 0 2px 8px rgba(20, 38, 75, .12);
box-shadow: 0 2px 8px rgba(20, 38, 75, .12);
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .Day_menu .swiper-button-prev { left: 6px; }
body.D_products_group_detail .Day_menu .swiper-button-next { right: 6px; }
body.D_products_group_detail .Day_menu .swiper-button-prev::after,
body.D_products_group_detail .Day_menu .swiper-button-next::after {
font-size: 11px;
font-weight: 700;
}
body.D_products_group_detail .Day_menu .swiper-button-prev:hover,
body.D_products_group_detail .Day_menu .swiper-button-next:hover {
background: var(--jf-navy);
border-color: var(--jf-navy);
color: #fff;
}
/* ---- 每日的標題卡片 ---- */
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title {
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
overflow: hidden;
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
-webkit-transition: box-shadow var(--jf-t) var(--jf-ease);
transition: box-shadow var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title:hover {
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
/* ---- 天數與當日標題 ----
對齊團型明細頁：天數做成深藍漸層徽章（白字襯線、單邊圓角、陰影）貼在卡片左上角，
當日標題深藍粗體排在右側。站上這一列原本是 padding:15px 的純文字，
徽章要貼齊卡片邊緣，所以把該列的內距移除、改由徽章與標題各自負責。 */
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title > div:first-child {
padding: 0;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title .day_title {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: -webkit-gradient(linear, left top, left bottom,
from(var(--jf-navy)), to(var(--jf-navy-700)));
background: linear-gradient(180deg, var(--jf-navy), var(--jf-navy-700));
color: #fff;
font-family: var(--jf-font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: .02em;
border: 0;
border-radius: var(--jf-r) 0 var(--jf-r) 0;
padding: 18px 24px;
margin: 0;
width: auto;
-webkit-box-shadow: 0 4px 14px rgba(20, 38, 75, .28);
box-shadow: 0 4px 14px rgba(20, 38, 75, .28);
}
/* 當日行程摘要「台北/舊金山」 */
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title .day_sub-title {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--jf-navy);
font-weight: 700;
border-left: 0;
padding: 12px 20px;
margin: 0;
line-height: 1.6;
}
/* 餐食與住宿列 —— 站上是純灰底 #e2e2e2，改成淺藍灰並加分隔線 */
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title p {
background: var(--jf-navy-025);
border-top: 1px solid var(--jf-line-2);
padding: 12px 15px;
color: var(--jf-ink-2);
font-size: .9375rem;
}
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title p.meal > span {
margin-right: 26px;
}
/* 餐別／住宿標籤（站上用 標籤，站方已拿掉刪除線，這裡只補字重） */
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title p s {
font-weight: 600;
color: var(--jf-navy-500);
text-decoration: none;
}
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title p .data-icon {
color: var(--jf-navy-300);
}
/* 餐食 icon 用暖橘、住宿 icon 用深藍，讓兩列一眼分得開 */
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title p.meal .data-icon {
color: var(--jf-meal);
}
/* ---- 當日內文 ---- */
body.D_products_group_detail section.group_table.trip_day .info {
line-height: 1.95;
color: var(--jf-ink-2);
}
/* ==========================================================================
8. 編輯器內容（特色介紹與每日行程共用的 day_style_* / .item / .stroke_box）
--------------------------------------------------------------------------
這一段內容是後台編輯器產生的，字級、顏色、對齊都寫在行內，
這裡只做「不破壞原意」的統一：圖片圓角、圖說收斂、段落行高。
========================================================================== */
body.D_products_group_detail [class*="day_style_"] .item img {
border-radius: var(--jf-r);
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
-webkit-transition: -webkit-transform var(--jf-t) var(--jf-ease);
transition: transform var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail [class*="day_style_"] .item img:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
body.D_products_group_detail [class*="day_style_"] .item p {
line-height: 1.95;
}
/* 圖說（.jf-cap 由 gdetail-refine.js 標記：位於 .item 內、緊接圖片之後、
字數短且不含圖片的區塊元素）。編輯器把 font-size 寫在行內，只能用 !important 收斂。 */
body.D_products_group_detail [class*="day_style_"] .item .jf-cap,
body.D_products_group_detail [class*="day_style_"] .item .jf-cap * {
font-size: 14px !important;
color: var(--jf-muted) !important;
text-align: center;
line-height: 1.7;
}
/* .stroke_box 裡包的是置中大標，站上另外給了一張 http:// 的裝飾線底圖，
在 https 頁面會被當混合內容擋掉，只留下用來遮線的白色色塊。一起收掉。 */
body.D_products_group_detail .stroke_box .line {
background: none;
}
body.D_products_group_detail .stroke_box .line h1,
body.D_products_group_detail .stroke_box .line h2,
body.D_products_group_detail .stroke_box .line h3 {
background: transparent;
}
/* ==========================================================================
9. 航班一覽表（每日行程上方）與出發日期表格
========================================================================== */
body.D_products_group_detail .group_table table {
border-radius: var(--jf-r);
overflow: hidden;
}
/* 深藍實心表頭只給「每日行程上方的航班一覽表」。
範圍一定要限定在 trip_day —— 出發日期區裡的月曆（fullcalendar 的
.fc-col-header-cell 也是 ）與價格表都會被掃到，週一～週日會變成深藍實心。 */
body.D_products_group_detail section.group_table.trip_day table thead th,
body.D_products_group_detail section.group_table.trip_day table > tbody > tr.thead > th {
background: var(--jf-navy) !important;
color: #fff !important;
font-size: .9375rem;
font-weight: 700;
letter-spacing: .06em;
border: 0 !important;
padding: 14px 12px;
}
/* 站上在表頭第 2 欄上方用 ::before 疊了一條 8px 的亮藍色塊（#0676a6）：
section.group_table.trip_day table.table tr.thead th:nth-child(2)::before
表頭改成整條深藍之後，這截色塊只是浮在上緣的殘留裝飾，收掉。
選擇器帶了 :nth-child 與四個 class，要蓋過它得再具體一點。 */
body.D_products_group_detail section.group_table.trip_day table.table tr.thead th:nth-child(2)::before {
display: none;
}
body.D_products_group_detail section.group_table.trip_day table tbody td {
border-color: var(--jf-line-2) !important;
color: var(--jf-ink-2);
padding: 13px 12px;
vertical-align: middle;
}
body.D_products_group_detail section.group_table.trip_day table tbody tr:hover td {
background-color: var(--jf-navy-025) !important;
}
/* ---- 月曆模式（fullcalendar）----
站上是「亮藍工具列 + 深色星期列 + 白字」，與團型明細頁差很多。
對齊團型明細頁：工具列白底深色字、星期列透明底灰字。 */
body.D_products_group_detail section.group_table.tripdown .fc-header-toolbar {
background: #fff !important;
}
body.D_products_group_detail section.group_table.tripdown .fc-toolbar-title {
color: var(--jf-ink) !important;
font-size: 1.5rem;
font-weight: 700;
}
body.D_products_group_detail section.group_table.tripdown .fc-col-header-cell {
background: transparent !important;
color: #545454 !important;
border-bottom: 1px solid #ddd !important;
}
body.D_products_group_detail section.group_table.tripdown .fc-col-header-cell a,
body.D_products_group_detail section.group_table.tripdown .fc-col-header-cell .fc-col-header-cell-cushion {
color: #545454 !important;
}
/* 上／下個月與「今天」：淺藍底藍字 */
body.D_products_group_detail section.group_table.tripdown .fc .fc-button-primary {
background-color: #e7f7fd !important;
border-color: #e7f7fd !important;
color: var(--jf-sky) !important;
}
body.D_products_group_detail section.group_table.tripdown .fc .fc-button-primary:disabled {
opacity: .5;
}
/* ---- 價格模式 ---- */
body.D_products_group_detail section.group_table.tripdown .tour-price-table thead th {
background-color: var(--jf-navy-025) !important;
color: var(--jf-navy) !important;
font-weight: 700;
border-color: var(--jf-line) !important;
}
body.D_products_group_detail section.group_table.tripdown .tour-price-table tbody td {
border-color: var(--jf-line) !important;
vertical-align: middle;
}
/* ---- 出發日期列表：整列卡片化 ----
對齊團型明細頁的作法：表頭壓成灰色小標，每一列變成一張可點的白色卡片，
hover 時上浮並亮出左側的深藍→亮藍色條。
普通 的 沒辦法直接加圓角與陰影，所以改用
border-collapse: separate + border-spacing 讓列之間有間距，
圓角與框線再分別交給第一格與最後一格。 */
body.D_products_group_detail .group_table table.search_table {
border-collapse: separate;
border-spacing: 0 12px;
}
/* 深藍底是站上加在 上的，只清 | 沒有用，兩層都要清 */
body.D_products_group_detail .group_table table.search_table thead tr,
body.D_products_group_detail .group_table table.search_table thead tr.thead,
body.D_products_group_detail .group_table table.search_table thead th {
background: transparent !important;
background-image: none !important;
}
body.D_products_group_detail .group_table table.search_table thead th {
color: var(--jf-muted) !important;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .06em;
border: 0 !important;
border-bottom: 1px solid var(--jf-line) !important;
padding: 0 12px .5rem;
}
body.D_products_group_detail .group_table table.search_table tbody tr {
-webkit-transition: -webkit-transform var(--jf-t) var(--jf-ease);
transition: transform var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .group_table table.search_table tbody td {
background: #fff;
border-top: 1px solid var(--jf-line);
border-bottom: 1px solid var(--jf-line);
color: var(--jf-ink-2);
padding: 16px 12px;
vertical-align: middle;
-webkit-transition: border-color var(--jf-t) var(--jf-ease),
-webkit-box-shadow var(--jf-t) var(--jf-ease);
transition: border-color var(--jf-t) var(--jf-ease), box-shadow var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .group_table table.search_table tbody td:first-child {
position: relative;
border-left: 1px solid var(--jf-line);
border-radius: var(--jf-r) 0 0 var(--jf-r);
}
body.D_products_group_detail .group_table table.search_table tbody td:last-child {
border-right: 1px solid var(--jf-line);
border-radius: 0 var(--jf-r) var(--jf-r) 0;
}
/* 左側指示色條，hover 才出現。自帶圓角，這樣格子就不需要 overflow:hidden */
body.D_products_group_detail .group_table table.search_table tbody td:first-child::before {
content: "";
position: absolute;
left: 0;
top: -1px;
bottom: -1px;
width: 4px;
border-radius: var(--jf-r) 0 0 var(--jf-r);
background: -webkit-gradient(linear, left top, left bottom,
from(var(--jf-navy)), to(var(--jf-sky)));
background: linear-gradient(180deg, var(--jf-navy), var(--jf-sky));
opacity: 0;
-webkit-transition: opacity var(--jf-t) var(--jf-ease);
transition: opacity var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .group_table table.search_table tbody tr:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
body.D_products_group_detail .group_table table.search_table tbody tr:hover td {
border-top-color: #c6d4e8;
border-bottom-color: #c6d4e8;
-webkit-box-shadow: 0 6px 16px rgba(20, 38, 75, .1);
box-shadow: 0 6px 16px rgba(20, 38, 75, .1);
}
body.D_products_group_detail .group_table table.search_table tbody tr:hover td:first-child {
border-left-color: #c6d4e8;
}
body.D_products_group_detail .group_table table.search_table tbody tr:hover td:last-child {
border-right-color: #c6d4e8;
}
body.D_products_group_detail .group_table table.search_table tbody tr:hover td:first-child::before {
opacity: 1;
}
/* 出發日期 */
body.D_products_group_detail .group_table table.search_table td .go-date {
color: var(--jf-navy);
font-size: 1.0625rem;
font-weight: 700;
}
body.D_products_group_detail .group_table table.search_table td .item_days {
color: var(--jf-muted);
font-size: .8125rem;
}
/* 行程名稱 */
body.D_products_group_detail .group_table table.search_table td a.title_main {
color: var(--jf-ink-2);
font-size: .9375rem;
line-height: 1.65;
font-weight: 600;
-webkit-transition: color var(--jf-t) var(--jf-ease);
transition: color var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .group_table table.search_table tbody tr:hover a.title_main {
color: var(--jf-navy);
}
body.D_products_group_detail .group_table table.search_table td p.time {
color: var(--jf-muted);
font-size: .8125rem;
margin-bottom: .25rem;
}
/* 「名額有限」這類提醒 */
body.D_products_group_detail .group_table table.search_table td p.bird {
color: var(--jf-price) !important;
font-size: .8125rem;
margin-bottom: 0;
}
/* 列表內的「保證出發」標籤 */
body.D_products_group_detail .group_table table.search_table td .btn.tag {
border-radius: var(--jf-r-pill);
background: var(--jf-price);
border-color: var(--jf-price);
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
padding: .3em 1em;
margin-bottom: .35rem;
}
/* 售價 */
body.D_products_group_detail .group_table table.search_table td.tour-price {
font-size: 1.25rem;
}
/* 售價數字。限定在 | ——「售價」欄的表頭 | 也帶著 .tour-price，
不限定的話連表頭都會被染成紅字，壓在深藍底上幾乎看不見。 */
body.D_products_group_detail .group_table table td.tour-price,
body.D_products_group_detail .group_table table td .tour-price,
body.D_products_group_detail .group_table table td .TextPrice {
color: var(--jf-price) !important;
font-weight: 700;
-webkit-font-feature-settings: "tnum" 1;
font-feature-settings: "tnum" 1;
}
/* 表格裡的按鈕預設走「白底細邊」，與團型明細頁價格模式的日期鈕一致。
價格模式的按鈕是一個個日期（不是行動鈕），實心色會太搶。 */
body.D_products_group_detail section.group_table.tripdown table .btn {
border-radius: var(--jf-r-pill);
background-color: #fff;
border: 1px solid var(--jf-line);
color: var(--jf-ink);
font-weight: 600;
letter-spacing: .04em;
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail section.group_table.tripdown table .btn:hover {
border-color: var(--jf-navy-100);
background-color: var(--jf-navy-025);
color: var(--jf-navy);
}
/* 列表模式的「報名」是真正的行動鈕，維持深藍實心
（頁面主要行動鈕「我要報名」已經是紅色，這裡當次要行動）。 */
body.D_products_group_detail section.group_table.tripdown table.search_table .btn:not(.tag) {
background-color: var(--jf-navy);
border-color: var(--jf-navy);
color: #fff;
}
body.D_products_group_detail section.group_table.tripdown table.search_table .btn:not(.tag):hover {
background-color: var(--jf-navy-700);
border-color: var(--jf-navy-700);
color: #fff;
-webkit-box-shadow: 0 4px 12px rgba(20, 38, 75, .3);
box-shadow: 0 4px 12px rgba(20, 38, 75, .3);
}
/* 三種檢視模式的切換鈕（站上用的是 .nav-pills，不是 .nav-tabs） */
body.D_products_group_detail section.group_table.tripdown .nav {
border-bottom: 0;
}
/* 配色對齊團型明細頁：白底、深藍字、細邊加淺陰影；hover 只加深邊框 */
body.D_products_group_detail section.group_table.tripdown .nav .nav-link {
border-radius: var(--jf-r-pill);
border: 1px solid var(--jf-navy-100);
background-color: #fff;
color: var(--jf-navy);
font-weight: 600;
letter-spacing: .04em;
margin-left: 6px;
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail section.group_table.tripdown .nav .nav-link svg {
fill: var(--jf-navy);
}
body.D_products_group_detail section.group_table.tripdown .nav .nav-link:hover {
border-color: var(--jf-navy);
color: var(--jf-navy);
}
/* Bootstrap 的 .nav-pills .nav-link.active 自己就帶底色，權重同為 (0,3,0)，
靠後載入取勝；為了不依賴載入順序，這裡多加一個 section 提高權重。 */
body.D_products_group_detail section.group_table.tripdown .nav .nav-link.active {
background-color: var(--jf-navy);
border-color: var(--jf-navy);
color: #fff;
-webkit-box-shadow: 0 4px 12px rgba(20, 38, 75, .22);
box-shadow: 0 4px 12px rgba(20, 38, 75, .22);
}
/* 月曆模式的圖例：站上是 absolute 定位，會壓在深色標題帶上，改為隨內容排列 */
body.D_products_group_detail section.group_table.tripdown .IconMean {
position: static;
top: auto;
right: auto;
text-align: right;
margin: 0 0 .75rem;
}
body.D_products_group_detail section.group_table.tripdown .IconMean span {
color: var(--jf-ink-2);
font-size: .8125rem;
}
/* 「保證出發」等狀態標籤 */
body.D_products_group_detail section.group_table.tripdown .GuaranteedIcon,
body.D_products_group_detail section.group_table.tripdown .PushIcon {
border-radius: var(--jf-r-pill);
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
}
/* ==========================================================================
10. 其它說明（trip_note 手風琴）
--------------------------------------------------------------------------
站上每一則是整條亮藍色 (#04abf2) 標題列，滿版藍色塊在長頁面裡很吵。
改成與團型明細頁的「團票說明／出團備註／小費建議」同一個樣子：
標題就是純文字（襯線深藍字＋左側漸層色條，字體在第 5 節定義），
不加底色也不加框；內容則收在一個白底細框的圓角框裡。
========================================================================== */
/* 站上三則說明是擠在同一張大白卡裡，團型明細頁則是一則一張白卡。
這裡把外層那張大卡收掉（選擇器要比站上的
section.group_table.trip_note .container .group_table_box 更具體才蓋得過），
白卡改由每一則自己帶。 */
body.D_products_group_detail section.group_table.trip_note .container .group_table_box {
background: none;
border: 0;
border-radius: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/* 每一則＝團型明細頁裡的一張白卡：白底、18px 圓角、同一組陰影、不畫框。
內距 36px 15px 與卡片間距 24px 都取自團型明細頁的實測值；標題本身還有
16px 的左內距讓出色條，所以文字距卡片左緣一樣是 31px。 */
body.D_products_group_detail .trip_note #accordion .card {
background: #fff;
border: 0;
border-radius: var(--jf-r-lg);
overflow: visible;
padding: 36px 15px;
margin-bottom: 24px;
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_detail .trip_note #accordion .card:last-child {
margin-bottom: 0;
}
/* 標題列＝團型明細頁的 h2.MainTitle：不要底色、框線與圓角。
站上的亮藍底是加在 上（不是 .card-header），所以兩邊都要清掉。
原生的 margin-bottom: 20px 也一併歸零，標題到內容的距離統一由
內容框的 margin-top 提供，才好對齊團型明細頁的 24px。 */
body.D_products_group_detail .trip_note #accordion .card-header {
background-color: transparent;
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin-bottom: 0;
}
/* 左側 16px 讓出漸層色條的位置，與團型明細頁的 .MainTitle 相同；
上下不留 padding，標題底緣才會落在跟團型明細頁一樣的位置。
右側留 20px 給展開／收合符號。 */
body.D_products_group_detail .trip_note #accordion .card-header a.btn-link {
width: 100%;
text-align: left;
text-decoration: none;
background: none;
padding: 0 20px 0 16px;
margin-left: 0;
-webkit-transition: color var(--jf-t) var(--jf-ease);
transition: color var(--jf-t) var(--jf-ease);
}
/* 站上的展開／收合符號是 a::after 的「−」，寫死白色 ——
標題列不再有深色底，改成灰藍、hover 加深。 */
body.D_products_group_detail .trip_note #accordion .card-header a.btn-link::after {
color: var(--jf-navy-300);
-webkit-transition: color var(--jf-t) var(--jf-ease);
transition: color var(--jf-t) var(--jf-ease);
}
/* 標題可點，但不用底色回饋，只加深文字與符號 */
body.D_products_group_detail .trip_note #accordion .card-header:hover a.btn-link,
body.D_products_group_detail .trip_note #accordion .card-header:hover a.btn-link::after {
color: var(--jf-sky);
}
/* 內容框＝團型明細頁的 .BorderMuted：白底、細框、圓角、內距 24px。
小費建議那一則站上沒有 .card-body，內容直接是 .table-responsive，
所以兩種都要套，框線才會跟出團備註一致。
.collapsing 也要一起列：Bootstrap 在展開／收合的動畫期間會把外層的
class 由 .collapse.show 換成 .collapsing，只寫 .collapse 的話框線與外距
會在動畫一開始就整組消失，高度跟著少掉一截，看起來就是內容位移。 */
body.D_products_group_detail .trip_note #accordion .card-body,
body.D_products_group_detail .trip_note #accordion .collapse > .table-responsive,
body.D_products_group_detail .trip_note #accordion .collapsing > .table-responsive {
background: #fcfdfe;
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
margin-top: 1.5rem;
padding: 24px;
line-height: 1.95;
color: var(--jf-ink-2);
}
/* 表格自己會畫格線，貼齊框內即可，不要再被內距推出一圈 */
body.D_products_group_detail .trip_note #accordion .collapse > .table-responsive > .table,
body.D_products_group_detail .trip_note #accordion .collapsing > .table-responsive > .table {
margin: 0;
}
body.D_products_group_detail .trip_note #accordion .card-body ul {
padding-left: 1.2em;
}
body.D_products_group_detail .trip_note #accordion .card-body li {
margin-bottom: .4em;
}
/* ==========================================================================
11. 彈窗（航班資訊／飯店／售價說明）
========================================================================== */
body.D_products_group_detail .modal .modal-content {
border: 0;
border-radius: var(--jf-r-lg);
overflow: hidden;
-webkit-box-shadow: var(--jf-sh-3);
box-shadow: var(--jf-sh-3);
}
body.D_products_group_detail .modal .modal-header {
background: -webkit-gradient(linear, left top, right top, from(var(--jf-navy)), to(var(--jf-navy-500)));
background: linear-gradient(90deg, var(--jf-navy), var(--jf-navy-500));
border-bottom: 0;
padding: 1rem 1.5rem;
}
body.D_products_group_detail .modal .modal-header .modal-title {
color: #fff;
font-size: 1.1875rem;
letter-spacing: .04em;
}
body.D_products_group_detail .modal .modal-header .close {
opacity: .85;
-webkit-transition: opacity var(--jf-t) var(--jf-ease), -webkit-transform var(--jf-t) var(--jf-ease);
transition: opacity var(--jf-t) var(--jf-ease), transform var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .modal .modal-header .close span {
color: #fff !important;
}
body.D_products_group_detail .modal .modal-header .close:hover {
opacity: 1;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
body.D_products_group_detail .modal .modal-footer {
border-top: 1px solid var(--jf-line);
background: var(--jf-navy-025);
}
body.D_products_group_detail .modal .modal-footer .btn-secondary {
background-color: var(--jf-navy);
border-color: var(--jf-navy);
border-radius: var(--jf-r-pill);
padding: .375rem 1.5rem;
font-weight: 600;
}
body.D_products_group_detail .modal .modal-footer .btn-secondary:hover {
background-color: var(--jf-navy-700);
border-color: var(--jf-navy-700);
}
/* ==========================================================================
11-b. 航班資訊彈窗
--------------------------------------------------------------------------
採用設計稿的排版模式：
https://design.travelindex.com.tw/Begonia/trip-new-2026-s2.html #exampleModalCenter
每個航段一張白色卡片，四欄網格：航空公司｜出發｜方向｜抵達，
去程／回程各一個膠囊標籤。色票沿用本站的深藍＋金，不套設計稿的暖紙色，
以免和頁面其它區塊的冷灰調打架。
結構對應（本站現有 DOM 不需改動）：
.detail_airline → 航空公司欄 .go → 出發 .time → 方向 .to → 抵達
航空公司名稱／班號、天數／時刻原本是以
分隔的純文字，無法單獨設定樣式，
由 gdetail-refine.js 補上 / 包裝與 .jf-* 標記（僅此彈窗內，純外觀用途）。
設計稿有「飛行約 N 小時」，本站資料沒有這個欄位，因此中間欄只保留方向指示。
========================================================================== */
body.D_products_group_detail #exampleModalCenter .modal-body {
background: #fbfcfe;
padding: 1.5rem 1.625rem 1.75rem;
}
/* 外框拿掉，改由每個航段自己成卡 */
body.D_products_group_detail #exampleModalCenter .flight_details {
border: 0;
border-radius: 0;
overflow: visible;
margin-top: 0;
}
body.D_products_group_detail #exampleModalCenter .flight_details + .flight_details {
margin-top: 1.25rem;
}
/* 頁面尾端有一個空的 .flight_details，由 gdetail-refine.js 標記後收起 */
body.D_products_group_detail #exampleModalCenter .flight_details.jf-empty {
display: none !important;
margin: 0 !important;
}
body.D_products_group_detail #exampleModalCenter .flight_details .details_box,
body.D_products_group_detail #exampleModalCenter .flight_details .details_box + .details_box {
border: 0;
}
/* 左側只有一個飛機圖示的直欄，在新排版裡沒有作用，收起來讓航段用滿寬度。
這些元素帶著 Bootstrap 的 .d-flex（display:flex !important），所以必須用 !important。 */
body.D_products_group_detail #exampleModalCenter .flight_details .details_box > h4 {
display: none !important;
}
body.D_products_group_detail #exampleModalCenter .flight_details .flight_infor {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
/* ---- 航段卡片 ---- */
body.D_products_group_detail #exampleModalCenter .flight_infor ul {
padding: 0;
margin: 0;
list-style: none;
}
body.D_products_group_detail #exampleModalCenter .flight_infor li {
display: grid;
grid-template-columns: 1fr 1.25fr .8fr 1.25fr;
gap: 14px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
padding: 16px 18px;
margin: 0 0 10px;
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
-webkit-transition: border-color var(--jf-t) var(--jf-ease), -webkit-box-shadow var(--jf-t) var(--jf-ease);
transition: border-color var(--jf-t) var(--jf-ease), box-shadow var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail #exampleModalCenter .flight_infor li:hover {
border-color: #c6d4e8;
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_detail #exampleModalCenter .flight_infor li:last-child {
margin-bottom: 0;
}
/* 站上這些欄位是用百分比寬度排的，改成網格後要放掉 */
body.D_products_group_detail #exampleModalCenter .flight_infor li > div {
width: auto !important;
max-width: none;
padding: 0;
border: 0 !important;
text-align: left;
}
/* ---- 去程／回程膠囊標籤 ----
標籤用絕對定位的 ::before，不會變成網格項目，也不需要新增節點。 */
body.D_products_group_detail #exampleModalCenter .flight_infor li.jf-leg-head {
position: relative;
margin-top: 42px;
}
body.D_products_group_detail #exampleModalCenter .flight_infor li.jf-leg-head::before {
content: attr(data-dir);
position: absolute;
top: -38px;
left: 0;
display: inline-block;
background: var(--jf-navy);
color: #fff;
font-family: var(--jf-font-ui);
font-size: .875rem;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.5;
padding: 4px 18px;
border-radius: var(--jf-r-pill);
white-space: nowrap;
-webkit-box-shadow: 0 3px 10px rgba(20, 38, 75, .22);
box-shadow: 0 3px 10px rgba(20, 38, 75, .22);
}
body.D_products_group_detail #exampleModalCenter .flight_infor li.jf-leg-head.jf-dir-back::before {
background: var(--jf-gold);
-webkit-box-shadow: 0 3px 10px rgba(200, 145, 47, .28);
box-shadow: 0 3px 10px rgba(200, 145, 47, .28);
}
/* ---- 航空公司欄 ---- */
body.D_products_group_detail #exampleModalCenter .flight_infor .detail_airline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
font-size: 1rem;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .detail_airline > br {
display: none;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .detail_airline img {
height: 26px;
width: auto;
margin: 0 0 6px !important;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .detail_airline span {
width: auto !important;
display: block;
text-align: left;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .jf-air-name {
display: block;
font-size: .9375rem;
font-weight: 700;
color: var(--jf-navy);
letter-spacing: .01em;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .jf-air-code {
display: block;
font-size: .78125rem;
font-weight: 700;
color: var(--jf-muted);
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* ---- 起降欄 ---- */
body.D_products_group_detail #exampleModalCenter .flight_infor .go,
body.D_products_group_detail #exampleModalCenter .flight_infor .to {
font-size: 1rem;
font-weight: 400;
color: var(--jf-ink);
}
body.D_products_group_detail #exampleModalCenter .flight_infor .jf-leg-time {
display: block;
font-family: var(--jf-font-display);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.25;
color: var(--jf-ink);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
body.D_products_group_detail #exampleModalCenter .flight_infor .jf-leg-meta {
display: block;
font-size: .75rem;
font-weight: 400;
color: var(--jf-muted);
line-height: 1.5;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .go > div,
body.D_products_group_detail #exampleModalCenter .flight_infor .to > div,
body.D_products_group_detail #exampleModalCenter .flight_infor .jf-leg-port {
font-size: .8125rem;
font-weight: 600;
color: var(--jf-ink-2);
margin-top: 2px;
line-height: 1.5;
}
/* ---- 中間方向欄 ---- */
body.D_products_group_detail #exampleModalCenter .flight_infor .time {
text-align: center !important;
font-size: .75rem;
color: var(--jf-muted);
position: relative;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .time hr {
height: 0;
background: none;
border: 0;
border-top: 1px dashed var(--jf-navy-100);
border-radius: 0;
margin: 0 0 8px;
width: 100%;
}
/* 站上原本用 FontAwesome 字符 + 絕對定位當方向指標，跨斷點位置不可靠，
這裡收掉，改用純 CSS 畫的金色箭頭（不依賴任何字型）。 */
body.D_products_group_detail #exampleModalCenter .flight_infor .time::after {
content: none !important;
display: none !important;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .time::before {
content: "";
display: block;
width: 7px;
height: 7px;
margin: 0 auto;
border-top: 2px solid var(--jf-gold);
border-right: 2px solid var(--jf-gold);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* ---- 彈窗標頭：圓形關閉鈕 ---- */
body.D_products_group_detail #exampleModalCenter .modal-header .close {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
margin: 0;
}
body.D_products_group_detail #exampleModalCenter .modal-header .close:hover {
background: rgba(255, 255, 255, .3);
-webkit-transform: none;
transform: none;
}
/* 團型明細頁的關閉鈕是 material-icons，這頁是 × 的 ，兩種都涵蓋 */
body.D_products_group_detail #exampleModalCenter .modal-header .close .material-icons,
body.D_products_group_detail #exampleModalCenter .modal-header .close span {
font-size: 1.375rem;
line-height: 1;
}
/* ---- 窄螢幕：單欄堆疊，箭頭轉為向下 ---- */
@media (max-width: 767px) {
body.D_products_group_detail #exampleModalCenter .modal-body {
padding: 1.125rem 1rem 1.25rem;
}
body.D_products_group_detail #exampleModalCenter .flight_infor li {
grid-template-columns: 1fr;
gap: 6px;
padding: 14px 16px;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .detail_airline {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* 站上原本是置中，單欄堆疊時要改成靠左才會跟下面的時刻對齊 */
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 8px;
padding-bottom: 8px !important;
border-bottom: 1px solid var(--jf-line-2) !important;
margin-bottom: 2px;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .detail_airline img {
margin: 0 !important;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .jf-air-name,
body.D_products_group_detail #exampleModalCenter .flight_infor .jf-air-code {
display: inline;
margin-right: 6px;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .time {
text-align: left !important;
}
body.D_products_group_detail #exampleModalCenter .flight_infor .time hr {
display: none;
}
/* 單欄堆疊時箭頭改為朝下，並靠左與時刻對齊 */
body.D_products_group_detail #exampleModalCenter .flight_infor .time::before {
margin: 0 0 0 4px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
/* ---- 飯店資訊 ---- */
body.D_products_group_detail .HotelInfo .HotelImg .carousel-inner,
body.D_products_group_detail .HotelInfo .HotelPic {
border-radius: var(--jf-r);
overflow: hidden;
}
body.D_products_group_detail .HotelInfo .HotelAdd {
color: var(--jf-muted);
font-size: .875rem;
}
/* ==========================================================================
12. 右側浮動工具列與章節側欄
========================================================================== */
@media (min-width: 992px) {
/* 不能用 overflow:hidden —— 下載／分享的展開選單是絕對定位在 li 外側，
一加上就會被裁掉。圓角本身已會裁切背景。 */
body.D_products_group_detail .sub_menu-trip .server_menu > ul > li {
border-radius: var(--jf-r) 0 0 var(--jf-r);
-webkit-box-shadow: -3px 6px 18px rgba(20, 38, 75, .18);
box-shadow: -3px 6px 18px rgba(20, 38, 75, .18);
-webkit-transition: -webkit-transform var(--jf-t) var(--jf-ease);
transition: transform var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .sub_menu-trip .server_menu > ul > li + li {
margin-top: 8px;
}
body.D_products_group_detail .sub_menu-trip .server_menu > ul > li > a {
border-radius: inherit;
}
body.D_products_group_detail .sub_menu-trip .server_menu > ul > li:hover {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
/* 章節側欄面板 */
body.D_products_group_detail .sub_menu-trip .trip_menu {
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_detail .sub_menu-trip .trip_menu li a {
border-bottom-color: var(--jf-line-2);
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_detail .sub_menu-trip .trip_menu li a span {
color: var(--jf-ink-2);
letter-spacing: .04em;
}
body.D_products_group_detail .sub_menu-trip .trip_menu li a:hover span {
color: var(--jf-navy);
}
/* 目前所在章節（.jf-active 由 gdetail-refine.js 標記） */
body.D_products_group_detail .sub_menu-trip .trip_menu li.jf-active a span {
color: var(--jf-navy);
font-weight: 700;
}
body.D_products_group_detail .sub_menu-trip .trip_menu li.jf-active a {
-webkit-box-shadow: inset 3px 0 0 var(--jf-gold);
box-shadow: inset 3px 0 0 var(--jf-gold);
background: var(--jf-navy-025);
}
}
/* 回頂按鈕的箭頭置中（站上用寫死的 margin 擺位，兩種尺寸下都不在圓心） */
body.D_products_group_detail .go-to-top a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* ==========================================================================
13. 進場動效（.jf-reveal → .jf-in 由 gdetail-refine.js 掛上）
========================================================================== */
body.D_products_group_detail .jf-reveal {
opacity: 0;
-webkit-transform: translateY(18px);
transform: translateY(18px);
-webkit-transition: opacity .55s var(--jf-ease), -webkit-transform .55s var(--jf-ease);
transition: opacity .55s var(--jf-ease), transform .55s var(--jf-ease);
}
body.D_products_group_detail .jf-in {
opacity: 1;
-webkit-transform: none;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
body.D_products_group_detail .jf-reveal,
body.D_products_group_detail .jf-in {
opacity: 1;
-webkit-transform: none;
transform: none;
-webkit-transition: none;
transition: none;
}
}
/* ==========================================================================
14. 閱讀進度條（由 gdetail-refine.js 建立）
========================================================================== */
body.D_products_group_detail .jf-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
z-index: 2147483000;
background: -webkit-gradient(linear, left top, right top,
from(var(--jf-navy)), to(var(--jf-gold)));
background: linear-gradient(90deg, var(--jf-navy), var(--jf-gold));
-webkit-transition: width .1s linear;
transition: width .1s linear;
pointer-events: none;
}
@media print {
body.D_products_group_detail .jf-progress { display: none !important; }
}
/* ==========================================================================
14-B. 手機版微調
--------------------------------------------------------------------------
桌機的字級在 390px 下會把首屏整個吃掉，這裡只收字級與留白，不動版面結構。
========================================================================== */
@media (max-width: 767px) {
body.D_products_group_detail section.group_banner.trip_banner h1 {
font-size: 1.375rem;
line-height: 1.6;
}
body.D_products_group_detail section.group_banner.trip_banner h3.price {
font-size: 1.875rem;
}
body.D_products_group_detail section.group_banner.trip_banner .basic_box > div > .container {
border-radius: var(--jf-r);
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
body.D_products_group_detail .group_table .group_table_box {
border-radius: var(--jf-r);
}
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title .day_title {
font-size: 1.5rem;
}
/* 餐食在手機是一項一行，右邊的大留白就不需要了 */
body.D_products_group_detail section.group_table.trip_day .info_box .info_box_title p.meal > span {
margin-right: 0;
}
body.D_products_group_detail .trip_note #accordion .card-header a.btn-link {
font-size: 1rem;
padding: 14px 16px;
}
}
/* ==========================================================================
15. 列印樣式
--------------------------------------------------------------------------
站上的「下載」是走瀏覽器列印，因此針對列印做最佳化：
隱藏浮動介面、強制展開所有說明、避免卡片被分頁切斷。
========================================================================== */
@media print {
body.D_products_group_detail .sub_menu-trip,
body.D_products_group_detail .go-to-top,
body.D_products_group_detail .Day_menu,
body.D_products_group_detail .menu_container,
body.D_products_group_detail .row.header,
body.D_products_group_detail .row.footer,
body.D_products_group_detail .basic-air-btn,
body.D_products_group_detail section.group_table.tripdown .nav-tabs {
display: none !important;
}
/* 說明區全部展開，不要印出收合後的空殼 */
body.D_products_group_detail .trip_note #accordion .collapse {
display: block !important;
height: auto !important;
}
body.D_products_group_detail .trip_note #accordion .card-header a.btn-link {
background: none !important;
color: #000 !important;
}
/* 深色標題帶在紙上只是浪費碳粉 */
body.D_products_group_detail section.group_table > .container > .text-center > h2 {
color: #000 !important;
text-shadow: none !important;
}
body.D_products_group_detail section.group_table > .container > .text-center > h2::before {
color: #666 !important;
text-shadow: none !important;
}
/* 每一天盡量不要被分頁切斷 */
body.D_products_group_detail section.group_table.trip_day .info_box {
page-break-inside: avoid;
break-inside: avoid;
}
body.D_products_group_detail .group_table .group_table_box {
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 0 !important;
}
}
| |