﻿/* =========================================================
變數
========================================================= */
:root {
    /* 品牌色 #e82027與純白字體目前對比值：4.50 */
    --color-primary: #e82027;
    --color-primary-hover: #ff1525;
    --color-primary-soft: rgba(239, 51, 64, .84);
    /* 基礎色 */
    --color-text: #333;
    --color-white: #fff;
    --color-dark: #1a1a1a;
    /* Footer */
    --color-footer-bg: var(--color-primary);
    --color-footer-bottom: var(--color-dark);
    /* 共用圓角 / 動畫 */
    --radius-card: 12px;
    --radius-pill: 30px;
    --transition-fast: .25s ease;
    --transition-normal: .3s ease;
    /* YouTube icon */
    --youtube-icon-width: 18px;
    --youtube-icon-height: 13px;
    --youtube-icon-radius: 4px;
    /* Swiper 箭頭 */
    --swiper-arrow-size: 36px;
    --swiper-arrow-bg: #111;
    --swiper-arrow-color: var(--color-white);
    /* Hamburger */
    --hamburger-line-width: 28px;
    --hamburger-line-height: 3px;
    --hamburger-line-color: #63666a;
    --hamburger-line-radius: 2px;
    --hamburger-speed: .25s;
    /* 黑色遮罩 */
    --overlay-dark: rgba(0, 0, 0, .58);
}

/* img-fit 模糊底圖（中文站專用的參數）
   img-fit.js 是 14 站共用檔（Shared\ 同步，打包前會比對），不能只改中文站那份，
   所以參數在這裡覆寫。JS 把 --img-fit-* 寫在 <html> 的 inline style，:root 蓋不過 inline，
   要掛在 body：底圖的 ::before 都在 body 底下，會繼承這裡的值。 */
body {
    --img-fit-blur: 8px;
    --img-fit-bg-opacity: .95;
}


/* =========================================================
通用
========================================================= */

/* 首頁區塊進場動畫 */
.home.indexHome .homeReveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .75s ease, transform .95s ease;
    transition-delay: var(--reveal-delay, 0ms);
}

.home.indexHome .homeReveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 場地出租頁面清除連結樣式 */
.topicCategoriesHeader a,
.rwdHeader a,
.footer a,
.breadCrumb a {
    text-decoration: none;
}
.breadCrumb a {
    color: #333;
}
/* Bootstrap form-select 會額外帶箭頭，關閉背景箭頭 */
.topicCategoriesHeader .languageTab {
    background-image: none !important;
}


.scorll-top {
    display: block !important;
    position: fixed;
    z-index: 30;
    width: 50px;
    height: 50px;
    right: 1.6%;
    top: 92%;
    background: #1a1a1ade;
    backdrop-filter: blur(2px);
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(80px);
    transition: opacity .35s ease, transform .45s ease, visibility .35s ease, background-color .3s ease;
}
.scorll-top:hover {
    background: var(--color-dark);
}
.scorll-top.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.scorll-top a {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scorll-top a img {
    transform: scale(0.6);
}

/* 滑鼠點擊時，不顯示舊版 focus 樣式 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* 舊版部分連結用 border 當 focus，滑鼠操作時另外清掉 */
.footer a:focus:not(:focus-visible),
.podcastToday a:focus:not(:focus-visible) {
    border: none !important;
}

/* 全站：鍵盤操作保留焦點提示 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px dashed var(--color-primary) !important;
    outline-offset: 3px;
}

/* 無障礙：減少動畫 */
@media (prefers-reduced-motion: reduce) {
    .home.indexHome img,
    .searchModal,
    .searchModal .cont,
    .searchModalClose,
    .topicCategoriesHeader .headerNav .moreMenuList,
    .topicCategoriesHeader .headerNav .topMoreOne img {
        transition: none !important;
    }

    .header .topicCategoriesHeader .headerNav .moreMenuList,
    .header .topicCategoriesHeader .headerNav .topMoreOne img {
        transform: none !important;
    }

    .home.indexHome .indexHotBroadcast {
        animation: none !important;
    }

    .home.indexHome .homeReveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .home.indexHome .audioFocus.indexAudio {
        background-attachment: scroll;
        background-position: center center !important;
    }
    .scorll-top {
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================================
Header
========================================================= */
/* 語系切換 */
/* 語系 select */
.topicCategoriesHeader .headerBottom .bottomMenu > .list {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
    flex-shrink: 0;
}

.topicCategoriesHeader .headerBottom .bottomMenu > .list .languageTab {
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--color-text);
    font-size: 1em;
    border: 0;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* 箭頭 */
.topicCategoriesHeader .headerBottom .bottomMenu > .list::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--color-text);
    border-bottom: 1.5px solid var(--color-text);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--transition-fast);
    pointer-events: none;
}

/* 展開狀態 */
.topicCategoriesHeader .headerBottom .bottomMenu > .list.is-open::after {
    transform: translateY(-30%) rotate(225deg);
}

/* Podcast Header：語系跟在 Podcast Search 右側 */
.topicCategoriesHeader .headerBottom .bottomMenu > .podcastLanguage {
    margin-left: 16px;
    margin-right: 0;
}

/* Header 共用文字 / 內頁標題 */
.topicCategoriesHeader .headerBottom .bottomMenu .center .line {
    font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif !important;
}

.header .headerBottom .bigTitle {
    font-size: 1.57em;
    transform: translateY(-9px);
}

.header .headerBottom .breadModal .item a {
    font-size: 1.2em;
}

/* 內頁 Menu  */
.topicCategoriesHeader.classifyHeader .headerBottom .left {
    width: 6%;
}

.topicCategoriesHeader .headerBottom .breadMenu {
    text-align: center;
}

/* 點擊區 */
.topicCategoriesHeader .headerBottom .breadMenu > a {
    position: relative;
    width: 42px;
    height: 36px;
    display: block;
    cursor: pointer;
    transform: translateY(4px);
}

/* 原本兩張圖片保留給 JS 判斷狀態，但視覺隱藏 */
.topicCategoriesHeader .headerBottom .breadMenu > a .menuBread,
.topicCategoriesHeader .headerBottom .breadMenu > a .menuClose {
    position: absolute;
    opacity: 0 !important;
    pointer-events: none;
}

/* 上、下兩條線 */
.topicCategoriesHeader .headerBottom .breadMenu > a::before,
.topicCategoriesHeader .headerBottom .breadMenu > a::after {
    content: "";
    position: absolute;
    left: 7px;
    width: var(--hamburger-line-width);
    height: var(--hamburger-line-height);
    background: var(--hamburger-line-color);
    border-radius: var(--hamburger-line-radius);
    transition: top var(--hamburger-speed) ease, transform var(--hamburger-speed) ease, box-shadow var(--hamburger-speed) ease;
}

/* 上線 + 中線 */
.topicCategoriesHeader .headerBottom .breadMenu > a::before {
    top: 8px;
    box-shadow: 0 9px 0 var(--hamburger-line-color);
}

/* 下線 */
.topicCategoriesHeader .headerBottom .breadMenu > a::after {
    top: 26px;
}

/* 展開後變 X */
.topicCategoriesHeader .headerBottom .breadMenu > a:has(.menuClose[style*="inline"])::before {
    top: 16px;
    box-shadow: none;
    transform: rotate(45deg);
}

.topicCategoriesHeader .headerBottom .breadMenu > a:has(.menuClose[style*="inline"])::after {
    top: 16px;
    transform: rotate(-45deg);
}

.barTop .title h2 {
    font-size: 1.675em !important;
    transform: translateY(10px);
}

