/**
  @file       hondahcuc.ottocity.css
  @brief      品牌差異樣式檔, 繼承 oTToCity root > template 樣版
  @date       2022-10-19: Chiuhua + H221000167, Create
  @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       2022-12-06: Chiuhua # H221000167, 社群 icon 樣式從 root 盤整, 每個社群 icon 樣式名唯一化, 品牌差異與按鈕 icon 圖樣差異用 css bgimg 處理
  @date       2023-01-07: Chiuhua # 230100301, form1 性別欄位自主改良, 去除 gap 及接縫餘線 (改良 form1 有線條時樣式太複雜)
  @date       2023-01-09: Chiuhua + 230100301, 新增 .form1_psi_wrapper 個人資料區塊樣式差異
  @date       2023-06-06: Chiuhua # 230501310, form1 線條改用 box-shadow 寫法, 讓 dd 插入 ferr 等樣式時, 相關高度不用逐一重設
  @date       2023-06-13: Chiuhua + 230600937, 新增 qaOC 品牌差異化樣式
  @date       2023-06-26: Chiuhua + 230601756, 新增 main_wrapper 品牌差異樣式
  @date       2023-08-08: Chiuhua # 230601756, 新增 .shopwindow_list 樣板櫥窗的 :hover 互動樣式 (套用樣版的品牌一併優化)
  @date       2023-08-22: Chiuhua # 230809782, 調整 ban_pic 商店差異樣式 - hondahcuc 無背景圖, (因 modern 新增 ban_pic_news 預設主題圖)
  @date       2023-09-27: Sharon  # 230900138, 因 modern shopwindow_list 調整畫面同 honda 版, 故移除重複樣式
  @date       2024-01-10: Sharon  # H230800205, 調整 emptymsg 樣式
	@date       2024-03-01: Chiuhua + H240100197, 新增 .stk 文字刪除線 品牌差異樣式
  @date       2024-07-04: Chiuhua # 240602259, 調整 tag, 因新的 Angular 不支援自定義的 lang tag, 系統部先不需調整 html tag，所以過渡期 css 語法 lang 與 label 並存
	@date       2024-08-22: Chiuhua + 240802455, 新增 .title_base 商店差異顏色, 線上支付-上優標準版 延伸調整
	@date       2024-09-27: Chiuhua # 240801316, 改良 .lbcbx_marked 純標示的 [樣版,品牌商店,網頁] 差異化
	@date       2024-12-03: Chiuhua # 241200827, 改良 btn_rect transition 漸變效果的 [樣版,品牌商店,網頁] 差異化
	@date       2025-01-20: Chiuhua # 250107863, 漢堡下拉選單樣式模組從 modern 整理至共用 wrapper 並做樣版及品牌差異 (STLA onlineservice 延伸改良)
	@date       2025-02-04: Chiuhua + 250119001, 新增 [LINE 加入好友] 方形按鈕差異化
	@date       2025-03-04: Chiuhua # 250300202, 調整 user_x 圖檔及樣式名稱 (上優圖資與 oTToCity framework 相關)
	@date       2025-03-20: Chiuhua # 250300904, 調整 線條色/文字色 樣式語法順序, 線條強調色 rename (因 onlineservice 新增線條色樣式, framework 語法需具一致性)
	@date       2025-09-11: Chiuhua # 250900886, oTToCity form1 改良
	@date       2025-09-19: Chiuhua # 250900888, oTToCity 各品牌 表格樣式盤整
	@date       2025-11-03: Chiuhua # 251100134, 改良 form1 欄位 focus 樣式 (root 與 modern 及 onlineservice 樣版及所有集團/品牌)
	@date       2025-11-05: Chiuhua # 251100266, 改良 次要按滑鼠經過漸變語法
	@date       2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式
	@date       2025-11-06: Chiuhua # 251100266, 修正 HONDA HCUC、HCUM 按鈕 icon bug
	@date       2025-11-07: Chiuhua # 251100266, 調整 btn_rect_intitleright 置於標題尾端的按鈕樣式
	@date       2025-11-21: Chiuhua # 251101828, 改良 modern banner - Portal 及所有品牌 (by Ho)
	@date       2025-12-09: Chiuhua # 251200088, 改良 圓形按鈕 - 樣版│品牌差異化
  @date       2025-12-15: Chiuhua # 251205366, 改良 itemlist, 範圍：Root → 樣版 → 各品牌網站/網頁
	@date       2026-01-14: Chiuhua # 260101093, 漢堡下拉新增 :active 微互動樣式
	@date       2026-03-16: Chiuhua # 260301050, 改良 .btn_rect_sec icons 語法，※ 用 css 屬性選擇器加 filter 取代眾多圖樣逐一定義
*/

/*=== 品牌字型 Start ===*/
/* 與 oTToCity 預設的 Cambria(襯線字) 不同, 依品牌 Guideline, 中文=微軟正黑, 英文=Arial */
* {font-family:Arial, Helvetica, Microsoft JhengHei, 微軟正黑體, sans-serif !important;}
/*=== 品牌字型 End ===*/

/*=== 品牌商店色系 Start, 依廣告公司設計稿 ===*/
/* 網站基本文字色 */
* {color:hsl(0,0%,20%);}
* * {color:inherit;}

