/* --------------------------------------title標題css(page-4 暫時沒分開) OP-------------------------------------- */

/* 通用標題容器的基本樣式 */
.new-page-title-text-wrapper {
    position: absolute;
    left: 2%; /* 根據您的微調，將 left 從 1.5% 改為 2% */
    top: -39%; /* 這是通用的大標題文字垂直定位 */
    z-index: 3;
}
.new-page-title-shapes-wrapper {
    display: flex;
    width: 80%; /* 1920px 現在的寬度 */
    height: 25%;
    transform: skewX(-20deg);
    transform-origin: 0% 100%;
    position: absolute; 
    top: -10px;
    left: 0;
    z-index: 2;
}
.new-page-title-border-shape {
    width: 60%; /* 1920px 現在的寬度 */
    height: 40px; /* 1920px 現在的高度 */
    border: 4px solid #445a86;
    background-color: transparent;
    transform: skewX(-20deg) translateX(-18px); /* 1920px 現在的變形 */
    transform-origin: 0% 100%;
    box-sizing: border-box; /* 確保 padding 不影響寬度計算 */
    position: absolute; 
    right: 0;
    top: 10px;
    z-index: 1;
}
.new-page-description-wrapper {
    margin-top: -155px; /* 1920px 現在的負上邊距 */
    width: 600px; /* 1920px 現在的寬度 */
    margin-left: 382px; /* 1920px 現在的左邊距 */
    box-sizing: border-box; /* 新增 box-sizing */
}

/* -------------------- 響應式調整 (從大到小依序遞減) -------------------- */

/* 寬1200 breakpoint */
@media (max-width: 1200px) {
    .new-page-title-shapes-wrapper {
        width: 75%;
    }
    .new-page-description-wrapper {
        margin-left: 382px;
    }
}

/* 寬1074 breakpoint - 從 0620-標題字響應式.jpg 的 1074 數值，與 1073 斷點區分 */
@media (max-width: 1074px) {
    .new-page-title-text-wrapper {
        top: -33%; /* 通用的大標題文字垂直定位調整 */
        left: 2.5%; /* 根據您的微調 */
    }
}

/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
    /* 這裡沒有顯式設置 left，會繼承 1074px 的 2.5% */
    .new-page-title-shapes-wrapper {
        width: 85%; /* 調整為 85%，以在 1073px 呈現更好的視覺長度 */
        height: 25%;
    }
    .new-page-title-border-shape {
        width: 60%; 
        height: 43px;
        transform: skewX(-20deg) translateX(-18px);
        right: 0;
        left: auto;
    }
    .new-page-description-wrapper {
        margin-top: -145px;
        margin-left: 1.5%;
        width: 85vh; /* 調整小字寬度以避免重疊，並確保顯示空間 */
        position: static;
        top: auto;
    }
}

/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
    .new-page-title-text-wrapper {
        top: -39%; /* 通用的大標題文字垂直定位調整 */
        left: 3%; /* 根據您的微調 */
    }
    .new-page-title-shapes-wrapper {
        width: 80%; /* 根據 0620-標題字響應式.jpg 的 1000px 斷點，雖然沒有明確寫出，但看起來像是 75% 左右的感覺 */
        margin-left: 0; /* 清除可能繼承的 margin-left */
    }
    .new-page-title-border-shape {
        width: 65%; /* 讓線條在 1000px 變短一些，為小字留出空間 */
        height: 40px;
        transform: skewX(-20deg) translateX(-18px);
        right: 0;
        left: auto;
    }
    .new-page-description-wrapper {
        width: 80vh; /* 根據矩形線 65% 和左側 1.5% 計算小字寬度，並留出 10px 間距 */
        margin-left: 1.5%; /* 與標題左對齊 */
        padding-left: 0; /* 清除 padding */
        position: static;
        top: auto;
        margin-top: -155px;
    }
}


@media (max-width: 950px) {
    
    .new-page-title-text-wrapper {
        top: -34%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 1000px 的 3% */
    }
    .new-page-description-wrapper {
        width: 70vh;
    }
    
}

/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
    .new-page-title-text-wrapper {
        left: 4%; /* 通用的大標題文字水平定位調整 */
        top: -43%; /* 通用的大標題文字垂直定位調整 */
    }
    .new-page-title-shapes-wrapper {
        margin-top: -10px; /* 通用的色塊組件垂直定位調整 */
        margin-left: 1.5%; /* 讓它從左邊 1.5% 開始，與大標題字左對齊 */
        width: 85%; /* **調整：讓紅藍色塊更長，符合 850px 截圖的視覺效果** */
        height: 25%; /* 保持一致 */
        transform: skewX(-20deg); /* 保持一致 */
    }
    .new-page-title-border-shape {
        width: 65%; /* 來自 0620-標題字響應式.jpg */
        height: 35px; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-20deg) translateX(-18px); /* 保持一致 */
        right: 0; /* 保持靠右 */
        left: auto; /* 確保清除 left */
    }
    .new-page-description-wrapper {
        margin-left: 2.5%; /* **調整：與大標題字左側對齊** */
        width: 95%; /* **調整：讓小字跟畫面差不多寬，並允許它自己換行，配合新的 margin-left 和 padding** */
        margin-top: -140px; /* 通用的小標題描述垂直定位調整 */
        padding-left: 0; /* 清除可能繼承的 padding */
        padding-right: 0; /* 清除可能繼承的 padding */
        text-align: left; /* 確保文字左對齊 */
        position: static; /* 確保不是絕對定位 */
        left: auto; top: auto; /* 清除可能的絕對定位 */
    }
}

/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
    .new-page-title-text-wrapper {
        left: 4.5%; /* 通用的大標題文字水平定位調整 */
        top: -49%; /* 通用的大標題文字垂直定位調整 */
    }
    .new-page-title-shapes-wrapper {
        width: 85%; /* 保持與 850px 類似的寬度，確保整體感 */
        margin-left: 1.5%; /* 保持與 850px 類似的對齊 */
        margin-top: 0px;
    }
    .new-page-title-border-shape {
        width: 65%; /* 保持與 850px 類似的寬度 */
        height: 35px;
    }
    .new-page-description-wrapper {
        margin-top: -125px; /* 通用的小標題描述垂直定位調整 */
        margin-left: 2.5%; /* 調整為與大標題左對齊 */
        width: 95%; /* 保持與 850px 類似的寬度，讓它跟畫面差不多寬 */
        padding: 0%;
    }
}