/* 搜尋 Modal  */
.searchModal {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

/* 開啟 */
.searchModal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 搜尋內容由上往下滑入 */
.searchModal .cont {
    transform: translateY(-30px);
    transition: transform .35s ease;
}

.searchModal.is-open .cont {
    transform: translateY(0);
}

/* 關閉按鈕 */
.searchModalClose {
    position: fixed;
    top: 28px;
    right: 32px;
    z-index: 1002;
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: #222;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.searchModalClose:hover {
    background: var(--color-primary);
}

.searchModalClose:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* 桌機主選單下拉動畫 */
.header .topicCategoriesHeader .headerNav .moreMenuList {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .28s ease, visibility .22s ease;
}

/* 桌機展開 */
.header .topicCategoriesHeader .headerNav .moreMenuList.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* 桌機更多選單箭頭動畫 */
.header .topicCategoriesHeader .headerNav .topMoreOne img {
    transition: transform .28s ease;
    transform-origin: center;
}

.header .topicCategoriesHeader .headerNav .topMoreOne.is-open img {
    transform: rotate(180deg);
}

/* Header 紅底資訊區：改用微軟正黑體提升小字顯示清晰度 */
.header .topicCategoriesHeader .headerTop,
.header .topicCategoriesHeader .headerTop a,
.header .topicCategoriesHeader .headerTop button,
.header .topicCategoriesHeader .headerTop input,
.header .topicCategoriesHeader .headerTop select {
    font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif !important;
    font-weight: 700 !important;
}

.home.indexHome .focusReporting {
    padding-bottom: 0;
}

.topicCategoriesHeader,
.contentHeader {
    height: 142px;
    background-color: var(--color-white);
    box-shadow: none;
    transition: box-shadow var(--transition-fast);
}

.topicCategoriesHeader.is-scrolled,
.contentHeader.is-scrolled {
    box-shadow: 4px 6px 17px 4px rgb(0 0 0 / 7%);
    border-bottom: 1px solid #e7e7e7;
}

/* 上方功能列 */
.topicCategoriesHeader .headerTop {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 10%;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Header 上方功能列 - 左右分組 */
.topicCategoriesHeader .headerTop .headerTopLeft,
.topicCategoriesHeader .headerTop .headerTopRight {
    display: flex;
    align-items: center;
}

.topicCategoriesHeader .headerTop .headerTopRight {
    margin-left: auto;
    gap: 8px;
}

/* 上方文字連結 */
.topicCategoriesHeader .headerTop a {
    color: var(--color-white);
    font-size: 0.91em;
    margin: 0 10px;
}

.topicCategoriesHeader .headerTop a:hover {
   color: #fff3d1;
}

.topicCategoriesHeader .headerTop .selMenu a {
    color: var(--color-text);
}

/* 分隔線 */
.topicCategoriesHeader .headerTop .line {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    margin-right: 7px;
}

/* 下拉選單 */
.topicCategoriesHeader .headerTop .form-select {
    color: var(--color-white);
    background-color: transparent;
    font-size: 1.0625em;
}

/* 下拉選單裡的文字 */
.topicCategoriesHeader .headerTop .form-select option {
    color: var(--color-text);
    background: var(--color-white);
}

/* 白底menu區 */
.topicCategoriesHeader .headerBottom {
    width: 80%;
    margin: 0 auto;
    height: 98px;
    display: flex;
    align-items: center;
}

/* menu內容 */
.topicCategoriesHeader .headerBottom .bottomMenu {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Logo + 選單區 */
.topicCategoriesHeader .headerBottom .bottomMenu .center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Logo */
.topicCategoriesHeader .headerBottom .bottomMenu .center .logoWrap {
    top: 0;
    margin-right: 10px;
    flex-shrink: 0;
}

.topicCategoriesHeader .headerBottom .bottomMenu .center .logoWrap img {
    height: 48px;
    width: auto;
}

/* 主選單 */
.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav {
    margin-top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 主選單文字 */
.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav a {
    position: relative;
    font-size: 1.1875em;
    color: #4d4d4d;
    margin-right: 30px;
    transition: color var(--transition-fast);
}

/* 底線動畫 */
.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 4px;
    background: var(--color-primary);
    transform: translateX(-50%);
    transition: width var(--transition-fast);
    border-radius: 20px;
}

/* Hover */
.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav > a:not(.active):hover {
    color: var(--color-primary);
}

    .topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav > a:not(.active):hover::after {
        width: 100%;
    }

/* 目前所在項目底線 */
.topicCategoriesHeader
.headerBottom
.bottomMenu
.center
.headerNav
a.active::before {
    border-bottom-color: var(--color-primary);
    bottom: -10px;
}

/* 關於央廣等有下拉的主選單 */
.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav > .moreMenu > .topMoreOne {
    position: relative;
    transition: color var(--transition-fast);
}

.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav > .moreMenu > .topMoreOne::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 4px;
    background: var(--color-primary);
    transform: translateX(-50%);
    transition: width var(--transition-fast);
    border-radius: 20px;
}

.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav > .moreMenu > .topMoreOne:not(.active):hover {
    color: var(--color-primary);
}

.topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav > .moreMenu > .topMoreOne:not(.active):hover::after {
    width: 100%;
}

/* 關於央廣 Header 專用間距 */
.topicCategoriesHeader.contentHeader
.headerBottom
.bottomMenu
.center
.headerNav {
    gap: 0;
}

.topicCategoriesHeader.contentHeader
.headerBottom
.bottomMenu
.center
.headerNav > a,
.topicCategoriesHeader.contentHeader
.headerBottom
.bottomMenu
.center
.headerNav > .moreMenu > .topMoreOne {
    margin-right: 20px;
    font-size: 1.05em;
}


/* Header 搜尋按鈕 */
.topicCategoriesHeader .headerBottom .bottomMenu .right {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    padding: 0;
    position: static;
    right: auto;
    top: auto;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.topicCategoriesHeader .headerBottom .bottomMenu .right:hover {
    background-color: var(--color-primary-hover);
    opacity: 1;
}

.topicCategoriesHeader .headerBottom .bottomMenu .right a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topicCategoriesHeader .headerBottom .bottomMenu .right img {
    display: block;
}

/* 隱藏搜尋文字 */
.topicCategoriesHeader .headerBottom .bottomMenu .right span {
    display: none;
}

/* 地球圖示 */
.topicCategoriesHeader .headerBottom .bottomMenu > .list > img {
    display: none;
}

/* 分享、字級 */
.topicCategoriesHeader .headerTop .headerTopRight > .list {
    margin: 0;
    padding: 0;
}

.topicCategoriesHeader .headerTop .headerTopRight > .list > img,
.topicCategoriesHeader .headerTop .headerTopRight > .list > .line {
    display: none;
}

/* 分享 */
.topicCategoriesHeader .headerTop .shareToggle {
    height: 24px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: 20px;
    transition: background-color .2s ease;
    cursor: pointer;
}

.topicCategoriesHeader .headerTop .shareToggle .selInput {
    width: auto;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: .9em;
    line-height: 24px;
    transition: color .2s ease;
    cursor: pointer;
}

.topicCategoriesHeader .headerTop .shareToggle > img {
    display: none;
}

/* 字級 */
.topicCategoriesHeader .headerTop #fontSizeSelect {
    width: 68px;
    min-width: 68px;
    height: 24px;
    margin: 0;
    padding: 0;
    color: var(--color-primary);
    background: var(--color-white);
    border: 0;
    border-radius: 20px;
    font-size: .9em;
    line-height: 24px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    transition: color .2s ease, background-color .2s ease;
    cursor: pointer;
}


/*Header 分享下拉選單*/
.topicCategoriesHeader .headerTop .mySel {
    position: relative;
}

.topicCategoriesHeader .headerTop .selMenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 170px;
    min-width: 170px;
    margin: 0;
    padding: 12px 7px;
    background: rgba(255, 255, 255, .97);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    text-align: left;
    list-style: none;
    z-index: 120;
    backdrop-filter: blur(5px);
}

.topicCategoriesHeader .headerTop .selMenu::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotate(45deg);
}

.topicCategoriesHeader .headerTop .selMenu li {
    width: 100%;
    margin: 0;
    padding: 0;
}

.topicCategoriesHeader .headerTop .selMenu li + li {
    margin-top: 3px;
}

.topicCategoriesHeader .headerTop .selMenu a {
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    color: #5d5d5d;
    background: transparent;
    font-size: .95em;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    border-radius: 8px;
    text-decoration: none !important;
    transition: color .2s ease, background-color .2s ease;
}

.topicCategoriesHeader .headerTop .selMenu a:hover {
    color: var( --color-dark) !important;
    background-color: #f5f5f5;
}

.topicCategoriesHeader .headerTop .selMenu a:focus-visible {
    color: var( --color-dark) !important;
    background-color: #f5f5f5;
    outline: 2px dashed var(--color-primary) !important;
    outline-offset: -2px;
}

    /* icon */
    .topicCategoriesHeader .headerTop .selMenu a::before {
        content: "";
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* YouTube */
    .topicCategoriesHeader .headerTop .selMenu li:nth-child(1) a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8Z'/%3E%3Cpath fill='%23fff' d='m9.6 15.5 6.2-3.5-6.2-3.5v7Z'/%3E%3C/svg%3E");
    }

    /* Facebook */
    .topicCategoriesHeader .headerTop .selMenu li:nth-child(2) a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877f2' d='M24 12a12 12 0 1 0-13.88 11.85v-8.39H7.08V12h3.04V9.36c0-3 1.79-4.66 4.52-4.66 1.31 0 2.68.23 2.68.23v2.95H15.8c-1.5 0-1.97.93-1.97 1.88V12h3.35l-.54 3.46h-2.81v8.39A12 12 0 0 0 24 12Z'/%3E%3C/svg%3E");
    }



/* Header 熱門 Tag */
.topicCategoriesHeader .headerTop .headerTags {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
}

.topicCategoriesHeader .headerTop .headerTags .headerTag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin: 0;
    padding: 0 12px;
    color: var(--color-primary);
    background: var(--color-white);
    border-radius: 20px;
    font-size: .9em;
    line-height: 24px;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.topicCategoriesHeader .headerTop .headerTags .headerTag:hover {
    color: var(--color-white);
    background-color: var(--color-text);
}

.topicCategoriesHeader .headerTop .shareToggle:hover,
.topicCategoriesHeader .headerTop .shareToggle.is-open {
    background-color: var(--color-text);
}

.topicCategoriesHeader .headerTop .shareToggle:hover .selInput,
.topicCategoriesHeader .headerTop .shareToggle.is-open .selInput {
    color: var(--color-white);
}

/* 字級 Hover */
.topicCategoriesHeader .headerTop #fontSizeSelect:hover,
.topicCategoriesHeader .headerTop #fontSizeSelect:focus {
    color: var(--color-white);
    background-color: var(--color-text);
}

/* 鍵盤操作也要有同等提示 */
.topicCategoriesHeader .headerTop .shareToggle:has(.selInput:focus-visible),
.topicCategoriesHeader .headerTop #fontSizeSelect:focus-visible,
.topicCategoriesHeader .headerTop .headerTopLeft > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* =========================================================
首頁 - 共用
========================================================= */
/* 首頁圖片 Hover 微放大 */
.home.indexHome .newMainVisualImage img,
.home.indexHome .newHomeCardImage > img,
.home.indexHome .hotTopic.keywordsTop .indexkeyword .keyImg,
.home.indexHome .newProgramCardImage > img,
.home.indexHome .audioFocus.indexAudio .swiper-item .img > img,
.home.indexHome .focusClassify.pcShow .item .imgBg > img,
.home.indexHome .audioFocus.Shorts .shortsImage > img {
    transition: transform .5s ease;
}

