/**
  @file       modern.ottocity.css
  @brief      此檔為樣版色系、切版及樣版元件樣式, 非跨選單的樣式請另外獨立為單支 css, ex:usedcar.css
  @date       2020-04-09: Chiuhua + 191001009, Create
  @date       2020-04-13: Ys + main_toolbar
  @date       2020-04-17: Ellen   + 191001009, 新增 樣版櫥窗 樣式
  @date       2020-04-20: Chiuhua + 191001009, 樣版最外層切版從 fordassured.ottocity.css 移至此樣版檔, 商店內僅留差異樣式
  @date       2020-04-20: Ran     + 191001009, 調整 main_toolbar
  @date       2020-04-28: Chiuhua # 191001009, main_toolbar 底部加 2px 白線
  @date       2020-04-28: Chiuhua # 191001009, 調整 main_toolbar 樣式並整理語法
  @date       2020-04-30: Chiuhua + 191001009, 在 body.bd_wrapper 加 overflow:scroll, 防止網站主選單切換時因 scroll auto 而左右跳動
  @date       2020-04-30: Chiuhua + 191001009, 新增 頁面主題圖 樣式 - 樣版用
  @date       2020-05-12: Chiuhua + 191001009, 新增 main_wrapper 子層切版
  @date       2020-07-22: Chiuhua # 191001009, 調整 main_title_wrap 為髮絲紋
  @date       2020-07-31: Ys      + 191001009, 新增 toolbar 非桌機模式下，表達查詢文字
  @date       2020-08-04: Ys      # 191001009, 關鍵字搜尋隱藏
  @date       2021-06-02: Chiuhua + 210501509, banner 樣式從 fordassured 移回 modern, 商店內僅留差異樣式
  @date       2021-06-03: Chiuhua # 210501509, 調整 ban_menu 樣式命名及套用層級, 修正 banner 底部色帶寫進多次偽元素的 bug
  @date       2021-06-04: Chiuhua + 210501509, 新增 樣版色系 (Copy from fordassured)
  @date       2021-06-04: Chiuhua + 210501509, 漢堡下拉選單樣式 從 fordassured.ottocity.css 移至此樣版檔, 商店內僅留差異樣式
  @date       2021-06-04: Chiuhua # 210501509, 修正 drop_wrapper 未與 hamb icon 一起做 RWD 穩藏的 bug
  @date       2021-06-04: Chiuhua + 210501509, hamb_icon 樣式從 fordassured 移至 modern
  @date       2021-06-07: Chiuhua # 210501509, 修正 ucarunit_banner 差異化, max-width inherit 抽回 modern pg_wrapper 第一個子層統一定義
  @date       2021-06-07: Chiuhua # 210501509, 特定 icon resize 樣式從 fordassured 移至 modern 定義
  @date       2021-06-15: Chiuhua # 210501509, 特定 icon 不透明 樣式從 fordassured 移至 modern 定義
  @date       2021-06-15: Chiuhua # 210501509, icon 與 button 樣式從 fordassured 複製至 modern 調整為樣版使用
  @date       2021-06-21: Chiuhua # 210501509, 修正 ban_menu FF87 相容 bug, 並移除多餘/補齊不足的語法 (track 有語法截圖)
  @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-24: Chiuhua # 210501509, 改良 追蹤選單 data-track-total 的語法與樣式 (track 有對照截圖)
  @date       2021-06-24: Chiuhua # 210501509, 改良 ban_logo 的語法與樣式
  @date       2021-10-04: Ellen   # 210600294, 漢堡下拉選單 增加淡出動畫樣式, 修正 漢堡選單 scroll 異常 (在 .pg_wrapper 子層加 .otto_main 切版)
  @date       2021-11-23: Chiuhua # 210501509, 改良 ban_logo 視覺垂直置中
  @date       2022-01-06: Chiuhua # 210501509, .main_title_wrap 髮絲紋從 fordassured 移至 modern 定義
  @date       2022-01-06: Chiuhua # 210501509, .ft_wrapper 髮絲紋從 fordassured 移至 modern 定義
  @date       2022-01-06: Chiuhua # 210501509, 調整 漢堡下拉顏色語法
  @date       2022-01-27: Chiuhua # 210501509, 整理 .ft_wrapper 樣版與商店樣式
  @date       2022-01-27: Chiuhua - 210501509, 移除 body.bd_wrapper 的 overflow:scroll, 主選單切換左右跳動的問題與切版問題案件 #220101332 一併處理
  @date       2022-01-28: Chiuhua # 220101332, 修正因 .otto_main 切版而導致的 scroll 位置錯誤 (移除 .otto_main)
  @date       2022-01-28: Chiuhua + 220101332, 加回 body.bd_wrapper 的 overflow, 但屬性值設為 auto, 新版瀏覽器 (ex.GC93) 的 scroll bar 已隱形, 不會造成主選單切換跳動
  @date       2022-02-07: Chiuhua # 210501509, 修正 篩選窗樣式
  @date       2022-03-01: Chiuhua # 210501509, 調整 bd_wrapper 加灰底, 第一子層預設為白底
  @date       2022-03-16: Chiuhua - 210501509, 移除 .ban_btn, 樣式統一寫在 .hamb_icon 上
  @date       2022-04-21: Chiuhua # 210501509, 改良 ban_menu 文字色語法 (因 # 220300968 MAZDA CPO)
  @date       2022-05-09: Chiuhua + 220300968, 新增 fc22, bdc22, MAZDA CPO 需求
  @date       2022-05-17: Chiuhua # 220300968, 整理 main_title_wrap 語法順序及樣式修正, MAZDA CPO 需求
  @date       2022-06-08: Chiuhua + 220300968, 新增 bdc23, bdc24, MAZDA CPO 需求
  @date       2022-06-08: Chiuhua + 210501509, 新增 開窗差異樣式
  @date       2022-06-09: Chiuhua # 220300968, 調整 下拉選單文字色語法, MAZDA CPO 需求
  @date       2022-06-16: Chiuhua + 220300968, 新增 tab 樣版差異樣式
  @date       2022-07-05: Chiuhua # 220300968, 修正 2020-08 關鍵字搜尋隱藏不完全的畫面佔位問題 (程式 kw: searchbar, #191001009)
  @date       2022-08-24: Chiuhua # 220802029, 調整 modern 色系為髮絲銀, 不再與 fordassured 相同 (by Ho)
  @date       2022-08-29: Chiuhua # 220802029, 調整 icon 圖檔顏色, 因 modern 色系改為髮絲銀, 不再與 fordassured 相同 (by Ho)
  @date       2022-09-02: Chiuhua # 220802029, 調整 menu_on icon 樣式語法, 改用屬性選擇噐換圖, 可減少商店差異化延伸樣式
  @date       2022-09-05: Chiuhua # 220802029, 調整 漢堡下拉選單相關樣式
  @date       2022-09-05: Chiuhua + 220802029, 新增 漢堡下拉相關 icon c_sec 樣式
  @date       2022-09-08: Chiuhua # 220802029, 調整 bd_wrapper 底色並加 metalsilver 材質優化視覺
  @date       2022-10-26: Chiuhua # 220802029, 改良 root btn 預設顏色以減少樣版及商店 icon 差異化, 方按鈕=深底白 icon ； 圓按鈕=透明底外框線
  @date       2022-10-31: Chiuhua # 220802029, 將 .btn_rect_sec 次要按鈕加進共用樣式
  @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       2023-05-05: Ys      # 230109337, 修正 買車篩選條件的版面設定樣式不一致問題
  @date       2023-06-26: Chiuhua # 230601756, 改良 gridmode 樣式 (Portal2 邊框變淡、gap 加大, by Ho)
  @date       2023-06-26: Chiuhua + 230601756, 新增 modern main_wrapper 預設底色 for portal2
  @date       2023-06-29: Chiuhua # 230602013, 調整 樣版 ban_logo figcaption 文字樣式, 裕民改版 需求
  @date       2023-08-08: Chiuhua # 230601756, 新增 .shopwindow_list 樣板櫥窗的 :hover 互動樣式 (套用樣版的品牌一併優化)
  @date       2023-08-15: Chiuhua + 230601756, 新增 .pdsc_category_wrapper 商品櫥窗的 :hover 互動樣式 (套用櫥窗的品牌一併優化)
  @date       2023-08-18: Chiuhua + 230602013, 新增 i_info 與 i_loc 的 menu_on icon 樣式, em 裕民 需求
  @date       2023-08-22: Chiuhua + 230809782, 新增 modern ban_pic_news 預設主題圖
  @date       2023-08-23: Chiuhua + 230809782, 新增 modern banner_darkmode 樣式
  @date       2023-08-23: Chiuhua # 230809782, 改良 ban_menu li i + span 的 gap
  @date       2023-09-27: Sharon  # 230900138, shopwindow_list 調整畫面同 honda 版
  @date       2023-10-11: Ys      # 230900138, 調整 Modern 樣板的查詢條件配色：白底黑字
  @date       2023-12-06: Chiuhua # H230800205, 新增 機車 icon, HONDA HCUM 自主延伸強化
  @date       2023-12-26: Chiuhua # 230602013, 修正 main_title_wrap titlebtn 按鈕 RWD gap 及 line-height
	@date       2024-06-11: Chiuhua + 240600368, 新增 扭蛋機動畫 樣版差異樣式
  @date       2024-07-04: Chiuhua # 240602259, 調整 tag, 因新的 Angular 不支援自定義的 lang tag, 系統部先不需調整 html tag，所以過渡期 css 語法 dt lang 與 dt label 並存
	@date       2024-08-22: Chiuhua + 240802455, 新增 .title_base 樣版差異顏色, 線上支付-上優標準版 延伸調整
	@date       2024-09-26: Chiuhua # 240801316, 改良 modern lbcbxed 與 lbrdoed 選取底色
	@date       2024-09-27: Chiuhua # 240801316, 改良 .lbcbx_marked 純標示的 [樣版,品牌商店,網頁] 差異化
	@date       2025-01-16: Chiuhua # 250107863, 漢堡下拉選單樣式模組從 modern 整理至共用 wrapper 並做樣版及品牌差異 (STLA onlineservice 延伸改良)
	@date       2025-03-20: Chiuhua # 250300904, 調整 線條色/文字色 樣式語法順序, 線條強調色 rename (因 onlineservice 新增線條色樣式, framework 語法需具一致性)
	@date       2025-09-22: Chiuhua # 250900772, 修正 二手車篩選下拉與開窗 RWD 切換時區塊重疊的瑕疵
	@date       2025-09-22: Chiuhua # 250900772, oTToCity 二手車篩選窗改良
	@date       2025-11-03: Chiuhua # 251100134, 改良 form1 欄位 focus 樣式 (root 與 modern 及 onlineservice 樣版及所有集團/品牌)
	@date       2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式
	@date       2025-11-06: Chiuhua # 251100266, 修正 .filter_btn 衝突樣式並改良語法
	@date       2025-11-06: Chiuhua # 251100266, 修正 .searchipt_cap.searchipt_cap_intitleright 按鈕高度
	@date       2025-11-06: Chiuhua # 251100266, 修正 .filter_btn 衝突樣式並改良語法
	@date       2025-11-07: Chiuhua # 251100266, 調整 btn_rect_intitleright 置於標題尾端的按鈕樣式
	@date       2025-11-21: Chiuhua # 251101828, 改良 modern banner - Portal 及所有品牌 (by Ho)
	@date       2025-11-26: Chiuhua # 251102238, Modern 樣版樣式 QA
	@date       2025-11-27: Chiuhua + 251200607, 新增 oTToCity Portal 新功能 [車輛統計] 相關樣式
  @date       2025-12-15: Chiuhua # 251205366, 改良 itemlist, 範圍：Root → 樣版 → 各品牌網站/網頁
	@date       2026-01-14: Chiuhua # 260101093, 漢堡下拉新增 :active 微互動樣式
  @date       2026-01-22: Chiuhua + 260140900, 新增 carandperson icon 樣式
	@date       2026-01-28: Chiuhua # 260140668, 調整 main_usedcar_toolbar 篩選箭頭在 Ho 的桌機會被蓋住，故減少左邊 gap (by Ho)
  @date       2026-03-04: Chiuhua # 260141191, Portal Banner 動態加二手車品牌名稱 (優質車商延伸需求, by Ho)
  @date       2023-03-04: Chiuhua # 260141191, 改良 Portal Banner <figcaption> html 及 css
	@date       2026-03-12: Chiuhua # 260301300, 修正 現有二手車櫥窗 bug, 改良 RWD
	@date       2026-03-13: Chiuhua + 260300939, 新增 .i_user_ 樣版差異樣式
	@date       2026-03-26: Chiuhua # , 改良 手機版搜尋 form 改為上下排列 (3/24 by Ho)
*/