/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
    .new-page-title-text-wrapper {
        left: 1.5%; /* 通用的大標題文字水平定位調整 */
        top: -55%; /* 通用的大標題文字垂直定位調整 */
        transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 50%;
    }
    .new-page-title-shapes-wrapper {
        width: 90%; /* 來自 0620-標題字響應式.jpg */
        height: 28%; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 100%;
        position: absolute; 
        top: 0;
        left: 0;
        z-index: 2; 
    }
    .new-page-title-border-shape {
        width: 68%; /* 來自 0620-標題字響應式.jpg */
        height: 30px; /* 來自 0620-標題字響應式.jpg */
        border: 4px solid #445a86;
        transform: skewX(-15deg) translateX(-1.5%); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 100%;
        box-sizing: border-box;
        position: absolute; 
        right: 0;
        top: 20px; /* 通用的線條垂直定位調整 */
        z-index: 1; 
    }
    .new-page-description-wrapper {
        margin-top: -75px; /* 通用的小標題描述垂直定位調整 */
        width: calc(100% - 30px); /* 來自 0620-標題字響應式.jpg，確保不被切到線 */
        margin-left: 15px; /* 來自 0620-標題字響應式.jpg */
        padding: 0%;
        position: static;
        top: auto;
    }
}


@media (max-width: 750px) {
    .new-page-title-text-wrapper {
        left: 2.5%; /* 根據您的微調 */
        top: -51%; /* 通用的大標題文字垂直定位調整 */
    }
}



@media (max-width: 700px) {
    .new-page-title-text-wrapper {
        top: -48%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 750px 的 2.5% */
    }
}


@media (max-width: 650px) {
    .new-page-title-text-wrapper {
        top: -42%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 750px 的 2.5% */
    }
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
    .new-page-title-text-wrapper {
        left: 4.5%;
        top: -50%; /* 通用的大標題文字垂直定位調整 */
    }
    .new-page-title-shapes-wrapper {
        width: 80%; /* 來自 0620-標題字響應式.jpg */
        height: 35%; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg); /* 保持與 768px 一致 */
    }
    .new-page-title-border-shape {
        width: 80%; /* 來自 0620-標題字響應式.jpg */
        height: 30px; /* 來自 0620-標題字響應式.jpg */
        border: 3px solid #445a86; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg) translateX(-1.5%); /* 保持與 768px 一致 */
        top: 15px; /* 通用的線條垂直定位調整 */
    }
    .new-page-description-wrapper {
        margin-top: -56px; /* 通用的小標題描述垂直定位調整 */
        width: calc(100% - 20px); /* 來自 0620-標題字響應式.jpg */
        margin-left: 10px; /* 來自 0620-標題字響應式.jpg */
        padding: 0%;
    }
}


@media (max-width: 550px) {
    .new-page-title-text-wrapper {
        top: -42%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
}


@media (max-width: 500px) {
    .new-page-title-text-wrapper {
        top: -42%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
    .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 90%;
    }
}

@media (max-width: 450px) {
    .new-page-title-text-wrapper {
        top: -35%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
}

@media (max-width: 300px) {
    .new-page-title-text-wrapper {
        top: -28%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
}


.new-page-title-block-wrapper {
    margin-top: 2%;
	margin-bottom: 2%;
}


@media (max-width: 850px) {
.new-page-title-block-wrapper {width:100%!important;}
}




#page-4 .content .new-page-title-container {
    width: 100%;
    max-width: 1000px; /* 矩形線和一些定位的基準寬度 */
    height: 180px;
    position: relative;
    margin-bottom: 30px;
}
#page-4 .content .new-page-title-text-wrapper h2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 69.12px !important; /* 修正點：從 3.6vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    transform: skewX(-15deg) translateX(1.8vw); /* 這裡的 translateX 仍然使用 vw 以保持相對位置 */
    transform-origin: 0% 50%;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#page-4 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
    background-color: #c00000;
    width: 80%;
    height: 100%;
    flex-shrink: 0;
}
#page-4 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
    background-color: #445a86;
    width: 5%;
    height: 100%;
    flex-shrink: 0;
}
#page-4 .content .new-page-description-wrapper p {
    color: #FFFFFF;
    font-size: 21.12px !important; /* 修正點：從 1.1vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    line-height: 1.5 !important;
    font-style: italic;
    font-weight: bold;
}


@media (max-width: 1200px) {
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important;
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 1.8vw !important;
    }
}

/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
    #page-4 .content .new-page-title-container {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important; /* 繼承 1200px 的字體大小 */
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
    #page-4 .content .new-page-title-container {
        width: 100%;
        max-width: 980px; /* 稍微縮小 max-width，讓內邊距有空間 */
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px; /* 增加左側內邊距 */
        padding-right: 10px; /* 增加右側內邊距 */
        box-sizing: border-box; /* 確保 padding 不增加總寬度 */
    }
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 更積極地縮小字體 */
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

@media (max-width: 950px) {
    #page-4 .content .new-page-description-wrapper p {
        font-size: 2.4vw !important;
    }
}

/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
    #page-4 .content .new-page-title-container {
        height: 160px; /* 根據截圖，高度可能有所縮小 */
        max-width: 850px; /* 設定最大寬度為 850px */
        margin-left: auto;
        margin-right: auto;
        padding: 0; /* 清除之前的 padding */
    }
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg) translateX(1.8vw); /* 保持與 PC 版一致的 skew 和 translateX */
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 2.8vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}

/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
    #page-4 .content .new-page-title-container {
        height: 150px; /* 根據 0620-標題字響應式.jpg 截圖，高度繼續縮小 */
    }
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}

/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
    #page-4 .content .new-page-title-container {
        height: 120px; /* 統一手機版高度 */
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%; /* 手機版不限制最大寬度 */
        padding-left: 15px; /* 為邊緣留出一些空間 */
        padding-right: 15px;
        box-sizing: border-box;
    }
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 50%;
    }
    #page-4 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 85%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-4 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
        width: 5%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.3 !important; /* 來自 0620-標題字響應式.jpg */
        margin-top: 0;
        margin-bottom: 0;
        text-align: left;
        font-style: italic;
        font-weight: bold;
    }
}

@media (max-width: 650px) {
    #page-4 .content .new-page-description-wrapper p {
        font-size: 2.9vw !important;
    }
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
    #page-4 .content .new-page-title-container {
        height: 100px; /* 進一步縮小高度 */
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 9vw !important; /* 更積極地縮小字體 */
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 3vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.35 !important; /* 來自 0620-標題字響應式.jpg */
    }
}

@media (max-width: 500px) {
    #page-4 .content .new-page-title-text-wrapper h2 {
        font-size: 10vw !important; /* 更積極地縮小字體 */
    }
    #page-4 .content .new-page-description-wrapper p {
        font-size: 3.5vw !important;
    }
    #page-4 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 90%;
    }
}

@media (max-width: 450px) {
    #page-4 .content .new-page-description-wrapper p {
        font-size: 3.7vw !important;
    }
}

@media (max-width: 300px) {
    #page-4 .content .new-page-description-wrapper p {
        font-size: 4.1vw !important;
    }
}



/* --------------------------------------title標題css(page-4 暫時沒分開) ED-------------------------------------- */



/* --------------------------------------title標題css(page-5 暫時沒分開) OP-------------------------------------- */


