@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&display=swap');

/* --- 通用 Reset & Container 樣式 --- */
body,
html {
    margin: 0;
    padding: 0;
    /* === 關鍵修正：套用 LXGW WenKai TC 字體 === */
    font-family: 'LXGW WenKai TC', 'Noto Sans TC', serif;
    scroll-behavior: smooth;
    background: #65a9bb;
}

img {
    max-width: 100%;
    /* 關鍵：確保圖片寬度不會超過其父容器的 100% */
    /* height: auto;     保持圖片的長寬比，防止變形 */
    /* display: block;   讓圖片成為塊級元素，有助於排版和居中 */
}

/* 針對內容區塊內的圖片，如果您有專門的 class 例如 .content-section */
.content-section img {
    margin: 0 auto;
    /* 確保圖片在容器內居中 (如果圖片小於 100% 寬度) */
}

#CONTENT-1-bg1 {

    background: #65a9bb url("../images/bg.png") repeat;
}

#CONTENT-1-bg2 {

    background: #f9e7c0 url("../images/bg-2.png") repeat;
    padding: 3%;
    margin: 6% 0;
}
.list-text{
    padding-left: 2rem;
    font-size: 1.1rem;
}
.headline{
    background-color: aquamarine;
}

.BOX5 {
    max-width: 1200px;
    margin: 0 auto;
    width: 86%;
}

.BOX5 .title {
    clear: both;
    margin: 5% auto;
}


.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* 佔滿整個視窗高度 */
    overflow: hidden;
    /* 防止內容溢出 */
    display: flex;
    /* 方便內容居中 */
    justify-content: center;
    align-items: center;
}

/* --- 新增：底部過渡漸變偽元素 --- */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* 貼緊底部 */
    left: 0;
    width: 100%;
    height: 250px;
    /* 漸變區域的高度，您可以調整這個值 */
    z-index: 50;
    /* 確保它在所有元素（包括按鈕）上方，但您可以將按鈕的 z-index 設得更高 */
    pointer-events: none;
    /* 讓它不影響點擊 */

    /* === 關鍵：線性漸層設定 === */
    background: linear-gradient(to bottom,
            transparent,
            /* 漸變的頂部：完全透明 */
            #65a9bb
            /* 漸變的底部：目標背景色 */
        );

    /* 備註：如果您的下方內容背景色是白色，這裡就設為 white */
    /* background: linear-gradient(to bottom, transparent, white); */
}

/* --- 光暈層 (最上層的視覺效果) --- */
.glare-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    object-fit: cover;
    mix-blend-mode: screen;

    /* === 新增：動畫屬性 === */
    animation: glare-flash 4s ease-in-out infinite alternate;
    /* 4s: 動畫持續時間 4 秒
       ease-in-out: 開始和結束時慢，中間快
       infinite: 無限循環
       alternate: 交替播放 (從 0%->100% 再從 100%->0%) */
}

/* === 新增：定義閃動動畫的 Keyframes === */
@keyframes glare-flash {
    0% {
        opacity: 0.2;
        /* 起始透明度 50% (暗) */
    }

    /* 25%：光暈開始提亮，到達最亮狀態 */
    25% {
        opacity: 0.8;
        /* 最亮狀態 80% */
    }

    /* 75%：光暈維持在最亮狀態 (停留 50% 的時間) */
    75% {
        opacity: 1;
        /* 關鍵：從 25% 到 75% 之間，透明度都維持在 0.8 */
    }

    /* 100%：光暈開始變暗，回到初始狀態 */
    100% {
        opacity: 0.2;
        /* 回到初始透明度 50% (暗) */
    }
}

/* --- 裝飾圖片 --- */
.decorative-element {
    position: absolute;
    top: 0;
    /* 裝飾圖從頂部開始 */
    right: 0;
    /* 位於右側 */
    width: 100%;
    /* 寬度為視窗的 25% */
    z-index: 3;
    /* 與光暈同層，或根據需求調整 */
    pointer-events: none;
    /* 確保不影響用戶點擊 */
    animation: floatAnimation 3s ease-in-out infinite alternate;
    /* 懸浮動畫 */
}

/* --- RWD 調整 (手機螢幕隱藏或縮小) --- */
@media (max-width: 768px) {
    .decorative-element {
        width: 40vw;
        /* 手機上佔比加大 */
        opacity: 0.7;
        /* 手機上略微降低透明度，減少干擾 */
        top: 5vh;

    }
}

/* --- 背景影片樣式 --- */
.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: 1;
    object-fit: cover;
}

/* --- 影片半透明疊層 (移除或註解掉此區塊) --- */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /* 這是造成壓暗效果的樣式 */
    /* ---   background-color: rgba(0, 0, 0, 0.2); --- */

    z-index: 2;
    /* 必須確保 z-index 不高於內容 */
}

/* --- 內容容器，用於管理所有疊加元素 --- */
.content-wrapper {
    position: absolute;
    /* 相對於 hero-section 定位 */
    width: 100%;
    height: 100%;
    z-index: 3;
    /* 在影片和疊層上方 */
}

