/* --- 基礎設定 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: "Microsoft JhengHei", sans-serif; 
    background-color: #fff4b0; 
    overflow-x: hidden; 
    background-image: url("../img/WBC_bg.jpg"); 
    background-repeat: repeat;
}
img { display: block; width: 100%; height: auto; }
.content-container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* KV & 繩索 */
header { display: flex; justify-content: center; position: relative; }
.kv-section {    
    background: url(../img/kv-bg.jpg) no-repeat center center / cover;
    width: 100%;
    height: 910px;
    position: relative;
    z-index: 1;
    overflow: hidden;    
}

/* --- LOGO 區域 --- */
.logo-area {
    position: absolute;
    z-index: 100;
    line-height: 0;
    top: 15px;
    left: 15px;
}
.logo-area img { width: 260px !important; height: auto !important; display: block; }

/* --- 頂部導覽按鈕 --- */
.top-nav {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
}
.nav-links { display: flex; gap: 10px; }
.nav-btn {
    display: flex;
    align-items: center;
    background-color: #e60012;
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    transition: 0.3s;
    white-space: nowrap;
}
.icon-arrow {
    display: inline-block;
    width: 0; height: 0; margin-left: 8px;
    border-style: solid; border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #ffffff;
}

/* --- 修改過的漢堡選單 (已縮小) --- */
.hamburger {
    display: none; /* 電腦版隱藏 */
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 4px;             /* 縮小線條間距 */
    background: #e60012;
    padding: 8px;         /* 縮小內距 (原本是 10px) */
    border-radius: 5px;
    width: 36px;          /* 強制設定寬度使其變小 */
    height: 32px;         /* 強制設定高度使其變小 */
    align-items: center;
}
.hamburger span { 
    width: 20px;          /* 縮小線條長度 (原本可能是 25px) */
    height: 2px;          /* 線條稍微變細 (原本 3px) */
    background: white; 
    display: block;
}

/* --- GoTop 按鈕 --- */
.gotop-btn {
    position: fixed;
    bottom: 30px;
    right: 35px;
    width: 50px; height: 50px;
    background: #e60012;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- 內容區塊 --- */
.user-cards { display: flex; justify-content: center; align-items: flex-end; gap: 30px; margin-bottom: 50px !important; }
.card-box { flex: 1; }
.torii-section { margin-bottom: 80px !important; }
.cta-section { text-align: center; margin-bottom: 120px !important; }
.app-btn { width: 40%; display: inline-block; transition: 0.3s; }

/* --- 注意事項樣式 --- */
.notice-section { background-color: #2c6c9b; color: #fff; padding: 60px 0; }
.notice-head { text-align: center; position: relative; top: -100px; }
.notice-head img { width: 30%; height: auto !important; display: inline-block; }
.notice-list { font-size: 16px; line-height: 1.8; text-align: justify; }
.notice-list a {
    color: #ffffff !important;
    text-decoration: underline;
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.5;
    vertical-align: middle;
}
.footer-info { background-color: #fff; padding: 20px 0; text-align: center; font-size: 14px; }

/* --- RWD 斷點 --- */
@media (max-width: 1344px) { .kv-section { height: 600px; } }
@media (max-width: 878px) { .kv-section { height: 400px; } }

@media (max-width: 768px) {
    .hamburger { display: flex; } /* 手機版顯示縮小後的漢堡 */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 45px;             /* 配合按鈕縮小向上微調 */
        right: 0;
        background: #e60012;
        padding: 10px;
        border-radius: 8px;
        width: 160px;
    }
    .nav-links.active { display: flex; }
    .nav-btn { border-bottom: 1px solid rgba(255,255,255,0.2); border-radius: 0; padding: 12px 5px; }
}

@media (max-width: 1560px) {
    .logo-area { top: 12px; left: 12px; }
    .logo-area img { width: 200px !important; }
    .user-cards, .torii-section { margin-bottom: 48px !important; }
    .cta-section { margin-bottom: 75px !important; }
}

@media (max-width: 610px) {
    .kv-section { background: url(../img/kv-bg_RWD.jpg) no-repeat center center / cover; height: 330px; }
    .logo-area img { width: 180px !important; }
    .user-cards { flex-direction: column; align-items: center; margin-bottom: 30px !important; }
    .user-cards .card-box:last-child { margin-bottom: 30px !important; }
    .app-btn { width: 85%; }
    .notice-head img { width: 45%; }
}

@media (max-width: 450px) {
    .kv-section {
        background: url(../img/kv-bg_RWD.jpg) no-repeat center center / cover;
        height: 300px;
    }
    .logo-area img { width: 120px !important; }
    .top-nav {
        top: 10px;
        right: 10px;
    }
    
}

/* 容器定位在右下角 */
.sticky-buttons {
    position: fixed;
    right: 20px;
    bottom: 92px; /* 已根據你的設定調整為 92px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* 兩個按鈕之間的距離 */
    z-index: 9999;
    font-family: "Microsoft JhengHei", sans-serif;
}

/* 共通連結樣式清除 */
.sticky-buttons a {
    text-decoration: none;
    color: black;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 上方「下載e指沖」按鈕樣式 */
.btn-download {
    background-color: white;
    border: 2px solid #444; /* 外框線 */
    border-radius: 100px;   /* 膠囊形圓角 */
    width: 72px;            /* 固定寬度 */
    padding: 2px;           /* 讓內部紅色圓塊與邊框有一點點呼吸空間，或設為 0 貼齊 */
    overflow: hidden;
    box-sizing: border-box;
}

.icon-top {
    background-color: #f12c2c; 
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto 10px auto;
}

.arrow-down {
    color: #000;
    font-size: 35px;
    font-weight: bold;
    transform: translateY(-2px);
}

.text-content {
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    padding-bottom: 15px;
}

.btn-open {
    background-color: #f12c2c;
    color: white !important;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.btn-open:hover {
    transform: scale(1.05);
}