@charset "utf-8"; .skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#2f829b;padding:9px 15px;font-weight:bold;z-index:500;border:1px solid #2f829b;border-radius:0 0 6px 0} .skip-link:focus{left:0} /* ============ 20_painfree responsive layer ============ Loaded AFTER the per-page bundle, so the rules below win at every width. Only the >=995px desktop tier is expected to differ from the legacy render. */ .cta-mobile, .logo-txt{ display:none!important; } /* ============ HEADER — ONE alignment rule for all four tiers ============ The three groups (logo | phone+WhatsApp | 語言+診所) must share a single bottom line at every viewport. Previously: - #logo was position:absolute;top:9px -> it never took part in the row's alignment, so its bottom landed wherever top+height happened to fall; - #bg-index-header-contactus-td was display:block -> its inline content was top-anchored instead of aligned, so the phone block floated 25px high; - #lang had border-top:15px + height:22px, a vertical-offset hack that made the two

lines collide once the text wrapped at tablet widths. Desktop bottoms measured 95 / 80 / 92px; tablet spilled the logo 6-8px out of the 60px band. The row is now a single flex line, items bottom-aligned. */ #infobar{ padding-bottom:8px!important; box-sizing:border-box; } #infobar table, #infobar table tbody, #infobar table tr{ display:flex!important; align-items:flex-end!important; width:100%; gap:24px!important; /* breathing space between the clinic name and the CTA. Without it the two touch at 320-360px. */ } #infobar table tr td{ display:block!important; width:auto!important; height:auto!important; padding:0; text-align:left; vertical-align:bottom; } #infobar table tr td#logoTd{ flex:1 1 auto; min-width:0; } #infobar table tr td#Layer1Td{ display:none!important; } /* empty spacer, no longer needed */ #infobar table tr td#bg-index-header-contactus-td{ flex:0 0 auto!important; display:flex!important; align-items:flex-end!important; justify-content:flex-end!important; width:auto!important; text-align:right; } #infobar table tr td:last-child{ flex:0 0 auto!important; } #infobar #logo{ position:static!important; display:block; flex:0 0 auto; background:url(../images/logo.webp) no-repeat left bottom!important; background-size:contain!important; aspect-ratio:2638/384; height:auto!important; max-width:100%; } #infobar p{ width:auto!important; height:auto!important; white-space:nowrap; } #infobar p#lang{ border-top:0!important; padding-left:0; } /* ---- breadcrumb + 語言 row ------------------------------------------------ Sits directly UNDER the nav menu, and at every width - not just mobile. Kept deliberately short: one 14px line plus a hairline rule, so it costs ~15px of vertical space instead of the ~30px it used to take. */ .mob-bar{ display:flex!important; align-items:center; justify-content:space-between; padding:0; margin:4px 0 8px; border-bottom:1px solid #ececec; } .bc{ font-family:"新細明體",Arial,sans-serif; font-size:11px; line-height:14px; color:#8a9499; font-weight:normal; } .bc a{ color:#2f829b; text-decoration:none; } .bc .sep{ margin:0 3px; color:#c4ccd0; } .bc .cur{ color:#5d5d5d; } .mob-lang{ margin:0!important; float:none!important; width:auto!important; height:auto!important; display:flex; align-items:center; gap:6px; padding:0!important; font-family:"新細明體",Arial,sans-serif; font-size:11px; line-height:14px; color:#8a9499; } .mob-lang a{ color:#8a9499; text-decoration:none; padding:0 5px; line-height:14px; border-radius:3px; } .mob-lang a.on{ color:#2f829b; font-weight:bold; background:#eaf2f5; } /* 語言 + 診所 now live in the breadcrumb row, so the header block is redundant at every width - dropping it also frees ~145px of header width on desktop. */ #infobar td:last-child{ display:none!important; } .mob-lang .loc{ margin-left:10px; padding-left:10px; border-left:1px solid #dfe6e9; } .mob-lang .loc-a{ padding:0 0 0 5px!important; color:#2f829b!important; } /* ============ STICKY HEADER + NAV - ALL TIERS ============ Sticky used to be mobile-only. It is now on at every width: the header carries the phone/WhatsApp CTA and the nav is only 7 links, so keeping both on screen while the reader scrolls is worth the vertical cost - and that cost is LOWER on tablet/desktop than on mobile, which was already sticky: tier header nav stack share of a 1000px viewport <=576 mobile 56 90 146 15.0% 577-767 tablet 68 38 106 10.6% 768-1049 tablet-wide 68 38 106 10.6% >=1050 desktop 85 36 121 12.1% --stick-h is the whole stack, so it drives BOTH #topmenu's `top` and html's scroll-padding-top. Declare it once per tier and the two cannot drift apart. #top is un-boxed because it is only a wrapper around the three bands - with a box of its own it would clip the sticky children. */ :root{ --hdr-h:56px; --nav-h:90px; --stick-h:146px; --warp-pad:10px; } #top{ display:contents; } #infobar{ position:sticky; top:0; z-index:210; background:#fff; height:var(--hdr-h)!important; box-sizing:border-box; margin:0 calc(var(--warp-pad) * -1); padding:0 var(--warp-pad)!important; } /* the nav parks directly under the header; the shadow sits on the nav because it is the bottom edge of the stack, so no seam shows between the two white bands */ #topmenu{ position:sticky; top:var(--hdr-h); z-index:200; background:#fff; margin:0 calc(var(--warp-pad) * -1) 4px!important; padding:0 var(--warp-pad); box-shadow:0 2px 6px rgba(0,0,0,.08); } /* explicitly NOT sticky: banner + breadcrumb row scroll away with the content */ #banner, .mob-bar, #conent{ position:static; } /* anchor landings must clear the sticky stack, or the target heading ends up hidden underneath it. +14px so the heading has air above it, not just clearance. */ html{ scroll-padding-top:calc(var(--stick-h) + 14px); } @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } @media (max-width:576.98px){ html,body{ overflow-x:clip; } #warpper{ width:100%!important; padding:0 10px!important; box-sizing:border-box; } /* the legacy 3px corner-decoration

