/* ==================== 自訂游標球（桌面版） ==================== */
/* position: fixed，pointer-events: none 確保不阻擋點擊 */
.cursor-ball {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: var(--primary-red);
    pointer-events: none;
    z-index: 9999;
    /* navbar(1000) 之下 */
    top: 0;
    left: 0;
    will-change: transform;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cursor-ball.visible {
    opacity: 1;
}

/* hover <a> 時：球淡出，游標恢復 pointer */
.cursor-ball.on-link {
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

@media (min-width: 1025px) {

    body.cursor-on-link *,
    body.cursor-on-link {
        /* cursor: pointer !important; */
        cursor: normal;
    }
}

/* 桌面版隱藏原生游標（手機版保留正常游標） */
@media (min-width: 1025px) {

    body,
    a,
    button,
    [role="button"],
    .nav-link,
    .faq-item,
    summary {
        /* cursor: none; */
        /* 隱藏效果 */
        cursor: normal;
    }
}

::selection {
    background-color: var(--primary-red);
    color: var(--white);
}


/* 針對 Firefox 瀏覽器需要加上前綴 */
::-moz-selection {
    background-color: var(--primary-red);
    color: var(--white);
}

/* ==================== CSS Variables ==================== */
:root {
    --bg-white: #fafbfb;
    --aux-grey: #bdbdbd;
    --primary-red: #e41e26;
    --text-dark: #1a1a1a;
    --text-grey: #666;
    --text-light: #999;
    --white: #ffffff;
    --black: #000000;
    --container-width: 48rem;
    /* 1920px / 20 = 48rem */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease;
}

/* ==================== Reset & Base ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
}

html {
    scroll-behavior: smooth;
    /* 防止 iOS Safari/Chrome 自動放大文字尺寸 */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--white);
}

body {
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
    min-width: 320px;
}

a {
    color: var(--primary-red);
    text-decoration: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;

}

/* ==================== Navigation Bar ==================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 1.2rem;
    transition: var(--transition-smooth);
    background-color: transparent;
    display: flex;
    align-items: center;
}

.navbar.scrolled {
    background-color: rgba(250, 251, 251, 0.98);
    backdrop-filter: blur(0.25rem);
    box-shadow: 0 0.05rem 0.5rem rgba(0, 0, 0, 0.08);
}

.nav-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    /* border-bottom: 1px solid rgba(134, 134, 134, 0.1); */
}

.nav-logo {
    padding-left: 1.35rem;
    /* 桌面版：240px */
}

.nav-logo .logo-placeholder {
    display: none;
}

.logo-img {
    width: 2.72rem;
    /* 272px */
    height: 0.7rem;
    /* 70px */
    display: block;
    object-fit: contain;
}

/* 平板版 Logo 調整 */

/* 手機版 Logo 調整 */

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0;
    /* v2_01: 移除 gap，由個別項目處理間距 */
    align-items: end;
    height: 100%;
}

/* 桌面版隱藏移動版專屬元素 */
.mobile-menu-header,
.mobile-cta,
.mobile-social,
.mobile-only {
    display: none;
}

/* 移動版隱藏桌面版專屬元素 */

.nav-menu li:not(.nav-item-btn) {
    margin-right: 0.75rem;
    padding-left: 0.16rem;

    /* v1 基礎間距 */
    line-height: 100%;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.2rem;
    /* 20px */
    letter-spacing: 0.05rem;
    /* 4px */
    transition: var(--transition-fast);
    position: relative;
    /* padding-left: 0.5rem; */
    /* 補償 letter-spacing 寬度 */
    margin-bottom: 0.05rem;

}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -0.125rem;
    /* 5px / 20 = 0.125rem */
    left: 0;
    width: 0;
    height: 0.05rem;
    /* 2px / 20 = 0.05rem */
    background-color: var(--primary-red);
    transition: var(--transition-fast);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--primary-red);
}

/* 導覽列按鈕樣式 */
.nav-item-btn {
    height: 100%;
}

.nav-btn-dark,
.nav-btn-red {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    /* 100px */
    height: 1.2rem;
    /* 100px */
    padding: 0 !important;
    gap: 0.1rem;
    border-radius: 0;
    font-weight: 500;
}

.nav-btn-dark .material-symbols-outlined,
.nav-btn-red .material-symbols-outlined {
    font-size: 0.45rem;
    /* v2_01 規範 */
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.nav-btn-dark span:not(.material-symbols-outlined),
.nav-btn-red span:not(.material-symbols-outlined) {
    font-size: 0.16rem;
    font-weight: 500;
    letter-spacing: 0.025rem;
}

.nav-btn-dark {
    position: relative;
    overflow: hidden;
    background-color: #29292a;
    color: var(--white) !important;
    border: none;
    transition: color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 0;
}

.nav-btn-dark::after {
    display: none;
}

.nav-btn-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--white);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
    border-radius: 50%;
}

.nav-btn-dark:hover {
    color: var(--primary-red) !important;
}

.nav-btn-dark:hover::before {
    transform: scale(1.5);
}

.nav-btn-red {
    position: relative;
    overflow: hidden;
    background-color: var(--primary-red);
    color: var(--white) !important;
    border: none;
    transition: color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 0;
}

.nav-btn-red::after {
    display: none;
}

.nav-btn-red::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--white);
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
    border-radius: 50%;
}

.nav-btn-red:hover {
    color: var(--primary-red) !important;
}

.nav-btn-red:hover::before {
    transform: scale(1.5);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    /* 48px 符合 Android 觸控標準 */
    height: 48px;
    cursor: pointer;
    gap: 6px;
    /* 6px / 20 = 0.15rem */
    background: none;
    border: none;
    padding: 0;
    position: relative;
    z-index: 9999;
    /* 高於選單 */
    margin-right: 0.25rem;
}