#page-5 .content .new-page-title-container {
    width: 100%;
    max-width: 1000px; /* 矩形線和一些定位的基準寬度 */
    height: 180px;
    position: relative;
    margin-bottom: 30px;
}
#page-5 .content .new-page-title-text-wrapper h2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 69.12px !important; /* 修正點：從 3.6vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    transform: skewX(-15deg) translateX(1.8vw); /* 這裡的 translateX 仍然使用 vw 以保持相對位置 */
    transform-origin: 0% 50%;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#page-5 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
    background-color: #c00000;
    width: 80%;
    height: 100%;
    flex-shrink: 0;
}
#page-5 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
    background-color: #445a86;
    width: 5%;
    height: 100%;
    flex-shrink: 0;
}
#page-5 .content .new-page-description-wrapper p {
    color: #FFFFFF;
    font-size: 21.12px !important; /* 修正點：從 1.1vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    line-height: 1.5 !important;
    font-style: italic;
    font-weight: bold;
}


@media (max-width: 1200px) {
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important;
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 1.8vw !important;
    }
}

/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
    #page-5 .content .new-page-title-container {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important; /* 繼承 1200px 的字體大小 */
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
    #page-5 .content .new-page-title-container {
        width: 100%;
        max-width: 980px; /* 稍微縮小 max-width，讓內邊距有空間 */
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px; /* 增加左側內邊距 */
        padding-right: 10px; /* 增加右側內邊距 */
        box-sizing: border-box; /* 確保 padding 不增加總寬度 */
    }
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 更積極地縮小字體 */
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

@media (max-width: 950px) {
    #page-5 .content .new-page-description-wrapper p {
        font-size: 2.4vw !important;
    }
}

/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
    #page-5 .content .new-page-title-container {
        height: 160px; /* 根據截圖，高度可能有所縮小 */
        max-width: 850px; /* 設定最大寬度為 850px */
        margin-left: auto;
        margin-right: auto;
        padding: 0; /* 清除之前的 padding */
    }
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg) translateX(1.8vw); /* 保持與 PC 版一致的 skew 和 translateX */
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 2.8vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}

/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
    #page-5 .content .new-page-title-container {
        height: 150px; /* 根據 0620-標題字響應式.jpg 截圖，高度繼續縮小 */
    }
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}

/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
    #page-5 .content .new-page-title-container {
        height: 120px; /* 統一手機版高度 */
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%; /* 手機版不限制最大寬度 */
        padding-left: 15px; /* 為邊緣留出一些空間 */
        padding-right: 15px;
        box-sizing: border-box;
    }
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 50%;
    }
    #page-5 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 85%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-5 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
        width: 5%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.3 !important; /* 來自 0620-標題字響應式.jpg */
        margin-top: 0;
        margin-bottom: 0;
        text-align: left;
        font-style: italic;
        font-weight: bold;
    }
}

@media (max-width: 650px) {
    #page-5 .content .new-page-description-wrapper p {
        font-size: 2.9vw !important;
    }
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
    #page-5 .content .new-page-title-container {
        height: 100px; /* 進一步縮小高度 */
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 9vw !important; /* 更積極地縮小字體 */
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 3vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.35 !important; /* 來自 0620-標題字響應式.jpg */
    }
}

@media (max-width: 500px) {
    #page-5 .content .new-page-title-text-wrapper h2 {
        font-size: 10vw !important; /* 更積極地縮小字體 */
    }
    #page-5 .content .new-page-description-wrapper p {
        font-size: 3.5vw !important;
    }
    #page-5 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 90%;
    }
}

@media (max-width: 450px) {
    #page-5 .content .new-page-description-wrapper p {
        font-size: 3.7vw !important;
    }
}

@media (max-width: 300px) {
    #page-5 .content .new-page-description-wrapper p {
        font-size: 4.1vw !important;
    }
}



/* --------------------------------------title標題css(page-5 暫時沒分開) ED-------------------------------------- */



/* --------------------------------------title標題css(page-6 暫時沒分開) OP-------------------------------------- */


#page-6 .content .new-page-title-container {
    width: 100%;
    max-width: 1000px; /* 矩形線和一些定位的基準寬度 */
    height: 180px;
    position: relative;
    margin-bottom: 30px;
}
#page-6 .content .new-page-title-text-wrapper h2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 69.12px !important; /* 修正點：從 3.6vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    transform: skewX(-15deg) translateX(1.8vw); /* 這裡的 translateX 仍然使用 vw 以保持相對位置 */
    transform-origin: 0% 50%;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#page-6 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
    background-color: #c00000;
    width: 80%;
    height: 100%;
    flex-shrink: 0;
}
#page-6 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
    background-color: #445a86;
    width: 5%;
    height: 100%;
    flex-shrink: 0;
}
#page-6 .content .new-page-description-wrapper p {
    color: #FFFFFF;
    font-size: 21.12px !important; /* 修正點：從 1.1vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    line-height: 1.5 !important;
    font-style: italic;
    font-weight: bold;
}


@media (max-width: 1200px) {
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important;
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 1.8vw !important;
    }
}

/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
    #page-6 .content .new-page-title-container {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important; /* 繼承 1200px 的字體大小 */
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
    #page-6 .content .new-page-title-container {
        width: 100%;
        max-width: 980px; /* 稍微縮小 max-width，讓內邊距有空間 */
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px; /* 增加左側內邊距 */
        padding-right: 10px; /* 增加右側內邊距 */
        box-sizing: border-box; /* 確保 padding 不增加總寬度 */
    }
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 更積極地縮小字體 */
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

@media (max-width: 950px) {
    #page-6 .content .new-page-description-wrapper p {
        font-size: 2.4vw !important;
    }
}

/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
    #page-6 .content .new-page-title-container {
        height: 160px; /* 根據截圖，高度可能有所縮小 */
        max-width: 850px; /* 設定最大寬度為 850px */
        margin-left: auto;
        margin-right: auto;
        padding: 0; /* 清除之前的 padding */
    }
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg) translateX(1.8vw); /* 保持與 PC 版一致的 skew 和 translateX */
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 2.8vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}

/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
    #page-6 .content .new-page-title-container {
        height: 150px; /* 根據 0620-標題字響應式.jpg 截圖，高度繼續縮小 */
    }
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}

/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
    #page-6 .content .new-page-title-container {
        height: 120px; /* 統一手機版高度 */
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%; /* 手機版不限制最大寬度 */
        padding-left: 15px; /* 為邊緣留出一些空間 */
        padding-right: 15px;
        box-sizing: border-box;
    }
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 50%;
    }
    #page-6 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 85%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-6 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
        width: 5%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.3 !important; /* 來自 0620-標題字響應式.jpg */
        margin-top: 0;
        margin-bottom: 0;
        text-align: left;
        font-style: italic;
        font-weight: bold;
    }
}

@media (max-width: 650px) {
    #page-6 .content .new-page-description-wrapper p {
        font-size: 2.9vw !important;
    }
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
    #page-6 .content .new-page-title-container {
        height: 100px; /* 進一步縮小高度 */
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 9vw !important; /* 更積極地縮小字體 */
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 3vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.35 !important; /* 來自 0620-標題字響應式.jpg */
    }
}