/* --- 左側 LOGO & 主標 --- */
.logo-title {
    position: absolute;
    top: 10vh;
    /* 距離頂部 10% 視窗高度 */
    left: 8vw;
    /* 距離左側 8% 視窗寬度 */
    width: 35vw;
    /* 寬度為視窗的 35% */
    max-width: 500px;
    /* 最大寬度限制 */
}

/* --- 左側介紹文字區塊 --- */
.intro-text-block {
    position: absolute;
    top: 12vh;
    left: 13vw;
    width: 36vw;
    z-index: 10;
}

/* --- 人物圖片樣式 (個別定位，共用懸浮動畫) --- */
.character {
    position: absolute;
    width: 40vw;
    /* 初始寬度為視窗的 40% */
    /*     max-width: 500px; /* 最大寬度限制 */
    animation: floatAnimation 3s ease-in-out infinite alternate;
    /* 懸浮動畫 */
    transform-origin: bottom;
    /* 懸浮時以底部為基準 */
    /* 漸變消失效果 */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    /* 兼容性 */
}

/* 個別人物的定位 */
.char-1 {
    top: 10vh;
    right: 27vw;
    width: 36vw;
    animation-delay: 0s;
}

.char-2 {
    top: 6vh;
    right: 15vw;
    width: 28vw;
    animation-delay: 0.5s;
}

.char-3 {
    top: 4vh;
    right: 0vw;
    width: 35vw;
    animation-delay: 1s;
}

.char-4 {
    top: 35vh;
    right: 5vw;
    width: 68vw;
    animation-delay: 1.5s;
}

.char-5 {
    top: 34vh;
    right: 0vw;
    width: 44vw;
    animation-delay: 2s;
}

/* 假設第五個人物是右下方的 */


/* 懸浮動畫定義 */
@keyframes floatAnimation {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-10px);
    }

    /* 向上漂浮 10px */
}

/* --- 底部按鈕樣式 --- */
.btn {
    position: absolute;
    bottom: 12vh;
    /* 距離底部 8% 視窗高度 */
    width: 16vw;
    /* 寬度為視窗的 18% */
    max-width: 250px;
    /* 最大寬度限制 */
    cursor: pointer;
    transition: transform 0.2s ease;
    /* 按鈕 hover 動畫 */
    z-index: 60;
}

.btn:hover {
    transform: scale(1.05);
    /* 放大一點點 */
}

.btn img {
    width: 100%;
    /* 讓圖片填滿按鈕容器 */
    display: block;
    /* 移除圖片底部的空白 */
}

.btn-buy {
    left: 30vw;
    /* 左邊按鈕定位 */
}

.btn-infov {
    right: 30vw;
    /* 右邊按鈕定位 */
}


#DOWN {
    clear: both;
    width: 100%;
    margin: 0 auto;
    background-color: #03080e;
    padding: 5px 0px;
    margin: 0;
}

#DOWN p {
    font-size: 12px;
    text-align: center;
    line-height: 2.5;
    color: #fff;
    margin: 0;
}










/* --- 響應式調整 (Media Queries) --- */
@media (max-width: 1024px) {
    /* 平板 */

    .intro-text-block {
        top: 20vh;
        left: 1vw;
        width: 55vw;
    }

    .btn-buy {
        left: 10vw;
    }

    .btn-infov {
        left: 32vw;
    }

    .character {
        width: 50vw;
    }

    .char-1 {
        top: 8vh;
        right: 13vw;
        width: 64vw;
    }

    .char-2 {
        top: 5vh;
        right: -6vw;
        width: 48vw;
    }

    .char-3 {
        top: 5vh;
        right: -22vw;
    }

    .char-4 {
        top: 26vh;
        right: -14vw;
        width: 100vw;
    }

    .char-5 {
        top: 24vh;
        right: -6vw;
    }



}

@media (max-width: 768px) {

    /* 手機 */
    .hero-section {
        height: 80vh;
        /* 手機上可以適當縮短高度 */
    }


    .intro-text-block {
        top: 24vh;
        left: 50%;
        transform: translateX(-50%);
        /* 手機上居中 */
        width: 95vw;
        max-width: 400px;
    }

    /* === 關鍵修正：將 width: 100% 改為較高的 vw 數值 === */
    .character {

        max-width: 768px;
    }

    /* 手機上人物可以調整位置，避免重疊或過於密集 */

    .char-1 {
        top: 0vh;
        left: -35vw;
        width: 121vw;
    }

    .char-2 {
        top: -3vh;
        right: -13vw;
        width: 85vw;
    }

    .char-3 {
        top: -5vh;
        right: -48vw;
        width: 93vw;
    }

    .char-4 {
        top: 22vh;
        left: -66vw;
        width: 180vw;
    }

    .char-5 {
        top: 14vh;
        right: -38vw;
        width: 97vw;
    }

    /* 按鈕在手機上調整為一列 */
    .btn {
        bottom: 7vh;
        width: 45vw;
        max-width: 200px;
    }

    .btn-buy {
        left: 50%;
        transform: translateX(calc(-100% - 10px));
        /* 將按鈕向左移，製造間隔 */
    }

    .btn-infov {
        left: 50%;
        transform: translateX(10px);
        /* 將按鈕向右移，製造間隔 */
    }




}