.hamburger .bar {
    width: 24px;
    /* 0.6rem */
    height: 2px;
    /* 0.05rem */
    background-color: var(--text-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* 選單背景遮罩 */
.menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 998;
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ==================== Hero Section ==================== */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #e0e0e0;
}

.hero-video {
    width: 100.1%;
    height: 100.1%;
    object-fit: cover;
    object-position: center;
    transform-origin: right bottom;
}

/* 影片載入前的佔位圖樣式 */
.hero-video[poster] {
    background-size: cover;
    background-position: center;
}

/* 影片降級備用圖片 */
.video-fallback {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 當影片無法播放時，顯示備用圖片 */
.hero-video-container.fallback .hero-video {
    display: none;
}

.hero-video-container.fallback .video-fallback {
    display: block;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 0.875rem, rgba(189, 189, 189, 0.1) 0.875rem, rgba(189, 189, 189, 0.1) 1.75rem);
    /* 35px, 70px */
}

.hero-content {
    text-align: left;
    z-index: 10;
    animation: fadeInUp 1.2s ease-out;
    max-width: var(--container-width);
    width: 100%;
    padding-left: 1.4rem;
    padding-top: 0.6rem;
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* margin-bottom: 1rem; */
    /* 40px / 20 = 1rem */
    /* max-width: 36rem; */
    /* 1440px / 20 = 36rem */
}

.hero-title-small {
    font-size: 0.6rem;
    /* 50px */
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 0.1rem;
    letter-spacing: 0.05rem;
    /* 4px */
    font-family: 'Noto Sans TC', sans-serif;
    padding-left: 0.05rem;
    line-height: 0.9;

}

.hero-title-main {
    font-size: 1rem;
    /* 120px */
    font-weight: 700;
    /* v2_01 規範 */
    letter-spacing: -0.05rem;
    color: var(--text-dark);
    line-height: 0.9;
    font-family: 'Montserrat', sans-serif;

}

.hero-title-highlight {
    font-size: 1rem;
    /* 120px */
    font-weight: 700;
    letter-spacing: -0.05rem;
    color: var(--primary-red);
    line-height: 0.9;
    font-family: 'Montserrat', sans-serif;

}

/* ── Text Scramble 效果 ── */
/* 亂碼過渡中的隨機字元：半透明紅色，帶有科技感 */
.scramble-char {
    color: var(--primary-red);
    opacity: 0.45;
    display: inline-block;
}

/* 進場前：隱藏（預備些亂碼登場） */
.hero-title-small,
.hero-title-main,
.hero-title-highlight {
    opacity: 0;
    /* 移除 translateY：避免不同時跟亂碼擞返 */
    transition: opacity 0.5s ease, filter 0.5s ease;
}

/* 淡入可見（準備發出亂碼） */
.hero-title-small.scramble-done,
.hero-title-main.scramble-done,
.hero-title-highlight.scramble-done {
    opacity: 1;
}

/* 亂碼進行中：模糊效果（解碼完成後構向 blur(0)） */
.hero-title-main.scrambling,
.hero-title-highlight.scrambling {
    filter: blur(5px);
}

/* 亂碼結束：清晰聲現，filter 有 transition 會平滑過渡 */
.hero-title-main:not(.scrambling),
.hero-title-highlight:not(.scrambling) {
    filter: blur(0);
}


.btn-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--primary-red);
    border: 2px solid var(--primary-red);
    width: 3rem;
    height: 0.9rem;
    text-decoration: none;
    border-radius: 1rem;
    /* 圈形圓角 */
    transition: color 0.35s ease;
    letter-spacing: 0.02rem;
    font-weight: 600;
    margin: 0 auto;
    z-index: 0;
}

/* 填充動畫層（scale 彈跳） */
.btn-final::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background-color: var(--primary-red);
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
}

.btn-final:hover {
    color: var(--white);
}

.btn-final:hover::before {
    transform: scale(1);
}

.btn-final span:not(.material-symbols-outlined) {
    font-size: 0.35rem;
    font-weight: 700;
    font-family: 'Noto Sans TC', sans-serif;
    position: relative;
    z-index: 1;
    margin-bottom: 0.05rem;
}

.btn-final.material-symbols-outlined {
    font-size: 0.4rem;
    margin-bottom: 0.05rem;
}

.btn-final .material-symbols-outlined {
    font-size: 0.4rem;
    position: relative;
    z-index: 1;

}

/* ==================== CTA Section ==================== */
.section-cta {
    text-align: center;
    padding: 3rem 0;
    background-color: rgba(255, 255, 0255, 0.9);
}

.cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;

}

.cta-icon {
    width: 2.5rem;
    height: auto;

}

.cta-icon img {
    width: 2.5rem;
    height: auto;
}

.cta-title {
    font-size: 0.4rem;
    font-weight: 700;
    color: var(--primary-red);
    margin: 0;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 0.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

#cta {
    padding: 1rem 0rem 1.5rem 0rem;
}


.btn-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--primary-red);
    border: 2px solid var(--primary-red);
    width: 3rem;
    height: 0.9rem;
    text-decoration: none;
    border-radius: 1rem;
    transition: color 0.35s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    letter-spacing: 0.02rem;
    font-weight: 600;
    margin-top: 0.25rem;
    z-index: 0;
    /* 初始隱藏：等亂碼動畫跑完才出現 */
    opacity: 0;
    transform: translateY(0.4rem);
}

/* 亂碼動畫結束後由 JS 加入此 class */
.btn-hero.btn-hero-visible {
    opacity: 1;
    transform: translateY(0);
}

.btn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background-color: var(--primary-red);
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
}

.btn-hero span:not(.material-symbols-outlined) {
    font-size: 0.35rem;
    font-weight: 700;
    font-family: 'Noto Sans TC', sans-serif;
    position: relative;
    z-index: 1;
    margin-bottom: 0.05rem;
}

.btn-hero .material-symbols-outlined {
    font-size: 0.4rem;
    position: relative;
    z-index: 1;
}

.btn-hero:hover {
    color: var(--white);
}

.btn-hero:hover::before {
    transform: scale(1);
}

.scroll-indicator {
    position: absolute;
    bottom: 0.02rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    cursor: pointer;
}

.scroll-text {
    font-size: 0.2rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    color: var(--primary-red);

}

.scroll-line {
    position: relative;
    overflow: hidden;
    width: 0.02rem;
    height: 0.5rem;
    background-color: rgba(228, 30, 38, 0);
    /* 淡紅底色 */
}

/* 掃描光块：從上到下持續往下移動 */
.scroll-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 55%;
    background: rgba(228, 30, 38, 1);
    animation: scrollScan 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==================== Section Styles ==================== */
.section {
    padding: 2rem 0;
}

.section-header {
    text-align: center;
    line-height: 1.2;
}