@media (max-width: 500px) {
    #page-6 .content .new-page-title-text-wrapper h2 {
        font-size: 10vw !important; /* 更積極地縮小字體 */
    }
    #page-6 .content .new-page-description-wrapper p {
        font-size: 3.5vw !important;
    }
    #page-6 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 90%;
    }
}

@media (max-width: 450px) {
    #page-6 .content .new-page-description-wrapper p {
        font-size: 3.7vw !important;
    }
}

@media (max-width: 300px) {
    #page-6 .content .new-page-description-wrapper p {
        font-size: 4.1vw !important;
    }
}



/* --------------------------------------title標題css(page-6 暫時沒分開) ED-------------------------------------- */




/* --------------------------------------title標題css(page-7 暫時沒分開) OP-------------------------------------- */

/* 通用標題容器的基本樣式 */
.new-page-title-text-wrapper {
    position: absolute;
    left: 2%; /* 根據您的微調，將 left 從 1.5% 改為 2% */
    top: -39%; /* 這是通用的大標題文字垂直定位 */
    z-index: 3;
}
.new-page-title-shapes-wrapper {
    display: flex;
    width: 80%; /* 1920px 現在的寬度 */
    height: 25%;
    transform: skewX(-20deg);
    transform-origin: 0% 100%;
    position: absolute; 
    top: -10px;
    left: 0;
    z-index: 2;
}
.new-page-title-border-shape {
    width: 60%; /* 1920px 現在的寬度 */
    height: 40px; /* 1920px 現在的高度 */
    border: 4px solid #445a86;
    background-color: transparent;
    transform: skewX(-20deg) translateX(-18px); /* 1920px 現在的變形 */
    transform-origin: 0% 100%;
    box-sizing: border-box; /* 確保 padding 不影響寬度計算 */
    position: absolute; 
    right: 0;
    top: 10px;
    z-index: 1;
}
.new-page-description-wrapper {
    margin-top: -155px; /* 1920px 現在的負上邊距 */
    width: 600px; /* 1920px 現在的寬度 */
    margin-left: 382px; /* 1920px 現在的左邊距 */
    box-sizing: border-box; /* 新增 box-sizing */
}

/* -------------------- 響應式調整 (從大到小依序遞減) -------------------- */

/* 寬1200 breakpoint */
@media (max-width: 1200px) {
    .new-page-title-shapes-wrapper {
        width: 75%;
    }
    .new-page-description-wrapper {
        margin-left: 382px;
    }
}

/* 寬1074 breakpoint - 從 0620-標題字響應式.jpg 的 1074 數值，與 1073 斷點區分 */
@media (max-width: 1074px) {
    .new-page-title-text-wrapper {
        top: -33%; /* 通用的大標題文字垂直定位調整 */
        left: 2.5%; /* 根據您的微調 */
    }
}

/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
    /* 這裡沒有顯式設置 left，會繼承 1074px 的 2.5% */
    .new-page-title-shapes-wrapper {
        width: 85%; /* 調整為 85%，以在 1073px 呈現更好的視覺長度 */
        height: 25%;
    }
    .new-page-title-border-shape {
        width: 60%; 
        height: 43px;
        transform: skewX(-20deg) translateX(-18px);
        right: 0;
        left: auto;
    }
    .new-page-description-wrapper {
        margin-top: -145px;
        margin-left: 1.5%;
        width: 85vh; /* 調整小字寬度以避免重疊，並確保顯示空間 */
        position: static;
        top: auto;
    }
}

/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
    .new-page-title-text-wrapper {
        top: -39%; /* 通用的大標題文字垂直定位調整 */
        left: 3%; /* 根據您的微調 */
    }
    .new-page-title-shapes-wrapper {
        width: 80%; /* 根據 0620-標題字響應式.jpg 的 1000px 斷點，雖然沒有明確寫出，但看起來像是 75% 左右的感覺 */
        margin-left: 0; /* 清除可能繼承的 margin-left */
    }
    .new-page-title-border-shape {
        width: 65%; /* 讓線條在 1000px 變短一些，為小字留出空間 */
        height: 40px;
        transform: skewX(-20deg) translateX(-18px);
        right: 0;
        left: auto;
    }
    .new-page-description-wrapper {
        width: 80vh; /* 根據矩形線 65% 和左側 1.5% 計算小字寬度，並留出 10px 間距 */
        margin-left: 1.5%; /* 與標題左對齊 */
        padding-left: 0; /* 清除 padding */
        position: static;
        top: auto;
        margin-top: -155px;
    }
}


@media (max-width: 950px) {
    
    .new-page-title-text-wrapper {
        top: -34%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 1000px 的 3% */
    }
    .new-page-description-wrapper {
        width: 70vh;
    }
    
}

/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
    .new-page-title-text-wrapper {
        left: 4%; /* 通用的大標題文字水平定位調整 */
        top: -43%; /* 通用的大標題文字垂直定位調整 */
    }
    .new-page-title-shapes-wrapper {
        margin-top: -10px; /* 通用的色塊組件垂直定位調整 */
        margin-left: 1.5%; /* 讓它從左邊 1.5% 開始，與大標題字左對齊 */
        width: 85%; /* **調整：讓紅藍色塊更長，符合 850px 截圖的視覺效果** */
        height: 25%; /* 保持一致 */
        transform: skewX(-20deg); /* 保持一致 */
    }
    .new-page-title-border-shape {
        width: 65%; /* 來自 0620-標題字響應式.jpg */
        height: 35px; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-20deg) translateX(-18px); /* 保持一致 */
        right: 0; /* 保持靠右 */
        left: auto; /* 確保清除 left */
    }
    .new-page-description-wrapper {
        margin-left: 2.5%; /* **調整：與大標題字左側對齊** */
        width: 95%; /* **調整：讓小字跟畫面差不多寬，並允許它自己換行，配合新的 margin-left 和 padding** */
        margin-top: -140px; /* 通用的小標題描述垂直定位調整 */
        padding-left: 0; /* 清除可能繼承的 padding */
        padding-right: 0; /* 清除可能繼承的 padding */
        text-align: left; /* 確保文字左對齊 */
        position: static; /* 確保不是絕對定位 */
        left: auto; top: auto; /* 清除可能的絕對定位 */
    }
}

/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
    .new-page-title-text-wrapper {
        left: 4.5%; /* 通用的大標題文字水平定位調整 */
        top: -49%; /* 通用的大標題文字垂直定位調整 */
    }
    .new-page-title-shapes-wrapper {
        width: 85%; /* 保持與 850px 類似的寬度，確保整體感 */
        margin-left: 1.5%; /* 保持與 850px 類似的對齊 */
        margin-top: 0px;
    }
    .new-page-title-border-shape {
        width: 65%; /* 保持與 850px 類似的寬度 */
        height: 35px;
    }
    .new-page-description-wrapper {
        margin-top: -125px; /* 通用的小標題描述垂直定位調整 */
        margin-left: 2.5%; /* 調整為與大標題左對齊 */
        width: 95%; /* 保持與 850px 類似的寬度，讓它跟畫面差不多寬 */
        padding: 0%;
    }
}


