@charset "UTF-8";

/* ==========================================================================
   2026 新機上市活動頁 — 共用樣式
   --------------------------------------------------------------------------
   使用方式：各銀行活動頁載入本檔後，於頁面內以一小段 <style> 覆寫主色與
   icon 路徑即可，其餘版面規則不需重複撰寫。

       <link rel="stylesheet" href="/common/event/2026new/css/style.css?v=20260907">
       <style>
           :root {
               --main-color: #CC0100;
               --main-hover: #DC1718;
               --icon-square: url('/Event/DBS/images/2026new/icon-square.svg');
               --icon-gift: url('/Event/DBS/images/2026new/icon-gift.svg');
           }
       </style>

   註：--icon-* 一律使用「絕對路徑」。CSS 變數值裡的相對 url()，各瀏覽器對
   解析基準點（宣告變數的樣式表 vs 使用 var() 的樣式表）曾有規格演進與實作
   差異，用絕對路徑可完全規避，不要改成相對路徑。

   各銀行主色對照見本目錄 README 或參考該行 css/style.css。
   ========================================================================== */


/* ==========================================================================
   1. 主題變數（預設值，供頁面未覆寫時 fallback）
   ========================================================================== */
:root {
    --main-color: #CC0100;
    --main-hover: #DC1718;
    --text-color: #525252;
    --page-bg: #F6F6F8;
    --card-radius: 20px;
    --card-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    --icon-square: none;
    --icon-gift: none;
}


/* ==========================================================================
   2. MasterPage 層級修正
   --------------------------------------------------------------------------
   以下兩條刻意不收斂在 #maindiv 底下：header / nav 需壓在活動內容之上。

   注意：這裡曾經有一條 `footer.footer { display: none; }`，用意是隱藏「舊版站台頁尾」。
   但 DBS 與 TCB 的 MasterPage 是用 SSI 掛 common/_dbs_footer.html、common/_tcb_footer.html，
   其根元素正是 <footer class="footer">，且裡面裝的是該行**法定揭露資訊**
   （循環信用利率、基準日、預借現金手續費、官網網址）——那是它們唯一的頁尾，不是舊版殘留。
   該規則會讓這兩家的活動頁完全沒有揭露資訊，因此移除。
   兆豐／永豐走 CDN footer.js，渲染進 .footer_v2，本來就不受這條規則影響。
   ========================================================================== */
header {
    z-index: 999;
    position: relative;
}

.nav-container {
    z-index: 999;
    position: relative;
}


/* ==========================================================================
   3. 頁面基礎
   ========================================================================== */
#maindiv {
    color: var(--text-color);
    background: var(--page-bg);
    position: relative;
    width: 100vw;
    overflow-x: hidden;
}

#maindiv a {
    color: var(--main-color);
}

#maindiv .container {
    position: relative;
    z-index: 2;
}

#maindiv .banner {
    width: 100%;
}

#maindiv .banner img {
    display: block;
    width: 100%;
}


/* ==========================================================================
   4. 白色卡片與內文排版
   ========================================================================== */
#maindiv .box {
    background-color: #fff;
    border-radius: var(--card-radius);
    padding: 40px 50px;
    position: relative;
    box-shadow: var(--card-shadow);
}

#maindiv .box h5 {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 2px;
    color: var(--main-color);
}

#maindiv .box p {
    font-family: 'Noto Sans CJK TC';
    font-size: 1rem;
    line-height: 200%;
    letter-spacing: 2px;
    color: var(--text-color);
    margin-bottom: 0rem;
}

#maindiv .box a:hover {
    color: var(--main-hover);
}

/* 內文強調（金額、序號、贈品名稱） */
#maindiv .box p span,
#maindiv li span {
    font-weight: 600;
    color: var(--main-color);
}

#maindiv .box p span.point {
    color: #FCCBAB;
}


/* ==========================================================================
   5. 活動資訊列（活動日期 / 活動內容）
   ========================================================================== */