.section-title {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    color: var(--primary-red);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* 初始：等待捲動進場時隱藏 */
    opacity: 0;
    transform: translateY(0.3rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* section-header 進場後觸發 scramble-ready/done 讓標題淡入 */
.section-title.scramble-done {
    opacity: 1;
    transform: translateY(0);
}


.section-subtitle {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.1rem;
}

/* ==================== Company Section ==================== */
.section-company {
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    z-index: 1;
    transition: background-color 0.4s ease;

}

.section-company.transparent-bg {
    background-color: rgba(255, 255, 255, 0.6);
}

.company-content {
    max-width: 12rem;
    margin: 0.5rem auto;
    text-align: center;
}

.company-text p {
    line-height: 2;
    color: var(--text-dark);
    font-size: 0.2rem;
    font-weight: 500;
}

/* ==================== Intro Section ==================== */
.section-intro {
    background-color: var(--bg-white);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* 點陣動畫背景 */
.particle-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* 必須能接收交互事件 */
    pointer-events: auto;
}

.section-intro .container {
    position: relative;
    z-index: 1;
}

.intro-content {
    max-width: 12rem;
    margin: 0.5rem auto;
    text-align: center;
}

.intro-main {
    font-size: 0.2rem;
    line-height: 2;
    color: var(--text-grey);
    margin: 0 auto;
    font-weight: 500;
}

.intro-note {
    font-size: 0.2rem;
    line-height: 1.6;
    color: var(--black);
    margin-bottom: 1rem;
    font-weight: 500;
}

.salary-highlight {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.2rem;
    background-color: var(--white);
    margin: 0.5rem 0 0.25rem 0;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.05);
    border-radius: 0.2rem;
}

.salary-label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.4rem;
}

.salary-amount {
    font-size: 0.4rem;
    /* 40px / 20 = 1rem */
    font-weight: 800;
    color: var(--primary-red);
}

.salary-note {
    color: var(--text-grey);
    font-size: 0.2rem;
    /* 18px / 20 = 0.45rem */
}

/* ==================== Highlights ==================== */
.highlights-section {
    cursor: normal;
    margin-top: 2rem;
    /* 80px / 20 = 2rem */
}

.highlights-title {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
}

/* 圖片 icon 樣式 */
.icon-image {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    /* 左右置中 */
}

/* ==================== Requirements Grid ==================== */
/* PC版：維持 Grid 佈局（三個一排） */
.req-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

/* Swiper 容器基礎設定 */
.req-grid.swiper {
    overflow: visible;
}

.req-grid .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.req-grid .swiper-slide {
    height: auto;
    width: auto !important;
}

/* 分頁器預設隱藏（PC版不顯示） */
.req-grid .swiper-pagination {
    display: none;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
    gap: 0.25rem;
}

.highlight-card {
    background-color: transparent;
    padding: 0;
    border-radius: 0.2rem;
    text-align: center;
    perspective: 1000px;
    /* 3D 透視效果 */
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 1s ease, transform 1s ease;
    min-height: 5rem;
    /* 確保卡片有最小高度 */
}

.highlight-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 卡片內層容器 - 負責翻轉 */
.card-inner {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 4rem;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

/* 電腦版：hover 翻轉 */
@media (min-width: 1025px) {
    .highlight-card:hover .card-inner {
        transform: rotateY(180deg);
    }
}

/* 手機版：點擊翻轉（透過 JavaScript 加入 .flipped class） */
.highlight-card.flipped .card-inner {
    transform: rotateY(180deg);
}

/* 進場翻轉動畫 */
@keyframes highlightCardFlipIn {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

.highlight-card.visible .card-inner {
    animation: highlightCardFlipIn 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

/* 卡片正面和背面的共同樣式 */
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0.2rem;
    padding: 0.4rem 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 卡片正面 */
.card-front {
    background-color: var(--white);
    box-shadow: 0 0.1rem 0.375rem rgba(0, 0, 0, 0.05);
    z-index: 2;
    transform: rotateY(0deg);
}

/* 卡片背面 */
.card-back {
    background: linear-gradient(135deg, var(--primary-red) 0%, #c41820 100%);
    color: var(--white);
    transform: rotateY(180deg);
    padding: 0.6rem 0.4rem;
}

.card-back p {
    font-size: 0.2rem;
    line-height: 1.8;
    font-weight: 500;
    text-align: center;
    margin: 0;
}

.highlight-icon {
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.highlight-icon .material-symbols-outlined {
    font-size: 0.8rem;
    color: var(--primary-red);
}

.highlight-icon .icon-placeholder {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--aux-grey);
    border-radius: 50%;
    margin: 0 auto 0rem;
}

.card-front h4 {
    font-size: 0.25rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--primary-red);
}

.card-front p {
    color: var(--text-grey);
    line-height: 1.7;
    font-size: 0.2rem;
}

/* 支援 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .card-inner {
        transition: none;
    }

    .highlight-card:hover .card-inner,
    .highlight-card.flipped .card-inner {
        transform: none;
    }

    /* 減少動畫時，直接切換顯示/隱藏 */
    .highlight-card:hover .card-front,
    .highlight-card.flipped .card-front {
        display: none;
    }

    .highlight-card:hover .card-back,
    .highlight-card.flipped .card-back {
        display: flex;
        transform: none;
    }
}

/* ==================== Jobs Section ==================== */
.section-jobs {
    background-color: var(--white);
}

/* 圖片區塊 (1200x630) */
.jobs-hero-image {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1200 / 630;
    margin: -12rem auto 0rem;
    border-radius: 0.5rem;
    position: relative;
    z-index: 2;
    /* 進場動画初始狀態 */
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.jobs-hero-image.visible {
    opacity: 1;
    transform: translateY(0);
}

.jobs-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;

}

/* 跑馬燈容器（全寬） */
.marquee-container {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 2.5rem auto;
    position: relative;
    top: -6.2rem;
    z-index: 0;
}

/* 跑馬燈內容 */
.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
    will-change: transform;
}

/* 跑馬燈文字 */
.marquee-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--bg-white);
    padding: 0 1rem;
    letter-spacing: 0.1rem;
    flex-shrink: 0;
    /* 防止文字壓縮 */
}

/* 跑馬燈動畫 - 無縫循環 */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* 響應式調整 */

.jobs-intro {
    text-align: center;
    max-width: 12rem;
    margin: 0.5rem auto 1rem;
    color: var(--text-grey);
    font-size: 0.2rem;
    font-weight: 500;
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
    gap: 0.2rem;
}

.job-card {
    cursor: pointer;
    background-color: var(--bg-white);
    padding: 0.4rem 0.4rem;
    border-radius: 0.2rem;
    transform: translateY(0.15rem);
    position: relative;
    overflow: hidden;
    transition: all 0.15s ease-out;
}

/* 背景裝飾大數字 */
.job-card::after {
    content: attr(data-number);
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.15s ease-out;
}

.job-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 提升 hover 權重並放在 visible 之後，確保生效 */
.job-card.visible:hover,
.job-card:hover {
    background-color: var(--primary-red);
    transform: translateY(-0.15rem) scale(1.05);
    box-shadow: 0 0.5rem 1.25rem rgba(228, 30, 38, 0.25);
}