/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
    .new-page-title-text-wrapper {
        left: 1.5%; /* 通用的大標題文字水平定位調整 */
        top: -55%; /* 通用的大標題文字垂直定位調整 */
        transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 50%;
    }
    .new-page-title-shapes-wrapper {
        width: 90%; /* 來自 0620-標題字響應式.jpg */
        height: 28%; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 100%;
        position: absolute; 
        top: 0;
        left: 0;
        z-index: 2; 
    }
    .new-page-title-border-shape {
        width: 68%; /* 來自 0620-標題字響應式.jpg */
        height: 30px; /* 來自 0620-標題字響應式.jpg */
        border: 4px solid #445a86;
        transform: skewX(-15deg) translateX(-1.5%); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 100%;
        box-sizing: border-box;
        position: absolute; 
        right: 0;
        top: 20px; /* 通用的線條垂直定位調整 */
        z-index: 1; 
    }
    .new-page-description-wrapper {
        margin-top: -75px; /* 通用的小標題描述垂直定位調整 */
        width: calc(100% - 30px); /* 來自 0620-標題字響應式.jpg，確保不被切到線 */
        margin-left: 15px; /* 來自 0620-標題字響應式.jpg */
        padding: 0%;
        position: static;
        top: auto;
    }
}


@media (max-width: 750px) {
    .new-page-title-text-wrapper {
        left: 2.5%; /* 根據您的微調 */
        top: -51%; /* 通用的大標題文字垂直定位調整 */
    }
}



@media (max-width: 700px) {
    .new-page-title-text-wrapper {
        top: -48%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 750px 的 2.5% */
    }
}


@media (max-width: 650px) {
    .new-page-title-text-wrapper {
        top: -42%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 750px 的 2.5% */
    }
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
    .new-page-title-text-wrapper {
        left: 4.5%;
        top: -50%; /* 通用的大標題文字垂直定位調整 */
    }
    .new-page-title-shapes-wrapper {
        width: 80%; /* 來自 0620-標題字響應式.jpg */
        height: 35%; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg); /* 保持與 768px 一致 */
    }
    .new-page-title-border-shape {
        width: 80%; /* 來自 0620-標題字響應式.jpg */
        height: 30px; /* 來自 0620-標題字響應式.jpg */
        border: 3px solid #445a86; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg) translateX(-1.5%); /* 保持與 768px 一致 */
        top: 15px; /* 通用的線條垂直定位調整 */
    }
    .new-page-description-wrapper {
        margin-top: -56px; /* 通用的小標題描述垂直定位調整 */
        width: calc(100% - 20px); /* 來自 0620-標題字響應式.jpg */
        margin-left: 10px; /* 來自 0620-標題字響應式.jpg */
        padding: 0%;
    }
}


@media (max-width: 550px) {
    .new-page-title-text-wrapper {
        top: -42%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
}


@media (max-width: 500px) {
    .new-page-title-text-wrapper {
        top: -42%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
    .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 90%;
    }
}

@media (max-width: 450px) {
    .new-page-title-text-wrapper {
        top: -35%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
}

@media (max-width: 300px) {
    .new-page-title-text-wrapper {
        top: -28%; /* 通用的大標題文字垂直定位調整 */
        /* left 會繼承 600px 的 4.5% */
    }
}


.new-page-title-block-wrapper {
    margin-top: 2%;
	margin-bottom: 2%;
}


@media (max-width: 850px) {
.new-page-title-block-wrapper {width:100%!important;}
}




#page-7 .content .new-page-title-container {
    width: 100%;
    max-width: 1000px; /* 矩形線和一些定位的基準寬度 */
    height: 180px;
    position: relative;
    margin-bottom: 30px;
}
#page-7 .content .new-page-title-text-wrapper h2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 64px !important; /* 修正點：從 3.6vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    transform: skewX(-15deg) translateX(1.8vw); /* 這裡的 translateX 仍然使用 vw 以保持相對位置 */
    transform-origin: 0% 50%;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#page-7 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
    background-color: #c00000;
    width: 80%;
    height: 100%;
    flex-shrink: 0;
}
#page-7 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
    background-color: #445a86;
    width: 5%;
    height: 100%;
    flex-shrink: 0;
}
#page-7 .content .new-page-description-wrapper p {
    color: #FFFFFF;
    font-size: 21.12px !important; /* 修正點：從 1.1vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    line-height: 1.5 !important;
    font-style: italic;
    font-weight: bold;
}


@media (max-width: 1200px) {
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important;
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 1.8vw !important;
    }
}

/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
    #page-7 .content .new-page-title-container {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 5.7vw !important; /* 繼承 1200px 的字體大小 */
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
    #page-7 .content .new-page-title-container {
        width: 100%;
        max-width: 980px; /* 稍微縮小 max-width，讓內邊距有空間 */
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px; /* 增加左側內邊距 */
        padding-right: 10px; /* 增加右側內邊距 */
        box-sizing: border-box; /* 確保 padding 不增加總寬度 */
    }
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 6vw !important; /* 更積極地縮小字體 */
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 2vw !important;
    }
}

@media (max-width: 950px) {
    #page-7 .content .new-page-description-wrapper p {
        font-size: 2.4vw !important;
    }
}

/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
    #page-7 .content .new-page-title-container {
        height: 160px; /* 根據截圖，高度可能有所縮小 */
        max-width: 850px; /* 設定最大寬度為 850px */
        margin-left: auto;
        margin-right: auto;
        padding: 0; /* 清除之前的 padding */
    }
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-15deg) translateX(1.8vw); /* 保持與 PC 版一致的 skew 和 translateX */
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 2.8vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}


@media (max-width: 1000px) {
    #page-7 .content .new-page-title-text-wrapper {
        top: -32%;
        left: 3%;
    }
}

/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
    #page-7 .content .new-page-title-container {
        height: 150px; /* 根據 0620-標題字響應式.jpg 截圖，高度繼續縮小 */
    }
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 來自 0620-標題字響應式.jpg */
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
    }
}


@media (max-width: 800px) {
    #page-7 .content .new-page-title-text-wrapper {
        top: -38%;
        left: 3%;
    }
}


/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
    #page-7 .content .new-page-title-container {
        height: 120px; /* 統一手機版高度 */
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%; /* 手機版不限制最大寬度 */
        padding-left: 15px; /* 為邊緣留出一些空間 */
        padding-right: 15px;
        box-sizing: border-box;
    }
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 來自 0620-標題字響應式.jpg */
        transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
        transform-origin: 0% 50%;
    }
    #page-7 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 85%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-7 .content .new-page-title-shapes-wrapper .new-page-title-shape.blue-part {
        width: 5%; /* 來自 0620-標題字響應式.jpg */
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.3 !important; /* 來自 0620-標題字響應式.jpg */
        margin-top: 0;
        margin-bottom: 0;
        text-align: left;
        font-style: italic;
        font-weight: bold;
    }
}


@media (max-width: 768px) {
    #page-7 .content .new-page-title-text-wrapper {
        top: -38%;
        left: 0%;
    }
}



