/**
  @file       genlib.ottocity.css
  @brief      ottocity 共用元件樣式
              資料 disabled 樣式為 中灰字 hsla(0,0%,0%,0.55)
              placeholder 提示文字為 淺灰字 hsla(0,0%,0%,0.33)
  @date       2020-04-08: Chiuhua + 191001009, Create
  @date       2020-07-21: Chiuhua + 191001009, 新增 jquery 覆寫樣式
  @date       2020-09-03: Chiuhua + 200500938, 新增 .title_base 樣式, JLR 預約網頁需求
  @date       2020-09-07: Chiuhua + 200500938, 新增 .title_step 樣式, JLR 預約網頁需求
  @date       2020-09-08: Chiuhua + 200500938, 新增 日、星期 - 多顆組 - 每行 7 天，顯示 2 行 (繼承加套, RWD), JLR 預約網頁需求
  @date       2020-10-08: Chiuhua + 200500938, 新增 select placeholder 樣式, JLR 預約網頁需求, 需搭配 JS, with #YS
  @date       2021-06-03: Chiuhua # 210501509, 修正 chart_bubble 圖檔名稱
  @date       2021-06-09: Chiuhua + 210600615, 新增 itemlist2 相關樣式, Ford 線上購車 需求 (copy from genlib.app.css)
  @date       2021-06-09: Chiuhua # 210600615, 改良 itemlist2 樣式寫法 (優於原本 app 寫法)
  @date       2021-06-21: Chiuhua + 210501509, 新增 i_shop icon, oTToCity Portal2 改版需求
  @date       2021-06-23: Chiuhua + 210501509, 新增 i_engineoil icon, oTToCity Portal2 改版需求
  @date       2021-06-25: Chiuhua # 210501509, oTToCity 連結游標樣式盤整
  @date       2022-02-09: Chiuhua - 210501509, genlib.ottocity.css 的 jquery 覆寫樣式 移至 dialog-theme-custom.css 統一處理
  @date       2022-03-01: Chiuhua # 211102070, 修正 bubble 偽元素箭頭遮住第一子層的問題, app 商品櫥窗 延伸調整
  @date       2022-03-17: Chiuhua + 220301477, 新增 itemlist1 相關樣式, fordassured 買車車型窗 需求 (copy from genlib.app.css)
  @date       2022-05-03: Chiuhua + 220300968, 調整 LINE icon 圖樣會因樣版或商店顯示不同顆 Logo, MAZDA CPO 需求
  @date       2022-05-10: Chiuhua + 220300968, 新增 radio 自訂樣式, MAZDA CPO 需求
  @date       2022-05-19: Chiuhua + 220300968, 新增 照片瀏覽清單 - 直式, MAZDA CPO 需求
  @date       2022-06-15: Chiuhua + 220300968, 新增 photo_single 按鈕, MAZDA CPO 需求
  @date       2022-06-16: Chiuhua + 220300968, 新增 tab2_top 樣式, MAZDA CPO 需求
  @date       2022-07-18: Chiuhua # 220300968, 調整 carousel_dot 區塊, 預留需加點擊功能的例外需求 (※ dot 區塊預設不做點擊功能)
  @date       2022-07-19: Chiuhua + 220300968, 新增 grid 共用樣式, 整合 template 與 shop 的二手車清單樣式
  @date       2022-09-14: Chiuhua + 220800337, 新增 .lbcbx_row1 樣式, OUJI 歐吉 線上訂單 需求
  @date       2022-09-20: Chiuhua + 220800327, 新增 .lbcbx_col1 單欄樣式, 客戶線上支付網頁需求
  @date       2022-09-27: Chiuhua # 220901154, 調整 photo_viewer img 尺寸為真實圖檔最大寬高, 不再受後台商品圖舊規格寬 500px 的限制
  @date       2022-09-28: Chiuhua + 220802029, 新增 checkbox 不能取消勾選 樣式
  @date       2022-10-04: Chiuhua # 220802029, 調整 .title_base root, template, shop 共用及差異樣式
  @date       2022-10-04: Chiuhua # 220802029, 調整 .title_base.title_step root, template, shop 共用及差異樣式
  @date       2022-10-05: Chiuhua + 220901528, 新增 .title_step > h4, 以色塊表達步驟, 預設直槓, OUJI 品牌差異為斜槓, 僅到步驟3, 歐吉線上訂單需求 (by Ho)
  @date       2022-10-14: Chiuhua # 221001525, B2C 必填統一在標題加星號表達 (by Ho)
  @date       2022-10-26: Chiuhua # 220802029, 改良 root btn 預設顏色以減少樣版及商店 icon 差異化, 方按鈕=深底白 icon ； 圓按鈕=透明底外框線
  @date       2022-10-26: Chiuhua # 220802029, 調整 黑色 icon 透明度, 從 0.7 加深為 0.8
  @date       2022-10-31: Chiuhua # 220802029, 將 .btn_rect_sec 次要按鈕加進共用樣式
  @date       2022-11-17: Chiuhua + H221000167, 新增 按鈕加高共用樣式, HONDA HCUC 需求
  @date       2022-11-17: Chiuhua + H221000167, 新增 .lbrdo_row1 樣式, HONDA HCUC 需求
  @date       2022-11-21: Chiuhua # H221000167, 移除 i_locs_b&w 樣式, 新增 i_map_b&w 樣式, HONDA HCUC 需求
  @date       2022-11-23: Chiuhua + H221000167, 新增 .lbcbx_marked 純標示樣式, HONDA HCUC 需求, 從 root 新增, 以強化 oTToCity 樣式模組架構
  @date       2022-11-28: Chiuhua # 221112094, 圖形驗證碼樣式整合至 genfwrapper.ottocity.css 共用, .passcode_wrap 更名為 .form_passcode 並加父層 wrapper 以做版面 RWD
  @date       2022-12-06: Chiuhua # H221000167, 社群 icon 樣式從 root 盤整, 每個社群 icon 樣式名唯一化, 品牌差異與按鈕 icon 圖樣差異用 css bgimg 處理
  @date       2022-12-08: Chiuhua + H221000167, 新增 i_clock icon 樣式, HONDA HCUC 需求
  @date       2022-12-14: Chiuhua # H221000167, 調整 photo_single 按鈕寫法, 讓 HONDA HCUC icon 圖樣與底色 opacity 分開定義
  @date       2023-04-19: Chiuhua + 230401452, 新增 [文字 wbr 單詞換行時機] 樣式
  @date       2023-06-05: Chiuhua + 230302504, 新增 .lbcbx_wrapper label span 的子層文字加 gap, FORD 線上訂單 需求
  @date       2023-06-05: Chiuhua + 230302504, 新增 .lbrdo_col1 單欄樣式, FORD 線上訂單 需求
  @date       2023-06-05: Chiuhua + 230302504, 新增 radio 項目文字過長換行顯示 樣式, FORD 線上訂單 需求
  @date       2023-09-05: Ys      + 230900138, 新增 下拉篩選 - 項目較多改雙排
  @date       2023-10-11: Ys      # 230900138, 調整 Modern 樣版的查詢條件配色：白底黑字 (此調整的箭頭色有 bug, 作者 Ys, 請見 #230900138 2023-11-13 Chiuhua 批註)
  @date       2023-12-06: Chiuhua # H230800205, 新增 機車 icon, HONDA HCUM 自主延伸強化
  @date       2023-12-28: Chiuhua + H230800205, 新增 i_piston 活塞 icon 共用樣式，因 HONDA 二輪廣告商博報堂提供不出向量 icon
  @date       2024-01-10: Sharon  # H230800205, 調整 emptymsg 樣式
  @date       2024-03-01: Chiuhua + H240100197, 新增 .stk 文字刪除線 樣式, HONDA HCUC 需求
  @date       2024-07-04: Chiuhua # 240602259, 調整 tag, 因新的 Angular 不支援自定義的 lang tag, 系統部先不需調整 html tag，所以過渡期 css 語法 lang 與 label 並存
  @date       2024-07-09: Chiuhua # 240700690, button 游標樣式優化 (子層游標需與父層一樣是手指圖示, DMS + APP + oTToCity)
  @date       2024-07-23: Chiuhua + 240701783, 新增 oTToCity root 預設 theme color
  @date       2024-07-24: Chiuhua + 240701783, 新增 .fc2 定義 (oTToCity root 預設 theme color)
  @date       2024-07-24: Chiuhua # 240701783, 調整 fhighlight 色碼, 與 bghighlight 一致
  @date       2024-08-22: Chiuhua # 240802455, 調整 .title_base 顏色, 線上支付-上優標準版 延伸調整
  @date       2024-08-22: Chiuhua # 240802455, 調整 .bg1 ~ .bghighlight background-color 權重, 因 root .title_base 加顏色之延伸改良
  @date       2024-11-21: Chiuhua # 241101670, 強化 .lbcbx_marked 樣式, 導入 FORD 2024 global VI 之延伸改良
  @date       2024-12-03: Chiuhua # 241200827, 改良 btn_rect 樣式, 加 transition 漸變效果, 作用範圍 root → template → website/webpage
  @date       2024-12-05: Ys      # 241201494, 調整 下拉篩選 - 項目較多時，會出現卷軸
	@date       2025-02-04: Chiuhua + 250119001, 新增 [LINE 加入好友] 社群按鈕, STLA 服務網頁 需求
	@date       2025-03-20: Chiuhua + 250300904, 新增 bdc 線條色樣式, onlineservice 需求, ex: STLA 預購單確認頁
	@date       2025-03-21: Chiuhua # 250301403, 改良 [LINE 加入好友] 社群按鈕, button 子層放 a tag 直接 link 指定網址, 無需再用 js, 可提升效能
	@date       2025-03-28: Chiuhua + 250400376, 新增 hr 分隔線共用樣式 (需求來源: STLA onlineservice 確認頁)
	@date       2025-10-02: Chiuhua # 251205366, 改良 itemlist_li_wauto RWD
	@date       2025-11-05: Chiuhua # 251100266, 改良 次要按滑鼠經過漸變語法
	@date       2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式
	@date       2025-11-07: Chiuhua # 251100266, 調整 btn_rect_intitleright 置於標題尾端的按鈕樣式
	@date       2025-11-26: Chiuhua # 251102238, Modern 樣版樣式 QA
	@date       2025-12-09: Chiuhua # 251200088, 改良 所有 icon 視覺尺寸一致
	@date       2025-12-10: Chiuhua + 251205049, 新增 標示圖樣 - pennant 錦旗
  @date       2025-12-15: Chiuhua # 251205366, 改良 itemlist, 範圍：Root → 樣版 → 各品牌網站/網頁
	@date       2025-12-17: Chiuhua + 251200806, 新增 rwd_hide 相關樣式, 讓元素在手機或其他裝置隱藏 (Portal 車商櫥窗 需求)
  @date       2026-01-22: Chiuhua + 260140900, 新增 carandperson icon 樣式
	@date       2026-02-04: Chiuhua # 260200333, 改良 bubble 子層行高 inherit (範圍：DMS、APP、oTToCity)
	@date       2026-03-12: Ys      # 251102028, 調整 下拉篩選 加大條件區塊，讓移出後關閉範圍變大
	@date       2026-03-13: Chiuhua + 260300939, 新增 .i_user_, .i_caret_double_ 雙箭頭 相關樣式
	@date       2026-03-13: Chiuhua # 260301050, 新增 方形按鈕 文字後接 icon 樣式
	@date       2026-03-16: Chiuhua # 260301050, 改良 .btn_rect_sec icons 語法，※ 用 css 屬性選擇器加 filter 取代眾多圖樣逐一定義
*/
/*=== 全域樣式 Start ===*/
/* 2025-03-28: Chiuhua + 250400376, 新增 hr 分隔線共用樣式 (需求來源: STLA onlineservice 確認頁) */
hr {width:100%;height:0px;line-height:0px;border-width:0px;border-top-width:1px;border-style:solid;border-color:hsla(0,0%,0%,0.5);margin:1rem auto;}
hr.hrw2 {border-top-width:2px;}
hr.hrw3 {border-top-width:3px;}
hr.hrw4 {border-top-width:4px;}
hr.hrw5 {border-top-width:5px;}
/*=== 全域樣式 End ===*/

/*=== 通用樣式 Start ===*/
.l {text-align:left !important;}
.r {text-align:right !important;}
.x {text-align:center !important;}

.wauto {width:auto !important;}
.hauto {height:auto !important;}

/* rwd_hide */
/* 2025-12-17: Chiuhua + 251200806, 新增 rwd_hide 相關樣式, 讓元素在手機或其他裝置隱藏 (Portal 車商櫥窗 需求) */
/* 1.【.rwd_hide_excmobile】 for 車商櫥窗 RWD 600 以上電話按鈕隱藏, exc = except
   2.【.rwd_hide_mobile】 預先做 RWD 599 以下需隱藏的樣式, 與 APP 規則相同 */
@media all and (min-width:600px) {
.rwd_hide_excmobile {display:none !important;}
}
@media all and (max-width:599px) {
.rwd_hide_mobile {display:none !important;}
}
/*=== 通用樣式 End ===*/

/*=== 文字/底色相關 Start ===*/
/* 欄位 disabled */
.dsab, input:not([type="checkbox"]):not([type="radio"]):disabled, input[type="password"]:disabled, select:disabled, textarea:disabled, p[contenteditable="false"], p[disabled] {color:hsla(0,0%,0%,0.55);-webkit-text-fill-color:hsla(0,0%,0%,0.55)/* fixed SF */;-webkit-opacity:1/* fixed SF */;}
.form1 input:disabled ~ * {color:hsla(0,0%,0%,0.55);}