.job-card.visible:hover .job-title,
.job-card.visible:hover .job-desc,
.job-card.visible:hover .job-number,
.job-card:hover .job-title,
.job-card:hover .job-desc,
.job-card:hover .job-number {
    color: var(--white);
}

.job-card.visible:hover::after,
.job-card:hover::after {
    color: rgba(255, 255, 255, 0.1);
}

/* 隨機 active 卡片（與 hover 效果相同） */
.job-card.active {
    background-color: var(--primary-red);
    transform: translateY(-0.15rem) scale(1.05);
    box-shadow: 0 0.5rem 1.25rem rgba(228, 30, 38, 0.25);
}

.job-card.active .job-title,
.job-card.active .job-desc,
.job-card.active .job-number {
    color: var(--white);
}

.job-card.active::after {
    color: rgba(255, 255, 255, 0.1);
}

/* visible + active：確保優先級正確 */
.job-card.visible.active {
    transform: translateY(-0.15rem) scale(1.05);
}

.job-number {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: rgba(228, 30, 38, 0.15);
    margin-bottom: 0.1rem;
    opacity: 1;
    transition: all 0.15s ease-out;
}

.job-number .material-symbols-outlined {
    font-size: rem;
    transition: all 0.15s ease-out;
}

.job-title {
    font-size: 0.25rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--primary-red);
    letter-spacing: 0.05rem;
    transition: all 0.15s ease-out;
}

.job-desc {
    color: var(--text-grey);
    line-height: 1.6;
    font-size: 0.2rem;
    transition: all 0.15s ease-out;
}

/* ==================== Requirements Section ==================== */
.section-requirements {
    background-color: var(--bg-white);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.section-requirements .container {
    position: relative;
    z-index: 1;
}

.req-intro {
    text-align: center;
    max-width: 12rem;
    /* 1440px / 20 = 36rem */
    margin: 0.5rem auto 0.8rem;
    /* 60px / 20 = 1.5rem */
    color: var(--text-grey);
    font-size: 0.2rem;
    /* 22px / 20 = 0.55rem */
    line-height: 1.9;
    font-weight: 500;
}

.req-grid {
    max-width: 12rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    gap: 0.2rem;
    justify-items: center;
}

/* Swiper 在電腦版不啟用 */
.req-grid .swiper-wrapper {
    display: contents;
    /* 讓 grid 正常運作 */
}

.req-grid .swiper-pagination {
    display: none;
    /* 電腦版隱藏分頁指示器 */
}

.req-card {
    max-width: 4rem;
    cursor: pointer;
    background-color: var(--white);
    padding: 0.2rem 0.4rem 0.25rem 0.4rem;
    border-radius: 0.2rem;
    text-align: center;
    transition: var(--transition-smooth);
    box-shadow: 0 0.1rem 0.375rem rgba(0, 0, 0, 0.05);
}

.req-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.req-card.visible:hover {
    transform: translateY(0.15rem) scale(1.5);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.14);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease;
}

.req-icon {
    height: auto;
    margin: 0 auto 0rem;
}

.req-icon .material-symbols-outlined {
    font-size: 1rem;
    color: var(--primary-red);
}

.req-icon .icon-placeholder {
    width: 0.25rem;
    /* 60px / 20 = 1.5rem */
    height: 0.25rem;
    background-color: var(--aux-grey);
    border-radius: 0.2rem;
    margin: 0 auto 0.2rem;
}

.req-card h4 {
    font-size: 0.25rem;
    margin: 0.1rem 0;
    font-weight: 700;
    color: var(--text-dark);
}

.req-card p {
    font-size: 0.2rem;
    color: var(--text-grey);
    line-height: 1.6;
}

/* req-detail - 使用 ::after 偽元素顯示詳細文字（手機版） */
.req-card::after {

    content: attr(data-detail);
    display: none;
    /* 電腦版預設隱藏 */
    font-size: 0.2rem;
    color: var(--text-grey);
    line-height: 1.6;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1;
    margin-top: 0.2rem;
    padding: 0.2rem
}

/* req-sub 統一容器 - 所有文字在同一位置（正中間）顯示 */
.req-sub {
    text-align: center;
    max-width: 12rem;
    margin: 0.5rem auto 0;
    position: relative;
    min-height: 1.2rem;
    /* 確保容器有足夠高度 */
}

.req-sub p {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(0.2rem);
    /* 水平置中 + 初始偏移 */
    white-space: nowrap;
    /* 讓寬度貼合文字，不換行 */
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* 淡出快速 */
    margin: 0;
    padding: 0.3rem 0.5rem;
    line-height: 1.8;
    font-size: 0.18rem;
    color: var(--text-grey);
    border: 2px dashed var(--aux-grey);
    border-radius: 0.2rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.75);
}

/* PC版：hover 時顯示對應文字 */
@media (min-width: 1025px) {
    .req-sub p.active {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        /* 保留水平置中 + 歸位 */
        transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
        /* 淡入延遲 0.2s */
    }
}

/* 手機版：隱藏 req-sub */
@media (max-width: 1024px) {
    .req-sub {
        display: none;
    }
}

/* 支援 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .req-sub p {
        transition: none;
        transform: none;
    }
}

/* ==================== Timeline Section ==================== */
.section-timeline {
    background-color: var(--white);
}

.timeline-container {
    max-width: 12rem;
    margin: 0 auto;
    position: relative;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 1.6rem;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--aux-grey);

}

/* PC / 橫屏：由左往右依序淡入 */
.timeline-item {
    position: relative;
    opacity: 0;
    transform: translateX(-0.75rem);
    transition: opacity 0.6s ease-out,
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* stagger delay：4 個 item 依序出現 */
.timeline-item:nth-child(1) {
    transition-delay: 0s;
}

.timeline-item:nth-child(2) {
    transition-delay: 0.12s;
}

.timeline-item:nth-child(3) {
    transition-delay: 0.24s;
}

.timeline-item:nth-child(4) {
    transition-delay: 0.36s;
}

.timeline-dot {
    position: absolute;
    left: 0rem;
    top: 0rem;
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--primary-red);
    border-radius: 50%;
    border: 0.075rem solid var(--white);
    box-shadow: 0 0 0 0.075rem var(--aux-grey);
}

.timeline-container {
    max-width: 12rem;
    margin: 0.1rem auto 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0rem 0;
}

/* 黑色連結中軸線 */
.timeline-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: var(--text-light);
    z-index: 0;
    transform: translateY(-50%);
}

.timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
    z-index: 1;
    opacity: 1;
    /* 取消先前垂直版的隱藏，改為預設呈現或透過 intersection observer 控制 */
    transform: none;
}

.timeline-dot-wrapper {

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0.1rem auto;
}

.timeline-dot {
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--primary-red);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    /* 進場動画初始狀態 */
    opacity: 0;
    transform: translateX(-0.5rem);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    animation: breathing 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(228, 30, 38, 0.4);
}

.timeline-dot.visible {
    opacity: 1;
    transform: translateX(0);
}

@keyframes breathing {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(228, 30, 38, 0.4);
    }

    50% {
        transform: scale(1.4);
        box-shadow: 0 0 0 10px rgba(228, 30, 38, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(228, 30, 38, 0);
    }
}

.timeline-content-top {
    height: 1.5rem;
    display: flex;
    align-items: center;
    margin-bottom: 0rem;
}

.timeline-content-bottom {
    height: 1.5rem;
    display: flex;
    align-items: flex-start;

}

.timeline-date {
    font-weight: 700;
    font-size: 0.25rem;
    letter-spacing: 0.02rem;
    color: var(--primary-red);
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    background-color: #f0f0f0;
    border-radius: 30px;
    padding: 0.02rem 0.25rem;


}

.timeline-event {
    font-size: 0.25rem;
    letter-spacing: 0.1rem;
    margin-top: 0.8rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;

}

.timeline-event b {
    display: block;
    color: var(--text-grey);
    font-size: 0.2rem;
    font-weight: 400;
    letter-spacing: 0.01rem;
}

.timeline-event--note::after {
    content: '隨到隨審';
    display: block;
    margin-top: 0.1rem;
    color: var(--text-grey);
    font-size: 0.18rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
}

/* RWD 適配：在小螢幕自動轉回垂直 */

/* ==================== FAQ Section ==================== */
.section-faq {
    background-color: var(--bg-white);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.section-faq .container {
    position: relative;
    z-index: 1;
}

.faq-container {
    max-width: 12rem;
    margin: 0.5rem auto;
}

.faq-item {
    margin-bottom: 0.2rem;
    border: 0.025rem solid #e0e0e0;
    border-radius: 0.2rem;
    overflow: hidden;
    background-color: var(--white);
    transition: var(--transition-fast);
}

.faq-item:hover {
    box-shadow: 0 0.1rem 0.375rem rgba(0, 0, 0, 0.05);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-dark);
    background-color: transparent;
    transition: var(--transition-smooth);
    font-size: 0.25rem;
}

.faq-question:hover,
.faq-item.active .faq-question {
    background-color: var(--primary-red);
    color: var(--white);
}

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem;
    height: 0.5rem;
    color: var(--primary-red);
    transition: var(--transition-smooth);
}

.faq-toggle .material-symbols-outlined {
    font-size: 0.4rem;
    font-weight: 300;
}

.faq-question:hover .faq-toggle,
.faq-item.active .faq-toggle {
    color: var(--white);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.faq-item.active .faq-answer {
    max-height: 20rem;
    /* 調整為足夠大的值以容納內容 */
    transition: max-height 0.6s ease-in-out;
}

.faq-answer p {
    padding: 0.4rem 0.5rem 0.6rem 0.5rem;
    color: var(--text-grey);
    line-height: 1.8;
    font-size: 0.2rem;
}

/* ==================== FAQ Contact ==================== */
.faq-contact {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--aux-grey);
    text-align: center;
}

.faq-contact p {
    color: var(--text-grey);
    font-size: 0.55rem;
    margin-bottom: 0.625rem;
    font-weight: 500;
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: transparent;
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    padding: 0.5rem 1.25rem;
    border-radius: 2.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.6rem;
    transition: var(--transition-smooth);
}

.contact-email .material-symbols-outlined {
    font-size: 0.75rem;
}

.contact-email:hover {
    background-color: var(--primary-red);
    color: var(--white);
    transform: translateY(-0.1rem);
    box-shadow: 0 0.25rem 0.75rem rgba(228, 30, 38, 0.2);
}

/* ==================== Footer ==================== */
.footer {
    background-color: var(--text-dark);
    color: var(--white);
    padding: 0.5rem 0 0.4rem;
    /* 60px 0 30px */
}

.footer-content {
    text-align: center;
    max-width: 10rem;
    margin: 0 auto;
}

.footer-links {
    margin-bottom: 1rem;


}

.footer-links-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 6rem;
    margin: 0 auto;
}

.footer-links-row a {
    flex: 1;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: var(--aux-grey);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-links-row a img {
    width: 0.54rem;
    height: 0.54rem;
    object-fit: contain;
    opacity: 1;
    transition: var(--transition-smooth);
}

.footer-links-row a span {
    font-weight: 300;
    font-size: 0.15rem;
    letter-spacing: 0rem;
    white-space: nowrap;
    color: var(--white);
    opacity: 0.8;
}

.footer-links-row a:hover {
    color: var(--aux-grey);
    transform: scale(1.03);
}

.footer-links-row a:hover img {
    opacity: 1;
    transform: translateY(-3px) scale(1.03);
}

.footer-contact {
    margin-bottom: 0.5rem;
}

.footer-contact a {
    color: var(--primary-red);
    text-decoration: none;
}

.footer-copyright {
    color: var(--text-grey);
    font-size: 0.14rem;
}

/* ==================== Animations ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
        /* 40px / 20 = 1rem */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-0.25rem);

    }
}

