/* ==============================
   頂部 Header（透明狀態）
   ============================== */
.pch-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    /*padding-top: 10px;*/
    /*background: transparent !important;*/
    background: #000 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}

/* Logo 大小 */
.pch-logo {
    height: 4rem;
    width: 150px;
}

/* Menu 字型 */
.pch-nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333 !important;
}

.pch-header.fixed-top a.nav-link.pch-nav-link {
    color: #FFF !important;
}

    .pch-header.fixed-top a.nav-link.pch-nav-link::after {
        background: #FFF !important;
    }

.pch-header.fixed-top.scrolled a.nav-link.pch-nav-link {
    color: #000 !important;
}

    .pch-header.fixed-top.scrolled a.nav-link.pch-nav-link::after {
        background: #000 !important;
    }

.pch-header.fixed-top.scrolled2 a.nav-link.pch-nav-link {
    color: #000 !important;
}

    .pch-header.fixed-top.scrolled2 a.nav-link.pch-nav-link::after {
        background: #000 !important;
    }

    .pch-header.fixed-top.scrolled2 a.nav-link.pch-nav-link::after {
        background: #000 !important;
    }

/* Navbar toggler default (dark header) */
.pch-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.pch-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navbar toggler on light headers */
.pch-header.scrolled .navbar-toggler,
.pch-header.scrolled2 .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.6);
}

.pch-header.scrolled .navbar-toggler-icon,
.pch-header.scrolled2 .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.pch-nav-link.pch-nav-active {
    color: #e98122 !important;
    border-bottom: 3px solid #ffc35c;
}

    .pch-nav-link.pch-nav-active::after {
        background: #ffc35c !important;
    }

/* ==============================
   滑動後 Header（白底＋陰影）
   ============================== */
.pch-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    position: fixed !important;
}

.pch-header.scrolled2 {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; */
    position: fixed !important;
    /*border-bottom: 1px solid #f7f7f7;*/
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* 分隔線：只有前面 4 個有，最後一個（會員登入）沒有 */
/*.navbar-nav .nav-item:not(:last-child) .nav-link {
    position: relative;
    padding-right: 18px;
}

    .navbar-nav .nav-item:not(:last-child) .nav-link::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 1px;
        height: 16px;
        background: #000;
        transform: translateY(-50%);
    }*/

/* 先移除全部分隔線，避免干擾 */
/*.navbar-nav .nav-link::after {
    content: none !important;
}*/

/* 只對前 3 個 nav-item 加分隔線 */

.nav-link {
    font-size: 14pt;
    font-weight: 900;
}

.navbar-nav .nav-item:nth-child(-n+4) .nav-link {
    position: relative;
    padding-right: 16px;
}

    .navbar-nav .nav-item:nth-child(-n+4) .nav-link::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 1px;
        height: 16px;
        background: #000;
        transform: translateY(-50%);
    }

#mainNav {
    font-size: 14pt;
    font-weight: 900;
}

/* 整體背景 */
.pch-footer {
    /*background: #f7f7f7;*/
    padding-top: 3rem;
    /*    padding-bottom: 2rem;
*/ margin-top: 3rem;
}

/* 內容限制寬度 */
.footer-container {
    max-width: 1320px; /* ★ 你要求的最大寬度 */
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}

/* 左側區域 */
.footer-left {
    width: 350px;
}

.footer-logo {
    width: 160px;
    margin-bottom: 1.5rem;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    line-height: 1.9;
}

    .footer-menu a {
        color: #444;
        text-decoration: none;
        font-size: 0.95rem;
    }

        .footer-menu a:hover {
            color: #ff8c2a;
        }

.footer-help .help-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    display: block;
}

.help-phone {
    color: #ff6820;
    font-weight: 600;
    text-decoration: none;
}

/* 訂閱區域 */
.footer-right {
    flex: 1;
}

.footer-subscribe-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.footer-subscribe-desc {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.footer-subscribe-box {
    display: flex;
    gap: 10px;
    margin-bottom: 1.2rem;
}

.footer-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.footer-btn {
    padding: 10px 20px;
    background: #ff8c2a;
    border: none;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
}

    .footer-btn:hover {
        background: #ff9c45;
    }

/* 社群圖示 */
.footer-social {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-top: auto;
    height: 65%;
}

    .footer-social a {
        display: inline-block;
    }

    .footer-social .social-icon {
        width: 28px; /* 可依需求調整 */
        height: 28px;
        object-fit: contain;
        transition: transform .2s ease, opacity .2s ease;
    }

        .footer-social .social-icon:hover {
            transform: scale(1.12); /* hover 效果 */
            opacity: 0.85;
        }

/* 最底部 */
.footer-bottom {
    max-width: 100%;
    margin: 2.5rem auto 0;
    padding: 1.5rem 0;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: center;
    color: #888;
    font-size: 0.95rem;
    background-color: #dddd;
}

.footer-bottom-links a {
    margin-left: 1.2rem;
    color: #666;
    text-decoration: none;
}

    .footer-bottom-links a:hover {
        color: #ff8c2a;
    }

/* 手機版 */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }

    .footer-right {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }

    .footer-bottom-links a {
        margin: 0 0.6rem;
    }
}

