/* main.css —— 最終完美版（about-us-section 與 Learning 響應式 + 移除 about-us-section media 變化 + 其他要求全部滿足） */

/* 你原有的所有樣式完全保留 */
html, body {
    margin: 0;
    padding: 0 !important;
    height: 100%;
}

/* 背景圖片容器：改為 relative 以定位 logo 和頂部黑條 */
.hero-section {
    position: relative; /* 關鍵：允許子元素 absolute 定位 */
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* 移除 img 底部空白 */
}

/* 全屏背景圖片 */
.hero-image {
    width: 100%;
    height: calc(100vh - 90px); /* 減去導航列高度 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 圖片表面頂部黑色半透明長條（高 40px，透明度 65%） */
.hero-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.65); /* 黑色 + 65% 透明度 */
    display: flex;
    justify-content: flex-end; /* 改為靠右對齊 */
    align-items: center;
    gap: 25px; /* 按鈕間距 */
    z-index: 10;
    padding-right: 25px; /* 右邊內距 */
    padding-bottom: 5px;
}

/* 頂部長條內按鈕樣式 */
.hero-top-bar a {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 24px; /* 文字大小 */
    color: #ffffff;
    text-decoration: underline; /* 底線 */
    text-underline-offset: 4px;
}
.hero-top-bar a:hover {
    color: #cccccc;
}