#maindiv .info-row {
    font-family: 'Noto Sans CJK TC';
    font-size: 1rem;
    line-height: 200%;
    letter-spacing: 2px;
    color: var(--text-color);
}

#maindiv .info-row .info-label {
    color: var(--main-color);
    font-weight: 600;
    margin-right: .75rem;
}


/* ==========================================================================
   6. 清單
   ========================================================================== */
#maindiv ul {
    padding-left: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: 1px;
    list-style: circle;
}

#maindiv ol {
    color: var(--text-color);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: 1px;
    padding-left: 1.5rem;
}

#maindiv ol li {
    word-break: break-all;
}

/* 注意事項三層階層：1. → i. → a. */
#maindiv ol>li {
    list-style-type: decimal;
}

#maindiv ol>li>ol>li {
    list-style: lower-roman;
}

#maindiv ol>li>ol>li>ol>li {
    list-style: lower-alpha;
}

/* 圖示清單：ul.square（活動條件）、ul.gift（好禮） */
#maindiv ul.square,
#maindiv ul.gift {
    list-style: none;
    padding-left: 0;
}

#maindiv ul.square>li,
#maindiv ul.gift>li {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.5rem;
    margin-bottom: .8rem;
}

#maindiv ul.square>li::before,
#maindiv ul.gift>li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
}

#maindiv ul.square>li::before {
    background-image: var(--icon-square);
}

#maindiv ul.gift>li::before {
    background-image: var(--icon-gift);
}

/* 「‧」點狀清單：ul.square 底下的巢狀項目，以及卡片內的補充說明 ul.act-note */
#maindiv ul.square ul,
#maindiv ul.act-note {
    list-style: none;
}

#maindiv ul.square ul {
    padding-left: 1.2rem;
}

#maindiv ul.act-note {
    padding-left: 0;
}

#maindiv ul.square ul>li,
#maindiv ul.act-note>li {
    position: relative;
    padding-left: 1.2rem;
}

#maindiv ul.act-note>li {
    font-size: .9375rem;
    color: var(--text-color);
}

#maindiv ul.square ul>li::before,
#maindiv ul.act-note>li::before {
    content: '‧';
    position: absolute;
    left: 0;
}


/* ==========================================================================
   7. 活動回饋門檻表格（.table-act）
   --------------------------------------------------------------------------
   用於第一銀、聯邦等「回饋門檻／回饋金額／名額」表格。外層請包
   <div class="table-scroll">，極窄裝置塞不下時才會出現橫向滑動。

   手機版不改成堆疊卡片，而是縮字級＋收緊 padding＋標題與數字不斷行 ——
   這種三欄短文字的對照表，維持表格形態比拆成卡片好讀，也和設計稿一致。
   關鍵是 white-space:nowrap，否則「回饋金額」會被拆成「回饋金／額」。
   ========================================================================== */
#maindiv .table-act {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
    border-collapse: collapse;
    font-weight: 400;
    letter-spacing: 1px;
}

#maindiv .table-act thead th {
    background-color: var(--main-color);
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    padding: .75rem .5rem;
    border: 0;
}

#maindiv .table-act thead th:first-child {
    border-top-left-radius: 8px;
}

#maindiv .table-act thead th:last-child {
    border-top-right-radius: 8px;
}

#maindiv .table-act tbody td {
    padding: .75rem .5rem;
    border-top: 1px solid #E5E5E5;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--text-color);
}

/* 第一欄是門檻描述，較長，允許在必要時斷行 */
#maindiv .table-act tbody td:first-child {
    white-space: normal;
}

/* 合併儲存格（例如聯邦「每月登錄名額 5,000 名」跨四列）加左側分隔線，
   避免看起來像沒畫完的框線 */
#maindiv .table-act tbody td[rowspan] {
    border-left: 1px solid #E5E5E5;
}

#maindiv .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   8. 商品連結卡（iPhone / Watch / Mac / iPad）
   ========================================================================== */
