* 
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #007BFF, #00C6FF);
            color: white;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .header-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
            flex-wrap: wrap;
            max-width: 90%;
            margin-left: auto;
            margin-right: auto;
        }
        .glow-title {
            font-size: 48px;
            font-weight: bold;
            color: white;
            background-color: rgb(17, 73, 113);
            border: 3px solid #00ffff;
            border-radius: 15px;
            text-shadow: 0 0 5px #00ffff, 0 0 2px #00ffff, 0 0 2px #00ffff;
            padding: 15px 20px;
            max-width: 80%;
            word-wrap: break-word;
        }
        .profile-pic {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid #00ffff;
            box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
            animation: glow 0.5s infinite alternate;
        }

        @keyframes glow {
            0% {
                box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
            }
            100% {
                box-shadow: 0 0 15px #00ffff, 0 0 25px #00ffff, 0 0 35px #00ffff;
            }
        }

        .calendar-section {
            max-width: 665px;
            margin: 0 auto;
        }
        
        .calendar-section iframe {
            width: 95%;
            height: 450px;
            border: none;
            margin: 20px auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .contact-section {
            background: rgba(0, 0, 50, 0.6);
            padding: 15px;
            border-radius: 10px;
            width: 80%;
            max-width: 600px;
            margin: 20px auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .contact-item {
            margin: 8px 0;
            font-size: 16px;
        }
        .contact-item a {
            color: #ffeb3b;
            text-decoration: none;
        }
        .contact-item a:hover {
            text-decoration: underline;
        }
        /* 字體設定 */
        @font-face {
            font-family: 'jf-openhuninn';
            src: url('./fonts/jf-openhuninn-2.1.ttf') format('truetype');
        }
        
        .countdown-title {
            font-family: 'jf-openhuninn', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
        }
                
        @font-face {
            font-family: 'ZenMaruGothic-Medium';
            src: url('./fonts/ZenMaruGothic-Medium.ttf') format('truetype');
        }
        
        .countdown-titl {
            font-family: 'ZenMaruGothic-Medium', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
        }
        
              

/* 倒數時間膠囊樣式 - 適用於所有裝置 */
.section-title {
    font-size: 50px; /* 設定字體大小為50像素，適合用作大標題 */
    font-weight: bold; /* 使用粗體字 */
    color: #ffffff; /* 文字顏色為白色 */
    margin-top: 40px; /* 上方外距40px */
    margin-bottom: 60px; /* 下方外距60px，讓區塊更分明 */
    text-align: center; /* 文字置中對齊 */
    position: relative; /* 相對定位，用於搭配動畫或內部元素定位 */
    display: inline-block; /* 讓區塊元素的寬度依內容調整，但仍保留區塊特性 */
    padding: 8px 50px; /* 上下內距8px，左右內距20px */
    background-color: rgb(17, 73, 113); /* 背景顏色為深藍色 */
    border: 4px solid #057ae7; /* 邊框為3px實線，顏色為亮藍色 */
    border-radius: 20px; /* 邊角圓弧30px，呈現膠囊效果 */
    box-shadow: 0 2px 10px rgba(0, 198, 255, 0.3); /* 陰影效果讓元件有浮起來的感覺 */
    letter-spacing: 1px; /* 字元間距設定為1px，增加可讀性 */
    text-shadow: 
        0 0 5px #1789e7,    /* 第一層藍色陰影 */
        0 0 2px #00ffff,    /* 第二層亮青色陰影 */
        0 0 2px #1e1f1f;    /* 第三層灰黑陰影，增加立體感 */
    animation: fadeInScale 0.8s ease-in-out; /* 套用動畫，淡入加放大效果 */
    animation-fill-mode: forwards; /* 動畫結束後保留最後狀態 */
    animation-delay: 0.3s; /* 延遲0.3秒再執行動畫 */
    max-width: 90%; /* 最大寬度為容器的90% */
    word-wrap: break-word; /* 文字太長時自動換行 */
}


        .countdown-banner {
            width: 80%;
            max-width: 600px;
            background: linear-gradient(90deg, #005eaa, #00b4d8);
            color: white;
            padding: 15px 25px;
            margin: 20px auto 40px auto;
            border-radius: 30px;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            animation: fadeInScale 0.5s ease-in-out;
            animation-fill-mode: forwards;
            animation-delay: 0.5s;
        }

        .countdown-banne {
            width: 80%;
            max-width: 600px;
            background: linear-gradient(90deg, #aa4a00, #ffa200);
            color: white;
            padding: 15px 25px;
            margin: 20px auto 40px auto;
            border-radius: 30px;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            animation: fadeInScale 0.5s ease-in-out;
            animation-fill-mode: forwards;
            animation-delay: 0.5s;
        }
        .countdown-banne1 {
            width: 80%;
            max-width: 600px;
            background: linear-gradient(90deg, #001eff,#222222, #ff0000);
            color: white;
            padding: 15px 25px;
            margin: 20px auto 40px auto;
            border-radius: 30px;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            animation: fadeInScale 0.5s ease-in-out;
            animation-fill-mode: forwards;
            animation-delay: 0.5s;
        }
        .countdown-banne5 {
            width: 80%;
            max-width: 600px;
            background: linear-gradient(0deg, hsl(233, 91%, 49%), #02398b,#0066ff);
            color: white;
            padding: 15px 25px;
            margin: 20px auto 40px auto;
            border-radius: 30px;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            animation: fadeInScale 0.5s ease-in-out;
            animation-fill-mode: forwards;
            animation-delay: 0.5s;
        }

        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.95);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 手機適配 */
        @media (max-width: 768px) {
            .glow-title {
                font-size: 30px;
                padding: 10px 20px;
            }
            .profile-pic {
                width: 70px;
                height: 70px;
            }
            .calendar-section iframe {
                height: 350px;
            }
            .contact-section {
                width: 90%;
            }
            .contact-item {
                font-size: 14px;
            }
            
            .calendar-section iframe {
                backdrop-filter: blur(4px);
                background: rgba(255, 255, 255, 0.1);
                border: 4px solid rgba(0, 0, 0, 0.3);
            }
            
            .section-title {
                font-size: 32px;
            }
            
            .countdown-banner {
                font-size: 18px;
                width: 90%;
                padding: 12px 20px;
            }
            
            .countdown-banner i {
                font-size: 22px;
            }
        }