@media (max-width: 650px) {
    #page-7 .content .new-page-description-wrapper p {
        font-size: 2.9vw !important;
    }
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
    #page-7 .content .new-page-title-container {
        height: 100px; /* 進一步縮小高度 */
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 更積極地縮小字體 */
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 3vw !important; /* 來自 0620-標題字響應式.jpg */
        line-height: 1.35 !important; /* 來自 0620-標題字響應式.jpg */
    }
}


@media (max-width: 600px) {
    #page-7 .content .new-page-title-text-wrapper {
        top: -32%;
        left: 0%;
    }
}

@media (max-width: 550px) {
    #page-7 .content .new-page-title-text-wrapper {
        top: -25%;
        left: 0%;
    }
}


@media (max-width: 500px) {
    #page-7 .content .new-page-title-text-wrapper h2 {
        font-size: 7vw !important; /* 更積極地縮小字體 */
    }
    #page-7 .content .new-page-description-wrapper p {
        font-size: 3.5vw !important;
    }
    #page-7 .content .new-page-title-shapes-wrapper .new-page-title-shape.red-part {
        width: 90%;
    }
}

@media (max-width: 500px) {
    #page-7 .content .new-page-title-text-wrapper {
        top: -23%;
        left: 0%;
    }
}


@media (max-width: 450px) {
    #page-7 .content .new-page-description-wrapper p {
        font-size: 3.7vw !important;
    }
	#page-7 .content .new-page-title-text-wrapper {
        top: -18%;
        left: 0%;
    }
}

@media (max-width: 300px) {
    #page-7 .content .new-page-description-wrapper p {
        font-size: 4.1vw !important;
    }
	#page-7 .content .new-page-title-text-wrapper {
        top: -10%;
        left: 0%;
    }
}



/* --------------------------------------title標題css(page-7 暫時沒分開) ED-------------------------------------- */





/* ---------------------- Page 4 影片輪播樣式 (YouTube) ---------------------- */

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1630px; /* 輪播容器的最大寬度 */
    margin: 0px auto 30px auto; /* 調整上下邊距，確保與其他內容分離 */
    overflow: hidden; /* 隱藏超出視圖的影片 */
    padding: 0 20px; /* 左右內邊距，為導航按鈕預留空間 */
    box-sizing: border-box;
    /* 定義 CSS 變數，用於間距計算 */
    --gap-x: 20px; 
}

.carousel-track-container {
    width: 100%;
    overflow: hidden; /* 確保軌道容器內的內容不會溢出 */
    height: auto; /* 高度自動，由 carousel-page 的內容決定 */
}

.carousel-track {
    display: flex; /* Flex 容器來排列 carousel-page 元素 */
    transition: transform 0.5s ease-in-out; /* 滾動動畫 */
}

.carousel-page {
    flex-shrink: 0; /* 防止頁面縮小 */
    width: 100%; /* 每個頁面佔據 carousel-track-container 的整個寬度 */
    display: grid; /* 將 carousel-page 設為網格容器 */
    gap: var(--gap-x); /* 影片之間的間距 */
    box-sizing: border-box; /* 確保 padding 和 border 計算在寬度內 */
    padding: 0; /* 移除 page 本身的內邊距 */

    /* 預設佈局: 大於 1000px 寬時為 3 欄 2 列 */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto); /* 2 列，高度自動 */
}

.gallery-item {
    background-color: #222; /* 影片背景色，讓它與黑色影片邊框融合 */
    border-radius: 8px;
    overflow: hidden; /* 還原 overflow: hidden; 因為這是舊版樣式的一部分 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 增加陰影深度 */
    display: flex;
    flex-direction: column; /* 讓影片垂直堆疊 */
    justify-content: flex-start; /* 確保內容靠上 */
    height: 100%; /* 確保項目撐滿網格高度 */
    padding-bottom: 0; /* 確保沒有額外 padding */
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 寬高比 */
    height: 0;
    overflow: hidden; /* 還原 overflow: hidden; 因為這是舊版樣式的一部分 */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 輪播導航按鈕 */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 2px solid #fff;
    padding: 15px 10px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    border-radius: 10px; /* 通用圓角 */
    transition: background-color 0.3s ease;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* YouTube 左右按鈕位置和圓角修正 */
.prev-button {
    left: 0; /* 修正回左側 */
    border-top-left-radius: 10px; /* 靠近內容側直角 */
    border-bottom-left-radius: 10px; /* 靠近內容側直角 */
    border-top-right-radius: 0px; /* 外側圓角 */
    border-bottom-right-radius: 0px; /* 外側圓角 */
}

.next-button {
    right: 0; /* 修正回右側 */
    border-top-right-radius: 10px; /* 靠近內容側直角 */
    border-bottom-right-radius: 10px; /* 靠近內容側直角 */
    border-top-left-radius: 0px; /* 外側圓角 */
    border-bottom-left-radius: 0px; /* 外側圓角 */
}


/* 輪播指示器 */
.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.indicator-dot {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid #aaa;
}

.indicator-dot.active {
    background-color: #ff0000; /* 激活時的顏色 */
    transform: scale(1.2); /* 激活時放大 */
    border-color: #ff0000;
}

/* 響應式調整 (YouTube Carousel) */
/* 寬度 1000px (含) 以下：2 個影片一列 (2 columns, 2 rows) */
@media (max-width: 1000px) { /* 當螢幕寬度小於或等於 1000px 時 */
    .carousel-container {
        --gap-x: 15px; /* 調整間距變數 */
        padding: 0 10px; /* 調整左右內邊距 */
    }
    .carousel-page {
		padding-left: 2%;
        padding-right: 2%;
        grid-template-columns: repeat(2, 1fr); /* 2 欄 */
        grid-template-rows: repeat(2, auto); /* 2 列，高度自動 */
    }
    .carousel-button {
        padding: 12px 8px; /* 縮小按鈕 */
        font-size: 20px;
    }
    .indicator-dot {
        width: 10px;
        height: 10px;
    }
}

/* 寬度 500px (含) 以下：仍然是 2 個影片一列，但間距和內邊距再調整 */
@media (max-width: 500px) {
    .carousel-container {
        --gap-x: 10px; /* 進一步調整間距變數 */
        padding: 0 5px; /* 進一步調整左右內邊距 */
    }
    /* .carousel-page 的 grid-template-columns 保持不變 (2欄2列) */
    .carousel-button {
        padding: 10px 6px; /* 進一步縮小按鈕 */
        font-size: 18px;
    }
    .carousel-indicators {
        margin-top: 15px;
        gap: 8px;
    }
    .indicator-dot {
        width: 8px;
        height: 8px;
    }
}

/* 確保 YouTube 播放器內部控制項可見，並移除其默認的連結 */
.html5-video-player .ytp-impression-link {
    display: block !important;
}


/* ---------------------- TikTok 影片輪播樣式 ---------------------- */

/* 預設隱藏所有 TikTok 佈局容器，只顯示其中一個 */
.tiktok-carousel-container {
    position: relative;
    width: 100%;
    /* max-width 將由子容器決定，這裡保持 100% 寬度 */
    margin: 30px auto 30px auto; 
    overflow: hidden; 
    padding: 0 20px; 
    box-sizing: border-box;
    --tiktok-gap-x: 20px; 
    display: none; /* 預設隱藏所有 TikTok 輪播容器 */
}

/* 每個響應式佈局特有的容器 */
.tiktok-desktop-layout {
    max-width: 1200px; /* 桌面版最大寬度 */
}

.tiktok-tablet-layout {
    max-width: 800px; /* 平板版最大寬度 */
}

.tiktok-mobile-layout {
    max-width: 400px; /* 手機版最大寬度 */
}


.tiktok-carousel-track-container {
    width: 100%;
    overflow: hidden; 
    height: auto; 
}

.tiktok-carousel-track {
    display: flex; 
    transition: transform 0.5s ease-in-out; 
}

.tiktok-carousel-page {
    flex-shrink: 0; 
    width: 100%; 
    display: grid; 
    gap: var(--tiktok-gap-x); 
    box-sizing: border-box; 
    padding: 0; 
    align-items: start; 
    grid-template-rows: auto; /* 高度自動，只會有一列 */
}

.tiktok-gallery-item {
    /* 移除 background-color 和 box-shadow */
    border-radius: 8px;
    overflow: hidden; 
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    height: 100%; 
    padding-bottom: 0; 
}

.tiktok-embed {
    width: 100%;
    height: 100%; 
    max-width: 100%; 
}

/* 輪播導航按鈕 */
.tiktok-carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 2px solid #fff; 
    padding: 15px 10px; 
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    border-radius: 10px; /* 通用圓角 */
    transition: background-color 0.3s ease;
}