/* Hover */
.home.indexHome .newMainVisualLink:hover .newMainVisualImage img,
.home.indexHome .newHomeCard > a:hover .newHomeCardImage > img,
.home.indexHome .hotTopic.keywordsTop .indexkeyword:hover .keyImg,
.home.indexHome .newProgramCard > a:hover .newProgramCardImage > img,
.home.indexHome .audioFocus.indexAudio .swiper-item > a:hover .img > img,
.home.indexHome .focusClassify.pcShow .item .img > a:hover .imgBg > img,
.home.indexHome .audioFocus.Shorts .swiper-item > a:hover .shortsImage > img {
    transform: scale(1.05);
}

/* 首頁的圖一律完整顯示不裁切，放大只留給 hover；空白處墊模糊底圖（--bg-img 由 img-fit.js 設在容器上）。
   影音縮圖刻意維持 cover：YouTube 480x360 上下有黑邊，cover 才裁得掉。 */
.home.indexHome .warpList.focusList.newHomeCards .newHomeCard .newHomeCardImage::before,
.home.indexHome .warpList .item .img.newProgramCardImage::before,
.home.indexHome .focusClassify.pcShow .item .imgBg::before {
    opacity: var(--img-fit-bg-opacity, .55);
}

.home.indexHome {
    padding-top: 110px;
}


/* =========================================================
首頁主視覺新聞大圖
========================================================= */
/* 首頁上半部-左右間距 */
.home.indexHome .focusReporting .flexJust {
    position: relative;
    gap: 40px;
}

/* 無障礙定位點*/
.home.indexHome .focusReporting .flexJust > .accesskey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    margin: 0;
    color: transparent;
}

/* 鍵盤操作時顯示 */
.home.indexHome .focusReporting .flexJust > .accesskey:focus {
    left: 8px;
    top: 8px;
    z-index: 10;
    padding: 6px 10px;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 4px;
    outline: 2px dashed #fff !important;
    outline-offset: -4px;
}

.home.indexHome .newMainVisual {
    width: 100%;
    position: relative;
}

.home.indexHome .newMainVisualLink {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    color: var(--color-white);
}

/* 主圖 */
.home.indexHome .newMainVisualImage {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: #eee;
max-height: 520px;
}

/* 模糊底圖：框與圖比例不同時墊在空白處，數值沿用 img-fit（--bg-img 由 index.cshtml 輸出） */
.home.indexHome .newMainVisualImage::before {
    content: "";
    position: absolute;
    inset: var(--img-fit-bg-inset, 0);
    background-image: var(--bg-img, none);
    background-size: cover;
    background-position: center;
    filter: blur(var(--img-fit-blur, 20px));
    opacity: var(--img-fit-bg-opacity, .55);
}

/* 完整顯示不裁切，放大只留給 hover */
.home.indexHome .newMainVisualImage img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* 圖片遮罩 */
.home.indexHome .newMainVisualLink::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
/*   background: var(--overlay-dark);*/
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.72) 60%, rgba(0, 0, 0, 0.86) 100%);
}

/* 文字區 */
.home.indexHome .newMainVisualOverlay {
    width: 62%;
    position: absolute;
    left: 7%;
    bottom: 12%;
    z-index: 2;
    padding: 0;
    color: var(--color-white);
}

/* 標題 */
.home.indexHome .newMainVisualTitle {
    width: 65%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 2.1875em;
    font-weight: 700;
    line-height: 1.4;
}

.home.indexHome .newMainVisualTitle span {
    color: var(--color-white);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 音訊 icon */
.home.indexHome .newMainVisualAudio {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 6px;
}

/* 內文 */
.home.indexHome .newMainVisualText {
    width: 100%;
    margin-bottom: 22px;
    color: var(--color-white);
    font-size: 1.0625em;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 下方按鈕區 */
.home.indexHome .newMainVisualBottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 發布時間暫時隱藏 */
.home.indexHome .newMainVisualDate {
    display: none;
}

/* 觀看更多 */
.home.indexHome .newMainVisualMore {
    min-width: 124px;
    padding: 10px;
    color: var(--color-white);
    font-size: 1.0625em;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-card);
    transition: var(--transition-fast);
}

.home.indexHome .newMainVisualLink:hover .newMainVisualMore {
    color: var(--color-text);
    background-color: var(--color-white);
}


/* =========================================================
首頁主視覺下方三則
========================================================= */
.home.indexHome .newHomeCards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 29px;
    margin-top: 28px;
}

.home.indexHome .newHomeCards .newHomeCard {
    width: 100%;
    margin: 0;
    padding: 0;
}

.home.indexHome .newHomeCard > a {
    display: block;
    color: var(--color-text);
}

/* 圖片區 */
.home.indexHome .warpList.focusList.newHomeCards .newHomeCard .newHomeCardImage {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-card);
    background: none;
}

/* 圖片 */
.home.indexHome .warpList.focusList.newHomeCards .newHomeCard .newHomeCardImage > img {
    max-width: none;
    display: block;
    object-fit: contain;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* 圖片遮罩 */
.home.indexHome .warpList.focusList.newHomeCards .newHomeCard .newHomeCardImage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--overlay-dark);
}

/* 標題：圖片內垂直置中 */
.home.indexHome .warpList.focusList.newHomeCards .newHomeCard .newHomeCardImageTitle {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    bottom: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    color: var(--color-white);
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1.45;
    transform: translateY(-50%);
}

/* 標題 */
.home.indexHome .warpList.focusList.newHomeCards .newHomeCard .newHomeCardImageTitle span {
    color: var(--color-white);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Audio */
.home.indexHome .warpList.focusList.newHomeCards .newHomeCard .newHomeCardImageTitle > img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

/* 摘要 */
.home.indexHome .newHomeCardText {
    margin-top: 14px;
    color: #444;
    font-size: 1.0625em;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    transition: all .5s ease;
}

.home.indexHome .newHomeCards .newHomeCard:hover .newHomeCardText {
    color: #e52431;
}

/* 發布時間 */
.home.indexHome .newHomeCardDate {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #777;
    font-size: 1em;
    flex-wrap: wrap-reverse;
}

.home.indexHome .newHomeCardDate > img {
    width: 15px;
    height: auto;
    transform: translateY(1px);
}


/* =========================================================
首頁一周熱門話題 TOP5
========================================================= */
/* 暫隱藏關鍵字 Tag */
.home.indexHome .hotTopic.keywordsTop > .topTitle {
    display: none;
}

/* TOP5 標題 */
.home.indexHome .hotTopic.keywordsTop .hotList::before {
    content: "一周熱門話題TOP5";
    display: block;
    margin-bottom: 14px;
    padding-left: 14px;
    color: var(--color-text);
    font-size: 1.375em;
    font-weight: 700;
    line-height: 1.35;
    border-left: 4px solid var(--color-primary);
}

/* 清除舊版 hotList 排版 */
.home.indexHome .hotTopic.keywordsTop .hotList {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 第一則大圖 */
.home.indexHome .hotTopic.keywordsTop .indexkeyword {
    width: 100%;
    margin-bottom:-5px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-card);
    aspect-ratio: 16 / 9;
}

.home.indexHome .hotTopic.keywordsTop .indexkeyword > a {
    width: 100%;
    height: 100%;
    display: block;
}

/* 模糊底圖：橫圖也墊底，--bg-img 由 img-fit.js 設在 <a> 上 */
.home.indexHome .hotTopic.keywordsTop .indexkeyword > a::before {
    inset: var(--img-fit-bg-inset, 0);
    opacity: var(--img-fit-bg-opacity, .55);
}

/* 完整顯示不裁切，放大只留給 hover */
.home.indexHome .hotTopic.keywordsTop .indexkeyword .keyImg {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    margin: 0;
    object-fit: contain;
}

/* 每一則 TOP5 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item {
    width: 100%;
    margin: 0;
    padding: 10px 0 12px 0;
    border-bottom: 1px solid #ddd;
    border-left: none;
    /* 取消 style.css 的 top:20px：相對位移不佔高度，右欄最高時（如字級放大）會溢出蓋到下排節目卡 */
    top: 0;
}

.home.indexHome .hotTopic.keywordsTop .indexkeyword + .item {
    padding-top: 0;
    /* 補回上面取消的 20px，改由版面佔位 */
    margin-top: 20px;
}

/* 最後一則不需要分隔線 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item:last-child {
    border-bottom: 0;
}

/* 清除舊版黑色圓點 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item .left {
    display: none;
}

/* 文字區 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item .right {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 整個連結 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item > a {
    width: 100%;
    display: block;
    color: var(--color-text);
    padding-bottom: 0;
}

/* 標題 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item .title {
    margin: 0;
    color: var(--color-text);
    font-size: 1.0625em;
    font-weight: 700;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: all .5s ease;
}

.home.indexHome .hotTopic.keywordsTop .hotList > .item:hover .title {
    color: #e52431;
}

/* 第一則標題文字 */
.home.indexHome .hotTopic.keywordsTop
.hotList > .indexkeyword + .item .title {
    font-size: 1.25em;
    line-height: 1.45;
}

/* Audio icon */
.home.indexHome .hotTopic.keywordsTop
.hotList > .item .title img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    object-fit: contain;
}