/* placeholder 淺灰字 - 預設 */
::-webkit-input-placeholder {color:hsla(0,0%,0%,0.33);}
::-moz-placeholder {color:hsla(0,0%,0%,0.33);} /* FF 19+ */
input:-moz-placeholder {color:hsla(0,0%,0%,0.33);}
/* select placeholder, 2020-10-08: Chiuhua + 200500938, JLR 預約網頁需求, 需搭配 JS, with #YS */
select:invalid {color:hsla(0,0%,0%,0.33);}
select:invalid option {color:#000;}

/* required field 必填欄位 */
/* 2022-10-14: Chiuhua # 221001525, B2C 必填統一在標題加星號表達 (by Ho), 必填樣式從 genlib.ottocity.css 移至 genform.ottocity.css 統一處理 */

/* 背景色 */
/* 2024-07-23: Chiuhua + 240701783, 新增 oTToCity root 預設 theme color
   原本要加在 onlineservice template，改為加在 root，可減少以後新增 template 時的工作
   例如這次將顏色加在 root，就可讓 minimal 和 onlineservice 兩個樣版預設顏色一起繼承 */
/* 2024-08-22: Chiuhua # 240802455, 調整 .bg1 ~ .bghighlight background-color 權重, 因 root .title_base 加顏色之延伸改良 */
.bg1, .bg2, .bghighlight {color:#FFF;}
.bg1 {background-color:hsl(220,50%,20%) !important;}
.bg2 {background-color:hsl(220,15%,45%) !important;}
.bg3 {background-color:hsl(220,15%,85%) !important;}
.bghighlight {background-color:hsl(220,70%,40%) !important;color:#FFF !important;}
.bgalert {background-color:hsl(0,100%,45%) !important;color:#FFF !important;}
.bgw {background-color:#FFF !important;}

/* 線條色 */
/* 2025-03-20: Chiuhua + 250300904, 新增 bdc 線條色樣式, onlineservice 需求, ex: STLA 預購單確認頁 */
.bdc1 {border-color:hsl(220,50%,20%) !important;}
.bdc2 {border-color:hsl(220,15%,45%) !important;}
.bdc3 {border-color:hsl(220,15%,85%) !important;}
.bdchighlight {border-color:hsl(220,70%,40%) !important;}

/* 文字色 */
/* 2024-07-24: Chiuhua + 240701783, 新增 .fc2 定義 (oTToCity root 預設 theme color) */
/* 2024-07-24: Chiuhua # 240701783, 調整 fhighlight 色碼, 與 bghighlight 一致 */
.fc2 {color:hsl(220,15%,45%);}
.falert, .falert input:not([type="checkbox"]):not([type="radio"]):disabled, input.falert:disabled, .has_error {color:hsl(0,100%,45%) !important;-webkit-text-fill-color:hsl(0,100%,45%) !important;text-shadow:-1px -1px 0px #FFF,-1px 1px 0px #FFF,1px -1px 0px #FFF,1px 1px 0px #FFF;}
.fhighlight {color:hsl(220,70%,40%) !important;}
.has_error {background-color:hsl(0,80%,95%) !important;box-shadow:0px 0px 0px 1px #FFF inset;}

/* 文字連結樣式 */
.flink {color:hsl(220,100%,38%) !important;text-decoration:underline !important;text-underline-position:under;cursor:pointer;}
.flink * {color:inherit;}

/* 文字刪除線 strikethrough */
/* 2024-03-01: Chiuhua + H240100197, 新增 .stk 文字刪除線 樣式, HONDA HCUC 需求 */
/* 預設單線 */
*[class*="stk"] {text-decoration:none;}
.stk {position:relative;white-space:nowrap;}
.stk:before {content:'';position:absolute;left:0px;right:0px;top:50%;bottom:auto;margin:auto;width:100%;height:0px;line-height:0px;border:solid hsl(0,100%,45%);
border-width:2px 0px 0px;}
/* 加套雙線 */
.stk.stk_dbl:before {top:0px;bottom:0px;height:0.4em;border-width:2px 0px;}

/* 無資料樣式 */
.emptymsg {display:block;text-align:center;margin:10em auto 5em !important;}
.emptymsg.gapsmall {margin:5em auto !important;}

/* 選取底色 */
.bgsel {background-color:hsl(55,100%,80%) !important;}
.bgsel_lighter {background-color:hsl(55,100%,90%) !important;}

/* 文字 wbr 單詞換行時機 */
/* 2023-04-19: Chiuhua + 230401452, 新增 [文字 wbr 單詞換行時機] 樣式 */
.fwbr {word-break:keep-all;}

/*=== 文字/底色相關 End ===*/

/*=== 共用元件 Seart ===*/
/* checkbox, radio 自訂樣式 Start */
/* checkbox, radio - RWD to Web Browser (借用 label 偽元素) */
/* checkbox, radio 共用 */
/* lbcbxdie, lbrdodie */
.lbcbxdie, .lbrdodie {cursor:not-allowed;}
.lbcbxdie *, .lbrdodie * {cursor:inherit;}
.lbcbx_wrapper label.lbcbxdie:before, label.lbcbx.lbcbxdie:before,
.lbrdo_wrapper label.lbrdodie:before, label.lbrdo.lbrdodie:before {background-color:hsl(0,0%,70%) !important;opacity:0.5;}
/* checkbox, radio 單行 */
/* 2022-09-14: Chiuhua + 220800337, 新增 .lbcbx_row1 樣式, OUJI 歐吉 線上訂單 需求 */
/* 2022-11-17: Chiuhua + H221000167, 新增 .lbrdo_row1 樣式, HONDA HCUC 需求 */
.lbcbx_wrapper.lbcbx_row1, .lbrdo_wrapper.lbrdo_row1 {display:inline-flex;align-items:center;}
.lbcbx_wrapper.lbcbx_row1 *, .lbrdo_wrapper.lbrdo_row1 * {height:auto;}

/* 項目文字過長換行顯示 */
/* 2023-06-05: Chiuhua + 230302504, 新增 radio 項目文字過長換行顯示 樣式, FORD 線上訂單 需求 */
.lbcbx_wrapper.lbcbx_txtwrap label, .lbrdo_wrapper.lbrdo_txtwrap label {white-space:normal;line-height:1.3em;padding-top:0.27em;padding-bottom:0.27em;padding-left:1.75em;text-indent:-1.75em;}
.lbcbx_wrapper.lbcbx_txtwrap label *, .lbrdo_wrapper.lbrdo_txtwrap label * {white-space:inherit;line-height:inherit;}

/* label 分欄 */
/* 2022-09-20: Chiuhua + 220800327, 新增 .lbcbx_col1 單欄樣式, 客戶線上支付網頁需求 */
/* 2023-06-05: Chiuhua + 230302504, 新增 .lbrdo_col1 單欄樣式, FORD 線上訂單 需求 */
.lbcbx_wrapper.lbcbx_col1 label, .lbrdo_wrapper.lbrdo_col1 label {width:100%;}
.lbcbx_wrapper.lbcbx_col2 label, .lbrdo_wrapper.lbrdo_col2 label {min-width:50%;}
.lbcbx_wrapper.lbcbx_col4 label, .lbrdo_wrapper.lbrdo_col4 label {min-width:25%;}

/* checkbox */
/* checkbox 多選項 - 樣式命名為 .lbcbx_wrapper, 當該區塊全部為 checkbox 時, 直接套在父層即可，不需在子項逐一套樣式 */
/* checkbox 單選項 - 樣式命名為 .lbcbx, 套在 label tag 身上 (與舊 DMS 套在 input 身上的 .cbx 做分辨) */
/* 2022-09-28: Chiuhua + 220802029, 新增 checkbox 不能取消勾選 樣式 */
/* 2023-06-05: Chiuhua + 230302504, 新增 .lbcbx_wrapper label span 的子層文字加 gap, FORD 線上訂單 需求 */
.lbcbx_wrapper {font-size:0px;line-height:0px;}
.lbcbx_wrapper label {max-width:100%;display:inline-block;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lbcbx_wrapper label:not(:nth-last-child(1)) {padding-right:1em;}
.lbcbx_wrapper label > input, .lbcbx_wrapper label:before,
label.lbcbx > input, label.lbcbx:before {width:1.15em;height:1.15em;margin:0px 0.3em;display:inline-block;vertical-align:middle;}
.lbcbx_wrapper label > input, label.lbcbx > input {opacity:0;margin-left:-1.5em;}
.lbcbx_wrapper label:before, label.lbcbx:before {content:'';position:relative;top:-0.1em;border-radius:0.2em;background:#FFF;border:1px solid hsla(0,0%,0%,0.5);box-shadow:0px 0px 2px 1px #FFF, 0px 0px 2px 2px hsla(0,0%,100%,0.5);}
.lbcbx_wrapper label > span {}
.lbcbx_wrapper label > span > * {padding:0px 0.15em;}
/* 勾選 - oTToCity 預設綠底, 樣版或商店另外差異化 */
/* 2022-11-23: Chiuhua + H221000167, 新增 .lbcbx_marked 純標示樣式, HONDA HCUC 需求, 從 root 新增, 以強化 oTToCity 樣式模組架構 */
.lbcbx_wrapper label.lbcbxed:before, label.lbcbx.lbcbxed:before, .lbcbx_wrapper.lbcbx_marked label:before {border:none;background:no-repeat center center;background-size:82% auto;background-color:hsl(120,100%,30%);background-image:url(../image/cbxbg_check_w.svg);}
/* 不能取消勾選 */
.lbcbx_wrapper label.lbcbxed.lbcbxdie:before, label.lbcbxed.lbcbx.lbcbxdie:before {opacity:1;}
/* cbx 純標示 - 差異 */
/* 2024-11-21: Chiuhua # 241101670, 強化 .lbcbx_marked 樣式, 導入 FORD 2024 global VI 之延伸改良 */
.lbcbx_wrapper.lbcbx_marked label:before {background-color:transparent;background-image:url(../image/cbxbg_check_green.svg);box-shadow:none;border:0px !important;}

/* radio */
/* radio 多選項 - 樣式命名為 .lbrdo_wrapper, 當該區塊全部為 radio 時, 直接套在父層即可，不需在子項逐一套樣式 */
/* radio 單選項 - 樣式命名為 .lbrdo, 套在 label tag 身上 */
/* 2022-05-10: Chiuhua + 220300968, 新增 radio 自訂樣式, MAZDA CPO 需求 */
.lbrdo_wrapper {font-size:0px;line-height:0px;}
.lbrdo_wrapper label {max-width:100%;display:inline-block;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lbrdo_wrapper label:not(:nth-last-child(1)) {padding-right:1em;}
.lbrdo_wrapper label > input, .lbrdo_wrapper label:before,
label.lbrdo > input, label.lbrdo:before {width:1.15em;height:1.15em;margin:0px 0.3em;display:inline-block;vertical-align:middle;}
.lbrdo_wrapper label > input, label.lbrdo > input {opacity:0;margin-left:-1.5em;}
.lbrdo_wrapper label:before, label.lbrdo:before {content:'';position:relative;top:-0.1em;border-radius:50%;background:#FFF;border:1px solid hsla(0,0%,0%,0.5);box-shadow:0px 0px 2px 1px #FFF, 0px 0px 2px 2px hsla(0,0%,100%,0.5);}
/* 選取 - oTToCity 預設綠底, 樣版或商店另外差異化 */
.lbrdo_wrapper label.lbrdoed:before, label.lbrdo.lbrdoed:before {border:none;background-color:hsl(120,100%,30%);}

/* checkbox, radio 自訂樣式 End */
/*=== 共用元件 End ===*/

/*=== icons Start ===*/
/* 所有 icon 共用 (含 button 與 form 的 icon) */
/* 命名: c_pri = color_primary = 主要 icon 色 ; c_sec = color_secondary = 次要 icon 色 */
/* 2021-06-03: Chiuhua # 210501509, 修正 chart_bubble 圖檔名稱 */
/* 2021-06-21: Chiuhua + 210501509, 新增 i_shop icon, oTToCity Portal2 改版需求 */
/* 2021-06-23: Chiuhua + 210501509, 新增 i_engineoil icon, oTToCity Portal2 改版需求 */
/* 2022-10-26: Chiuhua # 220802029, 改良 root btn 預設顏色以減少樣版及商店 icon 差異化, 方按鈕=深底白 icon ； 圓按鈕=透明底外框線 */
/* 2022-11-21: Chiuhua # H221000167, 移除 i_locs_b&w 樣式, 新增 i_map_b&w 樣式, HONDA HCUC 需求 */
/* 2022-12-08: Chiuhua + H221000167, 新增 i_clock icon 樣式, HONDA HCUC 需求 */
/* 2023-12-06: Chiuhua # H230800205, 新增 機車 icon, HONDA HCUM 自主延伸強化 */
/* 2023-12-28: Chiuhua + H230800205, 新增 i_piston 活塞 icon 共用樣式，因 HONDA 二輪廣告商博報堂提供不出向量 icon */
/* 2025-12-09: Chiuhua # 251200088, 改良 所有 icon 視覺尺寸一致 */
/* 2026-01-22: Chiuhua + 260140900, 新增 carandperson icon 樣式 */
/* 2026-03-13: Chiuhua + 260300939, 新增 .i_user_, .i_caret_double_ 雙箭頭 相關樣式 */
/* 2026-03-16: Chiuhua # 260301050, 改良 .btn_rect_sec icons 語法，※ 用 css 屬性選擇器加 filter 取代眾多圖樣逐一定義 */
i[class*="i_"], button > i, .btn_toggle i, .form1 i {width:1.5em;height:1.5em;display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:center center;background-size:1.125em auto;}
button > i, .btn_toggle i {margin-left:1px;margin-right:1px;}

/* 黑色 icon 加透明度變灰色 */
/* 2022-10-26: Chiuhua # 220802029, 調整 黑色 icon 透明度, 從 0.7 加深為 0.8 */
/* 2026-03-16: Chiuhua # 260301050, 調整 btn_rect_sec icon 透明度, 從 0.5 加深為 0.6 */
i[class*="_b"]:not([class*="_logo_"]):not([class*="bars_w"]):not([class*="back_w"]), *[class*="btn_rnd"] i:not([class*="_logo_"]), .form1 i {opacity:0.8;}
*[class*="btn_rect"] i {opacity:1 !important;}
*[class*="btn_rect_sec"] i:not([class*="_logo_"]) {opacity:0.6 !important;}

/* icons - all (含部份 icon 調整視覺尺寸) */
.i_bars_b, *[class*="btn_rnd"] i.i_bars {background-image:url(../image/bars_b_L.png);}
.i_bars_w, *[class*="btn_rect"] i.i_bars {background-image:url(../image/bars_w_L.png);}

i[class*="i_delete"] {background-size:1em auto;}
.i_delete_b, *[class*="btn_rnd"] i.i_delete {background-image:url(../image/delete_b_L.png);}
.i_delete_w, *[class*="btn_rect"] i.i_delete {background-image:url(../image/delete_w_L.png);}

.i_add_b, *[class*="btn_rnd"] i.i_add {background-image:url(../image/add_b_L.png);}
.i_add_w, *[class*="btn_rect"] i.i_add {background-image:url(../image/add_w_L.png);}

.i_heart_b {background-image:url(../image/heart_b_L.png);}
.i_heart_w, *[class*="btn_rect"] i.i_heart {background-image:url(../image/heart_w_L.png);}
.i_heart_pink {background-image:url(../image/heart_pink_L.png);}
.i_heart_dpink {background-image:url(../image/heart_dpink_L.png);}
.i_heart_red, *[class*="btn_rnd"] i.i_heart {background-image:url(../image/heart_red.svg);background-size:1.25em auto !important;}

i[class*="i_favorites"] {background-size:1.365em auto;}
.i_favorites_b {background-image:url(../image/favorites_b_L.png);}
.i_favorites_w, *[class*="btn_rect"] i.i_favorites {background-image:url(../image/favorites_w_L.png);}
.i_favorites_pink, *[class*="btn_rnd"] i.i_favorites {background-image:url(../image/favorites_ol_pink.svg);background-size:1.425em auto !important;}

i[class*="i_star"] {background-size:1.15em auto;background-position-y:48%;}
.i_star_b {background-image:url(../image/star_b.svg);}
.i_star_w {background-image:url(../image/star_w.svg);}
.i_star_gold {background-image:url(../image/star_gold.svg);background-size:1.28em auto !important;background-position-y:37% !important;}

i[class*="i_home"] {background-size:1.2em auto;}
.i_home_b, *[class*="btn_rnd"] i.i_home {background-image:url(../image/home_b_L.png);}
.i_home_w, *[class*="btn_rect"] i.i_home {background-image:url(../image/home_w_L.png);}

.i_shop_b, *[class*="btn_rnd"] i.i_shop {background-image:url(../image/shop_b_L.png);}
.i_shop_w, *[class*="btn_rect"] i.i_shop {background-image:url(../image/shop_w_L.png);}

i[class*="i_engineoil"] {background-size:auto 1.28em;}
.i_engineoil_b, *[class*="btn_rnd"] i.i_engineoil {background-image:url(../image/engineoil_b_L.png);}
.i_engineoil_w, *[class*="btn_rect"] i.i_engineoil {background-image:url(../image/engineoil_w_L.png);}

i[class*="i_piston_"] {}
.i_piston_b, *[class*="btn_rnd"] i.i_piston {background-image:url(../image/piston_b.svg);}
.i_piston_w, *[class*="btn_rect"] i.i_piston {background-image:url(../image/piston_w.svg);}

i[class*="i_megaphone"] {background-size:1.22em auto;}
.i_megaphone_b, *[class*="btn_rnd"] i.i_megaphone {background-image:url(../image/megaphone_b_L.png);}
.i_megaphone_w, *[class*="btn_rect"] i.i_megaphone {background-image:url(../image/megaphone_w_L.png);}

.i_info_b, *[class*="btn_rnd"] i.i_info {background-image:url(../image/info_b_L.png);}
.i_info_w, *[class*="btn_rect"] i.i_info {background-image:url(../image/info_w_L.png);}

i[class*="i_info2"] {background-size:auto 1.2em;}
.i_info2_b, *[class*="btn_rnd"] i.i_info2 {background-image:url(../image/info2_b_L.png);}
.i_info2_w, *[class*="btn_rect"] i.i_info2 {background-image:url(../image/info2_w_L.png);}

i[class*="i_loc"] {background-size:0.98em auto;}
.i_loc_b, *[class*="btn_rnd"] i.i_loc, .form1 .i_loc {background-image:url(../image/loc_b_L.png);}
.i_loc_w, *[class*="btn_rect"] i.i_loc {background-image:url(../image/loc_w_L.png);}

i[class*="i_map"] {background-size:contain;}
.i_map_b, *[class*="btn_rnd"] i.i_map {background-image:url(../image/locs_b_L.png);}
.i_map_w, *[class*="btn_rect"] i.i_map {background-image:url(../image/locs_w_L.png);}

.i_phone_b, *[class*="btn_rnd"] i.i_phone, .form1 .i_phone {background-image:url(../image/phone_b_L.png);}
.i_phone_w, *[class*="btn_rect"] i.i_phone {background-image:url(../image/phone_w_L.png);}
.form1 dd.ddtel > i.i_phone {background-image:url(../image/phone_b_alpha70_L.png);}

i[class*="i_mail"] {background-size:1.22em auto;}
.i_mail_b, *[class*="btn_rnd"] i.i_mail, .form1 .i_mail {background-image:url(../image/mail_ol_b_L.png);}
.i_mail_w, *[class*="btn_rect"] i.i_mail {background-image:url(../image/mail_ol_w_L.png);}

.i_msg_b, *[class*="btn_rnd"] i.i_msg, .form1 .i_msg {background-image:url(../image/msg_b_L.png);}
.i_msg_w, *[class*="btn_rect"] i.i_msg {background-image:url(../image/msg_w_L.png);}

i[class*="i_calendar"] {background-size:1.05em auto;}
.i_calendar_b, *[class*="btn_rnd"] i.i_calendar, .form1 .i_calendar {background-image:url(../image/calendar_b_L.png);}
.i_calendar_w, *[class*="btn_rect"] i.i_calendar {background-image:url(../image/calendar_w_L.png);}

.i_clock_b, *[class*="btn_rnd"] i.i_clock, .form1 .i_clock {background-image:url(../image/clock_b_L.png);}
.i_clock_w, *[class*="btn_rect"] i.i_clock {background-image:url(../image/clock_w_L.png);}

.i_dollar_b, *[class*="btn_rnd"] i.i_dollar {background-image:url(../image/dollar_b_L.png);}
.i_dollar_w, *[class*="btn_rect"] i.i_dollar {background-image:url(../image/dollar_w_L.png);}

i[class*="i_share"] {background-size:1.05em auto;background-position-x:40%;}
.i_share_b, *[class*="btn_rnd"] i.i_share {background-image:url(../image/share_b_L.png);}
.i_share_w, *[class*="btn_rect"] i.i_share {background-image:url(../image/share_w_L.png);}

.i_print_b, *[class*="btn_rnd"] i.i_print {background-image:url(../image/print_b_L.png);}
.i_print_w, *[class*="btn_rect"] i.i_print {background-image:url(../image/print_w_L.png);}

i[class*="i_copy"] {background-size:1.2em auto;background-position:60% 40%;}
.i_copy_b, *[class*="btn_rnd"] i.i_copy {background-image:url(../image/copy_b_L.png);}
.i_copy_w, *[class*="btn_rect"] i.i_copy {background-image:url(../image/copy_w_L.png);}

.i_search_b, *[class*="btn_rnd"] i.i_search {background-image:url(../image/search_b_L.png);}
.i_search_w, *[class*="btn_rect"] i.i_search {background-image:url(../image/search_w_L.png);}

.i_reset_b, *[class*="btn_rnd"] i.i_reset {background-image:url(../image/reset_b_L.png);}
.i_reset_w, *[class*="btn_rect"] i.i_reset, .btnOn > .i_reset {background-image:url(../image/reset_w_L.png);}

.i_sync_b, *[class*="btn_rnd"] i.i_sync, button.btn_passcode > i.i_sync {background-image:url(../image/sync_b_L.png);}
.i_sync_w, *[class*="btn_rect"] i.i_sync, .btnOn > .i_sync {background-image:url(../image/sync_w_L.png);}

.i_back_b, *[class*="btn_rnd"] i.i_back {background-image:url(../image/back2_b_L.png);}
.i_back_w, *[class*="btn_rect"] i.i_back, .btnOn > .i_back {background-image:url(../image/back2_w_L.png);}

i[class*="i_chart_bubble"] {background-size:1.05em auto;}
.i_chart_bubble_b, *[class*="btn_rnd"] i.i_chart_bubble {background-image:url(../image/chart_bubble_b_L.png);}
.i_chart_bubble_w, *[class*="btn_rect"] i.i_chart_bubble, .btn_toggle .i_chart_bubble {background-image:url(../image/chart_bubble_w_L.png);}

i[class*="i_grid"] {background-size:0.95em auto;}
.i_grid_b, *[class*="btn_rnd"] i.i_grid {background-image:url(../image/grid_b_L.png);}
.i_grid_w, *[class*="btn_rect"] i.i_grid, .btn_toggle .i_grid {background-image:url(../image/grid_w_L.png);}

.i_list_b, *[class*="btn_rnd"] i.i_list {background-image:url(../image/list_b_L.png);}
.i_list_w, *[class*="btn_rect"] i.i_list, .btn_toggle .i_list {background-image:url(../image/list_w_L.png);}

/* car */
i[class*="i_car_"] {background-size:1.17em auto;}
.i_car_b, *[class*="btn_rnd"] i.i_car {background-image:url(../image/car_b_L.png);}
.i_car_w, *[class*="btn_rect"] i.i_car {background-image:url(../image/car_w_L.png);}

i[class*="i_carused"] {background-size:1.3em auto;}
.i_carused_b, *[class*="btn_rnd"] i.i_carused {background-image:url(../image/carused_b_L.png);}
.i_carused_w, *[class*="btn_rect"] i.i_carused {background-image:url(../image/carused_w_L.png);}

i[class*="i_carmulti2"] {background-size:contain;}
.i_carmulti2_b, *[class*="btn_rnd"] i.i_carmulti2 {background-image:url(../image/carmulti2_b_L.png);}
.i_carmulti2_w, *[class*="btn_rect"] i.i_carmulti2 {background-image:url(../image/carmulti2_w_L.png);}

i[class*="i_carstock"] {background-size:1.15em auto;}
.i_carstock_b, *[class*="btn_rnd"] i.i_carstock {background-image:url(../image/carstock_b_L.png);}
.i_carstock_w, *[class*="btn_rect"] i.i_carstock {background-image:url(../image/carstock_w_L.png);}

i[class*="i_motorcycle_"] {background-size:1.4em auto;}
.i_motorcycle_b, *[class*="btn_rnd"] i.i_motorcycle {background-image:url(../image/motorcycle_b.svg);}
.i_motorcycle_w, *[class*="btn_rect"] i.i_motorcycle {background-image:url(../image/motorcycle_w.svg);}

i[class*="i_scooter_"] {background-size:contain;}
.i_scooter_b, *[class*="btn_rnd"] i.i_scooter {background-image:url(../image/scooter_b.svg);}
.i_scooter_w, *[class*="btn_rect"] i.i_scooter {background-image:url(../image/scooter_w.svg);}

i[class*="i_carandperson"] {background-size:1.4em auto;}
.i_carandperson_b, *[class*="btn_rnd"] i.i_carandperson {background-image:url(../image/carandperson_b_L.png);}
.i_carandperson_w, *[class*="btn_rect"] i.i_carandperson {background-image:url(../image/carandperson_w_L.png);}

/* 人 */
i[class*="i_user"] {background-size:1.05em auto;}
.i_user_b, *[class*="btn_rnd"] i.i_user {background-image:url(../image/user2_b_L.png);}
.i_user_w, *[class*="btn_rect"] i.i_user {background-image:url(../image/user2_w_L.png);}

/* i_caret */
/* 注意, 因次要按鈕 icon 需反黑, 所以黑色樣式排序需在白色後面, 2022-10-31: Chiuhua # 220802029, 將 .btn_rect_sec 次要按鈕加進共用樣式 */
i[class*="i_caret_l"], i[class*="i_caret_r"] {background-size:auto 1.125em;}
i[class*="i_caret_double_u"], i[class*="i_caret_double_d"] {background-size:1em 0.4em;background-position-y:25%,75%;}
i[class*="i_caret_double_l"], i[class*="i_caret_double_r"] {background-size:0.4em 1em;background-position-x:25%,75%;}
.i_caret_u_w, *[class*="btn_rect"] i.i_caret_u {background-image:url(../image/caret_u_w_L.png);}
.i_caret_d_w, *[class*="btn_rect"] i.i_caret_d {background-image:url(../image/caret_d_w_L.png);}
.i_caret_l_w, *[class*="btn_rect"] i.i_caret_l {background-image:url(../image/caret_l_w_L.png);}
.i_caret_r_w, *[class*="btn_rect"] i.i_caret_r {background-image:url(../image/caret_r_w_L.png);}
.i_caret_double_u_w, *[class*="btn_rect"] i.i_caret_double_u {background-image:url(../image/caret_u_w_L.png),url(../image/caret_u_w_L.png);}
.i_caret_double_d_w, *[class*="btn_rect"] i.i_caret_double_d {background-image:url(../image/caret_d_w_L.png),url(../image/caret_d_w_L.png);}
.i_caret_double_l_w, *[class*="btn_rect"] i.i_caret_double_l {background-image:url(../image/caret_l_w_L.png),url(../image/caret_l_w_L.png);}
.i_caret_double_r_w, *[class*="btn_rect"] i.i_caret_double_r {background-image:url(../image/caret_r_w_L.png),url(../image/caret_r_w_L.png);}
.i_caret_u_b, *[class*="btn_rnd"] i.i_caret_u {background-image:url(../image/caret_u_b_L.png);}
.i_caret_d_b, *[class*="btn_rnd"] i.i_caret_d {background-image:url(../image/caret_d_b_L.png);}
.i_caret_l_b, *[class*="btn_rnd"] i.i_caret_l {background-image:url(../image/caret_l_b_L.png);}
.i_caret_r_b, *[class*="btn_rnd"] i.i_caret_r {background-image:url(../image/caret_r_b_L.png);}
.i_caret_double_u_b {background-image:url(../image/caret_u_b_L.png),url(../image/caret_u_b_L.png);}
.i_caret_double_d_b {background-image:url(../image/caret_d_b_L.png),url(../image/caret_d_b_L.png);}
.i_caret_double_l_b {background-image:url(../image/caret_l_b_L.png),url(../image/caret_l_b_L.png);}
.i_caret_double_r_b {background-image:url(../image/caret_r_b_L.png),url(../image/caret_r_b_L.png);}

i[class*="i_p_"] {background-size:auto 1.1em;}
.i_p_first_b, *[class*="btn_rnd"] i.i_p_first {background-image:url(../image/p_first_b.svg);}
.i_p_prev_b, *[class*="btn_rnd"] i.i_p_prev {background-image:url(../image/p_prev_b.svg);}
.i_p_next_b, *[class*="btn_rnd"] i.i_p_next {background-image:url(../image/p_next_b.svg);}
.i_p_last_b, *[class*="btn_rnd"] i.i_p_last {background-image:url(../image/p_last_b.svg);}
.i_p_first_w, *[class*="btn_rect"] i.i_p_first {background-image:url(../image/p_first_w.svg);}
.i_p_prev_w, *[class*="btn_rect"] i.i_p_prev {background-image:url(../image/p_prev_w.svg);}
.i_p_next_w, *[class*="btn_rect"] i.i_p_next {background-image:url(../image/p_next_w.svg);}
.i_p_last_w, *[class*="btn_rect"] i.i_p_last {background-image:url(../image/p_last_w.svg);}

/* icons - 社群 */
/* 2022-05-03: Chiuhua + 220300968, 調整 LINE icon 圖樣會因樣版或商店顯示不同顆 Logo, MAZDA CPO 需求 */
/* 2022-12-06: Chiuhua # H221000167, 社群 icon 樣式從 root 盤整, 每個社群 icon 樣式名唯一化, 品牌差異與按鈕 icon 圖樣差異用 css bgimg 處理 */
i[class*="i_logo_line"] {background-size:1.3em auto;}
.i_logo_line_b {background-image:url(../image/logo_line_b_L.png);}
.i_logo_line_w {background-image:url(../image/logo_line_w_L.png);}
.i_logo_line {background-image:url(../image/logo_line_L.png);}

i[class*="i_logo_fb"] {background-size:1.25em auto;}
.i_logo_fb_b {background-image:url(../image/logo_fb_b.svg);}
.i_logo_fb_w {background-image:url(../image/logo_fb_w.svg);}
.i_logo_fb {background-image:url(../image/logo_fb.svg);}

i[class*="i_logo_yt"] {background-size:1.4em auto;}
.i_logo_yt_b {background-image:url(../image/logo_youtube_b_L.png);}
.i_logo_yt_w {background-image:url(../image/logo_youtube_w_L.png);}
.i_logo_yt {background-image:url(../image/logo_youtube_L.png);}

i[class*="i_logo_ig"] {background-size:1.25em auto;}
.i_logo_ig_b {background-image:url(../image/logo_ig_b_L.png);}
.i_logo_ig_w {background-image:url(../image/logo_ig_w_L.png);}
.i_logo_ig {background-image:url(../image/logo_ig_L.png);}
/*=== icons End ===*/

/*=== 按鈕 Start ===*/
/* 2022-10-26: Chiuhua # 220802029, 改良 root btn 預設顏色以減少樣版及商店 icon 差異化, 方按鈕=深底白 icon ； 圓按鈕=透明底外框線 */
/* 方 - 單/多顆共用 - 預設灰色 */
/* 2024-07-04: Chiuhua # 240602259, 調整 tag, 因新的 Angular 不支援自定義的 lang tag, 系統部先不需調整 html tag，所以過渡期 css 語法 lang 與 label 並存 */
/* 2024-07-09: Chiuhua # 240700690, button 游標樣式優化 (子層游標需與父層一樣是手指圖示, DMS + APP + oTToCity) */
/* 2024-12-03: Chiuhua # 241200827, 改良 btn_rect 樣式, 加 transition 漸變效果, 作用範圍 root → template → website/webpage */
/* 2026-03-13: Chiuhua # 260301050, 新增 方形按鈕 文字後接 icon 樣式 */
.btn_rect_wrap1 button, .btn_rect {display:inline-block;vertical-align:middle;line-height:1.875rem;white-space:nowrap;margin:3px;padding:0px 1em;border:none;border-radius:2em;cursor:pointer;transition:background-color 0.3s ease-out;}
.btn_rect_wrap1 button:not([class*="_sec"]):not([class*="_passcode"]), .btn_rect:not([class*="_sec"]):not([class*="_passcode"]) {background-color:hsl(220,90%,5%);box-shadow:0px 0.8rem 0.8rem hsla(0,0%,100%,0.3) inset,0px -0.8rem 0.8rem hsla(0,0%,0%,0.2) inset,0px 0px 2px 1px hsla(0,0%,0%,0.25) inset;color:#FFF;}
.btn_rect_wrap1 button *, .btn_rect * {vertical-align:middle;font-size:inherit;line-height:1em;color:inherit;cursor:inherit;}
.btn_rect_wrap1 button lang, .btn_rect lang, .btn_rect_wrap1 button label, .btn_rect label {position:relative;top:-1px;font-weight:inherit;}
.btn_rect_wrap1 > button > *:not(:nth-child(1)):not(i), .btn_rect > *:not(:nth-child(1)):not(i) {margin-left:3px;margin-right:2px;}
.btn_rect_wrap1 > button > * ~ i, .btn_rect > * ~ i {margin-left:3px;margin-right:-5px;}
.btn_rect_wrap1 button:not(.btn_die):not(.btn_rect_sec):not([class*="_passcode"]):hover, .btn_rect:not(.btn_die):not(.btn_rect_sec):not([class*="_passcode"]):hover {background-color:hsl(220,90%,20%);}

/* 方 - 次要按鈕 */
/* 2022-10-31: Chiuhua # 220802029, 將 .btn_rect_sec 次要按鈕加進共用樣式 */
/* 2024-12-03: Chiuhua # 241200827, 改良 btn_rect 樣式, 加 transition 漸變效果, 作用範圍 root → template → website/webpage */
/* 2025-11-05: Chiuhua # 251100266, 改良 次要按滑鼠經過漸變語法 */
/* 2026-03-16: Chiuhua # 260301050, 改良 .btn_rect_sec icons 語法，※ 用 css 屬性選擇器加 filter 取代眾多圖樣逐一定義 */
.btn_rect_wrap1 button.btn_rect_sec, .btn_rect.btn_rect_sec {background-color:#FFF;box-shadow:0px 0px 0px 1px hsla(220,90%,5%,0.75) inset;transition-property:box-shadow;}
.btn_rect_wrap1 button.btn_rect_sec:not(.btn_die):hover, .btn_rect.btn_rect_sec:not(.btn_die):hover {box-shadow:0px 0px 0px 1px hsl(220,90%,20%) inset, 0px 0px 0px 1px hsl(220,90%,20%);}
.btn_rect_wrap1 button.btn_rect_sec i:not([class*="_logo_"]), .btn_rect.btn_rect_sec i:not([class*="_logo_"]) {filter:invert(1);}

/* 方 - btn_passcode */
/* 2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式 (btn_passcode 樣式從 genwrapper 移至 genlib css 檔定義) */
.passcode_wrapper .btn_passcode {font-size:0.8125em;background-color:#FFF !important;color:inherit !important;box-shadow:none !important;padding:0px 0.5em;transition-property:box-shadow !important;}
.passcode_wrapper .btn_passcode > * {top:unset;margin-top:unset;}
.passcode_wrapper .btn_passcode:not(:hover) > i {opacity:0.8 !important;}
.passcode_wrapper .btn_passcode:hover {box-shadow:0px 0px 0px 1px hsl(220,90%,20%) inset, 0px 0px 0px 1px hsl(220,90%,20%) !important;}

/* 方 - 加 i tag */
.btn_rect_wrap1 button > i, .btn_rect > i {margin-top:-0.15em;}
.btn_rect_wrap1 button > i:nth-child(1), .btn_rect > i:nth-child(1) {/* margin-left:0px;margin-right:3px; */}
.btn_rect_wrap1 button > i:nth-last-child(1), .btn_rect > i:nth-last-child(1) {/* margin-left:3px;margin-right:0px; */}
.btn_rect_wrap1 button > i:only-child, .btn_rect > i:only-child {margin:0px;margin-top:-0.25em;}
.btn_rect_wrap1 button:not(.ico_abs_l) > i:nth-child(1).i_caret_l, .btn_rect:not(.ico_abs_l) > i:nth-child(1).i_caret_l {margin-left:-0.5em;}
.btn_rect_wrap1 button:not(.ico_abs_r) > i:nth-last-child(1).i_caret_r, .btn_rect:not(.ico_abs_r) > i:nth-last-child(1).i_caret_r {margin-right:-0.5em;}

/* 方 - 加 i tag - icon 固定在單側, 文字居中, 套在 button 本身 */
button.ico_abs_l, button.ico_abs_r {padding:0px 3em !important;position:relative;}
button.ico_abs_l > i, button.ico_abs_r > i {position:absolute;top:0px;bottom:0px;margin:auto;}
button.ico_abs_l > i {left:0.5em;}
button.ico_abs_r > i {right:0.5em;}

/* 方 - 置於標題尾端 */
/* 2025-11-07: Chiuhua # 251100266, 調整 btn_rect_intitleright 置於標題尾端的按鈕樣式 (與方形按鈕僅保留 box-shadow 差異, root 和所有樣版及品牌移除底色差異樣式) */
button.btn_rect_intitleright {border-top-right-radius:0px;border-bottom-right-radius:0px;/* background-color:hsl(220,15%,45%); */box-shadow:0px 0px 0px 2px #FFF !important;margin:0px;}

/* 方 - 多顆或需要獨立一行顯示 */
/* 2020-04-09: Chiuhua # 為讓 IE11 與 Edge 相容, display 樣式與 APP 不同 */
.btn_rect_wrap1 {width:100%;display:inline-block;vertical-align:middle;text-align:center;}
.btn_rect_wrap1 button {min-width:6em;text-align:center;margin-left:10px;margin-right:10px;}

/* 方 - 單顆 */
.btn_rect {width:auto;min-width:3.5em;text-align:center;}

/* 方 - 按鈕縮小, 繼承加套 */
.btn_rect_wrap1.btn_rect_small {margin:5px auto;}
.btn_rect_wrap1.btn_rect_small > *, .btn_rect.btn_rect_small {font-size:0.8125em;line-height:1.8em;min-width:auto;}
.btn_rect_wrap1.btn_rect_small > * > img, .btn_rect.btn_rect_small > img {font-size:inherit;margin-right:0.2em;margin-top:-2px;}

/* 方 - 按鈕加高, 文字沒放大, 繼承加套 */
/* 2022-11-17: Chiuhua + H221000167, 新增 按鈕加高共用樣式, HONDA HCUC 需求 */
.btn_rect_wrap1.btn_rect_higher > *, .btn_rect.btn_rect_higher {line-height:calc(1.875rem * 1.388);}

/* 方 - 社群按鈕 */
/* 2025-02-04: Chiuhua + 250119001, 新增 [LINE 加入好友] 社群按鈕, STLA 服務網頁 需求 */
/* 2025-03-21: Chiuhua # 250301403, 改良 [LINE 加入好友] 社群按鈕, button 子層放 a tag 直接 link 指定網址, 無需再用 js, 可提升效能 */
/* 注意: [LINE 加入好友] btn 底色 hsl(138,93%,37%) 是 LINE 官方 VI 色碼, 勿隨意更動 */
button[class*="btn_rect_line"] {display:inline-flex;background-color:hsl(138,93%,37%) !important;box-shadow:0px 0.8rem 0.8rem hsla(138,93%,60%,0.5) inset,0px -0.8rem 0.8rem hsla(138,93%,15%,0.3) inset,0px 0px 0.5em hsla(138,93%,15%,0.5) inset !important;padding:0px !important;}
button[class*="btn_rect_line"] > a {display:inline-flex;width:100%;height:100%;align-items:center;justify-content:center;gap:0.25em;letter-spacing:0.05em;padding:0px 1em;border-radius:inherit;font-weight:inherit;text-decoration:none;}
button[class*="btn_rect_line"] > a:before {content:'';width:1em;height:1em;background:no-repeat center center / auto 100%;background-image:url(../image/logo_line_w_L.png);}
button[class*="btn_rect_line"] > a:hover {background-color:hsl(138,93%,15%) !important;}
button[class*="btn_rect_line"] * {line-height:inherit;top:unset !important;}

/* 圓 - 多顆 - 底部加文字, 繼承加套 */
.btn_rnd_wrap1.btn_rnd_wrap1_withtxt {font-size:0px;}
.btn_rnd_wrap1.btn_rnd_wrap1_withtxt > * {width:auto;max-width:15rem;height:auto;display:inline-block;vertical-align:top;text-align:center;}
.btn_rnd_wrap1.btn_rnd_wrap1_withtxt button ~ * {width:100%;display:inline-block;vertical-align:top;padding:0px 0.25em;}
.btn_rnd_wrap1.btn_rnd_wrap1_withtxt button ~ small {font-size:0.875rem;line-height:1.3em;}
/* 圓 - 多顆 - 底部加文字 - 3顆均分 */
.btn_rnd_wrap1.btn_rnd_wrap1_withtxt.btn_rnd_wrap1_withtxt_divide3 > * {width:33.3333%;}

/* 圓 - 單/多顆共用 - 預設灰色 */
.btn_rnd_wrap1 button, .btn_rnd {width:1.875rem;height:1.875rem;display:inline-block;vertical-align:middle;border-radius:50%;font-size:0.75em;line-height:1.1em;background:none;box-shadow:0px 0px 0px 1px hsla(220,90%,5%,0.75);border:none;overflow:hidden;cursor:pointer;}

/* 圓 - 多顆 */
.btn_rnd_wrap1 {width:100%;display:inline-block;vertical-align:middle;text-align:center;}
.btn_rnd_wrap1 button {margin:3px 10px;}

/* 圓 - 單顆 */
.btn_rnd {margin:3px;}

/* 圓 - 按鈕縮小, 繼承加套 */
.btn_rnd_wrap1.btn_rnd_small > *, .btn_rnd.btn_rnd_small {width:1.5rem;height:1.5rem;font-size:0.55em;}
.btn_rnd_wrap1.btn_rnd_small > * > i, .btn_rnd.btn_rnd_small > i {width:1.2em;height:1.2em;background-size:75% auto;}
.btn_rnd_wrap1.btn_rnd_small > * > i[class*="i_info2"], .btn_rnd.btn_rnd_small > i[class*="i_info2"] {background-size:auto 90%;}

/* 圓 - 原寸與縮小按鈕內放特定按鈕圖樣尺寸與位置 */
.btn_rnd_wrap1 button > i[class*="i_caret_l"], .btn_rnd > i[class*="i_caret_l"],
.btn_rnd_wrap1 button > i[class*="i_caret_r"], .btn_rnd > i[class*="i_caret_r"] {background-size:auto 75%;}
.btn_rnd_wrap1 button > i[class*="i_caret_u"], .btn_rnd > i[class*="i_caret_u"],
.btn_rnd_wrap1 button > i[class*="i_caret_d"], .btn_rnd > i[class*="i_caret_d"] {background-size:75% auto;}
.btn_rnd_wrap1 button > i[class*="i_caret_u"], .btn_rnd > i[class*="i_caret_u"] {background-position-y:40%;}
.btn_rnd_wrap1 button > i[class*="i_caret_d"], .btn_rnd > i[class*="i_caret_d"] {background-position-y:60%;}
.btn_rnd_wrap1 button > i[class*="i_caret_l"], .btn_rnd > i[class*="i_caret_l"] {background-position-x:40%;}
.btn_rnd_wrap1 button > i[class*="i_caret_r"], .btn_rnd > i[class*="i_caret_r"] {background-position-x:60%;}

/* 圓按鈕 - 內置社群 icon */
/* 2022-12-06: Chiuhua # H221000167, 社群 icon 樣式從 root 盤整, 每個社群 icon 樣式名唯一化, 品牌差異與按鈕 icon 圖樣差異用 css bgimg 處理 */
.btn_rnd_wrap1 button > i[class*="i_logo"], .btn_rnd > i[class*="i_logo"] {background-size:80% auto;}
.btn_rnd_wrap1 button > i[class*="i_logo_fb"], .btn_rnd > i[class*="i_logo_fb"] {background-image:url(../image/logo_fb2_L.png);background-size:auto 80%;}

/* 按鈕 - 灰階+禁用 */
.btn_die {-webkit-filter:grayscale(100%);filter:grayscale(100%);background-color:hsl(0,0%,75%) !important;color:hsla(0,0%,0%,0.6) !important;opacity:0.8;box-shadow:0px 0px 0px 1px hsla(0,0%,100%,0.25) !important;cursor:not-allowed !important;}
.btn_die > i {opacity:0.35 !important;}
.btn_die > *:not(input):not(img) {background-color:inherit !important;}
.btn_die:before, .btn_die:after {opacity:inherit;}

/* btn_toggle 子層 tag 用 label,預留內置 checkbox 的需求 */
.btn_toggle {display:inline-table;vertical-align:middle;margin:3px;border-radius:1em;}
.btn_toggle > * {display:table-cell;min-width:2.5em;height:1.875rem;line-height:normal;text-align:center;vertical-align:middle;padding:0px 0.25em;border:0px;/* background:hsl(0,0%,85%);box-shadow:0px 0.8rem 0.8rem hsla(0,0%,100%,0.7) inset,0px -0.8rem 0.8rem hsla(0,0%,0%,0.2) inset,0px 0px 2px hsla(0,0%,0%,0.75),0px -1px 2px #FFF inset;color:hsla(0,0%,0%,0.6); */background-color:hsl(220,15%,45%);box-shadow:0px 0.8rem 0.8rem hsla(0,0%,100%,0.3) inset,0px -0.8rem 0.8rem hsla(0,0%,0%,0.2) inset,0px 0px 2px 1px hsla(0,0%,0%,0.25) inset;color:hsla(0,0%,100%,0.7);border:1px solid hsla(0,0%,100%,0.75);cursor:pointer;}
.btn_toggle > *:nth-child(1) {border-bottom-left-radius:inherit;border-top-left-radius:inherit;padding-left:0.5em;}
.btn_toggle > *:nth-last-child(1) {border-bottom-right-radius:inherit;border-top-right-radius:inherit;padding-right:0.5em;}
.btn_toggle > *.togOn {font-weight:bold;background-color:hsl(220,90%,5%);color:#FFF;}
.btn_toggle > *:not(.togOn):not(:hover) i {opacity:0.7 !important;}
.btn_toggle > *:hover {background-color:hsl(220,90%,20%);color:#FFF;}
/*=== 按鈕 End ===*/

/* 搜尋膠囊 search input capsule */
/* 為能相容於 IE, 樣式語法與 APP 不同*/
.searchipt_cap {display:inline-table;white-space:nowrap;width:100%;max-width:300px;height:1.875rem;line-height:1.875rem;border-radius:1em;margin:3px;position:relative;}
.searchipt_cap > * {height:inherit;line-height:inherit;display:inline-block;border-radius:0px !important;}
.searchipt_cap > input {padding-left:0.6em;padding-right:2.5em;border-radius:inherit !important;background-color:#FFF !important;box-shadow:0px 0px 2px hsla(0,0%,0%,0.75);}
.searchipt_cap > button {width:2.5em;min-width:2.5em;margin:0px;position:absolute;right:0px;top:0px;bottom:0px;margin:auto;border-top-right-radius:inherit !important;border-bottom-right-radius:inherit !important;}
.searchipt_cap > button:after {content:'';position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;width:1.2em;height:1.2em;background-repeat:no-repeat;background-position:center;background-size:100% auto;background-image:url(../image/search_w_L.png);}

/* 搜尋膠囊 - 置於標題尾端 */
.searchipt_cap.searchipt_cap_intitleright {border-top-right-radius:0px;border-bottom-right-radius:0px;margin:0px;padding-left:3px;}
.searchipt_cap.searchipt_cap_intitleright > input {padding-left:0.8em;background-color:hsl(220,15%,45%) !important;color:#FFF;box-shadow:0px 0px 0px 2px #FFF;}
.searchipt_cap.searchipt_cap_intitleright > input::-webkit-input-placeholder {color:hsla(0,0%,100%,0.5);}
.searchipt_cap.searchipt_cap_intitleright > input::-moz-placeholder {color:hsla(0,0%,100%,0.9);} /* FF 19+ */
.searchipt_cap.searchipt_cap_intitleright > input:-moz-placeholder {color:hsla(0,0%,100%,0.9);}
.searchipt_cap.searchipt_cap_intitleright > button {background-color:transparent !important;box-shadow:none !important;}

/* NG. 下拉篩選 - 使用 select tag */
.filter_sel {display:inline-table;width:100%;/* table-layout:fixed;*/ border:1px dashed #C00;}
.filter_sel > * {display:table-cell;white-space:nowrap;overflow:hidden;}
.filter_sel > h3 {/* width:3.5em; */}
.filter_sel > ul {/* overflow-x:auto; */}
.filter_sel > ul > li {display:inline-block;}

/* 下拉篩選 - 使用 button tag */
/* ※ 為各瀏覽器相容，ul overflow 的 scroll 由 JS 處理，css 設為 hidden */
/* 2023-10-11: Ys # 230900138, 調整 Modern 樣版的查詢條件配色：白底黑字 */
.filter_btn {display:inline-block;vertical-align:middle;width:100%;overflow:hidden;}
.filter_btn > * {display:inline-block;vertical-align:middle;white-space:nowrap;float:left;}
.filter_btn > .btn_rect_wrap1 {font-size:0px !important;width:calc(100% - 3rem);text-align:left;}
.filter_btn > .btn_rect_wrap1 button {min-width:2em;max-width:13em;height:1.55em;line-height:1.35em;overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle;margin:auto 0.2em;padding-left:0.5em;background-color:hsl(220,15%,45%);background-image:url(../image/dropdown_b.svg)/* 這裡的箭頭色有 bug, 作者 Ys, 請見 #230900138 2023-11-13 Chiuhua 批註 */;background-repeat:no-repeat;background-position:right 5px top 50%;background-size:0.45em auto;}
.filter_btn > .btn_rect_wrap1 button:not(:hover) {color:hsla(0,0%,100%,0.7) !important;}
.filter_btn > .btn_rect_wrap1 button.btnOn {background-color:hsl(220,90%,5%);color:#FFF !important;box-shadow:0px 0.8rem 0.8rem hsla(0,0%,100%,0.3) inset, 0px -0.8rem 0.8rem hsla(0,0%,0%,0.3) inset, 0px 0px 2px hsla(0,0%,0%,0.75), 0px -1px 2px #FFF inset;}

/* 下拉篩選 - 內容選項 */
.filter_btn_dropdown {}
.filter_btn_dropdown.bubble {min-width:8em;text-align:left;margin:0px;padding:0px;}
.filter_btn_dropdown.bubble li {max-width:15em;overflow:hidden;text-overflow:ellipsis;}
/* 2026-03-12: Ys # 251102028, 調整 加大條件區塊，讓移出後關閉範圍變大 */
.filter_btn_dropdown.bubble:after {content:'';position:absolute;width:140%;height:120%;left:-30px;top:0px;}
.filter_btn_dropdown > ul *:not(.liOn) {color:hsla(0,0%,0%,0.7);}
.filter_btn_dropdown > ul > li {white-space:nowrap;padding:0px 0.5em;color:inherit;cursor:pointer;}
.filter_btn_dropdown > ul > li * {cursor:inherit;}
.filter_btn_dropdown > ul > li:not(:nth-last-child(1)) {border-bottom:1px dashed hsla(0,0%,0%,0.35);}
.filter_btn_dropdown > ul > li:hover, .filter_btn_dropdown > ul > li.liOn:hover {color:hsl(220,100%,38%);}
.filter_btn_dropdown > ul > li:hover {background-color:hsl(55,100%,90%);}
.filter_btn_dropdown > ul > li.liOn {background-color:hsl(55,100%,80%);transition:background-color 0.2s;}

/* 下拉篩選 - 項目較多改雙排 */
.lbcbx_wrapper.lbcbx_flexCol2 {display:flex;flex-wrap:wrap;width:240px;}
.lbcbx_flexCol2 li {flex:auto;width:7em;}
/* 2024-12-05: Ys # 241201494, 調整 下拉篩選 - 項目較多時，會出現卷軸 */
.lbcbx_wrapper.lbcbx_autoScroll {max-height:370px;overflow-y:auto;}

/* 下拉篩選加 checkbox */
.filter_btn_dropdown > ul.lbcbx_wrapper label {width:100%;color:inherit;}

/* 下拉篩選加 checkbox - cbx 置右 */
.filter_btn_dropdown > ul.lbcbx_wrapper.cbx2r {}
.filter_btn_dropdown > ul.lbcbx_wrapper.cbx2r label {padding-right:1.6em;position:relative;}
.filter_btn_dropdown > ul.lbcbx_wrapper.cbx2r label > input, .filter_btn_dropdown > ul.lbcbx_wrapper.cbx2r label:before {position:absolute;top:7px;right:-0.15em;}

/* 篩選動作按鈕 */
/* 2025-11-26: Chiuhua # 251102238, Modern 樣版樣式 QA, 修正 filter, action 按鈕 線條色及文字色 */
.action_btn.btn_rect_wrap1 {width:auto;font-size:0px !important;}
.action_btn.btn_rect_wrap1 button {min-width:2em;height:1.55em;line-height:1.35em;vertical-align:middle;margin:auto 0.2em;padding:0px 0.5em;overflow:hidden;background-color:hsl(220,15%,45%);/* color:hsla(0,0%,100%,0.7) !important; */}
.action_btn.btn_rect_wrap1 button:not(.btnOn):not(.btn_die):hover {color:#FFF !important;}
.action_btn.btn_rect_wrap1 button.btnOn {background-color:hsl(220,90%,5%);color:#FFF !important;box-shadow:0px 0.8rem 0.8rem hsla(0,0%,100%,0.3) inset, 0px -0.8rem 0.8rem hsla(0,0%,0%,0.3) inset, 0px 0px 2px hsla(0,0%,0%,0.75), 0px -1px 2px #FFF inset;}

.action_btn.btn_rect_wrap1 button.btn_die {opacity:unset;filter:none;background-color:hsla(0,0%,0%,0.5) !important;box-shadow:0px 0px 0px 1px hsla(0,0%,100%,0.3) !important;}
.action_btn.btn_rect_wrap1 button.btn_die > * {opacity:0.4 !important;color:#FFF;background-color:transparent !important;}

.action_btn.btn_rect_wrap1 button > i {height:1em;background-size:auto 100%;}

/* bubble 泡泡 */
/* 2020-09-21: Chiuhua # 調整 bubble display 的屬性值為 inline-table, 讓有設 letter spacing 的文字換行正確 */
/* 2022-03-01: Chiuhua # 211102070, 修正 bubble 偽元素箭頭遮住第一子層的問題, app 商品櫥窗 延伸調整 */
/* 2026-02-04: Chiuhua # 260200333, 改良 bubble 子層行高 inherit (範圍：DMS、APP、oTToCity) */
.bubble {display:inline-table;vertical-align:middle;text-align:center;line-height:1.3em;word-wrap:break-word;margin:0.625em;padding:0.415em;border-radius:5px;background-color:#FFF;border:1px solid #FFF;box-shadow:0px 0px 5px 1px hsla(0,0%,0%,0.75);position:relative;}
*[class*="bubble_arrow"]:before {content:'';position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;width:0.625em;height:0.625em;background-color:inherit;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:inherit;z-index:1;}
*[class*="bubble_arrow"] > * {position:relative;z-index:2;border-radius:inherit;overflow:hidden;line-height:inherit;}
.bubble_arrowT:before {top:-0.33em;bottom:auto;box-shadow:2px -2px 2px hsla(0,0%,0%,0.5);border-left-width:0px;border-bottom-width:0px;}
.bubble_arrowB:before {top:auto;bottom:-0.33em;box-shadow:-2px 2px 2px hsla(0,0%,0%,0.5);border-top-width:0px;border-right-width:0px;}
.bubble_arrowL:before {left:-0.33em;right:auto;box-shadow:-2px -2px 2px hsla(0,0%,0%,0.5);border-right-width:0px;border-bottom-width:0px;}
.bubble_arrowR:before {left:auto;right:-0.33em;box-shadow:2px 2px 2px hsla(0,0%,0%,0.5);border-left-width:0px;border-top-width:0px;}

/*=== 圖樣 Start ===*/
/* 標示 - 三角形 triangle, 預設在文字前 */
.mark_tri:before, .mark_tri.mark_tri_rev:after {content:'';position:relative;border:solid transparent;border-width:0.3rem;font-size:0px;line-height:0px;vertical-align:middle;top:-1px;margin:0.35rem;}
.mark_tri_r:before, .mark_tri_r.mark_tri_rev:after {border-right-width:0px;border-left-color:#000;margin-left:0.45rem;}
.mark_tri_r.mark_tri_w:before, .mark_tri_r.mark_tri_w.mark_tri_rev:after {border-left-color:#FFF;}
.mark_tri_r.mark_tri_yellow:before, .mark_tri_r.mark_tri_yellow.mark_tri_rev:after {border-left-color:hsl(60,100%,50%);}
.mark_tri.mark_tri_rev:before {display:none;}

/* 排序箭頭 */
.sort1 {text-decoration:underline;cursor:pointer;}
.sort1:after {content:'';position:relative;width:1em;height:1em;display:inline-block;vertical-align:text-bottom;top:-1px;white-space:nowrap;background-repeat:no-repeat;background-position:center;background-size:auto 65%;}
.sort1.sorting.sorting_down:after {-webkit-transform:rotate(180deg);transform:rotate(180deg);}
/* 排序箭頭 - 父層深底 */
.sort1_parbgdk {}
.sort1_parbgdk .sort1:after {background-image:url(../image/arrow_u_w_L.png);}
.sort1_parbgdk .sort1.sorting {color:hsl(60,100%,50%) !important;}
.sort1_parbgdk .sort1.sorting:after {background-image:url(../image/arrow_u_yellow_L.png);}
/* 排序箭頭 - 父層淺底 */
.sort1_parbglight {}
.sort1_parbglight .sort1:after {background-image:url(../image/arrow_u_b_L.png);}
.sort1_parbglight .sort1:not(.sorting):after {opacity:0.7;}
.sort1_parbglight .sort1.sorting {color:hsl(30,100%,50%);}
.sort1_parbglight .sort1.sorting:after {background-image:url(../image/arrow_u_orange_L.png);}

/* caret 左,右 */
.caret_l_b, .caret_l_w, .caret_r_b, .caret_r_w {width:1.1rem;min-height:1.5rem;display:table-cell;text-align:center;vertical-align:middle;background:no-repeat center center / auto 1rem;cursor:pointer;}
.caret_l_b, .caret_l_w {background-position-x:40%;}
.caret_r_b, .caret_r_w {background-position-x:60%;}
.caret_l_b {background-image:url(../image/caret_l_b_alpha35.svg);}
.caret_l_w {background-image:url(../image/caret_l_w_alpha70.svg);}
.caret_r_b {background-image:url(../image/caret_r_b_alpha35.svg);}
.caret_r_w {background-image:url(../image/caret_r_w_alpha70.svg);}
/* caret icon - 在標題上 End */

/*=== 往前往後箭頭 Start ===*/
.ico_prev_b, .ico_prev_w, .ico_prev_wb, .ico_next_b, .ico_next_w, .ico_next_wb {width:1.1rem;min-height:1.5rem;display:table-cell;text-align:center;vertical-align:middle;cursor:pointer;position:relative;}
.ico_prev_b:before, .ico_prev_w:before, .ico_prev_wb:before, .ico_next_b:before, .ico_next_w:before, .ico_next_wb:before {content:'';position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;height:100%;background:no-repeat center center / 100% auto;-webkit-transform:scaleY(1.2);transform:scaleY(1.3);}
.ico_prev_b:before, .ico_next_b:before {width:0.7rem;opacity:0.35;}
.ico_prev_w:before, .ico_next_w:before {width:0.6rem;opacity:0.7;}
.ico_prev_wb:before, .ico_next_wb:before {width:0.75rem;height:110%;}

.ico_prev_b:before {background-image:url(../image/go_prev_b.svg);}
.ico_prev_w:before {background-image:url(../image/go_prev_w.svg);}
.ico_prev_wb:before {background-image:url(../image/go_prev_narrow_wb.svg);}
.ico_next_b:before {background-image:url(../image/go_next_b.svg);}
.ico_next_w:before {background-image:url(../image/go_next_w.svg);}
.ico_next_wb:before {background-image:url(../image/go_next_narrow_wb.svg);}

/* 往前往後箭頭 - 放大, 繼承加套寫法: .ico_prev_b.ico_prev_sc150 */
.ico_prev_sc150, .ico_next_sc150 {width:1.15rem;}
.ico_prev_sc150:before, .ico_next_sc150:before {width:0.65rem;-webkit-transform:scaleY(1.6);transform:scaleY(1.6);}
.ico_prev_sc200, .ico_next_sc200 {width:1.6rem;}
.ico_prev_sc200:before, .ico_next_sc200:before {width:1rem;}
.ico_prev_sc300, .ico_next_sc300 {width:2rem;}
.ico_prev_sc300:before, .ico_next_sc300:before {width:1.2rem;-webkit-transform:scaleY(1.7);transform:scaleY(1.7);}

/* 放大 2 倍以上時, 圖形變瘦長 */
.ico_prev_b.ico_prev_sc200:before, .ico_prev_b.ico_prev_sc300:before {background-image:url(../image/go_prev_narrow_b.svg);}
.ico_prev_w.ico_prev_sc200:before, .ico_prev_w.ico_prev_sc300:before {background-image:url(../image/go_prev_narrow_w.svg);}
.ico_next_b.ico_next_sc200:before, .ico_next_b.ico_next_sc300:before {background-image:url(../image/go_next_narrow_b.svg);}
.ico_next_w.ico_next_sc200:before, .ico_next_w.ico_next_sc300:before {background-image:url(../image/go_next_narrow_w.svg);}

/* 往前往後箭頭 - 浮動, 繼承加套寫法: .ico_prev_b.ico_prev_abslt */
.ico_abs_wrap {position:relative;}
.ico_abs_wrap > .ico_prev_b, .ico_abs_wrap > .ico_prev_w, .ico_abs_wrap > .ico_prev_wb,
.ico_abs_wrap > .ico_next_b, .ico_abs_wrap > .ico_next_w, .ico_abs_wrap > .ico_next_wb {position:absolute;top:0px;bottom:0px;height:inherit;z-index:2;}
.ico_abs_wrap > .ico_prev_b, .ico_abs_wrap > .ico_prev_w, .ico_abs_wrap > .ico_prev_wb {left:0px;}
.ico_abs_wrap > .ico_next_b, .ico_abs_wrap > .ico_next_w, .ico_abs_wrap > .ico_next_wb {right:0px;}
/*=== 往前往後箭頭 End ===*/

/* ribbon 緞帶 */
.ribbon {width:50px;height:50px;display:inline-block;overflow:hidden;vertical-align:top;position:relative;}
.ribbon > * {position:absolute;}
.ribbon > figure {left:0px;top:0px;width:100%;height:100%;background:no-repeat center top / cover;}
.ribbon > ins {width:2em;height:1.3em;line-height:1.3em !important;white-space:nowrap;font-size:14px;color:#FFF;text-shadow:1px 1px 3px #000;text-align:center;}
.ribbon.ribbon_lt {-webkit-transform-origin:top left;transform-origin:top left;}/* 預設縮放時的基準點 */
.ribbon.ribbon_rt {-webkit-transform-origin:top right;transform-origin:top right;}/* 預設縮放時的基準點 */
.ribbon.ribbon_lt > ins {left:2px;top:0.4em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.ribbon.ribbon_rt > ins {right:2px;top:0.4em;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.ribbon.ribbon_rt > figure {-webkit-transform:scaleX(-1);transform:scaleX(-1);}

/* ribbon 緞帶 - icon 縮放 , 為取縮放結果=整數, 調整 0.75 -> 0.76 = 38 */
.ribbon.ribbon_sc50 {-webkit-transform:scale(0.5);transform:scale(0.5);margin-bottom:-25px;}
.ribbon.ribbon_sc75 {-webkit-transform:scale(0.76);transform:scale(0.76);margin-bottom:-12px;}
.ribbon.ribbon_sc125 {-webkit-transform:scale(1.28);transform:scale(1.28);margin-bottom:14px;}
.ribbon.ribbon_sc150 {-webkit-transform:scale(1.52);transform:scale(1.52);margin-bottom:26px;}
.ribbon.ribbon_sc175 {-webkit-transform:scale(1.76);transform:scale(1.76);margin-bottom:38px;}
.ribbon.ribbon_sc200 {-webkit-transform:scale(2);transform:scale(2);margin-bottom:50px;}

.ribbon_lt.ribbon_sc50 {margin-right:-25px;}
.ribbon_lt.ribbon_sc75 {margin-right:-12px;}
.ribbon_lt.ribbon_sc125 {margin-right:14px;}
.ribbon_lt.ribbon_sc150 {margin-right:26px;}
.ribbon_lt.ribbon_sc175 {margin-right:38px;}
.ribbon_lt.ribbon_sc200 {margin-right:50px;}

.ribbon_rt.ribbon_sc50 {margin-left:-25px;}
.ribbon_rt.ribbon_sc75 {margin-left:-12px;}
.ribbon_rt.ribbon_sc125 {margin-left:14px;}
.ribbon_rt.ribbon_sc150 {margin-left:26px;}
.ribbon_rt.ribbon_sc175 {margin-left:38px;}
.ribbon_rt.ribbon_sc200 {margin-left:50px;}

/* ribbon 緞帶 - 依顏色/狀態套用 */
.ribbon.ribbon_gray > figure, .ribbon.ribbon_appraisal > figure {background-image:url(../image/ribbon_gray.svg);}
.ribbon.ribbon_blue > figure, .ribbon.ribbon_instock > figure {background-image:url(../image/ribbon_blue.svg);}
.ribbon.ribbon_green > figure, .ribbon.ribbon_retrofix > figure {background-image:url(../image/ribbon_green.svg);}
.ribbon.ribbon_orange > figure, .ribbon.ribbon_reserve > figure {background-image:url(../image/ribbon_orange.svg);}
.ribbon.ribbon_red > figure, .ribbon.ribbon_sold > figure {background-image:url(../image/ribbon_red.svg);}
.ribbon.ribbon_purple > figure {background-image:url(../image/ribbon_purple.svg);}

/* badge_star 星星徽章 */
.badge_star {width:1.875em;height:3.125em;display:inline-block;vertical-align:top;background:no-repeat center top / 100% auto;}
.badge_star_gold {background-image:url(../image/badge_star_gold.svg);}

/* pennant 錦旗 */
/* 2025-12-10: Chiuhua + 251205049, 新增 標示圖樣 - pennant 錦旗 */
.pennant {display:inline-flex;flex-direction:column;align-items:center;font-size:0.8125em !important;line-height:1.3em !important;font-weight:bold !important;padding:0.65em;padding-bottom:0.75em;background-image:linear-gradient(160deg, #FFF 0%, transparent 50%);background-color:hsl(0,0%,95%);border:1px solid #FFF;box-shadow:0px 5px 7px hsla(0,0%,0%,0.25);border-radius:0px 0px 100% 100%;position:relative;}
.pennant:before {content:'';position:absolute;top:0px;left:0px;width:100%;height:3px;background-image:linear-gradient(60deg, hsl(0,0%,80%) 20%, hsl(0,0%,70%) 80%);}
.pennant * {font-size:inherit;line-height:inherit;font-weight:inherit;cursor:inherit;}
.pennant > * {text-align:center;}
.pennant > * > strong {font-size:1.3em !important;line-height:1.1em;}
.pennant > * > strong + * {margin-left:0.1em;}
/* pennant 錦旗 - 顏色 */
.pennant.pennant_yellow {background-color:hsl(60,100%,90%);border-color:hsl(40,100%,50%);}
.pennant.pennant_yellow:before {background-image:linear-gradient(60deg, hsl(50,100%,50%) 20%, hsl(30,100%,50%) 80%);}
/* pennant 錦旗 - link 微互動樣式 */
.pennant.pennant_link {transition:box-shadow 0.5s;}
.pennant.pennant_link:hover, .pennant.pennant_link:active {cursor:pointer;filter:saturate(3);box-shadow:0px 5px 13px hsla(0,0%,0%,0.5);}

/* 小日曆 - 日、星期 */
/* 日、星期 - 多顆組/單顆 共用 */
ul.cal_dw_wrapper > li > i, i.cal_dw {width:2.5em;height:auto;display:inline-block;vertical-align:middle;margin:2px;margin-top:calc(2px + 0.2em);padding:0.35em 3px 1px;border-radius:0.25em;background-color:hsl(0,0%,65%);color:#FFF;position:relative;}
.cal_dw_wrapper > li > i:before, .cal_dw_wrapper > li > i:after, .cal_dw:before, .cal_dw:after {content:'';position:absolute;top:-0.25em;width:0.2em;height:0.35em;display:inline-block;border-radius:0.1em;border:1px solid #FFF;background:inherit;box-sizing:content-box;}
.cal_dw_wrapper > li > i:before, .cal_dw:before {left:15%;}
.cal_dw_wrapper > li > i:after, .cal_dw:after {right:15%;}
.cal_dw_wrapper > li > i > *, .cal_dw > * {width:100%;display:block;white-space:nowrap;overflow:hidden;text-align:center;color:inherit;font-weight:bold;border-radius:0.1em;}
.cal_dw_wrapper > li > i > time, .cal_dw > time {font-size:1em !important;line-height:1.3em;background:#FFF;color:#000;}
.cal_dw_wrapper > li > i > small, .cal_dw > small {font-size:0.8125em !important;line-height:1.5em;}

/* 日、星期 - 多顆組 ※ 與 APP 不同, 因 IE9↓ 不支援 display:flex; */
.cal_dw_wrapper {display:inline-block;vertical-align:middle;font-size:0px;white-space:nowrap;overflow:auto;}
.cal_dw_wrapper > li {display:inline-block;vertical-align:middle;padding-top:0.75em;position:relative;}
.cal_dw_wrapper > li > i {cursor:pointer;}
.cal_dw_wrapper > li > sup {position:absolute;top:0px;left:0px;width:100%;line-height:1em;text-align:center;color:#000;transform:scale(0.75);opacity:0.5;}
.cal_dw_wrapper > li > sup * {line-height:inherit;color:inherit;}

/* 日、星期 - 多顆組 - 每行 7 天，顯示 2 行 (繼承加套, RWD), 2020-09-08: Chiuhua + 200500938, JLR 預約網頁需求 */
.cal_dw_wrapper.cal_7d2row {/* width:calc(100% + 100% / 7 / 7 / 0.5);margin-left:calc(-100% / 7 / 7); */width:100%;min-width:280px;max-width:550px;height:8.5rem;white-space:normal;overflow:visible;}
.cal_dw_wrapper.cal_7d2row > li {width:calc(100% / 7);width:calc(99.8% / 7)\0;height:50%;text-align:center;}
.cal_dw_wrapper.cal_7d2row > li > i {width:70%;min-width:2.2em;}

/* 日、星期 - 多顆組 - 預約進廠功能色 */
.cal_dw_wrapper.cal_booking > li > i {background-color:hsl(120,100%,35%);}
.cal_dw_wrapper.cal_booking > li:not(.onOver):not(.onClose):hover > i {box-shadow:0px 0px 2px 2px hsl(60,100%,50%);}
.cal_dw_wrapper.cal_booking > li.onHoliday > i > * {color:hsl(0,100%,45%);text-shadow:-1px -1px 0px #FFF,-1px 1px 0px #FFF,1px -1px 0px #FFF,1px 1px 0px #FFF;}
.cal_dw_wrapper.cal_booking > li.onOver > i, .cal_dw_wrapper.cal_booking > li.onClose > i {background-color:hsl(0,0%,50%);background-image:url(../image/bg_stripe45_b_alpha25.svg);background-size:1.5em auto;cursor:not-allowed;}
.cal_dw_wrapper.cal_booking > li.onOver > i > *, .cal_dw_wrapper.cal_booking > li.onClose > i > * {opacity:0.6;}
.cal_dw_wrapper.cal_booking > li.onSel:after {content:'';position:absolute;left:-2.5%;right:auto;top:10%;width:105%;height:90%;border-radius:inherit;background:url(../image/circle_select_red2.svg) no-repeat center / auto 80%;cursor:pointer;}

/* 時刻、預約時段, 2020-09-08: Chiuhua + 200500938, JLR 預約網頁需求 */
/* 時刻、預約時段 - 多顆組/單顆 共用 */
ul.time_hm_wrapper > li > i, i.time_hm {width:3.3em;height:1.8em;display:inline-block;vertical-align:middle;text-align:center;overflow:hidden;margin:2px;border-radius:0.25em;background-color:#FFF;border:3px solid hsl(0,0%,65%);position:relative;}
/* 因英文字型會異動或品牌差異的關係, 時刻文字不使用 line-height 處理垂直置中問題, 改用 absolute 處理 */
ul.time_hm_wrapper > li > i > time, i.time_hm > time {position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;height:1em;line-height:1em;font-weight:bold;}

/* 時刻、預約時段 - 多顆組 ※ 與 APP 不同, 因 IE9↓ 不支援 display:flex; */
.time_hm_wrapper {display:inline-block;vertical-align:middle;font-size:0px;white-space:nowrap;overflow:auto;}
.time_hm_wrapper > li {display:inline-block;vertical-align:middle;}
.time_hm_wrapper > li > i {cursor:pointer;}

/* 時刻、預約時段 - 多顆組 - 每行 6 個時段，顯示 3 行 (繼承加套, RWD) */
.time_hm_wrapper.time_6t3row {width:100%;min-width:280px;max-width:550px;height:8.5rem;white-space:normal;overflow:visible;}
.time_hm_wrapper.time_6t3row > li {width:calc(100% / 6);width:calc(99.8% / 6)\0;height:calc((100% - 0.75em) / 3);text-align:center;}
.time_hm_wrapper.time_6t3row > li:nth-child(-n+6) {margin-top:calc(0.75em + 3px);}
.time_hm_wrapper.time_6t3row > li > i {width:75%;min-width:3em;height:80%;}

/* 時刻、預約時段 - 多顆組 - 預約進廠功能色 */
.time_hm_wrapper.time_booking > li > i {border-color:hsl(120,100%,35%);}
.time_hm_wrapper.time_booking > li:not(.onOver):not(.onClose):hover > i {box-shadow:0px 0px 2px 2px hsl(60,100%,50%);}
.time_hm_wrapper.time_booking > li.onBreak > i {color:hsl(0,100%,45%);text-shadow:-1px -1px 0px #FFF, -1px 1px 0px #FFF, 1px -1px 0px #FFF, 1px 1px 0px #FFF;}
.time_hm_wrapper.time_booking > li.onOver > i, .time_hm_wrapper.time_booking > li.onClose > i {background-color:hsl(0,0%,80%);background-image:url(../image/bg_stripe45_b_alpha15.svg);background-size:1.5em auto;border-color:hsl(0,0%,50%);cursor:not-allowed;}
.time_hm_wrapper.time_booking > li.onOver > i > *, .time_hm_wrapper.time_booking > li.onClose > i > * {opacity:0.6;}
.time_hm_wrapper.time_booking > li.onSel {position:relative;}
.time_hm_wrapper.time_booking > li.onSel > i {background-color:hsl(120,100%,35%);color:#FFF;}
.time_hm_wrapper.time_booking > li.onSel:after {content:'';position:absolute;left:-2.5%;right:auto;top:-12.5%;bottom:auto;width:105%;height:120%;background:url(../image/oval_select_red2.svg) no-repeat center / auto 80%;cursor:pointer;}

/*=== 圖樣 End ===*/

/* 斜線 底紋, 與 app 共用樣式相同做法 */
.bg_stripe45_b, .bg_stripe45_b_lighter, .bg_stripe45_w {background-size:1.5em auto;}
/* 斜線 - 透明黑線 */
.bg_stripe45_b {background-image:url(../image/bg_stripe45_b_alpha25.svg);}
/* 斜線 - 透明黑線 */
.bg_stripe45_b_lighter {background-image:url(../image/bg_stripe45_b_alpha05.svg);}
/* 斜線 - 透明白線 */
.bg_stripe45_w {background-image:url(../image/bg_stripe45_w_alpha25.svg);}

/*=== 共用-title ===*/
/* title_base */
/* 2020-09-03: Chiuhua + 200500938, 新增 .title_base 樣式, JLR 預約網頁需求 */
/* 2022-10-04: Chiuhua # 220802029, 調整 .title_base root, template, shop 共用及差異樣式 */
/* 2024-08-22: Chiuhua # 240802455, 調整 .title_base 顏色, 線上支付-上優標準版 延伸調整 */
.title_base {display:table;width:100%;height:1.875rem;table-layout:fixed;margin-bottom:2px;padding-left:10px;background-color:hsl(220,15%,45%);color:#FFF;}
.title_base * {line-height:1.5em;font-weight:inherit;font-size:inherit;}
.title_base > * {display:table-cell !important;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.title_base > *:nth-last-child(1):not(i) {padding-right:10px;}
.title_base > h3 {width:6.5em;}
.title_base > i[class*="i_caret"] {width:1.8rem;cursor:pointer;}
.title_base > i.i_caret_u, .title_base > i.i_caret_d {background-size:0.9375rem auto;}
.title_base > i.i_caret_l, .title_base > i.i_caret_r {background-size:auto 0.9375rem;}
.title_base > i.i_caret_u {background-image:url(../image/caret_u_w_L.png);}
.title_base > i.i_caret_d {background-image:url(../image/caret_d_w_L.png);}
.title_base > i.i_caret_l {background-image:url(../image/caret_l_w_L.png);}
.title_base > i.i_caret_r {background-image:url(../image/caret_r_w_L.png);}

/* title_base title_step */
/* 2020-09-07: Chiuhua + 200500938, 新增 .title_step 樣式, JLR 預約網頁需求 */
/* 2022-10-04: Chiuhua # 220802029, 調整 .title_base.title_step root, template, shop 共用及差異樣式 */
/* 2022-10-05: Chiuhua + 220901528, 新增 .title_step > h4, 以色塊表達步驟, 預設直槓, OUJI 品牌差異為斜槓, 僅到步驟3, 歐吉線上訂單需求 (by Ho) */
.title_base.title_step {padding-left:5px;}
.title_base.title_step > i:nth-of-type(1) {width:30px;background-position-y:45%;}
.title_base.title_step > h3 {width:4.25em;padding-left:0.25em;position:relative;}
.title_base.title_step > h3:nth-child(1) {width:4.35em;padding-left:0.35em;}
.title_base.title_step > h3:after {content:'.';position:absolute;top:0px;bottom:auto;left:auto;right:0.5em;margin:auto;line-height:1.3em !important;font-weight:bold;}
.title_base.title_step > h4 {width:2.5em;text-align:center;padding-right:0.25em;}
.title_base.title_step > h4 > ins {width:0.25em;height:1em;display:inline-block;vertical-align:middle;position:relative;top:-2px;background-color:#FFF;}
.title_base.title_step.step2 > h4 > ins:before,
.title_base.title_step.step3 > h4 > ins:before, .title_base.title_step.step3 > h4 > ins:after {content:'';position:absolute;width:inherit;height:inherit;background-color:inherit;box-shadow:inherit;}
.title_base.title_step.step2 > h4 > ins {left:-0.25em;}
.title_base.title_step.step2 > h4 > ins:before {right:-0.55em;}
.title_base.title_step.step3 > h4 > ins:before {left:-0.55em;}
.title_base.title_step.step3 > h4 > ins:after {right:-0.55em;}
/* title_step icon */
.title_step .i_loc {background-image:url(../image/loc_w_L.png);}
.title_step .i_calendar {background-image:url(../image/calendar_w_L.png);}
.title_step .i_detail {background-image:url(../image/order_w_L.png);}
.title_step .i_confirm {background-image:url(../image/mail_ol_w_L.png);}
.title_step .i_info {background-image:url(../image/info_w_L.png);}

/*=== tab ===*/
/* tab2_top, 2022-06-16: Chiuhua + 220300968, MAZDA CPO 需求 */
/* 此樣式與 APP tab1_top 需求與呈現不同，故另命名為 tab2_top，以免開發人員混淆，原樣式名稱亦可保留給 oTToCity 網頁後台 UI 使用 */
.tab2_top {display:flex;width:100%;min-height:3.75rem;line-height:1.15em;overflow:hidden;z-index:1;position:relative;}
.tab2_top:after {content:'';position:absolute;left:0px;right:0px;top:auto;bottom:0px;margin:auto;width:100%;height:3px;background-color:hsl(220,90%,10%);}
.tab2_top * {font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;}
.tab2_top > li {display:inline-flex;min-height:inherit\0;flex:1;align-items:center;justify-content:center;overflow:hidden;padding:0.25em;padding-bottom:calc(6px + 0.25em);border-radius:0.35rem;border-bottom-left-radius:0px !important;border-bottom-right-radius:0px !important;cursor:pointer;position:relative;}
.tab2_top > li:not(:nth-child(1)) {margin-left:3px;}/* 2022-06-16: Chiuhua # 220300968, 開發時還無法完全忽略 IE, gap 採用 IE11 的相容寫法 */
.tab2_top > li:before {content:'';position:absolute;left:0px;right:0px;top:auto;bottom:6px;margin:auto;width:100%;height:100%;background-color:hsl(220,15%,75%);z-index:-1;}
.tab2_top > li > * {margin:0.15em;}
.tab2_top > li.tabOn {background-color:hsl(220,90%,10%);color:#FFF;font-weight:bold;}
@media all and (max-width:599px) {
.tab2_top > li {flex-wrap:wrap;}
.tab2_top > li > *:not(i) {width:100%;text-align:center;}
}

/*=== grid ===*/
/* 2022-07-19: Chiuhua + 220300968, 新增 grid 共用樣式, 整合 template 與 shop 的二手車清單樣式 */
/* grid1 */
.grid1_head, .grid1_body > dl, .grid1_foot {display:table;width:100%;table-layout:fixed;overflow:hidden;}
.grid1_head > *, .grid1_body > dl > *, .grid1_foot > * {display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.grid1_head > * {text-align:center;}
.grid1_body > dl > *, .grid1_foot > * {padding:0px 0.25em;}

/* grid1 - rowcolor */
.grid1_head.rowcolor {background-color:hsla(0,0%,0%,0.25) !important;color:#FFF;}
.grid1_body.rowcolor > dl:nth-child(odd) {background-color:hsla(0,0%,100%,0.5);}
.grid1_body.rowcolor > dl:nth-child(even) {background-color:hsla(0,0%,0%,0.075);}

/* grid1 - striped - 橫線 */
.grid1_head.striped, .grid1_body.striped > dl {border-bottom:1px solid hsla(0,0%,0%,0.15);}
.grid1_head.striped {border-bottom-width:2px;}
.grid1_head.striped.bg2 {border-bottom-color:#FFF;}
.grid1_foot.striped {border-top:2px solid hsla(0,0%,0%,0.15);}
.grid1_body[class*="striped"] + .grid1_foot[class*="striped"] {border-top-width:1px;}

/* grid1 多行樣式 */
.grid1_head.row_hauto, .grid1_body.row_hauto > dl {min-height:30px;}
.grid1_head.row_hauto *, .grid1_body.row_hauto * {line-height:1.3em;}
.grid1_head.row_hauto > *, .grid1_body.row_hauto > dl > * {white-space:normal;word-wrap:break-word;}
.grid1_head.row_hauto > * {padding-top:0.15em;padding-bottom:0.15em;}
.grid1_body.row_hauto > dl > * {padding-top:0.3em;padding-bottom:0.3em;}
.grid1_head.row_hauto > * > * {width:100%;display:inline-block;}

/*=== itemlist ===*/
.itemlist1 > li, .itemlist2 > li {margin:3px;border-radius:0.25em;background:#FFF;}

/* itemlist1_wrapper */
.itemlist1_wrapper {width:100%;overflow-x:hidden;}
.itemlist1_wrapper .itemlist1 {width:calc(100% + 6px) !important;margin-left:-3px;}

/* itemlist1 - 預設 3欄 */
/* 2022-03-17: Chiuhua + 220301477, 新增 itemlist1 相關樣式, fordassured 買車車型窗 需求 (copy from genlib.app.css) */
/* 2025-12-15: Chiuhua # 251205366, 改良 itemlist gap */
.itemlist1 {display:flex;flex-wrap:wrap;width:100%;margin:auto;margin-bottom:15px;}
.itemlist1:only-of-type {margin-bottom:0px;}
.itemlist1 > li {width:calc(100% / 3 - 6px);padding:0px 0.5em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* itemlist1 繼承加套樣式 - li 單欄 */
.itemlist1.itemlist_li_row {}
.itemlist1.itemlist_li_row li {width:calc(100% - 6px);}
/* itemlist1 繼承加套樣式 - li 2欄 */
.itemlist1.itemlist_li_2col {}
.itemlist1.itemlist_li_2col li {width:calc(100% / 2 - 6px);}
/* itemlist1 繼承加套樣式 - li 寬度 auto */
.itemlist1.itemlist_li_wauto {}
/* .itemlist1.itemlist_li_wauto:after {content:'';flex:auto;}最後一行齊左 */
.itemlist1.itemlist_li_wauto > li {flex:auto;width:auto;min-width:3em;line-height:1.3em;padding-top:0.35em;padding-bottom:0.35em;white-space:normal;display:inline-flex;align-items:center;justify-content:center;}
/* 2022-04-26: Chiuhua # 210501509, test flex 最後一項寬度不要佈滿
.itemlist1.itemlist_li_wauto > li:nth-last-child(1) {flex:initial;max-width:15em\0;} */
/* RWD */
/* 2025-10-02: Chiuhua # 251205366, 改良 itemlist_li_wauto RWD */
@media all and (min-width:600px) {
.itemlist1.itemlist_li_wauto > li {max-width:15em;}
}

/* itemlist2 */
/* 2021-06-09: Chiuhua + 210600615, 新增 itemlist2 相關樣式, Ford 線上購車 需求 (copy from genlib.app.css) */
/* 2021-06-09: Chiuhua # 210600615, 改良 itemlist2 樣式寫法 (優於原本 app 寫法) */
/* 2025-12-15: Chiuhua # 251205366, 改良 itemlist gap */
.itemlist2_wrapper {width:100%;overflow-x:hidden;}
.itemlist2_wrapper .itemlist2 {width:calc(100% + 6px) !important;margin-left:-3px;}
.itemlist2 {display:flex;flex-wrap:wrap;width:calc(100% - 4px);}
.itemlist2 > li {display:inline-flex;align-items:center;width:auto;padding:0.35em 0.5em;gap:0.25em;}
.itemlist2 > li *:not(input) {line-height:1.3rem;}
.itemlist2 > li > *:not(i) {display:inline-flex;flex-direction:column;}
.itemlist2 > li > i[class*="_b"] {opacity:1 !important;filter:invert(9%) sepia(90%) saturate(70%) hue-rotate(120deg) brightness(500%);}

/* item_y */
/* 2025-12-15: Chiuhua # 251205366, 改良 itemlist2 內置 icon */
.itemlist2 > li.item_y > i[class*="_b"] {filter:invert(1);}
.item_y {background-color:hsl(120,100%,25%) !important;color:#FFF;}

/*=== PhotoStyle Start ===*/
/* 2020-04-27: Chiuhua # oTToCity 前台的照片區塊與 APP 不同, 預設樣式不需出現右上按鈕, 但 html 預留一個父層做為網頁後台樣式繼承加套使用 */
/* 2021-06-25: Chiuhua # 210501509, oTToCity 連結游標樣式盤整 */
/* photo_single, 預設 4:3 */
.photo_single {display:inline-block;vertical-align:top;width:10rem;height:7.5rem;overflow:hidden;position:relative;}
.photo_single > figure {width:100%;height:100%;overflow:hidden;text-align:center;border-radius:0.35em;border:1px solid #FFF;position:relative;
background-color:#FFF;
background-image:url(../image/noimg_watermark_b.svg);
background-repeat:no-repeat;
background-position:center;background-size:auto 35%;}
.photo_single > figure > img {position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;max-width:100%;max-height:100%;outline:100px solid hsla(0,0%,0%,0.25);}

/* 浮水印換繼承樣式 - NEWS */
.photo_single.watermark_news > figure {background-image:none;}
.photo_single.watermark_news > figure:before {content:'NEWS';position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;height:1em;line-height:1em;display:inline-block;font-size:1.3rem;text-align:center;color:#000;opacity:0.35;}

/* photo_single 按鈕 */
/* 2022-06-15: Chiuhua + 220300968, 新增 photo_single 按鈕, MAZDA CPO 需求 */
/* 2022-12-14: Chiuhua # H221000167, 調整 photo_single 按鈕寫法, 讓 HONDA HCUC icon 圖樣與底色 opacity 分開定義 */
.photo_single > i {position:absolute;top:0px;right:0px;width:2.65em;height:2.65em;cursor:pointer;}
.photo_single > i:before, .photo_single > i:after {content:'';position:absolute;top:0px;right:0px;width:68%;height:68%;}
.photo_single > i:before {background-color:hsla(0,0%,30%,0.5);border-bottom-left-radius:0.25em;border:1px solid #FFF;}
.photo_single > i:after {background:transparent no-repeat center center;}
.photo_single > i.del_photo {}
.photo_single > i.del_photo:after {background-image:url(../image/delete_w_L.png);background-size:50%;}

/*=== PhotoStyle End ===*/

/*=== PhotoViewer Start ===*/
/* photo_viewer, 預設 4:3 */
/* 2022-09-27: Chiuhua # 220901154, 調整 photo_viewer img 尺寸為真實圖檔最大寬高, 不再受後台商品圖舊規格寬 500px 的限制 */
.photo_viewer {width:37.5rem;height:28.12rem;display:inline-block;vertical-align:top;overflow:hidden;border-radius:0.35em;background-color:#FFF;box-shadow:0px 0px 0px 1px #FFF;position:relative;}
.photo_viewer > ul, .photo_viewer > ul > li {height:100%;display:inline-block;vertical-align:middle;overflow:hidden;}
.photo_viewer > ul {min-width:100%;}
.photo_viewer > ul > li {float:left;background-image:url(../image/noimg_watermark_b.svg);background-repeat:no-repeat;background-position:center 45%;background-size:auto 5rem;position:relative;}
.photo_viewer > ul > li > img {position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;outline:100px solid hsla(0,0%,0%,0.25);max-width:100%;max-height:100%;}
/* photo_viewer - 照片數 */
/* 2020-05-11: Chiuhua # photo_viewer 內的 icon 樣式名稱與 app 及 dms 相同, 不同於 ottocity 的簡化樣式名, 減少因人為複製貼上未檢查產生的錯誤 */
/* 2022-07-18: Chiuhua # 220300968, 調整 carousel_dot 區塊, 預留需加點擊功能的例外需求 (※ dot 區塊預設不做點擊功能) */
.photo_viewer > ol {position:absolute;bottom:0px;width:100%;text-align:center;background-color:hsla(0,0%,0%,0.3);}
.photo_viewer > ol > li {display:inline-block;vertical-align:middle;}
.photo_viewer > ol.carousel_num {font-weight:bold;color:#FFF;text-shadow:0px 0px 10px #000, 0px 0px 7px #000, 0px 0px 5px #000, 0px 0px 3px #000, -1px -1px 1px hsla(0,0%,0%,0.5), 1px 1px 1px hsla(0,0%,0%,0.5);}
.photo_viewer > ol.carousel_num * {color:inherit;}
.photo_viewer > ol.carousel_dot {white-space:nowrap;font-size:0px;}
.photo_viewer > ol.carousel_dot > li:not(.ico_action) {width:1em;height:1.5em;margin:0px 0.1em;position:relative;}
.photo_viewer > ol.carousel_dot > li:not(.ico_action):before {content:'';position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;width:0.65em;height:0.65em;background:hsla(0,0%,50%,0.5);border:1px solid #FFF;border-radius:50%;}
.photo_viewer > ol.carousel_dot > li.act:before {background:#000;}
/* photo_viewer - ico_action */
.photo_viewer > ol .ico_action {margin-right:-0.75em;}
.photo_viewer > ol .ico_action > i {width:2.5em;height:30px;display:inline-block;vertical-align:middle;float:left;background:no-repeat center 45% / auto 1.1em;cursor:pointer;}
.photo_viewer > ol .ico_action > i.ico_pause {background-image:url(../image/pause_w.svg);}
.photo_viewer > ol .ico_action i.ico_play {background-image:url(../image/play_w.svg);}
/* photo_viewer - 前後張 */
/* 2020-07-21: Chiuhua # 調整前後張箭頭透明度 (by Ho) */
.photo_viewer > i.ico_prev, .photo_viewer > i.ico_next {position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;width:15%;height:50%;max-width:75px;max-height:200px;background:no-repeat center / 35% auto;opacity:0.9;cursor:pointer;}
.photo_viewer > i.ico_prev {left:2%;right:auto;background-position-x:left;background-image:url(../image/go_prev_narrow_wb.svg);}
.photo_viewer > i.ico_next {right:2%;left:auto;background-position-x:right;background-image:url(../image/go_next_narrow_wb.svg);}
/* RWD */
@media all and (max-width:800px) {
.photo_viewer {width:100%;border-radius:0px;}
}
@media all and (max-width:480px) {
.photo_viewer {height:18rem;}
/* .photo_viewer > ul > li > img {max-width:100%;max-height:100%;} */
}
/* 2022-09-27: Chiuhua # 220901154, 調整 photo_viewer img 尺寸為真實圖檔最大寬高, 不再受後台商品圖舊規格寬 500px 的限制
@media all and (min-width:481px) {
.photo_viewer > ul > li > img {width:100%;} *//* 因舊版車輛大圖寬度僅 500px，此處 img CSS 無法直接使用 max 寬高，故做過渡性相容 (最近檢查日期: 2022-07-18 fordassured 正式機仍有 500px 車輛圖)
} */

/* photo_viewer_slide - 照片瀏覽清單 */
/* 2022-05-19: Chiuhua + 220300968, 新增 照片瀏覽清單 - 直式, MAZDA CPO 需求 */
/* 照片瀏覽清單 - 共用*/
*[class*="photo_viewer_slide"] {display:inline-block;vertical-align:top;overflow:hidden;text-align:left;border-radius:0.35em;background-color:hsla(0,0%,0%,0.25);position:relative;}
*[class*="photo_viewer_slide"] > ul, *[class*="photo_viewer_slide"] > ul > li {display:inline-block;vertical-align:middle;overflow:hidden;}
*[class*="photo_viewer_slide"] > ul > li {border-radius:0.35em;background-color:hsla(0,0%,100%,0.25);border:1px solid #FFF;background-image:url(../image/noimg_watermark_w_alpha75.svg);background-repeat:no-repeat;background-position:center 45%;background-size:auto 35%;position:relative;cursor:pointer;}
*[class*="photo_viewer_slide"] > ul > li > img {position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;max-width:100%;max-height:100%;}
*[class*="photo_viewer_slide"] > ul > li.slideOn {border-width:2px;border-color:hsl(0,100%,45%);}
/* 前後張 */
*[class*="photo_viewer_slide"] > i.ico_prev, *[class*="photo_viewer_slide"] > i.ico_next {position:absolute;left:0px;right:0px;top:0px;bottom:0px;margin:auto;background:no-repeat center;background-color:inherit;cursor:pointer;}

/* 照片瀏覽清單 - 橫式 */
.photo_viewer_slide_hor {width:37.5rem;height:9rem;padding:6px 25px;}
.photo_viewer_slide_hor > ul, .photo_viewer_slide_hor > ul > li {height:100%;}
.photo_viewer_slide_hor > ul {min-width:100%;}
.photo_viewer_slide_hor > ul > li {width:calc((37.5rem - 50px) / 3 - 6px);margin:0px 3px;float:left;}
/* 2020-05-12: Chiuhua # slideOn 使用 偽元素加 box-shadow 在 IE 效果不佳, 故取消
.photo_viewer_slide_hor > ul > li.slideOn {border-color:transparent;position:relative;}
.photo_viewer_slide_hor > ul > li.slideOn:after {content:'';position:absolute;left:0px;top:0px;width:100%;height:100%;border-radius:inherit;box-shadow:0px 0px 0px 2px hsl(0,100%,45%) inset;} */
.photo_viewer_slide_hor > ul > li.slideOn {}
/* 前後張 */
.photo_viewer_slide_hor > i.ico_prev, .photo_viewer_slide_hor > i.ico_next {width:25px;height:100%;background-size:auto 1rem;}
.photo_viewer_slide_hor > i.ico_prev {left:0px;right:auto;background-image:url(../image/caret_l_w_L.png);}
.photo_viewer_slide_hor > i.ico_next {right:0px;left:auto;background-image:url(../image/caret_r_w_L.png);}

/* 照片瀏覽清單 - 直式 */
.photo_viewer_slide_ver {width:calc(37.5rem / 3 - 22px);height:28.12rem;padding:25px 6px;}
.photo_viewer_slide_ver > ul, .photo_viewer_slide_ver > ul > li {width:100%;}
.photo_viewer_slide_ver > ul {}
.photo_viewer_slide_ver > ul > li {height:calc((28.12rem - 50px) / 3 - 6px);margin:3px 0px;}
/* 前後張 */
.photo_viewer_slide_ver > i.ico_prev, .photo_viewer_slide_ver > i.ico_next {width:100%;height:25px;background-size:1rem auto;}
.photo_viewer_slide_ver > i.ico_prev {top:0px;bottom:auto;background-image:url(../image/caret_u_w_L.png);}
.photo_viewer_slide_ver > i.ico_next {bottom:0px;top:auto;background-image:url(../image/caret_d_w_L.png);}

@media all and (max-width:800px) {
.photo_viewer_slide_hor {width:100%;border-radius:0px;}
.photo_viewer_slide_hor > ul > li {width:calc((100vw - 50px) / 3 - 6px);}
}
@media all and (max-width:480px) {
.photo_viewer_slide_hor {height:6rem;padding:25px 6px;}
}
/*=== PhotoViewer End ===*/