/* 引入華康儷中宋 */
@font-face {
    font-family: 'LiSong';
    src: url('./fonts/DFFN_N5.TTC') format('collection'),
         url('./fonts/DFFN_N5.TTC') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 引入 Arial (雖然系統通常內建，但若要確保版本一致可自行引入) */
@font-face {
    font-family: 'CustomArial';
    src: url('./fonts/Arial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 引入 Futura (圖片中看到的另一個字體) */
@font-face {
    font-family: 'FuturaStd';
    src: url('./fonts/FuturaStdLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
:root {
    --primary-zh: 'LiSong', "Microsoft JhengHei", serif;
    --primary-en: 'FuturaStd', 'CustomArial', Arial, sans-serif;
}

body {
    font-family: var(--primary-zh);
    -webkit-font-smoothing: antialiased; /* 讓細體字更清晰 */
}

/* 英文大標題使用 Futura 或 Arial */
.en-title, .coming-soon, .email, footer {
    font-family: var(--primary-en);
}
/* 基礎設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    /* 中文字體設定：華康儷中宋(P) */
    font-family: "LiSong Pro", "華康儷中宋", "Apple LiSung", serif;
    background-color: #fff;
    color: #231815;
}

/* 英文標題專用字體 */
.en-title, .coming-soon {
    width:96%;
}
.en-title{margin-bottom:32px;}
.en-title img{width:100%;}
/* 滿版容器 */
.container {
    display: flex;
    min-height: calc(100vh - 296px); /* 滿版高度 */
    width: 100%;
}

/* 三欄基礎樣式 */
.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;     /* 水平居中 */
    text-align: center;
    padding:100px 40px 0px 40px;
    position: relative;
    border-right: 1px solid #231815; /* 分隔線 */
}
.content{width:100%;}
.column:last-child {
    border-right: none;
}

/* 各區塊顏色區分 */
.staffing{background: url(./images/bg-1.png) no-repeat;background-size: cover;}

.exclusive{background: url(./images/bg-2.png) no-repeat;background-size: cover;}

.academy{background: url(./images/bg-3.png) no-repeat;background-size: cover;}

/* 內容文字樣式 */
h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    letter-spacing: 2px;font-family:'LiSong', serif;
}
h3 samp{font-family: Arial, sans-serif;font-weight:400;}
p {
    line-height: 1.8;
    font-size:1rem;
    color: #231815;
}

.coming-soon {
    margin-top:40px;
    font-size: 2rem;
    color: #4a4b96;font-family: 'FuturaStd', serif; /* 預設中文 */font-weight:300;
}

/* 底部 Email */
.email {
    position: absolute;
    bottom: 50px;
    text-decoration: none;
    color: #231815;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
}

footer {
    position: fixed;
    width: 100%;bottom:0;
    text-align: center;
    font-size: 0.7rem;padding:20px 0;
    font-family: Arial, sans-serif;
    color: #999;background-color:#fff;
}
footer p{font-size: 0.9rem;}
/* Logo 區域容器 */
.top-banner {
    display: flex;
    align-items: center;
    width: 100%;
    padding:10px 0 60px 0;
    background-color: #fff;
}

/* 兩側的橫線 */
.line {
    flex: 1; /* 自動填滿剩餘空間 */
    height: 1px;
    background-color: #4a4b96; /* 根據圖片顏色調整 */
}

/* Logo 樣式 */
.logo {
    padding: 0 15px; /* 線條與文字間的間距 */
    text-align: center;
    font-family: Arial, sans-serif;
    color: #4a4b96;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo .ra {
    font-size: 1.2rem;
    letter-spacing: 2px;
    border-bottom: 2px solid #4a4b96; /* 中間那條小短線 */
    padding-bottom: 2px;
}

.logo .w {
    font-size: 1.2rem;
    padding-top: 2px;
}

/* 調整原本 container 的高度，扣除 header 的空間 */
.container {
    display: flex;
    min-height: calc(100vh - 196px); /* 扣除頂部高度 */
    width: 100%;
}
/* 響應式設計：手機版轉為垂直排列 */
@media (max-width:768px) {
    .container {
        flex-direction: column;min-height: auto;
    }
    .column {
        min-height: 60vh; /* 手機版每一格也保有一定高度 */
        border-right: none;
        border-bottom:none;position: relative;
    }
  .column::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* 控制線條寬度與粗細 */
  width: 80%;          /* 設定為 80% 或固定像素（如 300px），使其不滿版 */
  height: 1px;         /* 線條粗細 */
  background-color: #231815; /* 線條顏色 */
  
  /* 置中關鍵 */
  margin: 0 auto;      
}
    .en-title {
        font-size: 2rem;
    }
    .email {
        position: static;
        margin-top: 20px;
    }
    .container {
  display: flex;
  flex-direction: column; /* 垂直堆疊 */
}

.exclusive {
  order: 1; /* 設定為第 1 個出現 */
}
.staffing {
  order: 2; /* 設定為第 2 個出現 */
}
.academy {
  order: 3; /* 設定為第 3 個出現 */
}
.column{padding:12px 8px 32px 8px;min-height: auto;}

footer{padding: 20px 0;position: relative;}

.top-banner {
    padding:32px 0;
}
/* 各區塊顏色區分 */
.staffing{background:none;}

.exclusive{background:none;}

.academy{background:none;}

.rwd-bg{background: url(./images/rwd-bg.png) no-repeat;background-size: cover;}
.en-title, .coming-soon {
    width: 100%;
}
p {
    line-height: 1.8;
    font-size:0.9rem;
    color: #231815;
}
}