/* 第一則摘要 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item .tit {
    margin-top: 3px;
    color: #555;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 發布時間 */
.home.indexHome .hotTopic.keywordsTop .hotList > .item .date {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #888;
    font-size: 1em;
}

/* 時間 icon */
.home.indexHome .hotTopic.keywordsTop
.hotList > .item .date > img {
    width: 15px;
    height: auto;
    margin: 0;
    transform: translateY(1px);
}


/* =========================================================
首頁節目四則
========================================================= */
.home.indexHome .newProgramCards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 29px;
}

.home.indexHome .newProgramCards .newProgramCard {
    width: 100%;
    margin: 0;
    padding: 0;
}

.home.indexHome .newProgramCard > a {
    width: 100%;
    display: block;
    color: var(--color-text);
}

/* 圖片 */
.home.indexHome .newProgramCardImage {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-card);
}

.home.indexHome .warpList .item .img.crop.newProgramCardImage > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* 節目標籤-底色 */
.home.indexHome .newProgramCardBadge {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 78px;
    height: 58px;
    padding: 0;
    background: var(--color-primary-soft);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 節目標籤-文字 */
.home.indexHome .newProgramCardBadge > span {
    font-family: "Microsoft JhengHei", "Noto Sans TC", sans-serif !important;
    position: absolute;
    left: 8px;
    top: 10px;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* 標題 */
.home.indexHome .newProgramCardTitle {
    margin-top: 12px;
    color: var(--color-text);
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    transition: all var(--transition-normal);
}

/* 摘要 */
.home.indexHome .newProgramCardText {
    margin-top: 4px;
    color: #444;
    font-size: 1.0625em;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 時間 */
.home.indexHome .newProgramCardDate {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #777;
    font-size: 1em;
    flex-wrap: wrap-reverse;
}

.home.indexHome .newProgramCardDate > img {
    width: 15px;
    height: auto;
    transform: translateY(2px);
}


/* =========================================================
首頁影音焦點
========================================================= */
.home.indexHome .audioFocus.indexAudio {
    position: relative;
    width: 100%;
    padding: 65px 0 80px;
    overflow: hidden;
    background-image: url("/Static/tw/image/videobg2.jpg");
    background-size: cover;
    background-position: center calc(50% + var(--video-parallax, 0px));
    background-attachment: fixed;
}

.home.indexHome .audioFocus.indexAudio > .container {
    position: relative;
}

/* 標題列 */
.home.indexHome .audioFocus.indexAudio .audioTitle {
    position: relative;
    margin: 0 0 40px;
    padding: 0;
    border: 0;
    display: block;
}

/* 影音焦點 */
.home.indexHome .audioFocus.indexAudio .audioTitle .subtitle {
    color: var(--color-white);
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* YouTube */
.home.indexHome .audioFocus.indexAudio .audioTitle .YouTube {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 5px 10px;
    color: var(--color-text);
    background: #ffffffeb;
    border: 0;
    border-radius: var(--radius-pill);
    line-height: 1.6;
    transform: translateY(-50%);
    font-size: 14px;
}

.home.indexHome .audioFocus.indexAudio .audioTitle .YouTube:hover {
    color: #ffffffeb;
    background: #1a1a1a;
}

.home.indexHome .audioFocus.indexAudio .audioTitle .YouTube::before {
    content: "";
    width: var(--youtube-icon-width);
    height: var(--youtube-icon-height);
    display: inline-block;
    flex-shrink: 0;
    background: #e82027;
    border-radius: var(--youtube-icon-radius);
}

.home.indexHome .audioFocus.indexAudio .audioTitle .YouTube::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid #fff;
    transform: translateY(-50%);
}

/* 縮圖區 */
.home.indexHome .audioFocus.indexAudio .swiper-slide {
    display: flex;
    justify-content: space-between;
    gap: 36px;
    text-align: left;
}

/* 清掉舊版固定寬度與 margin */
.home.indexHome .audioFocus.indexAudio .swiper-item {
    width: calc((100% - 72px) / 3);
    margin: 0;
    min-width: 0;
}

/* 縮圖 */
.home.indexHome .audioFocus.indexAudio .swiper-item .img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 15px;
}

.home.indexHome .audioFocus.indexAudio .swiper-item .img > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* 標題 */
.home.indexHome .audioFocus.indexAudio .swiper-item .titles {
    padding-top: 16px;
    color: var(--color-white);
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    transition: all .5s ease;
}

.home.indexHome .audioFocus.indexAudio .swiper-item:hover .titles {
    color: #ff8d8d;
}

/* 標題前的yt縮圖 */
.home.indexHome .audioFocus.indexAudio .swiper-item .titles > img {
    position: relative;
    top: 3px;
    margin-right: -5px;
}

.home.indexHome .audioFocus.indexAudio .swiper-item .date {
    margin-top: 2px;
}

/* 時間 */
.home.indexHome .audioFocus.indexAudio .swiper-item .date .time {
    color: #e2f1ffb5;
    font-size: 0.78em;
    padding-left: 7px;
}

/* 時間ICON */
.home.indexHome .audioFocus.indexAudio .swiper-item .date img {
    filter: invert(1);
    transform: translateY(1px);
}

/* Swiper 區塊 */
.home.indexHome .audioFocus.indexAudio .audioSwiperWrap {
    position: relative;
}

.home.indexHome .audioFocus.indexAudio .audioSwiper {
    overflow: hidden;
}

/* 左右箭頭 */
.swiper-button-next:after, .swiper-button-prev:after {
    transition: color .3s ease;
}
.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-prev,
.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-next {
    top: 38%;
    width: var(--swiper-arrow-size);
    height: var(--swiper-arrow-size);
    margin: 0;
    color: var(--swiper-arrow-color);
    background: var(--swiper-arrow-bg);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-next:hover:after,
.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-prev:hover:after{
    color: var(--color-primary);
}

.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-prev {
    left: -50px;
}

.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-next {
    right: -50px;
}

.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-prev::after,
.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-next::after {
    font-size: 12px;
    font-weight: 700;
}

.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-prev::after {
    transform: translate(-1px, 1px);
}

.home.indexHome .audioFocus.indexAudio .audioSwiperWrap > .swiper-button-next::after {
    transform: translate(1px, 1px);
}


/* =========================================================
首頁八大焦點
========================================================= */
.home.indexHome .classificatin {
    padding: 70px 0 80px;
    background: var(--color-white);
}

.home.indexHome .focusClassify.pcShow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 42px 30px;
}

.home.indexHome .focusClassify.pcShow > .wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 分類標題 */
.home.indexHome .focusClassify.pcShow .item > .title {
    position: relative;
    display: block;
    margin: 0 0 12px;
    padding: 0 0 0 11px;
    color: var(--color-text);
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.4;
}

/*紅線 */
.home.indexHome .focusClassify.pcShow .item > .title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 22px;
    background: var(--color-primary);
    transform: translateY(-50%);
}

/* 隱藏舊版箭頭 */
.home.indexHome .focusClassify.pcShow .item > .title .rightImg {
    display: none;
}

/* 圖片區 */
.home.indexHome .focusClassify.pcShow .item > .img {
    position: relative;
    width: 100%;
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-card);
}

/* 圖片遮罩-黑色漸層 */
.home.indexHome .focusClassify.pcShow .item > .img::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 20%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.82) 78%, rgba(0, 0, 0, 0.96) 100% );
}

/* 不同比例圖片統一裁切 */
.home.indexHome .focusClassify.pcShow .item .imgBg > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 圖片上標題 */
.home.indexHome .focusClassify.pcShow .item .mask {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    padding: 0;
    color: var(--color-white);
    font-size: 1em;
    line-height: 1.5;
    background: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


/* =========================================================
首頁 Live 午間新聞
========================================================= */
.home.indexHome .indexHotBroadcast {
    position: relative;
    padding: 55px 0 65px;
    color: var(--color-white);
    background-image: url("/Static/tw/image/HotBroadcastBG2.jpg");
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: auto 100%;
    animation: hotBroadcastWave 60s linear infinite;
    min-height: 280px;
}

@keyframes hotBroadcastWave {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: -2000px;
    }
}

.home.indexHome .indexHotBroadcast > .container {
    width: 80%;
    position: relative;
    text-align: center;
}

/* 標題 */
.home.indexHome .indexHotBroadcast .liveCurrentTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 0 10px;
    color: var(--color-white);
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.35;
}

.home.indexHome .indexHotBroadcast .liveCurrentTitle .liveTitleText {
    color: var(--color-white);
}

.home.indexHome .indexHotBroadcast .liveCurrentTitle .programLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(3px, -4px);
}

.home.indexHome .indexHotBroadcast .liveCurrentTitle .programLink img {
    width: 16px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .7;
    transition: all .3s ease;
}
.home.indexHome .indexHotBroadcast .liveCurrentTitle .programLink:hover img {
    opacity: 1;
}