@keyframes scrollScan {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* ==================== Responsive Design ==================== */

/* ==================== Fade-in  ==================== */

.fade-in-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


.fade-in-element.visible {
    opacity: 1;
    transform: translateY(0);
}


.section-header {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out,
        transform 0.5s ease-out;
}

.section-header.visible {
    opacity: 1;
    transform: translateY(0);
}

.company-text,
.jobs-intro {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out 0.1s,
        transform 0.6s ease-out 0.1s;
}

.company-text.visible,
.jobs-intro.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== 補充淡入元素 ==================== */
.salary-highlight,
.intro-note,
.highlights-title,
.req-intro,
.req-sub,
.cta-container,
.footer-content {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.salary-highlight.visible,
.intro-note.visible,
.highlights-title.visible,
.req-intro.visible,
.req-sub.visible,
.cta-container.visible,
.footer-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* faq-item：依序淡入 */
.faq-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out,
        transform 0.5s ease-out;
}

.faq-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* faq-item stagger delay（nth-child 1~10） */
.faq-item:nth-child(1) {
    transition-delay: 0s;
}

.faq-item:nth-child(2) {
    transition-delay: 0.07s;
}

.faq-item:nth-child(3) {
    transition-delay: 0.14s;
}

.faq-item:nth-child(4) {
    transition-delay: 0.21s;
}

.faq-item:nth-child(5) {
    transition-delay: 0.28s;
}

.faq-item:nth-child(6) {
    transition-delay: 0.35s;
}

.faq-item:nth-child(7) {
    transition-delay: 0.42s;
}

.faq-item:nth-child(8) {
    transition-delay: 0.49s;
}

.faq-item:nth-child(9) {
    transition-delay: 0.56s;
}

.faq-item:nth-child(10) {
    transition-delay: 0.63s;
}



.marquee-content {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Hover */
.job-card,
.highlight-card,
.req-card {
    will-change: transform, box-shadow;
}

.job-card:hover,
.highlight-card:hover,
.req-card:hover {
    will-change: auto;
}




.landscape-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--white);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.landscape-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.landscape-logo {
    max-width: 200px;
    height: auto;
}

.landscape-text {
    font-size: 0.5rem;
    color: var(--text-grey);
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.025rem;
}


.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--white);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 1, 1), visibility 0.35s;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

/* Logo：直接顯示（不做進場動畫） */
.loader-logo {
    width: 200px;
    height: auto;
    opacity: 1;
}

/* 進度條容器：灰色實線軌道 */
.loader-bar {
    width: 120px;
    height: 2px;
    background-color: var(--aux-grey);
    border-radius: 2px;
    overflow: hidden;
}

/* 實線填充：從左到右平滑展開，時間與最短顯示時間對齊 */
.loader-bar-fill {
    width: 0%;
    height: 100%;
    background-color: var(--primary-red);
    border-radius: 2px;
    animation: loaderFill 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loaderFill {
    0% {
        width: 0%;
    }

    80% {
        width: 85%;
    }

    100% {
        width: 100%;
    }
}


/* body opacity 已移除：page-loader 白色背景本身即為自然遡罩，不需要 body 控制 opacity */




/* ==================== Go to Top ==================== */
.go-to-top {
    position: fixed;
    bottom: 0.4rem;
    right: 0.4rem;
    width: 0.65rem;
    height: 0.65rem;
    background-color: var(--primary-red);
    color: var(--white);
    border: 2px solid var(--primary-red);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease,
        color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        border-color 0.3s ease;
    z-index: 1000;
}

.go-to-top::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--white);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
}

.go-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.go-to-top:hover {
    color: var(--primary-red);
    border: 2px solid var(--primary-red);
}

.go-to-top:hover::before {
    transform: scale(1);
}

