@charset "UTF-8";
/* ==========================================================================
   laboratory.hk — 移動端樣式層 (Mobile Overlay)
   --------------------------------------------------------------------------
   設計原則
   1. 桌面端「零影響」：所有佈局規則都包在 @media (max-width: 991.98px) 內，
      唯一的全域規則是 .only-mobile 的初始隱藏。
   2. 不使用 vw 作為字號單位 —— 原 PC 樣式大量使用 vw，在 390px 屏會縮到
      3.7~4.3px。本檔案一律改用固定 px，保證可讀性與可預測性。
   3. 觸控優先：所有可點擊元素熱區 >= 44px。
   4. 本檔案必須在所有其他 CSS 之後載入（main.blade.php 中置於最末），
      以同特異性「後者勝出」的方式覆蓋 PC 樣式。

   斷點
   - max-width: 991.98px  → 手機 + 平板（漢堡導航生效）
   - max-width: 767.98px  → 手機專屬微調
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 顯示切換（全域，非媒體查詢）
   -------------------------------------------------------------------------- */
.only-mobile { display: none; }


/* ==========================================================================
   1. 移動端主體
   ========================================================================== */
@media (max-width: 991.98px) {

    /* ----------------------------------------------------------------------
       1.1 顯示切換
       ---------------------------------------------------------------------- */
    .only-desktop { display: none !important; }
    .only-mobile  { display: block; }

    body.m-nav-open,
    body.m-modal-open { overflow: hidden; }

    /* ----------------------------------------------------------------------
       1.2 基礎：修復被 rem.css 縮到 8px 的根字號
           rem.css 會按屏寬把 html font-size 設成 8px~12px，導致全站
           rem 尺寸腰斬、正文縮到個位數像素。這裡強制還原 16px 基準。
       ---------------------------------------------------------------------- */
    html {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 15px;
        line-height: 1.6;
        color: #1f2733;
        overflow-x: hidden;
    }

    /* 全域圖片自適應（原 reset.css 已設 width:100%，此處確保不撐破容器） */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 表格類內容避免撐破 */
    table { max-width: 100%; }

    /* ----------------------------------------------------------------------
       1.3 通用容器與間距
       ---------------------------------------------------------------------- */
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
    }

    .row { --bs-gutter-x: 16px; }

    /* 部分页面容器带 .px-0（如 contactus），會讓 Bootstrap .row 的負 margin
       溢出視口。這裡補回內距。 */
    .container.px-0,
    .container-fluid.px-0,
    .contactus-page .container,
    .app-main-wrapper .container,
    .app-main-wrapper .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 佔位：原始 fixed navbar 高 5vw，移動端頭部固定 56px。
       部分模板在元素上寫了內聯 style="height:5vw"，故需 !important。 */
    .navbar-placeholder { height: 56px !important; }

    /* ----------------------------------------------------------------------
       1.4 頁面頂部橫幅 .top
           PC 版 height: 18.46vw（390px 下僅 72px，過扁）→ 改為固定比例區間
       ---------------------------------------------------------------------- */
    .top {
        height: clamp(140px, 38vw, 220px);
        overflow: hidden;
    }

    .top img,
    .top .top-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        max-height: none;
    }

    .top span {
        left: 20px;
        right: 20px;
        bottom: 16px;
        transform: none;
        font-size: 22px;
        line-height: 1.3;
    }

    .top-title-text {
        font-size: 22px !important;
        width: 90%;
        text-align: center;
        line-height: 1.3;
    }

    /* ----------------------------------------------------------------------
       1.5 通用按鈕 / 返回按鈕
       ---------------------------------------------------------------------- */
    .copyBox_btn {
        margin-top: 24px;
        padding-bottom: 0;
        text-align: center;
    }

    .copyBox_btn button,
    .copyBox_btn .btn,
    .btn-back,
    .media-back-btn {
        min-height: 44px;
        padding: 11px 28px !important;
        font-size: 15px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ----------------------------------------------------------------------
       1.6 區塊標題
       ---------------------------------------------------------------------- */
    .index_title,
    .index_cooper_header h1 {
        font-size: 22px !important;
        margin-bottom: 8px;
    }
}


