/* Front V53 shell — header / footer / navbar / layout scope / legacy spacing
   Extracted from Content/mainStyle.css (PLAN-02). Global reset omitted (BS 5.3).
*/

/* PLAN-15：手機內容水平留白契約（主頁／InfoDetails／Prod53／專題／活動等同頁共用） */
:root {
    --front-mobile-gutter-x: 0.375rem; /* 每側 6px；≤767.98px */
}

img {
    max-width: 100%;
    height: auto;
}

/* 懸停展示下拉菜單效果的樣式 BEGIN */

/* Bootstrap 5.3 兼容性調整 */
.dropdown-backdrop {
    position: static;
}

/* 桌面：hover 展開；手機維持 BS click（.show） */
.navbar .dropdown-menu {
    display: none;
}

.navbar .dropdown-menu.show {
    display: block !important;
}

@media (min-width: 768px) {
    /* 懸停開選單：綁在 .nav-item.dropdown，滑到子選單仍保持 :hover */
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
    }

    /*
     * 橋接觸發列與選單之間的空隙（margin / --bs-dropdown-spacer）。
     * 空隙若不可點，游標一離 PRODUCT／Help 就失去 :hover，選單立刻收起。
     */
    .navbar .nav-item.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 0.75rem;
    }
}

/* 懸停展示下拉菜單效果的樣式 END */

a {
    text-decoration: none;
    color:#2e2e2e;
}

label,span{
     font-weight:500;
     font-size:1em;
     font-family: Microsoft YaHei, simhei,Verdana, Arial, Helvetica, sans-serif;
}

.body-content { 
    padding-left: 0px;
    padding-right: 0px;
}
 
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.floatFooter {
    left: 0;
    position: fixed;
    bottom: 8px;
    width: 100%;
    z-index: 0;
    text-align: center;
    float:none;
}

.footer {
    width: 100%;
    background-color: #f5f5f5;
}

/* V53 header: 輕淺灰，與 footer 一致 */
nav.front-v53-header {
    --front-v53-header-height: 53px;
    --bs-navbar-padding-y: 0;
    background-color: #f7f7f7;
    border-bottom: 3px solid #d4d0d1;
    min-height: var(--front-v53-header-height);
    box-sizing: border-box;
}

nav.front-v53-header .navbar-brand img {
    max-height: 50px;
    width: auto;
}

nav.front-v53-header .front-v53-header-brand {
    color: #212529;
}

