@charset "UTF-8"; /* 1. 全域 reset */ *, *::before, *::after { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } /* 2. HTML 基本設定（縮放 + 滑動） */ html { scroll-behavior: smooth; /* -webkit-text-size-adjust: 100%; // 要用再打開 */ } /* 3. 頁面背景（你原本的設定，可移到 layout.css 也可以留這） */ body { background: #FFFAFA; } /* 4. 列表（如果你確定整站都不需要點點，就留） */ ol, ul { list-style: none; } /* 5. 表格 */ table { border-collapse: collapse; border-spacing: 0; } /*LAYOUT*/ /*HEADER*/ header { width:100%; height:auto; overflow:hidden; transition: opacity 1.5s ease; margin:0 auto 0 auto; position: fixed; top: 0; left: 0; z-index:999; } /* 特定頁面取消固定 */ body.no-fixed-header header, body.no-fixed-header nav.menu { position: static; } .header-container { width:1200px; height:auto; overflow:hidden; margin:0 auto; padding:15px 0; display: flex; justify-content: space-between; align-items: center; } img.logo{ width:auto; height:54px; margin:0 auto 0 5px; } /*search*/ .search { width:480px; margin:0 0 0 -70px; } .search a{ display: inline-block; padding:0 8px 0 3px; margin:5px 0 0 3px; } .search-btn { position: absolute; margin-top:-40px; margin-left:450px; padding: 7px 15px; } /*membercar*/ #membercar ol{ width:150px; height:70px; float:left; border-radius:10px; margin:0 5px 0 15px; align-content: center; } #membercar ol:first-child > li{ margin:12px auto; } #membercar ol:last-child { width:120px; } .login{ padding:5px 0; } .login-content { width:150px; position: fixed; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; display:none; border-radius:5px; margin:5px auto 0 auto; z-index:99; } .login-content li { width:75%; margin:10px auto; text-align:left; } .login:hover .login-content, .shopcar:hover .shopcar-content { display: block; } .shopcar{ margin:30px 0 0 0; padding:0 0 25px 0; } .shopcar-content{ width:300px; position: fixed; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; display:none; border-radius:5px; z-index:99; margin:20px 0 0 -180px; padding:5px; } .shopcar:not(:hover) .shopcar-content { display: none; } /* --- 商品捲動區 --- */ .shopcar-list { max-height: 400px; /* 超過這個高度才會出捲軸 */ overflow-y: auto; padding: 5px ; } /* 讓捲軸美化一點（選配，僅限 Chrome/Edge/Safari） */ .shopcar-content::-webkit-scrollbar { width: 6px; } .shopcar-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } /* 只要滑鼠在 .shopcar 或 .shopcar-content 上，就保持顯示 */ .shopcar:hover .shopcar-content { display: block; } .shopcar-content li{ width:90%; height:auto; overflow:hidden; margin:10px auto 10px auto ; padding:3px 0; text-align:right; } .shopcar-content mark { width:20px; padding:5px 0; text-align:center; float:left; margin-right:5px; display:block; } .shopcar-content li img{ width:35px; height:auto; margin:0 5px 0 5px; float:left; } .shopcar-content p { padding:0 0 3px 0; text-align:left; } .shopcar-content .qty{ padding:0 5px 0 5px; } /* --- 固定底部區 --- */ .shopcar-footer { padding: 10px; background-color: #f9f9f9; border-top: 1px dashed #ccc; font-size: .9rem; } /* 按鈕樣式微調 */ .btn-bg-secondary { padding: 5px 10px; background-color: #27548A; color: #fff; text-decoration: none; border-radius: 4px; float:right; margin:-5px auto 0 auto ; } /* 滑鼠移入顯示整體 */ .shopcar:hover .shopcar-content { display: block; } /*選單MENU*/ nav.menu { width:100%; height:40px; margin:0 auto 0 auto; align-content: center; position: fixed; top: 100px; left: 0; z-index:99; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; } /* 主選單 (橫向排列) */ .menu-list { width: 1200px; height:auto; overflow:hidden; padding: 0; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } /* 主選單項目 */ .menu-list > li { text-align:center; align-items: center; width:16%; margin-left:-1px; } /* 主選單連結 */ .menu-list > li > a { font-weight: normal; display: block; letter-spacing: 0.2rem; color: #FFF; font-size: 1.25rem; } .menu-list > li > a:hover { color:#00a0e9; background:#FFF; line-height:39px; } .menu-list li:hover a { /* 滑鼠移入次選單上層按鈕保持變色*/ color:#00a0e9; background:#FFF; line-height:39px; } .menu-list li:hover>div { /* 滑鼠滑入展開次選單*/ display: block; } .menu-list li div{ position: absolute; width:100%; height:50px; display: none; left: 0; z-index:9999; } /* ===== 子選單樣式 ===== */ .menu-list li div ul{ width:1202px; height:auto; overflow:hidden; border-top:none; margin:0 auto; padding: 20px; letter-spacing:0.095rem; } .menu-list li div ul li { display:inline-block; } /*第二層*/ .menu-list li:hover>div ul { display: grid; /* 預設區塊模式 */ grid-template-columns: repeat(9, 1fr); /* 固定 3 欄 */ gap: 5px; /* 間距 */ } .menu-list li:hover>div ul li{ } .menu-list li:hover>div ul li a{ background:none; padding:0 10px 5px 10px; color:#3A0519; border-bottom:1px solid #3A0519; font-size:1.185rem; } /*新品推薦-BANNER顯示*/ .menu-list li:hover>div ul.banner { grid-template-columns: repeat(4, 1fr); /* 固定 3 欄 */ gap: 15px; /* 間距 */ } .menu-list li:hover>div ul.banner li { display: flex; } .menu-list li:hover>div ul.banner a { line-height:0; border:1px solid #CEC; padding:0; } .menu-list li div ul li a img { width:100%; height:auto; object-fit:contain; } /*新品推薦-文字顯示*/ /*新品推薦-第二層*/ .menu-list li:hover>div ul.newbooks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .menu-list li:hover>div ul.newbooks li{ text-align:left; margin:0 0 0 5px; } /*新品推薦-第三層*/ .menu-list li:hover > div ul.newbooks li ul{ display: grid; grid-template-columns: repeat(1, 1fr); } .menu-list li:hover > div ul.newbooks li ul.new39{ /*grid-template-columns: 250px 320px; */ } .menu-list li:hover>div ul.newbooks li ul li{ margin:5px 0 10px 0; } .menu-list li:hover>div ul.newbooks li ul li a{ border:none; color: #222; font-size: 1rem; } /*檢定考試-第二層*/ .menu-list li:hover>div ul.exam { grid-template-columns: repeat(2, 1fr); /* 固定 3 欄 */ gap: 20px; /* 間距 */ } .menu-list li:hover>div ul.exam li{ width:950px; text-align:left; margin:0 0 0 5px; } .menu-list li:hover>div ul.exam li a{ width:950px; margin:0 0 0 10px; } .menu-list li:hover>div ul.exam li.CT{ width:150px; margin:0 0 0 15px; font-weight:500; } /*英語教材-第二層*/ .menu-list li:hover>div ul.textbook { /*grid-template-columns: repeat(4, 1fr); /* 固定 3 欄 */ gap: 20px; /* 間距 */ grid-template-columns: 130px 180px 180px 1fr; } .menu-list li:hover>div ul.exam li{ text-align:left; margin:0 0 0 5px; } .menu-list li:hover>div ul.textbook li.CT a{ border:none; display:block; margin:0 0 10px 0; } .menu-list li:hover>div ul.textbook li.banner { width:auto; display: grid; /* 預設區塊模式 */ grid-template-columns: repeat(1, 1fr); /* 固定 3 欄 */ gap: 20px; /* 間距 */ margin-left:250px; } .menu-list li:hover>div ul.textbook li.banner a { width:360px; height:auto; margin:0; border:none; line-height:0; border:1px solid #CEC; padding:0; } .menu-list li:hover>div ul.textbook li.banner a img{ width:100%; height:auto; object-fit:contain; } /*教師用書-第二層*/ .menu-list li:hover>div ul.teaching { } .menu-list li:hover>div ul.teaching li a{ border:none; } /*39-第二層*/ .menu-list li:hover>div ul.teaching39 { grid-template-columns: repeat(8, 1fr); /* 固定 3 欄 */ } .menu-list li:hover>div ul.teaching39 li a{ padding:0 5px 5px 5px; } .menu-list li:hover>div ul.teaching39 li.CT a{ border:none; display:block; margin:0 0 10px 0; } /*第三層*/ .menu-list li:hover>div ul li ul{ width:100%; grid-template-columns: repeat(1, 1fr); /* 固定 3 欄 */ margin:10px 0 0 0; padding:0; } .menu-list li:hover>div ul li ul li{ margin:5px 0 5px 0; } .menu-list li:hover>div ul li ul li a{ border:none; line-height:1; color: #222; font-size: 1rem; } /*檢定考試-第三層*/ .menu-list li:hover>div ul.exam li ul{ grid-template-columns: repeat(8, 1fr); /* 固定 3 欄 */ gap:15px; /* 間距 */ } .menu-list li:hover>div ul.exam li ul li{ width:auto; padding:5px 0 5px 0; margin:5px 0 0 0; text-align:center; } .menu-list li:hover>div ul.exam li ul li a{ color:#27548A; font-weight:500; font-size:1.185rem; } .menu-list li:hover>div ul.exam li ul li.TC{ text-align:center; padding:0; } .menu-list li:hover>div ul.exam li ul li.TC ul{ padding:0; margin:0; } .menu-list li:hover>div ul.exam li ul li.TC ul li{ padding:3px 0 5px 0; margin:0 0 20px 0; } .menu-list li:hover>div ul.exam li ul li.TC ul li a{ color:#27548A; font-size:1.185rem; } .menu-list li:hover>div ul li.CT a{ font-weight:normal; } .menu-list li:hover>div ul li.CT ul { padding:5px 0 5px 0; margin:5px 0 25px 0; } .menu-list li:hover>div ul li.CT ul li{ text-align:center; } .menu-list li:hover>div ul li.CT ul li a{ font-weight:normal; } /*檢定考試-第四層*/ .menu-list li:hover>div ul.exam li ul li ul { grid-template-columns: repeat(1, 1fr); gap: 2px; /* 間距 */ } .menu-list li:hover>div ul.exam li ul li ul li{ } .menu-list li:hover>div ul.exam li ul li ul li a{ color:#222; font-weight:normal; font-size: 1rem; } /*CONTENT*/ article{ width:100%; height:auto; overflow:hidden; margin:0 auto; } section { width:1200px; height:auto; overflow:hidden; margin:150px auto 30px auto; } body.no-fixed-header section{ margin:10px auto 0 auto; } section div{ width:100%; height:auto; overflow:hidden; margin:0 auto; } /* 主要版型 */ .page-layout { display: flex; gap: 30px; } /* 左側 */ aside { width: 220px; flex-shrink: 0; } /* 右側 */ main { flex: 1; width: 950px; } .page-layout.full-width { gap: 0; } .page-layout.full-width main { width: 100%; flex: none; } /* ========== NAV CSS ========== */ /* ============================================== * 頂層大分類 (Group) - 統一樣式 * ============================================== */ aside .navbar { border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .navbar-title, .navbar-title-one { margin: 0; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: normal; /* background: #00a0e9;統一主藍色 */ color: #475569; background: #FFF; border-bottom:1px dotted #EEE; font-size:1.085rem; } .navbar-title a, .navbar-title-one a { flex: 1; color: #475569; text-decoration: none; font-size:1.1rem; font-weight: normal; } .navbar-title a:hover, .navbar-title-one a:hover { flex: 1; color: #475569; text-decoration: none; font-weight: normal; } /* 展開或被選中時的深藍色背景 */ .navbar-title.open{ background: #00a0e9; color: #475569; font-weight: normal; border-bottom:none; } .navbar-title-one.open { background: #00a0e9; color: #475569; font-weight: normal; border: 1px solid #EEE; } .navbar-title.open a, .navbar-title-one.open a { font-weight: normal; background: #00a0e9; color: #FFF; } /* 只有帶有子清單的標題才顯示箭頭 */ .navbar-title::after { content: "⌵"; transition: transform 0.3s; font-size: 1.12rem; } /* 箭頭轉向 */ .navbar-title.open::after { transform: rotate(180deg); } /* 確保單行標題沒有箭頭，保持整潔 */ .navbar-title-one::after { content: ""; } /* ============================================== * 內層列表與項目 (Category / Subcat) * ============================================== */ .navbar-list, .submenu, .sub-submenu { display: none; list-style: none; padding: 0; margin: 0; } .navbar-list.open { display: block; background: #fff; border: 1px solid #00a0e9; border-top:none; } .submenu.open { display: block; background: #fff; } .sub-submenu.open { display: block; background: #fff; } .submenu.open a, .sub-submenu.open a{ padding-left:50px; font-size: 1rem; } .submenu.open a, .sub-submenu.open a{ padding-left:50px; font-size: 1rem; } /* 項目連結基礎樣式 */ .navbar-link, .submenu-link { display: flex; align-items: center; justify-content: space-between; padding: 15px 5px 15px 35px; color: #475569; /* 預設文字顏色 */ border-bottom: 1px solid #f0f0f0; text-decoration: none; transition: background 0.2s; font-size: 1rem; } .navbar-link:hover, .submenu-link:hover { text-decoration: none; background: #f8fafc; color: #475569; } /* --- 第三層分類點開(不含英檢認證) --- */ .navbar-link.active-page{ color: #007bff !important; font-weight: normal; font-size: 1.015rem; } /* 第三層 (聽力等) 縮排 */ .sub-submenu > li > .submenu-link { font-size: 0.925rem; padding-left: 80px; } /* --- 第四層分類點開 --- */ .submenu-link.active-page { color: #007bff !important; font-weight: normal; background: #e3f1ff; font-size: 1.015rem; } /* --- 大標題 (Group) 的選中樣式：維持黑色 --- */ .navbar-title a.active-page, .navbar-title-one a.active-page { font-weight: normal; } /* --- 父層展開狀態 (例如 STYLE 被打開時) --- */ .navbar-item.open > .navbar-link { background: #e3f1ff; color: #d9534f; font-weight: normal; } /* --- STYLE/KITE/YLE... --- */ .submenu > li.open > .submenu-link { background: #f8fafc; color: #27548A; /* STYLE 等第二層標題變深藍 */ font-weight: normal; padding-left:50px; } /* 第一層箭頭 (〉) */ .navbar-link.has-submenu::after { content: "〉"; font-size: 0.8rem; color: #999; transition: transform 0.3s; } /* 第一層展開：旋轉箭頭 */ .navbar-item.open > .navbar-link.has-submenu::after { transform: rotate(90deg); } /* 第二層 (KITE等) 縮排與箭頭 (⌵) */ .submenu-link { padding-left: 30px; } .submenu-link.has-submenu::after { content: "⌵"; font-size: 1rem; color: #999; } .submenu > li.open > .submenu-link.has-submenu::after { transform: rotate(180deg); } /*搜尋頁面*/ .searchbar{ padding:10px 0 0 0; } .searchbar span{ padding: 0 0 0 15px; } .searchbar ul{ width:85%; margin:5px auto 15px auto; padding:5px 0 10px 0; } .searchbar ul:last-child{ margin-bottom:0; } .searchbar ul li{ border:1px solid #00a0e9; margin:5px 1px; display:inline-block; padding:3px 8px ; border-radius: 50px; cursor: pointer; } .searchbar ul li.active{ background:#3b82f6; color:#FFF; } .search-container div{ width: auto; margin:0; } /* 第一排佈局 */ .search-container .header-row { padding: 0 0 10px 0; margin:0 auto ; justify-content: space-between; /* 關鍵：左邊推到極左，右邊推到極右 */ } /* 左側：結果 + 筆數 */ .result-info { display: flex; align-items: center; gap: 10px; /* 圖示、文字、筆數之間的間距 */ } /* 右側：顯示模式 */ .mode-switcher { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 0; } .icon-group { display: flex; gap: 5px; } /* --- 模式按鈕切換顏色 --- */ .mode-btn { background: none; border: 1px solid #ddd; color: #9ca3af; cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.3s; } /* 被選中時變藍色 */ .mode-btn.active { color: #2563eb; background-color: #eff6ff; border-color: #2563eb; } /* 第二排：排序佈局 */ .filter-bar { display: flex; align-items: center; gap: 15px; padding: 10px 0 10px 55px; } /* 排序按鈕 */ .sort-item { background: white; border: 1px solid #d1d5db; padding: 4px 14px; border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; } .sort-item.active { background-color: #3b82f6; border-color: #3b82f6; color: white; } /*FOOTER*/ #TOP{ width:40px; height:40px; border-radius:10px; position:fixed; /*固定位置定位*/ bottom:10px; right:10px; text-align:center; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15 ) 0px 2px 6px 2px; opacity: 0.65; transition: opacity 0.5s ease; z-index: 9; display: none; } footer { padding:15px ; text-align: center; letter-spacing: 0.065rem; } footer ul { width:100%; min-width:1200px; display: flex; /* 讓主選單橫向排列 */ justify-content: center; gap: 80px; /* 選單間距 */ } footer ul li { padding:0; margin:0 0 15px 0; justify-content: center; } footer ul li ul { min-width: 120px; display: block; margin:5px 0 0 0; } footer ul li ul li { margin:5px 0; } footer iframe{ width:95%; display:block; margin:5px auto; } /*RWD隱藏*/ #TOP-MENU, #search-panel, #cart-panel, #menu-panel, footer BR{ display:none; } /*content*/ /*BANNER*/ .banner.slider { width:1200px; padding:0; margin:0 auto 10px auto; } .banner.slider img { width:100%; min-height:350px; height:auto; } .banner{ width:100%; height:auto; margin:0 auto 10px auto; } .banner_mobile{ display:none; } .page-header{ margin:0 0 20px 0; } .breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; /* 手機自動換行 */ } /*書籍整體區塊*/ .product{ margin:0 auto 20px auto ; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; border-radius: 10px; padding:10px 10px 0 10px; } .header-row { display: flex; align-items: center; margin:0 auto ; justify-content: space-between; /* 左右分散排列 */ justify-content: flex-start; gap: 10px; } img.icon { width: 35px; height: 35px; margin:0 0 0 10px; } .header-row h1 { font-weight:500; letter-spacing:1px; flex-grow: 1; /* 讓 h1 向右延展推開 more */ padding:5px 0 8px 0; margin: 0 0 ; } .b_tabs { display: flex; gap: 10px; list-style: none; margin: 0 0 0 auto; padding: 0 5px 0 0; font-weight:400; } .b_tabs li { margin: 0; padding: 0; } .b_tabs button, .more { all: unset; cursor: pointer; padding: 3px 10px; background: #EEE; border: 1px solid #ccc; transition: background-color 0.3s, color 0.3s; border-radius: 50px; font-size:0.95rem } .b_tabs li button:hover, .more:hover { background:#00a0e9; color:#FFF; } /* 選中項目樣式 */ .b_tabs li button.active { background:#00a0e9; color:#FFF; } .b_tab_container { width: 100%; display:block; height:auto; overflow:hidden; } .b_tab_content { position: absolute; left: 0; width: 100%; visibility: hidden; opacity: 0; /*transition: opacity 0.3s ease;*/ display: none; /* 預設完全隱藏 */ } .b_tab_content.active{ position: relative; visibility: visible; opacity: 1; display: block; /* 啟用時才顯示 */ } .product-item { height:auto; overflow:hidden; display: flex; flex-direction: column; /* 讓子元素垂直排列 */ align-items: center; /* 置中對齊 */ gap: 10px; /* 設定間距 */ padding: 0 ; margin:20px auto 10px auto; transition: all 0.3s; } .product-image { width:85%; height:195px; margin:0 auto; border: 1px solid #f0f0f0; } .product-image a img { width:100%; height:195px; object-fit:contain; text-align:center; } .product-title { width:85%; overflow:hidden; font-weight: 450; height:48px; align-content: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin:10px auto 10px auto; line-height:1.5; } .product-price { width:85%; margin:0 auto 0 auto ; height:55px; } .product-price .price{ padding:12px 0 8px 0; text-decoration: line-through; } .product_box .product-list { display: grid; /* 預設區塊模式 */ grid-template-columns: repeat(4,1fr); gap: 12px; /* 間距 */ } .product-buttons { /* display: flex; 讓兩個按鈕排成同一行 */ gap: 15px; /* 按鈕之間的間距 */ margin:10px auto 10px auto; text-align:center; } .product-buttons a{ padding:8px 10px; border-radius: 4px; text-decoration: none; text-align: center; font-weight: 500; flex: 1; transition: 0.3s; cursor: pointer; margin:0 3px; font-size: 0.875rem; } .product-buttons a:hover{ text-decoration: none; } .subcat-filter { width:auto; text-align:right; } .subcat-filter a { display:inline-block; padding: 5px 10px; background: #f5f5f5; border-radius: 5px; text-decoration: none; color: #333; margin:0 10px 0 0; } .subcat-filter a.active { background-color: #333; color: #fff; } .subcat-filter a:hover { background-color: #ccc; } /* --- 佈局工具 --- */ .search-container .header-row { display: flex; justify-content: space-between; /* 左右對齊核心 */ align-items: center; padding: 10px 0; } .result-info { display: flex; align-items: center; gap: 10px; } .mode-switcher, .icon-group { display: flex; align-items: center; gap: 8px; } /* --- 網格模式 (Grid View) --- */ .product-list.grid-view { } .product-detail { display: none; } /* --- 列表模式 (List View) --- */ .product-list.list-view { display: flex; flex-direction: column; /* 垂直排列 */ padding: 15px 0 0 0; } .list-view .product-item { width: 95%; height:auto; overflow:hidden; display: grid; /* 關鍵分欄：圖片區 150px | 文字區剩餘空間 | 按鈕區 150px */ grid-template-columns: 170px 1fr 150px; gap: 15px; padding: 10px 1% ; border: 1px solid #eee; margin:5px auto 5px auto; } .list-view .product-info { width:100%; height:auto; overflow:hidden; text-align: left; margin:0 auto; padding:0; } .list-view .product-title { width:100%; height:auto; overflow:hidden; } .list-view .product-price { width:100%; height:auto; overflow:hidden; } .list-view .product-price .price{ display:inline-block; } .list-view .product-buttons { flex-direction: column; /* 按鈕上下排，若要左右排改 row */ gap: 8px; } .list-view .product-buttons a{ display:block; margin:10px auto; } .list-view .product-detail { display: block; margin:15px auto 5px auto; } /* 分頁 */ /* ---------------------------------------------------- */ /* 基礎結構設定 */ /* ---------------------------------------------------- */ .pagination { display: flex; justify-content: center; /* 置中導覽列 */ margin: 15px 0; padding: 0; } .pagination__list { display: flex; /* 讓所有頁碼和按鈕並排 */ list-style: none; /* 移除列表標記 */ padding: 0; margin: 0; border-radius: 4px; overflow: hidden; /* 確保邊框和圓角在外層 */ } .pagination__item { margin: 0; } /* ---------------------------------------------------- */ /* 連結/按鈕樣式設定 */ /* ---------------------------------------------------- */ .pagination__link { display: block; padding: 8px 10px; text-decoration: none; min-width: 40px; /* 確保按鈕寬度一致 */ text-align: center; transition: background-color 0.2s; } /* ---------------------------------------------------- */ /* 狀態樣式設定 */ /* ---------------------------------------------------- */ /* 懸停 (Hover) 效果 */ .pagination__link:not(.is-active):not(.is-disabled):hover { background-color: #f0f0f0; color: #007bff; /* 懸停時強調色 */ } /* 當前頁碼 (Active) 狀態 */ .pagination__link.is-active { background-color: #007bff; /* 主色調背景 */ color: white; /* 白色文字 */ font-weight: bold; cursor: default; } /* 禁用 (Disabled) 狀態 (適用於第一頁或最後頁) */ .pagination__link.is-disabled { color: #aaa; background-color: #f7f7f7; cursor: not-allowed; } /* 頁數資訊顯示 */ .page-info { text-align: center; margin: 10px auto 15px auto; } /*商品頁*/ .product_detail{ width: 100%; height:auto; overflow:hidden; display: grid; grid-template-columns: 2fr 2fr; gap: 20px; margin:10px auto; padding: 0 1%; } /* SAMPLE */ /* Slider Container */ .product_detail .slider-container { width: 450px; height:auto; overflow:hidden; text-align: center; border-radius: 5px; margin:0 auto; } /* Main Slider */ .product_detail .slider { width: 380px; height:auto; overflow:hidden; margin:0 auto; padding:10px; } .product_detail .slider .cover { width: 370px; height:auto; overflow:hidden; display: flex; justify-content: center; /* Center the content horizontally */ align-items: center; /* Center the content vertically */ } /* Slide Images */ .product_detail .slider img { width:80%; height:auto; margin:0 auto; border: 1px solid #BABABA; } /* Thumbnail Slider Container */ .thumbnails-container { width:100%; margin:0 auto 5px auto; padding:5px 0; } thumbnails-container:after { content: ""; display: table; clear: both; } /* Thumbnail Slider */ div.thumbnails { background:rgba(242,242,242,0.65); } div.thumbnail-item { cursor: pointer; margin: 0 5px; } .thumbnail-item img { width: 98%; opacity: 0.6; border:1px solid #CCC; } .thumbnail-item.slick-current img { opacity: 1; border:1px solid #999; } /* Slick Arrow Styles */ .slick-prev-photo, .slick-next-photo { clear:both; width: 15px; height: 40px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; border:none; background:#8EC0E4; color: #FFF; content: none; cursor: pointer; border-radius: 0; padding: 0; line-height: 1; font-size:1em; } .slick-prev-photo { left: 0; } .slick-next-photo { right:0; } .slick-prev-photo:hover, .slick-next-photo:hover { background: rgba(0, 0, 1, 0.5); color:#FFF; } .slick-prev-photo:before, .slick-next-photo:before { background:#CDAF95; color: #FFF; } .slick-prev-photo:after { content: '‹'; } .slick-next-photo:after { content: '›'; } .slick-disabled { pointer-events: none; opacity: 0.5; background:#CCC; } .cetbooks_sale{ margin:10px 0; text-align:left; } .cetbooks_sale a{ display: inline-block; padding:3px 8px; background: #fff9e6; color: #e4002b; font-size:0.855rem; } .product_info{ width:430px; padding: 5px 0 0 0; margin:0; } /* 列表樣式 */ .info_list li { margin-bottom: 18px; } /* 標籤樣式 */ .info_list li span a { display: inline-block; padding: 3px 8px; background-color: #fff; border: 1px solid #ddd; border-radius: 20px; color: #444; text-decoration: none; transition: all 0.2s; margin:0 3px 0 3px ; } .info_list li span a:hover { background-color: #ff9800; color: #fff; border-color: #ff9800; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .price_section{ margin-top: 15px; } .price_section .price{ display:inline-block; text-decoration: line-through; } /* 活動說明 */ .book_active { width:94%; padding: 12px; margin: 20px 0; border-radius: 4px; } .active_title { margin: 0 0 5px 0; } .book_active li { margin: 5px 0; } .icon-tag::before { content: "🏷️"; /* 或者用 "\1F3F7" */ } /* 按鈕區域佈局 */ .product-action-bar { margin-top: 20px; display: flex; flex-direction: column; gap: 15px; } .buttons-group { display: flex; gap: 10px; } /* 按鈕樣式 */ .buttons-group .btn { padding: 10px 24px; border-radius: 4px; text-decoration: none; text-align: center; font-weight: bold; flex: 1; transition: 0.3s; cursor: pointer; } /* 醒目區塊樣式 */ .tag-container { width:92%; display: flex; flex-wrap: wrap; /* 如果標籤太多會自動換行 */ gap: 10px; /* 標籤之間的間距 */ margin: 25px 0 0 0; padding: 15px 15px; border-left: 4px solid #ff9800; /* 左側橘色線條增加質感 */ border-radius: 4px; } /* 標籤連結樣式 */ .tag-badge { display: inline-block; background-color: #f3f4f6; color: #4b5563; padding: 3px 12px; border-radius: 15px; border: 1px solid #d1d5db; text-decoration: none; /* 移除超連結下劃線 */ transition: all 0.2s ease-in-out; } /* 鼠標懸停效果：變色並稍微放大 */ .tag-badge:hover { background-color: #3b82f6; /* 變藍色 */ color: #ffffff; /* 文字變白色 */ border-color: #2563eb; transform: translateY(-1px); /* 輕微往上浮動 */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /*內容*/ .product_content{ margin:20px 0 10px 0; } .product_content h1{ padding:8px 0 5px 5px; font-weight: 550; color:#A52A2A; margin: 0 ; } /* --- 內文基礎樣式 --- */ .ck-content { padding:10px 10px 25px 10px; letter-spacing:1px; } /* --- 段落與標題 --- */ .ck-content h1 { border:none; padding: 0; background:none; font-size: 1.185rem; color: #3b3b3b; margin:5px 0; font-weight: 350; } .ck-content h2 { font-size:1.105rem; color: #111; font-weight: 350; } .ck-content h3 { font-size:0.985rem; color: #666; font-weight: 350; } .ck-content p{ font-size: 0.985rem; margin:5px 0; font-weight: 350; line-height:1.8; padding: 3px 0; } /* --- 超連結 --- */ .ck-content a { color: #3a5bc9; text-decoration: underline; transition: color 0.2s; } .ck-content a:hover { color: #1a36a8; } .ck-content strong{ font-weight:450; } /* --- 清單 --- */ .ck-content ul, .ck-content ol { padding-left: 2em; margin: 8px 0; } /* --- 表格 --- */ /* 表格卡片化 */ .ck-content table{ width: auto; border-collapse: separate; border-spacing: 0; background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.06); font-weight: 500; margin:10px 0; } /* 表頭 */ .ck-content table tbody tr:first-child { background:#eaf1ff; color: #1f2937; text-align: left; font-size: 15px; letter-spacing: .2px; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; text-align:center; } /* 優雅的第一欄（書名） */ .ck-content table tbody td:first-child{ color: #1f2937; } /* 內容儲存格 */ .ck-content table td{ padding: 14px 16px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; white-space: nowrap; text-align:center; } /* 斑馬紋 */ .ck-content table tbody tr:nth-child(odd){ background: #fafafa; } /* 滑過行高亮 */ .ck-content table tbody tr{ transition: background .2s ease, transform .05s ease; } .ck-content table tbody tr:hover{ background: color-mix(in oklab, #eaf1ff 55%, transparent); } /* 圓角只套在上下邊緣 */ .ck-content table tbody tr:last-child td:first-child{ border-bottom-left-radius:16px; } .ck-content table tbody tr:last-child td:last-child{ border-bottom-right-radius:16px; } /* --- 圖片 --- */ .ck-content img { /*max-width: 100%;*/ width:600px; height: auto; border-radius: 6px; box-shadow: 0 0 8px rgba(0,0,0,0.1); margin:10px 0; } .ck-content .media { /*max-width: 100%;*/ width:600px; height: auto; border-radius: 6px; box-shadow: 0 0 8px rgba(0,0,0,0.1); margin:20px 0 0 0; } /* --- 代碼區 --- */ .ck-content code { background: #f7f7f7; border: 1px solid #ddd; border-radius: 4px; padding: 2px 4px; font-family: "Courier New", monospace; font-size: 0.95em; } /* ===================================================== Highlight 樣式（螢光筆與筆色） ===================================================== */ .ck-content mark { border-radius: 3px; padding: 0 2px; } /* 背景螢光筆類型 */ .ck-content mark.marker-yellow { background-color: #fff176; } .ck-content mark.marker-green { background-color: #a5d6a7; } .ck-content mark.marker-blue { background-color: #90caf9; } .ck-content mark.marker-orange { background-color: #ffcc80; } .ck-content mark.marker-pink { background-color: #FFA4A4; } .ck-content mark.marker-red { background-color: #ef9a9a; } .ck-content mark.marker-gray { background-color: #e0e0e0; color: #333; } /* 筆色類型（文字顏色） */ .ck-content mark.pen-red { background: none; color: #d32f2f; font-weight: bold; } .ck-content mark.pen-green { background: none; color: #388e3c; font-weight: bold; } .ck-content mark.pen-blue { background: none; color: #1565c0; font-weight: bold; } /* ===================================================== 會員區塊 ===================================================== */ /* --- 基礎佈局 --- */ .account-container { max-width: 1200; margin: 0 auto; align-items: flex-start; } /* --- 左側側欄 (220px) --- */ .account-sidebar { flex: 0 0 220px; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .side-nav a { display: block; padding: 15px 20px; color: #475569; text-decoration: none; border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; font-weight:normal; font-size:1.025rem; } /* 當前頁面標示 */ .side-nav li.active a { background-color: #00a0e9; color: #ffffff; } .side-nav a:hover:not(.active) { background-color: #f8fafc; color: #00a0e9; padding-left: 25px; /* 滑鼠移過往右滑 */ } /* --- 右側內容區 --- */ .account-main{ flex: 1; } .info-block { border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 30px; margin: 0 0 25px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } /* --- 資格卡片特殊背景 --- */ .info-block.qualification { border: 1px solid #00a0e9; } /* 標題裝飾 */ .info-title { margin: 0 0 25px 0; padding-bottom: 10px; border-bottom: 2px solid #00a0e9; display: inline-block; } /* --- 清單與勾選圖示 --- */ .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { position: relative; padding-left: 32px; margin-bottom: 15px; line-height: 1.7; } /* 藍色勾選圓圈 */ .info-list li::before { content: '✓'; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background: #00a0e9; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; } /* 強調文字與備註 */ .info-list span { font-weight: 700; } .info-list small { display: block; margin-top: 5px; } .login-container { max-width: 450px; /* 登入框不宜過寬，置中較美觀 */ margin: 0 auto ; padding: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; border-radius: 10px; } .register-container { max-width: 700px; /* 註冊欄位較多，比登入框稍微寬一點 */ } .account-card { width: 100%; padding: 40px; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .account-header { text-align: center; margin-bottom: 30px; } .account-title { margin: 0 0 10px 0; } .account-subtitle { margin: 0; } .account-link { color: #00a0e9; font-weight: 600; margin-left: 5px; } .account-link:hover { text-decoration: underline; } /* 彈跳視窗背景 */ .openModal{ cursor: pointer; } .modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); } /* 彈跳視窗內容 */ .modal-content { background: #FFF; padding: 10px; border-radius: 10px; max-width: 500px; /* 登入框不宜過寬，置中較美觀 */ margin: 5% auto 5% auto; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); animation: fadeIn 0.3s ease-in-out; } #messageBox { font-size: 15px; line-height: 1.6; animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* 關閉按鈕 */ .close { float: right; font-weight: bold; cursor: pointer; } /* 服務條款內容滾動區 */ .terms-body { max-height: 60vh; overflow-y: auto; padding: 0 20px; } .terms-body h3 { margin-top: 15px; color: #007bb5; font-size: 1rem; } .terms-body ul { font-size: 0.9rem; margin: 10px 0; padding-left: 30px; color: #555; } .terms-body ul li { margin-bottom: 8px; line-height: 1.6; } .terms-body ul li ul { padding-left: 20px; list-style-type: decimal; } .subscription-grid { padding: 20px; border-radius: 10px; } .promo-banner { margin: 20px 0; padding: 15px; background: #fff; border: 1px dotted #00a0e9; border-radius: 8px; } .social-links { display: flex; gap: 10px; } .social-links a { color: #00a0e9; border: 1px solid #00a0e9; padding: 4px 10px; border-radius: 15px; } .social-links a:hover { color: #FFF; background:#00a0e9; text-decoration: none; } /* 頁籤導覽 */ .tab_nav { display: flex; list-style: none; padding: 0; margin-bottom: 20px; } .tab_nav li { margin-right: 15px; } .tab_nav li a { display: block; padding: 10px 20px; text-decoration: none; color: #666; font-weight: bold; transition: 0.3s; } /* 模擬選中狀態 (你可以透過 ASP 判斷 class="active") */ .tab_nav li a:hover, .tab_nav li.active a { color: #0077cc; border-bottom: 3px solid #0077cc; margin-bottom: -2px; } .tab_nav li.right-align { margin-left: auto; margin-right: 0; } .tab_nav li.right-align a { color: #FFF; border-radius: 4px; padding: 10px 20px; } /* 模擬選中狀態 (你可以透過 ASP 判斷 class="active") */ .tab_nav li.right-align a:hover { color: #FFF; border-bottom: none; margin-bottom:0; background:#0077cc; } /* 優惠券清單佈局 */ .coupon_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding: 0; list-style: none; } /* 票券造型設計 */ .coupon_list li { display: flex; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.05)); position: relative; } /* 左側金額區 */ .coupon_money { width: 100px; display: flex; align-items: center; justify-content: center; font-weight: bold; padding: 10px; border-right: 2px dashed rgba(255,255,255,0.5); } /* 不同狀態的顏色 */ .coupon_list li.used .coupon_money, .coupon_list li.expired .coupon_money { background: #bdc3c7 !important; /* 已使用或逾期變灰色 */ } /* 右側詳細內容 */ .coupon_detail { padding: 15px; flex: 1; } .title_caption { margin: 0 0 5px 0; font-weight: bold; } .title_info { margin: 0 0 8px 0; } .title_date { margin: 0 0 10px 0; } .title_link a { font-size: 0.85em; color: #4a90e2; } .note { margin-top: 30px; padding: 20px; border: 1px dashed #ccc; border-radius: 8px; line-height:1.5; } /* ===================================================== 購物車區塊 ===================================================== */ .carshop-main { width: 1200px; margin: 5px auto; padding: 0 ; } /* --- 進度條 (Step Menu) --- */ #menu { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 5px auto 5px auto; max-width: 1000px; position: relative; } #menu li { flex: 1; text-align: center; position: relative; color: #999; font-size: 15px; } /* 步驟圓圈 */ #menu li span { width: 36px; height: 36px; line-height: 36px; display: block; margin: 0 auto 12px; background: #e0e0e0; border-radius: 50%; color: #fff; font-weight: bold; position: relative; z-index: 2; transition: 0.3s; } /* 連接線 */ #menu li:not(:last-child)::after { content: ""; position: absolute; top: 18px; /* 圓圈中心點 */ left: 50%; width: 100%; height: 2px; background-color: #eee; z-index: 1; } /* 當前步驟亮色樣式 (主藍色) */ #menu li.current { color: #27548A; /* 深藍文字 */ font-weight: bold; } #menu li.current span { background: #00a0e9; /* 主藍色 */ box-shadow: 0 0 0 4px rgba(0, 160, 233, 0.2); } #menu li.current::after { background-color: #00a0e9; } /* 空購物車外容器 */ .empty-cart-container { padding: 80px 20px; text-align: center; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin: 20px 0; } /* 內容區塊 */ .empty-cart-content { max-width: 400px; margin: 0 auto; } /* 圖示樣式 */ .empty-icon { font-size: 80px !important; color: #ddd; margin-bottom: 20px; } /* 文字樣式 */ .empty-cart-content h2 { font-size: 24px; color: #333; margin-bottom: 15px; } .empty-cart-content p { font-size: 16px; color: #777; line-height: 1.6; margin-bottom: 30px; } /* 按鈕容器 */ .empty-cart-actions { display: flex; gap: 15px; justify-content: center; } /* 按鈕共用樣式 */ .empty-cart-actions .btn-primary, .empty-cart-actions .btn-outline { padding: 12px 30px; border-radius: 25px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; font-size: 15px; } .product-list-add-on { display: grid; /* 預設區塊模式 */ grid-template-columns: repeat(6,1fr); gap: 12px; /* 間距 */ } .info-list li.postdata { position: relative; padding-left: 0; margin-bottom: 15px; line-height: 1.7; } @media screen and ( max-width: 768px ){ *{ box-sizing:border-box; /* 讓 padding 與 width 解除關係 */ } html,body{ -webkit-text-size-adjust:none; /* iPhone 旋轉後文字不要放大 */ } header, aside, .mode-switcher, .banner{ display:none; } .banner_mobile{ display:block; } .banner_mobile a img { width:100%; height:auto; object-fit:contain; } /* 上方列 */ #TOP-MENU { position: fixed; top: 0; display: flex; align-items: center; justify-content: space-between; padding:10px; z-index: 50; } #TOP-MENU img { width:95%; height:auto; } #TOP-MENU ul { list-style: none; margin: 0; padding: 0; display: flex; } #TOP-MENU li a { padding: 5px; display: inline-flex; align-items: center; } /* --- 共用 panel 基本設定 --- */ #search-panel, #cart-panel, #menu-panel { display:block; position: fixed; z-index: 9999; box-shadow: 0 3px 10px rgba(0,0,0,0.2); transition: 0.3s ease; overflow-y: auto; /* ⭐超過高度會出現卷軸 */ } /* --- search：從上面滑下來 --- */ .search { margin:0; } #search-panel { top: -80px; /* 一開始藏在上面 */ left: 0; width: 100%; padding: 10px 15px; display: flex; gap: 10px; } .search-btn { padding: 0 12px; display: flex; align-items: center; justify-content: center; position: static; margin:0; } #search-panel.active { top: 60px; /* 顯示位置（在 TOP-MENU 下） */ } /* --- cart：從左邊滑出 --- */ #cart-panel { top: 0; left: -70%; width: 70%; height: 100vh; padding: 20px; } #cart-panel.active { left: 0; } /* --- menu：從左邊滑出 --- */ #menu-panel { top: 0; left: -70%; width: 70%; height: 100vh; padding: 0; } #menu-panel ul { padding-left: 20px; } #menu-panel.active { left: 0; } #menu-panel .navbar_mobile { width: 100%; height: auto; margin: 0; padding: 10px 0 20px; box-sizing: border-box; padding:5px; } #menu-panel .navbar_mobile ol, #menu-panel .navbar_mobile ul { list-style: none; margin: 0; padding: 0; } /*購物車*/ #cart-panel .shopcar-content{ width:100%; display:block; position: static; margin:20px auto; } .shopcar-content li:last-child a{ margin-top:10px; float:none; display:block; text-align:center; } /* 簡單做個半透明背景（點一下可以關閉） */ #overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 900; display: none; } #overlay.active { display: block; } section, body.no-fixed-header section { width:100%; margin:55px auto 0 auto; padding: 0 2.5%; } footer ul { min-width: auto; /* 🔥 必須覆蓋掉 */ } footer ul li{ display:none; } footer ul li:last-child{ display:block; } /*BANNER*/ .banner.slider { width:100%; } .banner.slider img { min-height:auto; } .header-row { display: block; } img.icon { width: 30px; height: 30px; margin:0 10px 0 10px; float:left; } .b_tabs, .subcat-filter { display: flex; gap: 10px; list-style: none; margin:15px 10px 0 10px; /* 👇 新增或修改以下屬性 */ overflow-x: auto; /* 啟用水平滾動條 */ white-space: nowrap; /* 確保內容不換行 */ flex-wrap: nowrap; /* 確保 flex 子項不換行 */ /* 建議在手機瀏覽器上隱藏滾動條，但保留滾動功能 */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* 隱藏 WebKit 瀏覽器 (Chrome, Safari) 的滾動條 */ .b_tabs::-webkit-scrollbar { display: none; } .b_tabs li { /* 確保 li 元素不會被壓縮 */ flex-shrink: 0; padding: 0; } .b_tab_content.active { position: relative; /* 顯示時佔據空間 */ visibility: visible; /* 顯示內容 */ opacity: 1; } .page-header{ margin:20px 0 10px 10px; } /* 右側 */ main { width: 100%; } .product-buttons { display: flex; gap: 5px; } .more{ position: absolute; padding: 3px 5px; margin-top:-30px; right:5%; } .product-buttons a{ margin:0 auto; padding:5px 2px; font-size:14px; } .product_box { padding:3px 5px; } .product_box .product-list { grid-template-columns: repeat(2, 1fr); } .product-item { gap: 5px; /* 設定間距 */ padding: 0 0 ; } /* 搜尋 */ .filter-bar { gap: 5px; padding: 10px 0 10px 15px; } .product_detail{ width: 98%; display: block; gap: 0; margin:5px auto; padding: 0 ; } .product_detail .slider-container { width: 100%; } .product_detail .slider { width: 90%; } .product_detail .slider .cover { width: 95%; display: block; } .product_info{ width: 98%; margin:0 auto; } .info_list li span a { padding: 0 5px; } .book_active { width:100%; } .tag-container { width:100%; margin: 25px 0 0 0; padding: 10px; } .ck-content p{ font-size: 0.935rem; } /* --- 表格 --- */ /* 表頭 */ .ck-content table tbody tr:first-child { padding: 12px 15px; } /* 內容儲存格 */ .ck-content table td{ padding: 12px 15px; } /* --- 圖片 --- */ .ck-content img { width:80%; margin:10px auto; } .ck-content .media { width:100%; height: auto; border-radius: 6px; box-shadow: 0 0 8px rgba(0,0,0,0.1); margin:15px 0 0 0; } .account-container { flex-direction: column; padding: 0 15px; gap: 10px; } .account-sidebar { width: 100%; flex: 0 0 100%; border-radius: 8px; overflow-x: auto; /* 開啟水平捲動 */ overflow-y: hidden; margin: 10px auto; display:block; } /* 2. 清除 ul 預設樣式並改為 Flex 橫排 */ .side-nav ul { display: flex; /* 橫向排列核心 */ list-style: none; /* 移除點點 */ padding: 0; margin: 0; white-space: nowrap; /* 重要：強制文字不換行 */ } /* 3. 調整清單項目 */ .side-nav li { flex: 0 0 auto; /* 不壓縮，維持內容寬度 */ } /* 4. 調整連結樣式（橫向版） */ .side-nav a { display: inline-block; padding: 12px 20px; border-bottom: none; /* 取消原本垂直的底線 */ border-right: 1px solid #f1f5f9; /* 改為右側隔開線 */ font-size: 0.95rem; } /* 5. 處理最後一個項目的邊框 */ .side-nav li:last-child a { border-right: none; } /* 6. 修正手機版 hover 效果，避免位移 */ .side-nav a:hover:not(.active) { padding-left: 20px; /* 取消電腦版的右滑位移，避免手機點擊感奇怪 */ background-color: #f8fafc; } .info-block { padding: 20px 15px; margin: 0 0 20px 0; } .tab_nav li { margin-right: 5px; } .tab_nav li a { padding: 10px 5px; } .tab_nav li.right-align a { padding: 10px 5px; } .coupon_list { grid-template-columns: 1fr; } #menu li:not(:last-child)::after { top: 10px; /* 配合手機版圓圈變小調整高度 */ } .empty-cart-actions { flex-direction: column; } .empty-icon { font-size: 60px !important; } /*選單*/ body > nav.menu{ display: none ; } /* 基礎容器設定 */ #menu-panel { max-width: 100%; font-family: "Microsoft JhengHei", "PingFang TC", sans-serif; background-color: #fff; } #menu-panel p { background-color: #f8f9fa; padding: 12px 15px; margin: 0; font-weight: bold; color: #495057; border-bottom: 1px solid #dee2e6; border-left: 4px solid #00a0e9; font-size: 1rem; } /* 基礎結構：讓標題與連結變為 flex 容器，使箭頭能靠右 */ .navbar-title, .navbar-title-one, .navbar-link, .submenu-link { display: flex !important; align-items: center; justify-content: space-between; /* 讓文字在左，箭頭在右 */ padding: 15px 20px; position: relative; text-decoration: none; font-size:0.925rem; } .navbar-title a, .navbar-title-one a, .navbar-link a, .submenu-link a{ font-size:0.925rem; } /* 統一箭頭符號 (⌵) */ .navbar-title::after, .navbar-link.has-submenu::after, .submenu-link.has-submenu::after { content: "⌵"; font-size: 1.12rem; color: #999; transition: transform 0.3s; margin-left: auto; /* 強制推到最右邊 */ } /* 展開時的箭頭旋轉 (轉 180 度) */ .navbar-title.open::after, .navbar-item.open > .navbar-link.has-submenu::after, .submenu li.open > .submenu-link.has-submenu::after { transform: rotate(180deg); } /* 強制隱藏檢定考試的第四層 */ .navbar-list:has(a[href*="category=英檢認證"]) .sub-submenu { display: none !important; } /* 隱藏檢定考試第三層的箭頭（因為要直接跳轉，不展開） */ .navbar-list:has(a[href*="category=英檢認證"]) .submenu > li > .submenu-link::after { display: none !important; } /* 修正縮排：讓文字有層次感，但箭頭位置依然靠右 */ .navbar-link { padding-left: 20px; } .submenu-link { padding-left: 40px; } .sub-submenu .submenu-link { padding-left: 60px; } .info-list li { position: static; padding-left: 0; margin-bottom: 5px; line-height: 1.5; } }