@charset "UTF-8";

/* Banner：1920 × 800；1280px 以下維持提版的中央內容尺度。 */
.area_banner { background: #0b0960; }
.bannerBox { position: relative; width: 100%; height: 800px; }
.bannerBox picture { display: block; width: 100%; height: 100%; }
.banner-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.download-bx {
    position: absolute;
    top: 76.7%;
    /* 1920px 圖片的標題中心位於 x = 608px；隨圖片置中裁切對齊。 */
    left: calc(50% - 352px);
    transform: translateX(-50%);
    display: flex;
    gap: 22px;
}
.download-button {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: clamp(180px, 11.927vw, 229px);
    min-height: 62px;
    padding: 16px 25px;
    border: 1px solid #b57e10;
    border-radius: 11px;
    background: linear-gradient(107deg, #b57e10 4%, #e5c25b 21%, #f9df7b 26%, #fff3a6 53%, #f9df7b 82%, #b57e10 100%);
    color: #90600d;
    font: 700 21px/1.2 Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px #fff;
    box-shadow: 1px 3px #7d4100, 2px 5px #885214, 3px 8px #a06b2f, 0 15px 24px #0009;
    isolation: isolate;
    transition: filter .2s, transform .2s;
}
.download-button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("../images/btn_gold_texture.png") center / cover; mix-blend-mode: overlay; opacity: .46; }
.download-button img { transform: rotate(-90deg); }
@media (hover: hover) { .download-button:hover { filter: brightness(1.1); transform: translateY(-2px); } }
.download-button:active { transform: translateY(3px); }

/* 五組功能介紹沿用參照版的 class；內容排列改用 Grid。 */
.area_intro { background: #fff; }
.area_intro:nth-child(odd) { background: #f7f8fa url("../images/intro_bg.png") center / cover no-repeat; }
.introBox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; min-height: 505px; padding-block: 80px; }
.introBox .bn { grid-column: 2; grid-row: 1; padding-inline: 40px; }
.introBox .bn img { width: 100%; max-width: 480px; margin-inline: auto; }
.introBox .textbox { grid-column: 1; grid-row: 1; min-width: 0; padding: 20px 0 0 40px; }
.introBox.right .bn { grid-column: 1; }
.introBox.right .textbox { grid-column: 2; }
.introBox h2 { margin-bottom: 16px; color: var(--color-heading); font-size: clamp(32px, 4.6875vw, 60px); font-weight: 700; line-height: 1.45; letter-spacing: 1px; }
.introBox h3 { margin-bottom: 16px; color: var(--color-subheading); font-size: clamp(25px, 3.125vw, 40px); font-weight: 700; line-height: 1.45; letter-spacing: 1px; }
.feature-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: clamp(17px, 1.875vw, 24px); line-height: 1.5; letter-spacing: 1px; }
.feature-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 8px; }
.feature-list li::before { content: ""; width: 32px; height: 32px; margin-top: 2px; background: url("../images/icon_check.png") center / contain no-repeat; }

@media (min-width: 1921px) {
    .banner-image { object-fit: contain; }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .bannerBox { height: auto; aspect-ratio: 1920 / 800; }
    .download-bx { left: 31.666667%; gap: 1.1458vw; }
    .download-button { width: 11.927vw; min-height: 36px; padding: 1vw 1.3vw; font-size: clamp(12px, 1.1vw, 18px); gap: 4px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .introBox { min-height: 400px; padding-block: 60px; align-items: center; }
    .introBox .bn { padding-inline: 12px; }
    .introBox .textbox { padding: 0 0 0 20px; }
    .feature-list li { grid-template-columns: 25px minmax(0, 1fr); }
    .feature-list li::before { width: 25px; height: 25px; }
}
@media (max-width: 767px) {
    .bannerBox { height: auto; aspect-ratio: 750 / 1000; }
    .banner-image { width: 100%; height: auto; aspect-ratio: 750 / 1000; object-fit: contain; }
    .download-bx { top: auto; bottom: 4%; left: 50%; width: 78%; transform: translateX(-50%); gap: 16px; }
    .download-button { width: auto; flex: 1 1 0; min-width: 0; min-height: 44px; padding: clamp(10px, 2.3vw, 17px) clamp(10px, 3vw, 23px); font-size: clamp(15px, 3.6vw, 23px); gap: 6px; border-radius: 8px; box-shadow: 1px 3px #7d4100, 2px 5px #a06b2f, 0 8px 16px #0008; }
    .introBox { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding-block: 44px; }
    .introBox .bn, .introBox.right .bn { grid-column: 1; grid-row: 1; padding: 0; }
    .introBox .textbox, .introBox.right .textbox { grid-column: 1; grid-row: 2; padding: 0; text-align: center; }
    .introBox h2 { font-size: 28px; line-height: 1.4; margin-bottom: 10px; }
    .introBox h3 { font-size: 22px; margin-bottom: 16px; }
    .feature-list { justify-items: center; font-size: 22px; gap: 10px; letter-spacing: .5px; }
    .feature-list li { display: block; max-width: 100%; text-align: center; }
    .feature-list li::before { display: inline-block; width: 24px; height: 24px; margin: 0 8px 0 0; vertical-align: -4px; }
}
@media (prefers-reduced-motion: reduce) {
    .download-button { transition: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}