.tiktok-carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* TikTok 左右按鈕位置和圓角修正 */
.tiktok-prev-button {
    left: 0; /* 修正回左側 */
    border-top-left-radius: 10px; /* 靠近內容側直角 */
    border-bottom-left-radius: 10px; /* 靠近內容側直角 */
    border-top-right-radius: 0px; /* 外側圓角 */
    border-bottom-right-radius: 0px; /* 外側圓角 */
}

.tiktok-next-button {
    right: 0; /* 修正回右側 */
    border-top-right-radius: 10px; /* 靠近內容側直角 */
    border-bottom-right-radius: 10px; /* 靠近內容側直角 */
    border-top-left-radius: 0px; /* 外側圓角 */
    border-bottom-left-radius: 0px; /* 外側圓角 */
}

/* 輪播指示器 */
.tiktok-carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.tiktok-indicator-dot {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid #aaa;
}

.tiktok-indicator-dot.active {
    background-color: #00f2ea; /* TikTok 風格的藍綠色 */
    transform: scale(1.2); 
    border-color: #00f2ea;
}


/* 響應式佈局控制 */

/* 桌面版 (> 1170px) */
@media (min-width: 1171px) { /* 從 1001px 改為 1171px */
    .tiktok-desktop-layout {
        display: block; /* 顯示桌面版容器 */
    }
    .tiktok-desktop-layout .tiktok-carousel-page {
        grid-template-columns: repeat(3, 1fr); /* 3 欄 */
    }
    .tiktok-desktop-layout .tiktok-carousel-button {
        padding: 15px 10px; 
        font-size: 24px;
    }
    .tiktok-desktop-layout .tiktok-indicator-dot {
        width: 12px;
        height: 12px;
    }
}

/* 平板版 (601px - 1170px) */
@media (min-width: 601px) and (max-width: 1170px) { /* 從 (min-width: 501px) and (max-width: 1000px) 改為 (min-width: 601px) and (max-width: 1170px) */
    .tiktok-tablet-layout {
        display: block; /* 顯示平板版容器 */
    }
    .tiktok-tablet-layout .tiktok-carousel-page {
        grid-template-columns: repeat(2, 1fr); /* 2 欄 */
        --tiktok-gap-x: 15px; 
    }
    .tiktok-tablet-layout .tiktok-carousel-container {
        padding: 0 10px; 
    }
    .tiktok-tablet-layout .tiktok-carousel-button {
        padding: 12px 8px; 
        font-size: 20px;
    }
    .tiktok-tablet-layout .tiktok-indicator-dot {
        width: 10px;
        height: 10px;
    }
}

/* 手機版 (<= 600px) */
@media (max-width: 600px) { /* 從 max-width: 500px 改為 max-width: 600px */
    .tiktok-mobile-layout {
        display: block; /* 顯示手機版容器 */
    }
    .tiktok-mobile-layout .tiktok-carousel-page {
        grid-template-columns: 1fr; /* 1 欄 */
        --tiktok-gap-x: 10px; 
    }
    .tiktok-mobile-layout .tiktok-carousel-container {
        padding: 0 5px; 
    }
    .tiktok-mobile-layout .tiktok-carousel-button {
        padding: 10px 6px; 
        font-size: 18px;
    }
    .tiktok-mobile-layout .tiktok-indicators {
        margin-top: 15px;
        gap: 8px;
    }
    .tiktok-mobile-layout .tiktok-indicator-dot {
        width: 8px;
        height: 8px;
    }
}





/* --------------------------------------活動專區 BANNER-------------------------------------- */