/* 無 HTML 店招時的店名。標準與安防 Header 共用，不放進安防殼層檔。 */
.logo_font_size_24_white {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

/* 兩行店名：Bootstrap 5.3 d-flex flex-column；子節點各佔一 row */
nav.front-v53-header .shop-header-brand {
    max-height: 50px;
}

nav.front-v53-header .shop-header-brand > * {
    line-height: 1.1;
}

/* 標準店招：恢復穩定兩行（勿負 margin，避免 slogan 頂進標題） */
nav.front-v53-header .shop-header-brand .shop-signboard {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px !important;
    row-gap: 3px !important;
}

nav.front-v53-header .shop-header-brand .shop-signboard.gap-1,
nav.front-v53-header .shop-header-brand .shop-signboard.gap-2 {
    gap: 3px !important;
    row-gap: 3px !important;
}

nav.front-v53-header .shop-header-brand .shop-sign-title,
nav.front-v53-header .shop-header-brand h2.shop-sign-title {
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--site-text, #212529);
}

nav.front-v53-header .shop-header-brand .shop-sign-slogan,
nav.front-v53-header .shop-header-brand h6.shop-sign-slogan {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--site-text-muted, var(--site-text, #495057));
    opacity: 0.92;
}

.shop-header-brand p,
.shop-header-brand div,
.shop-header-brand h1,
.shop-header-brand h2,
.shop-header-brand h3,
.shop-header-brand h4,
.shop-header-brand h5,
.shop-header-brand h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.1;
}

nav.front-v53-header .nav-link {
    color: #212529;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
}

nav.front-v53-header .nav-link:hover,
nav.front-v53-header .nav-link:focus {
    color: #495057;
}

nav.front-v53-header .front-v53-header-icon {
    color: var(--site-text, #212529);
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: middle;
}

/* dropdown-toggle 與一般 nav-link 同高，避免 btn 殘留 padding 造成縮進／偏高 */
nav.front-v53-header .nav-link.dropdown-toggle {
    padding-top: var(--bs-nav-link-padding-y);
    padding-bottom: var(--bs-nav-link-padding-y);
}

nav.front-v53-header .nav-dropdown-toggle:focus,
nav.front-v53-header .nav-dropdown-toggle:active,
nav.front-v53-header .nav-dropdown-toggle.show {
    box-shadow: none;
    outline: none;
}

/*
 * 標準電商 Header 帳號／語系在 navbar 右側。
 * 語系與用戶 Icon 使用 data-bs-display="static"，BS 不套 Popper；
 * 桌面 hover 展開也不會帶 data-bs-popper。
 * dropdown-menu-end／dropdown-menu-md-end 靠右對齊因此失效，選單會往右超出螢幕。
 * 改為明確 right:0，向下向左展開（安防殼見 mode-of-security-industry.css）。
 */
nav.front-v53-header:not(.front-v53-header-v2) .front-v53-nav-account > .nav-item.dropdown > .dropdown-menu.dropdown-menu-end {
    right: 0;
    left: auto;
}

@media (min-width: 768px) {
    nav.front-v53-header:not(.front-v53-header-v2) .front-v53-nav-account > .nav-item.dropdown > .dropdown-menu.dropdown-menu-md-end {
        right: 0;
        left: auto;
    }
}


/* ========== Footer Standard（ShopFootTemplate/_FooterTemplate；勿用於 Security53.v2）========== */
body.front-v53 #footer:has(.front-v53-footer-standard),
body.front-v53 footer.footer:has(.front-v53-footer-standard) {
    position: relative;
    background-color: var(--site-surface, #f5f5f5);
    color: var(--site-text, #212529);
    /* 取代舊 3px 實心 #ed1b23：改由 ::before / ::after 做 accent rail */
    border-top: none;
    box-shadow: 0 -18px 40px -28px var(--site-shadow, rgba(11, 4, 84, 0.12));
}

/* 頂部分隔：兩端淡出的 accent 細線（吃 --site-accent） */
body.front-v53 #footer:has(.front-v53-footer-standard)::before,
body.front-v53 footer.footer:has(.front-v53-footer-standard)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--site-accent, #c52d2f) 55%, transparent) 14%,
        var(--site-accent, #c52d2f) 50%,
        color-mix(in srgb, var(--site-accent, #c52d2f) 55%, transparent) 86%,
        transparent 100%
    );
}

/* 細線下方極淡光暈：增加層次，避免「貼紙式」硬邊 */
body.front-v53 #footer:has(.front-v53-footer-standard)::after,
body.front-v53 footer.footer:has(.front-v53-footer-standard)::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 6px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--site-accent, #c52d2f) 28%, transparent) 50%,
        transparent 100%
    );
    filter: blur(5px);
    opacity: 0.55;
}

.front-v53-footer-standard {
    --front-v53-navy: var(--site-navy, #0b0454);
    --front-v53-accent: var(--site-accent, #c52d2f);
    margin-top: 1.5rem;
    padding-top: 0;
    background: var(--site-surface, #f8f9fb);
    color: var(--site-text, #212529);
}

.front-v53-footer-standard-inner {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
}

.front-v53-footer-standard-brand-name {
    display: inline-block;
    position: relative;
    padding-left: 0.85rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--front-v53-navy);
}

.front-v53-footer-standard-brand-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    border-radius: 2px;
    background: var(--front-v53-navy);
}

.front-v53-footer-standard-slogan {
    margin-top: 0.35rem;
    padding-left: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--site-text-muted, #6c757d);
}

.front-v53-footer-standard-heading {
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--front-v53-navy, var(--site-navy, #0b0454));
    border-bottom: 1px solid color-mix(in srgb, var(--front-v53-navy, #0b0454) 12%, transparent);
}

.front-v53-footer-standard .front-v53-footer-v2-tags,
.front-v53-footer-v2 .front-v53-footer-v2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.front-v53-footer-standard .front-v53-footer-v2-tag,
.front-v53-footer-v2 .front-v53-footer-v2-tag {
    display: inline-block;
    max-width: 100%;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--site-text-muted, #495057);
    background: var(--site-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--site-navy, #0b0454) 12%, transparent);
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.front-v53-footer-standard a.front-v53-footer-v2-tag,
.front-v53-footer-v2 a.front-v53-footer-v2-tag {
    text-decoration: none;
}

.front-v53-footer-standard-meta > li,
.front-v53-footer-standard-links > li,
.front-v53-footer-standard-contact > li {
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--site-text-muted, #6c757d);
}

.front-v53-footer-standard-links a,
.front-v53-footer-standard-contact a {
    color: inherit;
    text-decoration: none;
}

.front-v53-footer-standard-links a:hover,
.front-v53-footer-standard-links a:focus,
.front-v53-footer-standard-contact a:hover,
.front-v53-footer-standard-contact a:focus {
    color: var(--site-accent, #c52d2f);
}

.front-v53-footer-standard-contact > li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.front-v53-footer-standard-ico {
    margin-top: 0.15rem;
    width: 1rem;
    flex-shrink: 0;
    text-align: center;
    color: var(--front-v53-navy, var(--site-navy, #0b0454));
    opacity: 0.75;
}

.front-v53-footer-standard-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #128c7e !important;
    text-decoration: none !important;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.35);
    border-radius: 999px;
}

.front-v53-footer-standard-wa:hover,
.front-v53-footer-standard-wa:focus {
    background: rgba(37, 211, 102, 0.22);
    color: #075e54 !important;
}

.front-v53-footer-standard-bar {
    background: var(--site-surface, #fff);
    border-top: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
    margin-top: 0;
}

.front-v53-footer-standard-bar-inner {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

.front-v53-footer-standard-copy {
    font-size: 0.75rem;
    color: var(--site-text-muted, #6c757d);
}

footer.footer .front-v53-footer-standard a:hover {
    color: var(--site-accent, #c52d2f);
}

/* PLAN-07：Footer QR strip 尺寸 */
.front-v53-footer-standard .ishop-shop-qr-item,
.front-v53-footer-v2 .ishop-shop-qr-item {
    max-width: 56px;
}

.front-v53-footer-standard .ishop-shop-qr-img,
.front-v53-footer-v2 .ishop-shop-qr-img {
    max-width: 50px;
    height: auto;
}

.front-v53-footer-standard .ishop-shop-qr-item .small,
.front-v53-footer-v2 .ishop-shop-qr-item .small {
    font-size: 0.65rem;
    line-height: 1.2;
}

/* PLAN-09：Contact／About 頁面區 QR strip（吃 Appearance） */
.ishop-shop-qr-page .ishop-shop-qr-strip {
    justify-content: center;
}

.ishop-shop-qr-page .ishop-shop-qr-item {
    max-width: 120px;
    color: var(--site-text, #212529);
}

.ishop-shop-qr-page .ishop-shop-qr-img {
    max-width: 112px;
    height: auto;
    border: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
    background: var(--site-surface, #fff);
}

.ishop-shop-qr-page .ishop-shop-qr-item .small {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--site-text-muted, #6c757d);
}

.ishop-shop-qr-page .ishop-shop-qr-item a {
    color: var(--site-accent, #c52d2f);
    text-decoration: none;
}

.ishop-shop-qr-page .ishop-shop-qr-item a:hover {
    color: var(--site-accent-hover, var(--site-accent, #c52d2f));
    text-decoration: underline;
}

.front-v53-footer-cols > [class*="col"] {
    min-width: 0;
}

/* Bootstrap 5.3 layout: 覆寫舊版 #footer 深色背景 */
footer.footer #footer {
    background: none;
    color: #000;
    border-top: none;
    font-size: inherit;
}
footer.footer #footer a {
    color: inherit;
}
footer.footer #footer a:hover {
    color: #c52d2f;
}
footer.footer #footer ul > li.copyright {
    border-bottom: 1px solid #ddd;
}
footer.footer #footer .text-start {
    text-align: start;
}

.margin-top5 {
    margin-top: 5px;
}

.margin-top10 {
    margin-top: 10px;
}
.margin-top15 {
    margin-top: 15px;
}

.margin-left3 {
    margin-left: 3px;
}

.margin-left5 {
    margin-left: 5px;
}

.margin-left10 {
    margin-left: 10px;
}

.margin-left15 {
    margin-left: 15px;
}

.margin-right3 {
    margin-right: 3px;
}

.margin-right5 {
    margin-right: 5px;
}

.margin-right5 {
    margin-right: 5px;
}

.margin-right10 {
    margin-right: 10px;
}

.margin-right15 {
    margin-right: 15px;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.padding-top5 {
    padding-top: 5px;
}

.padding-top10{
    padding-top:10px;
}

.padding-bottom5 {
    padding-bottom: 5px;
}

.padding-bottom10 {
    padding-bottom: 10px;
}

.padding-left5 {
    padding-left: 5px;
}

.padding-left10 {
    padding-left: 10px;
}
.padding-left15 {
    padding-left: 15px;
}

.padding-right5 {
    padding-right: 5px;
}

.padding-right15 {
    padding-right: 15px;
}

.padding-3 {
    padding: 3px;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.radius3 {
    border-radius: 3px;
}

.radius5{
    border-radius:5px;
}

.deleted {
    text-decoration: line-through;
}

/*footer Module — 舊預設；front-v53 Standard／v2 另有覆寫 */
#footer {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f1eeee46;
    border-top: 1px solid color-mix(in srgb, var(--site-accent, #c52d2f) 70%, transparent);
} 
#footer ul { list-style: none; padding: 0; margin: 0;}
#footer ul > li { overflow:hidden; margin-bottom:3px;}
#footer ul > li.copyright{ border-bottom:1px solid #4d4d4d; padding-bottom:10px;}

/* 圖片斷鏈處理 START */  

/* 隐藏失效图片 */
img.broken-image {
    display: none;
}

/* 可选：如果需要显示自定义占位符而不是完全隐藏 */
img.broken-image {
    visibility: hidden;
    position: relative;
} 

img.broken-image::before {
    content: 'Image cannot be loaded';
    visibility: visible;
    display: block;
    width: 600px;
    height: 300px;
    background: #f1f1f1;
    border: 1px dashed #ccc;
    text-align: center;
    line-height: 300px;
    color: #999;
} 
/* 圖片斷鏈處理 END */

/* ===== 全局分隔線樣式  from Featur b-example-divider 的樣式 ===== */
.b-feature-divider {
    width: 100%;
    height: 3rem;
    /* 主背景色 - 更浅的灰色 */
    background-color: rgba(0, 0, 0, 0.05);
    /* 边框颜色 - 更浅的灰色边框 */
    border: solid rgba(0, 0, 0, 0.08);
    border-width: 1px 0;
    /* 阴影效果 - 更浅的阴影 */
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.05), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.08);
}

/* ===== 滾動根節點（修 Chrome DevTools 手機模擬滾輪卡住）=====
   勿對 body 設 height:100% + overflow-y:auto（雙層滾動容器 + 視窗鎖高會讓滾輪失效）。
   100vw 全幅若造成橫向溢出，裝置模式下垂直滾輪也常失效 → 用 overflow-x:clip 兜底。
   勿加 -webkit-overflow-scrolling:touch：Safari 13+ 不需要，且會讓 fixed header 在拇指慣性滾動時脫節。 */
html {
    overflow-x: clip;
    overflow-y: auto;
    scroll-padding-top: var(--front-v53-header-height, 53px);
}

body.front-v53 {
    --front-v53-header-height: 53px;
    height: auto !important;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: visible;
    /* 蓋過 mode-of-security-industry 手機 body 的 contain，避免回彈後內容卡在 header 下 */
    overscroll-behavior-y: auto;
}

/*
   iOS Safari：html/body 的 overflow-x:clip 會錯誤地連 Y 軸一起裁（至 Safari 18 仍在）。
   拇指滾動時 position:fixed 導覽列被裁進滾動層，內容頂部就捲進 header；scrollTop=0 的首次載入則正常。
   只對 Safari（-webkit-touch-callout）關掉 clip。iPhone Chrome 套用同一段會把 html 變成雙軸滾動容器，header 鑽得更深，不要加 font:-apple-system-body。
*/
@supports (-webkit-touch-callout: none) {
    html {
        overflow-x: visible;
        overflow-y: auto;
    }

    body.front-v53 {
        min-height: -webkit-fill-available !important;
        overflow-x: visible;
        overflow-y: visible;
        width: 100%;
        max-width: 100%;
    }

    nav.front-v53-header.fixed-top {
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1030;
    }
}

@media (max-width: 767.98px) {
    body.front-v53 {
        /* JS 同步前的保守預設（手機 logo／店名常 > 53px） */
        --front-v53-header-height: 56px;
    }

    /* 選單打開：同一顆按鈕的三橫線換成同線寬細 X。收起後恢復。按鈕尺寸與邊框不變。 */
    nav.front-v53-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M8 8L22 22M22 8L8 22'/%3e%3c/svg%3e");
        background-image: var(--bs-navbar-toggler-icon-bg);
    }

    /* 安防：打開時 X 筆畫鋪淡迷彩，外圈細邊保住叉形。金融 header 仍用上面的細線。 */
    nav.front-v53-header-v2 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cdefs%3e%3cpattern id='camo' width='8' height='8' patternUnits='userSpaceOnUse'%3e%3crect width='8' height='8' fill='%234a5538'/%3e%3cpath fill='%236e6244' d='M0 5c2-3 5-1 7 1 1 2 2 3 1 4s-5 0-7-2-2-4-1-3z'/%3e%3ccircle cx='2' cy='2' r='1.6' fill='%232e3328'/%3e%3ccircle cx='6.2' cy='6.2' r='1.35' fill='%238c9470'/%3e%3c/pattern%3e%3c/defs%3e%3cpath d='M8 8L22 22M22 8L8 22' fill='none' stroke='rgba%2820,24,16,0.4%29' stroke-linecap='round' stroke-width='4.6'/%3e%3cpath d='M8 8L22 22M22 8L8 22' fill='none' stroke='url(%23camo)' stroke-linecap='round' stroke-width='3.2'/%3e%3c/svg%3e");
        background-image: var(--bs-navbar-toggler-icon-bg);
    }

    /* 分類／About／聯繫：對齊主頁每側 6px。px-4 用 !important，須更高權重蓋過 */
    .sc-category-detail.container,
    .about-page.container,
    .iph-about.container,
    .iph-contact.container {
        --bs-gutter-x: calc(var(--front-mobile-gutter-x, 0.375rem) * 2);
        padding-left: var(--front-mobile-gutter-x, 0.375rem) !important;
        padding-right: var(--front-mobile-gutter-x, 0.375rem) !important;
    }

    .sc-category-detail .row,
    .about-page .row,
    .iph-about .row,
    .iph-contact .row {
        --bs-gutter-x: calc(var(--front-mobile-gutter-x, 0.375rem) * 2);
    }
}

/* 全域: 短頁面時 header 與 footer 不會相連 (min-height:100% 的父層 <main> 無明確高度無法撐開, 改用視窗高度減 header) */
body.front-v53 #mainbody {
    /* 勿再加 header-gap：會在 fixed header 與全寬英雄區之間露出一條淺色「凸邊」 */
    padding-top: var(--front-v53-header-height);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px;
    min-height: calc(100vh - var(--front-v53-header-height));
}

body.front-v53 #footer {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f1eeee46;
    /* 無 Standard／v2 時的後備細線；有模板時 :has(...) 會關掉並改用 gradient rail */
    border-top: 1px solid color-mix(in srgb, var(--site-accent, #c52d2f) 65%, transparent);
}

/* BS5 legacy class restore (views still using .text-left / .left) */
.text-left { text-align: left; }
.left { text-align: left; }