.go-to-top .material-symbols-outlined {
    font-size: 0.25rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/* 横屏模式 (width > height) */
@media screen and (orientation: landscape) {

    @media (max-width: 1024px) {
        /* 手機橫屏模式：文字大小與直屏模式一致（0.25rem） */

        .company-text p {
            font-size: 0.25rem;
        }

        .intro-main {
            font-size: 0.25rem;
        }

        .intro-note {
            font-size: 0.25rem;
        }

        .faq-answer p {
            font-size: 0.25rem;
        }

        .req-intro {
            font-size: 0.25rem;
        }

        .jobs-intro {
            font-size: 0.25rem;
        }

        .job-desc {
            font-size: 0.25rem;
        }

        .jobs-hero-image {
            width: 12rem;
        }

        /* 橫屏時：啟用 Swiper 3 欄模式，恢復正常 flex 佈局 */
        .req-grid {
            display: block !important;
            /* 交給 Swiper 控制 */
        }

        .req-grid .swiper-wrapper {
            display: flex !important;
            /* Swiper 使用 flex */
            grid-template-columns: unset !important;
            gap: 0 !important;
            /* Swiper 用 spaceBetween 控制間距 */
        }

        .req-grid .swiper-slide {
            height: auto;
        }

        /* 橫屏隱藏分頁器（3 欄時不需要） */
        .req-grid .swiper-pagination {
            display: none !important;
        }

    }

}

/* 直屏模式 (width < height) */
@media screen and (orientation: portrait) {


    @media (max-width: 1024px) {

        /* ── KV 影片透出效果 ──
           hero-video-container 在本 media query 下保持 position: fixed（見下方）
           公司簡介：半透明背景讓 KV poster 微微透出
        */
        .section-company {
            background: rgba(255, 255, 255, 0.82);
        }

        /* 後方 section：不透明白色，完全遮蓋背景影片 */
        .section-intro,
        .section-requirements,
        .section-jobs,
        .section-timeline,
        .section-faq {
            background: var(--white, #ffffff);
        }

        .req-grid {
            grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr))
        }

        .req-card {
            max-width: 100%;
            box-shadow: none;
        }

        .req-card h4 {
            color: var(--primary-red);
            font-size: 0.4rem;
        }

        .req-card p {
            color: var(--primary-red);
            font-size: 0.25rem;
            font-weight: 500;
        }

        .req-icon {
            height: auto;
        }

        .faq-answer p {

            font-size: 0.25rem;
        }

        .go-to-top {
            position: fixed;
            bottom: 0.225rem;
            right: 0.1rem;
            width: 0.75rem;
            height: 0.75rem;

        }

        .container {

            padding: 0 0.84rem;

        }

        .nav-logo {
            padding-left: 0.4rem;
        }

        .company-text p {
            font-size: 0.25rem;
            /* 與 req-intro 一致 */
        }

        .intro-main {
            font-size: 0.25rem;
            /* 與 req-intro 一致 */
        }

        .intro-note {
            font-size: 0.25rem;
        }

        .faq-answer p {
            font-size: 0.25rem;
            /* 與 req-intro 一致 */
        }


        .section-subtitle {
            font-size: 0.5rem;
            /* 28px / 20 = 0.7rem */

        }

        .highlights-title {
            font-size: 0.5rem;
        }

        .highlight-card {
            min-height: 3.5rem;
        }

        .highlight-card h4 {
            font-size: 0.4rem;

        }

        .highlight-card p {
            line-height: 1.7;
            font-size: 0.25rem;

        }


        .highlight-icon {
            height: auto;
        }

        .highlights-grid {
            gap: 0.4rem
        }

        .jobs-intro {
            font-size: 0.25rem;
        }

        .job-desc {
            font-size: 0.25rem;
        }



        .desktop-only {
            display: none !important;
        }

        .mobile-only {
            display: block;
        }


        body {
            font-size: 18px;
            /* 基準值 */
        }

        .marquee-container {

            top: -3rem;
            margin: 0 auto;

        }

        .marquee-text {
            font-size: 2rem;
        }

        .jobs-hero-image {
            padding: 0.25rem;
            margin: -5rem auto 1rem;
            width: 100%;

        }


        .hero-title {
            margin-bottom: 0.25rem;
        }

        .timeline-container {
            flex-direction: column;
            align-items: flex-start;
            padding-left: 1rem;
            gap: 1.5rem;
        }

        .timeline-container::before {
            left: 1.25rem;
            top: 0;
            width: 1px;
            height: 100%;
            transform: none;
        }

        .timeline-item {
            flex-direction: row;
            width: 100%;
            justify-content: flex-start;
            text-align: left;
        }

        .timeline-content-top {
            order: 2;
            margin-bottom: 0;
            margin-left: 0.75rem;
            height: auto;
        }

        .timeline-dot-wrapper {
            order: 1;
            margin: 0;
            left: -0.9rem;
        }

        .timeline-content-bottom {
            order: 3;
            margin-top: 0;
            margin-left: 0.5rem;
            height: auto;
        }

        .timeline-event::before {
            content: '- ';
        }


        .job-title {
            font-size: 0.4rem;
        }


        .nav-menu {
            position: fixed;
            top: 0;
            right: 0;
            left: auto;
            transform: translateX(100%);
            flex-direction: column;
            background-color: #f5f5f5;
            width: 100%;
            max-width: 100%;
            height: 100vh;
            text-align: left;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            /* box-shadow: -0.25rem 0 0.75rem rgba(0, 0, 0, 0.05); */
            padding: 0;
            gap: 0;
            z-index: 1002;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .nav-menu.active {

            transform: translateX(0);
        }

        /* 選單頂部 */
        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            background-color: #fff;

        }

        .mobile-menu-logo .logo-img {
            width: 4rem;
            height: 1rem;
        }

        .nav-menu {
            padding-top: 1.2rem;
        }

        /* 選單項目 */
        .nav-menu li {
            width: 100%;
            margin: 0 !important;
            list-style: none;
            /* padding-left: 0.5rem; */

        }

        .nav-link {
            display: block;
            padding: 0.5rem 1rem 0.5rem 1rem;
            min-height: 48px;
            font-size: 0.35rem;
            font-weight: 700;
            color: #333;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            border: none;
            background: transparent;
        }



        .nav-link::after {
            display: none;
        }

        .nav-link:hover,
        .nav-link:active {
            background-color: var(--primary-red);

        }

        /* CTA 按鈕區塊 */
        .mobile-cta {
            width: 100%;
            margin: 0.5rem 0 1rem 1rem;
            padding: 0 1rem;
            display: flex;
            justify-content: flex-start;
        }

        .mobile-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            position: relative;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.75);
            color: var(--primary-red);
            border: 2px solid var(--primary-red);
            padding: 0.25rem 0.6rem;
            border-radius: 1rem;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.35rem;
            letter-spacing: 0.05rem;
            transition: color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 0;
        }

        .mobile-cta-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 1rem;
            background-color: var(--primary-red);
            transform: scale(0);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: -1;
        }

        .mobile-cta-btn:hover {
            color: var(--white);
        }

        .mobile-cta-btn:hover::before {
            transform: scale(1);
        }

        .mobile-cta-btn .material-symbols-outlined {
            font-size: 0.55rem;
            position: relative;
            z-index: 1;
        }

        /* 社群圖示區塊 */
        .mobile-social {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0.2rem 0.4rem 1rem;
            margin-top: auto;
            background-color: var(--text-dark);
            text-align: center;
        }

        .social-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            text-decoration: none;
            color: var(--aux-grey);
            transition: all 0.3s;
            width: 100%;

        }

        .social-item img {
            width: 1.25rem;
            height: 1.25rem;
            object-fit: contain;
            border-radius: 50%;
            padding: 0.25rem;
        }

        .social-icon-text {
            width: 1.25rem;
            height: 1.25rem;
            background-color: #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.6rem;
            color: #666;
        }

        .social-item span:last-child {
            font-size: 0.18rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.025rem;
        }

        .social-item:hover {
            color: var(--primary-red);
        }

        .social-item:hover img,
        .social-item:hover .social-icon-text {
            background-color: var(--primary-red);
            filter: brightness(0) invert(1);
        }

        .hamburger {
            display: flex;
        }





        /* Hero 區塊手機版調整 */
        .hero {
            align-items: flex-start;
            justify-content: flex-start;
            padding-top: 1rem;
        }

        /* 手機直屏：影片容器保持 fixed 在背景，讓公司簡介 section 能透出 */
        .hero-video-container {
            position: fixed;
            z-index: -1;
        }

        .hero-video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            /* 底部中央對齊 */
        }

        .hero-content {
            position: relative;
            z-index: 1;
            text-align: left;
            padding-left: 0.4rem;
            padding-right: 0.4rem;
            margin: 0.25rem 0 0rem 0;
            max-width: 100%;
        }

        .btn-hero {
            width: 3rem;
            height: 0.9rem;
            /* 與 btn-final 手機版一致 */
            gap: 0.25rem;
        }

        .btn-hero span:not(.material-symbols-outlined) {
            font-size: 0.4rem;
        }

        .btn-hero .material-symbols-outlined {
            font-size: 0.4rem;
        }

        .hero-title-small {
            font-size: 0.5rem;
            /* 20px / 20 = 0.5rem */
        }

        .hero-title-main {
            font-size: 0.95rem;
        }

        .hero-title-highlight {
            font-size: 0.95rem;
        }

        .cta-btn {
            padding: 0.5rem 1rem;
            font-size: 0.5rem;
            min-height: 48px;
        }

        .section {
            padding: 2rem 0;
            /* 80px / 20 = 2rem */
        }

        .section-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.6rem;
            /* 40px / 20 = 1rem */
            letter-spacing: 0;

        }




        .highlights-grid,
        .jobs-grid {
            grid-template-columns: 1fr;
        }

        /* 薪資亮點手機版調整 */
        .salary-highlight {
            flex-direction: column;
            gap: 0;
            padding: 0.2rem;
        }

        .salary-label {
            font-size: 0.4rem;
        }

        .salary-amount {
            font-size: 0.5rem;
        }

        .salary-note {
            font-size: 0.25rem;
        }

        /* FAQ 觸控優化 */
        .faq-question {
            padding: 0.5rem 0.55rem;
            min-height: 60px;
        }

        .faq-toggle .material-symbols-outlined {
            font-size: 0.5rem;
        }

        /* 聯絡按鈕 */
        .contact-email {
            padding: 0.5rem rem;
            font-size: 0.5rem;
            width: 90%;
            max-width: 300px;
        }

        /* 頁尾 */
        .footer-links {
            margin-left: 0.2rem;
        }

        .footer-links-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            max-width: 100%;
            padding: 0;
        }

        .footer-links-row a {
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            gap: 0.4rem;
            text-align: left;
        }

        .footer-links-row a img {
            width: 0.54rem;
            height: 0.54rem;
            flex-shrink: 0;
        }

        .footer-links-row a span {
            font-size: 0.2rem;
            text-align: left;
        }

        /* 時程表垂直佈局 */
        .timeline-container {
            flex-direction: column;
            align-items: stretch;
        }

        .timeline-container::before {
            left: 0.5rem;
            height: 100%;
            width: 2px;
        }

        .timeline-event {
            letter-spacing: 0;
        }

        .timeline-item {
            flex-direction: row;
            align-items: center;
            gap: 0.1rem;
            margin: 0.25rem 0 0.25rem 0;
            /* 手機直屏：由上往下淡入（覆蓋桌面版的 translateX） */
            transform: translateY(0.4rem);
            transition: opacity 0.5s ease-out,
                transform 0.5s ease-out;
        }

        /* 手機直屏 stagger：由上至下依序 */
        .timeline-item:nth-child(1) {
            transition-delay: 0s;
        }

        .timeline-item:nth-child(2) {
            transition-delay: 0.1s;
        }

        .timeline-item:nth-child(3) {
            transition-delay: 0.2s;
        }

        .timeline-item:nth-child(4) {
            transition-delay: 0.3s;
        }

        .timeline-item.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .timeline-dot-wrapper {
            position: relative;
            margin: 0;
            flex-shrink: 0;
        }

        .timeline-dot {
            position: static;
            width: 0.75rem;
            height: 0.75rem;
        }

        .timeline-content-top,
        .timeline-content-bottom {
            text-align: left;
            margin: 0;
            height: auto;

        }

        .timeline-content-top {
            width: 50%;
            margin-left: -0.5rem;
        }

        .timeline-date {
            font-size: 0.3rem;
            margin-top: 0rem;
        }

        .timeline-event {
            font-size: 0.3rem;
            margin-top: 0rem;
            margin-left: 0.4rem;
        }

        .timeline-event::before {
            content: '';
        }

        .timeline-event {
            text-align: left;
        }

        .timeline-event b {
            text-align: left;
        }

        .timeline-container {
            margin-top: 1.25rem;
            margin-left: -0.25rem;
        }
    }
}