/* ==========================================================================
   2. 移動端頭部（header-mobile.blade.php）
   ========================================================================== */
@media (max-width: 991.98px) {

    .m-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2000;
    }

    .m-header__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 12px 0 16px;
        background: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    }

    .m-header__logo {
        display: block;
        width: 92px;
        flex-shrink: 0;
        line-height: 0;
    }

    .m-header__logo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .m-header__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* 報告查詢按鈕 */
    .m-header__report {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 14px;
        background: #00A2E9;
        color: #fff;
        border-radius: 18px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
    }

    .m-header__report:active { background: #0077b3; }

    .m-header__report i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
    }

    .m-header__report i img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 漢堡按鈕 */
    .m-header__toggle {
        width: 44px;
        height: 44px;
        margin-right: -6px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    .m-header__toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #1f2733;
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }

    .m-header__toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .m-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .m-header__toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* --- 抽屜 --- */
    .m-drawer {
        position: fixed;
        inset: 0;
        z-index: 2100;
        visibility: hidden;
        pointer-events: none;
    }

    .m-drawer.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .m-drawer__mask {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        transition: opacity .28s ease;
    }

    .m-drawer.is-open .m-drawer__mask { opacity: 1; }

    .m-drawer__panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(86vw, 360px);
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: -8px 0 32px rgba(0, 0, 0, .16);
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    }

    .m-drawer.is-open .m-drawer__panel { transform: translateX(0); }

    .m-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        height: 56px;
        padding: 0 10px 0 20px;
        border-bottom: 1px solid #eef1f5;
    }

    .m-drawer__logo {
        display: block;
        width: 88px;
        line-height: 0;
    }

    .m-drawer__logo img { width: 100%; height: auto; display: block; }

    .m-drawer__close {
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .m-drawer__close span {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 50%;
        height: 2px;
        background: #1f2733;
        border-radius: 2px;
    }

    .m-drawer__close span:nth-child(1) { transform: rotate(45deg); }
    .m-drawer__close span:nth-child(2) { transform: rotate(-45deg); }

    .m-drawer__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 28px;
    }

    /* --- 導航清單 --- */
    .m-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .m-nav__item { border-bottom: 1px solid #f2f4f7; }

    .m-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        padding: 14px 20px;
        border: 0;
        background: none;
        font-size: 16px;
        font-weight: 500;
        color: #1f2733;
        text-align: left;
        text-decoration: none;
        line-height: 1.4;
        cursor: pointer;
    }

    .m-nav__link:active { background: #f5f8fc; }

    .m-nav__arrow {
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        margin-right: 4px;
        border-right: 2px solid #8b95a3;
        border-bottom: 2px solid #8b95a3;
        transform: rotate(45deg);
        transition: transform .25s ease;
    }

    .m-nav__item.is-open .m-nav__arrow { transform: rotate(-135deg); }

    .m-nav__sub {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background: #f7f9fc;
        transition: max-height .3s ease;
    }

    .m-nav__item.is-open .m-nav__sub { max-height: 420px; }

    .m-nav__sub li a {
        display: block;
        min-height: 46px;
        padding: 12px 20px 12px 36px;
        font-size: 15px;
        color: #5a6472;
        text-decoration: none;
        line-height: 1.5;
    }

    .m-nav__sub li a:active { background: #eef3f9; }

    /* --- 語言切換 --- */
    .m-lang {
        display: flex;
        gap: 10px;
        padding: 22px 20px 0;
    }

    .m-lang a {
        flex: 1;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dbe2ec;
        border-radius: 10px;
        font-size: 15px;
        color: #1f2733;
        text-decoration: none;
    }

    .m-lang a.is-active {
        background: #00A2E9;
        border-color: #00A2E9;
        color: #fff;
    }

    /* --- 聯絡資訊 --- */
    .m-contact { padding: 18px 20px 0; }

    .m-contact__item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 0;
        font-size: 14px;
        color: #5a6472;
        line-height: 1.6;
    }

    .m-contact__item i {
        flex-shrink: 0;
        width: 18px;
        margin-top: 2px;
        text-align: center;
        font-size: 17px;
        color: #00A2E9;
    }

    /* --- 抽屜 CTA --- */
    .m-drawer__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px;
        margin: 20px 20px 0;
        background: #00A2E9;
        color: #fff;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
    }

    .m-drawer__cta:active { background: #0077b3; }

    .m-drawer__cta i {
        display: inline-flex;
        width: 16px;
        height: 16px;
    }

    .m-drawer__cta i img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}


