/*! * 鑑星閣 內頁樣式 jx-pages.css v2.10.4 * ⚠ 外觀已定稿（業主要求）：套版時請勿修改本檔，也不要另寫 CSS／JS 覆蓋或改寫 .jx 元件；需要調整請向業主提出，由設計端更新本檔並升版本號（以整支檔案替換） * --------------------------------------------------------------- * 需搭配 jx-core.css（色彩、字體、Header、Footer、卡片等共用元件）一起載入。 * 命名規則同 jx-core.css：class 一律以 jx- 開頭，不影響網站其他元素； * 色彩／字級變數定義在 .jx 根元素上，元件必須放在 class="jx" 的區塊內才有正確的顏色與字級。 * * 1. 頁首（麵包屑、標題、子選單） * 2. 表單元件（輸入框、下拉、核取方塊、欄位） * 3. 徽章、提示、標籤 * 4. 列表版面（篩選側欄、工具列、分頁） * 5. 活動卡片（活動總覽） * 6.–7. （專場內頁、拍品內頁已移至 jx-auction.css） * 8. 表格 * 9. 內文排版（規則、關於） * 10. 委託拍賣 * 11. 關於我們 * 12. 拍賣規則 * 13. 聯繫我們 * 14. 登入／註冊 * 15. （會員中心已移至 jx-member.css） * 16. 彈出視窗（含報名競投・保證金視窗 .jx-register） * 17. 上傳、轉出帳號末五碼、匯款資訊、複製、金額明細、選項卡片（報名視窗、會員中心明細、委託流程共用） * 18. RWD */ /* ================================================================= 1. 頁首 ================================================================= */ .jx-page-head{padding:28px 0 0} .jx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--jx-fs-2xs);color:var(--jx-muted)} .jx-crumbs a{transition:color .2s} .jx-crumbs a:hover{color:var(--jx-gold)} .jx-crumbs li{display:flex;align-items:center;gap:6px} .jx-crumbs li+li::before{content:"/";color:#c9c3bc} .jx-crumbs [aria-current]{color:var(--jx-text)} .jx-page-title{margin-top:10px;font-family:var(--jx-serif);font-size:var(--jx-fs-section);font-weight:600;line-height:1.3;letter-spacing:.08em;color:var(--jx-ink); text-spacing-trim:trim-start} /* 行首的【「只佔半格，標題左緣與麵包屑對齊（Chrome 123+，其他瀏覽器維持原樣） */ .jx-page-lead{margin-top:8px;max-width:640px;font-size:var(--jx-fs-body);line-height:1.8;color:var(--jx-sub)} .jx-page-head__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px} /* 內頁區塊標題（H2）字級：28（≥1200）／26（1024–1199）／24（768–1023）／21（<768），襯線 600 用法：

，或在元件樣式寫 font-size:var(--jx-fs-h2) 首頁的 .jx-section__title 不加 jx-h2（維持設計稿 01 字級）；會員中心卡片標題不是區塊標題，不套用 */ .jx{--jx-fs-h2:28px} .jx .jx-h2{font-family:var(--jx-serif);font-size:var(--jx-fs-h2);font-weight:600} /* 頁內搜尋框（搜尋結果頁）：外觀同表單欄位（44px、--jx-line-strong 邊框、2px 圓角），不沿用 Header 搜尋框 */ .jx-search--page{flex:0 1 340px;max-width:340px} .jx-search--page .jx-search__input{height:44px;padding-left:40px;font-size:var(--jx-fs-sm);border-color:var(--jx-line-strong);border-radius:var(--jx-radius);transition:border-color .2s,box-shadow .2s} .jx-search--page .jx-search__input:hover{border-color:#bfb7ae} .jx .jx-search--page .jx-search__input:focus{border-color:var(--jx-gold);box-shadow:0 0 0 3px rgba(154,106,68,.12)} .jx-search--page .jx-search__btn{width:40px} /* 子選單（頁面間切換，例如：本期／即將登場／經典回顧） 頁籤與捲動區左右各 4px 內距＋負邊界：文字位置不變，鍵盤聚焦框畫在內距裡，不壓到文字、不被捲動區裁掉； 下方分隔線改用背景畫（扣掉左右 4px），與上方標題、下方內容左右切齊 */ .jx-subnav{display:flex;gap:36px;margin-top:22px;padding:0 4px 1px;margin-inline:-4px;overflow-x:auto;scrollbar-width:none; background:linear-gradient(var(--jx-line),var(--jx-line)) no-repeat 4px 100%/calc(100% - 8px) 1px} .jx-subnav::-webkit-scrollbar{display:none} .jx-subnav a{position:relative;flex-shrink:0;padding:10px 4px 12px;margin-inline:-4px;font-size:var(--jx-fs-sm);color:var(--jx-sub);letter-spacing:.04em;transition:color .2s} .jx-subnav a::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:2px;background:var(--jx-gold);transform:scaleX(0);transition:transform .3s var(--jx-ease)} /* 底線與文字同寬（左右對稱，不超出版面左緣） */ /* 目前頁籤：aria-current="page"；在頁籤底下的子頁（明細頁、委託流程）用 aria-current="true"（目前頁面已由麵包屑標示，不重複宣告 page） */ .jx-subnav a:hover,.jx-subnav a[aria-current]:not([aria-current="false"]){color:var(--jx-gold)} .jx-subnav a[aria-current]:not([aria-current="false"])::after{transform:scaleX(1)} .jx-subnav__count{margin-left:6px;font-size:var(--jx-fs-2xs);color:var(--jx-muted)} /* 可橫向捲動的區塊（子選單、表格、規則目錄）：鍵盤聚焦框改畫在元素內側，不被捲動區裁掉 */ .jx .jx-subnav :focus-visible,.jx .jx-table-wrap :focus-visible,.jx .jx-toc :focus-visible{outline-offset:-2px} /* ================================================================= 2. 表單元件 ================================================================= */ .jx-field{display:flex;flex-direction:column;gap:6px} .jx-field__label{font-size:var(--jx-fs-xs);font-weight:500;color:var(--jx-ink)} .jx-field__label .jx-req{margin-left:2px;color:var(--jx-danger)} .jx-field__hint{font-size:var(--jx-fs-2xs);color:var(--jx-muted)} .jx-field__hint .jx-req{color:var(--jx-danger)} /* 欄位錯誤訊息（業主 2026-10-02：送出時所有不合格欄位一起標紅、欄位下方顯示原因；jx.js form[data-jx-validate] 自動插入 ，改好即移除） 紅色小字（13px，手機 12px）、與上方欄位距離 6px；在 .jx-field 內由 gap 控制間距（6px），不再加 margin */ .jx-field__error{display:block;margin-top:6px;font-size:var(--jx-fs-xs);line-height:1.6;color:var(--jx-danger)} .jx-field>.jx-field__error{margin-top:0} .jx-form>.jx-field__error{grid-column:1/-1;margin-top:-14px} /* 選項群組直接放在 .jx-form 格線內（委託流程「底價設定」）：訊息佔整列、緊接選項（列距 20 − 14 ＝ 6px），不擠到右欄 */ .jx-modal .jx-form>.jx-field__error{margin-top:-10px} /* 視窗內的表單列距 16px（jx-member.css）：同樣緊接 6px */ /* 第二輪（業主 2026-10-03）：欄位有灰色說明小字時，紅字插在說明之前（欄位 → 紅字 → 說明）：紅字與說明相距約 4px（gap 6px − 2px）； 視窗內說明原本與上方相距 12px（.jx-modal .jx-field__hint），有紅字時同樣改為緊接 */ .jx-field>.jx-field__error+.jx-field__hint,.jx-modal .jx-field>.jx-field__error+.jx-field__hint{margin-top:-2px} .jx-input,.jx-select,.jx-textarea{width:100%;height:44px;padding:0 14px;font-size:var(--jx-fs-sm);color:var(--jx-ink);background:#fff; border:1px solid var(--jx-line-strong);border-radius:var(--jx-radius);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none} .jx-textarea{height:auto;min-height:140px;padding:12px 14px;line-height:1.7;resize:vertical} .jx-input::placeholder,.jx-textarea::placeholder{color:var(--jx-placeholder)} .jx-input:hover,.jx-select:hover,.jx-textarea:hover{border-color:#bfb7ae} .jx .jx-input:focus,.jx .jx-select:focus,.jx .jx-textarea:focus{border-color:var(--jx-gold);box-shadow:0 0 0 3px rgba(154,106,68,.12);outline:none!important} /* 驗證錯誤：欄位加 aria-invalid="true"（核取方塊加在 input 上），並以 aria-describedby 指向下方的 .jx-field__error；修正中（聚焦時）仍維持紅框 */ .jx-input[aria-invalid="true"],.jx-select[aria-invalid="true"],.jx-textarea[aria-invalid="true"],.jx-check input[aria-invalid="true"]{border-color:var(--jx-danger)} .jx .jx-input[aria-invalid="true"]:focus,.jx .jx-select[aria-invalid="true"]:focus,.jx .jx-textarea[aria-invalid="true"]:focus{border-color:var(--jx-danger);box-shadow:0 0 0 3px rgba(179,38,30,.12)} /* 送出後焦點移到第一個不合格欄位、從「前往重新上傳」等錨點跳過來時：欄位上方多留空間，欄位名稱不被固定 Header 蓋住（業主 2026-10-02） 已有 scroll-padding-top（Header 高度＋16，jx-core.css），兩者相加：輸入框停在 Header 下方約 56px，上方的欄位名稱完整露出；彈出視窗內（沒有 Header）同樣保留欄位名稱 */ .jx-input,.jx-select,.jx-textarea,.jx-choices,.jx-check input,.jx-upload{scroll-margin-top:40px} .jx-choice__input{scroll-margin-top:64px} /* 選項卡片內的圓鈕：上方另含卡片內距與群組標題（藏品類別、底價設定） */ .jx-upload input[type="file"]{scroll-margin-top:120px} /* 上傳框內隱藏的檔案欄（位置在「選擇檔案」按鈕）：連同上方的預覽圖、說明一起露出 */ .jx-select{padding-right:38px;cursor:pointer; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 3.5 3 3 3-3' fill='none' stroke='%235c5c5c' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 14px center/10px} .jx-select--sm{width:auto;height:36px;padding-left:12px;font-size:var(--jx-fs-xs)} .jx-input-group{display:flex;gap:10px} .jx-input-group .jx-input{flex:1;min-width:0} .jx-input-group .jx-btn{flex-shrink:0;height:44px;min-width:112px;padding:0 16px;letter-spacing:.1em} /* 輸入框旁的按鈕（取得驗證碼等）：與輸入框同高 */ .jx-input-affix{position:relative} .jx-input-affix .jx-input{padding-right:48px} .jx-input-affix__btn{position:absolute;right:4px;top:4px;bottom:4px;width:40px;display:flex;align-items:center;justify-content:center;color:var(--jx-muted);transition:color .2s} .jx-input-affix__btn:hover,.jx-input-affix__btn[aria-pressed="true"]{color:var(--jx-gold)} .jx-input-affix__btn svg{width:18px;height:18px} /* 核取方塊 */ .jx-check{display:flex;align-items:flex-start;gap:10px;font-size:var(--jx-fs-sm);line-height:20px;color:var(--jx-text);cursor:pointer} .jx-check input{flex-shrink:0;width:18px;height:18px;margin:1px 0 0;border:1px solid #c9c2ba;border-radius:var(--jx-radius);background:#fff center/12px no-repeat; -webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .2s,border-color .2s} .jx-check input:checked{border-color:var(--jx-gold);background-color:var(--jx-gold); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E")} .jx-check:hover input:not(:checked){border-color:var(--jx-gold-soft)} .jx-check__count{margin-left:auto;font-size:var(--jx-fs-2xs);color:var(--jx-muted)} /* 文字含連結時，文字與連結包在同一個 內（否則 flex 間距會在句子中間插入空白）： */ .jx-check a{color:var(--jx-gold);text-decoration:underline;text-decoration-color:rgba(154,106,68,.4);text-underline-offset:3px;white-space:nowrap;transition:text-decoration-color .2s} /* 與 .jx-link 相同底線；連結文字不拆行 */ .jx-check a:hover{text-decoration-color:var(--jx-gold)} .jx-check .jx-link{white-space:nowrap} /* 次要按鈕（--outline／--ghost／--dark／--block／--line 與下方徽章都定義在本檔；首頁若要使用，需一併載入 jx-pages.css） */ .jx-btn--outline{color:var(--jx-gold);background:#fff;border:1px solid var(--jx-gold)} .jx-btn--outline:hover{color:#fff;background:var(--jx-gold)} .jx-btn--ghost{color:var(--jx-sub);background:transparent;border:1px solid var(--jx-line)} .jx-btn--ghost:hover{color:var(--jx-ink);background:var(--jx-bg-cream)} .jx-btn--dark{background:var(--jx-ink)} .jx-btn--dark:hover{background:#000} .jx-btn--block{display:flex;width:100%} .jx-btn[disabled],.jx-btn[aria-disabled="true"]{color:#fff;background:#cfc8c0;border-color:#cfc8c0;cursor:not-allowed} .jx-btn--outline[disabled]{color:#bdb5ac;background:#fff;border-color:#ddd6ce} .jx-link{color:var(--jx-gold);text-decoration:underline;text-decoration-color:rgba(154,106,68,.4);text-underline-offset:3px;transition:text-decoration-color .2s} .jx-link:hover{text-decoration-color:var(--jx-gold)} /* ================================================================= 3. 徽章、提示、標籤 ================================================================= */ .jx-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;font-size:12px;font-weight:500;letter-spacing:.08em;white-space:nowrap; color:#fff;background:var(--jx-ink);border-radius:var(--jx-radius)} .jx-badge--live{background:var(--jx-gold)} .jx-badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:jx-pulse var(--jx-pulse-dur) infinite} .jx-badge--gold{background:var(--jx-gold)} .jx-badge--upcoming{color:var(--jx-gold);background:#fff;border:1px solid var(--jx-gold)} .jx-badge--soft{color:var(--jx-sub);background:var(--jx-bg-cream)} /* 選用元件（範本未使用，見交接說明 §5）：--ok／--warn／--xs */ .jx-badge--ok{background:var(--jx-success)} .jx-badge--warn{background:var(--jx-danger)} .jx-badge--xs{height:20px;padding:0 6px;font-size:11px;letter-spacing:.04em} .jx-media>.jx-badge{position:absolute;top:12px;left:12px;z-index:1} @keyframes jx-pulse{0%,100%{opacity:1}50%{opacity:.35}} .jx-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 14px;font-size:var(--jx-fs-xs);color:var(--jx-text);background:var(--jx-bg-cream);border-radius:15px} .jx-chip__x{position:relative;display:flex;width:16px;height:16px;align-items:center;justify-content:center;color:var(--jx-muted);border-radius:50%;transition:color .2s,background-color .2s} /* 移除此條件：（連到移除後的網址）或
    • 滿額時 JS 加 .is-full（「新增照片」格隱藏）；張數不足時送出，JS 加 .is-invalid 並在 .jx-upload__error 顯示「請至少上傳 N 張照片」 多檔欄位以一般表單送到 PHP 時 name 需加 []（imgs[]），否則只收到最後一個檔案；以 API 送出時用 jx:upload-change 的 detail.files 逐一 append */ .jx-upload--multi{display:block;padding:0;border:0} .jx-upload--multi:hover,.jx-upload--multi:focus-within{background:none} .jx-upload__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:var(--jx-fs-2xs);line-height:1.6;color:var(--jx-muted)} .jx-upload__count{flex-shrink:0;font-size:var(--jx-fs-xs);color:var(--jx-sub);white-space:nowrap;font-variant-numeric:tabular-nums} .jx-upload__count b{font-weight:500;color:var(--jx-ink)} .jx-upload__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px} .jx-upload__item{position:relative;aspect-ratio:1;min-width:0;background:var(--jx-bg-img);border:1px solid var(--jx-line);border-radius:var(--jx-radius)} .jx-upload__item>.jx-media{width:100%;height:100%;border-radius:inherit} .jx-upload__item>.jx-media::before{font-size:0} .jx-upload__remove{position:absolute;top:6px;right:6px;z-index:2;display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#fff;background:rgba(28,28,28,.6);border-radius:50%;transition:background-color .2s} .jx-upload__remove::after{content:"";position:absolute;inset:-9px} /* 點擊範圍 44×44，外觀維持 26px */ .jx-upload__remove:hover{background:var(--jx-ink)} .jx-upload__remove svg{width:10px;height:10px} .jx-upload__add>label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;aspect-ratio:1;padding:8px;font-size:var(--jx-fs-xs);text-align:center;color:var(--jx-sub); border:1px dashed #d4ccc3;border-radius:var(--jx-radius);cursor:pointer;transition:color .2s,border-color .2s,background-color .2s} /* 虛線色同單張上傳框 */ .jx-upload__add>label:hover{color:var(--jx-gold);border-color:var(--jx-gold-soft);background:var(--jx-bg-hover)} .jx-upload__add>label:has(input:focus-visible){outline:2px solid var(--jx-gold);outline-offset:2px} .jx-upload__add svg{width:22px;height:22px;color:var(--jx-gold)} .jx-upload.is-full .jx-upload__add{display:none} /* 檔名列（PDF 等非圖片檔）：照片格中佔整列 */ .jx-upload__item.is-file{display:flex;align-items:center;gap:12px;grid-column:1/-1;aspect-ratio:auto;padding:12px 8px 12px 14px;background:#fff} .jx-upload__item.is-file>svg{flex-shrink:0;width:28px;height:28px;color:var(--jx-gold)} .jx-upload__file{flex:1;min-width:0} .jx-upload__file b{display:block;overflow:hidden;font-size:var(--jx-fs-sm);font-weight:500;color:var(--jx-ink);white-space:nowrap;text-overflow:ellipsis} .jx-upload__file small{display:block;font-size:var(--jx-fs-2xs);color:var(--jx-muted);font-variant-numeric:tabular-nums} .jx-upload__item.is-file .jx-upload__remove{position:relative;top:auto;right:auto;flex-shrink:0;width:32px;height:32px;color:var(--jx-sub);background:none} .jx-upload__item.is-file .jx-upload__remove::after{inset:-6px} .jx-upload__item.is-file .jx-upload__remove:hover{color:var(--jx-danger);background:var(--jx-danger-bg)} .jx-upload__item.is-file .jx-upload__remove svg{width:12px;height:12px} /* 只收文件（.jx-upload--doc，例：相關檔案 PDF 一份）：一列一個檔案，「選擇檔案」為虛線列 */ .jx-upload--doc .jx-upload__list{display:flex;flex-direction:column;gap:10px} .jx-upload--doc .jx-upload__add>label{flex-direction:row;height:56px;aspect-ratio:auto;gap:8px;font-size:var(--jx-fs-sm)} .jx-upload--doc .jx-upload__add svg{width:18px;height:18px} .jx-upload--multi>.jx-upload__error{margin-top:10px} /* 複製按鈕（data-jx-copy，jx.js）：匯款資訊、物流單號、收件地址；按下後文字暫時變「已複製」（.is-copied） */ .jx-copy{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:28px;padding:0 10px;font-size:12px;letter-spacing:.06em;white-space:nowrap; color:var(--jx-gold);background:#fff;border:1px solid rgba(154,106,68,.32);border-radius:var(--jx-radius);transition:color .2s,background-color .2s,border-color .2s} /* min-width：「複製」→「已複製」寬度不跳動 */ .jx-copy::after{content:"";position:absolute;inset:-9px -2px} /* 點擊高度 44px（框內 26＋上下 9），外觀維持 28px */ .jx-copy:hover{color:#fff;background:var(--jx-gold);border-color:var(--jx-gold)} .jx-copy.is-copied,.jx-copy.is-copied:hover{color:var(--jx-success);background:#fff;border-color:rgba(47,111,79,.4)} /* 匯款資訊卡（報名視窗、得標付款、鑑定費）：米色底細框；每列右側「複製」；匯款金額用明體
    銀行
    ○○商業銀行（代碼 000）
    帳號
    000-00-000000-0
    匯款金額
    NT$ 96,800

    請使用本人帳戶匯款…（選用）

    */ .jx-bank{padding:4px 20px;background:var(--jx-bg-cream);border:1px solid #ebe2d8;border-radius:var(--jx-radius)} .jx-bank__list>div{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:center;gap:12px;min-height:52px;padding:8px 0;font-size:var(--jx-fs-sm)} .jx-bank__list>div+div{border-top:1px solid rgba(154,106,68,.14)} .jx-bank dt{color:var(--jx-sub)} /* 米色底上用 --jx-sub（約 5.9:1）；--jx-muted 只在白底達 4.5:1 */ .jx-bank dd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;margin:0;color:var(--jx-ink);font-variant-numeric:tabular-nums} .jx-bank dd>span{min-width:0;word-break:keep-all;overflow-wrap:anywhere} /* 換行時在空格、括號處斷開（「○○商業銀行／（代碼 000）」） */ .jx-bank__list .jx-bank__amount dt{font-weight:500;color:var(--jx-ink)} .jx-bank__amount dd>span{font-family:var(--jx-serif);font-size:22px;font-weight:600;line-height:1.3} .jx-bank__note{padding:12px 0 14px;font-size:var(--jx-fs-2xs);line-height:1.75;color:var(--jx-sub);border-top:1px solid rgba(154,106,68,.14);word-break:keep-all;overflow-wrap:anywhere} /* 在標點處換行（不拆成「轉帳／截圖」） */ /* 國際匯款資訊（海外會員，2.10.0，業主 2026-10-03）：放在國內匯款資訊 .jx-bank 下方，預設收合，海外會員輸出 open
    海外會員：國際匯款資訊
    …
    */ .jx-bank-intl{margin-top:10px} /* 2.10.2（2026-10-04 平板測試）：國際匯款的欄位名稱較長（SWIFT Code），名稱欄加寬，不再拆成「SWIFT／Code」兩行（國內匯款維持原寬） */ .jx-bank-intl .jx-bank__list>div{grid-template-columns:6.5em minmax(0,1fr)} @media (max-width:767px){ .jx-bank-intl .jx-bank__list>div{grid-template-columns:6em minmax(0,1fr)} } @media (max-width:359px){ .jx-bank-intl .jx-bank__list>div{grid-template-columns:minmax(0,1fr)} } /* 2.10.2：報名視窗的資訊表是視窗內容最後一項時，最後一列不畫下框（與視窗底部的分隔線重疊成兩條線） */ .jx-register .jx-modal__body>.jx-specs:last-child>div:last-child,.jx-register .jx-register__panel .jx-modal__body>.jx-specs:last-child>div:last-child{border-bottom:0} .jx-bank-intl>summary{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:6px 0;font-size:var(--jx-fs-sm);color:var(--jx-sub);list-style:none;cursor:pointer;transition:color .2s} .jx-bank-intl>summary::-webkit-details-marker{display:none} .jx-bank-intl>summary::after{content:"";flex-shrink:0;width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s} .jx-bank-intl[open]>summary::after{transform:translateY(1px) rotate(-135deg)} .jx-bank-intl>summary:hover{color:var(--jx-gold)} .jx-bank-intl>.jx-bank{margin-top:6px} /* 金額明細：項目＋金額靠右；最後一列 .jx-sum__total（應付總額／撥款金額）明體加粗、上方分隔線；
    內的 為第二行說明
    成交價
    NT$ 88,000
    買方服務費依場次 10%
    NT$ 8,800
    運費精品・宅配寄送
    NT$ 380
    保險費成交價 0.8%
    NT$ 704
    應付總額
    NT$ 97,884
    扣除項目寫「−NT$ 8,800」；已失效的金額列加 .is-void（刪除線、灰色） 得標付款表單依取貨方式切換的列（運費、保險費、兩組應付總額）另加 data-jx-when（jx.js），見 member-bid-detail.html 的註解 */ .jx-sum{font-size:var(--jx-fs-sm)} .jx-sum>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:6px 0} .jx-sum dt{min-width:0;color:var(--jx-sub)} .jx-sum dt small{display:block;margin-top:1px;font-size:var(--jx-fs-2xs);color:var(--jx-muted)} .jx-sum dd{flex-shrink:0;margin:0;color:var(--jx-ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .jx-sum>.jx-sum__total{align-items:center;margin-top:8px;padding-top:14px;border-top:1px solid var(--jx-line)} .jx-sum__total dt{font-weight:500;color:var(--jx-ink)} .jx-sum__total dd{font-family:var(--jx-serif);font-size:24px;font-weight:600;line-height:1.25} .jx-sum .is-void dd{color:var(--jx-muted);text-decoration:line-through;text-decoration-thickness:1px} /* 選項卡片（radio／checkbox）：藏品類別、寄件方式、收件地址、補件處理方式；選中為金色框＋淺米底 .jx-choices 預設一欄（地址、處理方式）／--2 兩欄（手機一欄）／--3 三欄（手機兩欄）
    標題後的補充（電話等）用 .jx-choice__meta；驗證錯誤：.jx-choices 加 aria-invalid="true"＋下方 .jx-field__error */ .jx-choices{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} .jx-choices--2{grid-template-columns:repeat(2,minmax(0,1fr))} .jx-choices--3{grid-template-columns:repeat(3,minmax(0,1fr))} .jx-choice{position:relative;display:flex;align-items:flex-start;gap:12px;min-width:0;padding:16px 18px;background:#fff;border:1px solid var(--jx-line-strong);border-radius:var(--jx-radius);cursor:pointer; transition:border-color .2s,background-color .2s,box-shadow .2s} .jx-choice:hover{border-color:var(--jx-gold-soft)} .jx-choice:has(.jx-choice__input:checked){border-color:var(--jx-gold);background:var(--jx-bg-selected);box-shadow:inset 0 0 0 1px var(--jx-gold)} /* 內側再加 1px：選中框看起來 2px，版面不位移 */ .jx-choice:has(.jx-choice__input:focus-visible){outline:2px solid var(--jx-gold);outline-offset:2px} /* 鍵盤聚焦框畫在整張卡片 */ .jx .jx-choice__input:focus-visible{outline:none!important} .jx-choice:has(.jx-choice__input:disabled){cursor:not-allowed;opacity:.5} .jx-choice__input{flex-shrink:0;width:18px;height:18px;margin:2px 0 0;background:#fff;border:1px solid #c9c2ba;border-radius:50%;-webkit-appearance:none;appearance:none;cursor:inherit;transition:border-color .2s,box-shadow .2s,background-color .2s} .jx-choice__input:checked{border-color:var(--jx-gold);background:var(--jx-gold);box-shadow:inset 0 0 0 4px #fff} .jx-choice__input[type="checkbox"]{border-radius:var(--jx-radius)} .jx-choice__input[type="checkbox"]:checked{box-shadow:none;background:var(--jx-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/12px no-repeat} .jx-choice__body{flex:1;min-width:0;line-height:1.5} .jx-choice__title{margin-right:10px;font-size:15px;font-weight:500;color:var(--jx-ink)} /* 右側間距：後面的 .jx-choice__meta 換到下一行時不會內縮 */ .jx-choice__meta{display:inline-block;font-size:var(--jx-fs-xs);color:var(--jx-sub);white-space:nowrap;font-variant-numeric:tabular-nums} /* 電話不拆行，放不下時整段換到下一行 */ .jx-choice__desc{display:block;margin-top:3px;font-size:var(--jx-fs-xs);line-height:1.7;color:var(--jx-muted);text-wrap-style:pretty;word-break:keep-all;overflow-wrap:anywhere} /* 在空格、標點處換行：地址不拆開路名（「仁愛／路四段」）、類別說明不拆詞（「收／藏品」） */ .jx-choice__side{flex-shrink:0;align-self:center;margin-left:auto} .jx-choices[aria-invalid="true"] .jx-choice{border-color:var(--jx-danger)} /* ================================================================= 18. RWD ================================================================= */ /* ≥1440 寬螢幕：版寬放大後，列表頁改 4 欄，卡片寬度與 1200 寬時的 3 欄相近 （每頁筆數建議用 12 的倍數，3 欄與 4 欄最後一列都能排滿） */ @media (min-width:1440px){ .jx-lot-grid--3{grid-template-columns:repeat(4,minmax(0,1fr))} } /* 桌機篩選側欄 */ @media (min-width:1024px){ .jx-filter__group:first-of-type{padding-top:7px} /* 第一個標題與右側「共 N 件」同一水平 */ /* 側欄比視窗高時（例：1366×768 筆電）側欄內自行捲動，「清除／套用篩選」固定在底部； 左右 6px 內距＋負邊界：捲動區不裁掉核取方塊的聚焦框（外擴 3＋2px），內容寬度不變 */ .jx-filter{max-height:calc(100vh - var(--jx-header-h) - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 6px;margin:0 -6px} .jx-filter__actions{position:sticky;bottom:0;z-index:1;padding-bottom:6px;background:#fff} } /* 結果很少（或無結果）時，頁尾不浮在畫面中間：410 ≈ 頁首 60＋頁面標題區 175＋頁尾 175 */ @media (min-width:768px){ .jx-listing{min-height:calc(100vh - 410px)} } /* 1024–1199 登入頁：右下角浮動客服（48px 圓形）會壓到「立即註冊」，卡片右側多留 48px */ @media (min-width:1024px) and (max-width:1199px){ .jx-auth__main{padding-right:calc(var(--jx-gutter) + 48px)} } @media (max-width:1199px){ .jx{--jx-fs-h2:26px} .jx-listing,.jx-doc{gap:32px} .jx-listing{grid-template-columns:208px minmax(0,1fr)} } /* 1024–1199 活動卡片：右欄只有約 350px，倒數與按鈕要分兩行，文字欄比封面高約 165px（封面旁一大片空白）。 改為封面加寬到 50%，倒數＋按鈕列移到封面與文字下方、跨兩欄（同一行：倒數靠左、按鈕靠右）； .jx-event__body 以 display:contents 讓徽章、編號、名稱、時間直接排在格線右欄（不需改 HTML） */ @media (min-width:1024px) and (max-width:1199px){ .jx-event{grid-template-columns:minmax(0,50%) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;gap:0 28px} .jx-event>.jx-media{grid-row:1/5;align-self:start} .jx-event__body{display:contents} .jx-event__badges,.jx-event__code,.jx-event__title,.jx-event .jx-meta{grid-column:2} .jx-event__foot{grid-column:1/-1;padding-top:18px} } @media (max-width:1023px){ .jx{--jx-fs-h2:24px} /* 篩選改為側滑抽屜 */ .jx-listing{grid-template-columns:1fr;padding:20px 0 72px} .jx-filter{position:fixed;inset:0 auto 0 0;z-index:var(--jx-z-drawer);align-self:stretch;display:flex;flex-direction:column;height:100%;width:min(340px,88vw);padding:0 20px 20px;overflow-y:auto;background:#fff; box-shadow:0 0 0 100vmax rgba(20,17,14,0);transform:translateX(-100%);visibility:hidden;transition:transform .35s var(--jx-ease),visibility .35s,box-shadow .35s} .jx-filter.is-open{transform:none;visibility:visible;box-shadow:0 0 0 100vmax rgba(20,17,14,.5)} .jx-filter__head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;margin:0 -20px 12px;padding:16px 20px;background:#fff;border-bottom:1px solid var(--jx-line)} .jx-filter__head b{font-family:var(--jx-serif);font-size:18px;font-weight:600;color:var(--jx-ink)} .jx-filter__group:last-of-type{border-bottom:0} /* 下方按鈕列已有上框線，避免兩條線 */ .jx-filter__actions{position:sticky;bottom:-20px;margin:0 -20px -20px;margin-top:auto;padding:14px 20px 20px;background:#fff;border-top:1px solid var(--jx-line)} /* margin-top:auto：條件少時按鈕列仍貼抽屜底部 */ .jx-filter-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;font-size:var(--jx-fs-xs);color:var(--jx-ink);border:1px solid var(--jx-line);border-radius:var(--jx-radius)} .jx-toolbar__chips{order:1;width:100%} /* 已套用條件換到下一行，「篩選」與「排序」留在同一行 */ .jx-lot-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .jx-event{grid-template-columns:1fr;gap:16px} /* 768–1023 封面在上、文字在下（同手機）：左右並排時文字欄比封面高很多 */ .jx-event__title{font-size:20px} /* 規則目錄：改為橫向頁籤列，捲動時固定在 Header 下方（章節多、頁面長，隨時可切換）； 右側漸層＋尾端留白提示可左右滑動，捲到最右時最後一個頁籤不會被漸層蓋住 */ .jx-doc{display:block} /* 不用 grid：目錄的 sticky 範圍才會是整份規則，而不是只有自己那一列 */ .jx-toc{position:sticky;top:var(--jx-header-h);z-index:5;margin:0 calc(var(--jx-gutter) * -1) 32px;background:#fff;box-shadow:inset 0 -1px 0 var(--jx-line)} /* 滿版白底；底線畫在這裡，不跟著漸層淡出 */ .jx-toc__title{display:none} .jx-toc ul{display:flex;gap:0 20px;margin-top:0;padding:0 var(--jx-gutter);overflow-x:auto;border-left:0;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--jx-gutter),#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--jx-gutter),#000 calc(100% - 40px),transparent)} .jx-toc ul::-webkit-scrollbar{display:none} .jx-toc ul::after{content:"";flex:0 0 24px} .jx-toc li{flex-shrink:0} .jx-doc{--jx-toc-h:42px} /* 頁籤列高度（10＋行高 20＋10＋底線 2）：費率表表頭固定在頁籤列下方時使用 */ .jx-toc a{margin:0 -4px;padding:10px 4px;line-height:20px;border-left:0;border-bottom:2px solid transparent} /* 左右 4px 內距＋負邊界：文字位置不變，聚焦框不壓到文字；固定行高：字級改變時頁籤列高度不變 */ .jx-toc a[aria-current]{border-bottom-color:var(--jx-gold)} /* 業務規則佔整頁一半以上：子項目也放進頁籤列，用短名稱（買家／賣家／共同條件），字級較小表示是「業務規則」的下一層 */ .jx-toc__sub a{padding-left:4px} .jx-toc__full{display:none} .jx-toc__short{display:inline} .jx-doc__section,.jx-anchor,.jx-doc [id]{scroll-margin-top:48px} /* 跳到章節時標題不被 Header＋目錄列擋住（另加 的 scroll-padding-top） */ .jx-doc__section+.jx-doc__section{scroll-margin-top:-8px} /* 48－56（章節上方內距），同桌機：h2 與 h3 停的位置一致 */ .jx-intro,.jx-contact{grid-template-columns:1fr;gap:36px} .jx-intro .jx-media{aspect-ratio:16/9} /* 單欄時圖片改扁一點，下一個區塊不被推太遠 */ .jx-steps{grid-template-columns:repeat(2,minmax(0,1fr))} .jx-cta{grid-template-columns:1fr;margin-bottom:72px;padding:32px} .jx-cta__form{align-items:stretch} .jx-doc,.jx-contact{padding-bottom:72px} /* 頁尾前留白同列表頁（平板 72） */ .jx-split{grid-template-columns:1fr;gap:20px;padding:48px 0} .jx-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px} .jx-missions{grid-template-columns:1fr} .jx-auth{grid-template-columns:1fr} .jx-auth__aside{display:none} .jx-auth__title{font-size:28px} } /* 委託重點數字（15–20 天／PSA・Entrupy／全程規劃）：欄寬變窄時縮小字級； 1024–1199（左欄較窄）與 <600 改為一列一項：數值在左、說明在右 */ @media (max-width:1439px){ .jx-highlights>div{padding:18px 12px} .jx-highlights b{font-size:20px} } @media (min-width:1024px) and (max-width:1199px),(max-width:599px){ .jx-highlights{grid-template-columns:minmax(0,1fr)} .jx-highlights>div{padding:12px 18px} .jx-highlights dd{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .jx-highlights b{font-size:19px} } /* 運費表（.jx-table--ship，規則頁「運費與保險費」：國內運費表、海外運費表）：所有寬度固定欄寬比例， 兩張表上下欄位對齊（2.10.1，業主 2026-10-04 新增海外運費表）；手機品類欄不被擠窄、「成交價之 0.8%」在 375 寬不換行 （品類下方的 說明在 375／320 寬可能分成三行，屬正常換行） */ .jx-table--ship{table-layout:fixed} .jx-table--ship thead th:nth-child(1){width:32%} .jx-table--ship thead th:nth-child(n+2){width:34%} @media (max-width:767px){ .jx{--jx-fs-h2:21px} /* 輸入框、下拉選單手機一律 16px：小於 16px 時 iOS 聚焦會自動放大畫面 */ .jx-input,.jx-select,.jx-textarea,.jx-filter__range .jx-input,.jx-search--page .jx-search__input{font-size:16px} .jx-page-head{padding-top:18px} .jx-page-head__row{flex-direction:column;align-items:flex-start} .jx-page-head__row .jx-search--page{flex:none;width:100%;max-width:none} /* 直向排列時 flex-basis 會變成高度，改為滿寬 */ .jx-subnav{gap:24px;margin:16px calc(var(--jx-gutter) * -1) 0;padding:0 var(--jx-gutter) 1px;background-position:0 100%;background-size:100% 1px} /* 滿版，分隔線左右貼齊螢幕 */ .jx-toolbar{gap:10px} .jx-toolbar__count{width:100%;order:-1} /* 第一行「共 N 件」；第二行「篩選」靠左、排序靠右；第三行已套用條件 */ .jx-toolbar__right label{display:none} .jx-filter-btn{font-size:16px} /* 與同一行的排序選單（手機 16px，見上方輸入框規則）同字級 */ .jx-listing,.jx-doc,.jx-contact{padding-bottom:56px} .jx-lot-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px} /* 同一列的卡片「查看拍品」對齊底部（拍賣中兩行、即將開始一行統計，高度不同） */ .jx-lot-grid--3>li{display:flex} .jx-lot-grid--3 .jx-lot-card{display:flex;flex-direction:column;width:100%} .jx-lot-grid--3 .jx-lot-card__more{align-self:flex-start;margin-top:auto;padding-top:6px} .jx-pagination{gap:2px;margin-top:40px} .jx-pagination a{position:relative} .jx-pagination a::after{content:"";position:absolute;inset:-3px 0} /* 外觀維持 38×38 方形，點擊高度 44；寬 38：拍品列表 7 顆在 320 寬仍放得下 */ .jx-event{grid-template-columns:1fr;gap:16px;padding:24px 0} .jx-event__title{font-size:19px} .jx-event__actions{width:100%;margin-left:0} /* 手機：按鈕換到倒數下一行、平分整列 */ .jx-event__actions .jx-btn{flex:1} .jx-table th,.jx-table td{padding:10px 8px} /* 內文表格（規則頁費率表）：手機滿版；欄內文字可換行，放得進畫面寬度。後台若放入更寬的表格，仍可左右滑動 */ .jx-prose .jx-table-wrap{margin:1.2em calc(var(--jx-gutter) * -1) 0;padding:0 var(--jx-gutter)} .jx-prose .jx-table thead th{text-wrap:balance} /* 「無底價服務費」等較長表頭換行時兩行等長 */ .jx-prose .jx-table thead th.is-num{white-space:normal} /* 「無底價服務費」可分兩行 */ /* 服務費率表（.jx-table--fee）：手機固定欄寬比例，金額級距不被擠成三行、百分比欄不佔多餘空間 */ .jx-table--fee{table-layout:fixed} .jx-table--fee thead th:nth-child(1){width:30%} /* 第十四階段改為三欄（品類／包含／成交服務費）：品類 30%、包含其餘、費率 22% */ .jx-table--fee thead th:nth-child(2){width:48%} .jx-table--fee tbody th{word-break:keep-all} /* 品類名稱只在 處換行：「新銳藝術家／」「原創作品」，不會拆出「／原創作品」 */ .jx-table--fee thead th:nth-child(n+3){width:22%} .jx-table--fee td.is-num{white-space:normal} /* 「22% – 30%」在「–」後換行，不擠進隔壁欄 */ /* 費率表手機約 960px 高：表頭固定在 Header＋目錄頁籤列下方，捲到下半段仍看得到欄名（表格已固定欄寬、放得進畫面，外框不需橫向捲動； overflow 不是 visible 時 sticky 只會在外框內作用） */ .jx-prose .jx-table-wrap:has(>.jx-table--fee){overflow:visible} .jx-table--fee thead th{position:sticky;top:calc(var(--jx-header-h) + var(--jx-toc-h, 0px));z-index:1} .jx-prose .jx-table tbody th{padding:10px 8px;min-width:5.5em;text-wrap:balance} /* 品類名稱至少 5 字寬（「卡牌」不會一字一行）；「新銳藝術家／原創作品」換成兩行 */ .jx-prose .jx-table tbody th small{margin-top:2px} .jx-prose h3{font-size:18px} /* 與 h2（21px）拉開層級 */ .jx-intro,.jx-doc,.jx-contact{padding-top:28px} .jx-highlights b{font-size:19px} .jx-section--lg{padding-top:48px} .jx-steps{grid-template-columns:1fr} .jx-steps li{padding:22px 20px} .jx-cta{margin:48px 0 56px;padding:24px 20px} .jx-about-hero{min-height:340px} .jx-about-hero__title{font-size:28px} .jx-consign--spaced{margin-top:48px} .jx-values{grid-template-columns:1fr} .jx-form{grid-template-columns:1fr} .jx-form__actions{flex-direction:column-reverse;align-items:stretch} .jx-form__actions .jx-field__hint{order:1} /* 按鈕由下往上排（column-reverse），必填說明放在按鈕上方（全站表單一致） */ .jx-auth__main{padding-top:32px} .jx-auth__title{font-size:24px} .jx-modal__foot .jx-btn{flex:1;min-width:0} /* 16. 彈出視窗（通用）：手機標題 19px、內距 20px，與報名、申請取回視窗一致（原 21px／24px 只適合桌機）； 標題下加分隔線：內容可捲動時，捲上去的文字不會貼著標題（報名、取回視窗本來就有）。 實拍影片、委託合約另有自己的版面（jx-member.css），不加分隔線 */ .jx-modal__head{padding:18px 20px 14px;border-bottom:1px solid var(--jx-line)} .jx-modal--video .jx-modal__head,.jx-modal--contract .jx-modal__head{border-bottom:0} .jx-modal__title{font-size:19px} .jx-modal__body{padding:14px 20px} .jx-modal__foot{padding:14px 20px 18px} /* 報名視窗 */ .jx-register .jx-modal__head{padding:18px 20px 14px} .jx-register .jx-modal__title{font-size:19px} .jx-register .jx-modal__body{padding:6px 20px 20px} .jx-register .jx-modal__foot{padding:14px 20px 18px} .jx-register .jx-specs>div{grid-template-columns:5.5em minmax(0,1fr);padding:11px 0} .jx-register__sec{margin-top:22px} .jx-register__h{font-size:14px} .jx-register__notes{margin-top:20px;padding-top:16px} .jx-register__result{padding:6px 0 20px} .jx-register__icon{width:56px;height:56px} .jx-register__icon svg{width:26px;height:26px} .jx-register__title{margin-top:14px;font-size:19px} .jx-register__text{font-size:13px} /* 17. 上傳、匯款資訊、金額明細、選項卡片 */ .jx-upload{gap:14px;padding:12px} .jx-upload__preview{width:96px} .jx-upload--multi{padding:0} .jx-upload__head>span:first-child{min-width:0} /* 說明文字在自己的欄內換行，張數「2 / 5」固定在右上（320 寬不再掉到下一行） */ .jx-upload__count{margin-left:auto} .jx-upload__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} /* 手機一排 3 張 */ .jx-upload__remove{top:4px;right:4px;width:24px;height:24px} .jx-upload__remove::after{inset:-10px} .jx-upload__add>label{font-size:var(--jx-fs-2xs)} .jx-upload__item.is-file{padding:10px 6px 10px 12px} .jx-field--last5 .jx-input{max-width:none} /* 手機滿寬（同其他欄位） */ .jx-bank{padding:2px 14px} .jx-bank__list>div{grid-template-columns:4.5em minmax(0,1fr);gap:10px;min-height:50px} .jx-bank__amount dd>span{font-size:20px} .jx-sum__total dd{font-size:22px} .jx-choices--2{grid-template-columns:minmax(0,1fr)} .jx-choices--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .jx-choice{padding:14px} .jx-choices--3 .jx-choice{gap:10px;padding:14px 12px} .jx-choice__title{margin-right:8px} } /* < 400：拍品編號（20 碼）縮小字距，避免超出卡片；更長的編號以刪節號收尾 */ @media (max-width:399px){ .jx-lot-card__lot{letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 兩欄選項卡片（藏品類別）：圓鈕移到右上角，說明文字可用整張卡片的寬度 */ .jx-choices--3 .jx-choice{padding:12px} .jx-choices--3 .jx-choice__input{position:absolute;top:13px;right:10px;width:16px;height:16px;margin:0} .jx-choices--3 .jx-choice__input:checked{box-shadow:inset 0 0 0 3.5px #fff} .jx-choices--3 .jx-choice__title{display:block;margin-right:0;padding-right:16px} /* 只讓出圓鈕寬度：320 寬時「新銳藝術家」不換行 */ .jx-choice__meta{display:block} /* 地址選項：電話一律在姓名下一行（有「預設」標籤與沒有的卡片排法一致） */ .jx-choice__side{position:absolute;top:12px;right:14px} /* 「預設」標籤移到右上角、與姓名同一行：地址用滿卡片寬度，不在路名中間斷行 */ .jx-choice:has(>.jx-choice__side) .jx-choice__title{padding-right:52px} } /* < 360（320 等小螢幕）：匯款資訊的欄名移到值的上方，值欄用滿整列（320 寬時帳號、金額「NT$ 96,8／00」不再被拆成兩行）； 報名視窗左右留白同其他視窗（16px），內距縮為 16px；單張上傳改為上下排列（預覽在上、說明與按鈕用滿整列） */ @media (max-width:359px){ /* 彈出視窗左右內距 16px，與報名、申請取回視窗同一個斷點（360–767 為 20px） */ .jx-modal__head{padding-left:16px;padding-right:16px} .jx-modal__body{padding-left:16px;padding-right:16px} .jx-modal__foot{padding-left:16px;padding-right:16px} .jx-table--fee thead th:nth-child(1){width:30%} /* 320 寬：同 375 的比例 */ .jx-table--fee thead th:nth-child(2){width:46%} .jx-bank__list>div{grid-template-columns:minmax(0,1fr);gap:2px;min-height:0;padding:10px 0} .jx-bank dt{font-size:11px;line-height:1.5} .jx-upload:not(.jx-upload--multi){flex-direction:column;align-items:stretch;gap:12px} .jx-upload:not(.jx-upload--multi) .jx-upload__preview{width:100%;aspect-ratio:3/1} .jx-register .jx-modal__head{padding:16px 16px 12px} .jx-register .jx-modal__body{padding:6px 16px 18px} .jx-register .jx-modal__foot{padding:12px 16px 16px} .jx-register .jx-specs>div{grid-template-columns:5em minmax(0,1fr)} } /* 減少動態效果：「拍賣中」徽章的閃爍點由 jx-core.css 統一關閉 */ /* ================================================================= 委託拍賣（consignment.html）：還原官網版面（業主 2026-10-01：先做得和官網一樣，再提出修改） 尺寸依官網 1440×900、390×844 量測；顏色沿用官網（金 #996C51、標題 #292524、內文 #777） ================================================================= */ .jx-consign-hero{position:relative;height:calc(100vh - var(--jx-header-h));height:calc(100svh - var(--jx-header-h));min-height:480px;overflow:hidden;background:#2a2420} .jx-consign-hero picture{display:contents} .jx-consign-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0} /* 官網為靠左上裁切 */ .jx-consign-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2)} /* 官網照片上有 20% 黑色遮罩 */ .jx-consign-hero__text{position:absolute;z-index:1;left:0;right:0;bottom:76px;padding:0 var(--jx-gutter);text-align:center} .jx-consign-hero__title{font-family:var(--jx-sans);font-size:32px;font-weight:400;line-height:1.3;letter-spacing:.02em;color:#e8d6bc} .jx-consign-hero__lead{margin-top:16px;font-size:14px;line-height:1.6;color:rgba(232,214,188,.8)} .jx-consign-h2{font-family:var(--jx-sans);font-size:24px;font-weight:400;line-height:1.6;color:#292524;text-align:center} .jx-consign-how{max-width:900px;margin:0 auto;padding:78px 0 80px;text-align:center} .jx-consign-how__text{margin-top:16px;font-size:14px;line-height:1.6;color:#777} .jx-consign-how__btn{display:flex;align-items:center;justify-content:center;width:293px;max-width:100%;height:44px;margin:16px auto 0;text-decoration:none;font:inherit;font-size:13px;font-weight:500;color:#fff;background:#996c51;border:0;border-radius:4px;cursor:pointer;transition:background-color .2s,opacity .2s} .jx-consign-how__btn:hover{color:#fff;background:#80552f} .jx-consign-how__btn.is-unchecked{opacity:.5} /* 同官網：未勾選同意時半透明，但仍可按（按下先開啟委託條款） */ .jx-consign-how__terms{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font-size:12px;line-height:20px;color:#727272} .jx-consign-how__terms input{width:18px;height:18px;margin:0;accent-color:#996c51;cursor:pointer} .jx-consign-how__terms label{cursor:pointer} .jx-consign-how__link{padding:0;font:inherit;color:#996c51;background:none;border:0;cursor:pointer} .jx-consign-how__link:hover{text-decoration:underline;text-underline-offset:3px} .jx-consign-steps{max-width:1200px;margin:0 auto;padding:24px 0 160px;border-top:1px solid #f0eeec} .jx-consign-steps__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:75px 40px;margin-top:38px;padding:0;list-style:none;text-align:center} .jx-consign-steps__list img{display:block;width:100px;height:100px;margin:0 auto} .jx-consign-steps__no{margin-top:5px;font-size:16px;font-weight:500;line-height:1.6;color:#996c51} .jx-consign-steps__title{font-family:var(--jx-sans);font-size:18px;font-weight:400;line-height:2;color:#292524} .jx-consign-steps__text{max-width:330px;margin:0 auto;font-size:14px;line-height:1.6;color:#777} @media (max-width:767px){ .jx-consign-hero__text{bottom:80px} .jx-consign-hero__title{font-size:24px} .jx-consign-hero__lead{margin-top:10px} .jx-consign-h2{font-size:18px} .jx-consign-how{padding:48px 0 56px} .jx-consign-how__text{margin-top:10px} .jx-consign-steps{padding:24px 0 96px} .jx-consign-steps__list{grid-template-columns:1fr;gap:56px;margin-top:40px} } /* 2.10.3（2026-10-04 手機版操作檢查）：手機上的小按鈕，點擊範圍加大到約 44px 高；外觀不變（清單頁的篩選、排序改為 40px 高） */ @media (max-width:767px){ .jx-crumbs a{position:relative} .jx-crumbs a::after{content:"";position:absolute;inset:-12px -4px} /* 麵包屑 18px → 42px */ :where(.jx-modal__x){position:relative} .jx-modal__x::after{content:"";position:absolute;inset:-6px} /* 視窗關閉鈕 32px → 44px */ .jx-select--sm,.jx-filter-btn{height:40px} /* 清單頁「篩選」與排序選單 36px → 40px（選單無法加透明範圍，直接加高） */ .jx-toolbar__clear{position:relative} .jx-toolbar__clear::after{content:"";position:absolute;inset:-12px -6px} /* 「清除全部」 */ .jx-input-affix__btn::after{content:"";position:absolute;inset:-4px 0} /* 顯示密碼：與輸入框同高 */ .jx-bank-intl>summary{padding:10px 0;margin-block:-4px} /* 「海外會員：國際匯款資訊」36px → 44px，負邊距抵銷，位置不變 */ .jx-auth .jx-check{padding-block:10px;margin-block:-10px} /* 登入／註冊的同意勾選：整行 40px 高都可點，位置不變 */ .jx-consign-how__terms label,.jx-consign-how__link{position:relative} .jx-consign-how__terms label::after{content:"";position:absolute;top:-8px;bottom:-16px;left:-26px;right:0} /* 委託拍賣頁同意勾選：含左邊的勾選框，不蓋到上方「立即委託」 */ .jx-consign-how__link::after{content:"";position:absolute;top:-8px;bottom:-16px;left:-4px;right:-8px} /* 「委託條款」 */ } /* 2.10.3（2026-10-04 手機版操作檢查）：說明文字不拆詞、每行排滿（配合 jx.js 2.23.0 的斷詞換行點） 提示框內文一律只在詞與詞、標點、空格處換行（jx.js 用瀏覽器內建斷詞在中文詞之間加換行點）；段落內 9 字以上的 .jx-nobr 片語由 jx.js 加 .is-soft，改回一般行內文字， 片語內也能在詞與詞之間換行，長片語不再整段換到下一行、留下大片空白 */ .jx-notice__body{word-break:keep-all;overflow-wrap:anywhere} .jx-nobr.is-soft{display:inline} /* 2.10.3（業主 2026-10-04 手機版選擇題）：手機小字放大一級——字級寫死的說明小字同步放大 */ @media (max-width:767px){ .jx-fx-note{font-size:13px} /* 外幣參考說明（原 12px） */ } @media (max-width:359px){ .jx-bank dt{font-size:12px} } /* 320 等小螢幕：匯款資訊欄名在值上方時的字級（原 11px；360 以上同內文 13px） */ /* 2.10.3（業主 2026-10-04 手機版選擇題③）：長篇說明手機預設收合（退件寄回說明、取貨須知、委託第 1 步服務費說明）
    …說明（清單或費用表）…
    手機（< 768）：只顯示前約 160px（標題在外面照常顯示），下緣漸層淡出；按鈕切換 .is-open（jx.js data-jx-toggle，同步 aria-expanded）；平板以上一律展開、不顯示按鈕；內容一字不刪 漸層顏色＝所在卡片的底色（--jx-fold-bg，預設白色） */ .jx-fold__btn{display:none} @media (max-width:767px){ .jx-fold:not(.is-open){position:relative;max-height:160px;overflow:hidden} .jx-fold:not(.is-open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgba(255,255,255,0),var(--jx-fold-bg,#fff) 90%);pointer-events:none} .jx-fold__btn{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--jx-fs-sm);font-weight:500;line-height:20px;color:var(--jx-gold)} .jx-fold__btn::before{content:"";position:absolute;inset:-12px -8px} /* 點擊高度約 44px */ .jx-fold__btn::after{content:"";width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s} .jx-fold__btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)} .jx-fold__btn[aria-expanded="true"] .jx-fold__more,.jx-fold__btn:not([aria-expanded="true"]) .jx-fold__less{display:none} .jx-fold__btn+.jx-retrieve__more{margin-top:14px} } /* 2.10.3（業主 2026-10-04 手機版選擇題）：委託拍賣頁主視覺（手機 < 768）由滿版（視窗高度）縮成 400px，第一個畫面看得到「如何委託」說明與「立即委託」； 照片改以中間偏下為準裁切（人物與畫作在照片中段；原本靠左上裁切，縮矮後只剩天花板） */ @media (max-width:767px){ .jx-consign-hero{height:400px;min-height:0} .jx-consign-hero__img{object-position:50% 60%} .jx-consign-hero__text{bottom:36px} } /* 2.10.3（業主 2026-10-04 手機版選擇題）：拍品總覽、搜尋結果的拍品卡片（.jx-lot-grid--3）手機不顯示最下方「查看拍品 ›」——整張卡片本來就是連結，拍品資訊全部保留；每張約矮 30px */ @media (max-width:767px){ .jx-lot-grid--3 .jx-lot-card__more{display:none} } /* 2.10.3（業主 2026-10-04 手機版選擇題）：.jx-countdown 剩不到 1 小時（jx.js 加 .is-soon）改粗體、不變色 */ .jx-countdown b.is-soon{font-weight:700} /* 2.10.4（2026-10-08 全站截圖檢查）：拍賣規則等長段落、委託拍賣頁的引言與步驟說明原本可在字中間斷開（「拍／行」「鑑星／閣」「說／明」）→ 只在詞與詞、標點處換行（jx.js 斷詞加換行點；置中的段落加 data-jx-wb），過長才任意斷行 */ .jx-prose p,.jx-prose li,.jx-faq__answer,.jx-consign-how__text,.jx-consign-steps__text{word-break:keep-all;overflow-wrap:anywhere}