/* ON AIR + 頻道選擇 */
.home.indexHome .indexHotBroadcast .liveControl {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

/* ON AIR */
.home.indexHome .indexHotBroadcast .liveControl .onAirPlayBtn {
    min-height: 36px;
    padding: 4px 17px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: .975em;
    line-height: 1;
    white-space: nowrap;
    transition: all var(--transition-normal);
}

.home.indexHome .indexHotBroadcast .liveControl .onAirPlayBtn:hover {
    background: #e50010;
}

.home.indexHome .indexHotBroadcast .onAirPlayBtn img {
    width: 15px;
    height: auto;
}

/* 頻道選擇 */
.home.indexHome .indexHotBroadcast .selectLive {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
}

.home.indexHome .indexHotBroadcast .selectLive .moreMenu {
    position: relative;
    width: auto;
    margin: 0;
}

/* 頻道選擇按鈕 */
.home.indexHome .indexHotBroadcast .selectLive .moreMenu > .topMoreOne {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px;
    margin: 0;
    padding: 4px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #333 !important;
    background: #fff !important;
    border: 0;
    border-radius: var(--radius-pill);
    font-size: 0.875em;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: all var(--transition-normal);
}

.home.indexHome .indexHotBroadcast .selectLive .moreMenu > .topMoreOne:hover,
.home.indexHome .indexHotBroadcast .selectLive .moreMenu > .topMoreOne.is-open {
    color:  var(--color-white) !important;
    background: #333 !important;
}

.home.indexHome .indexHotBroadcast .selectLive .moreMenu > .topMoreOne:hover .subtitles,
.home.indexHome .indexHotBroadcast .selectLive .moreMenu > .topMoreOne.is-open .subtitles{
    color:  var(--color-white) !important;
}

.home.indexHome .indexHotBroadcast .selectLive .topMoreOne .subtitles {
    color: #333 !important;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1;
    margin-right: 0;
}

.home.indexHome .indexHotBroadcast .selectLive .topMoreOne .subtitles:hover {
    color: #fff !important;
}

.home.indexHome .indexHotBroadcast .selectLive .topMoreOne img {
    width: 11px;
    height: auto;
    transition: transform .28s ease;
    transform-origin: center;
}

/* 頻道選單展開時，箭頭翻轉 */
.home.indexHome .indexHotBroadcast
.selectLive
.moreMenu:has(.courseModal[style*="display: block"]) > .topMoreOne img {
    transform: rotate(180deg);
}


/* 頻道下拉 */
.home.indexHome .indexHotBroadcast .selectLive .courseModal {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 50%;
    min-width: 260px;
    padding: 20px 25px;
    transform: translateX(-50%);
    background: #ffffffba;
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
    border: 1px solid #ffffff3d;
}

.home.indexHome .indexHotBroadcast .selectLive .courseModal .courseModalTitle {
    padding-bottom: 8px;
    color: #63666A;
    font-size: .875em;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.home.indexHome .indexHotBroadcast .selectLive .courseModal .item a {
    display: block;
    padding: 12px 0;
    color: var(--color-text);
    background: none;
    white-space: normal;
    text-align: left;
    margin: 0;
}
.home.indexHome .indexHotBroadcast .selectLive .courseModal .item a:hover {
    color: var(--color-primary);
}

/* Live 內容 */
.home.indexHome .indexHotBroadcast .hotDate {
    display: none;
}

.home.indexHome .indexHotBroadcast .hotDate.active {
    display: block;
}

/* 主持人 */
.home.indexHome .indexHotBroadcast .hotDate .date {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.25em;
    font-weight: 700;
}

.home.indexHome .indexHotBroadcast .hotDate .date img {
    height: auto;
    filter: brightness(0) invert(1);
    transform: translate(-2px, 1px);
}

.home.indexHome .indexHotBroadcast .hotDate .date a,
.home.indexHome .indexHotBroadcast .hotDate .date .name {
    color: var(--color-white);
    text-decoration: none;
}

/* 簡介 */
.home.indexHome .indexHotBroadcast .hotDate .msgLink {
    display: block;
    margin-top: 5px;
    text-align: center;
}

.home.indexHome .indexHotBroadcast .hotDate .msg {
    max-width: 760px;
    margin: 5px auto 0;
    padding: 0;
    color: #fa6969;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 新版不顯示更多 */
.home.indexHome .indexHotBroadcast .msgMore {
    display: none;
}


/* =========================================================
首頁 - Shorts
========================================================= */
.home.indexHome .audioFocus.Shorts {
    width: 100%;
    padding: 60px 0 70px;
    background: var(--color-white);
}

/* 內容寬度 */
.home.indexHome .audioFocus.Shorts > .container {
    width: 82%;
    position: relative;
}

/* 標題列 */
.home.indexHome .audioFocus.Shorts .audioTitle {
    position: relative;
    margin: 0 0 32px;
    padding: 0;
    border: 0;
}

/* SHORTS */
.home.indexHome .audioFocus.Shorts .audioTitle .subtitle {
    color: #111;
    font-size: 2em;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 5px;
}

/* YouTube */
.home.indexHome .audioFocus.Shorts .audioTitle .YouTube {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    color: #222;
    background: #eee;
    border-radius: var(--radius-pill);
    font-size: 14px;
    line-height: 1.6;
    transform: translateY(-50%);
    margin-right: 0;
}

.home.indexHome .audioFocus.Shorts .audioTitle .YouTube:hover {
    color: #ffffffeb;
    background: #1a1a1a;
}

/* YouTube 紅色圖示 */
.home.indexHome .audioFocus.Shorts .audioTitle .YouTube::before {
    content: "";
    width: var(--youtube-icon-width);
    height: var(--youtube-icon-height);
    display: inline-block;
    flex-shrink: 0;
    background: #e82027;
    border-radius: var(--youtube-icon-radius);
}

.home.indexHome .audioFocus.Shorts .audioTitle .YouTube::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid #fff;
    transform: translateY(-50%);
}

/* Swiper */
.home.indexHome .audioFocus.Shorts .shortsSwiperWrap {
    position: relative;
}
/* 手機版 Shorts YouTube 按鈕，電腦版隱藏 */
.home.indexHome .audioFocus.Shorts .shortsMobileYoutube {
    display: none;
}

.home.indexHome .audioFocus.Shorts .shortsSwiper {
    overflow: hidden;
}

/* 每個 slide 就是一張 Shorts */
.home.indexHome .audioFocus.Shorts .swiper-slide {
    display: block;
    min-width: 0;
}

/* 清除舊版寬度 */
.home.indexHome .audioFocus.Shorts .swiper-item {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 15px;
    overflow: hidden;
}

.home.indexHome .audioFocus.Shorts .swiper-item > a {
    display: block;
    color: #222;
}

/* 直式縮圖 */
.home.indexHome .audioFocus.Shorts .shortsImage {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #eee;
}

.home.indexHome .audioFocus.Shorts .shortsImage > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* 中央播放鈕 */
.home.indexHome .audioFocus.Shorts .shortsPlay {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    background:#0000009c;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: background-color .3s ease;
}
.home.indexHome .audioFocus.Shorts .swiper-item > a:hover .shortsPlay {
     background: var(--color-primary);
}

.home.indexHome .audioFocus.Shorts .shortsPlay::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 14px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
}

/* 圖片底部資訊 */
.home.indexHome .audioFocus.Shorts .shortsInfo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 15px 15px;
    background: #000000b5;
    backdrop-filter: blur(3px);
    border-radius: 0 0 15px 15px;
}

/* 標題 */
.home.indexHome .audioFocus.Shorts .shortsInfo .titles {
    margin: 0;
    padding: 0;
    color: var(--color-white);
    background: transparent;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* 日期 */
.home.indexHome .audioFocus.Shorts .shortsInfo .date {
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-white);
    background: transparent;
    padding-bottom: 5px;
}

.home.indexHome .audioFocus.Shorts .shortsInfo .date img {
    width: 15px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .8;
}

.home.indexHome .audioFocus.Shorts .shortsInfo .date .time {
    padding: 0;
    color: rgba(255, 255, 255, .9);
    font-size: .8em;
}

.home.indexHome .audioFocus.Shorts .swiper-item .date img {
    filter: brightness(0) invert(1);
    opacity: .75;
    transform: translateY(1px);
}

.home.indexHome .audioFocus.Shorts .swiper-item .date .time {
    padding: 0;
    color: rgba(255, 255, 255, .9);
    font-size: .78em;
}

/* 左右箭頭 */
.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-prev,
.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-next {
    top: 43%;
    width: var(--swiper-arrow-size);
    height: var(--swiper-arrow-size);
    margin: 0;
    color: var(--swiper-arrow-color);
    background: var(--swiper-arrow-bg);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-next:hover:after,
.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-prev:hover:after {
    color: var(--color-primary);
}

.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-prev {
    left: -52px;
}

.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-next {
    right: -52px;
}

.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-prev::after,
.home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-next::after {
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
首頁底部Banner
========================================================= */
.home.indexHome .banner {
    position: relative;
    width: 100%;
    padding: 65px 0;
    background: url("/Static/tw/image/bannerBg2.jpg") center center / cover no-repeat;
}

/* 內容寬度 */
.home.indexHome .banner > .container {
    width: 72%;
    position: relative;
}

/* Swiper */
.home.indexHome .banner .bannerSwiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 每張 Banner */
.home.indexHome .banner .swiper-slide {
    width: 100%;
}

.home.indexHome .banner .swiper-slide > a {
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-card);
}

/* Banner 圖片 */
.home.indexHome .banner .swiper-slide .img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

/* 分頁圓點 */
.home.indexHome .banner .swiper-pagination {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 18px;
    text-align: center;
}

.home.indexHome .banner .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 5px !important;
    background: var(--color-white);
    opacity: .45;
}

.home.indexHome .banner .swiper-pagination-bullet-active {
    opacity: 1;
}