/* ==========================================================================
   3. 移動端頁腳（footer-mobile.blade.php）
   ========================================================================== */
@media (max-width: 991.98px) {

    .m-footer {
        background: #001132;
        color: #D1D2CC;
    }

    .m-footer__inner { padding: 32px 20px 28px; }

    .m-footer__block { margin-bottom: 26px; }

    .m-footer__title {
        margin: 0 0 14px;
        font-size: 16px;
        font-weight: 500;
        color: #00A2E9;
        line-height: 1.4;
    }

    /* --- 聯絡資訊 --- */
    .m-footer__contact {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .m-footer__contact li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 6px 0;
        font-size: 14px;
        line-height: 1.65;
    }

    .m-footer__contact li > i.iconfont {
        flex-shrink: 0;
        width: 18px;
        margin-top: 2px;
        text-align: center;
        font-size: 17px;
        color: #00A2E9;
    }

    .m-footer__contact li > i.m-ico-img {
        flex-shrink: 0;
        width: 16px;
        margin-top: 3px;
        line-height: 0;
    }

    .m-footer__contact li > i.m-ico-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* --- 導航（2 欄） --- */
    .m-footer__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .m-footer__group { display: flex; flex-direction: column; }

    .m-footer__group a {
        padding: 5px 0;
        font-size: 14px;
        color: #D1D2CC;
        text-decoration: none;
        line-height: 1.5;
    }

    .m-footer__group a.m-footer__group-title {
        padding-bottom: 8px;
        font-size: 15px;
        font-weight: 500;
        color: #00A2E9;
    }

    /* --- 報告查詢 CTA --- */
    .m-footer__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px;
        margin: 28px 0 0;
        border: 1px solid #00A2E9;
        background: #fff;
        color: #00A2E9;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
    }

    .m-footer__cta i {
        display: inline-flex;
        width: 16px;
        height: 16px;
    }

    .m-footer__cta i img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* --- 微信 + 版權 --- */
    .m-footer__bottom {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .m-footer__wechat {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        height: 40px;
        padding: 0 14px;
        border: 1px solid rgba(0, 162, 233, .5);
        border-radius: 20px;
        background: none;
        color: #00A2E9;
        font-size: 14px;
        cursor: pointer;
    }

    .m-footer__wechat i { font-size: 18px; }

    .m-footer__copyright {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: #8c93a1;
    }

    .m-footer__copyright span { display: block; }

    /* --- 微信二維碼彈窗 --- */
    .m-wechat {
        position: fixed;
        inset: 0;
        z-index: 2200;
        display: none;
    }

    .m-wechat.is-open { display: block; }

    .m-wechat__mask {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .65);
    }

    .m-wechat__box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70vw;
        max-width: 280px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        transform: translate(-50%, -50%);
    }

    .m-wechat__box img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

    .m-wechat__close {
        position: absolute;
        top: -46px;
        right: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .8);
        border-radius: 50%;
        background: none;
        cursor: pointer;
    }

    .m-wechat__close span {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 50%;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }

    .m-wechat__close span:nth-child(1) { transform: rotate(45deg); }
    .m-wechat__close span:nth-child(2) { transform: rotate(-45deg); }
}


