@charset "utf-8";
/* ==========================================================================
   首頁 (登入前) 新版版面 — Hero Banner + 上方快捷鈕
   2026-09 新增。只由 _HomeLayout.cshtml 載入，不影響 Client / Backend / UPAExam。
   所有選擇器一律以 .to- 開頭，避免覆寫 main.css / style.css 的共用樣式。
   ========================================================================== */

/* --------------------------------------------------------------------------
   上方快捷鈕（新手上路 / 開卡儲值），與既有的 ul.loginbar 併排在 .topbar 內
   -------------------------------------------------------------------------- */
.topbar ul.to-topbtn {
    margin: 0;
    padding: 0;
    position: relative;
}

.topbar ul.to-topbtn > li {
    float: left;
    display: block;
    list-style: none;
    height: 36px;
    margin: 0 8px 0 0;
    padding: 0;
    background: none;
}

.topbar ul.to-topbtn > li > a,
.topbar ul.to-topbtn > li > a:link,
.topbar ul.to-topbtn > li > a:visited {
    display: block;
    height: 36px;
    line-height: 36px;
    padding: 0 26px;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    /* 與「登入」鈕 (login_03/05/06.png) 相同：上緣平、下緣 14px 圓角、底部 3px 深色 */
    border-radius: 0 0 14px 14px !important; /* app.css 有 * { border-radius: 0 !important } */
    -webkit-box-shadow: inset 0 -3px 0 rgba(120, 60, 0, .28);
    box-shadow: inset 0 -3px 0 rgba(120, 60, 0, .28);
    background-color: #ffa70f; /* 平常與「登入」鈕同色 */
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}

.topbar ul.to-topbtn > li > a:hover,
.topbar ul.to-topbtn > li > a:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #f09a00;
}

/* 點了新手上路 / 開卡儲值後，該鈕加 .to-active 換色，標示目前切換到的頁面
   (class 由 _TopMenuPartial 的 script 切換；回首頁是整頁重載，自然清掉) */
.topbar ul.to-topbtn > li > a.to-active,
.topbar ul.to-topbtn > li > a.to-active:hover,
.topbar ul.to-topbtn > li > a.to-active:focus {
    background-color: #e8740c;
}

/* --------------------------------------------------------------------------
   「登入」鈕改成與快捷鈕相同的 CSS 畫法（字型、大小、無底線、36px 高、文字置中）
   不再用 login_03/05/06.png 拼。原本顏色與 .header 上方 7px 色條 (#fcb201) 相同，
   視覺上黏成一塊而顯得比快捷鈕高，所以改用稍深的 #ffa70f 與色條區隔。
   只改這裡、不動 _TopMenuPartial 的 markup：Client/Backend/Error 版面仍沿用 main.css 的圖片版。
   :not(.main) 排除登入後的 ul.loginbar.main。
   -------------------------------------------------------------------------- */
.topbar ul.loginbar:not(.main) > li.left,
.topbar ul.loginbar:not(.main) > li.right {
    display: none;
}

.topbar ul.loginbar:not(.main) > li {
    height: 36px;
    padding: 0;
    background-image: none;
    font-size: 0; /* 吃掉 <i> 後面的 &nbsp;，避免多出一行把 <a> 往下推 */
    line-height: 0;
}

/* 箭頭圖示疊在 <a> 的左側內距上，點圖示也會點到 <a> */
.topbar ul.loginbar:not(.main) > li > i {
    position: absolute;
    left: 26px;
    top: 8px;
    margin: 0;
    pointer-events: none;
}

.topbar ul.loginbar:not(.main) > li > a,
.topbar ul.loginbar:not(.main) > li > a:hover,
.topbar ul.loginbar:not(.main) > li > a:focus {
    display: block;
    height: 36px;
    line-height: 36px;
    padding: 0 26px 0 50px; /* 左 = 26 + 圖示 20 + 間距 4 */
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    background-color: #ffa70f;
    border-radius: 0 0 14px 14px !important; /* app.css 有 * { border-radius: 0 !important } */
    -webkit-box-shadow: inset 0 -3px 0 rgba(120, 60, 0, .28);
    box-shadow: inset 0 -3px 0 rgba(120, 60, 0, .28);
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}

.topbar ul.loginbar:not(.main) > li > a:hover,
.topbar ul.loginbar:not(.main) > li > a:focus {
    background-color: #f09a00;
}

@media (max-width: 767px) {
    .topbar ul.to-topbtn > li {
        margin-right: 5px;
    }

    /* 要帶 :link/:visited，否則權重輸給上面的基本規則，手機版字級/內距不會生效 */
    .topbar ul.to-topbtn > li > a,
    .topbar ul.to-topbtn > li > a:link,
    .topbar ul.to-topbtn > li > a:visited {
        padding: 0 12px;
        font-size: 13px;
    }

    .topbar ul.loginbar:not(.main) > li > i {
        left: 12px;
    }

    .topbar ul.loginbar:not(.main) > li > a,
    .topbar ul.loginbar:not(.main) > li > a:hover,
    .topbar ul.loginbar:not(.main) > li > a:focus {
        padding: 0 12px 0 36px;
        font-size: 13px;
    }
}

@media (max-width: 560px) {
    .topbar ul.to-topbtn > li {
        margin-right: 3px;
    }

    .topbar ul.to-topbtn > li > a,
    .topbar ul.to-topbtn > li > a:link,
    .topbar ul.to-topbtn > li > a:visited {
        padding: 0 7px;
        font-size: 12px;
        letter-spacing: -0.5px;
    }

    .topbar ul.loginbar:not(.main) > li > i {
        left: 7px;
    }

    .topbar ul.loginbar:not(.main) > li > a,
    .topbar ul.loginbar:not(.main) > li > a:hover,
    .topbar ul.loginbar:not(.main) > li > a:focus {
        padding: 0 7px 0 31px;
        font-size: 12px;
        letter-spacing: -0.5px;
    }
}

/* --------------------------------------------------------------------------
   Hero Banner（2026-09-26 定稿圖）
   字標與標語已做在圖裡。桌機用橫幅 hero_banner_{tw|cn}.jpg (1920 x 700)，
   ≤767px 由 <picture> 換成直式海報 hero_poster_{tw|cn}.jpg (750 x 1000)。
   -------------------------------------------------------------------------- */
.to-hero-wrap {
    padding-top: 20px;
    padding-bottom: 40px;
}

a.to-hero,
a.to-hero:link,
a.to-hero:visited {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
}

a.to-hero img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .to-hero-wrap {
        padding-top: 12px;
        padding-bottom: 24px;
    }
}