/* 左右箭頭 */
.home.indexHome .banner .swiper-button-prev,
.home.indexHome .banner .swiper-button-next {
    top: 50%;
    width: var(--swiper-arrow-size);
    height: var(--swiper-arrow-size);
    margin: 0;
    color: var(--swiper-arrow-color);
    background: var(--swiper-arrow-bg);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.home.indexHome .banner .swiper-button-prev:hover:after,
.home.indexHome .banner .swiper-button-next:hover:after {
    color: var(--color-primary);
}

.home.indexHome .banner .swiper-button-prev {
    left: 18px;
}

.home.indexHome .banner .swiper-button-next {
    right: 18px;
}

.home.indexHome .banner .swiper-button-prev::after,
.home.indexHome .banner .swiper-button-next::after {
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
Footer
========================================================= */
.footer .top {
    background: var(--color-footer-bg);
}

.footer .bottom {
    background: var(--color-footer-bottom);
}

.footer .content .right {
    display: block;
}

.footer .content .item a {
    font-size: 1.3em;
}

.footer .content .tit a {
    font-size: 0.95em;
}

.footer .content .left span, .footer .content .left a {
    font-size: 1em;
    color: #ffffffa6;
}
/* Footer 連結底線動畫 */
.footer .content a {
    position: relative;
    display: inline-block;
}

.footer .content a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    background: #ffffff8c;
    transform: translateX(-50%);
    transition: width var(--transition-fast);
}

.footer .content .tit a::after {
    height: 2px;
}

.footer .content a:hover::after,
.footer .content a:focus-visible::after {
    width: 100%;
}

/* 新聞 / 節目 Header 電腦版版對齊 */
.topicCategoriesHeader.classifyHeader .headerBottom {
    width: 80% !important;
    margin: 0 auto;
}

.topicCategoriesHeader.classifyHeader .headerBottom .bottomMenu {
    width: 100%;
    margin: 0 auto;
}


/* =========================================================
RWD
========================================================= */
/* 內頁RWD-HEADR  */
.rwdHeader .rwdTopBar {
    height: 82px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-white);
}

.rwdHeader .rwdTopLeft {
    min-width: 0;
    display: flex;
    align-items: center;
}