:root {
            --separator-thickness: 2px;
            --separator-color: #222d43;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding: 20px;
            max-width: 1300px;
            margin: 0 auto;
            position: relative;
        }

        /* 響應式布局 Media Queries */
        @media (max-width: 1200px) {
            .grid-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 850px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 500px) {
            .grid-container {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        /* Banner Link and Container Styles */
        .banner-link {
            display: block;
            text-decoration: none;
            color: inherit;
            margin: 0;
            padding: 0;
            border-bottom: var(--separator-thickness) solid var(--separator-color);
            padding-bottom: 22px;
            /* 隱藏所有項目，稍後用 JavaScript 顯示當前頁面項目 */
            display: none; /* <--- 新增: 預設隱藏所有項目 */
        }


        @media (max-width: 1200px) {
            .grid-container > .banner-link:nth-last-child(-n + 4):not(:nth-last-child(-n + 3)) {
                 border-bottom: var(--separator-thickness) solid var(--separator-color);
                 padding-bottom: 22px;
            }
            .grid-container > .banner-link:nth-last-child(-n + 3) {
                border-bottom: none;
                padding-bottom: 0;
            }
        }
        @media (max-width: 850px) {
            .grid-container > .banner-link:nth-last-child(-n + 3):not(:nth-last-child(-n + 2)) {
                 border-bottom: var(--separator-thickness) solid var(--separator-color);
                 padding-bottom: 22px;
            }
            .grid-container > .banner-link:nth-last-child(-n + 2) {
                border-bottom: none;
                padding-bottom: 0;
            }
        }
        @media (max-width: 500px) {
            .grid-container > .banner-link:nth-last-child(-n + 2):not(:nth-last-child(-n + 1)) {
                 border-bottom: var(--separator-thickness) solid var(--separator-color);
                 padding-bottom: 22px;
            }
            .grid-container > .banner-link:nth-last-child(-n + 1) {
                border-bottom: none;
                padding-bottom: 0;
            }
        }


        .banner-container {
            width: 100%;
            max-width: 320px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: box-shadow 0.3s ease-in-out;
        }

        /* Image and Red Section Styles */
        .image-wrapper {
            overflow: hidden;
        }

        .banner-image {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease-in-out;
        }

        .banner-link:hover .banner-image {
            transform: scale(1.05);
        }

        .red-section {
            background-color: #c00000;
            clip-path: polygon(
                0 20px,
                20px 0,
                100% 0,
                100% calc(100% - 20px),
                calc(100% - 20px) 100%,
                0 100%
            );
            -webkit-clip-path: polygon(
                0 20px,
                20px 0,
                100% 0,
                100% calc(100% - 20px),
                calc(100% - 20px) 100%,
                0 100%
            );

            min-height: 100px;
            padding: 20px;
            box-sizing: border-box;

            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease-in-out, clip-path 0.3s ease-in-out;
            -webkit-transition: background-color 0.3s ease-in-out, -webkit-clip-path 0.3s ease-in-out;
        }

        .red-section p {
            color: white;
            font-weight: bold;
            margin: 0;
            font-size: 24px;
            line-height: 1.3 !important;
            text-align: center;
            width: 100%;
            transition: color 0.3s ease-in-out;
			
			
			overflow: hidden; /* 隱藏超出容器的內容 */
    text-overflow: ellipsis; /* 當文字溢出時顯示省略號 */
    display: -webkit-box; /* 將容器顯示為彈性盒子 */
    -webkit-line-clamp: 2; /* 限制顯示的行數為 2 行 */
    -webkit-box-orient: vertical; /* 指定彈性盒子的方向為垂直 */
    word-break: break-all; /* 允許單詞在任意字符處斷開，以避免長單詞導致溢出 */
			
			 line-height: 1.5; /* 確保行高一致，根據您的設計調整 */
    max-height: 4em; /* 這裡的 3em 是假設 line-height: 1.5em，所以兩行就是 3em。
                         您也可以直接計算像素值：(font-size * line-height) * 2 */
    /* 舉例：如果 font-size 是 16px，line-height 是 1.5，則單行高 24px，兩行高 48px。
       您就可以寫 max-height: 48px; */
			
			
        }

        /* Hover Effects */
        .banner-link:hover .red-section {
            background-color: #fff;
        }

        .banner-link:hover .red-section p {
            color: #ef0707 !important;
        }

        /* Pagination Controls Styles */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 0;
            gap: 10px; /* 按鈕和頁碼之間的間距 */
        }

        .pagination-button {
            padding: 10px 15px;
            background-color: #333; /* 暗色背景 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .pagination-button:hover:not(:disabled) {
            background-color: #555;
        }

        .pagination-button:disabled {
            background-color: #666;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .page-numbers {
            display: flex;
            gap: 5px;
        }

        .page-number {
            padding: 8px 12px;
            background-color: #eee; /* 淺色背景 */
            color: #333;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .page-number:hover:not(.active) {
            background-color: #ddd;
        }

        .page-number.active {
            background-color: #c00000; /* 當前頁碼使用紅色 */
            color: white;
            border-color: #c00000;
            cursor: default;
            font-weight: bold;
        }

/* 新增的「敬請期待」BANNER 樣式 */
.banner-link-coming-soon .coming-soon-container {
    background-color: #8d8d8d;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.banner-link-coming-soon .coming-soon-container p {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    margin: 0;
    line-height: 1.3 !important;
    z-index: 1;
    transition: color 0.3s ease-in-out;
}


.grid-container {
    display: grid;
    /* 預設欄位數，例如大螢幕 */
    grid-template-columns: repeat(4, 1fr); /* 4 欄 */
    gap: 20px; /* 項目之間的間距 */
}

@media (max-width: 1200px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr); /* 中等螢幕 3 欄 */
    }
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 平板螢幕 2 欄 */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: repeat(1, 1fr); /* 手機螢幕 1 欄 */
    }
}


/* 預設隱藏上方分頁控制項 */
.pagination-controls-top {
    display: none;
}

/* 當螢幕寬度小於等於 768px 時顯示上方分頁控制項 */
@media (max-width: 768px) {
    .pagination-controls-top {
        display: flex; /* 確保它能正常排列按鈕和頁碼 */
        justify-content: center; /* 水平置中 */
        align-items: center; /* 垂直置中 */
        margin-bottom: 0px; /* 與下方內容保持間距 */
        margin-top: 0px; /* 與上方標題保持間距，如果需要 */
		
		padding: 20px 0;
		gap: 10px;
		
    }
	

	
}


/* =============================================================== */
/* ====== 2025.06.29 - page-4 固定 YouTube 影片區塊樣式 START ====== */
/* =============================================================== */

/* 固定 YouTube 影片的網格容器 */
.fixed-youtube-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC 版預設為 2 欄 */
    gap: 30px; /* 影片之間的間距 */
    width: 100%; /* 確保佔滿 page-4 .content 的寬度 */
    max-width: 1500px; /* 根據 page-4 .content 的 max-width 調整 */
    margin: 30px auto; /* 上下邊距，左右自動置中 */
    padding: 0 10px; /* 為防止邊緣影片太貼邊，左右留一點內邊距 */
}

/* 每個 YouTube 影片項目 */
.fixed-youtube-grid .youtube-item {
    position: relative;
    width: 100%;
    /* 保持 16:9 影片比例 (高 / 寬 = 9 / 16 = 0.5625) */
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden; /* 確保 iframe 不會溢出 */
    background-color: #000; /* 影片載入前的背景色 */
    border-radius: 8px; /* 圓角效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 輕微陰影 */
}

/* 確保 iframe 填滿父容器並正確顯示 */
.fixed-youtube-grid .youtube-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* 移除 iframe 預設邊框 */
}

/* 手機版適應：當螢幕寬度小於 500px 時，變成 1 欄 */
@media (max-width: 600px) {
    .fixed-youtube-grid {
        grid-template-columns: 1fr; /* 變成 1 欄 */
        gap: 20px; /* 影片之間的間距可調整 */
        padding: 0 0px; /* 增加手機版左右邊距 */
    }
}

/* =============================================================== */
/* ====== page-4 固定 YouTube 影片區塊樣式 END ====== */
/* =============================================================== */



/* ========================修正寬度比較小時的標題高度(因為內容多導致OP)======================================= */

@media (max-width: 850px) {
	#page-3 .content .page-title-block-wrapper {
        margin-top:8%!important;
    }
	
	#page-4 .content .new-page-title-block-wrapper {
        margin-top:8%!important;
    }
	
	#page-5 .content .new-page-title-block-wrapper {
        margin-top:8%!important;
    }
}
/* ========================修正寬度比較小時的標題高度(因為內容多導致ED)======================================= */