elements carry no text. NOTE: this used to be a bare `.con div p`, which matched EVERY paragraph inside a #DivN block and hid the entire body text on mobile (minor: 27/27 paragraphs). Scope it to the four corner ids, or a genuinely empty

. */ #topmenu p, #banner p, #menu ul li div p:empty, .con div p:empty, #menu ul li div p#tleft, #menu ul li div p#tright, #menu ul li div p#bleft, #menu ul li div p#bright, .con div p#tleft, .con div p#tright, .con div p#bleft, .con div p#bright{ display:none!important; } /* ---- HEADER: clinic name left, 聯絡我們 CTA right. nothing else ---- */ #infobar{ border-bottom:1px solid #ececec; } #infobar #logo{ width:250px!important; } #infobar #lang, #infobar #cinic{ display:none!important; } #infobar table tr td#bg-index-header-contactus-td img{ display:none!important; } /* the combined phone+WhatsApp image is desktop/tablet ONLY */ #infobar .hdr-contact, #infobar .hdr-contact img, #infobar .hdr-contact a{ display:none!important; } /* deliberately restrained - it sits beside the logo, so it must not shout. 40px tall / 15px / 16px padding was too dominant; 34px / 14px / 13px reads as a control. */ .cta-mobile{ display:inline-flex!important; align-items:center; justify-content:center; min-height:34px; padding:0 13px; background:#2f829b; color:#fff!important; font-family:"新細明體",Arial,sans-serif; font-weight:bold; font-size:14px; text-decoration:none; border-radius:8px; white-space:nowrap; letter-spacing:.02em; } /* on 聯絡我們 / 多謝查詢 the CTA is the current page -> darker fill */ .cta-mobile.active{ background:#0f4d60!important; } #banner{ margin-top:4px; } #banner img{ max-width:100%; height:auto; display:block; margin:0 auto; } #topmenu{ display:flex!important; height:auto!important; } #topmenu p{ display:none!important; } #topmenu a{ float:none!important; width:auto!important; flex:1 1 0; min-width:0; box-sizing:border-box; white-space:nowrap; text-align:center; } #menu{ float:none!important; width:100%!important; background:none!important; height:auto!important; min-height:0!important; border-bottom:1px solid #d3d3d3; padding-bottom:8px; margin-bottom:14px; } #menu ul{ display:grid; gap:8px; width:100%!important; } #menu ul #listtop{ grid-column:1 / -1; } #menu ul li{ padding:0 0 4px 0!important; } #menu ul li a{ width:auto!important; box-sizing:border-box; } #menu ul li div{ width:auto!important; max-width:100%; } #menu ul li img{ max-width:100%; height:auto; } .con, #con2{ float:none!important; width:100%!important; padding-left:0!important; } .con div, .con ul, .con .ep, .con p{ width:auto!important; max-width:100%; } #bottommenu a{ display:inline-block; padding:6px 7px; font-size:15px; } /* ---- NAV: 6 items = 2 rows x 3 (聯絡我們 now lives in the header) ---- */ /* The negative margin MUST match the global #topmenu rule. This line used to set `margin:0 0 12px!important`, which cancelled the full-bleed margin while the compensating 10px padding still applied - so the button grid started 10px further in than the hero and looked narrower than it. */ #topmenu{ display:grid!important; grid-template-columns:repeat(3,1fr); margin:0 calc(var(--warp-pad) * -1) 12px!important; } #topmenu a{ min-height:46px; display:flex!important; align-items:center; justify-content:center; padding:0 2px!important; font-size:14px!important; line-height:1.25; margin:0 -1px -1px 0; } /* topmenu_bg.gif is a 1x72 strip: rows 0-35 = normal, rows 36-71 = dark teal (shown by the desktop rule via `left -36px`). A 46px-tall mobile cell lets the strip overflow and exposes rows 36-45 as a stray dark bar under every button, so mobile uses flat fills and an explicit active state instead. */ #topmenu a{ background:#fbfeff!important; } #topmenu a:hover, #topmenu a.currp{ background:#0f4d60!important; color:#fff!important; } #topmenu a.nav-contact{ display:none!important; } #menu ul{ grid-template-columns:repeat(2,1fr); } #conent, #conent *{ max-width:100%!important; box-sizing:border-box; } #conent table{ width:100%!important; table-layout:fixed; border-collapse:collapse; } #conent th, #conent td{ width:auto!important; padding-left:4px!important; padding-right:4px!important; word-wrap:break-word; overflow-wrap:break-word; } #conent img, #conent iframe, #conent embed, #conent object{ max-width:100%!important; height:auto; } #footer{ width:100%!important; height:auto!important; } #footer table{ width:100%!important; } #footer table td{ width:auto!important; } /* sticky is declared globally near the top of this file; this tier only needs the header's contents centred inside its fixed 56px band. */ #infobar{ display:flex; align-items:center; } #infobar table{ height:auto; } } @media (min-width:577px) and (max-width:767.98px){ /* sticky stack for this tier: header 68 + nav 38 = 106, and the wrapper's horizontal padding so the sticky bands stay full-bleed */ :root{ --hdr-h:76px; --nav-h:38px; --stick-h:114px; --warp-pad:12px; } #warpper{ width:100%!important; padding:0 12px!important; box-sizing:border-box; } /* The band is exactly --hdr-h and the sticky nav butts against it, but the row must not sit flush on the bottom edge: 8px above and below keeps the clinic name clear of the band's lower border. 76 = 60px row + 8 + 8. */ #infobar{ display:flex; align-items:center; padding:8px var(--warp-pad)!important; } /* narrow tablet: 語言/診所 cannot fit beside the phone block at a legible size, so it moves to the breadcrumb row (same as mobile) and the header keeps logo + phone+WhatsApp, bottom-aligned. */ #infobar #lang, #infobar #cinic{ display:none!important; } #infobar #logo{ width:260px!important; } /* desktop is content-box: height:25px + 8/3 padding + 1px border = 37px. With border-box (needed for flex) that padding was absorbed INTO the 25px, giving a 25px button - the padding looked 'buried' and the row looked thin. */ #topmenu a{ box-sizing:content-box!important; height:25px!important; padding:8px 0 3px!important; font-size:14px!important; } #conent{ max-width:720px; margin:0 auto; } #menu ul{ grid-template-columns:repeat(3,1fr); } #banner{ margin-top:4px; } #banner img{ max-width:100%; height:auto; display:block; margin:0 auto; } #topmenu{ display:flex!important; height:auto!important; } #topmenu p{ display:none!important; } #topmenu a{ float:none!important; width:auto!important; flex:1 1 0; min-width:0; box-sizing:border-box; white-space:nowrap; text-align:center; } #menu{ float:none!important; width:100%!important; background:none!important; height:auto!important; min-height:0!important; border-bottom:1px solid #d3d3d3; padding-bottom:8px; margin-bottom:14px; } #menu ul{ display:grid; gap:8px; width:100%!important; } #menu ul #listtop{ grid-column:1 / -1; } #menu ul li{ padding:0 0 4px 0!important; } #menu ul li a{ width:auto!important; box-sizing:border-box; } #menu ul li div{ width:auto!important; max-width:100%; } #menu ul li img{ max-width:100%; height:auto; } .con, #con2{ float:none!important; width:100%!important; padding-left:0!important; } .con div, .con ul, .con .ep, .con p{ width:auto!important; max-width:100%; } #bottommenu a{ display:inline-block; padding:6px 7px; font-size:15px; } #conent, #conent *{ max-width:100%!important; box-sizing:border-box; } #conent table{ width:100%!important; table-layout:fixed; border-collapse:collapse; } #conent th, #conent td{ width:auto!important; padding-left:4px!important; padding-right:4px!important; word-wrap:break-word; overflow-wrap:break-word; } #conent img, #conent iframe, #conent embed, #conent object{ max-width:100%!important; height:auto; } #footer{ width:100%!important; height:auto!important; } #footer table{ width:100%!important; } #footer table td{ width:auto!important; } } /* The legacy desktop layout is a fixed 980px box, and the original stylesheet pairs `.con{width:725px}` with `.con p{width:757px}` (unchanged here - it is legacy behaviour on the live site too), so those paragraphs stick ~19px past the 980px wrapper. Once the window is narrower than 980 + scrollbar the page therefore gains a horizontal scrollbar. Running the fluid tier up to 1049.98px keeps the fixed 980px layout for genuine desktops only. */ @media (min-width:768px) and (max-width:1049.98px){ /* sticky stack for this tier: header 68 + nav 38 = 106, and the wrapper's horizontal padding so the sticky bands stay full-bleed */ :root{ --hdr-h:76px; --nav-h:38px; --stick-h:114px; --warp-pad:14px; } #warpper{ width:100%!important; padding:0 14px!important; box-sizing:border-box; } /* same as the narrow tablet tier: fixed band, row centred, nav flush below, with 8px of air above and below the row */ #infobar{ display:flex; align-items:center; padding:8px var(--warp-pad)!important; } #infobar #logo{ width:340px!important; } #topmenu a{ box-sizing:content-box!important; height:25px!important; padding:8px 0 3px!important; font-size:15px!important; } #conent{ max-width:860px; margin:0 auto; } #menu ul{ grid-template-columns:repeat(4,1fr); } #banner{ margin-top:4px; } #banner img{ max-width:100%; height:auto; display:block; margin:0 auto; } #topmenu{ display:flex!important; height:auto!important; } #topmenu p{ display:none!important; } #topmenu a{ float:none!important; width:auto!important; flex:1 1 0; min-width:0; box-sizing:border-box; white-space:nowrap; text-align:center; } #menu{ float:none!important; width:100%!important; background:none!important; height:auto!important; min-height:0!important; border-bottom:1px solid #d3d3d3; padding-bottom:8px; margin-bottom:14px; } #menu ul{ display:grid; gap:8px; width:100%!important; } #menu ul #listtop{ grid-column:1 / -1; } #menu ul li{ padding:0 0 4px 0!important; } #menu ul li a{ width:auto!important; box-sizing:border-box; } #menu ul li div{ width:auto!important; max-width:100%; } #menu ul li img{ max-width:100%; height:auto; } .con, #con2{ float:none!important; width:100%!important; padding-left:0!important; } .con div, .con ul, .con .ep, .con p{ width:auto!important; max-width:100%; } #bottommenu a{ display:inline-block; padding:6px 7px; font-size:15px; } #conent, #conent *{ max-width:100%!important; box-sizing:border-box; } #conent table{ width:100%!important; table-layout:fixed; border-collapse:collapse; } #conent th, #conent td{ width:auto!important; padding-left:4px!important; padding-right:4px!important; word-wrap:break-word; overflow-wrap:break-word; } #conent img, #conent iframe, #conent embed, #conent object{ max-width:100%!important; height:auto; } #footer{ width:100%!important; height:auto!important; } #footer table{ width:100%!important; } #footer table td{ width:auto!important; } } /* ============ desktop: the fixed-980px legacy layout, header realigned ============ */ @media (min-width:1050px){ /* sticky stack for this tier: header 85 + nav 36 = 121, and the wrapper's horizontal padding so the sticky bands stay full-bleed */ :root{ --hdr-h:85px; --nav-h:36px; --stick-h:121px; --warp-pad:0px; } #infobar #logo{ width:440px!important; } /* 85 = 64px logo row + 10 + 10, so the clinic name clears the lower border */ #infobar{ height:85px; padding:10px var(--warp-pad)!important; } #infobar table{ height:100%; } } /* footer 健康資訊 strip: inline-block items so text wraps between links, not mid-word */ #footer table,#footer tbody,#footer tr{display:block} #footer table td{display:inline-block;width:auto;padding:2px 3px;vertical-align:top;text-align:left} /* header contact block: one crisp 2x image with two tap targets (desktop + tablet only) */ #infobar table tr td#bg-index-header-contactus-td{text-align:right} .hdr-contact{position:relative;display:block;width:232px;height:60px} .hdr-contact img{display:block;width:232px;height:60px} .hdr-contact a{position:absolute;left:0;width:100%;height:50%;display:block;text-decoration:none} .hdr-contact a.hc-tel{top:0} .hdr-contact a.hc-wa{top:50%} /* E-E-A-T + last-updated + disclaimer: centre to the 980px content wrapper. On contact.htm the block sat in a full-viewport table cell (x=0 w=1280). */ .eeat{clear:both;max-width:980px;margin:16px auto 0;padding:12px 0 0;border-top:1px solid #d3d3d3;font-size:12.5px;line-height:1.75;color:#7a848a;text-align:left} .eeat p{margin:0 0 6px} .eeat strong{color:#2f829b} .press-topics{clear:both;max-width:980px;margin:16px auto 0;padding:12px 0 0;border-top:1px solid #d3d3d3;font-size:13px;line-height:1.95;color:#5d5d5d;text-align:left} /* contact.htm: "WhatsApp:" is wider than 電話: / 傳真: / 電郵:, so give its label column a little more room or it wraps to two lines. */ #menu p span.lbl-wa{ width:80px; } /* A 4-column comparison table cannot fit a phone - at 320px each column is ~72px. Tighten the type so the rows stay inside the container and still read as a table. (The proper treatment is one card per option, which needs the markup changed - that belongs with the hernia page rewrite.) */ @media (max-width:576.98px){ #conent table{ font-size:12px; } #conent th, #conent td{ padding-left:3px!important; padding-right:3px!important; line-height:1.4; } } /* ============ mobile: page title + TOC stay up top, imagery moves below ============ On desktop/tablet #menu is the left column holding the page title, the in-page anchors and the section imagery. On a phone that put a wall of pictures above the article. display:contents dissolves #menu and its