.rwdHeader .rwdTopTools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.rwdHeader .rwdTopMenu {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.rwdHeader .rwdalogo {
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 0 0 44px;
    cursor: pointer;
    z-index: 5;
}

/* 三條線 */
.rwdHeader .rwdalogo > span {
    width: var(--hamburger-line-width);
    height: var(--hamburger-line-height);
    display: block;
    background: var(--hamburger-line-color);
    border-radius: var(--hamburger-line-radius);
    transform-origin: center;
    transition: transform var(--hamburger-speed) ease, opacity .2s ease;
}

/* 原圖片保留給舊 JS 判斷狀態 */
.rwdHeader .rwdalogo .menuImg,
.rwdHeader .rwdalogo .closeImg {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 展開 → X */
.rwdHeader .rwdalogo:has(.closeImg[style*="inline"]) > span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.rwdHeader .rwdalogo:has(.closeImg[style*="inline"]) > span:nth-child(2) {
    opacity: 0;
}

.rwdHeader .rwdalogo:has(.closeImg[style*="inline"]) > span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.rwdNav .rwdNavList {
    top: 90px;
}

/* Logo */
.rwdHeader .rwdTopLogo {
    flex-shrink: 0;
    transform: translateY(-5px);
}

.rwdHeader .rwdTopLogo img {
    width: auto;
    height: 45px;
    display: block;
}

/* 單元名稱 */
.rwdHeader .rwdTopTitle {
    margin-left: 8px;
    color: #555;
    font-size: 1.25em;
    font-weight: 700;
    white-space: nowrap;
}

/* 語系 / 搜尋 */
.rwdHeader .rwdTopTool {
    position: relative;
}

.rwdHeader .rwdaglobeImg,
.rwdHeader .rwdasearchImg {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rwdHeader .rwdaglobeImg img,
.rwdHeader .rwdasearchImg img {
    width: 25px;
    height: auto;
    display: block;
}


@media (min-width: 2300px) {
    .home.indexHome .newMainVisualImage {
        aspect-ratio: 16 / 10;
        max-height: 620px;
    }
    .home.indexHome .container,
    .topicCategoriesHeader .headerBottom,
    .footer .content {
        width: 1900px;
        max-width: calc(100% - 80px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Header 上方紅色列：背景滿版，內容與下方 1900px 對齊 */
    .topicCategoriesHeader .headerTop {
        width: 100%;
        padding-left: max(40px, calc((100% - 1900px) / 2));
        padding-right: max(40px, calc((100% - 1900px) / 2));
    }

    /* 內容寬度 */
    .home.indexHome .audioFocus.Shorts > .container {
        width: 1900px;
    }
}


@media (max-width: 1510px) {
    .topicCategoriesHeader.contentHeader
    .headerBottom
    .bottomMenu
    .center
    .headerNav > a,
    .topicCategoriesHeader.contentHeader
    .headerBottom
    .bottomMenu
    .center
    .headerNav > .moreMenu > .topMoreOne {
        margin-right: 15px;
        font-size: 1.05em;
    }
}


@media (max-width: 1440px) {
    .topicCategoriesHeader .headerBottom {
        width: 90%;
    }
    .topicCategoriesHeader .headerTop {
        padding: 0 5%;
    }
    .home.indexHome .audioFocus.indexAudio > .container {
        width: 80%;
    }
    .topicCategoriesHeader.classifyHeader .headerBottom {
        width: 90% !important;
    }
    .home.indexHome .hotTopic.keywordsTop .hotList > .item .tit {
        -webkit-line-clamp: 2;
    }
    .home.indexHome .hotTopic.keywordsTop .hotList > .item .title {
        line-height: 1.4;
        font-size: 1em;
    }
}


@media (max-width: 1300px) {
    .topicCategoriesHeader.contentHeader
    .headerBottom
    .bottomMenu
    .center
    .headerNav > a,
    .topicCategoriesHeader.contentHeader
    .headerBottom
    .bottomMenu
    .center
    .headerNav > .moreMenu > .topMoreOne {
        margin-right: 10px;
    }
    .topicCategoriesHeader.classifyHeader .headerBottom,
    .footer .content {
        width: 95% !important;
    }
    .topicCategoriesHeader .headerTop {
        padding: 0 2.5%;
    }
    .header .headerBottom .bigTitle {
        font-size: 1.26em;
    }
    .topicCategoriesHeader .headerBottom .bottomMenu .center .logo a img {
        width: 80%;
        height: 80%;
    }
    .topicCategoriesHeader .headerBottom .bottomMenu .center .logo {
        margin-right: 0;
    }
    .home.indexHome .focusReporting .focus {
        width: 75%;
    }
    .home.indexHome .focusReporting .hotTopic {
        width: 25%;
    }
    .topicCategoriesHeader .headerBottom .bottomMenu .center .headerNav a {
        font-size: 1.17em;
        margin-right: 15px;
    }
    .topicCategoriesHeader .headerBottom .bottomMenu .center .logoWrap {
        margin-right: 0;
    }
    .home.indexHome .newProgramCardDate {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 6px;
    }
    .home.indexHome .newProgramCardDate .time {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .home.indexHome .newProgramCardDate .redShow {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .home.indexHome .newHomeCardDate {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 5px;
        row-gap: 3px;
        margin-top: 0;
    }
    .home.indexHome .newHomeCardDate .time {
        white-space: nowrap;
    }
    .home.indexHome .newHomeCardDate .redShow {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}


@media (max-width: 1150px) {
    .header .headerBottom .bigTitle {
        display: none;
    }
    .classifyHeader .conheaderNav a {
        font-size: 1.1em !important;
    }
}


@media (max-width: 1024px) {
    body.index .rwdMenu .menu {
        background: #181818;
    }
    body.index .rwdHeader .rwdaglobeImg img, body.index .rwdHeader .rwdasearchImg img {
        filter: brightness(0.5) invert(1);
    }
    body.index .rwdHeader .rwdalogo {
        filter: brightness(0.5) invert(1);
    }
    body.index .rwdHeader .indexLogImg {
        filter: brightness(1.7) contrast(3.9);
    }

    .home.indexHome {
        padding-top: 120px;
        background: linear-gradient(to right, #dbdbdb, #fbfbfb, #efefef);
    }
    .rwdHeader .indexLogImg {
        margin-left:0;
        width: 80%;
    }
    .home.indexHome .hotTopic.keywordsTop .hotList > .item .tit {
        -webkit-line-clamp: 2;
    }
    .home.indexHome .newProgramCardText {
        -webkit-line-clamp: 1;
    }
    .home.indexHome .hotTopic.keywordsTop .hotList > .item {
        padding: 13px 0 3px 0;
    }
    .home.indexHome .hotTopic.keywordsTop .hotList .item:first-child {
        padding: 0;
    }
    .home.indexHome .hotTopic.keywordsTop .indexkeyword {
        aspect-ratio: 4 / 3;
    }
    .home.indexHome .newMainVisualImage {
        aspect-ratio: 1 / 1;
    }
    .barTop .title h2 {
        transform: translateY(0);
    }

}


@media (max-width: 991px) {
    .home.indexHome .newMainVisualImage {
        aspect-ratio: 1 / 1;
    }
    .home.indexHome .audioFocus.indexAudio {
        background-attachment: scroll;
    }
    .footer .content .left a {
        margin-right: 0;
    }
    .footer .content .item .flex .left img {
        margin-right: 10px;
    }
}


@media (max-width: 768px) {
    /* 手機首頁主輪播 */
    .home.indexHome .rwdBanner .swiper-item {
        position: relative;
        height: 370px;
        overflow: hidden;
    }
    .home.indexHome .rwdBanner .swiper-item > a {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
    }
    /* 圖片撐滿整張 */
    .home.indexHome .rwdBanner .swiper-item .swiperImg {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    /* 黑色遮罩 */
    .home.indexHome .rwdBanner .swiper-item > a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .28) 52%, rgba(0, 0, 0, .72) 72%, rgba(0, 0, 0, .95) 100% );
    }
    /* 文字區 */
    .home.indexHome .rwdBanner .content {
        position: absolute;
        left: 28px;
        right: 28px;
        bottom: 30px;
        z-index: 2;
        padding: 0;
        color: #fff;
        text-align: left;
    }
    /* 標題 */
    .home.indexHome .rwdBanner .content .audios {
        color: #fff;
        font-size: 1.4em;
        font-weight: 700;
        display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
       line-height: 1.45;
       max-height: 2.9em;

    }
    /* 日期 */
    .home.indexHome .rwdBanner .content .date,
    .home.indexHome .rwdBanner .content .date .time {
        color:rgb(255 255 255 / 50%);
        gap: 7px;
        flex-wrap: wrap-reverse;
    }
    .date img {
        transform: translateY(1px);
    }
    .home.indexHome .rwdBanner .swiper-pagination {
        bottom: 16px !important;
        z-index: 3;
        display: none;
    }
    .home.indexHome .rwdBanner .swiper-pagination-bullet {
        background: rgba(255, 255, 255, .5);
        opacity: 1;
    }
    .home.indexHome .rwdBanner .swiper-pagination-bullet-active {
        background: #fff;
    }
    .home.indexHome .rwdBanner .swiper-button-prev,
    .home.indexHome .rwdBanner .swiper-button-next {
        width: 38px;
        height: 38px;
        top: 50%;
        margin-top: 0;
        color: #fff;
        background: rgba(0, 0, 0, .45);
        border-radius: 50%;
        transform: translateY(-50%);
        z-index: 5;
    }
    .home.indexHome .rwdBanner .swiper-button-prev {
        left: 14px;
    }
    .home.indexHome .rwdBanner .swiper-button-next {
        right: 14px;
    }
    .home.indexHome .rwdBanner .swiper-button-prev::after,
    .home.indexHome .rwdBanner .swiper-button-next::after {
        font-size: 14px;
        font-weight: 700;
    }

    .date span.redShow {
        color: #df3f46;
        font-size: 1em;
    }

    .home.indexHome .rwdKeywords .subtitle {
        margin-bottom: 10px;
        color: var(--color-text);
        font-size: 1.75em;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
    }

    .home.indexHome .rwdKeywords .mobileKeywordTag {
        margin-bottom: 22px;
        display: flex;
        justify-content: center;
    }

    .home.indexHome .rwdKeywords .mobileKeywordTag a {
        display: inline-flex;
        align-items: center;
       min-height: 33px;
        padding: 0 14px 2px;
        color: var(--color-primary);
        background: #fff;
        border-radius: 20px;
        font-size: .95em;
        font-weight: 700;
    }

    .home.indexHome .rwdKeywords .mobileNewsSlider {
        position: relative;
    }

    .home.indexHome .rwdKeywords .overflowX {
        width: 100%;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

        .home.indexHome .rwdKeywords .overflowX::-webkit-scrollbar {
            display: none;
        }

    /* 左右箭頭 */
    .home.indexHome .rwdKeywords .mobileNewsArrow {
        position: absolute;
        top: 38%;
        z-index: 5;
        width: 36px;
        height: 36px;
        padding: 0;
        background: rgba(0, 0, 0, .6);
        border: 0;
        border-radius: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .home.indexHome .rwdKeywords .mobileNewsPrev {
        left: 8px;
    }

    .home.indexHome .rwdKeywords .mobileNewsNext {
        right: 8px;
    }

    .home.indexHome .rwdKeywords .mobileNewsArrow::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 8px;
        height: 8px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

    .home.indexHome .rwdKeywords .mobileNewsPrev::after {
        left: 15px;
        transform: translateY(-50%) rotate(-135deg);
    }

    .home.indexHome .rwdKeywords .mobileNewsNext::after {
        right: 15px;
        transform: translateY(-50%) rotate(45deg);
    }

    body.index .rwdMenu .menu {
        background: #fff;
    }
    body.index .rwdHeader .rwdaglobeImg img, body.index .rwdHeader .rwdasearchImg img {
        filter: none;
    }
    body.index .rwdHeader .rwdalogo {
        filter: none;
    }
    body.index .rwdHeader .indexLogImg {
        filter: none;
    }

    .home.indexHome {
        padding-top: 90px;
        background: linear-gradient(to top, #dbdbdb, #fbfbfb, #cdcbcb);
    }
    .rwdBanner .swiper-slide .swiper-item > a.crop .swiperImg,
    .rwdFocusClassify .Wrap .item .img > a.crop .imgBg,
    .rwdFocusClassify .Wrap .item .img > a > .img.crop .imgBg {
        object-fit: cover;
    }
    .focusReporting .focus a .img.crop img, .warpList .item .img.crop img, .classificatin .wrap .img .imgBg.crop img, .overflowX .item .keyImg.crop img {
        object-fit: cover;
        border-radius: 0;
    }

    /* 首頁手機 TOP5 熱門話題 */
    .home.indexHome .rwdKeywords .overflowX .item {
        width: 60%;
        min-width: 60%;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 10px 9px 12px 4px rgb(0 0 0 / 4%);
    }
    /* 卡片連結必須撐滿，避免依文字長度縮寬 */
    .home.indexHome .rwdKeywords .overflowX .item > a {
        display: block;
        width: 100%;
    }

    .home.indexHome .rwdKeywords .overflowX .title .titleClamp img {
        transform: translateY(4px);
        width: 20px;
        margin-right: 1px;
    }

    .home.indexHome .rwdKeywords .overflowX .item .keyImg {
        width: 100%;
        border-radius: 10px 10px 0 0;
    }
    /* 手機版主輪播直式圖 */
    .home.indexHome .rwdBanner .swiper-item .swiperImg {
        display: block;
    }
    /* 主輪播直式圖模糊背景 */
    .home.indexHome .rwdBanner .swiper-item > a.img-fit-bg::before {
        background-size: 120% 120%;
        background-position: center;
        filter: blur(5px) brightness(.8);
        opacity: 1;
        box-shadow: none;
    }
    .home.indexHome .rwdKeywords .overflowX .item .keyImg.img-fit-bg::before {
        background-size: 115% auto;
        background-position: center;
        filter: blur(6px) brightness(.8);
        opacity: 1;
        box-shadow: none;
    }
    /* 主輪播橫圖完整顯示不裁切，底圖要鋪滿整張（base 的 3:2 在手機只到框高的七成） */
    .home.indexHome .rwdBanner .swiper-slide .swiper-item > a.crop .swiperImg {
        object-fit: contain;
    }
    .home.indexHome .rwdBanner .swiper-slide .swiper-item > a.crop::before {
        inset: var(--img-fit-bg-inset, 0);
        aspect-ratio: auto;
        opacity: var(--img-fit-bg-opacity, .55);
    }
    /* 完整顯示不裁切，橫圖也墊模糊底圖（--bg-img 由 img-fit.js 設在 .keyImg 上）。
       不併進上一條：115% auto 遇到扁圖高度蓋不滿，會露縫 */
    .home.indexHome .rwdKeywords .overflowX .item .keyImg.crop::before {
        opacity: var(--img-fit-bg-opacity, .55);
    }
    .home.indexHome .rwdKeywords .overflowX .item .keyImg.crop img {
        object-fit: contain;
    }
    /* 手機版 TOP5 標題外框 */
    .home.indexHome .rwdKeywords .overflowX .item .title {
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 10px 18px;
    }
    /* 標題固定最多 2 行 */
    .home.indexHome .rwdKeywords .overflowX .item .titleClamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: .95em;
    }
    /* 手機版 - 影音焦點 */
    .home.indexHome .audioFocus.indexAudio {
        padding: 0;
    }
    .home.indexHome .overflowX .item .date {
        gap: 5px;
        margin-top: 0;
        padding: 0 15px 15px 15px;
    }
    .home.indexHome .rwdVideoFocus {
        width: 100%;
        padding: 45px 0 50px;
        background: url("/Static/tw/image/videobg.jpg") center center / cover no-repeat;
    }
    .home.indexHome .rwdVideoFocusInner {
        width: 82%;
        margin: 0 auto;
        text-align: center;
    }
    /* 區塊標題 */
    .home.indexHome .rwdVideoTitle {
        margin-bottom: 25px;
        color: var(--color-white);
        font-size: 1.75em;
        font-weight: 700;
        line-height: 1.4;
    }
    /* 卡片 */
    .home.indexHome .rwdVideoCard {
        width: 100%;
        display: block;
        color: var(--color-white);
    }
    /* 圖片 */
    .home.indexHome .rwdVideoImage {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 15px;
    }
    .home.indexHome .rwdVideoImage img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    /* 新聞標題 */
    .home.indexHome .rwdVideoNewsTitle {
        margin-top: 18px;
        color: var(--color-white);
        font-size: 1.125em;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    /* YouTube 按鈕 */
    .home.indexHome .rwdVideoYoutube {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 15px;
        padding: 6px 14px;
        color: var(--color-text);
        background: #eee;
        border-radius: var(--radius-pill);
        font-size: 14px;
        line-height: 1.5;
    }
    /* YouTube 紅色 icon */
    .home.indexHome .rwdVideoYoutube::before {
        content: "";
        width: var(--youtube-icon-width);
        height: var(--youtube-icon-height);
        display: inline-block;
        background: var(--color-primary);
        border-radius: var(--youtube-icon-radius);
    }
    .home.indexHome .rwdVideoYoutube::after {
        content: "";
        position: absolute;
        left: 20px;
        top: 50%;
        width: 0;
        height: 0;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 5px solid #fff;
        transform: translateY(-50%);
    }
    /* 手機影音焦點 Swiper */
    .home.indexHome .rwdVideoSwiperWrap {
        position: relative;
    }
    .home.indexHome .rwdVideoSwiper {
        width: 100%;
        overflow: hidden;
    }
    .home.indexHome .rwdVideoSwiper .swiper-slide {
        width: 100%;
        text-align: center;
    }
    /* 左右箭頭 */
    .home.indexHome .rwdVideoSwiperWrap > .swiper-button-prev,
    .home.indexHome .rwdVideoSwiperWrap > .swiper-button-next {
        top: 42%;
        width: 34px;
        height: 34px;
        margin: 0;
        color: var(--color-white);
        background: rgba(0, 0, 0, .75);
        border-radius: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
    .home.indexHome .rwdVideoSwiperWrap > .swiper-button-prev {
        left: -17px;
    }
    .home.indexHome .rwdVideoSwiperWrap > .swiper-button-next {
        right: -17px;
    }
    .home.indexHome .rwdVideoSwiperWrap > .swiper-button-prev::after,
    .home.indexHome .rwdVideoSwiperWrap > .swiper-button-next::after {
        font-size: 12px;
        font-weight: 700;
    }
    .indexAudio.audioFocus .swiper-button-next, .indexAudio.audioFocus .swiper-button-prev {
        top: 40% !important;
    }
    /* end */

    /* 隱藏舊版八大焦點 */
    .home.indexHome .rwdFocusClassify {
        display: none !important;
    }
    /* 八大焦點 - 手機版直接沿用桌機 HTML */
    .home.indexHome .focusClassify.pcShow {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px 5px;
    }
    .home.indexHome .focusClassify.pcShow > .wrap {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .home.indexHome .classificatin {
        padding: 25px 0 50px;
    }
    .classificatin .wrap {
        border-top: none;
    }
    .home.indexHome .focusClassify.pcShow .item > .img {
        aspect-ratio: 3 / 3;
    }
    .home.indexHome .classificatin .wrap .img .imgBg {
        aspect-ratio: 3 / 3;
    }
    .home.indexHome .focusClassify.pcShow .item > .img::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.95) 100%);
    }
    .home.indexHome .audioFocus.Shorts > .rwdKeywords {
        display: none !important;
    }
    .home.indexHome .audioFocus.Shorts > .container.pcShow {
        display: block !important;
    }
    /* Shorts 手機版 */
    .home.indexHome .audioFocus.Shorts {
        padding: 45px 0 50px;
        background: var(--color-white);
    }
    .home.indexHome .audioFocus.Shorts > .container {
        width: 82%;
        text-align: center;
    }
    /* SHORTS 標題 */
    .home.indexHome .audioFocus.Shorts .audioTitle {
        margin-bottom: 25px;
    }
    .home.indexHome .audioFocus.Shorts .audioTitle .subtitle {
        color: var(--color-text);
        font-size: 1.75em;
    }
    .home.indexHome .audioFocus.Shorts .audioTitle .YouTube {
        display: none;
    }
    /* Shorts 下方 YouTube 按鈕 */
    .home.indexHome .audioFocus.Shorts .shortsMobileYoutube {
        display: inline-flex;
        margin-top: 12px;
    }
    /* 每次只顯示一張 */
    .home.indexHome .audioFocus.Shorts .swiper-slide {
        display: block;
    }
    .home.indexHome .audioFocus.Shorts .swiper-item {
        width: 95%;
        margin: 0 auto;
        border-radius: var(--radius-card);
        overflow: visible;
    }
    /* 直式圖 */
    .home.indexHome .audioFocus.Shorts .shortsImage {
        width: 100%;
        aspect-ratio: 9 / 16;
        border-radius: var(--radius-card);
        overflow: hidden;
    }
    /* 手機不再把文字疊在圖片上 */
    .home.indexHome .audioFocus.Shorts .shortsInfo {
        position: static;
        padding: 14px 0 0;
        background: none;
        backdrop-filter: none;
    }
    /* 標題恢復深色 */
    .home.indexHome .audioFocus.Shorts .shortsInfo .titles {
        color: var(--color-text);
        font-size: 1.05em;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    /* 日期 */
    .home.indexHome .audioFocus.Shorts .shortsInfo .date {
        margin-top: 6px;
        justify-content: center;
        color: #888;
    }
    .home.indexHome .audioFocus.Shorts .shortsInfo .date img {
        filter: none;
        opacity: .7;
    }
    .home.indexHome .audioFocus.Shorts .shortsInfo .date .time {
        color: #888;
    }
    /* 左右箭頭 */
    .home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-prev,
    .home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-next {
        top: 42%;
        width: 34px;
        height: 34px;
    }
    .home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-prev {
        left: -8px;
    }
    .home.indexHome .audioFocus.Shorts .shortsSwiperWrap > .swiper-button-next {
        right: -8px;
    }

    /* 手機版 Banner */
    .home.indexHome .banner {
        padding: 40px 0 35px;
        margin-bottom: 0;
    }
    .home.indexHome .banner > .container {
        width: 92%;
    }
    .home.indexHome .banner .swiper-slide > a {
       width: 100%;
       height: auto !important;
       border-radius: 10px;
    }
    .home.indexHome .banner .swiper-slide .img {
        width: 100%;
        height: auto;
        display: block;
    }
    /* 分頁點靠近 Banner */
    .home.indexHome .banner .swiper-pagination {
        margin-top: 10px;
    }

}


@media (max-width: 576px) {
    .footer .content .right {
        margin-top: 12px;
        text-align: center;
    }
    .footer.rwdShow {
        text-align: center;
    }
    .footer .top .content {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .footer .content .item:last-child {
        width: 100%;
    }
    .footer .content .item .flex {
        justify-content: center;
    }

}


@media (max-width: 490px) {
    .home.indexHome {
        padding-top: 70px;
    }

    .rwdNav .rwdNavList {
        top: 70px;
    }

    .rwdHeader .indexLogImg {
        width: 150px;
    }

    .rwdMenu .menu .right {
        margin-top: 5px;
    }

    .rwdBanner .content {
        padding: 10px 30px 0 36px;
        text-align: justify;
        padding-bottom: 35px;
    }

    .home.indexHome .indexHotBroadcast .hotDate .date {
        flex-wrap: wrap;
    }

    .home.indexHome .indexHotBroadcast .liveControl {
        position: relative;
    }

    .home.indexHome .indexHotBroadcast .selectLive,
    .home.indexHome .indexHotBroadcast .selectLive .moreMenu {
        position: static;
    }

    .home.indexHome .indexHotBroadcast .selectLive .courseModal {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        right: auto;
        width: min(250px, calc(100vw - 36px));
        min-width: 0;
        max-width: none;
        padding: 20px 22px;
        transform: translateX(-50%);
        z-index: 1000;
    }

    /* 音訊撥放 */
    .audioModal_m3u8 .audio_m3u8 {
        background: #7c2529eb;
        backdrop-filter: blur(5px);
    }

    .audioModal_m3u8 .audio_m3u8 .left {
        display: none;
    }

    .audioModal_m3u8 .audio_m3u8 .right {
        width: 100%;
        padding: 1.5rem;
    }

    .audioModal_m3u8 .audio_m3u8 .right .name {
        font-size: 1.1em;
    }

    .audioModal_m3u8 .audio_m3u8 .right .bottom .video_m3u8 {
        gap: 5px;
    }

    .audioModal_m3u8 .audio_m3u8 .right .bottom .goBack {
        gap: 5px;
    }

    .audio .right .bottom .goBack img, .audio_m3u8 .right .bottom .goBack {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    .audio .right .bottom .goBack img, .audio_m3u8 .right .bottom .goBack a {
        background: #00000066;
        border-radius: 50%;
        width: 27px;
        height: 27px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .audio .right .bottom .goBack img, .audio_m3u8 .right .bottom .goBack img {
        width: 8px;
        transform: translateX(-1px);
    }

    .audioModal_m3u8 .audio_m3u8 .right .bottom .plyr--audio .plyr__controls {
        padding: 0;
    }

    .home.indexHome .indexHotBroadcast .liveCurrentTitle {
        font-size: 1.65em;
    }

    .home.indexHome .indexHotBroadcast .liveControl .onAirPlayBtn,
    .home.indexHome .indexHotBroadcast .selectLive .moreMenu > .topMoreOne {
        padding: 3px 15px;
        font-size: .875em;
    }

    .home.indexHome .indexHotBroadcast .selectLive .topMoreOne .subtitles {
        font-size: 1em;
    }

    .home.indexHome .hotDate .date span,
    .home.indexHome .indexHotBroadcast .hotDate .date {
        font-size: 1em;
    }

    .footer .content .item a {
        font-size: 1.25em;
    }

    .footer .content .tit, .footer .content .tit a {
        font-size: 1em !important;
    }

    .footer .app {
        font-size: 1.3em;
    }

    .footer .content .left span, .footer .content .left a {
        font-size: .9em;
    }

    .footer .content .left .botText {
        margin-top: 0px;
    }
}