/* ==========================================================================
   4. 首頁 index
   （原 index.css 的移動端規則只有合作機構 6 條，其餘全靠 vw 縮放 → 幾乎空白）
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- 主輪播 ---
       注意：選擇器必須限定在 .index_swiper-container 內。
       合作機構的 Swiper 同樣位於 .index_conmot 之下，
       若用 `.index_conmot .swiper-slide img` 會連 logo 一起被
       拉成 min-height:200px + object-fit:cover，導致安盛／婦幼
       logo 被裁切。 */
    .index_conmot .swiper-slide { position: relative; }

    .index_swiper-container .swiper-slide > img,
    .index_swiper-container .swiper-slide > a > img {
        width: 100%;
        height: auto;
        min-height: 200px;
        object-fit: cover;
        object-position: center;
    }

    /* 首屏文案改為垂直居中 + 固定字號。
       頭部是 fixed（56px）覆蓋在 banner 上，故中心點下移 28px，
       讓文案落在「可視區域」的正中央。 */
    .index_swiText {
        top: calc(50% + 28px);
        left: 20px;
        right: 20px;
        max-width: none;
        transform: translateY(-50%);
    }

    .index_swiText_hed {
        font-size: 24px;
        line-height: 1.25;
    }

    .index_swiText_bom {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.5;
    }

    .index_swiText_btn button {
        margin: 16px 0 0;
        padding: 12px 28px;
        font-size: 15px;
        border-radius: 24px;
        min-height: 44px;
    }

    /* 第二屏文字浮層（同樣避開 56px 固定頭部） */
    .index_switxtend {
        top: calc(50% + 28px);
        left: 20px;
        width: auto;
        right: 20px;
        height: auto;
        transform: translateY(-50%);
    }

    .index_switxtendbox {
        padding: 14px 16px;
        font-size: 15px;
        line-height: 1.6;
        border-radius: 12px;
    }

    /* --- 服務入口四圖示 --- */
    .index_fuwu { padding: 24px 0 8px; }

    .index_uncaring {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 0 12px 20px;
        align-items: start;
    }

    .index_uncaring > div a img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .index_uncaring > div a span {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.35;
    }

    /* --- 圓形導航卡 --- */
    .index_circle {
        flex-direction: column;
        gap: 12px;
        padding: 0 16px 24px;
    }

    .index_circle .circle_box {
        width: 100%;
        height: auto;
        min-height: 76px;
        margin: 0;
        padding: 14px 16px;
        border-radius: 14px;
    }

    /* 原 ::after 是桌面端的 3D 錯位效果，窄屏只會造成視覺雜訊 */
    .index_circle .circle_box::after { display: none; }

    .index_circle_box_img {
        width: 48px;
        height: 48px;
        margin: 0 14px 0 0;
        flex-shrink: 0;
    }

    .index_circle_box_text {
        font-size: 16px;
        line-height: 1.4;
    }

    /* --- 廣告帶 --- */
    .index_advertisement {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
        padding: 20px 20px 24px;
    }

    .index_advertisement .advimg { width: 60%; max-width: 240px; }

    .index_advertisement .advtxt {
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }

    /* --- 影片區 --- */
    .index_videoBox { padding: 20px 16px; }

    .index_videoBox .videoBox_cont {
        top: 50%;
        left: 50%;
        width: 86%;
        transform: translate(-50%, -50%);
    }

    .index_videoBox .videoBox_h {
        padding-bottom: 10px;
        font-size: 16px;
    }

    /* --- 合作機構 --- */
    .index_cooper {
        padding: 28px 0;
        background-size: cover;
    }

    .index_cooper_header { margin-bottom: 18px; }

    .index_cooper .swiper {
        padding: 16px;
        border-radius: 14px;
    }

    .index_cooper .container { padding-left: 12px; padding-right: 12px; }

    .index_partner_card {
        aspect-ratio: auto;
        min-height: 0;
        max-height: none;
        border-radius: 12px;
    }

    /* 原 col-10 在 390px 屏只佔 83%（276px），左右浪費 100px 以上
       → 移動端改為滿寬，logo 能放得更大更清晰 */
    .index_cooper .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .index_cooper .row {
        --bs-gutter-y: 20px;
    }

    /* 桌面端用 hover 切換 logo / 資訊，觸控裝置無 hover
       → 改為上下堆疊：logo 在上，資訊常駐在下 */
    .index_partner_logo {
        position: static;
        height: 168px;
        padding: 24px;
        opacity: 1;
        visibility: visible;
    }

    /* logo 圖：維持原始比例完整顯示。
       必須顯式重置 width/height/min-height —— 頁面上有數條針對
       「圖片」的通用規則（.index_conmot .swiper-slide img、全域 img 等），
       不重置會被拉成固定尺寸 + object-fit:cover 而裁切。 */
    .index_partner_logo img {
        width: auto;
        height: auto;
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .index_partner_info {
        position: static;
        height: auto;
        padding: 18px 16px;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        background: linear-gradient(135deg, #6DA7F1 0%, #00A2E9 100%);
    }

    .index_info_item {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
        text-align: left;
    }

    .index_info_item i {
        min-width: 20px;
        margin-top: 2px;
        font-size: 16px;
    }

    .index_info_item > div,
    .index_info_item a {
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }

    /* 原 hover 才顯示，觸控無效 → 直接隱藏佔位元素 */
    .index_lift-nav { display: none; }
}


/* ==========================================================================
   5. 服務頁（service / service-appraisal / sexual / inheritance / virus）
      已有 ≤575.98px 斷點，但 576~991px 存在缺口，且字號仍用 vw
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- 服務總覽：4 個入口卡（PC 為 nowrap 橫排 25%） --- */
    .commcont .bdycont,
    .bdycont {
        flex-wrap: wrap;
        padding: 24px 16px 48px !important;
    }

    .entranceBox {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
        border-radius: 14px;
    }

    .entrance_img { height: 56vw; max-height: 260px; }

    .entrance_mask_text {
        padding: 20px 18px;
        font-size: 14px;
        line-height: 1.65;
    }

    .entrance_mask_text div {
        font-size: 17px;
        line-height: 1.4;
    }

    .entrance_mask_text i { width: 36px; height: 3px; margin: 8px 0 12px; }

    .entrance_mask .ent_mask_toitem { width: 34px; }

    /* --- 服務詳情頁：說明區塊 --- */
    .appraisalBox { padding: 28px 0; }

    .abox_topbg {
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        min-height: 0;
        /* 該裝飾圖（1111.png）是寬幅設計稿、圖內自帶文字。
           原樣式用 background-size:100% 100% 把它拉伸鋪滿 54vw×29vw；
           改成整寬後再放大，圖內文字會與正文疊影，加上深色遮罩後
           幾乎無法閱讀。移動端改為純深藍底 + 白色文字。 */
        background-image: none !important;
        background-color: #0D1835;
    }

    /* 桌面用絕對定位疊在底圖上；窄屏改為文件流，避免文字溢出 */
    .abox_top,
    .abox_top1,
    .abox_top2 {
        position: static !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 20px;
        padding: 22px 0;
        line-height: 1.6;
    }

    .abox_top_bigtext {
        font-size: 19px !important;
        line-height: 1.35 !important; /* 部分頁面內聯 line-height:1.8vw，會壓成 7px 造成文字重疊 */
        margin-bottom: 8px;
        color: #fff !important;       /* 深藍底上強制白字，避免與背景同色 */
    }

    .abox_line {
        display: block;
        width: 36px;
        height: 3px;
        margin: 10px 0 12px;
    }

    .abox_text {
        font-size: 15px !important;
        line-height: 1.7 !important; /* 同上：覆蓋內聯 line-height:1.5vw */
        text-align: left;
    }

    /* --- 檢測項目清單：2 欄網格 --- */
    .abox_bom {
        position: static !important;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 20px 16px 0;
        padding: 20px 16px 8px !important;
        background: #fff;
        border-radius: 14px;
    }

    .abox_bomlist {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
        height: auto !important;
        overflow: visible;
    }

    .list_item {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

    .list_img {
        height: auto;
        min-height: 48px;
        margin-bottom: 10px;
    }

    .list_img i { width: 48px; }

    .list_text {
        height: auto !important;
        font-size: 13px !important;
        line-height: 1.6;
        text-align: center;
    }

    .list_text span { margin: 8px 0; }

    .apparSize {
        font-size: 15px !important;
        line-height: 1.4;
        margin-bottom: 2px;
    }

    .list_smalltext {
        position: static !important;
        padding: 12px 0 0 !important;
        margin-top: 8px;
        font-size: 13px !important;
        line-height: 1.6;
        text-align: center;
    }

    /* 深色變體：原本靠 left 偏移做左右交錯，窄屏統一單列 */
    .Colordeep .abox_topbg { left: 0 !important; }
    .Colordeep .abox_bom { left: auto !important; }
    .Colordeep .abox_top { text-align: left !important; }

    /* --- 性病頁的分類清單 --- */
    .sexlist { flex-direction: column; gap: 12px; }
    .sexlist_type {
        min-width: 0 !important;
        font-size: 15px;
        padding-bottom: 4px;
    }
    .sexlist_li li { min-width: 100% !important; font-size: 14px; line-height: 1.6; }
}


/* ==========================================================================
   6. 技術頁 technical
   ========================================================================== */
@media (max-width: 991.98px) {

    .conmot { padding: 24px 16px 40px; }

    .appraisalcont { padding: 0; }

    .techcontent { padding: 0; }

    /* 分頁籤 */
    .techtable {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .techtable > div {
        flex: 1 0 auto;
        min-width: 96px;
        padding: 11px 16px;
        font-size: 14px !important;
        text-align: center;
        white-space: nowrap;
        border-radius: 10px;
    }

    .techBoxtop {
        font-size: 17px !important;
        line-height: 1.4;
        margin: 10px 0 !important; /* 覆蓋部分元素的內聯 margin:1vw */
    }

    .techitem { margin-bottom: 18px; }

    .techitem_top {
        font-size: 15px !important;
        line-height: 1.45;
    }

    .techitem_cont {
        font-size: 14px !important;
        line-height: 1.7;
    }

    .techitem_food { font-size: 13px !important; line-height: 1.6; }
}


/* ==========================================================================
   7. 關於我們 aboutus
   ========================================================================== */
@media (max-width: 991.98px) {

    .abuscont { padding: 24px 16px 40px; }

    .copyBox { margin-bottom: 32px; }

    .copyBox_top { font-size: 19px; line-height: 1.35; margin-bottom: 10px; }

    /* 圖文內容改為縱向堆疊 */
    .copyBox_scend {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .copyBox_scend_text,
    .copyBox_text {
        font-size: 15px;
        line-height: 1.75;
    }

    .copyBox_img { margin: 16px 0; }

    .copyBox_colortext { font-size: 15px; line-height: 1.75; }

    .textmagin { margin-bottom: 10px; }

    .imgpadd,
    .imgloging { padding: 0; }

    .logingtext { font-size: 15px; line-height: 1.75; }

    .copyBox_bom { margin-top: 16px; }
}


/* ==========================================================================
   8. 聯繫我們 contactus（已有 ≤575.98 適配，補 576~991 區間與溢出）
   ========================================================================== */
@media (max-width: 991.98px) {

    .contactus-page { overflow-x: hidden; }

    .commcont { padding: 0; }

    .commcont > .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .contact-wrapper { border-radius: 16px; overflow: hidden; }

    /* 聯絡資訊區與表單在 col-md 以下自動堆疊，這裡補足內距與高度 */
    .contact-info {
        padding: 26px 20px;
        height: auto !important;
    }

    .contact-form {
        padding: 26px 20px 30px;
        height: auto !important;
    }

    .contact-info h3,
    .contact-form h3 { font-size: 19px; line-height: 1.35; }

    .contact-item { margin-bottom: 14px; }
    .contact-item h6 { font-size: 15px; margin-bottom: 4px; }
    .contact-item p { font-size: 14px; line-height: 1.6; }

    .map-container {
        margin-top: 18px !important;
        height: 200px;
    }

    .map-container iframe { height: 100%; min-height: 200px; }

    /* 表單：避免固定寬度造成橫向溢出 */
    .contact-form .form-control,
    .contact-form .form-select,
    .contact-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        font-size: 16px; /* 防止 iOS 聚焦時自動放大 */
        min-height: 44px;
    }

    .contact-form .form-label { font-size: 14px; }

    .contact-form .btn-submit {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }

    .contact-form .row > [class*="col-"] { margin-bottom: 14px; }
}


/* ==========================================================================
   9. 媒體中心 media / media-study / media-item
   ========================================================================== */
@media (max-width: 991.98px) {

    .media-container,
    .media-study-container,
    .media-item-container {
        padding: 24px 16px 40px !important;
        max-width: 100%;
    }

    /* 分頁籤 */
    .media-tab-nav {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        gap: 8px;
        margin-bottom: 24px !important;
        padding-bottom: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .media-tab-btn {
        flex: 1 0 auto;
        min-width: 92px;
        padding: 10px 14px;
        font-size: 14px;
        white-space: nowrap;
    }

    .media-study-title,
    .media-item-header h1,
    .media-item-header h2 { font-size: 20px !important; line-height: 1.35; }

    .media-study-text,
    .media-item-content { font-size: 15px !important; line-height: 1.75; padding: 0 !important; }

    .media-text { font-size: 15px !important; padding: 0 !important; line-height: 1.7; }

    .media-back-btn {
        padding: 11px 26px !important;
        font-size: 15px !important;
    }

    /* 分頁器 */
    .media-pagination .pagination { flex-wrap: wrap; gap: 6px; }
    .media-pagination .page-link { padding: 8px 13px; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; }
}


/* ==========================================================================
   10. 招聘 career（已有 390 / 768 斷點，補 769~991 與字號）
   ========================================================================== */
@media (max-width: 991.98px) {

    .career-container { padding: 0 16px; margin-top: 24px !important; }

    .career-title { font-size: 21px !important; line-height: 1.35; }

    .career-intro { margin-bottom: 28px !important; }

    .career-intro-text { font-size: 15px; line-height: 1.75; margin-bottom: 18px; }

    .career-position-card { margin-bottom: 28px !important; }

    .position-title { font-size: 18px; line-height: 1.35; }

    .position-section { font-size: 15px; line-height: 1.7; margin-bottom: 14px; }

    .position-image { margin-top: 16px; }

    .career-content .btn {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ==========================================================================
   11. 報告查詢相關（search / success / fail）— 使用 layouts/app.blade.php
       main.css 已有 992/768/576 斷點，這裡只補 root 字號與細節
   ========================================================================== */
@media (max-width: 991.98px) {

    .app-main-wrapper { padding: 20px 16px 40px; }

    .search-form { margin: 16px 0; padding: 22px 18px; border-radius: 12px; }

    .search-form h1 { font-size: 20px; line-height: 1.35; }

    .search-form .form-control,
    .search-form .btn-search {
        font-size: 16px;
        min-height: 46px;
        width: 100%;
    }

    .pdf-viewer-card { border-radius: 12px; }

    .pdf-viewer-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .pdf-viewer-body { height: 62vh !important; }
    .pdf-viewer-body iframe { min-height: 62vh !important; }
}


/* ==========================================================================
   12. 手機專屬微調（<= 767.98px）
   ========================================================================== */
@media (max-width: 767.98px) {

    /* 首屏文案再收一檔，避免小屏換行過多 */
    .index_swiText_hed { font-size: 21px; }
    .index_swiText_bom { font-size: 14px; }

    /* 服務頁檢測項目改單欄，項目多時更易閱讀 */
    .abox_bomlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .list_item { text-align: center; }

    /* 頁腳導航維持 2 欄；極窄屏（<=360px）才轉單欄 */
    .m-footer__nav { gap: 18px 14px; }

    /* 表格類內容橫向可滾動，避免撐破 */
    .table-responsive,
    .messages-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 359.98px) {

    .m-footer__nav { grid-template-columns: 1fr; }

    .m-header__report span { display: none; }
    .m-header__report { width: 36px; padding: 0; justify-content: center; }

    .index_uncaring { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
}