/* 圖片表面中間偏下 logo */
.hero-logo {
    position: absolute;
    left: 50%;
    bottom: 40px; /* 偏下位置 */
    transform: translateX(-50%);
    width: 150px; /* logo 寬度 */
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* About us 區塊：正常文件流，緊貼圖片下方（響應式） */
.about-us-section {
    height: clamp(100px, 25vh, 300px); /* 高度隨視窗縮小 */
    padding-left: clamp(40px, 8vw, 70px); /* padding-left 隨視窗縮小 */
    margin: 0;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* About us 文字：A 和 U 70pt，其他字母 50pt（響應式） */
.about-us-text {
    font-family: 'Arial-Narrow-Bold', 'Arial', sans-serif;
    font-size: clamp(30pt, 5vw, 40pt); /* 基本大小隨視窗縮小 */
    color: #333333;
    margin: 0;
    line-height: 1;
}
/* 只讓 A 和 U 變大為 70pt（響應式） */
.about-us-text::first-letter, /* 第一個 A */
.about-us-text span.u { /* U 用 span 包起來變大 */
    font-size: clamp(35pt, 6vw, 50pt); /* A/U 隨視窗縮小 */
}

/* 新增區塊：在 About us 下方 */
.new-section {
    background: #f2f2f2;
    margin-right: 40px;
    padding-left: 70px;
    display: flex;
    align-items: stretch;
    min-height: 520px; /* ← 新區域高度改為 660px */
}

/* 內層容器 */
.new-section-inner {
    display: flex;
    width: 100%;
    max-width: 1400px; /* 可自行調整最大寬度 */
    margin: 0 auto;
}

/* 左側圖片：佔 div 高度 100% */
.new-section-left-img {
    width: 39%; /* 左側佔 50%（可調整） */
    height: 100%; /* 完全佔滿新區域高度 */
    object-fit: cover;
    display: block;
}

/* 右側文章容器 */
.new-section-right {
    width: 62%; /* 右側佔 50% */
    padding: 60px 62px; /* 內距，可調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 文章上方 logo */
.article-logo {
    width: 81%; /* logo 寬度，可調整 */
    height: auto;
    margin-bottom: 15px;
    margin-top: 15px;
}

/* 文章文字 */
.article-text {
    font-family: "SourceHanSerifSC-Regular" !important ;
    font-size: 20px; /* 可調整 */
    line-height: 1.4;
    color: #5e5e5e;
    letter-spacing: 0px;
}

.article-text-en {
    font-family: "CrimsonText-Regular" !important ;
    font-size: 20px; /* 可調整 */
    line-height: 1.4;
    color: #5e5e5e;
    letter-spacing: 0px;
}

/* 新增視頻區塊：16:9 背景圖片 + padding 隨視窗縮小 */
.video-section {
    position: relative;
    width: 100%;
    padding: clamp(40px, 8vw, 110px); /* padding 隨視窗縮小，最小 40px */
    background-image: url("images/Homepage/videbg.jpg"); /* 替換為你的16:9圖片路徑 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    box-sizing: border-box;
}

/* 上半區域：左 logo + 右文字 + 藍色按鈕 */
.video-upper {
    display: flex;
    align-items: center;
    margin-bottom: clamp(30px, 5vw, 60px); /* margin-bottom 隨視窗縮小 */
}
.video-logo {
    width: 25%; /* logo 寬度，可調整 */
    height: auto;
    margin-right: clamp(20px, 4vw, 40px); /* 右邊 margin 隨視窗縮小 */
}
.video-title {
    flex: 1;
    display: flex;
    flex-direction: column; /* 標題在上，按鈕+文字在下 */
}
.video-title h2 {
    font-family: 'AlibabaPuHuiTi-Bold', sans-serif;
    font-size: clamp(1px, 4.5vw, 52px); /* 調整縮小幅度：最小 28px，4.5vw 更敏感 */
    margin: 0 0 clamp(15px, 3vw, 30px) 0; /* 下邊 margin 隨視窗縮小 */
    line-height: 1.2;
}

.video-title h2-en {
    font-family: 'Roboto-black', sans-serif;
    font-size: clamp(1px, 3.3vw, 45px); /* 調整縮小幅度：最小 28px，4.5vw 更敏感 */
    margin: 0 0 clamp(15px, 3vw, 30px) 0; /* 下邊 margin 隨視窗縮小 */
    line-height: 1.2;
}

.video-title h2-hant {
    font-family: 'AlibabaSansHK-Bold', sans-serif;
    font-size: clamp(1px, 4.5vw, 52px); /* 調整縮小幅度：最小 28px，4.5vw 更敏感 */
    margin: 0 0 clamp(15px, 3vw, 30px) 0; /* 下邊 margin 隨視窗縮小 */
    line-height: 1.2;
}

/* 按鈕 + 文字一行靠左 */
.video-upper-right-row {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 20px); /* gap 隨視窗縮小 */
}

/* 藍色圓形按鈕（隨視窗縮小，最小 1px） */
.video-channel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(1px, 6vw, 60px);
    height: clamp(1px, 6vw, 60px);
    background: #0095d6;
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    font-family: 'AlibabaPuHuiTi-Medium', sans-serif;
    font-size: 0;
}
.video-channel-btn .play-icon {
    font-size: clamp(1px, 4vw, 32px);
}
.video-channel-btn:hover {
    background: #007bb5;
}

/* 按鈕右邊文字 */
.videoac {
    font-size: clamp(1px, 3vw, 28px);
    font-family: 'AlibabaPuHuiTi-Medium', sans-serif;
    color: #ffffff;
}

.videoac-hant {
    font-size: clamp(1px, 3vw, 28px);
    font-family: 'AlibabaSansHK-Bold', sans-serif;
    color: #ffffff;
}

.videoac-en {
    font-size: clamp(1px, 3vw, 28px);
    font-family: 'Arial-Black', sans-serif;
    color: #ffffff;
}

/* 下半區域：3張圖片並排 + 紅色播放按鈕（隨視窗縮小，最小 1px） */
.video-lower {
    display: flex;
    justify-content: space-between;
    gap: clamp(15px, 4vw, 30px); /* gap 隨視窗縮小 */
}
.video-item {
    position: relative;
    width: 33.33%;
}
.video-thumb {
    width: 100%;
    height: auto;
    display: block;
}
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(1px, 8vw, 80px);
    height: clamp(1px, 8vw, 80px);
    background: red;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.play-triangle {
    font-size: clamp(1px, 5vw, 40px);
    color: #ffffff;
    margin-left: 5px;
}
.video-play-btn:hover {
    background: #cc0000;
}

/* 彈出視頻播放器 */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}
.video-modal.active {
    display: flex;
}
.video-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}
#modal-video {
    width: 80%;           /* 或 90%、你原本想用的比例 */
    height: auto;
    display: block;       /* 關鍵：變成塊級元素 */
    margin: 0 auto;       /* 左右自動 margin → 水平置中 */
}
.video-close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 40px;
    color: #ffffff;
    cursor: pointer;
}

/* ==================== new-section 響應式修正 ==================== */
/* 預設（大屏）：左右並排 */
.new-section-inner {
    display: flex;
    align-items: stretch;
}

