/* 全站通用設定 */
body {
    margin: 0;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    background: #eef2fa;
    color: #1D3659;
    line-height: 1;

    /* 新增底圖設定：使用 aboutBack.png 作為背景圖片 */
    /* background-image: url(/images/aboutBack.png); */
    background-image: url(/images/aboutOcean_BG.svg);
    /* 確保圖片放置於 public/images 目錄下 */
    background-size: 76vw;
    /* 讓背景圖片填滿整個區塊 */
    background-repeat: no-repeat;
    /* 不要重複出現圖片 */
    background-position: center 2vw;
    /* 圖片置中上方對齊 */
    background-color: rgb(235, 239, 252);
    /* 圖片載入前的底色 */
    /* background-attachment: fixed; */
    /* 背景圖片固定，不會被推動 */
}

h1,
h2,
h3,
h4,
h5,
h6,
.block>b,
.block>strong {
    color: #1D3659;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
}

/* 頁首區域設定 */
header {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #cccccc;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}

.logo img {
    height: 36px;
}

/* 導覽連結樣式 */
nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #375a8c;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline;
}

/* 搜尋框樣式 */
.search-bar input {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #cccccc;
}

/* 主內容區塊 */
main {
    padding: 40px 20px;
    max-width: 960px;
    margin: auto;
}

/* 首段簡介排版 */
.intro {
    padding: 40px 20px;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    line-height: 1.8;
    font-size: 1.05rem;
    /* color: #1a1a1a; */
    font-family: 'Segoe UI', sans-serif;
}

/* .intro-section h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #0a2c4a;
}

.intro-section h2 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1d3557;
    margin-bottom: 24px;
} */

.intro-section p {
    margin-bottom: 20px;
    padding: 0 10px;
}

/* LOGO 圖示 */
.main-logo {
    width: 20vw;
    margin-bottom: 20px;
}

.intro h1 {
    font-size: 3rem;
    margin: 0;
}

.intro h2 {
    font-weight: bolder;
    color: #375a8c;
    font-size: 1.6rem;
    margin-top: 10px;
}

.intro h3 {
    font-weight: 400;
    font-size: 1.5rem;
    margin-top: 5px;
}

.intro p {
    color: #1D3659;
    text-align: left;
    font-size: 1.4rem;
    margin: 40px 10px;
}

.gap{
height:14vw;
}

/* 關於我們與支援單位區塊 */
.about-us,
.support {
    background: rgba(216, 224, 250, 0.5);
    /* 淺藍半透明背景 */
    padding: 24px 32px;
    border-radius: 12px;
    margin-top: 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 區塊標題樣式 */
.about-us h3,
.support h3 {
    color: #375aee;
    font-size: 1.25rem;
    margin-bottom: 20px;
}

/* 關於我們的排列 */

.about-us h3,
/* 關於我們的排列（修正圖片與文字垂直對齊） */
.about-box {
    display:flex;
    align-items: center;     /* 讓圖與文字垂直對齊 */
    gap: 2vw;
    flex-wrap: nowrap;        /* 避免換行造成下推 */
    padding-top: 0;               /* 移除內距 */
    margin-top: 0;                /* 移除外距 */
    line-height: 1.6;
}

/* 限制圖片最大高度，並置中顯示 */
.about-box img {
    max-height: 256px;        /* 圖片不會超高 */
    width: auto;
    /* display: block; */
    /* flex-shrink: 0; */
    /* margin-top: 0; */
    /* padding-top: 0; */
}

/* 右側文字欄 */
.about-box div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;   /*垂直置中文字 */
    margin-top: 0;
    padding-top: 0;
}

#aboutPHDc {
    color: #456BE6;
}

#visitPage{
    color: #1D3659;
    align-self: flex-end; /* 讓按鈕在 flex 區塊中靠右 */
}

.about-box a {
    display: inline-block;
    margin-top: 10px;
    color: #375aee;
    font-weight: bold;
    text-decoration: none;
}

.about-box a:hover {
    text-decoration: underline;
}

/* 外層區塊：讓文字與 logo 區整體置中 */
.support-logos {
    display: flex;                /* 使用 flex 排列 */
    align-items: center;         /* 垂直置中對齊 */
    justify-content: flex-start; /* 靠左排列所有 logo */
    gap: 48px;                   /* logo 之間的間距 */
    flex-wrap: nowrap;           /* 不換行排列 */
    padding-left: 4px;           /* 微調與文字對齊 */
}

/* LOGO 圖示統一高度 */
.support-logos img {

    height: auto;                /* 高度自動縮放保持比例 */
    object-fit: contain;         /* 保持比例 */
    display: block;              /* 移除底部空隙 */
}

#nstc{
    width:60%;
}

#amgen{
    padding-top:2%;
}

/* 頁尾樣式 */
.custom-footer {
    background-color: #1d3557;
    text-align: center;
}

.custom-footer img {
    max-width: 100px;
    height: auto;
    display: inline-block;
}

/* 響應式設定 */
@media (max-width: 768px) {

    .about-box,
    .support-logos {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-box img,
    .support-logos img {
        margin-bottom: 10px;
    }

    .about-box div {
        align-items: center;
    }

     /*
        footer 本體
        增加上下內距
        讓深藍底更厚
    */
    .custom-footer {
        padding-top: 2vh;
        padding-bottom: 2vh;
    }

    /*
        footer logo
        原本 max-width 100px
        手機改為約兩倍
        同時保留自動縮放避免超出
    */
    .custom-footer img {
        max-width: none;
        width: 20vw !important;
        height: auto;
        margin-top: 0;
    }
}