/* ==========================================
   1. 尺寸規格調整 (Figma 滿版 1730px / 內頁 1200px)
   ========================================== */

/* 【外層滿版】上限為 1730px */
.full-page-section {
    width: 100%;
    max-width: 1730px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    scroll-margin-top: 60px;
    z-index: 1; /* 基礎層級 */
}

.full-page-section.bg-FAF4ED {
    background-color: #FAF4ED !important;
}

.full-page-section.bg-F6FAF5 {
    background-color: #F6FAF5 !important;
}

.full-page-section.bg-E6E0D5 {
    background-color: #E6E0D5 !important;
}

.full-page-section.bg-liner-FAFAF5-E6E0D5 {
    background: linear-gradient(0deg, #FAFAF5 2%, #E6E0D5 100%);
}


/* 【內層容器】對齊 Figma 1200px */
.page-content-area,
div.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.top-content-wrapper {
    padding: 0;
    margin: 0 auto 25px auto;
    width: 100%;
    position: relative; /* 建立內容區域的定位參考點 */
}


/* ==========================================
   2. Uancircle 中層裝飾背景 (CSS 偽元素做法)
   ========================================== */

/* 標題外層容器：建立定位參考與堆疊上下文 (Stacking Context) */
div.uancircle-title-area {
    position: relative !important;
    display: block !important;
    z-index: 1 !important;           /* 基礎層級 */
    min-height: 80px !important;
    padding: 10px 0 0 10px !important;
    overflow: visible !important;
}

/* 【中層圓圈裝飾圖】：透過 ::before 產生，層級設為 1 */
div.uancircle-title-area::before {
    content: "" !important;
    position: absolute !important;

    /* 調整圓圈出現的位置與大小 */
    top: -75px !important;            /* 向上偏移 */
    left: 0 !important;           /* 向左偏移 */
    width: 500px !important;          /* 圓圈寬度 */
    height: 300px !important;         /* 圓圈高度 (或按圖片比例調整) */

    /* 引進背景圖片 */
    background-image: url('../img/Uancircle1.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;

    /*background-size:  auto;*/
    /*background-position: 0 200px;*/
    flex-grow: 0;
    /*position: relative;*/
    /*z-index: 2;*/
    padding: 275px 0 0 0;

    /* 層級設定 */
    z-index: 1 !important;            /* 中層：高於 Section 背景，低於 h2 文字 */
    pointer-events: none !important;  /* 穿透點擊 */
}

/* 【最上層標題文字】：z-index 提升至 10，確保永遠在圓圈上方 */
div.uancircle-title-area h2.section-title-jump-link {
    position: relative !important;
    z-index: 10 !important;           /* 最高層級 (10 > 1) */
    color: #604039 !important;
    font-size: 2rem !important;
    font-weight: bold !important;
    /*margin: 0 !important;*/
    display: inline-block !important;
    /*padding-top: 20px !important;*/
    padding-left: 10px !important;

    left: -20px !important;
    top: 20px !important;
}


/* 【最上層內容區】：確保包含 UHIS1.png 圖片及下方文字的容器層級高於裝飾圖 */
.section-heading,
.quality-title,
.quality-subtitle,
.quality-tags,
.quality-content,
.section5-col,
.row.align-items-center {
    position: relative !important;
    z-index: 5 !important;            /* 高於裝飾圖 (5 > 1)，確保圖片與文字不會被蓋住 */
}


/* ==========================================
   3. 頁面其他元件
   ========================================== */

.quality-subtitle {
    color: #EE862D;
    font-size: 36px;
    line-height: 44px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
}

.quality-title {
    color: #339AAA;
    font-size: 42px;
    line-height: 48px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 50px;
}

.quality-tags {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.quality-tag {
    width: 150px;
    height: 100px;
    background: #9CB47C;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    transform: rotate(-15deg);
}

.quality-tag span {
    transform: rotate(15deg);
}

.quality-content {
    /*color: #000000;*/
    /*font-weight: 700;*/
    /*font-size: 24px;*/
    /*line-height: 45px;*/
    text-align: left;
    /*margin-bottom: 60px;*/
}

/* ==========================================
   Section 2 條列式清單 (純 div 版，一條一條往下排)
   ========================================== */
.section2-place {
    position: relative !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 底圖 (UHIS08.png) */
.section2-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.section2-movie {
    position: absolute;
    z-index: 5;
    left: 18%;
    bottom: 25%;

    width: 59%;
    height: auto;
}

/* 1. 外層容器：讓 6 個項目垂直往下排列 */
.section2-feature-list {
    display: flex;
    flex-direction: column;   /* 垂直一條一條排下來 */
    gap: 15px;                /* 每個項目之間的垂直間距 */
}

/* 2. 單一條列項目：高度 90px，水平並排 Icon 與文字 */
.section2-feature-item {
    display: flex;
    align-items: center;      /* Icon 與文字垂直居中對齊 */
    height: auto !important;
    min-height: 90px;
    gap: 20px;                /* Icon 與右側文字之間的距離 */
    box-sizing: border-box;
}

/* 3. 小 Icon 樣式 */
.section2-feature-icon {
    width: 50px;              /* Icon 寬度 */
    height: 50px;             /* Icon 高度 */
    object-fit: contain;      /* 確保圖片不變形 */
    flex-shrink: 0;           /* 強制 Icon 不會被擠壓 */
}

/* 4. 右側文字樣式 */
.feature-text {
    margin: 0;
    padding: 0;
}

.feature-text p {
    color: #333333;
    font-size: 32px !important;  /* 指定文字大小 32px */
    font-weight: bold;
    line-height: 1.2;
    margin: 0;                   /* 清除 p 標籤預設外距 */
}


/* ==========================================
   Section 3
   ========================================== */
/* 1. 卡片外層容器：負責自動換行與拉開上下/左右間距 */
.section3-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;      /* 強制自動換行 */
    justify-content: center;          /* 換行後卡片整體居中 */
    gap: 24px 16px !important;       /* [上下間距 24px] [左右間距 16px] */
    width: 100%;
    height: auto !important;          /* 確保容器高度由卡片自動撐開 */
    box-sizing: border-box;
}

/* 2. 單個卡片：死死固定在 230pt */
.section3-card {
    display: flex;
    flex-direction: column;          /* 由上到下排列 */
    align-items: center;             /* 水平居中 */
    text-align: center;              /* 文字居中 */

    /* 強制固定寬度 230pt */
    flex: 0 0 230pt !important;
    width: 230pt !important;
    max-width: 230pt !important;

    padding: 24px 16px;             /* 卡片內部留白 */
    background-color: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
}

/* 3. Icon 居中 */
.section3-card-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin: 0 auto 15px auto;
    display: block;
}

/* 4. 小標題居中 */
.section3-card-title {
    font-size: 18px;
    font-weight: bold;
    color: #222222;
    margin: 0 0 10px 0;
    line-height: 1.3;
    text-align: center;
    width: 100%;
}

/* 5. 內容說明居中 */
.section3-card-desc {
    font-size: 16px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* ==========================================
   Section 5 樣式 (兩欄、帶背景色標題、Icon+文字置左)
   ========================================== */


/* 1. 兩欄容器 (Flexbox 自動適應，手機版自動切換為上下排列) */
.section5-two-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;                /* 左右兩欄之間的間距 */
    width: 100%;
    box-sizing: border-box;
}

/* 2. 單一欄位設定 (平分 50% 寬度) */
.section5-col {
    flex: 1 1 300px !important;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
}

/* 3. 標題 (有背景顏色 + 置中) */
.section5-title-box {
    width: 100%;
    background-color: #604039;  /* 標題背景顏色 (可更改為想要的顏色) */
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;         /* 標題文字置中 */
    margin-bottom: 20px;
}

.section5-title-box.gray{
    background-color: #918F8D !important;
}
.section5-title-box.blue{
    background-color: #008195 !important;
}

.section5-title-box h3 {
    color: #ffffff;             /* 標題文字顏色 */
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
}

/* 4. 中間圖片 (置中) */
.section5-img-box {
    width: 100%;
    display: flex;
    justify-content: center;   /* 圖片水平置中 */
    margin-bottom: 24px;
}

.section5-img-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

/* 5. 下方條列式 Icon + 文字 (區域與內容一律【置左】) */
.section5-feature-list {
    width: 100%;                /* 撐滿欄位寬度 */
    display: flex;
    flex-direction: column;
    gap: 16px;                  /* 條列項目之間的上下間距 */

    /*padding-left: 40pt;*/
    box-sizing: border-box;
}

/* 單一條列項目 (Icon 與文字水平靠左並排) */
.section5-feature-item {
    display: flex;
    align-items: center;        /* Icon 與文字垂直對齊中線 */
    justify-content: flex-start;/* 內容靠左對齊 */
    gap: 12px;                  /* Icon 與文字之間的右側間距 */
    text-align: left;           /* 文字靠左 */
}

/* 條列 Icon 尺寸 */
.section5-feature-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;             /* 防止 Icon 被壓縮 */
}

/* 條列文字樣式 */
.section5-feature-text {
    font-size: 18px;
    color: #333333;
    line-height: 1.5;
    margin: 0;
    text-align: left;           /* 文字明確靠左 */
}