#maindiv .link-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

#maindiv .link-card {
    border-radius: var(--card-radius);
    overflow: hidden;
    /* 設計稿的分類卡是白底；4 張商品圖都是白底不透明 PNG，
       卡片沒底色時會吃到 --page-bg，圖片就會浮出一個白色方塊 */
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    flex: 1 0 0%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    position: relative;
}

#maindiv .link-card:hover {
    text-decoration: none;
    transform: translateY(-5px);
}

/* hover 遮罩 */
#maindiv .link-card::before {
    content: "立即選購";
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

#maindiv .link-card:hover::before {
    opacity: 1;
}

#maindiv .link-card h6 {
    font-weight: 400;
    font-size: 22px;
    color: #484848;
    padding: 1rem;
}

#maindiv .link-card img {
    height: 160px;
    width: fit-content;
}


/* ==========================================================================
   9. 新品圖區塊
   --------------------------------------------------------------------------
   圖檔一律輸出「直角」圖片，圓角與陰影統一由 CSS 處理，陰影比照 .box。
   img 必須 display:block —— inline 圖片會坐在文字基線上多出下緣空間，
   造成並排時兩張圖頂端錯開。
   ========================================================================== */
#maindiv .new-intro__item {
    display: block;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

#maindiv .new-intro__item img {
    display: block;
    width: 100%;
    height: auto;
}

/* 垂直節奏掛在容器的「直接子層」上，並排列內的項目間距一律交給 grid gap。
   刻意不用 .new-intro__item+.new-intro__item，否則並排列內的兩張圖也會命中，
   得再寫一條同權重的 margin-top:0 去蓋掉 —— 那會變成依賴宣告順序的寫法。 */
#maindiv #new-intro .container>*+* {
    margin-top: 1.5rem;
}

/* 並排用 grid 而非 flex：flex-basis 在 column 方向會套到「高度」，
   手機版轉直排時會把項目壓成 0 高度。grid 兩種排列都不會有這問題。 */
#maindiv .new-intro__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.5rem;
}


/* ==========================================================================
   10. 按鈕
   ========================================================================== */
#maindiv .btn-main {
    border: 1px solid var(--main-hover);
    color: var(--main-color);
    border-radius: 3rem;
    padding: 10px 48px;
    letter-spacing: 2px;
    box-shadow: 0px 4px 5px rgba(167, 147, 147, 0.25);
    width: fit-content;
    transition: all 0.3s ease-in-out;
}

#maindiv .btn-main:hover {
    color: white !important;
    text-decoration: none;
    background-color: var(--main-color);
}


/* ==========================================================================
   11. 注意事項與謹慎理財頁尾
   ========================================================================== */
#event-notice {
    position: relative;
}

#event-notice a {
    text-decoration: underline;
}

#footer {
    background-color: #3E3D3B;
    color: white;
    text-align: left;
    padding: 1rem 0rem;
    z-index: 99999;
    position: relative;
}

#footer .notice-title {
    font-weight: 400;
    font-size: 28px;
    line-height: 180%;
    letter-spacing: 2px;
    color: #FFFFFF;
}

#footer p {
    margin-bottom: 0rem;
}


/* ==========================================================================
   12. 加碼活動卡（.bonus）
   --------------------------------------------------------------------------
   活動主體之外單獨拉出來的加碼方案：徽章標題壓在卡片上緣，卡片內左圖右文。
   本章只處理版面骨架，文字排版一律沿用既有的 .box h5 / .box p / .info-row /
   ul.square / ul.act-note，不另立一套字級。

   徽章用絕對定位壓在 .box 上緣，所以外層 .bonus 要留 padding-top、.box 也要
   加大 padding-top，否則徽章會蓋到卡片第一行文字。
   ========================================================================== */
#maindiv .bonus {
    position: relative;
    padding-top: 26px;
}

#maindiv .bonus>.box {
    padding-top: 46px;
}