/* ==================== Media Queries ====================
 * 
 * 響應式設計策略：Desktop-First（max-width）
 * 
 * 斷點說明：
 * - 基礎樣式：桌面版（> 1024px）
 * - @media (max-width: 1024px)：平板版（768px - 1024px）
 * - @media (max-width: 768px)：手機版（< 768px）
 * 
 * 技術架構：
 * - 配合 layout_longscroll.js 動態字體縮放（root font-size: 50-100px）
 * - 使用 CSS 變數（Custom Properties）統一管理顏色和間距
 * 
 * 可訪問性：
 * - 支援 prefers-reduced-motion（減少動畫）
 * - 確保所有互動元素在各裝置上都可操作
 * 
 * ========================================================== */

/* ==================== Media Query: 平板版 (max-width: 1024px) ==================== */

/* ==================== Media Query: 減少動畫 (Accessibility) ==================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .marquee-content {
        animation: none;
    }

    .timeline-dot {
        animation: none;
    }

    .fade-in-element,
    .section-header,
    .company-text,
    .jobs-intro,
    .job-card,
    .highlight-card,
    .req-card,
    .timeline-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==================== 手機版 Swiper 樣式 ==================== */
@media (max-width: 1024px) {

    /* 手機版：啟用 Swiper 輪播 */
    .req-grid {
        display: block !important;
        overflow: hidden !important;
    }

    .req-grid .swiper-wrapper {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0rem;
    }



    .req-grid .swiper-slide {
        width: 100% !important;
        flex-shrink: 0;
    }

    /* 橫屏時：3 欄模式 */
    @media (orientation: landscape) {
        .req-grid .swiper-slide {
            width: calc(33.333% - 12px) !important;
            /* 3 欄均分，spaceBetween:16px 的 2/3 */
        }

        /* 隱藏橫屏分頁器 */
        .req-grid .swiper-pagination {
            display: none !important;
        }
    }

    /* 顯示分頁器（直屏） */
    .req-grid .swiper-pagination {
        display: block !important;
        position: relative;
        margin-top: 1rem;
        bottom: 0;
    }

    /* 自訂分頁器樣式 */
    .req-grid .swiper-pagination-bullet {
        width: 0.2rem;
        height: 0.2rem;
        background-color: #ccc;
        opacity: 0.5;
        margin: 0 0.1rem !important;
        transition: all 0.3s ease;
    }

    .req-grid .swiper-pagination-bullet-active {
        background-color: var(--primary-red);
        opacity: 1;
        transform: scale(1.2);
    }

    .req-card {
        width: 100%;
        max-width: none;
        box-shadow: none;
    }

    /* 手機版顯示 ::after 偽元素（詳細文字） */
    .req-card::after {
        display: block;
    }

    /* 手機版隱藏 req-sub（電腦版的 hover 文字） */
    .req-sub {
        display: none !important;
    }
}

/* 手機版取消 hover 效果 */
.req-card:hover {
    transform: none !important;
    box-shadow: 0 0.1rem 0.375rem rgba(0, 0, 0, 0.05) !important;
}

/* 隱藏 req-sub 文字（手機版不需要） */
.req-sub {
    display: block
}

/* Swiper 導航按鈕 */
.req-grid .swiper-button-prev,
.req-grid .swiper-button-next {
    width: 2rem;
    height: 2rem;
    background-color: var(--white);
    border-radius: 50%;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.req-grid .swiper-button-prev:after,
.req-grid .swiper-button-next:after {
    font-size: 0.8rem;
    color: var(--primary-red);
    font-weight: 900;
}

.req-grid .swiper-button-prev:hover,
.req-grid .swiper-button-next:hover {
    background-color: var(--primary-red);
    transform: scale(1.1);
}

.req-grid .swiper-button-prev:hover:after,
.req-grid .swiper-button-next:hover:after {
    color: var(--white);
}

/* 按鈕位置調整 */
.req-grid .swiper-button-prev {
    left: -1rem;
}

.req-grid .swiper-button-next {
    right: -1rem;
}

.req-grid .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}