/*=== 樣版色系 Start ===*/
/* 2021-06-04: Chiuhua + 210501509, 新增 樣版色系 (Copy from fordassured) */
/* 2022-05-09: Chiuhua + 220300968, 新增 fc22, bdc22, MAZDA CPO 需求 */
/* 2022-08-24: Chiuhua # 220802029, 調整 modern 色系為髮絲銀, 不再與 fordassured 相同 (by Ho) */

/* 樣版基本文字色 */
* {color:hsl(0,0%,7%);}
* * {color:inherit;}

/* 背景色 */
.bg1 *, .bg2 *, .bg22 *, .bghighlight *, .bgalert * {color:inherit !important;}
.bg1 {background-color:hsl(344,95%,25%) !important;color:#FFF !important;}
.bg2 {background-color:hsl(344,2%,28%) !important;color:#FFF !important;}
.bg22 {background-color:hsl(344,2%,63%) !important;color:#FFF !important;}
.bg23 {background-color:hsl(344,2%,76%) !important;}
.bg24 {background-color:hsl(344,2%,88%) !important;}
.bghighlight {background-color:hsl(344,82%,43%) !important;color:#FFF !important;}
.bghighlight_light2 {background-color:hsl(344,25%,72%) !important;}
.bghighlight_light3 {background-color:hsl(344,25%,82%) !important;}
.bghighlight_light4 {background-color:hsl(344,25%,90%) !important;}

/* 線條色 */
/* 2025-03-20: Chiuhua # 250300904, 調整 線條色/文字色 樣式語法順序, 線條強調色 rename (因 onlineservice 新增線條色樣式, framework 語法需具一致性) */
.bdc1 {border-color:hsl(344,95%,25%) !important;}
.bdc2 {border-color:hsl(344,2%,28%) !important;}
.bdc22 {border-color:hsl(344,2%,63%) !important;}
.bdc23 {border-color:hsl(344,2%,76%) !important;}
.bdc24 {border-color:hsl(344,2%,88%) !important;}
.bdchighligh {border-color:hsl(344,82%,43%) !important;}

/* 文字色 */
.fc1 {color:hsl(344,95%,25%) !important;}
.fc2 {color:hsl(344,2%,28%) !important;}
.fc22 {color:hsl(344,2%,63%) !important;}
.fhighlight {color:hsl(344,82%,43%) !important;}
/*=== 樣版色系 End ===*/

/*=== oTToCity 共用樣式 - 樣版差異化 Start ===*/
/* checkbox, radio 選取 */
/* 2022-11-23: Chiuhua + H221000167, 新增 .lbcbx_marked 純標示樣式, HONDA HCUC 需求, 從 root 新增, 以強化 oTToCity 樣式模組架構 */
/* 2024-09-26: Chiuhua # 240801316, 改良 modern lbcbxed 與 lbrdoed 選取底色 */
.lbcbx_wrapper label.lbcbxed:before, label.lbcbx.lbcbxed:before,
.lbrdo_wrapper label.lbrdoed:before, label.lbrdo.lbrdoed:before {background-color:hsl(344,95%,25%);}
/* cbx 純標示 - 差異 */
/* 2024-09-27: Chiuhua # 240801316, 改良 .lbcbx_marked 純標示的 [樣版,品牌商店,網頁] 差異化 */
.lbcbx_wrapper.lbcbx_marked label:before {background-image:url(../image/cbxbg_check_c_sec.svg);}

/* itemlist - 樣版差異化 */
/* 2025-12-15: Chiuhua # 251205366, 改良 itemlist2 內置 icon */
.itemlist2 > li > i[class*="_b"] {filter:invert(10%) sepia(90%) saturate(5000%) hue-rotate(344deg) brightness(50%) contrast(20%);}
.item_y {background-color:hsl(344,95%,25%) !important;color:#FFF;}

/* icons - 樣版差異化 */
/* 2021-06-07: Chiuhua # 210501509, 特定 icon resize 樣式從 fordassured 移至 modern 定義 */
/* 2021-06-15: Chiuhua # 210501509, 特定 icon 不透明 樣式從 fordassured 移至 modern 定義 */
/* 2021-06-15: Chiuhua # 210501509, icon 與 button 樣式從 fordassured 複製至 modern 調整為樣版使用 */
/* 2021-06-21: Chiuhua + 210501509, 新增 i_shop icon, oTToCity Portal2 改版需求 */
/* 2021-06-23: Chiuhua + 210501509, 新增 i_engineoil icon, oTToCity Portal2 改版需求 */
/* 2022-08-29: Chiuhua # 220802029, 調整 icon 圖檔顏色, 因 modern 色系改為髮絲銀, 不再與 fordassured 相同 (by Ho) */
/* 2022-09-05: Chiuhua + 220802029, 新增 漢堡下拉相關 icon c_sec 樣式 */
/* 2022-10-26: Chiuhua # 220802029, 改良 root btn 預設顏色以減少樣版及商店 icon 差異化, 方按鈕=深底白 icon ； 圓按鈕=透明底外框線 */
/* 2023-12-06: Chiuhua # H230800205, 新增 機車 icon, HONDA HCUM 自主延伸強化 */
/* 2025-11-27: Chiuhua + 251200607, 新增 oTToCity Portal 新功能 [車輛統計] 相關樣式 - i_chart_bubble icon */
/* 2026-01-22: Chiuhua + 260140900, 新增 carandperson icon 樣式 */
/* 2026-03-13: Chiuhua + 260300939, 新增 .i_user_ 樣版差異樣式 */
i[class*="_c_pri"], i[class*="_c_sec"],
.btn_rnd_wrap1 button:not(.btn_die) > i, .btn_rnd:not(.btn_die) > i,
.btn_toggle i, .form1:not([class*="_passcode"]) i {opacity:1 !important;}

i[class*="i_bars_c"] {background-size:1.2em auto;}
i[class*="i_add_c"] {background-size:1.25em auto;}
i[class*="i_delete_c"] {background-size:1.15em auto;}

.i_bars_c_pri {background-image:url(../image/bars_c_pri.svg);}
.i_bars_c_sec {background-image:url(../image/bars_c_sec.svg);}

.i_delete_c_pri {background-image:url(../image/delete_c_pri.svg);}
.i_delete_c_sec {background-image:url(../image/delete_c_sec.svg);}

.i_add_c_pri {background-image:url(../image/add_c_pri.svg);}
.i_add_c_sec {background-image:url(../image/add_c_sec.svg);}

.i_heart_red, *[class*="btn_rnd"] i.i_heart {background-image:url(../image/heart_red.svg);}

.i_star_c_pri {background-image:url(../image/star_c_pri.svg);}
.i_star_c_sec {background-image:url(../image/star_c_sec.svg);}

.i_home_c_pri {background-image:url(../image/home_c_pri.svg);}
.i_home_c_sec {background-image:url(../image/home_c_sec.svg);}

.i_shop_c_pri {background-image:url(../image/shop_c_pri.svg);}
.i_shop_c_sec {background-image:url(../image/shop_c_sec.svg);}

.i_engineoil_c_pri {background-image:url(../image/engineoil_c_pri.svg);}
.i_engineoil_c_sec {background-image:url(../image/engineoil_c_sec.svg);}

.i_megaphone_c_pri {background-image:url(../image/megaphone_c_pri.svg);}
.i_megaphone_c_sec {background-image:url(../image/megaphone_c_sec.svg);}

.i_info_c_pri {background-image:url(../image/info_c_pri.svg);}
.i_info_c_sec {background-image:url(../image/info_c_sec.svg);}

.i_info2_c_pri, *[class*="btn_rnd"] i.i_info2 {background-image:url(../image/info2_c_pri.svg);}
.i_info2_c_sec {background-image:url(../image/info2_c_sec.svg);}

.i_loc_c_pri, *[class*="btn_rnd"] i.i_loc {background-image:url(../image/loc_c_pri.svg);}
.i_loc_c_sec, .form1 .i_loc {background-image:url(../image/loc_c_sec.svg);}

.i_phone_c_pri, *[class*="btn_rnd"] i.i_phone {background-image:url(../image/phone_c_pri.svg);}
.i_phone_c_sec, .form1 .i_phone {background-image:url(../image/phone_c_sec.svg);}

.i_mail_c_pri, *[class*="btn_rnd"] i.i_mail {background-image:url(../image/mail_ol_c_pri.svg);}
.i_mail_c_sec, .form1 .i_mail {background-image:url(../image/mail_ol_c_sec.svg);}

.i_msg_c_pri, *[class*="btn_rnd"] i.i_msg {background-image:url(../image/msg_c_pri.svg);}
.i_msg_c_sec, .form1 .i_msg {background-image:url(../image/msg_c_sec.svg);}

.i_calendar_c_pri, *[class*="btn_rnd"] i.i_calendar {background-image:url(../image/calendar_c_pri.svg);}
.i_calendar_c_sec, .form1 .i_calendar {background-image:url(../image/calendar_c_sec.svg);}

.i_car_c_pri {background-image:url(../image/car_c_pri.svg);}
.i_car_c_sec {background-image:url(../image/car_c_sec.svg);}

.i_carused_c_pri {background-image:url(../image/carused_c_pri.svg);}
.i_carused_c_sec {background-image:url(../image/carused_c_sec.svg);}

.i_carmulti2_c_pri, *[class*="btn_rnd"] i.i_carmulti2 {background-image:url(../image/carmulti2_c_pri.svg);}
.i_carmulti2_c_sec {background-image:url(../image/carmulti2_c_sec.svg);}

.i_carstock_c_pri, *[class*="btn_rnd"] i.i_carstock {background-image:url(../image/carstock_c_pri.svg);}
.i_carstock_c_sec {background-image:url(../image/carstock_c_sec.svg);}

.i_motorcycle_c_pri {background-image:url(../image/motorcycle_c_pri.svg);}
.i_motorcycle_c_sec {background-image:url(../image/motorcycle_c_sec.svg);}

.i_scooter_c_pri {background-image:url(../image/scooter_c_pri.svg);}
.i_scooter_c_sec {background-image:url(../image/scooter_c_sec.svg);}

.i_carandperson_c_pri, *[class*="btn_rnd"] i.i_carandperson {background-image:url(../image/carandperson_c_pri.svg);}
.i_carandperson_c_sec {background-image:url(../image/carandperson_c_sec.svg);}

.i_user_c_pri, *[class*="btn_rnd"] i.i_user {background-image:url(../image/user2_c_pri.svg);}
.i_user_c_sec {background-image:url(../image/user2_c_sec.svg);}

.i_dollar_c_pri, *[class*="btn_rnd"] i.i_dollar {background-image:url(../image/dollar_c_pri.svg);}
.i_dollar_c_sec {background-image:url(../image/dollar_c_sec.svg);}

.i_share_c_pri, *[class*="btn_rnd"] i.i_share {background-image:url(../image/share_c_pri.svg);}
.i_share_c_sec {background-image:url(../image/share_c_sec.svg);}

.i_print_c_pri, *[class*="btn_rnd"] i.i_print {background-image:url(../image/print_c_pri.svg);}
.i_print_c_sec {background-image:url(../image/print_c_sec.svg);}

.i_copy_c_pri, *[class*="btn_rnd"] i.i_copy {background-image:url(../image/copy_c_pri.svg);}
.i_copy_c_sec {background-image:url(../image/copy_c_sec.svg);}

.i_chart_bubble_c_pri, *[class*="btn_rnd"] i.i_chart_bubble {background-image:url(../image/chart_bubble_c_pri.svg);}
.i_chart_bubble_c_sec {background-image:url(../image/chart_bubble_c_sec.svg);}

.i_caret_u_c_pri, *[class*="btn_rnd"] i.i_caret_u {background-image:url(../image/caret_u_c_pri.svg);}
.i_caret_d_c_pri, *[class*="btn_rnd"] i.i_caret_d {background-image:url(../image/caret_d_c_pri.svg);}
.i_caret_l_c_pri, *[class*="btn_rnd"] i.i_caret_l {background-image:url(../image/caret_l_c_pri.svg);}
.i_caret_r_c_pri, *[class*="btn_rnd"] i.i_caret_r {background-image:url(../image/caret_r_c_pri.svg);}
.i_caret_u_c_sec {background-image:url(../image/caret_u_c_sec.svg);}
.i_caret_d_c_sec {background-image:url(../image/caret_d_c_sec.svg);}
.i_caret_l_c_sec {background-image:url(../image/caret_l_c_sec.svg);}
.i_caret_r_c_sec {background-image:url(../image/caret_r_c_sec.svg);}

/* 按鈕 - 樣版差異化 */
/* 2022-10-26: Chiuhua # 220802029, 改良 root btn 預設顏色以減少樣版及商店 icon 差異化, 方按鈕=深底白 icon ； 圓按鈕=透明底外框線 */
/* 按鈕 - 方 */
/* 2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式 */
/* 2025-11-07: Chiuhua # 251100266, 調整 btn_rect_intitleright 置於標題尾端的按鈕樣式 (與方形按鈕僅保留 box-shadow 差異, root 和所有樣版及品牌移除底色差異樣式) */
.btn_rect_wrap1 button:not([class*="_sec"]):not([class*="_passcode"]), .btn_rect:not([class*="_sec"]):not([class*="_passcode"]) {background-color:hsl(344,95%,25%);color:#FFF;box-shadow:0px 0px 0px 1px #FFF !important;}
.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(344,82%,43%);}
/* button.btn_rect_intitleright {background:hsl(344,82%,43%);} */

/* 方 - 次要按鈕, btn_passcode */
/* 2022-10-31: Chiuhua # 220802029, 將 .btn_rect_sec 次要按鈕加進共用樣式 */
/* 2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式 */
.btn_rect_wrap1 button.btn_rect_sec, .btn_rect.btn_rect_sec {box-shadow:0px 0px 0px 1px hsl(344,95%,25%) inset;}
.btn_rect_wrap1 button.btn_rect_sec:not(.btn_die):hover, .btn_rect.btn_rect_sec:not(.btn_die):hover,
.passcode_wrapper .btn_passcode:hover {box-shadow:0px 0px 0px 1px hsl(344,82%,43%) inset, 0px 0px 0px 1px hsl(344,82%,43%) !important;}

/* 方 - 加 i tag - icon 固定在單側, 文字居中, 套在 button 本身 */
button.ico_abs_l, button.ico_abs_r {min-width:15em;}

/* btn_toggle */
.btn_toggle > * {background-color:hsl(344,2%,28%);color:hsla(0,0%,100%,0.5);box-shadow:0px 0px 0px 1px #FFF !important;border:none;}
.btn_toggle > *.togOn, .btn_toggle > *:hover {background-color:hsl(344,82%,43%);}
.btn_toggle > *.togOn:hover {color:hsl(60,100%,50%);}

/* 按鈕 - 圓 */
.btn_rnd_wrap1 button, .btn_rnd {box-shadow:0px 0px 0px 1px hsla(344,82%,43%,0.75);color:hsl(344,95%,25%);}

/* 按鈕 - 灰階+禁用 */
.btn_rnd_wrap1 button.btn_die > i, .btn_rnd.btn_die > i {opacity:0.5 !important;}/* 當圓形按鈕內置 icon 非正黑時, 透明度需比 genlib 少 */

/* 搜尋膠囊 search input capsule */
.searchipt_cap > input, .searchipt_cap > button {box-shadow:0px 0px 0px 1px #FFF;}

/* 搜尋膠囊 - 置於標題尾端 */
/* 2025-11-06: Chiuhua # 251100266, 修正 .searchipt_cap.searchipt_cap_intitleright 按鈕高度 */
.searchipt_cap.searchipt_cap_intitleright > input {background-color:hsl(344,82%,43%) !important;}
.searchipt_cap.searchipt_cap_intitleright > button {height:100%;}

/* 下拉篩選 - 使用 button tag */
/* 2023-10-11: Ys      # 230900138, 調整 Modern 樣板的查詢條件配色：白底黑字 */
/* 2025-11-06: Chiuhua # 251100266, 修正 .filter_btn 衝突樣式並改良語法 */
/* old
.filter_btn > .btn_rect_wrap1 button {background-color:#FFF;}
.filter_btn > .btn_rect_wrap1 button:not(.btnOn) {box-shadow:0px 0px 0px 1px hsla(0,0%,100%,0.3) !important;}
.filter_btn > .btn_rect_wrap1 button:not(:hover) {color:#000 !important;}
.filter_btn > .btn_rect_wrap1 button:hover {background-image:url(../../../shared/image/dropdown_w.svg);}
.filter_btn > .btn_rect_wrap1 button.btnOn {color:#FFF !important;background-color:hsl(344,82%,43%);}
.filter_btn > .btn_rect_wrap1 button.btnOn:hover {color:hsl(60,100%,50%) !important;}
.filter_btn > .btn_rect_wrap1 button.btnOn {background-image:url(../../../shared/image/dropdown_w.svg);} */
/* new */
.filter_btn > .btn_rect_wrap1 button:not(:hover):not(.btnOn) {background-color:#FFF !important;color:#000 !important;}
.filter_btn > .btn_rect_wrap1 button:not(.btnOn) {box-shadow:0px 0px 0px 1px hsla(0,0%,100%,0.3) !important;}
.filter_btn > .btn_rect_wrap1 button:hover {background-image:url(../../../shared/image/dropdown_w.svg);}
.filter_btn > .btn_rect_wrap1 button.btnOn {color:#FFF !important;background-color:hsl(344,82%,43%);background-image:url(../../../shared/image/dropdown_w.svg);}
.filter_btn > .btn_rect_wrap1 button.btnOn:hover {color:hsl(60,100%,50%) !important;}


/* 下拉篩選 - 內容選項 */
.filter_btn_dropdown.bubble {background-color:hsl(344,2%,40%);}
.filter_btn_dropdown > ul *:not(.liOn) {color:hsla(0,0%,100%,0.7);}
.filter_btn_dropdown > ul > li:not(:nth-last-child(1)) {border-bottom-color:hsla(0,0%,100%,0.35);}
.filter_btn_dropdown > ul > li:hover, .filter_btn_dropdown > ul > li.liOn:hover {color:hsl(60,100%,50%);}
.filter_btn_dropdown > ul > li:hover {background-color:transparent;}
.filter_btn_dropdown > ul > li.liOn {background-color:hsl(344,82%,43%);color:#FFF;}

/* 下拉篩選加 checkbox */
.filter_btn_dropdown .lbcbx_wrapper label > input, .filter_btn_dropdown .lbcbx_wrapper label:before {margin-right:0.35em;}
.filter_btn_dropdown .lbcbx_wrapper label:before {background-color:transparent;border-color:transparent;box-shadow:0px 0px 0px 1px hsla(0,0%,100%,0.7);}

/* 篩選動作按鈕 */
/* 2025-11-26: Chiuhua # 251102238, Modern 樣版樣式 QA, 修正 filter, action 按鈕 線條色及文字色 */
.action_btn.btn_rect_wrap1 button {background-color:hsl(344,2%,28%);}
.action_btn.btn_rect_wrap1 button.btnOn {background-color:hsl(344,82%,43%);}
.action_btn.btn_rect_wrap1 button.btnOn.bgalert {color:hsl(60,100%,50%) !important}
.action_btn.btn_rect_wrap1 button.btn_compare {font-size:0.875rem;}
.action_btn.btn_rect_wrap1 button.btn_die {box-shadow:0px 0px 0px 1px hsla(0,0%,100%,0.75) !important;}

/* 排序箭頭 - 父層淺底 */
.sort1_parbglight .sort1.sorting {color:hsl(344,82%,43%);}
.sort1_parbglight .sort1.sorting:after {background-image:url(../image/arrow_u_c_pri.svg);}

/* 2025-09-22: Chiuhua # 250900772, 修正 二手車篩選下拉與開窗 RWD 切換時區塊重疊的瑕疵 */
@media all and (min-width:801px) {
}
@media all and (max-width:800px) {
.filter_btn_dropdown.bubble {display:none !important;}
}

/* title_base */
/* 2024-08-22: Chiuhua + 240802455, 新增 .title_base 樣版差異顏色, 線上支付-上優標準版 延伸調整 */
.title_base {background-color:hsl(344,2%,28%);}

/* tab */
/* 2022-06-16: Chiuhua + 220300968, 新增 tab 樣版差異樣式 */
.tab2_top:after, .tab2_top > li.tabOn {background-color:hsl(344,95%,25%);}

/* form1 欄位 focus 樣式 (舊版 SF 不支援), ※不使用 border 的做法, 因為 requiredtag 及 joinitem 會有問題 */
/* 2025-11-03: Chiuhua # 251100134, 改良 form1 欄位 focus 樣式 (root 與 modern 及 onlineservice 樣版及所有集團/品牌) */
.form1 dd input:not([type="checkbox"]):not([type="radio"]):focus, .form1 dd select:focus, .form1 dd textarea:focus {box-shadow:0px 0px 0px 1px hsl(344,95%,25%) inset !important;}

/* 櫥窗 */
/* 2023-08-15: Chiuhua + 230601756, 新增 .pdsc_category_wrapper 商品櫥窗的 :hover 互動樣式 (套用櫥窗的品牌一併優化) */
.pdsc_category_wrapper > li.liOn {border-color:hsl(344,95%,25%);}

/* 扭蛋機動畫 */
/* 2024-06-11: Chiuhua + 240600368, 新增 扭蛋機動畫 樣版差異樣式 */
.gacha_machine > button.btn_rect:not([class*="_sec"]) {box-shadow:none !important;}

/*=== oTToCity 共用樣式 - 樣版差異化 End ===*/

/*=== 樣版切版與主區塊樣式 Start ===*/
/* 2020-04-30: Chiuhua + 191001009, 在 body.bd_wrapper 加 overflow:scroll, 防止網站主選單切換時因 scroll auto 而左右跳動 */
/* 2022-01-27: Chiuhua - 210501509, 移除 body.bd_wrapper 的 overflow:scroll, 主選單切換左右跳動的問題與切版問題案件 #220101332 一併處理 */
/* 2022-01-28: Chiuhua + 220101332, 加回 body.bd_wrapper 的 overflow, 但屬性值設為 auto, 新版瀏覽器 (ex.GC93) 的 scroll bar 已隱形, 不會造成主選單切換跳動 */
/* 2020-04-20: Chiuhua + 191001009, 樣版最外層切版從 fordassured.ottocity.css 移至此樣版檔, 商店內僅留差異樣式 */
/* 2021-06-07: Chiuhua # 210501509, 修正 ucarunit_banner 差異化, max-width inherit 抽回 modern pg_wrapper 第一個子層統一定義 */
/* 2022-01-28: Chiuhua # 220101332, 修正因 .otto_main 切版而導致的 scroll 位置錯誤 (移除 .otto_main) */
/* 2022-03-01: Chiuhua # 210501509, 調整 bd_wrapper 加灰底, 第一子層預設為白底 */
/* 2022-09-08: Chiuhua # 220802029, 調整 bd_wrapper 底色並加 metalsilver 材質優化視覺 */
.bd_wrapper {background-color:hsl(0,0%,60%);background-image:url(../../../shared/image/bg_metalsilver_light.gif);background-attachment:fixed;overflow:auto;}
.pg_wrapper, .pg_wrapper > * {background-color:#FFF;}
.pg_wrapper {display:flex;display:table\0;flex-direction:column;align-items:center;width:100%;max-width:1440px;height:auto;min-height:100%;margin:auto;overflow:auto;}
.pg_wrapper > * {width:100%;max-width:inherit;overflow:hidden;}
.pg_wrapper .banner_wrapper {max-width:inherit;height:60px;position:fixed;top:0px;z-index:3;}
.pg_wrapper .main_wrapper {flex:1;padding-top:60px;min-height:calc(100vh - 50px)\0;}
.pg_wrapper .ft_wrapper {min-height:50px;height:50px\0;}

@media all and (min-width:1440px) {
.pg_wrapper:before, .pg_wrapper:after {content:'';position:fixed;left:0px;right:0px;top:0px;bottom:0px;margin:auto;width:1px;height:100%;background-color:#FFF;z-index:4;}
.pg_wrapper:before {left:-1440px;}
.pg_wrapper:after {right:-1440px;}
}

/* banner_wrapper 樣式 */
/* 2020-04-20: Ellen   + 191001009, 新增 banner 樣式 (for fordassured) */
/* 2021-06-02: Chiuhua + 210501509, banner 樣式從 fordassured 移回 modern, 商店內僅留差異樣式 */
/* 2021-06-03: Chiuhua # 210501509, 調整 ban_menu 樣式命名及套用層級, 修正 banner 底部色帶寫進多次偽元素的 bug */
/* 2021-06-21: Chiuhua # 210501509, 修正 ban_menu FF87 相容 bug, 並移除多餘/補齊不足的語法 (track 有語法截圖) */
/* 2021-06-24: Chiuhua # 210501509, 改良 追蹤選單 data-track-total 的語法與樣式 (track 有對照截圖) */
/* 2021-06-24: Chiuhua # 210501509, 改良 ban_logo 的語法與樣式 */
/* 2021-11-23: Chiuhua # 210501509, 改良 ban_logo 視覺垂直置中 */
/* 2022-04-21: Chiuhua # 210501509, 改良 ban_menu 文字色語法 (因 # 220300968 MAZDA CPO) */
/* 2022-08-24: Chiuhua # 220802029, 調整 modern 色系為髮絲銀, 不再與 fordassured 相同 (by Ho) */
/* 2023-06-29: Chiuhua # 230602013, 調整 樣版 ban_logo figcaption 文字樣式, 裕民改版 需求 */
/* 2023-08-23: Chiuhua # 230809782, 改良 ban_menu li i + span 的 gap */
.banner_wrapper {display:table;width:100%;table-layout:auto;}
.banner_wrapper:after {content:'';position:absolute;left:0px;bottom:2px;width:100%;height:2px;background-color:hsl(344,95%,25%);}
.banner_wrapper *:not(i) {line-height:1.3em;}
.banner_wrapper > * {display:table-cell;width:auto;vertical-align:middle;white-space:nowrap;height:inherit;}
.banner_wrapper .ban_logo {}
.banner_wrapper .ban_logo * {display:inline-block;vertical-align:middle;}
.banner_wrapper .ban_logo > * {font-size:0px;margin-top:-4px;cursor:pointer;}
.banner_wrapper .ban_logo .logo_brand {width:auto;height:2.5rem;margin-right:10px;}
.banner_wrapper .ban_logo figcaption {font-size:1.3rem;font-weight:bold;}
.banner_wrapper .ban_logo figcaption * {font-weight:inherit;}
.banner_wrapper .ban_menu {vertical-align:top;}
.banner_wrapper .ban_menu * {color:inherit;font-size:inherit;font-weight:inherit;}
.banner_wrapper .ban_menu ul {display:table;height:calc(100% - 4px);margin-left:auto;overflow:hidden;}
.banner_wrapper .ban_menu ul > li {display:table-cell;max-width:20em;height:inherit;vertical-align:middle;padding:0px 10px 0px 7px;position:relative;cursor:pointer;}
.banner_wrapper .ban_menu ul > li * {display:inline-block;vertical-align:middle;cursor:inherit;}
/*.banner_wrapper .ban_menu ul > li:not(.li_track):not(.menu_on) > i { filter:grayscale(1);} */
.banner_wrapper .ban_menu ul > li > i {}
.banner_wrapper .ban_menu ul > li > span {max-height:2.6em;overflow:hidden;}
.banner_wrapper .ban_menu ul > li > i + span {margin-left:0.2em;}
.banner_wrapper .ban_menu ul > li.li_track {color:hsl(344,82%,43%);}
.banner_wrapper .ban_menu ul > li.li_track ins[data-track-total] {position:relative;top:-1px;left:2px;min-width:1.7em;/* 2021-06-21: Chiuhua # 加設 min-width 暫時 fixed 程式 count 數量的 bug */}
.banner_wrapper .ban_menu ul > li.li_track ins[data-track-total]:before,
.banner_wrapper .ban_menu ul > li.li_track ins[data-track-total]:after {position:relative;top:-1px;padding:0px 1px;}
.banner_wrapper .ban_menu ul > li.li_track ins[data-track-total]:before {content:'(';}
.banner_wrapper .ban_menu ul > li.li_track ins[data-track-total]:after {content:')';}
/* RWD */
@media all and (min-width:1024px) {
.banner_wrapper .ban_logo {padding-left:30px;}
/* banner menu_on */
/* 2022-09-02: Chiuhua # 220802029, 調整 menu_on icon 樣式語法, 改用屬性選擇噐換圖, 可減少商店差異化延伸樣式 */
/* 2023-08-18: Chiuhua + 230602013, 新增 i_info 與 i_loc 的 menu_on icon 樣式, em 裕民 需求 */
/* 2023-08-23: Chiuhua + 230809782, 新增 modern banner_darkmode 樣式 */
/* 2025-11-21: Chiuhua # 251101828, 改良 modern banner - Portal 及所有品牌 (by Ho) */
/* 2025-11-27: Chiuhua + 251200607, 新增 oTToCity Portal 新功能 [車輛統計] 相關樣式 - i_chart_bubble banner 選單 */
/* 2026-01-22: Chiuhua + 260140900, 新增 carandperson icon 樣式 */
.banner_wrapper .ban_menu li.menu_on {font-weight:bold;}
.banner_wrapper .ban_menu li.menu_on:before {content:'';position:absolute;width:100%;height:3px;left:0px;right:0px;top:auto;bottom:0px;margin:auto;background-color:hsl(344,82%,43%);}
.banner_wrapper .ban_menu li.menu_on:not([class*="li_track"]) {color:hsl(344,82%,43%);}
.banner_wrapper .ban_menu li.menu_on > i {opacity:1 !important;}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_home"] {background-image:url(../image/home_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_shop"] {background-image:url(../image/shop_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_chart_bubble"] {background-image:url(../image/chart_bubble_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_car"]:not([class*="i_carandperson"]) {background-image:url(../image/car_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_carandperson"] {background-image:url(../image/carandperson_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_engineoil"] {background-image:url(../image/engineoil_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_megaphone"] {background-image:url(../image/megaphone_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_info"] {background-image:url(../image/info_c_pri.svg);}
.banner_wrapper .ban_menu li.menu_on > i[class*="i_loc"] {background-image:url(../image/loc_c_pri.svg);}
/* 2022-03-09: Chiuhua # test svg bgimg drop-shadow 變色 (IE11 不支援)
.banner_wrapper .ban_menu li.menu_on > i {filter:drop-shadow(0px 100px 0px hsl(214,100%,24%));transform:translateY(-100px);} */
/* 2022-03-09: Chiuhua # test svg bgimg hue-rotate 變色2, 需另做一張紅色圖，才容易理解 hue-rotate 色相及 saturate 飽和度的值 (IE11 不支援)
.banner_wrapper .ban_menu li.menu_on > .i_car_c_pri {background-image:url(../image/test.car_c_red.svg);}
.banner_wrapper .ban_menu li.menu_on > i {filter:hue-rotate(214deg) saturate(0.5);} */
/* 2022-03-09: Chiuhua # test svg bgimg hue-rotate 變色2-2, 可以不用再做紅色圖，但需用 hsb 算出色差值 (IE11 不支援)
.banner_wrapper .ban_menu li.menu_on > i {filter:hue-rotate(21deg) saturate(2) brightness(47%);} */
}
@media all and (max-width:1023px) {
/* 2025-11-21: Chiuhua # 251101828, 改良 modern banner - Portal 及所有品牌 (by Ho) */
.banner_wrapper .ban_logo {text-align:center;}
.banner_wrapper .hamb_icon, .banner_wrapper .ban_menu {width:7rem;}
.banner_wrapper .ban_menu ul > li:not(.li_track) {display:none !important;}
.banner_wrapper .ban_menu ul > li.li_track {font-weight:bold;}
.banner_wrapper .ban_menu ul > li.li_track > * {display:block;width:100%;text-align:center;white-space:nowrap;}
}
@media all and (max-width:599px) {
.banner_wrapper .ban_logo img {margin:0px 5px !important;}
.banner_wrapper .ban_menu ul > li * {font-size:0.9375rem !important;}
}

/* banner_darkmode 樣式 */
/* 2025-11-26: Chiuhua # 251102238, Modern 樣版樣式 QA, 修正 banner_darkmode ban_menu i tag 內置文字的樣式 */
.banner_wrapper.banner_darkmode {background-color:hsl(344,4%,11%);background-image:url(../../../shared/image/bg_metalsilver_dark3.gif);color:#FFF;}
.banner_wrapper.banner_darkmode * {color:inherit !important;}
.banner_wrapper.banner_darkmode:after {height:3px;background-color:hsl(344,82%,43%);box-shadow:0px 2px 0px hsl(0,0%,85%);}
.banner_wrapper.banner_darkmode .ban_logo * {color:#FFF !important;}
.banner_wrapper.banner_darkmode .ban_menu ul > li:not([class*="menu_on"]):not([class*="li_track"]) > i {filter:invert(1);opacity:1 !important;color:#000 !important;font-weight:bold;}
/* RWD */
@media all and (min-width:1024px) {
/* 2023-08-23: Chiuhua + 230809782, 新增 modern banner_darkmode 樣式 */
.banner_wrapper.banner_darkmode .ban_menu li.menu_on:before {height:100%;z-index:-1;}
.banner_wrapper.banner_darkmode .ban_menu li.menu_on {color:#FFF;}
.banner_wrapper.banner_darkmode .ban_menu li.menu_on:not([class*="li_track"]) > i {filter:brightness(100);}
.banner_wrapper.banner_darkmode .ban_menu li.menu_on > i[class*="i_heart"] {background-image:url(../../../shared/image/heart_pink_L.png);filter:contrast(1.5);}
}

/* Portal Banner 動態加二手車品牌名稱 (tips: .ban_logo_ottocity) */
/* 2026-03-04: Chiuhua # 260141191, Portal Banner 動態加二手車品牌名稱 (優質車商延伸需求, by Ho) */
/* 2023-03-04: Chiuhua # 260141191, 改良 Portal Banner <figcaption> html 及 css */
.banner_wrapper:not(.banner_darkmode) .ban_logo.ban_logo_ottocity figcaption {color:hsl(344,95%,25%);}
.banner_wrapper .ban_logo.ban_logo_ottocity img[src*="logo_OTTOCITY"] + figcaption {position:relative;top:3px;}
.banner_wrapper .ban_logo.ban_logo_ottocity figcaption {display:inline-flex;}
@media all and (min-width:600px) {
.banner_wrapper .ban_logo.ban_logo_ottocity figcaption > ins:before {content:'';display:inline-block;vertical-align:middle;width:0.15em;height:0.15em;border-radius:50%;margin:-5px 0.35em auto;}
.banner_wrapper:not(.banner_darkmode) .ban_logo.ban_logo_ottocity figcaption > ins:before {background-color:hsl(344,95%,25%);}
.banner_wrapper.banner_darkmode .ban_logo.ban_logo_ottocity figcaption > ins:before {background-color:#FFF;}
}
@media all and (max-width:599px) {
.banner_wrapper .ban_logo.ban_logo_ottocity figcaption {flex-wrap:wrap;flex-direction:column;align-items:start;}
}

/* 頁面主題圖 - 樣版用, 商店自有的底色與圖片不會在此 */
/* 2023-08-22: Chiuhua + 230809782, 新增 modern ban_pic_news 預設主題圖 */
.ban_pic {width:100%;height:150px;display:inline-block;vertical-align:top;background:no-repeat center center / auto 100%;background-color:hsl(0,0%,35%);color:#FFF;border-bottom:2px solid #FFF;overflow:hidden;position:relative;}
.ban_pic.ban_pic_news {background-color:hsl(344,4%,60%);background-image:url(../image/toppic_bgmask.svg);background-size:cover;position:relative;}
.ban_pic.ban_pic_news:before {content:'';position:absolute;left:0px;right:0px;top:55%;bottom:45%;margin:auto;width:90%;height:60%;background:url(../image/toppic_news_w.svg) no-repeat center center / auto 100%;filter:drop-shadow(2px 4px 6px hsla(0,0%,0%,0.55));}
@media all and (max-width:480px) {
.ban_pic {height:100px;}
}

/* main_wrapper 樣式 */
/* 2023-06-26: Chiuhua + 230601756, 新增 modern main_wrapper 預設底色 for portal2 */
.main_wrapper {background-color:hsl(0,0%,95%);}

/* ft_wrapper 樣式 */
/* 2022-01-06: Chiuhua # 210501509, .ft_wrapper 髮絲紋從 fordassured 移至 modern 定義 */
/* 2022-01-27: Chiuhua # 210501509, 整理 .ft_wrapper 樣版與商店樣式 */
.ft_wrapper {display:flex;flex-direction:column;justify-content:center;background-color:hsl(344,4%,11%);background-image:url(../../../shared/image/bg_metalsilver_dark3.gif);color:#FFF;border-top:2px solid #FFF;position:relative;}
.ft_wrapper:before {content:'';position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:hsla(0,0%,0%,0.4);z-index:1;}
.ft_wrapper > * {display:inline-flex;flex-direction:column;justify-content:center;padding:5px 20px;z-index:2;}
.ft_wrapper a {text-decoration:none;display:inline-block;}
.ft_wrapper a:not(:nth-child(1)) {padding-left:0.75em;margin-left:0.75em;}

/*=== 樣版切版與主區塊樣式 End ===*/


/*=== template 樣版樣式 Start ===*/
/* old.漢堡下拉選單樣式模組 Start */
/* 漢堡 icon */
/* 2021-06-04: Chiuhua + 210501509, hamb_icon 樣式從 fordassured 移至 modern */
/* 2025-01-16: Chiuhua # 250107863, 漢堡下拉選單樣式模組從 modern 整理至共用 wrapper 並做樣版及品牌差異 (STLA onlineservice 延伸改良) */
/* old.2025-01-16 前
.hamb_icon {}
.hamb_icon > i {width:60px;height:100%;cursor:pointer;}
*/
/* 漢堡下拉選單 */
/* 2021-06-04: Chiuhua # 191001009, 漢堡下拉選單樣式原作者為 Ys 與 Ellen */
/* 2021-06-04: Chiuhua + 210501509, 漢堡下拉選單樣式 從 fordassured.ottocity.css 移至此樣版檔, 商店內僅留差異樣式 */
/* 2021-06-04: Chiuhua # 210501509, 修正 drop_wrapper 未與 hamb icon 一起做 RWD 穩藏的 bug */
/* 2021-10-04: Ellen   # 210600294, 漢堡下拉選單 增加淡出動畫樣式, 修正 漢堡選單 scroll 異常 (在 .pg_wrapper 子層加 .otto_main 切版) */
/* 2022-01-06: Chiuhua # 210501509, 調整 漢堡下拉顏色語法 */
/* 2022-06-09: Chiuhua # 220300968, 調整 下拉選單文字色語法, MAZDA CPO 需求 */
/* 2022-09-05: Chiuhua # 220802029, 調整 漢堡下拉選單相關樣式 */
/* 2025-01-16: Chiuhua # 250107863, 漢堡下拉選單樣式模組從 modern 整理至共用 wrapper 並做樣版及品牌差異 (STLA onlineservice 延伸改良) */
/* old.2025-01-16 前
.drop_wrapper {position:fixed;top:60px;left:0px;height:calc(100% - 60px);background:hsla(0,0%,0%,0.4);z-index:99;}
.drop_list_main {overflow-y:auto;height:100%;transition:width 0.5s, min-width 0.5s,opacity 0.5s;}
.drop_list {width:100%;background-color:hsl(344,95%,25%);color:#FFF;overflow:hidden;}
.drop_list * {color:inherit;}
.drop_list > li {height:3.5rem;line-height:3.5rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative;}
.drop_list > li:nth-child(odd) {background-color:hsla(0,0%,100%,0.15);}
.drop_list > li:hover {background-color:hsl(344,82%,43%);transition:background-color 0.2s;font-weight:bold;}
.drop_list > li > i {margin-right:1em;}
.drop_list > li > span {display:inline-block;vertical-align:middle;min-width:4.5em;max-width:65%;text-align:left;overflow:inherit;text-overflow:inherit;font-weight:inherit;}
.drop_list > li > span:after {content:'';position:absolute;right:20px;top:0px;bottom:0px;margin:auto;width:1em;height:1em;background:url(../../../shared/image/caret_r_w_L.png) no-repeat center right / contain;opacity:0.5;}
@media all and (min-width:1024px) {
.hamb_icon {display:none !important;}
.drop_wrapper {display:none;}
}
@media all and (max-width:1023px) {
.drop_list {box-shadow:0px 3px 10px hsla(0,0%,0%,0.5);border:0px solid #FFF;}
}
@media all and (min-width:600px) {
.drop_list {border-bottom-right-radius:0.35em;border-width:0px 2px 2px 0px;}
.drop_list_main {width:0px;}
.drop_list_show > .drop_list_main {max-width:35%;width:20em;}
}
@media all and (max-width:599px) {
.drop_list {border-bottom-width:2px;}
.drop_list_main {width:0px;}
.drop_list_show > .drop_list_main {width:100%;}
}
/* old.漢堡下拉選單樣式模組 End */

/* 漢堡下拉選單 */
/* 2025-01-20: Chiuhua + 250107863, 新增 漢堡下拉選單 - 樣版差異化 */
/* 2026-01-14: Chiuhua # 260101093, 漢堡下拉新增 :active 微互動樣式, 修正斑馬紋 :hover 樣式失效問題 (語法順序) */
.drop_list {width:100%;background-color:hsl(344,95%,25%);color:#FFF;}
.drop_list > li:nth-child(odd) {background-color:hsla(0,0%,100%,0.15);}
.drop_list > li:hover, .drop_list > li:active {background-color:hsl(344,82%,43%);}

/* main_wrapper 子層切版 */
.main_wrapper > * {max-width:inherit;}
.main_wrapper .main_titlefixed, .main_wrapper .main_bodyscroll {width:100%;max-width:inherit;/* left:0px;right:0px;margin:auto; */}
.main_wrapper .main_titlefixed {position:fixed;z-index:4;}
.main_wrapper .main_bodyscroll {/* position:relative;top:0px;bottom:0px; */padding-top:32px;/* height:auto;overflow:auto; */}

/* main_title_wrap */
/* 2020-04-13: Ys + main_toolbar */
/* 2020-04-20: Ran # 191001009, 調整 main_toolbar */
/* 2020-04-28: Chiuhua # 191001009, main_toolbar 底部加 2px 白線, gap 高度外加 = 32px */
/* 2020-04-28: Chiuhua # 191001009, 調整 main_toolbar 樣式並整理語法 */
/* 2020-05-05: Ran + 191001009, 增加氣泡窗樣式: filter_btn_dropdown_wrap */
/* 2020-05-06: Ran # 191001009, main_toolbar => main_title */
/* 2020-07-22: Chiuhua # 191001009, 調整 更多分類車標題加前導圖示時的左邊 gap */
/* 2020-07-22: Chiuhua # 191001009, 調整 main_title_wrap 為髮絲紋 */
/* 2022-01-06: Chiuhua # 210501509, .main_title_wrap 髮絲紋從 fordassured 移至 modern 定義 */
/* 2022-05-17: Chiuhua # 220300968, 整理 main_title_wrap 語法順序及樣式修正, MAZDA CPO 需求 */
/* 2026-01-28: Chiuhua # 260140668, 調整 main_usedcar_toolbar 篩選箭頭在 Ho 的桌機會被蓋住，故減少左邊 gap (by Ho) */
.main_title_wrap {width:100%;min-height:30px;overflow:hidden;background:hsl(0,0%,50%) url(../../../shared/image/bg_metalsilver.gif);color:#FFF;border-bottom:2px solid #FFF;position:relative;}
.main_title_wrap:before {content:'';position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:hsla(0,0%,0%,0.3);}
.main_title_wrap * {font-weight:inherit;}
.main_title_wrap > dl {width:100%;min-height:inherit;display:table;table-layout:fixed;overflow:hidden;}
.main_title_wrap > dl > * {display:table-cell;vertical-align:middle;white-space:nowrap;position:relative;}
.main_title_wrap .titleinfo, .main_title_wrap .filter > div > h3 {font-weight:bold;text-shadow:-1px -1px 1px hsla(0,0%,0%,0.25), 1px 1px 1px hsla(0,0%,0%,0.5);}
.main_title_wrap .titleinfo {width:8.5em;padding-left:10px;/* line-height:initial; */}
.main_title_wrap .titleinfo > * {line-height:inherit;}
.main_title_wrap .titleinfo > ins {margin-left:5px;}
.main_title_wrap .filter {min-width:5em;}
.main_title_wrap .filter > div {display:table;table-layout:fixed;width:100%;}
.main_title_wrap .filter > div > * {display:table-cell;vertical-align:middle;}
.main_title_wrap .filter > div > h3 {width:3.1em;}
.main_title_wrap .filter > div > h3.mark_tri_rev:after {margin-left:0.3rem;}
.main_title_wrap .toolbar_btn > button, .main_title_wrap .toolbar_btn.btn_toggle > label {height:1.55em;}
.main_title_wrap .toolbar_btn > button {line-height:1.35em;}
.main_title_wrap .toolbar_btn > button > i {width:1.25rem;height:1.25rem;}
.main_title_wrap .toolbar_btn.btn_toggle {margin-top:1px;}/* 屬性值需一併檢查移動裝置垂直置中 */
.main_title_wrap .toggle {width:8.5em;text-align:right;}
.main_title_wrap .action {width:15em;text-align:right;padding-right:20px;}
.main_title_wrap .action .btn_rect {padding:0px 0.5em;}
.main_title_wrap .action .btn_filter {display:none;}/* 小尺吋裝置使用的查詢 */
.main_title_wrap .titlebtn {text-align:right;}
.main_title_wrap .titlebtn .btn_rect_intitleright {vertical-align:top;}
/* 2022-07-05: Chiuhua # 220300968, 修正 2020-08 關鍵字搜尋隱藏不完全的畫面佔位問題 (程式 kw: searchbar, #191001009) */
/* 2022-07-05: Chiuhua # 220300968, 與 Ys 確認, 關鍵字搜尋 html 另有用途不能整段隱藏, 畫面佔位問題用行內 css 處理, 檔內未用到的樣式則 mark */
/* .main_title_wrap .searchbar {width:2em;}
/* .main_title_wrap .searchbar > * {display:block;top:-2px;} */

/* 2020-07-31: Ys + 191001009, 新增 toolbar 非桌機模式下，表達查詢文字 */
.main_title_wrap.main_usedcar_toolbar .titleinfo > ins {width:10em;overflow:hidden;white-space:nowrap;vertical-align:bottom;text-overflow:ellipsis;display:none;}

/* 下拉選單 */
.filter_btn_dropdown_wrap {position:fixed;z-index:10;}
.filter_btn_dropdown_wrap .filter_btn_dropdown > ul {max-height:500px;overflow-x:hidden;overflow-y:auto;}

@media all and (max-width:1279px) {
.main_title_wrap .action {width:8em;}
.main_title_wrap .action button > lang, .main_title_wrap .action button > label {display:none;}

/* 2022-01-17: Ys # 211202005, 新增 車輛比較表 的功能 */
.main_title_wrap .action button.btn_compare > lang, .main_title_wrap .action button.btn_compare > label {display:block;}
}

@media all and (max-width:800px) {
.main_title_wrap .action {padding-right:10px;}
.main_title_wrap .filter {display:none;}
.main_title_wrap .action .btn_filter {display:inline-block;}
.main_title_wrap .action .btn_search {display:none !important;}
.main_title_wrap .toggle {display:none;}
/* .main_title_wrap .searchbar {display:none;} */
.main_title_wrap.main_usedcar_toolbar .titleinfo > ins {width:22em;display:inline-block;}

.main_title_wrap .action {width:10em;}
.main_title_wrap .action button > lang, .main_title_wrap .action button > label {display:none;}

/* 2022-01-17: Ys # 211202005, 新增 車輛比較表 的功能 */
.main_title_wrap .action button.btn_compare {display:none !important;}
}

@media all and (max-width:599px) {
/* 2023-12-26: Chiuhua # 230602013, 修正 main_title_wrap titlebtn 按鈕 RWD gap line-height */
.main_title_wrap .titlebtn .btn_rect {min-width:initial;line-height:inherit;padding-left:1.5em !important;}
.main_title_wrap.main_usedcar_toolbar .titleinfo > ins {display:none !important;}
}

/* 篩選窗 (寬 800px 以下手機及平版) */
/* 原始作者: Ys */
/* 2022-02-07: Chiuhua # 210501509, 修正 篩選窗樣式 */
/* 2024-07-04: Chiuhua # 240602259, 調整 tag, 因新的 Angular 不支援自定義的 lang tag, 系統部先不需調整 html tag，所以過渡期 css 語法 lang 與 label 並存 */
/* 2025-09-22: Chiuhua # 250900772, oTToCity 二手車篩選窗改良, 父層加套 def 才不會影響品牌樣式 */
/* 2025-09-22: Chiuhua # 250900772, 修正 二手車篩選下拉與開窗 RWD 切換時區塊重疊的瑕疵 */
/* 2026-03-26: Chiuhua # , 改良 手機版搜尋 form 改為上下排列 (3/24 by Ho) */
@media all and (min-width:801px) {
.window_filter_wrap {display:none !important;}
}
@media all and (max-width:800px) {
.window_filter_wrap {width:100%;height:calc(100% - 60px);overflow:auto;background-color:hsl(0,0%,90%);position:fixed;z-index:4;display:none;}
.window_filter_wrap > * {padding:10px 15px;}
.window_filter_wrap > h3 {display:flex;align-items:center;justify-content:space-between;width:100%;min-height:30px;padding-top:0px;padding-bottom:0px;border-bottom:2px #FFF solid;position:fixed;z-index:2;}
.window_filter_wrap > h3 > * {}
.window_filter_wrap > h3 ~ * {position:relative;top:30px;}
.window_filter {}
.window_filter > dt {}
.window_filter > dd .searchipt_cap {padding-left:1em;max-width:100%;}
/* 父層加套 def 才不會影響品牌樣式 */
.window_filter_wrap.def .form1 dt, .window_filter_wrap.def .form1 dd {margin:1.3vh 0px;}
.window_filter_wrap.def > h3 {}
}
@media all and (min-width:600px) and (max-width:800px) {
.window_filter_wrap.def > *:not(h3) {max-width:650px;margin:auto;}
}
@media all and (max-width:599px) {
.window_filter_wrap.def .form1 dt, .window_filter_wrap.def .form1 dd {width:100%;margin:0.45vh 0px;}
.window_filter_wrap.def .form1 dt {height:1.3rem;min-height:1.3rem;line-height:1.3rem !important;text-align:left;margin-bottom:0px;padding-right:0px;}
}

/* shopwindow_list 樣版櫥窗 */
/* 2020-04-17: Ellen + 191001009 */
/* 2023-01-09: Sharon # 櫥窗 */
/* 2023-06-26: Chiuhua # 230601756, 改良 gridmode 樣式 (Portal2 邊框變淡、gap 加大, by Ho) */
/* 2023-08-08: Chiuhua # 230601756, 新增 .shopwindow_list 樣板櫥窗的 :hover 互動樣式 (套用樣版的品牌一併優化) */
/* 2026-03-12: Chiuhua # 260301300, 修正 現有二手車櫥窗 bug, 改良 RWD */
.shopwindow_wrap {/* margin:1.5em; */}
.shopwindow_list {display:block;margin:15px;}
.shopwindow_list li {display:inline-block;padding:12px;vertical-align:top;}
.shopwindow_list li > div {display:table;table-layout:fixed;width:100%;padding:15px;padding-right:10px;background-color:#FFF;box-shadow:0px 0px 20px 2px hsla(0,0%,0%,0.15);border-radius:0.75rem;overflow:hidden;}
.shopwindow_list li > div:hover {box-shadow:0px 0px 10px 1px hsla(0,0%,0%,0.35);transition:box-shadow 0.2s;}
.shopwindow_list li > div > * {display:table-cell;vertical-align:top;}
.shopwindow_list dl > * {line-height:1.5em;min-height:1.5em;white-space:nowrap;overflow:hidden;text-align:left;word-break:break-all;}
.shopwindow_list .info {padding:10px;padding-right:0px;}
.shopwindow_list .info .pri_title, .shopwindow_list .info .pri_title > * {font-weight:bold;word-break:break-word;}
.shopwindow_list .shop_ico {width:1.5em;opacity:0.5;}
/* 須注意, padding 會影響 ribbon, badge_star_gold 位置推算, 自適應寬度設定需相同 (usedcar.css) */
@media all and (max-width:1024px) {
.shopwindow_list li {padding:12px 8px;}
}
@media all and (max-width:767px) {
.shopwindow_list {margin:10px 5px;}
}
/*=== template 樣版樣式 End ===*/