/* 背景色 */
.bg1 *, .bg2 *, .bg22 *, .bghighlight *, .bgalert * {color:inherit !important;}
.bg1 {background-color:hsl(0,0%,20%) !important;color:#FFF !important;}
.bg2 {background-color:hsl(0,0%,60%) !important;color:#FFF !important;}
.bg22, .bghighlight_light2 {background-color:hsl(0,0%,80%) !important;color:inherit !important;}
.bg23, .bghighlight_light3 {background-color:hsl(0,0%,90%) !important;}
.bg24, .bghighlight_light4 {background-color:hsl(0,0%,95%) !important;}
.bghighlight {background-color:hsl(358,80%,44%) !important;color:#FFF !important;}
.bgalert {background-color:hsl(358,80%,44%) !important;color:#FFF !important;}
/*
.has_error {background-color:hsl(8,90%,93%) !important;}
*/

/* 線條色 */
/* 2025-03-20: Chiuhua # 250300904, 調整 線條色/文字色 樣式語法順序, 線條強調色 rename (因 onlineservice 新增線條色樣式, framework 語法需具一致性) */
.bdc1 {border-color:hsl(0,0%,20%) !important;}
.bdc2 {border-color:hsl(0,0%,60%) !important;}
.bdc22 {border-color:hsl(0,0%,80%) !important;}
.bdc23 {border-color:hsl(0,0%,90%) !important;}
.bdc24 {border-color:hsl(0,0%,95%) !important;}
.bdchighligh {border-color:hsl(358,80%,44%) !important;}

/* 文字色 */
/* 2024-03-01: Chiuhua + H240100197, 新增 .stk 文字刪除線 品牌差異樣式 */
.fc1 {color:hsl(0,0%,20%) !important;}
.fc2 {color:hsl(0,0%,60%) !important;}
.fc22 {color:hsl(0,0%,80%) !important;}
.fhighlight {color:hsl(358,80%,44%) !important;}
.falert, .falert input:not([type="checkbox"]):not([type="radio"]):disabled, input.falert:disabled, .has_error {color:hsl(358,80%,44%) !important;-webkit-text-fill-color:hsl(358,80%,44%) !important;}
.stk:before {border-color:hsl(358,80%,44%);}
/*=== 品牌商店色系 End ===*/

/*=== oTToCity 共用樣式 - 商店差異化 Start ===*/
/* qaOC */
/* 2023-06-13: Chiuhua + 230600937, 新增 qaOC 品牌差異化樣式 */
.qaOC .ui-dialog .ui-dialog-titlebar {background-image:url(../../../shared/image/watermark_qa_orange_alpha60.svg);}

/* checkbox, radio */
/* 2022-11-23: Chiuhua + H221000167, 新增 .lbcbx_marked 純標示樣式, HONDA HCUC 需求, 從 root 新增, 以強化 oTToCity 樣式模組架構 */
/* 2024-09-27: Chiuhua # 240801316, 改良 .lbcbx_marked 純標示的 [樣版,品牌商店,網頁] 差異化 */
.lbcbx_wrapper label:before, label.lbcbx:before, .lbrdo_wrapper label:before, label.lbrdo:before {border:0.083em solid hsl(0,0%,40%);}
.lbcbx_wrapper label.lbcbxed:before, label.lbcbx.lbcbxed:before, .lbrdo_wrapper label.lbrdoed:before, label.lbrdo.lbrdoed:before {background-color:hsl(358,80%,44%);}
.lbcbx_wrapper label.lbcbxed:before, label.lbcbx.lbcbxed:before {background-size:60% auto;border-radius:0.3em;}
.lbrdo_wrapper label.lbrdoed:before, label.lbrdo.lbrdoed:before {border:0.25em solid #FFF;box-shadow:0px 0px 0px 2px hsl(358,80%,44%);transform:scale(0.8);}
.lbcbx_wrapper.lbcbx_marked label:before {background-image:url(../image/cbxbg_check_c_pri.svg);background-size:70% auto;}

/* required field 必填欄位 */
/* 2024-07-04: Chiuhua # 240602259, 調整 tag, 因新的 Angular 不支援自定義的 lang tag, 系統部先不需調整 html tag，所以過渡期 css 語法 lang 與 label 並存 */
dt lang.requiredtag:before, dt label.requiredtag:before {top:-0.3rem;background-image:url(../image/mark_star.svg);}

/* icons (含 btn icon) - 商店差異化 */
/* 2025-12-09: Chiuhua # 251200088, 改良 圓形按鈕 - 樣版│品牌差異化 */
i[class*="i_logo_"] {opacity:0.8;}

.i_bars_b, *[class*="btn_rnd"] i.i_bars {background-image:url(../image/bars_b.svg);}
.i_bars_w, *[class*="btn_rect"] i.i_bars {background-image:url(../image/bars_w.svg);}

i[class*="i_heart"] {background-size:1.25em auto;}
.i_heart_b {background-image:url(../image/heart_b.svg);}
.i_heart_w, *[class*="btn_rect"] i.i_heart {background-image:url(../image/heart_w.svg);}
.i_heart_red {background-image:url(../image/heart_red.svg);}

i[class*="i_favorites"] {background-size:1.25em auto;}
.i_favorites_b {background-image:url(../image/favorites_b.svg);opacity:0.3 !important;}
.i_favorites_w, *[class*="btn_rect"] i.i_favorites {background-image:url(../image/favorites_w.svg);}

i[class*="i_car_"], .i_legend.i_car {background-size:1.3em auto;}
.i_car_b, *[class*="btn_rnd"] i.i_car, .i_legend.i_car {background-image:url(../image/car_b.svg);}
.i_car_w, *[class*="btn_rect"] i.i_car {background-image:url(../image/car_w.svg);}

.i_loc_b, *[class*="btn_rnd"] i.i_loc, .form1 .i_loc, .i_legend.i_loc {background-image:url(../image/loc_b.svg);}
.i_loc_w, *[class*="btn_rect"] i.i_loc {background-image:url(../image/loc_w.svg);}

i[class*="i_map"] {background-size:1.3em auto;}
.i_map_b, *[class*="btn_rnd"] i.i_map {background-image:url(../image/map_b.svg);}
.i_map_w, *[class*="btn_rect"] i.i_map {background-image:url(../image/map_w.svg);}

.i_phone_b, *[class*="btn_rnd"] i.i_phone, .form1 .i_phone {background-image:url(../image/phone_b.svg);}
.i_phone_w, *[class*="btn_rect"] i.i_phone {background-image:url(../image/phone_w.svg);}

i[class*="i_calendar"] {background-size:1.1em auto;}
.i_calendar_b, *[class*="btn_rnd"] i.i_calendar, .form1 .i_calendar {background-image:url(../image/calendar_b.svg);}
.i_calendar_w, *[class*="btn_rect"] i.i_calendar {background-image:url(../image/calendar_w.svg);}

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

i[class*="i_share"] {}
.i_share_b, *[class*="btn_rnd"] i.i_share {background-image:url(../image/share_b.svg);}
.i_share_w, *[class*="btn_rect"] i.i_share {background-image:url(../image/share_w.svg);}

i[class*="i_copy"] {}
.i_copy_b, *[class*="btn_rnd"] i.i_copy {background-image:url(../image/copy_b.svg);}
.i_copy_w, *[class*="btn_rect"] i.i_copy {background-image:url(../image/copy_w.svg);}

/* 2025-11-06: Chiuhua # 251100266, 修正 HONDA HCUC、HCUM 按鈕 icon bug */
.i_search_b, *[class*="btn_rnd"] i.i_search,
.action_btn.btn_rect_wrap1 button.btn_die:hover > .i_search {background-image:url(../image/search_b.svg);}
.i_search_w, *[class*="btn_rect"] i.i_search, .searchipt_cap > button:after,
.action_btn.btn_rect_wrap1 button:not(.btnOn):not(:hover) > .i_search {background-image:url(../image/search_w.svg);}

/* 2025-11-06: Chiuhua # 251100266, 修正 HONDA HCUC、HCUM 按鈕 icon bug */
.i_reset_b, *[class*="btn_rnd"] i.i_reset,
.action_btn.btn_rect_wrap1 button.btn_die > .i_reset {background-image:url(../image/reset_b.svg);}
.i_reset_w, *[class*="btn_rect"] i.i_reset,
.action_btn.btn_rect_wrap1 button:not(.btnOn):not(.btn_die):not(:hover) > .i_reset {background-image:url(../image/reset_w.svg);}

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

/* 2025-11-06: Chiuhua # 251100266, 修正 HONDA HCUC、HCUM 按鈕 icon bug */
i[class*="i_back"] {background-size:auto 1.125em;}
.i_back_b, *[class*="btn_rnd"] i.i_back,
.action_btn.btn_rect_wrap1 button.btn_die:hover > .i_back {background-image:url(../image/back2_b.svg);}
.i_back_w, *[class*="btn_rect"] i.i_back,
.action_btn.btn_rect_wrap1 button:not(.btnOn):not(:hover) > .i_back {background-image:url(../image/back2_w.svg);}

.i_chart_bubble_b, *[class*="btn_rnd"] i.i_chart_bubble, .btn_toggle .i_chart_bubble {background-image:url(../image/chart_bubble_b.svg);}
.i_chart_bubble_w, *[class*="btn_rect"] i.i_chart_bubble, .btn_toggle label:hover .i_chart_bubble, .btn_toggle .togOn .i_chart_bubble {background-image:url(../image/chart_bubble_w.svg);}

i[class*="i_grid"] {background-size:1.05em auto;}
.i_grid_b, *[class*="btn_rnd"] i.i_grid, .btn_toggle .i_grid {background-image:url(../image/grid_b.svg);}
.i_grid_w, *[class*="btn_rect"] i.i_grid, .btn_toggle label:hover .i_grid, .btn_toggle .togOn .i_grid {background-image:url(../image/grid_w.svg);}

.i_list_b, *[class*="btn_rnd"] i.i_list, .btn_toggle .i_list {background-image:url(../image/list_b.svg);}
.i_list_w, *[class*="btn_rect"] i.i_list, .btn_toggle label:hover .i_list, .btn_toggle .togOn .i_list {background-image:url(../image/list_w.svg);}

/* btn_rnd 的 caret 用細箭頭 */
/* 注意, 因次要按鈕 icon 需反黑, 所以黑色樣式排序需在白色後面, 2022-10-31: Chiuhua # 220802029, 將 .btn_rect_sec 次要按鈕加進共用樣式 */
i[class*="i_caret2_l"], i[class*="i_caret2_r"] {background-size:auto 1.125em;}
.i_caret2_u_w, *[class*="btn_rect"] i.i_caret2_u {background-image:url(../image/caret2_u_w.svg);}
.i_caret2_d_w, *[class*="btn_rect"] i.i_caret2_d {background-image:url(../image/caret2_d_w.svg);}
.i_caret2_u_b, *[class*="btn_rnd"] i.i_caret2_u, *[class*="btn_rnd"] i.i_caret_u {background-image:url(../image/caret2_u_b.svg);}
.i_caret2_d_b, *[class*="btn_rnd"] i.i_caret2_d, *[class*="btn_rnd"] i.i_caret_d {background-image:url(../image/caret2_d_b.svg);}
.i_caret2_l_w, *[class*="btn_rect"] i.i_caret2_l {background-image:url(../image/caret2_l_w.svg);}
.i_caret2_r_w, *[class*="btn_rect"] i.i_caret2_r {background-image:url(../image/caret2_r_w.svg);}
.i_caret2_l_b, *[class*="btn_rnd"] i.i_caret2_l, *[class*="btn_rnd"] i.i_caret_l {background-image:url(../image/caret2_l_b.svg);}
.i_caret2_r_b, *[class*="btn_rnd"] i.i_caret2_r, *[class*="btn_rnd"] i.i_caret_r {background-image:url(../image/caret2_r_b.svg);}
/* i_caret b&w 取共用, c_pri 才做品牌差異 */
.i_caret_u_c_pri {background-image:url(../image/caret_u_c_pri.svg);}
.i_caret_d_c_pri {background-image:url(../image/caret_d_c_pri.svg);}
.i_caret_l_c_pri {background-image:url(../image/caret_l_c_pri.svg);}
.i_caret_r_c_pri {background-image:url(../image/caret_r_c_pri.svg);}

/* icons - 社群 - 此品牌的社群 icon 需差異為無彩色 */
/* 2022-12-06: Chiuhua # H221000167, 社群 icon 樣式從 root 盤整, 每個社群 icon 樣式名唯一化, 品牌差異與按鈕 icon 圖樣差異用 css bgimg 處理 */
.i_logo_line_b, .i_logo_line {background-image:url(../image/logo_line_b.svg);}
.i_logo_line_w {background-image:url(../image/logo_line_w.svg);}
.i_logo_fb_b, .i_logo_fb {background-image:url(../image/logo_fb_b.svg);}
.i_logo_fb_w {background-image:url(../image/logo_fb_w.svg);}
.i_logo_yt {background-image:url(../../../shared/image/logo_youtube_b_L.png);}
.i_logo_ig {background-image:url(../../../shared/image/logo_ig_b_L.png);}

/* icons - 品牌特有, 用於車輛明細頁, 圓形灰底做在 icon 樣式上 */
/* 2025-03-04: Chiuhua # 250300202, 調整 user_x 圖檔及樣式名稱 (上優圖資與 oTToCity framework 相關) */
.i_legend {width:2.5rem !important;height:2.5rem !important;border-radius:50%;opacity:0.8;background-color:hsl(0,0%,93%);}
.i_legend.i_dashboard {background-image:url(../image/dashboard_b.svg);background-size:1.3em auto;background-position-y:45%;}
.i_legend.i_row {background-image:url(../image/row_b.svg);background-size:auto 1.25em;}
.i_legend.i_user_x3 {background-image:url(../image/user_x3_b.svg);background-size:1.55em auto;background-position-y:45%;}
.i_legend.i_gasstation {background-image:url(../image/gasstation_b.svg);background-size:auto 1.05em;background-position-x:55%;}
.i_legend.i_cogs {background-image:url(../image/cogs_b.svg);background-size:1.3em auto;}
.i_legend.i_palette {background-image:url(../image/palette_b.svg);background-size:1.2em auto;}

/* 按鈕 - 方 */
/* 注意: honda 的 .btn_rect_small 高度不縮小 */
/* 2025-02-04: Chiuhua + 250119001, 新增 [LINE 加入好友] 方形按鈕差異化 */
/* 2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式 */
/* 2025-11-07: Chiuhua # 251100266, 調整 btn_rect_intitleright 置於標題尾端的按鈕樣式 (與方形按鈕僅保留 box-shadow 差異, root 和所有樣版及品牌移除底色差異樣式) */
.btn_rect_wrap1 button, .btn_rect, .btn_rect_wrap1.btn_rect_small > *, .btn_rect.btn_rect_small {line-height:2.25rem;border-radius:0.375em;}
.btn_rect_wrap1 button:not([class*="_sec"]):not([class*="_passcode"]), .btn_rect:not([class*="_sec"]):not([class*="_passcode"]) {background-color:hsl(0,0%,20%);color:#FFF !important;box-shadow:none !important;}
*:not(.filter_btn) > .btn_rect_wrap1 button:not(.btn_die):not(.btn_rect_sec):not([class*="_passcode"]):not([class*="_line"]):hover, 
.btn_rect:not(.btn_die):not(.btn_rect_sec):not([class*="_passcode"]):not([class*="_line"]):hover {background-color:hsl(358,80%,44%) !important;}

/* 方 - 次要按鈕, btn_passcode */
/* 2024-12-03: Chiuhua # 241200827, 改良 btn_rect transition 漸變效果的 [樣版,品牌商店,網頁] 差異化 */
/* 2025-11-05: Chiuhua # 251100266, 改良 次要按滑鼠經過漸變語法 */
/* 2025-11-05: Chiuhua # 251100266, 改良 圖形驗證碼 Wrapper button 滑鼠互動樣式 */
/* 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:hsl(0,0%,90%);box-shadow:none;transition-property:color;}
.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:none !important;color:hsl(358,80%,44%) !important;font-weight:bold;}
.btn_rect_wrap1 button.btn_rect_sec:not(.btn_die):hover > i, .btn_rect.btn_rect_sec:not(.btn_die):hover {filter:invert;}
.passcode_wrapper .btn_passcode:hover > i {filter:invert(10%) sepia(90%) saturate(6000%) hue-rotate(358deg);opacity:1 !important;}

/* 方 - 按鈕加高, 文字沒放大, 繼承加套, 圖形驗證碼 button */
.btn_rect_wrap1.btn_rect_higher > *, .btn_rect.btn_rect_higher, .passcode_wrapper .btn_rect_wrap1 button {line-height:calc(2.25rem * 1.388);}

/* 按鈕 - 圓 */
/* 2025-12-09: Chiuhua # 251200088, 改良 圓形按鈕 - 樣版│品牌差異化 */
.btn_rnd_wrap1 button, .btn_rnd {box-shadow:none;color:inherit;}
.btn_rnd_wrap1 button:hover, .btn_rnd:hover {/* background-color:hsl(0,0%,90%); */}
.btn_rnd_wrap1 button:not(.btn_die) > i, .btn_rnd:not(.btn_die) > i {filter:grayscale(1) brightness(0);opacity:0.8 !important;}

/* 按鈕 - 圓 - 內置社群 icon */
.btn_rnd_wrap1 button > i[class*="i_logo_line"], .btn_rnd > i[class*="i_logo_line"] {background-image:url(../image/logo_line_b.svg);}
.btn_rnd_wrap1 button > i[class*="i_logo_fb"], .btn_rnd > i[class*="i_logo_fb"] {background-image:url(../image/logo_fb_b.svg);}

/* 按鈕 - 灰階+禁用 */
.btn_rnd_wrap1 button.btn_die > i, .btn_rnd.btn_die > i {opacity:0.35 !important;}/* 當圓形按鈕內置 icon 為正黑時, 透明度需覆寫樣版樣式, 與 genlib 相同 */

/* btn_toggle */
.btn_toggle {border-radius:1.125rem;}
.btn_toggle > * {height:2.25rem !important;background-color:hsl(0,0%,90%);color:inherit;}
.btn_toggle > *.togOn {background-color:hsl(0,0%,20%);}
.btn_toggle > *:hover {background-color:hsl(358,80%,44%);}
.btn_toggle > *.togOn:hover {color:#FFF;}
.btn_toggle > *:not(.togOn):not(:hover) i {opacity:0.8 !important;}

/* 搜尋膠囊 search input capsule */
.searchipt_cap {height:2.25rem;border-radius:0.25em;}
.searchipt_cap > input, .searchipt_cap > button {box-shadow:0px 0px 0px 1px hsl(0,0%,60%);}
/* 搜尋膠囊 - 置於標題尾端 */
.searchipt_cap.searchipt_cap_intitleright > input {background-color:hsl(0,0%,20%) !important;}

/* 下拉篩選 - 使用 button tag */
.filter_btn > .btn_rect_wrap1 button, .filter_btn > .btn_rect_wrap1 button.btnOn {color:inherit !important;font-weight:bold;}
.filter_btn > .btn_rect_wrap1 button {height:auto;line-height:2.25rem;border-radius:0.375em;box-shadow:none !important;background-image:url(../../../shared/image/dropdown_b.svg) !important;border-radius:1.125rem;}
.filter_btn > .btn_rect_wrap1 button:not(:hover) {color:inherit !important;}
.filter_btn > .btn_rect_wrap1 button:not(.btnOn) {background-color:transparent;}
.filter_btn > .btn_rect_wrap1 button.btnOn {background-color:hsl(0,0%,90%);color:hsl(358,85%,44%) !important;}
.filter_btn > .btn_rect_wrap1 button:not(.btnOn):hover, .filter_btn > .btn_rect_wrap1 button.btnOn:hover {background-color:transparent !important;color:hsl(358,85%,44%) !important;}

/*
.filter_btn > .btn_rect_wrap1 button:not(.btnOn):hover, .filter_btn > .btn_rect_wrap1 button.btnOn:hover {background-color:hsl(358,85%,44%);color:#FFF !important;background-image:url(../../../shared/image/dropdown_w.svg) !important;} */
.filter_btn > .btn_rect_wrap1.toolbar_btn button:not(.btnOn):hover, .filter_btn > .btn_rect_wrap1.toolbar_btn button.btnOn:hover {color:hsl(358,85%,44%) !important;}
.filter_btn > .btn_rect_wrap1.toolbar_btn button:not(.btnOn):hover {background-color:transparent !important;}
.filter_btn > .btn_rect_wrap1.toolbar_btn button.btnOn:hover {background-color:hsl(0,0%,80%) !important;}
.filter_btn.fsmall2 .btn_rect_wrap1 * {font-size:1rem !important;}

/* 下拉篩選 - 內容選項 */
.filter_btn_dropdown.bubble {font-size:1rem !important;min-width:13em;background-color:#FFF;}
.filter_btn_dropdown.bubble * {font-size:inherit !important;}
.filter_btn_dropdown > ul *:not(.liOn) {color:inherit;}
.filter_btn_dropdown > ul > li {display:flex;height:2.25rem;align-items:center;padding:0px 0.75em;}
/* .filter_btn_dropdown > ul > li > label {line-height:inherit;} */
.filter_btn_dropdown > ul > li:not(:nth-last-child(1)) {border-bottom-color:transparent;}
.filter_btn_dropdown > ul > li:hover, .filter_btn_dropdown > ul > li.liOn:hover {background-color:hsl(0,0%,90%);color:hsl(358,85%,44%);}
.filter_btn_dropdown > ul > li.liOn {background-color:transparent;color:inherit;}
.filter_btn_dropdown > .btn_rect_wrap1 {margin-top:10px;}

/* 下拉篩選加 checkbox */
.filter_btn_dropdown .lbcbx_wrapper label:not(.lbcbxed):before {box-shadow:0px 0px 0px 1px hsla(0,0%,0%,0.5);}

/* 篩選動作按鈕 */
.action_btn.btn_rect_wrap1 button {height:2.25rem;line-height:2.25rem;background-color:hsl(0,0%,90%);color:inherit !important;}
.action_btn.btn_rect_wrap1 button.btnOn {background-color:hsl(0,0%,20%);}
.action_btn.btn_rect_wrap1 button.btnOn.bgalert {color:#FFF !important}
.action_btn.btn_rect_wrap1 button:not(.btnOn):not(.btn_die):not(:hover) > i {/* opacity:0.8 !important; */}
.action_btn.btn_rect_wrap1 button.btn_die {background-color:hsl(0,0%,84%) !important;}
.action_btn.btn_rect_wrap1 button.btn_die > *:not(i), .action_btn.btn_rect_wrap1 button.btn_die > *:not(i):hover {color:hsl(0,0%,20%) !important;opacity:0.75 !important;}
.action_btn.btn_rect_wrap1 button.btn_die > i, .action_btn.btn_rect_wrap1 button.btn_die > i:hover {opacity:0.5 !important;}
.action_btn.btn_rect_wrap1.fsmall2, .action_btn.btn_rect_wrap1 button.btn_compare {font-size:1rem !important;}
.action_btn.btn_rect_wrap1.fsmall2 * {font-size:inherit !important;}

/* bubble 泡泡 */
.bubble {border-radius:0.75em;box-shadow:0px 0px 13px 1px hsla(0,0%,0%,0.30);}
*[class*="bubble_arrow"]:before {/* width:0.415em;height:0.415em; */}
.bubble_arrowT:before {box-shadow:3px -3px 5px hsl(0,0%,80%);}
.bubble_arrowB:before {box-shadow:-3px 3px 5px hsl(0,0%,80%);}
.bubble_arrowL:before {box-shadow:-3px -3px 5px hsl(0,0%,80%);}
.bubble_arrowR:before {box-shadow:3px 3px 5px hsl(0,0%,80%);}

/* 排序箭頭 */
.sort1 {text-decoration:none;}
.sort1:after {background-size:auto 100%;}
.sort1_parbglight .sort1:not(.sorting):after {opacity:0.8;}
.sort1_parbglight .sort1:after {background-image:url(../image/arrow_u_b.svg);}
.sort1_parbglight .sort1.sorting:after {background-image:url(../image/arrow_u_c_pri.svg);}
.sort1_parbgdk .sort1:after {background-image:url(../image/arrow_u_w.svg) !important;}
.sort1_parbgdk .sort1.sorting {color:inherit !important;}

/* 往前往後箭頭 */
i[class*="ico_prev"], i[class*="ico_next"] {min-width:1.66rem;min-height:2.28rem;opacity:1 !important;}
i[class*="ico_prev"]:before, i[class*="ico_next"]:before {width:0.75rem;opacity:1;transform:none;}
i[class*="ico_prev_b"], i[class*="ico_next_b"] {background-color:hsla(0,0%,0%,0.05);}
i[class*="ico_prev_b"]:before {background-image:url(../image/caret2_l_b.svg) !important;}
i[class*="ico_prev_w"]:before {background-image:url(../image/caret2_l_w.svg) !important;}
i[class*="ico_next_b"]:before {background-image:url(../image/caret2_r_b.svg) !important;}
i[class*="ico_next_w"]:before {background-image:url(../image/caret2_r_w.svg) !important;}
.ico_prev_sc150, .ico_next_sc150 {min-width:calc(1.66rem * 1.5) !important;min-height:calc(2.28rem * 1.5) !important;}
.ico_prev_sc150:before, .ico_next_sc150:before {transform:scale(1.5) !important;}
.ico_prev_sc200, .ico_next_sc200 {min-width:calc(1.66rem * 1.75) !important;min-height:calc(2.28rem * 2) !important;}
.ico_prev_sc200:before, .ico_next_sc200:before {transform:scale(2) !important;}
.ico_prev_sc300, .ico_next_sc300 {min-width:calc(1.66rem * 2.5) !important;min-height:calc(2.28rem * 3) !important;}
.ico_prev_sc300:before, .ico_next_sc300:before {transform:scale(3) !important;}

/* ribbon 緞帶 */
.ribbon {width:60px;height:25px;}
.ribbon > * {font-size:inherit !important;}
.ribbon > figure {background-size:100% auto;}
.ribbon > ins {width:100%;top:0px !important;bottom:0px;left:0px !important;right:0px;margin:auto;transform:none !important;font-weight:bold;text-shadow:none;}
/* ribbon 緞帶 - 縮放/位置 */
*[class*="ribbon_sc"], .ribbon_lt, .ribbon_rt {margin:auto !important;}
*[class*="ribbon_sc"] {-webkit-transform:none !important;transform:none !important;}
.ribbon.ribbon_sc50 {width:calc(60px * 0.5);height:calc(25px * 0.5);font-size:0.5rem;}
.ribbon.ribbon_sc75 {width:calc(60px * 0.75);height:calc(25px * 0.75);font-size:0.75rem;}
.ribbon.ribbon_sc125 {width:calc(60px * 1.25);height:calc(25px * 1.25);font-size:1.25rem;}
.ribbon.ribbon_sc150 {width:calc(60px * 1.5);height:calc(25px * 1.5);font-size:1.5rem;}
.ribbon.ribbon_sc175 {width:calc(60px * 1.75);height:calc(25px * 1.75);font-size:1.75rem;}
.ribbon.ribbon_sc200 {width:calc(60px * 2);height:calc(25px * 2);font-size:2rem;}

/* ribbon 緞帶 - 依狀態套用 */
.ribbon.ribbon_reserve > figure {background-image:url(../image/ribbon_reserve.svg);}
.ribbon.ribbon_sold > figure {background-image:url(../image/ribbon_sold.svg);}

/* badge_star 星星徽章 */
.badge_star_gold {background-image:url(../image/badge_star_gold.svg);background-size:auto 100%;}

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

/* itemlist */
/* 2025-12-15: Chiuhua # 251205366, 改良 itemlist2 內置 icon 與 itemlist 線條色 */
.itemlist1 > li {width:calc(100% / 3 - 0.5rem);}
.itemlist1 > li, .itemlist2 > li {min-height:2.25rem;box-shadow:0px 0px 0px 1px hsl(0,0%,60%) inset;border:none !important;border-radius:0px;margin:0.35rem 0.25rem;}
.itemlist1 > li {line-height:2.25rem;}
.itemlist1.itemlist_li_2col li {width:calc(100% / 2 - 0.5rem);}
.itemlist1.itemlist_li_row li {width:calc(100% - 0.5rem);}
.itemlist2 > li > i[class*="_b"] {filter:invert(9%) sepia(90%) saturate(9000%) hue-rotate(358deg) brightness(100%) contrast(15%);}
.item_y {background-color:hsl(0,0%,20%) !important;color:#FFF;}

/* PhotoStyle */
.photo_single > figure {background-color:hsl(0,0%,95%);border-radius:0px;border:0px;}
.photo_single > figure > img {outline:none;}
.photo_single > i:before {background-color:hsl(0,0%,90%);border-radius:0px;border:0px;}
.photo_single > i:after {opacity:0.8;}
.photo_single > i.del_photo:after {background-image:url(../../../shared/image/delete_b_L.png);background-size:45%;}

/* photo_viewer */
.photo_viewer {background-color:hsl(0,0%,95%);border-radius:0px;}
.photo_viewer > ul > li > img {outline:none;}
.photo_viewer > i.ico_prev, .photo_viewer > i.ico_next {background-size:auto 2.25rem;}
.photo_viewer > i.ico_prev {background-image:url(../../../shared/image/caret_l_w_L.png);}
.photo_viewer > i.ico_next {background-image:url(../../../shared/image/caret_r_w_L.png);}
/* photo_viewer - 照片數 */
/* 2022-11-30: Chiuhua # H221000167, HONDA 施祥丰 mail回覆: 不要車輛單頁的播放鍵 */
.photo_viewer > ol {display:none;}
/* photo_viewer_slide - 照片瀏覽清單 */
@media all and (min-width:1024px) {
/* 前後張 */
/* 2022-11-30: Chiuhua # H221000167, HONDA 施祥丰 mail 回覆: 不要車輛單頁的前後頁箭頭, 但依設計稿是 1024px 以上才沒有前後箭頭 */
.photo_viewer > i.ico_prev, .photo_viewer > i.ico_next {display:none;}
}

/* photo_viewer_slide - 照片瀏覽清單 */
*[class*="photo_viewer_slide"] {background-color:#FFF;border-radius:0px;}
*[class*="photo_viewer_slide"] > ul > li {border-radius:0px;background-color:hsl(0,0%,95%);}
*[class*="photo_viewer_slide"] > ul > li:not(.slideOn) {border:0px;}
*[class*="photo_viewer_slide"] > ul > li.slideOn {border-color:hsl(358,80%,44%);}
.photo_viewer_slide_hor {padding:10px 35px;}
.photo_viewer_slide_hor > ul > li {width:calc((37.5rem - 70px) / 3 - 10px);margin:0px 5px;}
.photo_viewer_slide_ver {padding:35px 10px;}
.photo_viewer_slide_ver > ul > li {height:calc((28.12rem - 70px) / 3 - 10px);margin:5px 0px;}

.photo_viewer_slide_hor > i.ico_prev, .photo_viewer_slide_hor > i.ico_next {width:35px;background-size:auto 1.125rem;}
.photo_viewer_slide_hor > i.ico_prev {background-image:url(../image/caret_l_c_pri.svg);}
.photo_viewer_slide_hor > i.ico_next {background-image:url(../image/caret_r_c_pri.svg);}
.photo_viewer_slide_ver > i.ico_prev, .photo_viewer_slide_ver > i.ico_next {height:35px;background-size:1.125rem auto;}
.photo_viewer_slide_ver > i.ico_prev {background-image:url(../image/caret_u_c_pri.svg);}
.photo_viewer_slide_ver > i.ico_next {background-image:url(../image/caret_d_c_pri.svg);}

/* form1 */
/* 2023-06-06: Chiuhua # 230501310, form1 線條改用 box-shadow 寫法, 讓 dd 插入 ferr 等樣式時, 相關高度不用逐一重設 */
/* 2025-09-11: Chiuhua # 250900886, oTToCity form1 改良 */
/* 2025-09-19: Chiuhua # 250900888, oTToCity 各品牌 表格樣式盤整 */
.form1 {}
.form1 *:not(button):not(button *):not(.lbcbx_wrapper):not(.lbcbx_wrapper *):not(.lbrdo_wrapper):not(.lbrdo_wrapper *):not([class*="itemlist"] *) {line-height:2.5rem;}
.form1 dt, .form1 dd, .form1 dt.minh_row1higher, .form1 dd.minh_row1higher {height:2.5rem;min-height:2.5rem;line-height:2.5rem !important;margin:0.468rem 0px;}
.form1 dt {padding-right:0.5rem;}
.form1 dd {border-radius:0.5rem;}
.form1 dd > * {box-shadow:0px 0px 0px 1px hsl(0,0%,60%) inset;}
.form1 dd input:not([type="checkbox"]):not([type="radio"]), .form1 dd select {padding:0px 0.5rem;}
.form1 dd textarea, .form1 dd p[contenteditable], .form1 dd p {padding:0.35em 0.5rem;line-height:1.5em !important;}
.form1 dd *.lbcbx_wrapper, .form1 dd *.lbrdo_wrapper {padding:0.35rem;}
.form1 .dtrow, .form1.form1_row dt {height:1.75rem;min-height:1.75rem;line-height:1.5rem !important;padding-left:3px;}
.form1 .dtrow *, .form1.form1_row dt * {line-height:inherit !important;}
.form1 .dtrow + .ddrow, .form1.form1_row dt + dd {margin-top:0px;}
.form1 dd.minh_row2 {min-height:calc(1.5em * 2 + 0.75em * 2);}
.form1 dd.minh_row3 {min-height:calc(1.5em * 3 + 0.75em * 2);}
.form1 dd.minh_row5 {min-height:calc(1.5em * 5 + 0.75em * 2);}
.form1 span.joinitem {width:calc(100% - 2px);height:calc(100% - 2px);box-sizing:content-box;}
@media all and (max-width:599px) {
.form1 .rwd_dtrow, .form1.rwd_row dt {height:1.75rem;min-height:1.75rem;line-height:1.5rem !important;padding-left:3px;}
.form1.rwd_row dt + dd, .form1 .rwd_dtrow + .rwd_ddrow {margin-top:0px;}
}

/* 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(358,85%,44%) inset !important;}

/* form1 - dt, dd 分 2 欄 */
/* 2022-11-30: Chiuhua # H221000167, 改良 form 分欄左右 gap 單位為 rem, 可省掉使用 px 單位而延伸的 RWD 語法 */
.form1 .dt2col_37 > *:nth-child(1), .form1 .dd2col_37 > *:nth-child(1) {width:calc(30% - 0.3rem);}
.form1 .dt2col_37 > *:nth-last-child(1), .form1 .dd2col_37 > *:nth-last-child(1) {width:calc(70% - 0.3rem);}
.form1 .dt2col_46 > *:nth-child(1), .form1 .dd2col_46 > *:nth-child(1) {width:calc(40% - 0.3rem);}
.form1 .dt2col_46 > *:nth-last-child(1), .form1 .dd2col_46 > *:nth-last-child(1) {width:calc(60% - 0.3rem);}
.form1 .dt2col_55 > *:nth-child(1), .form1 .dt2col_55 > *:nth-last-child(1),
.form1 .dd2col_55 > *:nth-child(1), .form1 .dd2col_55 > *:nth-last-child(1) {width:calc(50% - 0.3rem);}
.form1 .dt2col_64 > *:nth-child(1), .form1 .dd2col_64 > *:nth-child(1) {width:calc(60% - 0.3rem);}
.form1 .dt2col_64 > *:nth-last-child(1), .form1 .dd2col_64 > *:nth-last-child(1) {width:calc(40% - 0.3rem);}
.form1 .dt2col_73 > *:nth-child(1), .form1 .dd2col_73 > *:nth-child(1) {width:calc(70% - 0.3rem);}
.form1 .dt2col_73 > *:nth-last-child(1), .form1 .dd2col_73 > *:nth-last-child(1) {width:calc(30% - 0.3rem);}
.form1 .dt2col_82 > *:nth-child(1), .form1 .dd2col_82 > *:nth-child(1) {width:calc(80% - 0.3rem);}
.form1 .dt2col_82 > *:nth-last-child(1), .form1 .dd2col_82 > *:nth-last-child(1) {width:calc(20% - 0.3rem);}

/* dd3col 分 3 欄 */
.form1 .dd3col_333 > *:not(ins) {width:calc((100% - 1.2rem) / 3) !important;width:calc((99.9% - 1.2rem) / 3)\0 !important;margin-left:0.6rem;}
.form1 dd[class*="dd3col_333 ddins_"] > *:not(ins) {width:calc((100% - 1.8rem * 2) / 3) !important;width:calc((99.9% - 1.8rem * 2) / 3)\0 !important;}

/* 加分隔號, 加分隔字 - 1 字 */
.dtins_symbol > ins, .dtins_word_1 > ins, .ddins_symbol > ins, .ddins_word_1 > ins {width:1.8rem !important;}
.dtins_symbol.dt2col_37 > *:nth-child(1), .dtins_word_1.dt2col_37 > *:nth-child(1),
.ddins_symbol.dd2col_37 > *:nth-child(1), .ddins_word_1.dd2col_37 > *:nth-child(1) {width:calc(30% - 0.9rem);}
.dtins_symbol.dt2col_37 > *:nth-last-child(1), .dtins_word_1.dt2col_37 > *:nth-last-child(1),
.ddins_symbol.dd2col_37 > *:nth-last-child(1), .ddins_word_1.dd2col_37 > *:nth-last-child(1) {width:calc(70% - 0.9rem);}
.dtins_symbol.dt2col_46 > *:nth-child(1), .dtins_word_1.dt2col_46 > *:nth-child(1),
.ddins_symbol.dd2col_46 > *:nth-child(1), .ddins_word_1.dd2col_46 > *:nth-child(1) {width:calc(40% - 0.9rem);}
.dtins_symbol.dt2col_46 > *:nth-last-child(1), .dtins_word_1.dt2col_46 > *:nth-last-child(1),
.ddins_symbol.dd2col_46 > *:nth-last-child(1), .ddins_word_1.dd2col_46 > *:nth-last-child(1) {width:calc(60% - 0.9rem);}
.dtins_symbol.dt2col_55 > *:nth-child(1), .dtins_word_1.dt2col_55 > *:nth-child(1),
.dtins_symbol.dt2col_55 > *:nth-last-child(1), .dtins_word_1.dt2col_55 > *:nth-last-child(1),
.ddins_symbol.dd2col_55 > *:nth-child(1), .ddins_word_1.dd2col_55 > *:nth-child(1),
.ddins_symbol.dd2col_55 > *:nth-last-child(1), .ddins_word_1.dd2col_55 > *:nth-last-child(1) {width:calc(50% - 0.9rem);}
.dtins_symbol.dt2col_64 > *:nth-child(1), .dtins_word_1.dt2col_64 > *:nth-child(1),
.ddins_symbol.dd2col_64 > *:nth-child(1), .ddins_word_1.dd2col_64 > *:nth-child(1) {width:calc(60% - 0.9rem);}
.dtins_symbol.dt2col_64 > *:nth-last-child(1), .dtins_word_1.dt2col_64 > *:nth-last-child(1),
.ddins_symbol.dd2col_64 > *:nth-last-child(1), .ddins_word_1.dd2col_64 > *:nth-last-child(1) {width:calc(40% - 0.9rem);}
.dtins_symbol.dt2col_73 > *:nth-child(1), .dtins_word_1.dt2col_73 > *:nth-child(1),
.ddins_symbol.dd2col_73 > *:nth-child(1), .ddins_word_1.dd2col_73 > *:nth-child(1) {width:calc(70% - 0.9rem);}
.dtins_symbol.dt2col_73 > *:nth-last-child(1), .dtins_word_1.dt2col_73 > *:nth-last-child(1),
.ddins_symbol.dd2col_73 > *:nth-last-child(1), .ddins_word_1.dd2col_73 > *:nth-last-child(1) {width:calc(30% - 0.9rem);}
.dtins_symbol.dt2col_82 > *:nth-child(1), .dtins_word_1.dt2col_82 > *:nth-child(1),
.ddins_symbol.dd2col_82 > *:nth-child(1), .ddins_word_1.dd2col_82 > *:nth-child(1) {width:calc(80% - 0.9rem);}
.dtins_symbol.dt2col_82 > *:nth-last-child(1), .dtins_word_1.dt2col_82 > *:nth-last-child(1),
.ddins_symbol.dd2col_82 > *:nth-last-child(1), .ddins_word_1.dd2col_82 > *:nth-last-child(1) {width:calc(20% - 0.9rem);}

/* 加分隔字 - 2 字 */
.dtins_word_2 > ins, .ddins_word_2 > ins {width:2.6rem !important;}
.dtins_word_2.dt2col_37 > *:nth-child(1), .ddins_word_2.dd2col_37 > *:nth-child(1) {width:calc(30% - 1.3rem);}
.dtins_word_2.dt2col_37 > *:nth-last-child(1), .ddins_word_2.dd2col_37 > *:nth-last-child(1) {width:calc(70% - 1.3rem);}
.dtins_word_2.dt2col_46 > *:nth-child(1), .ddins_word_2.dd2col_46 > *:nth-child(1) {width:calc(40% - 1.3rem);}
.dtins_word_2.dt2col_46 > *:nth-last-child(1), .ddins_word_2.dd2col_46 > *:nth-last-child(1) {width:calc(60% - 1.3rem);}
.dtins_word_2.dt2col_55 > *:nth-child(1), .dtins_word_2.dt2col_55 > *:nth-last-child(1),
.ddins_word_2.dd2col_55 > *:nth-child(1), .ddins_word_2.dd2col_55 > *:nth-last-child(1) {width:calc(50% - 1.3rem);}
.dtins_word_2.dt2col_64 > *:nth-child(1), .ddins_word_2.dd2col_64 > *:nth-child(1) {width:calc(60% - 1.3rem);}
.dtins_word_2.dt2col_64 > *:nth-last-child(1) , .ddins_word_2.dd2col_64 > *:nth-last-child(1) {width:calc(40% - 1.3rem);}
.dtins_word_2.dt2col_73 > *:nth-child(1), .ddins_word_2.dd2col_73 > *:nth-child(1) {width:calc(70% - 1.3rem);}
.dtins_word_2.dt2col_73 > *:nth-last-child(1), .ddins_word_2.dd2col_73 > *:nth-last-child(1) {width:calc(30% - 1.3rem);}
.dtins_word_2.dt2col_82 > *:nth-child(1), .ddins_word_2.dd2col_82 > *:nth-child(1) {width:calc(80% - 1.3rem);}
.dtins_word_2.dt2col_82 > *:nth-last-child(1), .ddins_word_2.dd2col_82 > *:nth-last-child(1) {width:calc(20% - 1.3rem);}

/* 加分隔字 - 3 字 */
.dtins_word_3 > ins, .ddins_word_3 > ins {width:3.6rem !important;}
.dtins_word_3.dt2col_37 > *:nth-child(1), .ddins_word_3.dd2col_37 > *:nth-child(1) {width:calc(30% - 1.8rem);}
.dtins_word_3.dt2col_37 > *:nth-last-child(1), .ddins_word_3.dd2col_37 > *:nth-last-child(1) {width:calc(70% - 1.8rem);}
.dtins_word_3.dt2col_46 > *:nth-child(1), .ddins_word_3.dd2col_46 > *:nth-child(1) {width:calc(40% - 1.8rem);}
.dtins_word_3.dt2col_46 > *:nth-last-child(1), .ddins_word_3.dd2col_46 > *:nth-last-child(1) {width:calc(60% - 1.8rem);}
.dtins_word_3.dt2col_55 > *:nth-child(1), .dtins_word_3.dt2col_55 > *:nth-last-child(1),
.ddins_word_3.dd2col_55 > *:nth-child(1), .ddins_word_3.dd2col_55 > *:nth-last-child(1) {width:calc(50% - 1.8rem);}
.dtins_word_3.dt2col_64 > *:nth-child(1), .ddins_word_3.dd2col_64 > *:nth-child(1) {width:calc(60% - 1.8rem);}
.dtins_word_3.dt2col_64 > *:nth-last-child(1), .ddins_word_3.dd2col_64 > *:nth-last-child(1) {width:calc(40% - 1.8rem);}
.dtins_word_3.dt2col_73 > *:nth-child(1), .ddins_word_3.dd2col_73 > *:nth-child(1) {width:calc(70% - 1.8rem);}
.dtins_word_3.dt2col_73 > *:nth-last-child(1), .ddins_word_3.dd2col_73 > *:nth-last-child(1) {width:calc(30% - 1.8rem);}
.dtins_word_3.dt2col_82 > *:nth-child(1), .ddins_word_3.dd2col_82 > *:nth-child(1) {width:calc(80% - 1.8rem);}
.dtins_word_3.dt2col_82 > *:nth-last-child(1), .ddins_word_3.dd2col_82 > *:nth-last-child(1) {width:calc(20% - 1.8rem);}

/* form1 - 電話,地址樣式 */
/* 電話 */
.form1 dd.ddtel > input:nth-of-type(1) {width:2.8em;}
.form1 dd.ddtel > input:nth-of-type(2) {width:calc(100% - 2.8em - 3.2em - 2.2em + 1px);margin-left:-1px;}
.form1 dd.ddtel > input:nth-of-type(3) {width:calc(3.2em + 1px);margin-left:-1px;}
.form1 dd.ddtel > i {width:calc(2.2em + 1px);margin-left:-1px;}
/* .ddtel_iconone, 電話欄位不需 icon 時的加套樣式 */
.form1 dd.ddtel.ddtel_iconone > input:nth-of-type(2) {width:calc(100% - 2.8em - 3.2em);}
/* 地址 */
.form1 .ddaddr > *:nth-child(1), .form1 .ddaddr > *:nth-child(2) {margin-bottom:0px;}
.form1 .ddaddr > *:nth-child(1) {width:3.9em;}
.form1 .ddaddr > *:nth-child(2) {width:calc(100% - 3.9em + 1px);margin-left:-1px;}
.form1 .ddaddr > *:nth-child(3) {margin-top:-1px;}
.form1 .ddaddr > textarea {min-height:2.5rem !important;}

/* form1 - dd 性別欄位 */
/* 2023-01-07: Chiuhua # 230100301, form1 性別欄位自主改良, 去除 gap 及接縫餘線 (改良 form1 有線條時樣式太複雜) */
.form1 .dd2col_gender > *:nth-child(1) {width:calc(100% - 7.5rem + 1px);}
.form1 .dd2col_gender > *:nth-last-child(1) {margin-left:-1px;}

/* form1_psi_wrapper 個人資料區塊 (psi = personal info) */
/* 2023-01-09: Chiuhua + 230100301, 新增 .form1_psi_wrapper 個人資料區塊樣式差異 */
.form1_psi_wrapper > .form1 dt {width:8rem;}
.form1_psi_wrapper > .form1 dd {width:calc(100% - 8rem);}
.form1_psi_wrapper .form1 .dd2col_gender > *:nth-last-child(1), .form1_psi_wrapper .form1 dd.ddtel > input:nth-of-type(2) {width:calc(100% - 4rem + 1px);}

/* 圖形驗證碼 */
.passcode_wrapper {}
.passcode_wrapper > * {}
.passcode_wrapper .btn_passcode {background-color:hsl(0,0%,90%) !important;}
.passcode_wrapper .btn_rect_wrap1 button {margin-right:0px;}
.passcode_wrapper dl > dd > *:not(:nth-child(1)) {border:0px !important;}
.passcode_wrapper .form1.form_passcode > dd > *:not(button) {width:calc(2.5rem * 2.6);}
@media all and (min-width:600px) {
.passcode_wrapper {flex-direction:row;flex-wrap:wrap;justify-content:flex-end;}
.passcode_wrapper .form1.form_passcode {margin-right:20px;}
}
@media all and (max-width:599px) {
.passcode_wrapper {align-items:flex-end;}
}

/* 櫥窗 */
.pdsc_category_wrapper > li {min-width:15rem;min-height:9.3rem;margin:10px;border:0px;box-shadow:0px 0px 20px 2px hsla(0,0%,0%,0.15);border-radius:0.75rem;}
.pdsc_category_wrapper > li:not(.liDie):hover, .pdsc_category_wrapper > li.liOn {transition:box-shadow 0.2s;}
.pdsc_category_wrapper > li:not(.liDie):hover {box-shadow:0px 0px 20px 2px hsla(0,0%,0%,0.45);}
.pdsc_category_wrapper > li.liOn {box-shadow:0px 0px 30px 3px hsla(0,0%,0%,0.5);}
.pdsc_category_wrapper > li.liOn:hover {box-shadow:0px 0px 30px 3px hsla(0,0%,0%,0.85);}
.pdsc_category_wrapper > li.liDie > label {}
.pdsc_category_wrapper > li > label > h3 {font-weight:bold;font-style:italic;padding:0.75em 0.5em 0.5em 2.2em;}
.pdsc_category_wrapper > li > label > h3 > strong {font-size:1.2rem;}
.pdsc_category_wrapper > li > label > h3 > ins {vertical-align:text-bottom;}
.pdsc_category_wrapper > li > label.lbcbx:before {top:0.25em;left:0.45em;}
.pdsc_category_wrapper > li > label.lbcbx > input {margin-top:0.45em;margin-left:-1.3em;}
.pdsc_category_wrapper > li > figure > img {max-width:85%;max-height:85%;}
.pdsc_category_wrapper.vehmodel > li {margin:15px;width:calc(100% / 4 - 30px);min-width:unset;}
.pdsc_category_wrapper.vehmodel > li.liOn {}
@media all and (max-width:1279px) {
.pdsc_category_wrapper.vehmodel > li {width:calc(100% / 3 - 30px);}
}
@media all and (max-width:1023px) {
.pdsc_category_wrapper.vehmodel > li {width:calc(100% / 2 - 30px);}
}
@media all and (min-width:600px) {
.pdsc_category_wrapper.vehmodel > li {min-height:13rem;}
}
@media all and (max-width:599px) {
.pdsc_category_wrapper.vehmodel > li {margin:10px;width:calc(100% / 2 - 20px);}
}

/* jquery 開窗樣式覆寫 */
.ui-widget-overlay {background-color:hsla(0,0%,100%,0.7);}
.ui-dialog, .ui-datepicker {padding:5px 10px;border-radius:30px;box-shadow:0px 0px 20px 2px hsla(0,0%,0%,0.35);}
.ui-widget-header, .ui-dialog .ui-dialog-buttonpane, .ui-widget-content, .ui-datepicker .ui-datepicker-header, .ui-datepicker .ui-datepicker-buttonpane {background-color:#FFF;color:inherit;}
.ui-dialog .ui-dialog-content {}
.ui-dialog .ui-dialog-titlebar {font-size:1.375rem;}
.ui-dialog .ui-dialog-titlebar *:not(button) {font-size:inherit;}
.ui-dialog .ui-dialog-titlebar .ui-button {border-radius:0px;background-size:75% auto;opacity:0.8;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {background-image:url(../../../shared/image/delete_b_L.png);}
.ui-datepicker .ui-datepicker-title {line-height:2.25rem;border-radius:0px;box-shadow:0px 0px 0px 1px hsl(0,0%,20%) inset;padding:0px;}
.ui-dialog .ui-dialog-buttonpane, .ui-datepicker .ui-datepicker-buttonpane {height:auto;padding-top:15px;padding-bottom:15px;border:none;position:relative;}
.ui-dialog .ui-dialog-buttonpane:before/* , .ui-datepicker .ui-datepicker-buttonpane:before */ {content:'';position:absolute;left:0px;right:0px;top:0px;bottom:auto;margin:auto;width:calc(100% - 10px - 10px);height:1px;background-color:hsl(0,0%,20%);}
.ui-dialog .ui-dialog-buttonpane button, .ui-datepicker .ui-datepicker-buttonpane button {flex:1;line-height:2.25rem;border-radius:0.375em;background-color:hsl(0,0%,20%);color:#FFF;box-shadow:none;}
.ui-dialog .ui-dialog-buttonpane button:hover, .ui-datepicker .ui-datepicker-buttonpane button:hover {background-color:hsl(358,85%,44%);}

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

/*=== template 樣版樣式 - 商店差異化 Start ===*/
/* 商店切版差異 */
.bd_wrapper {background:#FFF;}
.pg_wrapper .banner_wrapper {height:100px;}
.pg_wrapper .main_wrapper {padding-top:100px;min-height:calc(100vh - 133px)\0;}
.pg_wrapper .ft_wrapper {min-height:133px;height:133px\0;}
@media all and (max-width:1023px) {
.pg_wrapper .banner_wrapper {height:60px;}
.pg_wrapper .main_wrapper {padding-top:60px;}
}

/* banner_wrapper 樣式 */
.banner_wrapper {}
.banner_wrapper:after {top:0px;bottom:auto;height:4px;background-color:hsl(358,80%,44%);}
.banner_wrapper .ban_logo {}
.banner_wrapper .ban_logo > * {margin-top:0px;}
.banner_wrapper .ban_logo .logo_brand {height:2.25rem;margin-right:13px;}
.banner_wrapper .ban_logo .logo_hcuc {height:1.925rem;}
.banner_wrapper .ban_menu {font-size:1.03rem;vertical-align:middle;}
.banner_wrapper .ban_menu * {font-size:inherit;}
.banner_wrapper .ban_menu ul {height:100%;}
.banner_wrapper .ban_menu ul > li {padding:0px 0.85em;}
.banner_wrapper .ban_menu ul > li.li_track {color:hsl(358,80%,44%);}
@media all and (min-width:1280px) {
.banner_wrapper .ban_logo {padding-left:40px;}
.banner_wrapper .ban_menu {font-size:1.1rem;padding-right:40px;}
}
@media all and (max-width:1279px) {
.banner_wrapper .ban_logo {padding-left:20px;}
.banner_wrapper .ban_logo .logo_brand {height:2rem;}
.banner_wrapper .ban_logo .logo_hcuc {height:1.75rem;}
}
@media all and (min-width:1024px) {
/* .banner_wrapper > * {padding-top:30px;} 2022-11-14 前設計稿的 gap */
.banner_wrapper .ban_logo {padding-top:45px;}
.banner_wrapper .ban_menu {padding-top:55px;}
/* banner menu_on */
/* 2025-11-21: Chiuhua # 251101828, 改良 modern banner - Portal 及所有品牌 (by Ho) */
.banner_wrapper .ban_menu li.menu_on:before {bottom:1px;height:0.11rem;background-color:hsl(358,80%,44%);}
.banner_wrapper .ban_menu li.menu_on:not([class*="li_track"]) {color:inherit;}
}
@media all and (max-width:1023px) {
.banner_wrapper {border-bottom:1px solid hsl(0,0%,80%);}
.banner_wrapper:after {height:2px;}
.banner_wrapper .ban_logo {text-align:left;}
.banner_wrapper .hamb_icon {width:2.25rem;}
.banner_wrapper .ban_menu {width:auto;}
}
@media all and (max-width:800px) {
.banner_wrapper .ban_logo .logo_brand {height:1.275rem;margin-right:6px;}
.banner_wrapper .ban_logo .logo_hcuc {height:1rem;}
}
@media all and (max-width:599px) {
.banner_wrapper .ban_logo {padding-left:15px;}
}

/* 漢堡下拉選單樣式 - 商店差異化 */
/* 2025-01-16: Chiuhua # 250107863, 漢堡下拉選單樣式模組從 modern 整理至共用 wrapper 並做樣版及品牌差異 (STLA onlineservice 延伸改良) */
/* 2026-01-14: Chiuhua # 260101093, 漢堡下拉新增 :active 微互動樣式, 修正 HONDA :hover 顏色問題 */
.drop_wrapper {border-top:1px solid hsla(0,0%,0%,0.2);}
.drop_list {background-color:#FFF;color:inherit;}
.drop_list > li:not(:nth-last-of-type(1)) {border-bottom:1px solid hsla(0,0%,0%,0.1);}
.drop_list > li:not(:hover), .drop_list > li:not(:active) {background-color:transparent;}
.drop_list > li:hover, .drop_list > li:active {background-color:hsl(358,80%,44%);color:#FFF;}
.drop_list > li > i {display:none;}
.drop_list > li > span {max-width:90% !important;text-align:center;}
.drop_list > li > span:after {display:none;}
@media all and (max-width:1023px) {
.drop_list_show > .drop_list_main {float:right;}
}
@media all and (min-width:600px) {
.drop_list {border-width:0px 0px 1px 1px;border-bottom-left-radius:0.75em;border-bottom-right-radius:0px;}
}
@media all and (max-width:599px) {
.drop_list {border-bottom-width:1px;}
}
/* main_wrapper 樣式 */
.main_wrapper .main_bodyscroll {padding-top:62px;}

/* ft_wrapper 樣式 */
.ft_wrapper {background:hsl(0,0%,95%);color:inherit;padding-bottom:4px;}
.ft_wrapper:before {top:auto;bottom:0px;height:4px;background-color:hsl(358,80%,44%);}
.ft_wrapper > * {}
.ft_wrapper .statement {font-size:1.1rem;}
.ft_wrapper .statement * {font-size:inherit;}
.ft_wrapper .statement > * {margin:2px 0px;}
.ft_wrapper .statement > small {font-size:0.9375rem;}
.ft_wrapper .sharelink {flex-direction:row;align-items:center;}
.ft_wrapper .sharelink > * {display:inline-flex;align-items:center;}
.ft_wrapper .sharelink > *:not(:first-child) {margin-left:30px;}
.ft_wrapper .sharelink li a {padding:0px 7px;}
.ft_wrapper .sharelink li:first-child a {padding-left:0px;}
.ft_wrapper .sharelink ul:last-child li:first-child a {min-width:80px\0;}
.ft_wrapper .sharelink *[src*="logo_HONDA_word"] {height:0.55rem;}
.ft_wrapper .sharelink *[src*="logo_HONDAMOTOR"] {height:2.25rem;}
@media all and (min-width:1024px) {
.ft_wrapper {flex-direction:row;justify-content:space-between;align-items:center;}
.ft_wrapper > * {}
.ft_wrapper > *:first-child {padding-left:55px;width:70%\0;}
.ft_wrapper > *:last-child {padding-right:30px;width:30%\0;text-align:right\0;white-space:nowrap\0;}
}
@media all and (max-width:1023px) {
.ft_wrapper {flex-direction:column-reverse;align-items:flex-start;}
}
@media all and (max-width:599px) {
.ft_wrapper .statement {margin-bottom:10px;}
.ft_wrapper .statement > * {margin:5px 0px;}
.ft_wrapper .sharelink {margin-top:10px;margin-bottom:5px;}
}

/* 頁面主題圖 - 商店差異化 */
/* 2023-08-22: Chiuhua # 230809782, 調整 ban_pic 商店差異樣式 - hondahcuc 無背景圖, (因 modern 新增 ban_pic_news 預設主題圖) */
.ban_pic {height:auto;background-color:hsl(0,0%,95%);background-image:none !important;background-size:unset !important;color:inherit;border-bottom:0px;}
.ban_pic img {width:100%;height:auto;}
.ban_pic figcaption {position:absolute;}
.ban_pic.ban_pic_home figcaption {width:27%;left:13%;top:27%;}
.ban_pic.ban_pic_cars figcaption, .ban_pic.ban_pic_news figcaption {width:13%;left:3%;bottom:15%;}
.ban_pic.ban_pic_aboutus figcaption {width:20%;left:13%;top:22%;}
.ban_pic.ban_pic_news:before {display:none;}
@media all and (min-width:600px) {
.ban_pic img[src*="_M"] {display:none;}
}
@media all and (max-width:599px) {
.ban_pic img[src*="_L"] {display:none;}
}

/* main_wrapper 樣式 */
/* 2023-06-26: Chiuhua + 230601756, 新增 main_wrapper 品牌差異樣式 */
.main_wrapper {background-color:#FFF;}

/* main_title_wrap */
.main_title_wrap {min-height:60px;background-image:none;background-color:hsl(0,0%,95%);color:inherit;}
.main_title_wrap:before {display:none;}
.main_title_wrap, .main_title_wrap * {text-shadow:none !important;}
.main_title_wrap .titleinfo {font-size:1.15rem !important;padding-left:20px;}
.main_title_wrap .titleinfo * {font-size:inherit !important;}
.main_title_wrap .titlebtn .btn_rect_intitleright {margin-right:20px;}
.main_title_wrap .filter *[class*="mark_tri_r"]:after {border-left-color:hsl(0,0%,20%);}
.main_title_wrap .filter *[class*="i_caret_"] {opacity:0.8;background-size:auto 1em;}
.main_title_wrap .filter *[class*="i_caret_l"] {background-image:url(../../../shared/image/caret_l_b_L.png);}
.main_title_wrap .filter *[class*="i_caret_r"] {background-image:url(../../../shared/image/caret_r_b_L.png);}
.main_title_wrap.fsmall2 *:not(dt):not(dt *) {font-size:1rem !important;}
.main_title_wrap.fsmall2 .filter_btn > .btn_rect_wrap1 {font-size:0px !important;}

/* shopwindow_list */
/* 2023-08-08: Chiuhua # 230601756, 新增 .shopwindow_list 樣板櫥窗的 :hover 互動樣式 (套用樣版的品牌一併優化) */
.shopwindow_list li > div:hover {box-shadow:0px 0px 20px 2px hsla(0,0%,0%,0.45);}

/* 買車, Ys + */
/* 2025-09-22: Chiuhua # 250900772, oTToCity 二手車篩選窗改良 */
@media all and (max-width:800px) {
.window_filter_wrap > h3 {min-height:62px;}
.window_filter_wrap > h3 ~ * {top:65px;}
}
@media all and (max-height:700px) {
.window_filter_wrap > * {padding-top:5px;padding-bottom:5px;}
.window_filter_wrap > h3, .main_title_wrap {min-height:50px;}
.window_filter_wrap > h3 ~ * {top:50px;}
.main_wrapper .main_bodyscroll {padding-top:50px;}
}

/* 2023-01-10: Ran  # 賣車 */
/* 賣車 > 各區塊左右留白 */
.ucarsell_wrap.main_wrapper {padding-left:0px;padding-right:0px;}
.ucarsell_wrap.main_wrapper > *:not(.main_title_wrap) {padding-left:7% !important;padding-right:7% !important;}

/* 賣車 > 賣車標題 */
.ucarsell_wrap.main_wrapper > .main_title_wrap {margin-top:0px !important /* 需特別指定 .ucarsell_wrap.main_wrapper才能蓋掉公版樣式not的權重 */;}

/* 賣車 > 標題 [優質鑑價服務、預約估車] */
.ucarsell_wrap h3.flarge2 {position:relative;padding-left:0.5em;font-weight:bold;}
.ucarsell_wrap h3.flarge2::before {content:'';width:3px;height:1em;margin:auto;position:absolute;top:0px;bottom:0px;left:0px;background-color:hsl(358,80%,44%);}

/* 賣車 > 預約估車 > 表格 [個人資料、車輛資料] */
.ucarsell_form {border-bottom:1px solid hsl(0,0%,80%) !important;border-radius:0px !important;padding:1em 0px !important;margin: 0px !important;}
.ucarsell_form.bghighlight_light3 {background-color:transparent !important;}
/* 2023-01-12: Ran # H221000167, 和 Chiuhua 確認該處不用和 mockup 一樣隱藏邊線避免看起來怪怪的 */
/*.ucarsell_form .form1 > dd > .lbcbx_wrapper,
.ucarsell_form .form1 > dd > .lbrdo_wrapper {border:none !important;}*/
.ucarsell_form > h4 {font-size:1.15rem !important;font-weight:bold;border-bottom:none !important;}

/* 賣車 > 預約估車 > 表格 [車輛資料] > 配備清單 */
/* 2023-03-06: Ran # 230228229, 移除外框線 (muckup沒有畫), 增加不同配備間的底線增加辨識度 */
/* 2025-09-15: Chiuhua # 250900886, oTToCity form1 改良 - ucarsell_list 配備表格樣式語法及畫面 */
ul.ucarsell_list {background-color:hsl(0,0%,95%) !important;box-shadow:none;}
.ucarsell_list > li > label.falert {color:inherit !important;-webkit-text-fill-color:inherit !important;text-shadow:none;}

/* 2023-01-10: Sharon  # 車輛比較 */
.compare_filed dl > * {background-color:hsl(0,0%,95%);/* bg24 */}
.compare_filed dl dt:not(.photo), .compare_filed dl dt:not(.photo) *,
.compare_list dl dt:not(.photo), .compare_list dl dt:not(.photo) * {background-color:hsl(0,0%,90%) !important;color:inherit !important;/* bg23 */}
/*=== template 樣版樣式 - 商店差異化 End ==*/

/*=== oTToCity 共用樣式 加 template 樣版樣式 - 商店差異化 Start ===*/

/* 新聞 htm 在 template 共用, 但 HONDA 的 Banner 圖片較高 */
.main_wrapper .ban_pic_news ~ .emptymsg {margin:5em auto;}

/*=== oTToCity 共用樣式 加 template 樣版樣式 - 商店差異化 End ===*/

/*=== 商店自有樣式 Start ===*/
/* ucarsell */
.ucarsell_piclist {display:inline-flex;width:100%;margin:10px 0px;gap:5%;}
.ucarsell_piclist > figure {flex:1;background-color:#FFF;border-radius:1.25rem;box-shadow:0px 0px 18px 2px hsla(0,0%,0%,0.3);text-align:center;}
.ucarsell_piclist > figure:not(:nth-last-child(1)) {margin-right:5%\0;}
.ucarsell_piclist > figure > img {max-width:70%;margin:2.5rem 0.5rem;}

@media all and (min-width:1025px) {
.ucarsell_piclist > figure > img {margin-top:4.3rem;margin-bottom:4.3rem;}
}
@media all and (max-width:599px) {
.ucarsell_piclist {flex-direction:column;width:90%;margin-left:5%;margin-right:5%;gap:2.5rem;}
}
/*=== 商店自有樣式 End ===*/