/* 小屏（≤1120px）：圖片在上，logo + 文字在下置中 */
@media (max-width: 768px) {
    .hero-top-bar {
        display: none !important;
    }
    .new-section {
        padding: 40px;
        margin: 10px;
        padding-bottom: 0px;
    }
    .new-section-inner {
        flex-direction: column; /* 垂直排列 */
        align-items: center;
    }
    .new-section-left-img {
        width: 100%; /* 圖片佔滿寬度 */
        height: 300px;
    }
    .new-section-right {
        width: 100%;
        padding: 40px 20px; /* 手機內距 */
        text-align: center; /* 文字置中 */
    }
    .article-logo {
        width: 200px; /* 手機 logo 較大 */
        margin: 0 auto 30px auto;
        display: block;
    }
    .article-text {
        font-size: 18px; /* 手機文字縮小 */
        line-height: 1.6;
    }
}

/* Learning 區塊（響應式） */
.Learing {
    height: clamp(100px, 25vh, 300px); /* 高度隨視窗縮小 */
    padding-top: clamp(50px, 6vh, 70px); /* padding-top 隨視窗縮小 */
    font-family: "Arial-Black", Cambria;
    font-size: clamp(20px, 4vw, 80px); /* 文字大小隨視窗縮小 */
    color: #ed8700;
    text-align: center;
}
/* 新增區塊：#f2f2f2 背景 */
.color-bar-section {
    position: relative;
    background: #f2f2f2;
    padding: 0;
    height: 47.5vh;
    overflow: hidden;            /* ← 防止內容超出 */
}

/* 左側顏色條：寬度改為 10px */
.color-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: #00337c;
}

/* 內容區域：加 max-width + padding 控制範圍 */
.color-bar-content {
    display: flex;
    align-items: center;
    margin: 0 auto;              /* 居中 */
    height: 100%;                /* 佔滿容器高度 */
}

/* 文字區域（左） */
.color-bar-text {
    flex: 1;
    padding-top: clamp(20px, 5vh, 30px);     /* 上 */
    padding-right: clamp(30px, 8vw, 100px);  /* 右 */
    padding-bottom: clamp(20px, 5vh, 30px);  /* 下 */
    padding-left: clamp(30px, 8vw, 100px);   /* 左 */ /* 上30 右100 下30 左100（與原版一致） */
    box-sizing: border-box;
}

/* 文字標題 - 響應式 font-size 與 margin */
.color-bar-title {
    font-family: 'AlibabaPuHuiTi-Heavy', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
	margin: 0 0 clamp(20px, 3vh, 30px) 0;
}

.color-bar-title-hant {
    font-family: 'AlibabaSansHK-Heavy', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
	margin: 0 0 clamp(20px, 3vh, 30px) 0;
}

.color-bar-title-en {
    font-family: 'Roboto-black', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
	margin: 0 0 clamp(20px, 3vh, 30px) 0;
}