.head-menu-icon {
    width: 30px;
}

.nav-item-user {
    padding-left: 2vw;
}

/*主視覺*/
.H-B-Title_1 {
    font-family: 'SourceHanSansTWHK-Medium' !important;
    font-weight: 400 !important;
    font-size: 30pt !important;
}

.H-B-Title_2 {
    font-family: 'Pano Bold' !important;
    font-weight: bold !important;
    font-size: 30pt !important;
}

.H-B-Title_3 {
    font-family: 'Pano Bold' !important;
    font-weight: bold !important;
    font-size: 30pt !important;
}

/*指定文字大小*/
.fs-9pt {
    font-size: 9pt;
}
/*宣告字型*/
@font-face {
    font-family: 'Pano Bold';
    src: url('../../fonts/Pano Bold.woff2') format('woff2'), url('../../fonts/Pano Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pano Trial Light';
    src: url('../../fonts/HW Pano Trial Light.woff2') format('woff2'), url('../../fonts/HW Pano Trial Light.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansTWHK-ExtraLight';
    src: url('../../fonts/SourceHanSansTWHK-ExtraLight.woff2') format('woff2'), url('../../fonts/SourceHanSansTWHK-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansTWHK-Light';
    src: url('../../fonts/SourceHanSansTWHK-Light.woff2') format('woff2'), url('../../fonts/SourceHanSansTWHK-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansTWHK-Regular';
    src: url('../../fonts/SourceHanSansTWHK-Regular.woff2') format('woff2'), url('../../fonts/SourceHanSansTWHK-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansTWHK-Normal';
    src: url('../../fonts/SourceHanSansTWHK-Normal.woff2') format('woff2'), url('../../fonts/SourceHanSansTWHK-Normal.woff') format('woff');
    font-weight: 450;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansTWHK-Medium';
    src: url('../../fonts/SourceHanSansTWHK-Medium.woff2') format('woff2'), url('../../fonts/SourceHanSansTWHK-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansTWHK-Bold';
    src: url('../../fonts/SourceHanSansTWHK-Bold.woff2') format('woff2'), url('../../fonts/SourceHanSansTWHK-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansTWHK-Heavy';
    src: url('../../fonts/SourceHanSansTWHK-Heavy.woff2') format('woff2'), url('../../fonts/SourceHanSansTWHK-Heavy.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'house';
    src: url('../../fonts/house.woff2') format('woff2'), url('../../fonts/house.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* 內嵌 CSS 方便您直接複製運行 */
/* 從步驟 2 複製修正後的 CSS 貼在這裡 */
/* =================================== */
.modal-content.login-card {
    max-width: 450px;
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background: #edebec;
}

/* 修正 LINE 按鈕樣式：綠色背景，白色文字 */
.line-btn {
    background-color: #00C300;
    border-color: #00C300;
}

    .line-btn:hover {
        background-color: #00A600;
        border-color: #00A600;
    }

/* 獲取驗證碼按鈕的深灰色背景 */
.get-code-btn {
    background-color: #374a46 !important; /* 深灰色 */
    /*    border-color: #495057;
*/ font-size: 1rem;
    line-height: 1.5;
    /* 讓按鈕和輸入框高度一致 */
    /*    padding-top: 0.75rem;
    padding-bottom: 0.75rem;*/

    border: 0 !important;
    border-radius: 5px !important;
    /*    padding: 6px 0 !important;
    width: 48% !important;*/
}

    .get-code-btn:hover {
        background-color: #343a40;
        border-color: #343a40;
    }

/* 調整輸入框組件的邊框，使其自然連貫 */
.input-group-text {
    /* 調整前綴圖標的內邊距，與輸入框保持一致 */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* 移除右側邊框，與輸入框連接 */
    border-right: none;
}

.form-control {
    /* 移除左側邊框，與前綴連接 */
    border-left: none;
    /* 調整輸入框內邊距，與按鈕和前綴保持一致 */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

    /* 移除焦點時的邊框陰影 */
    .form-control:focus, .btn:focus {
        box-shadow: none !important;
    }

/* 讓輸入框和按鈕在 input-group 中高度一致 */
.input-group .btn {
    height: 100%;
}

/* 關閉按鈕顏色修正 (讓它在白色背景上明顯) */
.btn-close {
    filter: grayscale(1);
}

.Line-btn {
    background: #06c655 !important;
}

.div-phone {
    padding: 7px;
    border: 1px solid #d0d4d0;
    border-radius: 7px;
    background-color: #FFF !important;
    height: 4rem;
}

.span-phone {
    border: 0 !important;
    padding: 0 0 0 8px !important;
}

.input-phone {
    border: 0 !important;
    font-size: 11pt !important;
    color: #7c8084;
}

.Login-Title {
    font-size: 23pt;
    font-family: 'Pano Bold';
}

.Login-Title-2 {
    font-size: 11pt !important;
    color: #7c8084 !important;
}

    .Login-Title-2::placeholder {
        font-size: 11pt !important;
        color: #7c8084 !important;
    }

.btn-span-login {
    width: 45%;
}

.btn-logout {
}

/* 容器：讓兩個選項並排 */
.login-option-wrapper {
    display: flex;
    gap: 60px; /* 兩個選項之間的距離 */
    justify-content: center; /* 如果放在大區塊內，確保置中 */
}

/* 每個選項的區塊 */
.login-option-item {
    display: flex;
    flex-direction: column; /* 讓圖標在上面，文字在下面 */
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    text-decoration: none; /* 避免如果是 <a> 標籤會有底線 */
}

    /* 滑鼠移過去的微互動效果 */
    .login-option-item:hover {
        transform: translateY(-5px);
    }

        .login-option-item:hover .login-option-circle {
            background-color: #eef2f6; /* hover 時背景變深一點點 */
        }

/* 圓形背景樣式 */
.login-option-circle {
    width: 60px;
    height: 60px;
    background-color: #f4f7fa; /* 淡藍灰色背景 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* 圖標本身的樣式 */
    .login-option-circle i {
        font-size: 32px;
        color: #9aa7b9; /* 灰藍色圖標 */
    }

    .login-option-circle img {
        width: 40px;
    }
/* 文字標籤樣式 */
.login-option-label {
    font-size: 16px;
    color: #7b8ba0; /* 文字顏色 */
    font-weight: 400;
}

/* --- 帳號登入表單專用樣式 (login-account-XXX) --- */

/* 卡片本體 */
.login-account-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
}

/* 標題區域 */
.login-account-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-account-title {
    color: #5d7592; /* 深灰藍色 */
    font-weight: 600;
    margin-bottom: 8px;
}

.login-account-subtitle {
    color: #9aa7b9;
    font-size: 14px;
    margin: 0;
}

/* 文字標籤 */
.login-account-label {
    color: #7b8ba0;
    font-size: 14px;
    font-weight: 500;
}

/* 輸入框左側的 Icon 背景 */
.login-account-icon-span {
    background-color: #f4f7fa;
    border: 1px solid #ced4da;
    border-right: none;
    color: #9aa7b9;
}

/* 輸入框本體 */
.login-account-input {
    border-left: none;
    padding: 10px 15px;
    background-color: #fff;
    color: #555;
    transition: all 0.3s ease;
}

    .login-account-input:focus {
        box-shadow: none;
        border-color: #ced4da;
        background-color: #fcfcfc;
    }

/* Focus 狀態連動效果 */
.input-group:focus-within .login-account-icon-span,
.input-group:focus-within .login-account-input {
    border-color: #9aa7b9;
}

/* 登入按鈕 */
.login-account-btn {
    background-color: #374a46;
    border: none;
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

    .login-account-btn:hover {
        background-color: #4a5e75;
    }

/* 連結文字 */
.login-account-link {
    color: #7b8ba0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

    .login-account-link:hover {
        color: #5d7592;
        text-decoration: underline;
    }

/* 選項文字 */
.login-account-options {
    font-size: 14px;
    color: #7b8ba0;
}

/* 預設樣式 (你原本應該已經有類似的，確保 login-option-circle 有 transition) */
.login-option-circle {
    /* ...你原本的樣式... */
    transition: background-color 0.3s ease;
}

    .login-option-circle img {
        width: 32px; /* 假設圖片大小，你可以依實際調整 */
        height: 32px;
        transition: filter 0.3s ease;
    }

/* --- Active 狀態 (被選中時) --- */

/* 1. 圓圈背景變深藍色 */
.login-option-item.active .login-option-circle {
    background-color: #374945;
}

    /* 2. 圖片變白色 (使用濾鏡) */
    .login-option-item.active .login-option-circle img {
        /*filter: brightness(0) invert(1);*/
    }

/* 3. 文字變深色加粗 */
.login-option-item.active .login-option-label {
    color: #374945;
    font-weight: 600;
}
/* =================================== */