也有
包住時的圖說（:has 不支援的瀏覽器會自動略過此規則） */
body.D_products_group_molddetail .item p:has(> img) + p {
text-align: center;
font-size: .875rem;
color: var(--jf-muted);
margin-top: .55rem;
}
/* ---- 每日行程內文的項目清單 ----
站台全域有一條 `ol, ul { list-style: none; margin: 0; padding: 0 }`，
連編輯器打在每日行程裡的清單符號一起清掉了。這裡只在每日行程的詳細內容
（.DayTripMoreInfo）範圍內還原瀏覽器預設的項目符號與縮排。
餐食清單（.TripMeal 的 .list-unstyled）不在這個範圍內，仍明確排除以防萬一。 */
body.D_products_group_molddetail .DayTripMoreInfo ul:not(.list-unstyled),
body.D_products_group_molddetail .DayTripMoreInfo ol:not(.list-unstyled) {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
body.D_products_group_molddetail .DayTripMoreInfo ul:not(.list-unstyled) {
list-style: disc outside;
}
body.D_products_group_molddetail .DayTripMoreInfo ol:not(.list-unstyled) {
list-style: decimal outside;
}
/* 巢狀清單沿用瀏覽器預設的層級符號，底部不再多留一段間距 */
body.D_products_group_molddetail .DayTripMoreInfo ul:not(.list-unstyled) ul {
list-style-type: circle;
}
body.D_products_group_molddetail .DayTripMoreInfo ul:not(.list-unstyled) ul ul {
list-style-type: square;
}
body.D_products_group_molddetail .DayTripMoreInfo ul:not(.list-unstyled) ul,
body.D_products_group_molddetail .DayTripMoreInfo ul:not(.list-unstyled) ol,
body.D_products_group_molddetail .DayTripMoreInfo ol:not(.list-unstyled) ul,
body.D_products_group_molddetail .DayTripMoreInfo ol:not(.list-unstyled) ol {
margin-bottom: 0;
}
/* 清單項目與內文段落同一套行距與字色 */
body.D_products_group_molddetail .DayTripMoreInfo li {
line-height: 1.95;
color: var(--jf-ink-2);
letter-spacing: .01em;
}
/* .stroke_box .line 不是分隔線，裡面其實包著標題。
custom_style.css 給它一張裝飾線底圖（http:// 開頭，在 https 頁面會被當混合內容擋掉），
並用 h1 的白底去遮擋線條。既然底圖本來就載不出來，這裡把底圖與白底一起收掉，
標題就是乾淨的置中標題。 */
body.D_products_group_molddetail .stroke_box .layout_col-12.line {
background: none;
height: auto;
border: 0;
margin: 0 auto 1rem;
}
body.D_products_group_molddetail .stroke_box .layout_col-12.line > h1,
body.D_products_group_molddetail .stroke_box .line > h1 {
background: transparent;
padding-left: 0;
padding-right: 0;
}
/* 編輯器內容中的紅色重點字略微降低刺眼度 */
body.D_products_group_molddetail .DayTripMoreInfo span[style*="B22222"],
body.D_products_group_molddetail .item span[style*="B22222"] {
color: var(--jf-price) !important;
font-weight: 600;
}
/* ==========================================================================
8. 出發日期（DepartureDate）
========================================================================== */
/* ---- 檢視模式切換 tab ---- */
body.D_products_group_molddetail .Detail.DepartureDate .nav-tabs .nav-link {
border-color: var(--jf-navy-100);
color: var(--jf-navy);
background: #fff;
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
}
body.D_products_group_molddetail .Detail.DepartureDate .nav-tabs .nav-link:hover {
border-color: var(--jf-navy);
}
body.D_products_group_molddetail .Detail.DepartureDate .nav-tabs .nav-link:hover .TabTitle::before {
color: var(--jf-navy);
}
body.D_products_group_molddetail .Detail.DepartureDate .nav-tabs .nav-item.show .nav-link,
body.D_products_group_molddetail .Detail.DepartureDate .nav-tabs .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);
}
body.D_products_group_molddetail .Detail.DepartureDate .nav-tabs {
margin-bottom: 1.5rem;
}
/* 圖例原本 absolute 到 top:120px，會壓在深色標題帶上；改為隨內容排在日曆上方 */
body.D_products_group_molddetail .Detail.DepartureDate .IconMean {
position: static;
top: auto;
right: auto;
text-align: right;
margin: 0 0 .75rem;
}
body.D_products_group_molddetail .Detail.DepartureDate .IconMean span {
color: var(--jf-ink-2);
font-size: .8125rem;
}
/* ---- 列表模式：整列卡片化 ---- */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table thead th {
background-color: transparent !important;
color: var(--jf-muted);
font-size: .8125rem;
font-weight: 600;
letter-spacing: .06em;
border-bottom: 1px solid var(--jf-line) !important;
padding-bottom: .5rem;
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table tbody tr {
background: #fff;
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
margin-top: 12px;
padding: 4px 0;
position: relative;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
-webkit-transition: -webkit-transform var(--jf-t) var(--jf-ease), -webkit-box-shadow var(--jf-t) var(--jf-ease), border-color var(--jf-t) var(--jf-ease);
transition: transform var(--jf-t) var(--jf-ease), box-shadow var(--jf-t) var(--jf-ease), border-color var(--jf-t) var(--jf-ease);
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table tbody tr.month_2 {
background: #fff;
}
/* 左側指示色條，hover 才出現 */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table tbody tr::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
/* 自帶圓角，這樣 tr 就不需要 overflow:hidden（否則備註文字會被裁掉） */
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_molddetail .Detail.DepartureDate .SearchTable .table tbody tr:hover {
border-color: #c6d4e8;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table tbody tr:hover::before {
opacity: 1;
}
/* 移除原本用白色 border 模擬間距的做法，改由 margin 控制 */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table tbody th,
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table tbody td {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* 出發日期 */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .DateStart .YMD {
color: var(--jf-navy);
font-size: 1.0625rem;
font-weight: 700;
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .DateStart .week {
color: var(--jf-muted);
font-size: .8125rem;
margin-left: 2px;
}
/* 行程名稱 */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .ItineraryName {
color: var(--jf-ink-2);
font-size: .9375rem;
line-height: 1.65;
text-align: left;
}
/* 原本各欄合計寬度（140px + 45% + 120px + 10% + 25%）會超出容器造成橫向溢出，
站上的 flex 是用 `flex: 0 0 X% !important` 寫死不可壓縮，因此這裡放開壓縮。 */
body.D_products_group_molddetail .MGO .Detail.DepartureDate .SearchTable .table tbody tr > .ItineraryName,
body.D_products_group_molddetail .MGO .Detail.DepartureDate .SearchTable .table tbody tr > .Remark,
body.D_products_group_molddetail .MGO .Detail.DepartureDate .SearchTable .table thead tr > .ItineraryName,
body.D_products_group_molddetail .MGO .Detail.DepartureDate .SearchTable .table thead tr > .Remark {
-ms-flex-negative: 1 !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* 售價 */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable tbody .TextPrice {
color: var(--jf-price);
font-size: 1.25rem;
font-weight: 700;
}
/* 出團狀態改為狀態膠囊 */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .SaleSituation span {
display: inline-block;
padding: 3px 14px;
border-radius: var(--jf-r-pill);
font-size: .8125rem;
font-weight: 600;
letter-spacing: .04em;
white-space: nowrap;
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .SaleSituation span.BtnPrimary {
background-color: #eaf7f1;
border: 1px solid #c9e8da;
color: var(--jf-ok);
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .SaleSituation span.BtnSecondary {
background-color: #e9f8fd;
border: 1px solid #c3e9f7;
color: #0b86bb;
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .SaleSituation span.BtnMuted {
background-color: #f2f4f7;
border: 1px solid var(--jf-line);
color: var(--jf-muted);
}
/* 備註 */
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .Remark {
-ms-flex-negative: 1;
flex-shrink: 1;
min-width: 0;
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .Remark p {
font-size: .8125rem;
line-height: 1.6;
color: var(--jf-gold);
background: var(--jf-gold-soft);
border-radius: var(--jf-r-sm);
padding: 4px 10px;
}
@media (max-width: 991.98px) {
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table tbody tr {
border: 1px solid var(--jf-line);
padding: 10px 4px;
}
body.D_products_group_molddetail .Detail.DepartureDate .SearchTable .table th:first-child {
background: transparent;
}
}
/* ---- 價格模式 ---- */
body.D_products_group_molddetail .Detail .tour-price-table {
border-color: var(--jf-line) !important;
}
body.D_products_group_molddetail .Detail .tour-price-table thead th {
background-color: var(--jf-navy-025) !important;
color: var(--jf-navy);
font-weight: 600;
letter-spacing: .04em;
border-color: var(--jf-line) !important;
}
body.D_products_group_molddetail .Detail .tour-price-table tbody td {
border-color: var(--jf-line) !important;
}
body.D_products_group_molddetail .Detail .tour-price-table tbody td.font-weight-bold {
color: var(--jf-price);
font-size: 1.125rem;
}
body.D_products_group_molddetail .Detail .tour-price-chip {
background: #fff !important;
border-color: var(--jf-line) !important;
border-radius: 10px !important;
min-width: 82px;
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_molddetail .Detail .tour-price-chip:hover {
border-color: var(--jf-navy) !important;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_molddetail .Detail .tour-price-chip .badge {
border-radius: var(--jf-r-pill);
font-weight: 600;
padding: .3em .7em;
}
/* ==========================================================================
9. 每日行程（DayTrip）
========================================================================== */
/* ---- 天數快速導覽列 ----
站上這一列已改用 Swiper：#list-example 掛 .swiper，天數包在
.swiper-wrapper > .swiper-slide 裡，尾端另有 .swiper-button-prev/next。
橫向排列與溢出捲動一律交給 swiper-bundle.css 與站上的 Swiper 實例，
這裡只負責外觀，不去動它的版面機制（不設 display / overflow / transform）。 */
body.D_products_group_molddetail #day_menu .list-group {
background: rgba(255, 255, 255, .96);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
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 會自己把箭頭鎖起來 */
padding: 8px 34px;
/* 站上留著 overflow-x:auto（Swiper 之前是靠它做橫向捲動）。
Swiper 接手後改用 transform 平移滑塊，置中時內容會超出容器右緣，
於是長出一條水平捲軸 —— 那條捲軸佔掉 15px 高度，把導覽列從 50px 撐成 65px。
站上 scrollspy 的門檻是「頁首高 − 導覽列高」，導覽列一變高門檻就從 21px 掉到 6px，
高亮因此永遠少亮一天。Swiper 本來就該是 overflow:hidden。 */
overflow: hidden;
}
body.D_products_group_molddetail #day_menu .list-group .swiper-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* 站上已有 width:auto，這裡一併保險，並讓膠囊在滑塊內垂直置中 */
body.D_products_group_molddetail #day_menu .list-group .swiper-slide {
width: auto;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* ---- 前後切換箭頭 ----
站上預設是 27px 粗的藍色大箭頭，壓在膠囊上很搶眼，改成小圓鈕。 */
body.D_products_group_molddetail #day_menu .list-group .swiper-button-prev,
body.D_products_group_molddetail #day_menu .list-group .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_molddetail #day_menu .list-group .swiper-button-prev {
left: 6px;
}
body.D_products_group_molddetail #day_menu .list-group .swiper-button-next {
right: 6px;
}
body.D_products_group_molddetail #day_menu .list-group .swiper-button-prev::after,
body.D_products_group_molddetail #day_menu .list-group .swiper-button-next::after {
font-size: 11px;
font-weight: 700;
}
body.D_products_group_molddetail #day_menu .list-group .swiper-button-prev:hover,
body.D_products_group_molddetail #day_menu .list-group .swiper-button-next:hover {
background: var(--jf-navy);
border-color: var(--jf-navy);
color: #fff;
}
/* 貼齊頁首，不留空隙。
站上原生 JS 在 window.load 時記下頁首高度（87px）後就固定不再更新，
但頁首捲動後會縮成 71px，於是中間留下 16px 空隙。
這裡由 molddetail-refine.js 持續量測固定在上方的頁首底緣寫入 --jf-daybar-top，
JS 是用行內樣式設 top，所以必須 !important 才蓋得掉。
只有在真的量到固定元素時才會掛上 .jf-daybar-sync，否則交還給站上原本的值。 */
html.jf-daybar-sync body.D_products_group_molddetail #day_menu .list-group.Fixed_Date_Bar {
top: var(--jf-daybar-top) !important;
}
/* 站上把天數做成 50×50 的圓形按鈕（width/height/line-height 都寫死），
這裡還原成隨字寬撐開的膠囊，三個尺寸屬性都要明確蓋掉才不會被撐成圓形。 */
body.D_products_group_molddetail #day_menu .list-group .list-group-item {
display: block;
width: auto;
height: auto;
line-height: 1.5;
white-space: nowrap;
color: var(--jf-navy-500);
font-size: .875rem;
font-weight: 600;
letter-spacing: .04em;
padding: 6px 14px;
margin: 0 2px;
border: 0;
border-radius: var(--jf-r-pill);
background-color: transparent;
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_molddetail #day_menu .list-group .list-group-item:hover {
background-color: var(--jf-navy-050);
border-color: transparent;
color: var(--jf-navy);
}
body.D_products_group_molddetail #day_menu .list-group .list-group-item.active {
background-color: var(--jf-navy);
border-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);
}
/* ---- 天數導覽列高亮的判定門檻 ----
站上 scrollspy 的條件是「.DayTripBlock 上緣距視窗頂端 ≤ 頁首高 − 導覽列高（約 21px）」，
但把「導覽列下緣貼齊標題上緣」之後，區塊上緣會停在約 35px，差 14px 就會少亮一天。
這裡把 padding-top 加大、margin-top 等量減少：版面淨位移完全不變
（.DayBlock 是 position:absolute 且未指定 top，會跟著 padding 一起移動），
但區塊上緣往上移 30px，站上原本的判定就自然成立，不需要接手它的 scrollspy。
手機版（≤768px）custom_style.css 的 padding-top 本來就是 100/175px，已經夠大，維持原狀。 */
@media (min-width: 769px) {
body.D_products_group_molddetail .Detail.DayTrip .DayTripBlock {
padding-top: 115px;
margin-top: -123px; /* 淨值維持 -8px */
}
body.D_products_group_molddetail .Detail.DayTrip .DayTripBlock + .DayTripBlock {
padding-top: 115px;
margin-top: -100px; /* 淨值維持 +15px */
}
}
/* ---- 天數徽章 ---- */
body.D_products_group_molddetail .Detail.DayTrip .DayBlock {
border-bottom: 0;
/* 徽章在 DOM 上是行程卡片的前一個兄弟節點，需明確拉到卡片上層 */
z-index: 3;
}
/* 高度對齊標題列（h3 的 min-height 86px）。
站上徽章是 100px，比標題列高，會超出標題底線壓到下面餐食的 icon 區塊。 */
body.D_products_group_molddetail .Detail.DayTrip .DayBlock > div {
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;
height: 86px;
border-radius: var(--jf-r) 0 var(--jf-r) 0;
font-size: .9375rem;
letter-spacing: .06em;
-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_molddetail .Detail.DayTrip .DayBlock > div span {
font-family: var(--jf-font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
}
/* 原本的三角形指標在絕對定位下容易錯位，收起以求乾淨 */
body.D_products_group_molddetail .Detail.DayTrip .DayBlock > div::after {
display: none;
}
/* 手機版：站上樣式把 h3 的左側留白移除（margin-left:0），
100px 的方形徽章會壓到標題文字，因此改為卡片左上角的小標籤。 */
@media (max-width: 767px) {
body.D_products_group_molddetail .Detail.DayTrip .DayBlock > div {
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 32px;
font-size: .75rem;
letter-spacing: .04em;
border-radius: var(--jf-r) 0 var(--jf-r) 0;
-webkit-box-shadow: 2px 2px 8px rgba(20, 38, 75, .22);
box-shadow: 2px 2px 8px rgba(20, 38, 75, .22);
}
body.D_products_group_molddetail .Detail.DayTrip .DayBlock > div span {
font-size: 1rem;
padding: 0 2px;
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock.ImgNone h3,
body.D_products_group_molddetail .Detail.DayTrip .TripBlock h3 {
padding-top: 42px !important;
}
}
/* ---- 每日卡片 ----
注意：不能用 overflow:hidden。「展開／收合詳細行程」按鈕是絕對定位在
bottom:-15px（刻意露出卡片外緣），一加上就會被裁掉而顯示不完整。
圓角改由標題列與詳細行程區塊各自處理。 */
body.D_products_group_molddetail .Detail.DayTrip .TripBlock {
background: #fff;
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
-webkit-box-shadow: var(--jf-sh-1);
box-shadow: var(--jf-sh-1);
-webkit-transition: -webkit-box-shadow var(--jf-t) var(--jf-ease), border-color var(--jf-t) var(--jf-ease);
transition: box-shadow var(--jf-t) var(--jf-ease), border-color var(--jf-t) var(--jf-ease);
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock:hover {
border-color: #c6d4e8;
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock h3 {
font-size: 1.125rem;
line-height: 1.7;
color: var(--jf-navy);
letter-spacing: .01em;
min-height: 86px;
border-bottom: 1px solid var(--jf-line-2);
background: -webkit-gradient(linear, left top, right top, from(var(--jf-navy-025)), to(#fff));
background: linear-gradient(90deg, var(--jf-navy-025), #fff);
/* 卡片沒有 overflow:hidden，所以背景要自己收右上角 */
border-top-right-radius: var(--jf-r);
}
@media (max-width: 575px) {
body.D_products_group_molddetail .Detail.DayTrip .TripBlock h3 {
font-size: 1.0625rem;
min-height: 0;
}
}
/* 餐食／住宿 icon 區塊分色 */
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripMeal .IconTitle {
background-color: #fdf6ec;
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripMeal .IconTitle span {
color: var(--jf-meal);
font-size: 30px;
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripHotel .IconTitle {
background-color: var(--jf-navy-025);
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripHotel .IconTitle span {
color: var(--jf-navy-500);
font-size: 30px;
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripMeal,
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripHotel {
border-color: var(--jf-line-2) !important;
}
/* 餐食維持站上原本的純文字呈現（餐別粗體、內容正常字重、橫向排列），
這裡不做任何覆寫。
2026-08-17 移除原本的膠囊色籤（早餐橘／午餐綠／晚餐紫），
molddetail-refine.js 的 initMealTags() 也一併移除。 */
/* 住宿連結 */
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripHotel > div > a {
color: var(--jf-navy);
font-weight: 600;
text-decoration: underline;
-webkit-text-decoration-color: var(--jf-navy-100);
text-decoration-color: var(--jf-navy-100);
text-underline-offset: 3px;
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock .TripHotel > div > a:hover {
color: var(--jf-sky);
-webkit-text-decoration-color: var(--jf-sky);
text-decoration-color: var(--jf-sky);
}
/* ---- 詳細行程內容 ---- */
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .card.card-body {
background: #fbfcfe;
border: 0;
border-top: 1px solid var(--jf-line-2);
/* 卡片沒有 overflow:hidden，所以背景要自己收下方兩角 */
border-radius: 0 0 var(--jf-r) var(--jf-r);
}
/* ---- 展開／收合按鈕（保留既有 ::before 文字機制，僅做外觀修飾） ---- */
body.D_products_group_molddetail .Detail.DayTrip .DayTripBtn {
border-radius: var(--jf-r-pill);
-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_molddetail .Detail.DayTrip .DayTripBtn:hover {
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_molddetail .Detail.DayTrip .DayTripBtn.Multiple {
border-color: var(--jf-navy-100);
color: var(--jf-navy);
}
/* ---- hover 文字顏色 ----
站上 hover 時只換了底色（深藍／深灰），文字顏色沒跟著換，
變成深藍字壓在深藍底上、幾乎看不到。按鈕文字是 ::before 畫的，
要連 ::before 與 span 一起指定成白色。 */
body.D_products_group_molddetail .Detail.DayTrip .DayTripBtn.Multiple:hover,
body.D_products_group_molddetail .Detail.DayTrip .DayTripBtn.Multiple:focus,
body.D_products_group_molddetail .Detail.DayTrip .DayTripBtn.Multiple:hover::before,
body.D_products_group_molddetail .Detail.DayTrip .DayTripBtn.Multiple:hover span,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .DayTripBtn:hover,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .DayTripBtn:focus,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .DayTripBtn:hover::before,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .DayTripBtn:hover span,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .collapse.show + .DayTripBtn:hover,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .collapse.show + .DayTripBtn:hover::before,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .collapse.show + .DayTripBtn:hover span {
color: #fff;
}
body.D_products_group_molddetail .Detail.DayTrip .DayTripBtn.Multiple:hover,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .DayTripBtn:hover,
body.D_products_group_molddetail .Detail.DayTrip .DayTripMoreInfo .collapse.show + .DayTripBtn:hover {
background-color: var(--jf-navy);
border-color: var(--jf-navy);
}
/* ==========================================================================
10. 訂購須知（TripNote / Remarks / TipSuggestion）
========================================================================== */
body.D_products_group_molddetail .Detail .BorderMuted {
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
background: #fcfdfe;
}
body.D_products_group_molddetail .Detail .BorderMuted h3 {
font-size: 1.0625rem;
font-weight: 700;
color: var(--jf-navy) !important;
letter-spacing: .02em;
}
body.D_products_group_molddetail .Detail .BorderMuted ul {
padding-left: 1.25rem;
list-style: none;
}
body.D_products_group_molddetail .Detail .BorderMuted ul > li {
position: relative;
line-height: 1.9;
color: var(--jf-ink-2);
padding-left: .25rem;
}
body.D_products_group_molddetail .Detail .BorderMuted ul > li::before {
content: "";
position: absolute;
left: -.9rem;
top: .85em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--jf-navy-300);
}
body.D_products_group_molddetail .Detail .TripNoteBlock {
background-color: var(--jf-navy-025);
border: 1px solid var(--jf-navy-100);
border-left: 4px solid var(--jf-navy-300);
border-radius: var(--jf-r-sm);
}
body.D_products_group_molddetail .Detail .TripNoteItems + .TripNoteItems::before {
background: var(--jf-line);
}
body.D_products_group_molddetail .Detail .TripNoteBlock .NoteTitle h3 {
color: var(--jf-navy);
}
/* ==========================================================================
11. 彈窗（航班資訊／飯店／售價說明）
========================================================================== */
body.D_products_group_molddetail .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_molddetail .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_molddetail .modal .modal-header .modal-title {
color: #fff;
font-size: 1.1875rem;
letter-spacing: .04em;
}
body.D_products_group_molddetail .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_molddetail .modal .modal-header .close span {
color: #fff !important;
}
body.D_products_group_molddetail .modal .modal-header .close:hover {
opacity: 1;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
body.D_products_group_molddetail .modal .modal-footer {
border-top: 1px solid var(--jf-line);
background: var(--jf-navy-025);
}
body.D_products_group_molddetail .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_molddetail .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 #flightModal
每個航段一張白色卡片，四欄網格：航空公司｜出發｜方向｜抵達，
去程／回程各一個膠囊標籤。色票沿用本站的深藍＋金，不套設計稿的暖紙色，
以免和頁面其它區塊的冷灰調打架。
結構對應（本站現有 DOM 不需改動）：
.detail_airline → 航空公司欄 .go → 出發 .time → 方向 .to → 抵達
航空公司名稱／班號、天數／時刻原本是以
分隔的純文字，無法單獨設定樣式，
由 molddetail-refine.js 補上 / 包裝與 .jf-* 標記（僅此彈窗內，純外觀用途）。
設計稿有「飛行約 N 小時」，本站資料沒有這個欄位，因此中間欄只保留方向指示。
========================================================================== */
body.D_products_group_molddetail #flightModal .modal-body {
background: #fbfcfe;
padding: 1.5rem 1.625rem 1.75rem;
}
/* 外框拿掉，改由每個航段自己成卡 */
body.D_products_group_molddetail #flightModal .flight_details {
border: 0;
border-radius: 0;
overflow: visible;
margin-top: 0;
}
body.D_products_group_molddetail #flightModal .flight_details + .flight_details {
margin-top: 1.25rem;
}
/* 頁面尾端有一個空的 .flight_details，由 molddetail-refine.js 標記後收起 */
body.D_products_group_molddetail #flightModal .flight_details.jf-empty {
display: none !important;
margin: 0 !important;
}
body.D_products_group_molddetail #flightModal .flight_details .details_box,
body.D_products_group_molddetail #flightModal .flight_details .details_box + .details_box {
border: 0;
}
/* 左側只有一個飛機圖示的直欄，在新排版裡沒有作用，收起來讓航段用滿寬度。
這些元素帶著 Bootstrap 的 .d-flex（display:flex !important），所以必須用 !important。 */
body.D_products_group_molddetail #flightModal .flight_details .details_box > h4 {
display: none !important;
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .flight_infor ul {
padding: 0;
margin: 0;
list-style: none;
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .flight_infor li:hover {
border-color: #c6d4e8;
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_molddetail #flightModal .flight_infor li:last-child {
margin-bottom: 0;
}
/* 站上這些欄位是用百分比寬度排的，改成網格後要放掉 */
body.D_products_group_molddetail #flightModal .flight_infor li > div {
width: auto !important;
max-width: none;
padding: 0;
border: 0 !important;
text-align: left;
}
/* ---- 去程／回程膠囊標籤 ----
標籤用絕對定位的 ::before，不會變成網格項目，也不需要新增節點。 */
body.D_products_group_molddetail #flightModal .flight_infor li.jf-leg-head {
position: relative;
margin-top: 42px;
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .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_molddetail #flightModal .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_molddetail #flightModal .flight_infor .detail_airline > br {
display: none;
}
body.D_products_group_molddetail #flightModal .flight_infor .detail_airline img {
height: 26px;
width: auto;
margin: 0 0 6px !important;
}
body.D_products_group_molddetail #flightModal .flight_infor .detail_airline span {
width: auto !important;
display: block;
text-align: left;
}
body.D_products_group_molddetail #flightModal .flight_infor .jf-air-name {
display: block;
font-size: .9375rem;
font-weight: 700;
color: var(--jf-navy);
letter-spacing: .01em;
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .flight_infor .go,
body.D_products_group_molddetail #flightModal .flight_infor .to {
font-size: 1rem;
font-weight: 400;
color: var(--jf-ink);
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .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_molddetail #flightModal .flight_infor .go > div,
body.D_products_group_molddetail #flightModal .flight_infor .to > div,
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .flight_infor .time {
text-align: center !important;
font-size: .75rem;
color: var(--jf-muted);
position: relative;
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .flight_infor .time::after {
content: none !important;
display: none !important;
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .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_molddetail #flightModal .modal-header .close:hover {
background: rgba(255, 255, 255, .3);
-webkit-transform: none;
transform: none;
}
body.D_products_group_molddetail #flightModal .modal-header .close .material-icons {
font-size: 1.375rem;
}
/* ---- 窄螢幕：單欄堆疊，箭頭轉為向下 ---- */
@media (max-width: 767px) {
body.D_products_group_molddetail #flightModal .modal-body {
padding: 1.125rem 1rem 1.25rem;
}
body.D_products_group_molddetail #flightModal .flight_infor li {
grid-template-columns: 1fr;
gap: 6px;
padding: 14px 16px;
}
body.D_products_group_molddetail #flightModal .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_molddetail #flightModal .flight_infor .detail_airline img {
margin: 0 !important;
}
body.D_products_group_molddetail #flightModal .flight_infor .jf-air-name,
body.D_products_group_molddetail #flightModal .flight_infor .jf-air-code {
display: inline;
margin-right: 6px;
}
body.D_products_group_molddetail #flightModal .flight_infor .time {
text-align: left !important;
}
body.D_products_group_molddetail #flightModal .flight_infor .time hr {
display: none;
}
/* 單欄堆疊時箭頭改為朝下，並靠左與時刻對齊 */
body.D_products_group_molddetail #flightModal .flight_infor .time::before {
margin: 0 0 0 4px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
/* ---- 飯店資訊 ---- */
body.D_products_group_molddetail .HotelInfo .HotelImg .carousel-inner,
body.D_products_group_molddetail .HotelInfo .HotelPic {
border-radius: var(--jf-r);
overflow: hidden;
}
body.D_products_group_molddetail .HotelInfo .HotelAdd {
color: var(--jf-muted);
font-size: .875rem;
}
/* ==========================================================================
12. 右側浮動工具列與天數側欄
========================================================================== */
@media (min-width: 992px) {
/* 這裡不能用 overflow:hidden —— 下載／分享的展開選單是絕對定位在 li 外側
（right:-110px / -220px），一加上就會被裁掉。圓角本身已會裁切背景。 */
body.D_products_group_molddetail .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_molddetail .Detail.sub_menu-trip .server_menu > ul > li + li {
margin-top: 8px;
}
/* 「收藏」的底色是掛在裡面的 上（其他三顆掛在 li 上），
方角的 會蓋掉 li 的圓角，所以讓直接子層的 繼承同樣的圓角。
只選直接子層，不會影響下載／分享展開選單裡的 。 */
body.D_products_group_molddetail .Detail.sub_menu-trip .server_menu > ul > li > a {
border-radius: inherit;
}
body.D_products_group_molddetail .Detail.sub_menu-trip .server_menu > ul > li:hover {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
/* 章節側欄面板 */
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu {
width: 118px;
border: 1px solid var(--jf-line);
border-radius: var(--jf-r);
padding: 14px 12px 6px;
-webkit-box-shadow: var(--jf-sh-2);
box-shadow: var(--jf-sh-2);
}
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu i {
color: var(--jf-gold);
font-size: 20px;
}
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu li a {
border-bottom-color: var(--jf-line-2);
padding-bottom: 10px;
-webkit-transition: all var(--jf-t) var(--jf-ease);
transition: all var(--jf-t) var(--jf-ease);
}
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu li a span {
color: var(--jf-ink-2);
font-size: .9375rem;
letter-spacing: .04em;
}
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu li a:hover span {
color: var(--jf-navy);
}
/* 目前所在章節（jf-active 由 molddetail-refine.js 標記） */
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu li.jf-active a span {
color: var(--jf-navy);
font-weight: 700;
}
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu li.jf-active a::before {
content: "";
position: absolute;
left: -8px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 3px;
height: 16px;
border-radius: 2px;
background: var(--jf-navy);
}
}
@media (max-width: 991.98px) {
body.D_products_group_molddetail .Detail.sub_menu-trip .sub_inside {
-webkit-box-shadow: 0 -4px 16px rgba(20, 38, 75, .14);
box-shadow: 0 -4px 16px rgba(20, 38, 75, .14);
}
body.D_products_group_molddetail .Detail.sub_menu-trip .trip_menu select {
color: var(--jf-navy);
font-family: var(--jf-font-ui);
font-weight: 600;
}
}
/* 回頁首（原生 JS 用 fadeIn/fadeOut 控制 display，這裡不觸碰 display） */
body.D_products_group_molddetail .go-to-top .top {
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));
-webkit-box-shadow: 0 4px 14px rgba(20, 38, 75, .34);
box-shadow: 0 4px 14px rgba(20, 38, 75, .34);
/* 站上是用寫死的 margin 去擺箭頭（margin-top:12px / margin-left:18px），
在 50px 與 40px 兩種尺寸下都不會置中。改用 flex 置中。 */
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
body.D_products_group_molddetail .go-to-top:hover .top {
background: -webkit-gradient(linear, left top, left bottom, from(var(--jf-navy-700)), to(var(--jf-navy-500)));
background: linear-gradient(180deg, var(--jf-navy-700), var(--jf-navy-500));
}
/* 箭頭是用 border 畫的方框旋轉 45 度，旋轉後墨色重心會偏上約 1/4 邊長，
所以除了 flex 置中之外再往下補正，視覺上才會真的在圓心。 */
body.D_products_group_molddetail .go-to-top .top::after {
margin: 0 !important;
position: relative;
top: 4px;
-webkit-transition: top .3s var(--jf-ease);
transition: top .3s var(--jf-ease);
}
/* 原本的 hover 是靠改 margin-top 讓箭頭上移，這裡用 top 重現同樣的效果 */
body.D_products_group_molddetail .go-to-top:hover .top::after {
margin: 0 !important;
top: -1px;
}
@media (max-width: 1199px) {
body.D_products_group_molddetail .go-to-top .top::after {
top: 2px;
}
body.D_products_group_molddetail .go-to-top:hover .top::after {
top: -2px;
}
}
body.D_products_group_molddetail .go-to-top .top-txt {
display: none;
}
/* ==========================================================================
13. 閱讀進度條（由 molddetail-refine.js 建立）
========================================================================== */
body.D_products_group_molddetail .jf-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 1080;
pointer-events: none;
background: transparent;
}
body.D_products_group_molddetail .jf-progress > span {
display: block;
height: 100%;
width: 0;
background: -webkit-gradient(linear, left top, right top, from(var(--jf-navy)), to(var(--jf-sky)));
background: linear-gradient(90deg, var(--jf-navy), var(--jf-sky));
-webkit-transition: width .12s linear;
transition: width .12s linear;
}
/* ==========================================================================
14. 進場動效
========================================================================== */
/* 注意：這裡刻意不用 will-change。will-change:transform 會讓元素成為堆疊脈絡，
使每日行程卡片蓋住左側的天數徽章（徽章在 DOM 中是前一個兄弟節點）。 */
body.D_products_group_molddetail .jf-reveal {
opacity: 0;
-webkit-transform: translateY(18px);
transform: translateY(18px);
-webkit-transition: opacity .65s var(--jf-ease), -webkit-transform .65s var(--jf-ease);
transition: opacity .65s var(--jf-ease), transform .65s var(--jf-ease);
}
body.D_products_group_molddetail .jf-reveal.jf-in {
opacity: 1;
-webkit-transform: none;
transform: none;
}
/* 使用者偏好減少動態時，全部關閉 */
@media (prefers-reduced-motion: reduce) {
body.D_products_group_molddetail .jf-reveal,
body.D_products_group_molddetail .jf-reveal.jf-in {
opacity: 1 !important;
-webkit-transform: none !important;
transform: none !important;
-webkit-transition: none !important;
transition: none !important;
}
body.D_products_group_molddetail * {
-webkit-animation-duration: .001s !important;
animation-duration: .001s !important;
-webkit-transition-duration: .001s !important;
transition-duration: .001s !important;
}
}
/* ==========================================================================
15. 列印樣式
--------------------------------------------------------------------------
站上的「下載 PDF」是走瀏覽器列印，因此針對列印做最佳化：
隱藏浮動介面、強制展開所有詳細行程、避免卡片被分頁切斷。
========================================================================== */
@media print {
body.D_products_group_molddetail .sub_menu-trip,
body.D_products_group_molddetail .go-to-top,
body.D_products_group_molddetail .jf-progress,
body.D_products_group_molddetail #day_menu .list-group,
body.D_products_group_molddetail .DayTripBtn,
body.D_products_group_molddetail .row.header,
body.D_products_group_molddetail .row.footer,
body.D_products_group_molddetail .nav-tabs {
display: none !important;
}
body.D_products_group_molddetail #day_menu {
padding-top: 0 !important;
}
/* 深色標題帶在紙上只是浪費碳粉 */
body.D_products_group_molddetail section.AnchorPoint::before,
body.D_products_group_molddetail section.AnchorPoint::after {
display: none !important;
}
body.D_products_group_molddetail section.AnchorPoint {
padding-top: 1.5rem !important;
}
body.D_products_group_molddetail section.AnchorPoint > div > h2.APtitle {
color: var(--jf-navy) !important;
text-shadow: none !important;
margin-bottom: 1.5rem !important;
}
body.D_products_group_molddetail section.AnchorPoint > div > h2.APtitle::before {
display: none !important;
}
body.D_products_group_molddetail section.AnchorPoint > div > h2.APtitle::after {
background: var(--jf-navy) !important;
}
/* 所有詳細行程一律展開 */
body.D_products_group_molddetail .DayTrip .collapse,
body.D_products_group_molddetail .DayTrip .collapse.show,
body.D_products_group_molddetail .DayTrip .collapse:not(.show) {
display: block !important;
height: auto !important;
overflow: visible !important;
}
/* 不要被分頁切斷 */
body.D_products_group_molddetail .DayTripBlock,
body.D_products_group_molddetail .Detail.DayTrip .TripBlock,
body.D_products_group_molddetail section.AnchorPoint div.container,
body.D_products_group_molddetail .Detail .BorderMuted,
body.D_products_group_molddetail .item {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
body.D_products_group_molddetail .Detail.DayTrip .TripBlock,
body.D_products_group_molddetail .Detail .PriceBlock,
body.D_products_group_molddetail .Detail .BorderMuted,
body.D_products_group_molddetail section.AnchorPoint div.container,
body.D_products_group_molddetail .Detail .TripBasic .ImgBox {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* 動效還原，避免列印時抓到動畫中間狀態 */
body.D_products_group_molddetail .jf-reveal {
opacity: 1 !important;
-webkit-transform: none !important;
transform: none !important;
}
}