/* 引入 Google Font: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* 自定義全黑背景與字體顏色 */
body {
    background-color: #000000;
    color: #ffffff;
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: 'Inter', sans-serif;
    /* 指定使用 Inter 字體 */
    /* 讓整個網頁採用 flex 排版，確保頁尾能被推到最下方 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 導覽列樣式調整 */
.navbar {
    background-color: #000000 !important;
    /* border-bottom: 1px solid #333; */
    padding-bottom: 0;
    /* 移除底部內距，讓圖片貼齊邊緣 */
}

.nav-link {
    color: #cccccc !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff !important;
}

/* 內容區塊設定，flex-grow: 1 會自動填滿剩餘空間，把頁尾擠到底部 */
.content-section {
    padding-top: 120px;
    padding-bottom: 60px;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* --- 細線圖片專用樣式 --- */
.line-divider {
    width: 100%;
    height: 2px;
    /* 這裡可依據您圖片實際看起來的粗細微調，例如 1px 或 2px */
    object-fit: cover;
    /* 確保圖片延展時不會變形太嚴重 */
    display: block;
}

/* --- 頁尾 (Footer) 樣式 --- */
.site-footer {
    background-color: #000;
    /* border-top: 1px solid #222; */
    /* padding: 30px 0; */
    font-family: 'Inter', sans-serif;
    /* 指定使用 Inter 字體 */
}

/* 前兩行文字大小 16px */
.footer-text-16 {
    font-size: 16px;
    color: #e0e0e0;
    line-height: 1.5;
}

/* 第三行文字大小 12px */
.footer-text-12 {
    font-size: 12px;
    color: #888888;
    line-height: 1.5;
    margin-top: 8px;
    /* 與前兩行稍微拉開一點距離 */
}

/* 社群媒體圖示按鈕樣式 */
.footer-social-icon {
    color: #cccccc;
    font-size: 24px;
    /* 圖示大小 */
    margin-left: 20px;
    /* 圖示之間的間距 */
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-social-icon:hover {
    color: #ffffff;
}

/* =========================================
   首頁 (Index) 專用樣式
   ========================================= */

/* 第一部分：主視覺區塊 */
#hero-section {
    padding-top: 0px;
    /* 預留給固定導覽列的空間 */
}

/* 第二部分：左右介紹區塊 */
.intro-img {
    max-width: 565px;
    width: 100%;
}

.intro-title {
    font-size: 26px;
    color: #ffffff;
}

.intro-desc {
    font-size: 16px;
    color: #cccccc;
    line-height: 1.6;
}

.btn-more {
    width: 132px;
    height: 71px;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 600;
    /* 讓文字使用 Semi-bold，在圖片上會更清晰 */

    /* 確保按鈕內的文字垂直水平置中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;

    /* --- 新增：背景圖片設定 --- */
    background-image: url('images/Group\ 112.png');
    /* 請替換為您的圖片路徑 */
    background-size: cover;
    /* 讓圖片自動縮放填滿 132x71 的空間 */
    background-position: center;
    /* 讓圖片對齊中心 */
    background-repeat: no-repeat;
    /* 防止圖片重複拼貼 */

    /* 視覺優化：移除邊框，並加上文字陰影，避免背景圖片太亮導致白色文字看不清 */
    border: none;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

/* 滑鼠移過去 (Hover) 的效果 */
.btn-more:hover {
    opacity: 0.8;
    /* 讓整個按鈕稍微變透明一點，產生互動感 */
    color: #ffffff;
    /* 確保文字依然是白色 */
}

/* 第三部分：影片區塊 */
.video-wrapper {
    max-width: 900px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* 第四部分：贊助商區塊 */
.sponsor-title-lg {
    font-size: 48px;
    color: #ffffff;
    letter-spacing: 2px;
}

.sponsor-title-md {
    font-size: 32px;
    color: #888888;
}

/* =========================================
   關於我們 (ABOUT) 專用樣式
   ========================================= */

/* 第一部分：Hero 滿版首圖 */
.about-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 讓圖片容器變成定位基準點 */
#hero-section {
    position: relative;
    width: 100%;
    overflow: hidden; /* 防止內容溢出 */
}

/* 確保底圖滿版，做為背景 */
#hero-section .img-fluid {
    display: block;
    width: 100%;
    height: auto;
}

/* 文字容器：絕對定位在圖片正中央，且內部文字並排 */
.about-title-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 徹底靠本體中心點置中 */
    
    display: flex;
    flex-direction: row;       /* 左右並排 */
    justify-content: center;
    align-items: center;
    gap: 470px;                 /* 兩段文字中間的水平間距，可依需求調整 */
    width: 90%;                /* 限制最大寬度，避免貼邊 */
    z-index: 2;                /* 確保文字在圖片上方 */
}

/* 文字基本樣式 */
.about-title {
    font-size: 48px;
    color: #ffffff;            /* 疊在圖片上通常用白色，可依您的設計調整顏色 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 加點陰影，防止圖片背景太亮看不清字 */
    white-space: nowrap;       /* 確保英文在桌機版不會亂斷行 */
    margin: 0;
    letter-spacing: 20%;
}

/* --- RWD 響應式設定 --- */
@media (max-width: 992px) {
    .about-title {
        font-size: 32px;       /* 平板尺寸，字體適度縮小 */
    }
    .about-title-overlay {
        gap: 40px;             /* 平板尺寸，間距縮小 */
    }
}

@media (max-width: 768px) {
    .about-title {
        font-size: 24px;       /* 手機尺寸，字體再縮小以免超出螢幕 */
    }
    .about-title-overlay {
        gap: 20px;             /* 手機尺寸，縮短兩字之間的距離 */
    }
}

@media (max-width: 480px) {
    /* 如果手機版螢幕實在太窄，並排會擠不下，可考慮改回上下排列 */
    .about-title-overlay {
        flex-direction: column; 
        gap: 10px;
    }
    .about-title {
        font-size: 28px;
    }
}

/* 第二部分：1920x2048 背景區塊 */
.about-bg-section-1 {
    /* 請替換為您的 1920x2048 圖片路徑 */
    background-image: url('images/untitledTRAINpng\ 3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 1450px;
    /* 啟用 Flexbox，確保區塊能垂直延展 */
    display: flex;
    align-items: stretch;
    padding: 0;
    /* 移除固定內距，交給 Flex 自動均分空間 */
    flex-direction: column;
    /* 新增這行：設定為垂直彈性盒子 */
}

/* 22px 置中文字 */
.about-text-22 {
    font-size: 22px;
    color: #ffffff;
    line-height: 1.8;
    text-align: center;
    /* 移除之前的 margin 設定，讓 Flex 決定間距 */
}

/* 第三部分：1920x1370 背景區塊 */
.about-bg-section-2 {
    /* 請替換為您的 1920x1370 圖片路徑 */
    background-image: url('images/untitledTRAINpng\ 4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 1370px;
    /* 啟用 Flexbox */
    display: flex;
    align-items: stretch;
    padding: 0;
    flex-direction: column;
    /* 新增這行：設定為垂直彈性盒子 */
}

/* 區塊標題共用樣式 (微調移除 marginBottom) */
.about-title-zh {
    font-size: 20px;
    color: #cccccc;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.about-title-en {
    font-size: 48px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 3px;
    /* 移除 margin-bottom，交給 Flex 自動均分 */
    margin-bottom: 0;
}

/* 團隊卡片樣式 */
.team-card {
    background-color: transparent;
    border: none;
    color: #ffffff;
    text-align: center;
    margin-bottom: 40px;
}

.team-card-position {
    font-size: 26px;
    margin-bottom: 15px;
    /* 職位與圖片的距離 */
}

.team-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 讓圖片自動維持 1:1 正方形比例 */
    object-fit: cover;
    margin-bottom: 15px;
    /* 圖片與姓名的距離 */
    border-radius: 4px;
    /* 微微的圓角，若不需要可移除 */
}

.team-card-name {
    font-size: 20px;
    /* font-weight: 600; */
}

/* 響應式微調 */
@media (max-width: 992px) {

    .about-bg-section-1,
    .about-bg-section-2 {
        min-height: auto;
        /* 手機版解除固定高度，改由內容撐開 */
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .about-flex-container {
        gap: 60px;
        /* 手機版時取消均分，改為固定的間距避免擠在一起 */
        justify-content: flex-start !important;
    }

    .about-title-en {
        font-size: 32px;
    }
}

/* =========================================
   Swiper 輪播圖 (左右預覽效果) 專用樣式
   ========================================= */

.about-swiper-container {
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding-bottom: 60px;
    /* 預留空間給下方的指示點 */
    overflow: hidden;
    /* 確保超出容器的部分隱藏 */
}

/* 針對每一張輪播圖的設定 */
.swiper-slide {
    opacity: 0.3;
    /* 非使用中的圖片變暗 */
    transform: scale(0.85);
    /* 非使用中的圖片稍微縮小 */
    transition: all 0.5s ease-in-out;
    /* 增加滑順的轉場動畫 */
    border-radius: 8px;
    overflow: hidden;
}

/* 針對「正在中間」的那張主圖設定 */
.swiper-slide-active {
    opacity: 1;
    /* 全亮 */
    transform: scale(1);
    /* 恢復原始大小 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    /* 增加立體陰影 */
}

/* 左右切換箭頭的顏色 (改為白色) */
.swiper-button-next,
.swiper-button-prev {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* 下方指示點的顏色 */
.swiper-pagination-bullet {
    background: #888888;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background: #ffffff;
    opacity: 1;
}

/* 手機版微調：讓中間圖片佔比變大，左右預覽留一點點就好 */
@media (max-width: 768px) {
    .swiper-slide {
        width: 80%;
    }
}

/* =========================================
   最新消息 (NEWS) 專用樣式 (更新版)
   ========================================= */

/* 覆蓋 NEWS 頁面的整頁背景色 */
body.bg-news {
    background-color: #021521;
}

/* 頁面標題文字 */
.news-page-title {
    font-size: 48px;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 2px;
}

/* 卡片外框設定 */
.news-card {
    max-width: 1154px;
    /* 總寬度 577 + 577 = 1154 */
    height: 315px;
    /* 電腦版固定高度 */
    background-color: transparent;
    border: none;
    /* 移除邊框，讓兩張圖無縫拼接 */
    border-radius: 0;
    margin: 0 auto 40px auto;
    overflow: hidden;
    /* 加入一點陰影增加立體感 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 左側圖片區塊設定 */
.news-card-img-wrapper {
    height: 100%;
}

.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 新增：右側欄位 (含背景圖) 設定 --- */
.news-card-right-col {
    position: relative;
    /* 為了讓箭頭按鈕絕對定位 */
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 文字內容區塊的遮罩 (選用，為了提升閱讀性) */
.news-card-overlay {
    /* background-color: rgba(2, 21, 33, 0.6);  */
    /* 深藍色半透明遮罩，可自行調整透明度 0.6 */
    height: 100%;
    width: 100%;
}

/* 文字樣式 (保持不變) */
.news-text-13 {
    font-size: 13px;
    color: #a0aab2;
    font-weight: 400;
}

.news-text-32 {
    font-size: 32px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.4;
}

.news-text-12 {
    font-size: 12px;
    color: #88949c;
    font-weight: 400;
}

/* 右下角箭頭按鈕 (保持不變) */
.news-arrow-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border: 1px solid #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 2;
    /* 確保按鈕在遮罩上層 */
}

.news-arrow-btn:hover {
    background-color: #ffffff;
    color: #021521;
}

/* 響應式設定 (手機版變成上下堆疊) */
@media (max-width: 768px) {
    .news-card {
        height: auto;
    }

    .news-card-img-wrapper,
    .news-card-right-col {
        height: 315px;
        /* 手機版時左右兩區塊都維持 315px 高度 */
    }

    .news-arrow-btn {
        bottom: 20px;
        right: 20px;
    }
}

/* 自定義 CSS 來控制大小和對齊 */
.sponsor-logo {
    /* 設定一個統一的最大高度，使圖片大小看起來相近 */
    max-height: 80px;
    /* 您可以根據需要調整這個數值 */

    /* 確保圖片在固定高度內保持比例，不變形 */
    width: auto;
    object-fit: contain;

    /* Bootstrap 的 .rounded 類別已經有圓角，
           如果您需要更明顯的圓角，可以在這裡額外設定 */
    /* border-radius: 10px; */

    /* 增加一些上下邊距，讓畫面更呼吸 */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 針對不同螢幕大小微調高度 (選擇性) */
@media (max-width: 767.98px) {
    .sponsor-logo {
        max-height: 60px;
        /* 手機版小一點 */
    }
}

/* =========================================
   作品集 (PORTFOLIO) 專用樣式
   ========================================= */


body.bg-portfolio {
    background-color: #021521;
}

/* 第一部分：1920x862 首圖背景 */
.portfolio-hero-bg {
    /* 請替換為您的 1920x862 背景圖 */
    background-image: url('images/untitledTRAINpng\ 15.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 862px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* 確保文字在較暗的背景上清晰可見，若背景圖夠暗可移除這行 */
    background-color: #111111;
}

/* 首圖置中文字設定 */
.portfolio-hero-title-zh {
    font-size: 36px;
    color: #ffffff;
    font-weight: 600;
    /* Semi-bold */
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.portfolio-hero-title-en {
    font-size: 18px;
    color: #cccccc;
    font-weight: 400;
    /* Regular */
    letter-spacing: 1px;
}

/* 198x98 圖文按鈕設定 */
.portfolio-btn {
    width: 198px;
    height: 98px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.portfolio-btn:hover {
    opacity: 0.8;
    color: #ffffff;
    transform: translateY(-3px);
    /* 滑鼠移上時微微上浮 */
}

.portfolio-btn-zh {
    font-size: 24px;
    font-weight: 600;
    /* Semi-bold */
    line-height: 1.2;
}

.portfolio-btn-en {
    font-size: 13px;
    font-weight: 400;
    /* Regular */
    letter-spacing: 1px;
}

/* 區塊跳轉的定位點設定 (避免被導覽列遮擋) */
.portfolio-section {
    scroll-margin-top: 100px;
    /* 留出導覽列的高度空間 */
}

/* 區塊標題與細線 */
.portfolio-section-title {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    /* Bold */
    text-align: center;
    letter-spacing: 2px;
}

.portfolio-section-title-second {
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    /* Bold */
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.portfolio-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    /* 半透明橫向細線 */
    margin-bottom: 40px;
}

/* 作品集卡片設定 */
.portfolio-card {
    background-color: transparent;
    border: none;
    margin-bottom: 30px;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    /* 滑鼠移過去微微上浮的互動感 */
}

.portfolio-card-img {
    width: 100%;
    aspect-ratio: 16 / 12.4;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* 卡片文字：15 / 28 / 15 */
.portfolio-text-15-top {
    font-size: 15px;
    /* color: #a0aab2; */
    font-weight: 400;
    margin-bottom: 5px;
}

.portfolio-text-28 {
    font-size: 28px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.3;
}

.portfolio-text-15-bottom {
    font-size: 15px;
    /* color: #88949c; */
    font-weight: 400;
}

/* =========================================
   教師陣容 (TEACHERS) 專用樣式
   ========================================= */

/* 覆蓋 TEACHERS 頁面的整頁背景色 */
body.bg-teachers {
    background-color: #021521;
}

/* 標題設定 (中英文) */
.teacher-title-zh {
    font-size: 28px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.teacher-title-en {
    font-size: 36px;
    color: #cccccc;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 50px;
    /* 與下方卡片拉開距離 */
}

/* 教師卡片設定 */
.teacher-card {
    background-color: transparent;
    border: none;
    text-align: center;
    /* 讓內部文字置中 */
    padding: 10px;
    padding-bottom: 55px;
}

/* 教師卡片設定 */
.teacher-card-up {
    background-color: transparent;
    border: none;
    text-align: center;
    /* 讓內部文字置中 */
    padding: 10px;
    padding-bottom: 55px;
}

.teacher-position {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 20px;
    /* 職位與圖片的距離 */
}

.teacher-img {
    width: 80%;
    aspect-ratio: 1 / 1;
    /* 設定圖片為 3:4 比例 (適合人物肖像)，若要正方形請改為 1/1 */
    object-fit: cover;
    margin-bottom: 20px;
    /* 圖片與姓名的距離 */
    border-radius: 5px;
    /* 微微的圓角增加質感 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 淡淡的邊框防圖片太暗 */
}

.teacher-card-up.teacher-img{
    width: 50%;
}

@media (max-width: 768px) {
    .teacher-img {
        width: 70%;
    }
}

.teacher-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* =========================================
   學生專區 (STUDENTS) 專用樣式
   ========================================= */

/* 覆蓋 STUDENTS 頁面的整頁背景色 */
body.bg-students {
    background-color: #021521;
}

/* 標題設定 (中英文) */
.student-title-zh {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.student-title-en {
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 40px;
    /* 與下方卡片拉開距離 */
}

/* 學生卡片設定 */
.student-card {
    background-color: transparent;
    border: none;
    text-align: center;
    /* 讓姓名置中 */
    padding: 10px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.student-card:hover {
    transform: translateY(-5px);
    /* 滑鼠移過去微微上浮的互動感 */
}

.student-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 設定圖片為正方形比例 */
    object-fit: cover;
    margin-bottom: 15px;
    /* 圖片與姓名的距離 */
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.student-name {
    font-size: 18px;
    color: #ffffff;
    /* font-weight: 600; */
    letter-spacing: 1px;
}

/* =========================================
   單一作品介紹頁 (PROJECT DETAIL) 專用樣式A
   ========================================= */
@media (max-width: 1410px) {
    .hide-under-1920 {
        display: none !important; /* 加上 !important 確保絕對隱藏，不被 Bootstrap 其他設定蓋掉 */
    }
    
    .show-under-1920 {
        display: block !important; /* 在小螢幕時顯示出來（也可以依需求寫 flex 或 grid） */
    }
}

.show-under-1920 {
    display: none;
}
   
.project-bg-section {
    /* 請替換為您的 1920x2048 圖片路徑 */
    background-image: url('images/untitledTRAINpng\ 3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 1024px;
    /* 啟用 Flexbox，確保區塊能垂直延展 */
    display: flex;
    align-items: stretch;
    padding: 0;
    /* 移除固定內距，交給 Flex 自動均分空間 */
    flex-direction: column;
    /* 新增這行：設定為垂直彈性盒子 */
}

/* 背景設定，配合漸層發光感可選用深藍/黑底 */
body.bg-project-detail {
    background-color: #040d14; /* 稍微深邃一點的底色 */
    background-image: radial-gradient(circle at 50% 20%, rgba(30, 60, 90, 0.2) 0%, rgba(4, 13, 20, 1) 60%);
}

.project-bg-wrapper {
    position: absolute;
    top: -1%;        /* 繼承你原本大圖希望出現的垂直位置 */
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 讓滑鼠點擊可以穿透圖片，避免文字點不到 */
}

/* 2. 修改：大背景圖 */
.project-bg-image {
    position: relative; /* 改為相對定位，做為右上角小圖的定位基準基準牆 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 0;
}

/* 3. 修改：右上角裝飾圖 */
.project-bg-corner-image {
    position: absolute;
    
    top: 2%;
    right: -0.2%;
    
    /* 這裡依照你的裝飾圖比例設定大小 (例如寬度佔整體的 20%) */
    width: 12%; 
    height: auto; /* 讓高度自動等比例縮放，絕不變形 */
    
    object-fit: contain;
    z-index: 2;
}

.project-bg-corner-imageB {
    position: absolute;
    
    top: 6%;
    right: -0.2%;
    
    /* 這裡依照你的裝飾圖比例設定大小 (例如寬度佔整體的 20%) */
    width: 12%; 
    height: auto; /* 讓高度自動等比例縮放，絕不變形 */
    
    object-fit: contain;
    z-index: 99;
}

/* --- 頂部大卡片 (含玻璃透視與漸層外框) --- */
.glass-hero-card {
    padding: 60px 50px;
    position: relative;
}

/* 利用偽元素製作細緻的漸層邊框發光感 */
.glass-hero-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* 卡片內左側文字排版 */
.project-info-col {
    display: flex;
    flex-direction: column;
    padding-right: 30px;
    padding-left: 40px;
    justify-content: flex-start; /* 頂部對齊 */
    align-items: flex-start;    /* 左側對齊 */
    z-index: 2; 
}

.project-category {
    font-size: 14px;
    color: #a0aab2;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.project-title {
    font-size: 42px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 2px;
}

.project-desc {
    font-size: 16px;
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 350px;
    text-align: justify;
    z-index: 2; 
}

.project-desc-img {
    position: absolute;
    top: 58%;
    left: -8%;
    width: 35%;
    height: 35%;
    object-fit: contain;
    z-index: 0;        /* 關鍵：把圖層推到最後面，確保文字在它上方 */
}

/* 團隊與指導老師區塊外框 */
.project-team-box {
    position: absolute;
    top: 69%;
    left: -6%;
    padding: 20px 25px;
}

.project-team-box p {
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 1px;
}

/* --- 右側圖片折角效果 (Folded Corner) --- */
.folded-corner-wrapper {
    position: relative;
    padding: 15px;
}

.project-main-img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

/* --- 下方文字與段落通用樣式 --- */
.section-heading {
    font-size: 28px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 3px;
}

.section-paragraph {
    font-size: 16px;
    color: #cccccc;
    line-height: 1.9;
    text-align: justify;
}

/* 圖片圓角通用 */
.rounded-custom {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* 響應式微調 */
@media (max-width: 992px) {
    .glass-hero-card {
        padding: 40px 25px;
    }
    .project-info-col {
        padding-right: 12px;
    }
    .project-title {
        font-size: 32px;
    }
}

/* =========================================
   作品畫面 & 團隊資訊 (佔位與 Swiper 樣式)
   ========================================= */

/* 外層容器限制全域最大寬度，並處理滿版隱藏 */
.screenshot-container {
    width: 100%;
    overflow: hidden; /* 確保不會出現下方橫向捲軸 */
    padding: 20px 0;  /* 留一點上下空間給放大動畫 */
}

.screenshot-containerB {
    width: 100%;
    overflow: hidden; /* 確保不會出現下方橫向捲軸 */
    padding: 20px 0;  /* 留一點上下空間給放大動畫 */
}

/* 作品畫面 Swiper */
.screenshot-swiper {
    width: 100%;
    overflow: visible; /* 讓 Swiper 容器能顯示出左右被切掉一半的圖片 */
}

.screenshot-swiper .swiper-slide .screenshot-placeholder {
    transform: scale(0.85); /* 這裡控制縮放 */
    opacity: 0.6;           /* 兩側變暗 */
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform-origin: center; /* 確保從中心縮放 */
}

/* 2. 當該 Slide 變成作用中 (Active) 時，內層容器放大回 1 */
.screenshot-swiper .swiper-slide-active .screenshot-placeholder {
    opacity: 1;
    transform: scale(1);
}

/* 3. 原本的 swiper-slide 只要保留寬度設定即可，不要放 transform */
.screenshot-swiper .swiper-slide {
    width: 60%; 
    max-width: 1176px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 移除這裡的 transform 和 opacity */
}

.screenshot-placeholder {
    width: 100%;
    aspect-ratio: 1176 / 629; /* 精準套用您要求的 1176x629 比例 */
    background-color: #8fa0b0;
    border-radius: 12px;
    color: #1a2733;
}

.swiper-slideB {
    height: 45% !important;
    width: 45% !important;
    display: flex;
}

.screenshot-placeholderB {
    width: 100%;
    aspect-ratio: 865 / 630;
    background-color: #8fa0b0;
    border-radius: 12px;
    color: #1a2733;
}

.team-group-photo {
    width: 80%; /* 設置寬度為 80%，實現「縮小一點」的效果 */
    margin-left: auto;
    margin-right: auto;
    max-width: 800px; /* 限制最大寬度，避免在超大螢幕上過大 */
}

.screenshot-img {
    width: 100%;
    aspect-ratio: 1176 / 629;
    object-fit: cover;
    border-radius: 12px;
}

.screenshot-imgB {
    width: 100%;
    aspect-ratio: 865 / 630;
    object-fit: cover;
    border-radius: 12px;
}

/* 確保影片填滿容器 */
.video-placeholder iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px; /* 如果你想讓影片跟圖片一樣有圓角，可以加上這行 */
}

/* 移除原本內部的 flex 佈局，避免干擾 iframe */
.video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: transparent; /* 移除背景色 */
}

/* =========================================
   團隊成員輪播卡片 (中間置中、兩側縮小)
   ========================================= */

/* 新增的 Swiper 外層包覆容器 */
.team-carousel-wrapper {
    width: 100%;
    overflow: hidden; /* 確保不會出現橫向捲軸 */
    padding: 10px 0;   /* 給放大動畫留一點空間 */
}

/* 團隊成員 Swiper 核心樣式 */
.team-member-swiper {
    width: 100%;
    overflow: visible; /* 關鍵：讓 Swiper 容器能顯示出左右被切掉一半的圖片 */
}

/* 1. 原本的 swiper-slide 決定卡片寬度 */
.team-member-swiper .swiper-slide {
    width: 80%;  /* 電腦版寬度，可依需求調整 */
    max-width: 550px; /* 限制最大寬度 */
    
    justify-content: center;
    align-items: center;
}

/* 手機版微調 */
@media (max-width: 768px) {
    .team-member-swiper .swiper-slide {
        width: 85%; /* 手機版讓中間圖片佔比更大 */
    }
}

/* 2. 核心卡片樣式 (預設狀態：縮小、半透明) */
.team-member-card {
    background-color: #8fa0b0;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    
    /* 縮放與透明度設定 */
    transform: scale(0.9); /* 這裡控制縮放 */
    opacity: 0.8;           /* 兩側變暗 */
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform-origin: center; /* 確保從中心縮放 */
    
    /* 文字對齊維持左對齊 */
    text-align: left;
}

/* 3. 當該 Slide 變成作用中 (Active/高光) 時 */
.team-member-swiper .swiper-slide-active .team-member-card {
    opacity: 1;
    transform: scale(1); /* 放大回原本大小 */
}

/* 大頭照外框 */
.member-avatar {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden; /* 確保圖片超出部分被隱藏 */
    background-color: #f0f0f0; /* 圖片載入前的底色 */
    flex-shrink: 0;
}

/* 實際圖片設定 */
.member-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 關鍵：自動裁切圖片以填滿正方形，不壓扁 */
    display: block;
}

/* 文字資訊 (移除 CSS 預設 text-align: center) */
.member-info {
    color: #ffffff;
    /* text-align: left; /* 這裡原本沒寫，可以加上確保對齊，但 card 上已有設定 */
}

.member-name {
    font-size: 14px;
    font-weight: 700;
}

.member-email, .member-role {
    font-size: 11px;
    color: #e0e0e0;
}

/* =========================================
   自定義 Swiper 控制器 (圓點與方形箭頭)
   ========================================= */
.swiper-controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* 方形白底箭頭按鈕 */
.custom-nav-btn, .team-nav-btn {
    position: static !important; /* 解除預設的絕對定位 */
    width: 24px !important;
    height: 24px !important;
    background-color: #ffffff;
    border-radius: 4px;
    margin: 0 !important;
}

.custom-nav-btn::after, .team-nav-btn::after {
    font-size: 12px !important;
    color: #040d14; /* 箭頭顏色與背景同色 */
    font-weight: bold;
}

/* 圓點樣式 */
.custom-pagination, .team-pagination {
    position: static !important;
    width: auto !important;
}

.swiper-pagination-bullet {
    background-color: #ffffff !important;
    opacity: 0.4;
    width: 8px;
    height: 8px;
    margin: 0 4px !important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

/* =========================================
   底部導覽列 (Bottom Navigation) 改版
   ========================================= */

.bottom-nav-box {
    display: flex;
    flex-direction: column;
    background-color: #94a5b7; /* 預設藍灰色 */
    border-radius: 25px; /* 圓角增加 */
    padding: 20px;
    text-decoration: none !important;
    color: #1a2733;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 220px;
    position: relative;
    overflow: hidden;
}

.bottom-nav-box:hover {
    transform: translateY(-5px);
    filter: brightness(1.05);
}

/* 專案總覽中間格顏色 */
.home-box {
    background-color: #d8d8d8; 
}

/* 圖片容器與實際圖片 */
.nav-img-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
}

.nav-project-img {
    width: 220px; /* 圖中圖示的大小 */
    height: auto;
    opacity: 0.8;
}

/* 當沒圖片時顯示的圖標佔位 */
.placeholder-icon {
    font-size: 40px;
    color: rgba(0,0,0,0.6);
}

/* 文字與箭頭按鈕排列 */
.nav-label-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-label-wrapper.left { justify-content: flex-start; }
.nav-label-wrapper.center { justify-content: center; }
.nav-label-wrapper.right { justify-content: flex-end; }

.nav-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* 模擬圖中的方框箭頭 [ < ] */
.nav-arrow-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid #1a2733;
    border-radius: 6px;
    font-size: 14px;
}

/* 移除原本 CSS 的邊框線，讓畫面更乾淨 */
.project-bottom-nav {
    border-top: none !important;
}

/* 手機版微調 */
@media (max-width: 768px) {
    .screenshot-swiper .swiper-slide {
        width: 85%; /* 手機版讓中間圖片佔比更大 */
    }
}

/* B版專屬排版微調 */
.highlight-block {
    position: relative;
    padding: 80px 0;
}

.img-box {
    position: relative;
    z-index: 2;
}

.text-overlay-box {
    background: rgba(143, 160, 176, 0.9);
    padding: 20px;
    border-radius: 8px;
    color: #040d14;
    font-size: 0.9rem;
    z-index: 3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 模擬圖中交錯重疊的效果 */
.pos-overlap-left { margin-right: -50px; margin-top: -30px; }
.pos-overlap-right { margin-left: -50px; margin-top: 50px; }

.section-divider-line {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin: 40px 0;
}

/* 通用容器設定 */
.section-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    position: relative;
}

.section-title {
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 4px;
    margin-bottom: 40px;
}

.img-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 依照原版微調圓角 */
}

/* --- Layout 2-2 專屬樣式 --- */
.layout-2-2 {
    display: flex;
    align-items: flex-start; /* 頂部對齊 */
    justify-content: center;
    position: relative;
    padding-bottom: 5px;
}

/* 2-2-1 中間大圖 */
.img-2-2-1 {
    width: 450px;
    z-index: 10; /* 最上層 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* 2-2-2 左側圖 (下邊與2-2-1貼齊，右邊被壓住) */
.img-2-2-2 {
    width: 280px;
    margin-right: -5px;  /* 向右偏移，製造被壓住效果 */
    margin-top: 122px;
    z-index: 5;
}

/* 2-2-3 右側內容區 */
.right-content-wrapper {
    width: 320px;
    z-index: 5;
}

.img-2-2-3 {
    height: 80%;
    margin-left: -5px;   /* 向左偏移，製造被壓住效果 */
    margin-bottom: 20px;
}

.text-2-2 {
    padding-left: 20px;
    text-align: justify;
}

/* --- Layout 2-3 專屬樣式 --- */
.layout-2-3 {
    display: flex;
    align-items: center;
    gap: 30px;
}

.img-main-container {
    position: relative;
    width: 65%;
    padding-bottom: 5px; /* 給裝飾圖留空間 */
}

/* --- Layout 2-3 嚴格排版 --- */
.layout-2-3 {
    display: flex;
    align-items: flex-start; /* 文字對齊圖片頂部 */
    gap: 40px;
    position: relative;
}

.img-main-container {
    position: relative;
    width: 65%;
    padding-bottom: 60px; /* 預留底部空間給 2-3-3 突出 */
}

/* 2-3-1 主圖：白色大框位置 */
.img-2-3-1 {
    width: 90%; /* 稍微縮小以留出空間給右側 2-3-3 */
    position: relative;
    z-index: 2;
}

/* 2-3-2 左下重疊：正方形感，壓在主圖左下角 */
.img-2-3-2 {
    position: absolute;
    width: 22%; /* 寬度約主圖的 1/4 */
    left: -5%;  /* 往左突出 */
    top: 65%;   /* 從主圖中段開始壓 */
    z-index: 3;
}

/* 2-3-3 右下重疊：長方形感，壓在主圖右下角並往右往底突出 */
.img-2-3-3 {
    position: absolute;
    width: 42%;  /* 寬度較長 */
    right: -15%;  /* 往右突出 */
    bottom: -10%;   /* 貼近容器底部 */
    z-index: 1;
}

/* 右側文字寬度 */
.text-content-side {
    width: 30%;
    padding-top: 10px;
}

.img-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; /* 圓角效果 */
    /* 為了增加重疊的立體感，建議保留微量陰影 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); 
}

/* 文字樣式微調 */
.section-paragraph {
    color: #cccccc;
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
}

.section-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 80px 0;
}

/* --- Layout 2-4 嚴格排版 --- */
/* 修改：將 align-items 改為 flex-start，並加大 padding-top 給 2-4-3 空間 */
.layout-2-4 {
    display: flex;
    align-items: flex-start; /* 讓文字與右側圖片群組的頂部對齊 */
    justify-content: space-between;
    gap: 40px;
    position: relative;
    padding: 100px 0 80px 0; /* 增加上方留白，避免突出的 2-4-3 被上方區塊蓋住 */
}

.text-content-side-2-4 {
    width: 35%; /* 左側文字佔比 */
    padding-right: 20px;
}

/* 新增：消除段落預設的外邊距，讓文字框能嚴格貼齊頂部 */
.text-content-side-2-4 .section-paragraph {
    margin-top: 0; 
}

/* 修改：移除 margin-top，讓 2-4-1 的上緣能直接對齊文字 */
.img-main-container-2-4 {
    position: relative;
    width: 60%; /* 右側圖片群佔比 */
    margin-bottom: 50px; /* 僅保留下方空間給突出的 2-4-2 */
}

/* 2-4-1 中層主圖：白色大框 */
.img-2-4-1 {
    width: 85%;
    margin-left: 5%; /* 稍微往右推，保留左側空間給 2-4-2 突出 */
    position: relative;
    z-index: 2; /* 放在中層 */
}

/* 2-4-2 頂層左下：壓在主圖左下角 */
.img-2-4-2 {
    position: absolute;
    width: 45%;   /* 依圖片比例設定為大約主圖的一半寬 */
    left: -25%;   /* 往左方突出框外 */
    bottom: -20%; /* 往下方突出框外 */
    z-index: 3;   /* 最頂層，壓過 2-4-1 */
}

/* 2-4-3 底層右上：墊在主圖右上方 */
.img-2-4-3 {
    position: absolute;
    width: 20%;   /* 較小的色塊 */
    right: 0%;    /* 靠右對齊 */
    top: -15%;    /* 往上方突出框外 */
    z-index: 1;   /* 最底層，被 2-4-1 蓋住 */
}

/* RWD 響應式：手機版時改為垂直排列 */
@media (max-width: 992px) {
    .layout-2-4 {
        flex-direction: column;
        padding: 30px 0;
    }
    .text-content-side-2-4 {
        width: 100%;
        margin-bottom: 40px;
        padding-right: 0;
    }
    .img-main-container-2-4 {
        width: 90%;
        margin: 40px auto; /* 讓整個圖片群組置中 */
    }
}

/* =========================================
   Layout 3-2 設計概念 (依據視覺設計圖)
   ========================================= */

.concept-bg-wrapper {
    color: #333;
    padding: 60px 0;
    overflow: hidden; /* 防止旋轉的元素溢出區塊產生捲軸 */
}

.layout-3-2-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    height: 600px; /* 固定高度以利絕對定位排版 */
}

/* 左上角標題定位 */
.layout-3-2-container .section-heading {
    position: absolute;
    top: 50px;
    left: 2%;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 8px;
    margin: 0;
    z-index: 5;
}

/* --- 各獨立圖片區塊設定 --- */

/* 中間大圖 (白色 3-2-1) */
.img-3-2-1 {
    position: absolute;
    width: 46%;
    height: 75%;
    left: 27%;
    top: 10%;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}
.img-3-2-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 左側重疊圖 (灰藍色 3-2-2) */
.img-3-2-2 {
    position: absolute;
    width: 28%;
    height: 50%;
    left: 2%;
    top: 33%;
    z-index: 5;
    background-color: #94a5b7;
    border-radius: 12px;
    overflow: hidden;
    transform: rotate(-8deg); /* 逆時針微旋轉 */
}
.img-3-2-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右上小圖 (灰藍色 3-2-3) */
.img-3-2-3 {
    position: absolute;
    width: 16%;
    height: 35%;
    right: 14%;
    top: 5%;
    z-index: 3;
    background-color: #94a5b7;
    border-radius: 12px;
    overflow: hidden;
    transform: rotate(15deg); /* 順時針旋轉 */
}
.img-3-2-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右中側白色小圖 (3-2-4) */
.img-3-2-4 {
    position: absolute;
    width: 14%;
    height: 25%;
    right: 6%;
    top: 20%;
    z-index: 4;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transform: rotate(-6deg); /* 逆時針微旋轉 */
}
.img-3-2-4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 文字區塊設定 --- */

/* 右下純文字塊 */
.text-box-desc {
    position: absolute;
    width: 24%;
    right: 2%;
    bottom: 20%;
    z-index: 5;
}

.text-box-desc p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cccccc;
    text-align: justify;
}

/* --- 響應式調整 (RWD) --- */
@media (max-width: 992px) {
    .layout-3-2-container {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
    }
    
    .layout-3-2-container .section-heading {
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 4px;
    }

    /* 將手機版的設定覆蓋各獨立區塊 */
    .img-3-2-1, .img-3-2-2, .img-3-2-3, .img-3-2-4 {
        position: relative;
        width: 100%;
        height: 250px;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        transform: none !important; /* 手機版取消旋轉避免版面混亂 */
    }

    .text-box-desc {
        position: relative;
        width: 100%;
        right: 0;
        bottom: 0;
        margin-top: 20px;
    }
}

/* =========================================
   設計亮點 (傾斜卡片輪播) - 修正版
   ========================================= */

/* 1. 外層容器：加大上下 padding，確保旋轉後的卡片有足夠空間，不會頂到天花板或地板 */
.highlight-swiper-container {
    width: 100%;
    overflow: hidden; 
    padding: 80px 0; /* 從原本的 60px 加大到 80px */
}

/* 2. Swiper 核心容器：必須允許內容溢出 */
.highlight-swiper {
    width: 100%;
    overflow: visible !important; 
}

.highlight-swiper .swiper-slide {
    width: 65%; 
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 強制解除任何裁切與背景，避免出現方形殘影 */
    overflow: visible !important; 
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
}

/* 預設卡片樣式 (未置中時：稍微縮小、無旋轉、半透明) */
.highlight-card {
    background-color: #94a5b7; /* 灰藍色底 */
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 加深一點陰影讓立體感更好 */
    
    /* 轉場動畫設定 */
    transform: scale(0.85) rotate(0deg); 
    opacity: 0.5;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
    transform-origin: center;
}

/* 置中的作用中卡片 (放大並傾斜) */
.highlight-swiper .swiper-slide-active .highlight-card {
    opacity: 1;
    transform: scale(1) rotate(-5deg); 
    z-index: 10;
}

/* 卡片內的圖片區塊 */
.highlight-img {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 10; 
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 確保圖片內的內容不會超出圓角 */
    transform: translateZ(0); 
}

.highlight-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 卡片內的文字區塊 */
.highlight-text {
    color: #1a2733; 
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
    padding: 0 10px 10px 10px;
}

/* 手機版響應式微調 */
@media (max-width: 768px) {
    .highlight-swiper .swiper-slide {
        width: 85%;
    }
    .highlight-swiper-container {
        padding: 50px 0;
    }
}