/* 文字內文 */
.color-bar-content-text {
    font-family: "SourceHanSerifSC-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

.color-bar-content-text-hant {
    font-family: "SourceHanSerifTW-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

.color-bar-content-text-en {
    font-family: "CrimsonText-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

/* 圖片容器：寬 60% */
.color-bar-img {
    width: 56%;
    height: 100%;                /* 高佔滿容器 */
    padding: 0;
    overflow: hidden;            /* 防止圖片超出 */
}

/* 右側圖片：高 100%，object-fit 填滿 */
.color-bar-right-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}



/* 新增反向區塊：底色白色 */
.color-bar-section-reverse {
    position: relative;
    background: #ffffff;         /* ← 底色改為白色 */
    padding: 0;
    height: 47.5vh;
    overflow: hidden;
}

/* 右側顏色條：寬度 10px（放在最右） */
.color-bar-reverse {
    position: absolute;
    right: 0;                    /* ← 放在右邊 */
    top: 0;
    width: 10px;
    height: 100%;
    background: #00337c;
}

/* 內容區域（反向：圖片左 + 文字右） */
.color-bar-content-reverse {
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: 100%;
}

/* 左側圖片容器 */
.color-bar-img-reverse {
    width: 44%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

/* 左側圖片 */
.color-bar-left-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 右側文字區域 */
.color-bar-text-reverse {
    flex: 1;
    padding-top: clamp(20px, 5vh, 30px);     /* 上 */
    padding-right: clamp(30px, 8vw, 100px);  /* 右 */
    padding-bottom: clamp(20px, 5vh, 30px);  /* 下 */
    padding-left: clamp(30px, 8vw, 100px);   /* 左 */ /* 上30 右100 下30 左100（與原版一致） */
    box-sizing: border-box;
}

/* 文字標題 */
.color-bar-title-reverse {
    font-family: 'AlibabaPuHuiTi-Heavy', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
    margin: 0 0 30px 0;
}

.color-bar-title-reverse-hant {
    font-family: 'AlibabaSansHK-Heavy', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
    margin: 0 0 30px 0;
}

.color-bar-title-reverse-en {
    font-family: 'Roboto-black', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
    margin: 0 0 30px 0;
}

/* 文字內文 */
.color-bar-content-text-reverse {
    font-family: "SourceHanSerifSC-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

.color-bar-content-text-reverse-hant {
    font-family: "SourceHanSerifTW-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

.color-bar-content-text-reverse-en {
    font-family: "CrimsonText-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

/* 正向新區塊：顏色條左 + 文字中 + 圖片右（class全部不帶reverse） */
.color-bar-section2 {
    position: relative;
    background: #f2f2f2;          /* 你原本的底色 */
    padding: 0;
    height: 95vh;
    overflow: hidden;
}

/* 左側顏色條 */
.color-bar2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: #00337c;
}

/* 內容區域 */
.color-bar-content2 {
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: 100%;
}

/* 左側文字區域 */
.color-bar-text2 {
    flex: 1;
        padding-top: clamp(20px, 5vh, 30px);     /* 上 */
    padding-right: clamp(30px, 8vw, 100px);  /* 右 */
    padding-bottom: clamp(20px, 5vh, 30px);  /* 下 */
    padding-left: clamp(30px, 8vw, 100px);   /* 左 */ /* 上30 右100 下30 左100（與原版一致） */
    box-sizing: border-box;
}

/* 文字標題 */
.color-bar-title2 {
    font-family: 'AlibabaPuHuiTi-Heavy', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
    margin: 0 0 30px 0;
}

.color-bar-title2-hant {
    font-family: 'AlibabaSansHK-Heavy', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
    margin: 0 0 30px 0;
}

.color-bar-title2-en {
    font-family: 'Roboto-black', sans-serif;
    font-size: clamp(24px, 2.1vw, 32px); /* 隨視窗縮小，最小 24px，最大 32px */
    color: #55565a;
    margin: 0 0 30px 0;
}

/* 文字內文 */
.color-bar-content-text2 {
    font-family: "SourceHanSerifSC-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

.color-bar-content-text2-hant {
    font-family: "SourceHanSerifTW-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

.color-bar-content-text2-en {
    font-family: "CrimsonText-Regular", serif;
    font-size: clamp(16px, 1.4vw, 28px);
    line-height: 1.4;
    color: #5e5e5e;
}

/* 右側圖片容器 */
.color-bar-img2 {
    width: 56%;                  /* 與你反向版一樣的44% */
    height: 100%;
    padding-right: 15%;
    overflow: hidden;
}

/* 右側圖片 */
.color-bar-right-img2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ==================== 小屏 ≤768px：color-bar-section 系列圖片在上，文字在下 ==================== */
@media (max-width: 768px) {
    .color-bar-section,
    .color-bar-section-reverse,
    .color-bar-section2 {
        height: auto;                /* 自動高度 */
        min-height: 350px;
    }

    .color-bar-content,
    .color-bar-content-reverse,
    .color-bar-content2 {
        flex-direction: column;      /* 垂直排列：圖片上，文字下 */
        align-items: stretch;
        height: auto;
        padding: 40px 20px;          /* 手機內距 */
    }

    /* 文字區域（小屏文字在下） */
    .color-bar-text,
    .color-bar-text-reverse,
    .color-bar-text2 {
        width: 100%;
        padding: 40px 20px;
        text-align: center;          /* 文字置中 */
        order: 2;                    /* 文字排到下面 */
    }

    /* 圖片容器（小屏圖片在上） */
    .color-bar-img,
    .color-bar-img-reverse,
    .color-bar-img2 {
        width: 100%;
        height: 300px;               /* 手機圖片固定高度 */
        order: 1;                    /* 圖片排到前面（上） */
    }

    /* 顏色條在小屏時隱藏或調整（可選） */
    .color-bar,
    .color-bar-reverse,
    .color-bar2 {
        height: 10px;                /* 小屏時變橫條在頂部 */
        width: 100%;
        top: 0;
        left: 0;
        right: auto;
    }
	
	.color-bar-img2 {
    padding-right: 0;
}
}

/* 藍色banner */
.banner-section {
    position: relative;
    height: 400px;              
    background-image: url("images/Homepage/_MG_8517.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 右側顏色格：高 100%，寬 33%，#00337c */
.banner-color-block {
    position: absolute;
    right: 0;
    top: 0;
    width: 33%;
    height: 100%;
    background: #00337c;
}

/* 文字區域（在顏色格表面，不在顏色格內） */
.banner-text {
    position: absolute;
    right: 8%; /* 距離 div 最右 8% */
    top: 50%;
    transform: translateY(-50%);
    width: 35%; /* 文字區域寬度，可調整 */
    z-index: 2; /* 在顏色格上方 */
}

/* 標題 */
.banner-title {
    font-family: 'AlibabaPuHuiTi-SemiBold', sans-serif;
    font-size: clamp(14px, 1.8vw, 26px);
    margin: 0 0 20px 0;
    text-align: left;
    color: #ffffff;
}

.banner-title-hant {
    font-family: 'AlibabaSansHK-Bold', sans-serif;
    font-size: clamp(14px, 1.8vw, 26px);
    margin: 0 0 20px 0;
    text-align: left;
    color: #ffffff;
}

.banner-title-en {
    margin: 0 0 20px 0;
    text-align: left;
    color: #ffffff;
}

.banner-title-en2 {
    font-size: clamp(14px, 1.8vw, 16px);
	font-family: 'Roboto-bold', sans-serif;
	line-height: 1;
}

.banner-title-en3 {
    font-size: clamp(14px, 1.8vw, 26px);
	font-family: 'Roboto-black', sans-serif;
	line-height: 1.4;
}

/* 內文 */
.banner-content {
    font-family: 'CrimsonText-Regular', sans-serif;
    font-size: clamp(6px, 1.2vw, 14px);
    line-height: 1.4;
    margin: 0 0 10px 0;
    text-align: left;
    color: #ffffff;
}

.banner-content-hant {
    font-family: 'AlibabaSansHK-Light', sans-serif;
    font-size: clamp(12px, 1.2vw, 24px);
    line-height: 1.4;
    margin: 0 0 10px 0;
    text-align: left;
    color: #ffffff;
}

/* 裝飾文字 */
.banner-decoration {
    font-family: 'SF-Collegiate', sans-serif;
    font-size: clamp(50px, 5vw, 80px);
    margin: 0 0 0px 0;
    text-align: right;
    color: rgba(255,255,255,0.5);
}

/* 漸變長條：佔整個 .banner-section 的 50%，完全置右 */
.banner-gradient-bar {
    position: absolute;
    right: 0;                    /* 完全置右 */
    bottom: 45px;               /* 距離裝飾文字下方，可調整 */
    width: 50%;                  /* 佔整個 div 的 50% */
    height: 10px;
    background: linear-gradient(to right, #821004, #C31301, #821004);
    margin-right: 0;
    z-index: 3;                  /* 確保在顏色格上方 */
}

@media (max-width: 768px) {     /* 可選：小高度時調整文字位置 */
.banner-section {
    height: 350px;
	}
	
	.banner-gradient-bar {
		display: none;
	}
}

/* New 區塊：正常文件流，緊貼圖片下方（響應式） */
.news-section {
    height: clamp(100px, 25vh, 300px); /* 高度隨視窗縮小 */
    padding-left: clamp(40px, 8vw, 70px); /* padding-left 隨視窗縮小 */
    margin: 0;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* News 文字*/
.news-text {
    font-family: 'Arial-Narrow-Bold', 'Arial', sans-serif;
    font-size: clamp(30pt, 5vw, 40pt); /* 基本大小隨視窗縮小 */
    color: #333333;
    margin: 0;
    line-height: 1;
}

.news-text::first-letter { /* U 用 span 包起來變大 */
    font-size: clamp(35pt, 6vw, 50pt); /* A/U 隨視窗縮小 */
}

/* 新增新聞區塊 */
.news-grid-section {
    background: #f2f2f2;
    height: 450px;
    padding: 30px 150px; /* 左右 padding 150px */
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* 4格容器 */
.news-grid-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}

/* 每格新聞項目 */
.news-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 新聞圖片 */
.news-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 15px;
}

/* NEWS 標籤 - 響應式 */
.news-label {
    font-size: clamp(6px, 1.5vw, 16px);   /* 隨視窗縮小 */
    color: #07246D;
    margin: 0 0 10px 0;
    font-weight: bold;
}

/* 新聞標題（允許換行） - 響應式 */
.news-title {
    font-family: 'AlibabaPuHuiTi-Bold', sans-serif;
    font-size: clamp(10px, 1.5vw, 20px);  /* 隨視窗縮小 */
    color: #333333;
    margin: 0 0 15px 0;
    line-height: 1.4;
    flex-grow: 1; /* 讓標題佔據剩餘空間 */
}

/* READ MORE（位置固定在圖片下方固定距離） - 響應式 */
.news-read-more {
    font-size: clamp(14px, 1.5vw, 18px);   /* 隨視窗縮小 */
    color: #07246D;
    text-decoration: none;
    margin: clamp(8px, 1.5vw, 10px) 0 clamp(12px, 2vw, 15px) 0; /* margin 隨視窗縮小 */
    font-family: 'AlibabaPuHuiTi-Bold', sans-serif;
}
.news-read-more:hover {
    text-decoration: underline;
}

/* 漸變長條 */
.news-gradient-bar {
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #821004, #C31301, #821004);
    margin-top: auto; /* 推到最底部 */
}

/* ==================== 小屏 ≤768px：只顯示最左一格 ==================== */
@media (max-width: 768px) {
    .news-grid-section {
        padding: 30px 20px;          /* 手機內距縮小 */
        height: auto;                /* 高度自動 */
    }

    .news-grid-container {
        flex-direction: column;      /* 垂直排列 */
        gap: 40px;
    }

    /* 只顯示最左一格（第一個 .news-item），其他隱藏 */
    .news-item {
        display: none;
    }
    .news-item:first-child {
        display: flex;
    }

    /* 手機時圖片較大 */
    .news-item:first-child .news-img {
        height: 300px;
        object-fit: cover;
    }

    /* 文字置中 */
    .news-item:first-child {
        align-items: center;
        text-align: center;
    }
	
	.news-title {
    font-size: clamp(20px, 2.5vw, 28px);  /* 隨視窗縮小 */
}
	.news-label {
    font-size: clamp(10px, 1.5vw, 22px);   /* 隨視窗縮小 */
}

}

/* Application 區塊：正常文件流，緊貼圖片下方（響應式） */
.application-section {
    height: clamp(100px, 25vh, 300px); /* 高度隨視窗縮小 */
    padding-left: clamp(40px, 8vw, 70px); /* padding-left 隨視窗縮小 */
    margin: 0;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Application 文字*/
.application-text {
    font-family: 'Arial-Narrow-Bold', 'Arial', sans-serif;
    font-size: clamp(30pt, 5vw, 40pt); /* 基本大小隨視窗縮小 */
    color: #333333;
    margin: 0;
    line-height: 1;
}

.application-text::first-letter { /* U 用 span 包起來變大 */
    font-size: clamp(35pt, 6vw, 50pt); /* A/U 隨視窗縮小 */
}

/* 新增報名區塊 */
.enrollment-section {
    position: relative;
    height: 350px; /* 可調整高度 */
    background-image: url("images/Homepage/application.jpg"); /* 替換為你的背景圖片路徑 */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 內容區域（整體靠右） */
.enrollment-content {
    position: relative;
    margin: 0 auto;
    padding: 40px 0px; /* 內距，可調整 */
    z-index: 2;
    color: #ffffff;
    text-align: right; /* 所有文字靠右 */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 內容靠右對齊 */
}

/* 標題與標誌一行（靠右） */
.enrollment-title {
    font-size: 85px; /* 較大標題 */
    font-family: 'AlibabaPuHuiTi-Heavy', sans-serif;
    color: #00337c;
    margin: 0;
    display: inline-block;
    padding-right: 40px;
}

.enrollment-title-hant {
    font-size: 85px; /* 較大標題 */
    font-family: 'AlibabaSansHK-Heavy', sans-serif;
    color: #00337c;
    margin: 0;
    display: inline-block;
    padding-right: 40px;
}

.enrollment-title-en {
    font-size: 85px; /* 較大標題 */
    font-family: 'Roboto-black', sans-serif;
    color: #00337c;
    margin: 0;
    display: inline-block;
    padding-right: 40px;
}

.enrollment-logo {
    width: 70px; /* 標誌圖片大小，可調整 */
    height: auto;
    margin-right: 30px; /* 改為右邊距離 */
    vertical-align: middle;
}

/* 漸變長條（靠右） */
.enrollment-gradient-bar {
    width: 50%;
    height: 10px;
    background: linear-gradient(to right, #821004, #C31301, #821004);
    margin: 0; /* ← margin 為 0 */
}

/* 微信登錄一行（文字在左，圖示在右） */
.enrollment-wechat {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 靠左對齊 */
    margin: 10px 75px 10px 0; /* 上右下左 */
}

.enrollment-wechat-text {
    font-size: 32px;
    color: #191919;
    margin-right: 20px; /* 改為右邊距離，讓文字在左 */
    order: 1; /* 文字在左 */
    font-family: 'AlibabaPuHuiTi-Bold', sans-serif;
}

.enrollment-wechat-text-hant {
    font-size: 32px;
    color: #191919;
    margin-right: 20px; /* 改為右邊距離，讓文字在左 */
    order: 1; /* 文字在左 */
    font-family: 'AlibabaSansHK-Bold', sans-serif;
}

.enrollment-wechat-icon {
    width: 40px;
    height: auto;
    order: 2; /* 圖示在右 */
}

/* 兩個按鈕（靠右） */
.enrollment-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-end; /* 按鈕靠右 */
    margin-right: 74px;
}

.enrollment-btn {
    padding: 15px 40px;
    font-size: 28px;
    color: #191919;
    background: transparent;
    border: 3px solid #191919;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
    font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaSansHK-Bold';
}

.enrollment-btn:hover {
    background: #00337c;
    color: #ffffff;
    border: 3px solid #00337c;
}

/* QR Code 彈出遮罩（初始隱藏） */
.qrcode-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.qrcode-overlay.active {
    display: flex;
}

/* QR Code 圖片容器（固定比例，縮放但不超出） */
.qrcode-container {
    position: relative;
    width: 70%;                  /* 佔 enrollment-section 的 70% 寬 */
    aspect-ratio: 1 / 1;         /* 保持正方形比例 */
    max-width: 70%;
    max-height: 70%;             /* 不超過 enrollment-section 的 70% 高 */
}

/* QR Code 圖片（填滿容器，保持比例） */
.qrcode-img {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* 完整顯示圖片，不裁切 */
    display: block;
}

/* 右上角交叉關閉按鈕 */
.qrcode-close {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    font-size: 30px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
}

.qrcode-close:hover {
    background: #ffffff;
}

/* ==================== 小屏 ≤768px：報名區塊響應式 ==================== */
@media (max-width: 768px) {
    		.enrollment-section {
        background-image: none; /* 移除背景圖片 */
        background-color: #f2f2f2; /* 純色背景 */
    }

    .enrollment-content {
        text-align: center; /* 文字置中 */
        align-items: center; /* 內容置中 */
        padding: 40px 20px; /* 手機內距 */
    }

    .enrollment-title,
	.enrollment-title-en,
	.enrollment-title-hant {
        padding-right: 0;
        text-align: center;
		font-size: 70px
    }

    .enrollment-logo {
        margin-right: 0;
		width: 60px; /* 標誌圖片大小，可調整 */
    }

    .enrollment-wechat {
        justify-content: center; /* 微信文字與圖示置中 */
        margin: 20px 0;
    }

    /* 兩個按鈕橫向並排（手機端） */
    .enrollment-buttons {
        display: flex;
        flex-direction: row; /* ← 改為橫向排列 */
        justify-content: center; /* 水平置中 */
        gap: 20px; /* 按鈕間距 */
        margin-right: 0;
        flex-wrap: wrap; /* 螢幕超小時自動換行，避免擠壓 */
    }

    /* 手機端按鈕稍小一點，閱讀更舒適 */
    .enrollment-btn {
        padding: 12px 30px;
        font-size: 24px;
    }

    .enrollment-gradient-bar {
        width: 100%; /* 長度 100% */
        margin: 0;
    }
}


/* 底部 footer 整體 */
.footer-section {
    background: #00337c;
    padding: 40px 40px;
    display: flex;
    justify-content: flex-start; /* ← 靠左對齊，讓內容從左開始排列 */
    align-items: flex-start;
    color: #ffffff;
    box-sizing: border-box;
	height: 350px;
    position: relative; /* 讓 footer-right 可以相對於 footer-section 定位 */
}

/* 第一區域：左側（保持 35% 寬，不縮小） */
.footer-left {
    display: flex;
    flex-direction: column;
}

/* logo 與學校名稱一行 */
.footer-logo-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo {
    width: 75px;
    height: auto;
    margin-right: 20px;
}

.footer-school-name {
    line-height: 1.4;
    font-family: 'AlibabaPuHuiTi-Bold', serif;
}

.footer-school-name1 {
    font-size: clamp(24px, 2.55vw, 38px); /* 最小 28px，理想隨視窗變化，最大 38px */
}

.footer-school-name2 {
    font-size: clamp(12px, 1.5vw, 22.3px); /* 最小 18px，理想隨視窗變化，最大 22.3px */
}

/* 地址 */
.footer-address {
    margin-bottom: 5px;
}

.footer-address-title {
    font-size: 20px;
    margin-bottom: 5px;
    font-family: 'AlibabaPuHuiTi-Regular';
    font-weight: 300;
}

.footer-address-title-hant {
    font-size: 20px;
    margin-bottom: 5px;
    font-family: 'AlibabaSansHK-Regular';
    font-weight: 300;
}

.footer-address-text {
    font-size: 18px;
    font-family: 'AlibabaPuHuiTi-Light';
	margin-bottom: 5px;
}

.footer-address-text-hant {
    font-size: 18px;
    font-family: 'AlibabaSansHK-Light';
	margin-bottom: 5px;
}

/* 底部連結 */
.footer-links {
    margin-bottom: 15px;
	font-family: 'AlibabaPuHuiTi-Regular';
}

.footer-links-hant {
    margin-bottom: 15px;
	font-family: 'AlibabaSansHK-Regular';
}

.footer-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    margin: 0 0px;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-separator {
    color: #ffffff;
    margin: 0 15px;
}

/* 版權 */
.footer-copyright {
    font-size: 16px;
    margin-top: auto;
	font-family: 'AlibabaPuHuiTi-Regular';
}

/* 第二區域：中間三欄（白色直線分隔 + 左右邊線） */
.footer-middle {
    display: flex;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    margin: 10px 0px 0px 40px; /* ← 左邊距 40px，緊貼第一區域 */
}

/* 每欄之間的白色直線 */
.footer-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #ffffff;
}

.footer-column {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-right: 50px;
    padding-left: 10px;
    width: 15vw;
}

.footer-column-title {
    font-size: 20px;
    margin-bottom: 20px;
    font-family: 'AlibabaPuHuiTi-Regular';
    font-weight: 300;
    margin-top: -5px;
}

.footer-column-title-hant {
    font-size: 20px;
    margin-bottom: 20px;
    font-family: 'AlibabaSansHK-Regular';
    font-weight: 300;
    margin-top: -5px;
}

.footer-column-link {
    color: #D0D0D0;
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 7px;
    font-family: 'AlibabaPuHuiTi-Regular';
    font-weight: 300;
}

.footer-column-link-hant {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 7px;
    font-family: 'AlibabaPuHuiTi-Light';
    font-weight: 300;
}

.footer-column-link:hover {
    text-decoration: underline;
}

.footer-column-link-hant:hover {
    text-decoration: underline;
}

/* 第三區域：右側社交圖標（改為右下角，使用 bottom: 5px） */
.footer-right {
    position: absolute; /* 脫離 flex 流 */
    right: 40px; /* 與 padding 一致 */
    bottom: 30px; /* ← 距離底部 5px */
    display: flex;
    gap: 20px;
}

.footer-social {
    display: flex;
    gap: 20px;
}

.social-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.social-icon {
    width: 50px;
    height: auto;
}

/* WeChat QR Code 彈出（置中於 WeChat logo 上方） */
.wechat-qrcode-overlay {
    display: none;
    position: absolute;
    bottom: 70px; /* 距離按鈕上方一點點 */
    left: 15%; /* ← 調整 left 為 15%，置中於 WeChat logo */
    transform: translateX(-50%); /* 水平置中調整 */
    z-index: 10000;
}

.wechat-qrcode-overlay.active {
    display: block;
}

.wechat-qrcode-img {
    width: 200px;
    height: auto;
}

/* ==================== 小屏 ≤768px：只顯示第一區域 ==================== */
@media (max-width: 768px) {
    .footer-section {
        padding: 20px 10px;          /* 手機內距縮小 */
        height: auto;                /* 高度自動適應內容 */
    }

    /* 只顯示第一區域（左側） */
    .footer-middle,
    .footer-right {
        display: none !important;    /* 隱藏中間三欄與右側社交圖標 */
    }

    /* 第一區域（左側）在手機時佔滿寬度，文字置中 */
    .footer-left {
        width: 100%;                 /* 佔滿寬度 */
        align-items: center;         /* 水平置中 */
        text-align: center;          /* 文字置中 */
    }

    /* 地址與連結調整（手機更舒適） */
    .footer-address-text {
        font-size: 16px;
    }

    .footer-links {
        margin-bottom: 40px;
    }

    .footer-link {
        margin: 10px 0;
    }
	
	.footer-school-name1 {
    font-size: 38px;
	}

.footer-school-name2 {
    font-size: 22.3px;
}
}

@media (max-width: 1200px) {
	.footer-right{
		display: none;
	}
	
	.header-all .container {
		padding: 0 30px;
	}
}