#maindiv .bonus__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: calc(100% - 2rem);
    padding: .7rem 2.25rem;
    background-color: var(--main-color);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
    border-radius: 3rem;
    box-shadow: var(--card-shadow);
}

#maindiv .bonus__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* 商品圖是不透明 PNG，底色為 #F6F5F8（接近 --page-bg 而非純白），直接壓在白卡上
   會露出一塊灰色方塊。與其硬要去背，不如把它當成刻意的產品圖底板：補圓角讓邊界
   看起來是設計的一部分。日後若拿到白底或去背版本，移除 background/radius 兩行即可 */
#maindiv .bonus__fig {
    flex: 0 0 28%;
    max-width: 28%;
    background-color: #F6F5F8;
    border-radius: 12px;
    overflow: hidden;
}

#maindiv .bonus__fig img {
    display: block;
    width: 100%;
    height: auto;
}

#maindiv .bonus__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* 文字排版一律沿用 #event1 既有語彙（.box h5 / .box p / .info-row / ul.square），
   這裡只收掉卡片內最後一個元素的多餘下緣間距 */
#maindiv .bonus__body>*:last-child {
    margin-bottom: 0;
}

#maindiv ul.bonus__notes {
    margin-top: 1rem;
    margin-bottom: 0;
}


/* ==========================================================================
   13. RWD
   ========================================================================== */
@media only screen and (max-width: 992px) {
    #maindiv .box {
        padding: 2rem;
    }

    #maindiv ol {
        padding-left: 1.5rem;
    }

    #maindiv .link-row {
        gap: 1rem;
    }

    #maindiv .link-card {
        flex: 0 0 calc(50% - 1rem);
    }

    #maindiv .bonus__inner {
        gap: 1.5rem;
    }

    #maindiv .bonus__fig {
        flex-basis: 32%;
        max-width: 32%;
    }
}

@media only screen and (max-width: 767px) {
    #maindiv {
        font-size: 15px;
    }

    #maindiv .box {
        padding: 1.5rem;
    }

    #maindiv p {
        font-size: 15px;
        letter-spacing: 0px;
    }

    #maindiv ul,
    #maindiv ol {
        letter-spacing: 0px;
    }

    #maindiv .link-card h6 {
        font-size: 18px;
    }

    #maindiv .new-intro__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    /* 表格：縮字級、收緊 padding、去掉字距，讓三欄在手機仍能完整並排 */
    #maindiv .table-act {
        font-size: 14px;
        letter-spacing: 0;
    }

    #maindiv .table-act thead th,
    #maindiv .table-act tbody td {
        padding: .5rem .3rem;
    }

    #maindiv .bonus {
        padding-top: 22px;
    }

    #maindiv .bonus>.box {
        padding-top: 2.5rem;
    }

    #maindiv .bonus__badge {
        font-size: 16px;
        letter-spacing: 1px;
        padding: .6rem 1.25rem;
    }

    #maindiv .bonus__inner {
        flex-direction: column;
        gap: 1rem;
    }

    /* 轉直排後 flex-basis 會改套到「高度」，必須歸零回 auto，
       否則圖片會被壓成 32% 高度（同 .new-intro__row 那條註解的陷阱） */
    #maindiv .bonus__fig {
        flex-basis: auto;
        max-width: 70%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 577px) {
    #maindiv .box {
        padding: 1rem;
    }

    #maindiv ol {
        font-size: 14px;
        letter-spacing: 0px;
    }

    #maindiv .link-card img {
        height: 100px;
    }

    #maindiv .table-act {
        font-size: 13px;
    }

    #maindiv .table-act thead th,
    #maindiv .table-act tbody td {
        padding: .45rem .25rem;
    }

    #maindiv .bonus__badge {
        font-size: 15px;
        letter-spacing: 0;
        padding: .55rem 1rem;
    }

    #maindiv .bonus__fig {
        max-width: 100%;
    }
}