/* ctstt 升版用的唯一一支新 CSS，永遠最後載入。
 * 只做三件事：A 補回版面骨架、B 兩行背景延伸、C 窄螢幕斷點。
 * 舊 CSS 一個字都不改。 */

/* ── A. 版面骨架 ──
 * 這些尺寸原本寫在 un_main.asp 巢狀 table 的 width 屬性裡（1004 / 232 / 772），
 * 不在任何 CSS 檔中。攤平 iframe 之後要補回來。 */
/* .page 取代舊版的 .headerTop（index.css:9）。刻意不沿用原 class 名：
 * #header .headerTop 是 (1,1,0)，會壓過下面斷點裡的 .page (0,1,0)，響應式會失效。 */
.page { width: 1004px; margin: 0 auto; position: relative; z-index: 1000; }
/* overflow:hidden 是還原舊版的裁切行為：登入框 #Mloginbg 是 234px（log.css:5，舊版表格也寫 234），
 * 比左欄寬 2px。舊版靠 wb_login02 iframe 的 width="232" 裁掉，攤平後要自己裁。 */
.col-l { width: 232px; float: left; overflow: hidden; }
.col-r { width: 772px; float: left; }

/* 解掉已實證的 #wrapper 碰撞：page.css:5 的 div#wrapper{width:500px} (1,0,1)
 * specificity 高於 index.css:10 的 #wrapper{width:100%} (1,0,0)，攤平後會贏。
 * page.css 是中英文共用的（沒有 en_page.css），英文版清單頁同樣適用。
 *
 * 🔴 選擇器必須是「#wrapper 的祖先」而不是後代：真實巢狀是
 *    #header > #wrapper > .page（見 un_main.asp:131-133），#wrapper 在 .page 外面。
 *    寫成 .page #wrapper 會一條都命中不到，整頁就會被 page.css 縮成 500px。
 *    #header #wrapper 是 (2,0,0)，穩穩壓過 (1,0,1)。 */
#header #wrapper { width: 100%; }

/* ── B. 背景延伸（已量圖驗證，兩張圖都不用重切） ──
 * index_02.jpg 在 x>340 之後整片是純 #161616；index_11.jpg 的漸層是純垂直的。 */
#topbg { background-color: #161616; }
#footer { background-repeat: repeat-x; }

/* ── C. 窄螢幕三個斷點 ──
 * 桌機維持 1004 置中、左右露出 #e1e1e1 灰底；窄螢幕才變流動。 */
@media (max-width: 1003px) {
    .page { width: 100%; }
}

@media (max-width: 977px) {
    .home-media { justify-content: center; }
}
@media (max-width: 819px) {
    .col-l, .col-r { width: 100%; float: none; }
}

@media (max-width: 767px) {
    /* 舊手機版頁首、橫幅、頁尾都是滿版；左右留白只留在 #con（K 段） */
    .page { padding: 0; }
}


/* ── D. 攤平 iframe 後要補回來的舊版表格屬性 ──
 * 這些原本寫在 un_main.asp 的 bgcolor / spacer.gif 上，不在任何 CSS 檔裡。 */

/* un_main.asp:136 外層表格 bgcolor="#FFFFFF"；左右兩欄改 float 後要靠它撐白底 */
#idcontent { background: #ffffff; }

/* un_main.asp:209-211 最底下那列 bgcolor="#e1e1e1" 的收尾 */
.idcontent-foot { background: #e1e1e1; }

.cb { clear: both; }

/* un_main.asp:149 那張 1×7 的 spacer 墊圖 */
.left-gap { height: 7px; font-size: 0; line-height: 0; }

/* un_left01~13.asp 的背景圖，舊版寫在 <table> 的 inline style 上；
 * 圖名隨頁面不同，所以 url 留在 inline style，這裡只補 repeat/position。 */
.left-menu { background-repeat: no-repeat; background-position: left top; }

/* ── E. 原本靠 JS 換圖的按鈕，改成 CSS :hover ──
 * 舊版是 Dreamweaver 的 MM_swapImage（js/style.js），新站零 jQuery、legacy 不放任何 .js。
 * 圖檔路徑用 ../legacy/ 相對寫法：CSS 的 url() 是相對於樣式表位置解析的，
 * 寫成絕對的 /legacy/ 在有 APPLICATION_PATH（虛擬目錄）的部署下會 404。 */
.img-button,
.left-promo .promo {
    display: inline-block;
    border: 0;
    padding: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left top;
    cursor: pointer;
    overflow: hidden;
    text-indent: -9999px;
    /* 文字固定靠左：父層若 text-align:right，負的 text-indent 藏不住字 */
    text-align: left;
}

.img-button.login-button {
    width: 51px;
    height: 26px;
    background-image: url(../legacy/images/calendar/login_button.gif);
}

.img-button.login-button:hover {
    background-image: url(../legacy/images/calendar/login_buttonb.gif);
}

/* 已登入登入框的間隔圖：舊版 un_login02.asp 是 XHTML Transitional（近似標準模式），
 * 表格格子裡只有一張圖時，格子高度就是圖高。新版是 HTML5 完整標準模式，
 * 1px 灰線與 10px 間隔會被 reset.css 的 line-height:22px 撐高，整塊超出 165px 底圖、
 * 登出鈕掉到下一區。改成 block 還原舊版高度。 */
#loginbg01 img[src$="spacer.gif"] { display: block; }

.img-button.logout-button {
    width: 51px;
    height: 26px;
    background-image: url(../legacy/images/calendar/logout_button.gif);
}

.img-button.logout-button:hover {
    background-image: url(../legacy/images/calendar/logout_buttonb.gif);
}

/* un_main.asp:164-185 的 2×2 促銷按鈕，四顆尺寸不同，照舊版原樣 */
.left-promo .promo01 { width: 117px; height: 106px; background-image: url(../legacy/images/left_subbutton/left_subbutton_01.jpg); }
.left-promo .promo01:hover { background-image: url(../legacy/images/left_subbutton/left_subbutton_b_01.jpg); }
.left-promo .promo02 { width: 115px; height: 106px; background-image: url(../legacy/images/left_subbutton/left_subbutton_02.jpg); }
.left-promo .promo02:hover { background-image: url(../legacy/images/left_subbutton/left_subbutton_b_02.jpg); }
.left-promo .promo03 { width: 117px; height: 102px; background-image: url(../legacy/images/left_subbutton/left_subbutton_03.jpg); }
.left-promo .promo03:hover { background-image: url(../legacy/images/left_subbutton/left_subbutton_b_03.jpg); }
/* 第四顆：較新版 ASP 換成 ISTT 專區（un_main.asp:265），原圖 115×102 和格子一樣大 */
.left-promo .promo04 { width: 115px; height: 102px; background-image: url(../legacy/images/left_subbutton/left_subbutton_05.png); }
.left-promo .promo04:hover { background-image: url(../legacy/images/left_subbutton/left_subbutton_b_05.png); }

/* ── F. 回到頂端 ──
 * 樣式原本是 un_main.asp:126-128 的 inline <style>，行為原本是 jQuery
 * （$(window).scroll + fadeIn/fadeOut + animate scrollTop）。行為改原生，見 js/site.js。 */
#toTop {
    position: fixed;
    bottom: 10px;
    right: 50px;
    cursor: pointer;
    display: none;
}

/* ── G. 前台清單頁（最新消息起，un_news01.asp 那一型） ──
 * 舊版清單頁在 iframe 裡還包一層 <div id="con">，吃 main.css:10 的 padding:0 20px。
 * 攤平後同一份文件不能再有第二個 #con，改用 class 補回同樣的內距。 */
.con-inner { padding: 0 20px; }

/* 舊版 <font color="red" size="2">，size=2 對應 small */
.news-empty { color: red; font-size: small; }

/* 內頁報名表外框舊版寫死 667px，窄螢幕不要撐破版面 */
.signup-box, .signup-title { max-width: 100%; height: auto; }

/* 報名表送出鈕：舊版是 <input type="image">＋MM_swapImage，改成按鈕包兩張圖用 CSS 換（同 .swap-img） */
.signup-send { border: 0; padding: 0; background: none; cursor: pointer; }
.signup-send:disabled { cursor: default; opacity: .6; }

/* 舊版錯誤與成功都是 alert，新版改寫在報名表上方 */
.signup-errors { color: red; padding: 8px 0; }
.signup-errors ul { margin: 0; padding-left: 20px; list-style: disc; }
.signup-notice { color: #2b74d4; font-weight: bold; padding: 8px 0; }

/* 報名表留白：舊版格子沒有內距，標題、輸入框、選項全貼在一起 */
.signup-label { padding: 0 12px; white-space: nowrap; }
.signup-value { padding: 8px 12px; line-height: 1.8; }
.signup-value .input { padding: 4px 6px; border: 1px solid #ccc; max-width: 100%; box-sizing: border-box; }
.signup-value select { padding: 2px 4px; margin: 0 2px; }
.signup-option { display: inline-block; margin-right: 16px; white-space: nowrap; cursor: pointer; }

/* 分頁箭頭、內頁返回鈕滑過換圖，舊版是 MM_swapImage；兩張圖都放著，用 CSS 切換 */
.pager-arrow .on, .swap-img .on { display: none; }
.pager-arrow:hover .off, .swap-img:hover .off { display: none; }
.pager-arrow:hover .on, .swap-img:hover .on { display: inline; }

/* ── H. 補回舊版「幾乎標準模式」的表格圖片行高 ──
 * 舊版每支 .asp 都是 XHTML 1.0 Transitional doctype，瀏覽器走 almost-standards mode：
 * 格子裡只有一張圖時，不替它留行高。新版是 <!DOCTYPE html> 完全標準模式，
 * 1px 的 spacer.gif、5px 的 line.gif 都會被 line-height(22px) 撐成一整行，
 * 細線變粗條、每列多出十幾 px。只對「格子裡只放一張圖」的位置改 block。 */
.left-menu td > img,
.new td[bgcolor] > img,
.news-detail td[bgcolor] > img,
.signup-fields td[background] > img,
.signup-fields tr:first-child td > img,
.new td.line > img,
.doc-list td > img:only-child,
.doc-detail td[bgcolor] > img { display: block; }

/* ---- 文件清單／內頁 ----
 * 舊版一頁裡有多個 id="pd5"、id="space"（main.css:13、base.css:10，經 index.css @import 載入）；
 * 新版重複的改 class，照抄同樣的內距。 */
.pd5 { padding: 5px; }
.space { padding: 5px; }

/* ---- 年度工作計畫（un_schedule01~03.asp） ----
 * 月曆的 .schedule 是舊版 un_schedule01.asp 頁內 <style>；清單與內頁的 .new_title／.new_date／.date／#pd5
 * 在 main.css:9-13（經 index.css @import 載入），不重複搬。 */
.schedule td, .schedule th { color: #333; font-family: sans-serif; font-size: 100%; padding: 0; }
.schedule th { background-color: #fff; color: #333; font-size: 100%; font-weight: 500; height: 50px; }

/* 同 H 節：月曆上下的藍色細線、內頁的細線與 5px 留白格都只放一張 spacer，不要被行高撐粗。
 * 內頁限定最外層的格子，不碰內文（Notes）裡的表格圖片。 */
.schedule-calendar td[bgcolor] > img,
.schedule-detail > tbody > tr > td > img:only-child { display: block; }

/* ── I. 活動相簿───────────────────────────────────────────── */
/* 舊版卡片框是 table + background 屬性；新版改 inline style，這裡只補舊 CSS 沒有的部分 */
.photo-frame td { background-repeat: repeat; }
/* 舊版無 doctype（怪異模式）圖片不留基線空隙，新版標準模式要自己取消，否則外框每列多 4px、1px 分隔線被撐成粗條 */
.photo-frame td > img, .photo-rule > img { display: block; }
.photo-frame-wide .photo-frame { width: 100%; }
/* 舊版 un_photo02 左右角欄寬 9／12、中間 100%，不寫的話多出來的寬度會平均分給三欄 */
.photo-frame-wide .photo-frame > tbody > tr > td:first-child { width: 9px; }
.photo-frame-wide .photo-frame > tbody > tr > td:last-child { width: 12px; }
.photo-frame-wide .photo-frame > tbody > tr > .photo-frame-body { width: 100%; }
.photo-frame-body { height: 200px; }
.album-card-body img { display: block; margin: 0 auto; }
/* 相簿內頁的縮圖舊版靠左（外層 div align=center 對 100% 寬的內表格無效），不置中 */
.album-photo img { display: block; }
/* un_photo03 的兩個 id="hidden"（重複 id）→ class，規則逐字取自 legacy/Css/base.css:4 的 #hidden */
.photo-hidden{position:absolute;width:0px;height:0px;z-index:2000}
.photo-stage { text-align: center; vertical-align: middle; }
/* 舊版 600px 圖放在 535px 欄裡會把表格撐到 600（視覺比對確認），不加 max-width 才對得上 */

/* ── J. 會員廣告園地───────────────────────────────────────── */
/* 舊版 XHTML Transitional（almost-standards）：格子裡只放一張圖（含包在 <a> 裡）不留行高；
 * 新版標準模式要自己取消，否則 2px 的 line.gif 分隔線被撐成 22px 粗條、7px spacer 把箭頭擠到文字下面。 */
.ad-list td > img:only-child,
.ad-list td > a:only-child > img { display: block; }

/* ── K. 好站連結───────────────────────────────────────────── */
/* 同 J 區：舊版 almost-standards 下，格子裡只有一張圖不留行高；新版標準模式要取消，否則 16px 的 meeting/line.gif 分隔線被撐高。 */
.link-list td > img:only-child { display: block; }

/* ── L. 聯絡我們───────────────────────────────────────────── */
/* 舊版同頁重複 20 個 id="contact_st"，改 class；規則照 legacy/Css/main.css:17 */
.contact-st { padding: 8px 52px 8px 10px; }
/* 舊版 textarea 行內樣式寫死 410×100 並用 max-* 鎖住縮放，照舊；窄螢幕不撐破（扣掉 padding＋border 12px） */
.contact-notes { width: 410px; height: 100px; max-width: min(410px, calc(100% - 12px)); max-height: 100px; }
.contact-title { max-width: 100%; height: auto; }
/* 同 H 段：舊版 un_contact01.asp 是 XHTML Transitional，分隔列的 1px line.gif、表頭灰線與按鈕上方的 spacer.gif、標題圖都不留行高；
 * 新版標準模式被行高撐成條紋。只掛在聯絡我們，會員表單另有自己的規則 */
.contact-form table.m-form td[background] > img,
.contact-form td[bgcolor="#e7e7e7"] > img,
.contact-form .contact-title,
.contact-form table.m-form td[colspan] > img:only-child { display: block; }
/* 舊版 un_contact01.asp 只載 index.css、沒有 reset.css；攤平後 reset.css:12 的 font-size:inherit 讓輸入框吃到 16px，
 * 每列變高、size=50 的框也變寬。桌機退回瀏覽器預設字型；手機維持 16px（避免 iOS 點輸入框自動放大） */
@media (min-width: 768px) {
    .contact-form .contact_input, .contact-form .contact_text { font: revert; }
}

.member-actions {
    margin: 20px 0;
    text-align: center;
}

.member-actions a {
    display: inline-block;
    margin: 0 6px;
    padding: 6px 18px;
    border: 1px solid #5395ed;
    background: #eef0f3;
    color: #1f4f9f;
    text-decoration: none;
}

.member-actions a:hover {
    background: #5395ed;
    color: #fff;
}

/* 會員頁（入會告知、入會表單、修改基本資料）：同 H 區，舊版 un_member01／09／11.asp 是近似標準模式，
 * 格子裡只放一張 spacer.gif／line.gif 時不留行高；新版要改 block，否則細線被撐成 22px 粗條。 */
.member-notice td[bgcolor] > img,
.member-fields td > img:only-child { display: block; }

/* menu.css:3 的 *{margin:0} 會蓋掉 <table align="center"> 的置中（舊版 iframe 內頁沒載 menu.css），送出／清除鈕要補回來 */
.member-buttons { margin: 0 auto; }
/* ── F. 首頁（un_index.asp）──
 * 舊首頁外層是一張兩欄 table（左 flex、右 256），改成 div 才能在窄螢幕上下疊；
 * 欄內 table 照抄，所以這裡只補 table 屬性原本給的尺寸、底色與 hover 換圖。 */
.home #idcontent { background: #ffffff; }
.home #pic img { display: block; }
/* 視覺比對實測：舊首頁頁尾 iframe 是 309，內頁共用的頁尾是 315，首頁收回 6px */
.home #footer { height: 309px; }
.home-cols { display: flex; align-items: flex-start; }
.home-main { flex: 1 1 auto; min-width: 0; padding: 20px; }        /* un_index.asp:69 padding:20px */
.home-side { flex: 0 0 256px; width: 256px; }                        /* un_index.asp:248 width:256px */
.home-gap { height: 1px; font-size: 0; line-height: 0; }             /* un_index.asp:254 1px spacer */

/* 最新消息標題列：背景 697×31，右側 more 67×31 hover 換圖 */
.home-news-head { background: url(../legacy/images/index_title/index_newtitle_01.jpg) no-repeat left top; }
.home-more { vertical-align: top; width: 67px; height: 31px; background-image: url(../legacy/images/index_title/index_newtitle_04.jpg); }
.home-more:hover { background-image: url(../legacy/images/index_title/index_newtitle_b_04.jpg); }

/* 相簿（底圖 490×287）＋跑馬燈 */
.home-media { display: flex; flex-wrap: wrap; align-items: flex-start; }  /* 820 寬時 490+192 放不下，廣告掉到相簿下方 */
.home-photos { flex: 0 0 490px; background: url(../legacy/images/photo_bg.jpg) no-repeat left top; }
.home-photo-row { display: flex; justify-content: space-around; }
.home-photo-cell { text-align: center; }
.home-photo-cell img { display: block; margin: 0 auto; max-width: 140px; max-height: 140px; }
.home-ads { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; }

/* 舊首頁 <head> 內的跑馬燈 <style>（un_index.asp:51-57），原樣搬過來 */
.ann { overflow: hidden; height: 129px; font-size: 13px; padding: 0; color: #425056; }
.ann a { color: #425056; }
.ann a:hover { color: #f60; }
.annbg { width: 192px; display: block; height: 255px; }

/* 小月曆：背景 256×192、標題列 #c00c10 32px 高、箭頭 24×24 hover 換圖 */
.home-calendar { background: url(../legacy/images/index/index_08.jpg) no-repeat left top; width: 256px; font-size: 13px; }
.hc-head { background: #c00c10; height: 32px; display: flex; align-items: flex-start; justify-content: space-between; }
.hc-head .caname { color: #ffffff; padding-top: 2px; }
.hc-prev, .hc-next { width: 24px; height: 24px; }
.hc-prev { background-image: url(../legacy/images/calendar/Calendar_arrow01.png); }
.hc-prev:hover { background-image: url(../legacy/images/calendar/Calendar_arrow01b.png); }
.hc-next { background-image: url(../legacy/images/calendar/Calendar_arrow02.png); }
.hc-next:hover { background-image: url(../legacy/images/calendar/Calendar_arrow02b.png); }
.home-calendar td.hc-weekend { color: #d8271c; }                     /* 舊版週末字紅 */
.home-calendar td.hc-event { background: #FCFFC0; }                  /* 有活動 */
.home-calendar td.hc-today { background: pink; }                     /* 今天，蓋過有活動 */
.home-calendar td a { color: blue; }                                  /* 舊版 <font color='blue'> */
.home-rule { height: 1px; background: #ededed; font-size: 0; line-height: 0; }

/* 四顆按鈕：沿用 E 段 .left-promo .promo 的 text-indent 隱字做法 */
.home-promo {
    display: inline-block; vertical-align: top;
    background-repeat: no-repeat; background-position: left top;
    overflow: hidden; text-indent: -9999px;
}
.home-promo01 { width: 132px; height: 93px; background-image: url(../legacy/images/index_subbutton/subbutton_01.jpg); }
.home-promo01:hover { background-image: url(../legacy/images/index_subbutton/subbutton_b_01.jpg); }
.home-promo02 { width: 124px; height: 93px; background-image: url(../legacy/images/index_subbutton/subbutton_02.jpg); }
.home-promo02:hover { background-image: url(../legacy/images/index_subbutton/subbutton_b_02.jpg); }
.home-promo03 { width: 132px; height: 92px; background-image: url(../legacy/images/index_subbutton/subbutton_03.jpg); }
.home-promo03:hover { background-image: url(../legacy/images/index_subbutton/subbutton_b_03.jpg); }
/* 第四顆 ISTT：原圖 115×102，舊版 <img> 硬拉成 124×93 會變形；新版維持格子大小、圖等比置中（裁示 Q4） */
.home-promo04 {
    width: 124px; height: 92px;
    background-image: url(../legacy/images/index_subbutton/subbutton_05.png);
    background-position: center; background-size: contain; background-repeat: no-repeat;
}
.home-promo04:hover { background-image: url(../legacy/images/index_subbutton/subbutton_b_05.png); }

/* 首頁窄螢幕：沿用 C 段的三個斷點 */
@media (max-width: 1003px) {
    .home #pic img { width: 100%; height: auto; }
}
@media (max-width: 819px) {
    .home-cols { flex-direction: column; }
    /* 舊版手機首頁沒有登入框、小月曆、四顆按鈕這一欄：會員登入在側欄，四顆按鈕由頁尾快捷鈕取代 */
    .home-side { display: none; }
}
@media (max-width: 767px) {
    .home-main { padding: 12px 8px; }
    .home-media { flex-direction: column; align-items: center; }
    .home-photos { flex-basis: auto; width: 100%; background-size: 100% auto; }
    .home-photos > table { width: 100%; }
    .home-photo-row { flex-wrap: wrap; gap: 8px; }
    .home-news-head { background-size: auto 31px; }
    /* 最新消息：舊版手機 style.css #Inews_block .new_block 每筆三行——日期 11pt Arial、分類、標題 13pt 黑，
     * 底下 1px 虛線（#333 實 2px 空 3px）、上下各 15px */
    .home-main table.new, .home-main table.new > tbody { display: block; }
    .home-main table.new tr { display: flex; flex-wrap: wrap; }
    .home-main table.new td { display: block; width: 100%; padding: 0; }
    .home-main table.new td:nth-child(2) { display: none; }
    .home-main table.new td:nth-child(4) { order: -1; font: 11pt Arial, sans-serif; }
    .home-main table.new td:nth-child(3) a { padding: 0; font-size: 13pt; line-height: 1.5; color: #000; }
    .home-main table.new td[colspan] { margin-bottom: 15px; padding-top: 15px;
        background: linear-gradient(to right, #333 40%, transparent 40%) left bottom / 5px 1px repeat-x; }
    .home-main table.new td[colspan] img { display: none; }
}

/* ── F2. 首頁（較新版 un_index.asp:95-268）──
 * D 用 inline style 排版，這裡逐條搬成 class；F 段的 .home-* 留給英文首頁與四顆按鈕。 */
.home2 { padding: 10px 20px 20px; }
.home2-top, .home2-news { display: flex; align-items: flex-start; }
.home2-focus { flex: 1 1 auto; min-width: 0; }
.home2-promos { flex: 0 0 275px; width: 275px; margin-left: 5px; }
.home2-subject { height: 31px; padding: 4px; color: #ffffff; font: 700 15pt 'Arial', sans-serif; }
.home2-subject-focus { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 41%, rgba(255, 255, 255, 0.8) 100%); }
.home2-subject-album { background: linear-gradient(270deg, rgba(238, 127, 97, 1) 19%, rgba(238, 255, 255, 1) 100%); }
.home2-focus-item { display: inline-block; padding: 5px; text-align: center; vertical-align: top; }
.home2-focus-item img { display: block; width: 160px; margin: 0 auto; }
.home2-focus-item span { display: block; width: 160px; }
.home2-news { margin-top: 10px; }
.home2-albums, .home2-latest { flex: 1 1 50%; min-width: 0; }
.home2-latest { background: #ffffff; }
.home2-album { display: inline-block; width: 31%; height: 250px; vertical-align: top; color: inherit; }
.home2-album-pic { display: block; height: 140px; text-align: center; }
/* 手機寬時 31% 小於縮圖原寬 140px，不限制會超出版面右緣 */
.home2-album-pic img { max-width: 100%; height: auto; }
.home2-album-title { display: block; height: 45px; overflow: hidden; padding: 3px; }
.home2-album-date { display: block; color: #ffffff; background: red; text-align: center; }
.home2-latest-head { text-align: right; background: url(../legacy/images/index_title/index_newtitle_01.jpg) no-repeat left top; }
.home2-latest-list { width: 100%; }
.home2-latest-title { padding: 8px; }
@media (max-width: 819px) {
    .home2-top, .home2-news { flex-direction: column; }
    .home2-focus, .home2-albums, .home2-latest { width: 100%; }
    .home2-promos { display: none; }   /* 同舊首頁右欄：窄螢幕改由手機頁尾快捷鈕 */
}
@media (max-width: 767px) {
    .home2 { padding: 12px 8px; }
}

/* ── K. 內頁與活動照片的手機版 ──
 * 內頁橫幅 772px、#con 左右各 20px、.page 的 12px 留白都會把手機版撐出橫向捲軸（量到整頁 784px）。
 * 活動照片三頁是舊版固定寬度表格：相簿清單 3 欄卡片、相簿內 3 欄 192px 縮圖、單張 535／543 表格加 600px 大圖。 */
@media (max-width: 819px) {
    .col-r > img { max-width: 100%; height: auto; }
}
@media (max-width: 767px) {
    .page { box-sizing: border-box; }
    #con { padding: 0 8px; }
    /* 相簿清單：卡片改直排；後面補位的空格子拿掉，免得多出一欄 */
    td.album-card { display: block; width: auto; margin-bottom: 8px; }
    td.album-card ~ td:not(.album-card) { display: none; }
    /* 相簿內頁：維持 3 欄，縮圖跟著欄寬縮 */
    .album-photo img { max-width: 100%; height: auto; }
    /* 單張：兩層固定寬表格改滿版，大圖跟著縮；左右鈕仍疊在圖的兩側 */
    table.photo-view, table.photo-view table { width: 100%; }
    table.photo-view .photo-stage { width: auto; height: auto; }
    table.photo-view .photo-stage img { max-width: 100%; height: auto; }
}


/* ── M. 手機版（S11，對齊舊版 mobile/NCss/menustyle.css、style.css）──
 * 手機元件都有 m- 前綴，平常不顯示；≤1003px 換掉桌機頁首（#topbg 的 1004 寬背景圖在手機上整個被切掉）。
 * 舊 CSS 沒有規則打到 header／nav／details／summary 元素，手機元件一律用這些元素，不放進 #topbg／#footer。 */
.m-header, .m-drawer, .m-overlay, .m-footer-buttons, .m-banner, .m-schedule, .m-back-text, .m-login-pic, .m-login-label { display: none; }
/* 會員登入：按鈕原本在表格最後一列（cellpadding 6），抽出來後補同樣內距，桌機位置不變 */
.login-buttons { padding: 6px; }

@media (max-width: 1003px) {
    #topbg { display: none; }

    /* 頁首：menustyle.css .header 高 88、底 #161616；logo 左距 30、寬 70vw；漢堡鈕 30×88、圖 35px */
    .m-header { display: block; height: 88px; line-height: 88px; background: #161616; }
    .m-logo img { width: 70vw; max-width: 300px; height: auto; margin-left: 30px; vertical-align: middle; }
    .m-menu-button { float: right; width: 30px; height: 88px; margin-right: 15px; border: 0; cursor: pointer;
                     background: url(../legacy/images/mobile/nav.svg) center / 35px no-repeat; }

    /* 側欄：250px、底 #707171、從右邊滑出。關閉時 visibility:hidden，鍵盤 Tab 不會跳進看不到的選單 */
    .m-drawer { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: 250px; overflow-y: auto;
                background: #707171; z-index: 1001; transform: translateX(100%); visibility: hidden;
                transition: transform .3s, visibility 0s linear .3s; }
    html.m-open .m-drawer { transform: none; visibility: visible; transition: transform .3s; }
    .m-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; border: 0; background: rgba(0, 0, 0, .6); }
    html.m-open .m-overlay { display: block; }

    /* 會員區：style.css .t_i_member 底 #0057cc；.icon_block 11pt 粗、每個 li 一行、左右 2em；姓名 12pt 粗白 */
    .m-member { background: #0057cc; font-size: 11pt; font-weight: bold; }
    .m-member ul { margin: 0; padding: 0; list-style: none; }
    .m-member li { padding: 0 2em; }
    .m-member a, .m-logout { display: block; height: 50px; line-height: 50px; padding: .2em 0; width: 100%; text-align: left;
                             color: #fff; font: inherit; background: none; border: 0; text-decoration: none; cursor: pointer; }
    .m-member-name { margin: 0; padding: 1em .7em 1em 2em; color: #fff; font-size: 12pt; font-weight: bold; }

    /* 選單：menustyle.css .menu a 列高 50、上下 .2em、白字；span 左距 30；子選單底 #5e5e5e、寬 85%、左距 15%；父項加 ▾ */
    .m-nav { margin: 0; padding: 0; list-style: none; }
    .m-nav a, .m-nav summary { display: block; height: 50px; line-height: 50px; padding: .2em 0; color: #fff; text-decoration: none; cursor: pointer; }
    .m-nav span { padding-left: 30px; }
    .m-nav summary { list-style: none; }
    .m-nav summary::-webkit-details-marker { display: none; }
    .m-nav summary span::after { content: ' ▾'; padding-left: 4px; }
    .m-nav details ul { margin: 0; padding: 0; list-style: none; background: #5e5e5e; }
    .m-nav details li a { width: 85%; padding-left: 15%; }
    /* .fb_svg：margin 1em、圖原尺寸 200×69 */
    .m-fb { margin: 1em; }
    .m-fb img { max-width: 100%; height: auto; }
}

@media (max-width: 819px) {
    /* 舊版手機站沒有左欄：會員區與分類都在側欄裡 */
    .col-l { display: none; }

    /* 手機橫幅：舊版 mobile/un_main.asp 黑底、寬 100%、高 162、圖 center top 不縮放；
     * 標題 style.css .mlogo 白字 16pt 粗、left 0、top calc(81px - 2em)、內距 1em 1.5em、半透明白底 */
    .col-r > img { display: none; }
    .m-banner { display: block; position: relative; height: 162px; overflow: hidden; background: #000; }
    .m-banner img { display: block; width: 100%; max-width: none; height: 162px; object-fit: none; object-position: center top; }
    .m-banner-title { position: absolute; left: 0; top: calc(81px - 2em); padding: 1em 1.5em;
                      background: rgba(255, 255, 255, .2); color: #fff; font-size: 16pt; font-weight: bold; }

    /* 四顆快捷鈕：style.css #footer_button_block 底 #757575、上下 15、置中換行；每顆寬 40%、外距 5、內距 1em、白框白字（文字靠左），hover 底 #0871fe */
    .m-footer-buttons { display: flex; flex-wrap: wrap; justify-content: center; padding: 15px 0; background: #757575; }
    .m-footer-buttons a { box-sizing: border-box; width: 40%; margin: 5px; padding: 1em; color: #fff; text-decoration: none;
                          box-shadow: inset 0 0 0 1px #fff; }
    .m-footer-buttons a:hover { background: #0871fe; box-shadow: inset 0 0 0 1px #0871fe; }

    /* 站內地圖：style.css #footer padding 5%；.Ftitle 11pt 粗 #ccecf4、下距 2em；.Fsub a 11pt #ccc、外距 .1em .8em .1em .2em，同一行排列。
     * menu.css 的 1004 寬背景圖與 .menu 等寬排列全部解除；#footer div #sitemap > div.menu (2,1,2) 後載入壓過 #footer div #sitemap .menu (2,1,2)，
     * .menu.first (2,2,2) 另外解除。.menu-plain 兩欄桌機沒有標題列，每一項在舊手機站都是獨立標題（年度工作計畫、理監事會議、招募菁英、聯絡我們），照標題樣式。 */
    /* .home #footer 固定 309px（桌機背景圖高度）優先權較高，要一起解除，否則首頁頁尾被截掉 */
    #footer, .home #footer { height: auto; background: #757575; }
    #footer div { width: auto; }
    #footer div #sitemap { padding: 5%; }
    #footer div #sitemap > div.menu, #footer div #sitemap > div.menu.first { display: block; margin: 0; width: auto; line-height: 1.6; }
    #footer div #sitemap ul { margin: 0 0 2em; padding: 0; list-style: none; }
    #footer div #sitemap li { display: inline; }
    #footer div #sitemap a { margin: .1em .8em .1em .2em; color: #ccc; font-size: 11pt; font-weight: 500; }
    #footer div #sitemap a:hover { color: #fff; }
    #footer div #sitemap li.t, #footer div #sitemap .menu-plain li { display: block; }
    #footer div #sitemap li.t a, #footer div #sitemap .menu-plain a { margin: 0; color: #ccecf4; font-weight: bold; }
    #footer div #sitemap .menu-plain li { margin-bottom: 2em; }
    #footer div #sitemap .menu-plain ul { margin-bottom: 0; }
    /* 版權列：style.css #footer_info 底 #515151、.address 9.75pt 白字、內距 .5em、置中 */
    #footer div #copyright { position: static; width: auto; padding: .5em; background: #515151; color: #fff; font-size: 9.75pt; text-align: center; }
    #footer div #copyright a { color: #fff; }
}

@media (max-width: 767px) {
    /* 清單頁：舊版手機站沒有表頭與分隔圖列 */
    .m-hide { display: none; }
    table.m-fluid { width: 100%; }
    /* spacer.gif 原圖 1×1，height:auto 會依原圖比例把寬 120 的撐成 120 高、高 10 的壓成 1，只當間距用就保留 height 屬性 */
    #con img { max-width: 100%; }
    #con img:not([src$="spacer.gif"]) { height: auto; }
    /* 返回鈕：reset.css .member_button 置中；#backbu a 13pt 粗、內距 .5em 2em、底 #666 白字、圓角 3、外距 10 10 10 0，hover 底 #000 */
    td.m-back { text-align: center; }
    td.m-back .swap-img { display: none; }
    td.m-back .m-back-text { display: inline-block; margin: 10px 10px 10px 0; padding: .5em 2em; border-radius: 3px; background: #666; color: #fff; font-size: 13pt; font-weight: 700; }
    td.m-back .m-back-text:hover { background: #000; }

    /* 卡片列：style.css .news_list_block .list 每筆外距 1em 0、底線 1px #d1d1d1；
     * .txt01 日期寬 6em #3d699a、.txt02 標題 calc(100% - 6em) 粗黑、.txt03 小字 11.5pt 縮排 6.8em「發佈人：X/ 瀏覽人數：N」。
     * 6em×13pt 與 6.8em×11.5pt 都約 104px，所以整列左側留 6em、日期絕對定位放進去，標題與小字在右側自然換行（小字兩欄要一起折行，不能各自成塊）。
     * 出版品 .publication_list_block 同一套數值，但標題在前、日期在右。 */
    table.m-list, table.m-list > tbody { display: block; width: 100%; }
    tr.m-card { position: relative; display: block; margin: 1em 0; padding: 0 0 .2em 6em; border-bottom: 1px solid #d1d1d1;
                font-size: 13pt; line-height: 20px; color: #7d7d7d; }   /* reset.css body 13pt #7d7d7d 行高 20px */
    tr.m-card > td { display: block; height: auto; padding: 0; white-space: normal; font-size: inherit; text-align: left; }
    tr.m-card > .m-date { position: absolute; left: 0; top: 0; width: 6em; }
    tr.m-card > .m-date, tr.m-card > .m-date font { color: #3d699a; }
    tr.m-card > .m-title { font-weight: bold; }
    tr.m-card > .m-title a { padding: 0; font-size: inherit; line-height: inherit; color: #000; }   /* index.css .new a 左右 10px、13pt、行高 30px */
    tr.m-card > .m-title:first-child { margin: 0 6em 0 -6em; }
    tr.m-card > .m-title + .m-date { left: auto; right: 0; }
    tr.m-card > .m-meta { display: inline; font-size: 11.5pt; }
    tr.m-card > .m-meta div { display: inline; }
    .m-meta[data-label]::before { content: attr(data-label) "："; }
    .m-meta + .m-meta[data-label]::before { content: "/ " attr(data-label) "："; }

    /* 技術研討會：style.css .symposium_list_block 日期、標題、發佈人各佔一行，三行都粗體；日期與發佈人 10pt、標題 12pt 黑 */
    tr.m-stack > td { display: block; width: auto; font-weight: bold; }
    tr.m-stack .pM { font-size: 10pt; }
    tr.m-stack a { font-size: 12pt; color: #000; }

    /* 會員廣告園地：舊版手機一樣三欄（.list_block 寬 calc(100%/3)），縮圖跟著縮 */
    .ad-list table.m-fluid { table-layout: fixed; }
    .ad-list table.m-fluid table { width: 100%; }

    /* 行事曆：舊版手機站 un_schedule01 頁內 <style> 與 style.css .Calendar_next_year_block、reset.css .solid_line。
     * 上下月 13pt 粗 #565656、月份 18pt 粗置中；每天一列：左 30% 日期格高 80 塗底色、徽章 #666 白字（今天白底黑字），
     * 右 65% 左距 5% 列活動（12pt 粗 #5B5B5B）；列與列之間 1px #878787 虛線 */
    table.schedule-calendar { display: none; }
    .m-schedule { display: block; }
    .m-cal-nav { display: flex; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #c0c0c0; }
    .m-cal-nav a { flex: 0 0 30%; color: #565656; font-size: 13pt; font-weight: bold; }
    .m-cal-nav a:last-child { text-align: right; }
    .m-cal-nav a:hover { color: #ff6600; }
    .m-cal-nav img { vertical-align: middle; }
    .m-cal-month { flex: 0 0 40%; text-align: center; font-size: 18pt; font-weight: bold; }
    .m-days, .m-legend { margin: 0; padding: 0; list-style: none; }
    .m-day { display: flex; padding-bottom: 10px; margin-bottom: 5px; border-bottom: 1px dashed #878787; }
    .m-day-cell { flex: 0 0 30%; height: 80px; background: #fafafa; }
    .m-day.m-weekend .m-day-cell { background: #efefef; }
    .m-day.m-has .m-day-cell { background: #94bd21; }
    .m-day.m-today .m-day-cell { background: #0871fe; }
    .m-day-badge { display: inline-block; min-width: 1.25em; margin: 4% 0 0 4%; padding: 2px 4px; background: #666; color: #fff; text-align: center; }
    .m-day.m-today .m-day-badge { background: #fff; color: #000; }
    .m-day-events { flex: 1 1 auto; min-width: 0; padding-left: 5%; }
    .m-day-events p { margin: 0; }
    .m-day-events img { vertical-align: middle; }
    .m-day-events a { font-size: 12pt; font-weight: bold; color: #5b5b5b; }
    .m-day-events a:hover { color: #000; }
    .m-day-events .m-day-more { text-align: right; }
    .m-legend li { display: inline-block; margin-right: .5em; }
    .m-legend i { display: inline-block; width: 20px; height: 20px; margin-right: .3em; border: 1px solid #000; vertical-align: middle; }

    /* 表單：舊版手機 .Cooperation 一樣左標題右欄位兩欄，輸入框寬 90%、標題不換行 */
    table.m-form { width: 100%; }
    table.m-form td { white-space: normal; }
    table.m-form td[align="right"], table.m-form td[bgcolor="#f3f3f3"] { white-space: nowrap; }
    table.m-form input:not([type]), table.m-form input[type="text"], table.m-form input[type="password"],
    table.m-form textarea { width: 90%; max-width: 100%; box-sizing: border-box; }

    /* 會員登入：舊版手機 un_login01 與 style.css #loginbg。.textArea01 圖、.textArea02 欄位各 50% 左浮動，圖上距 1em；
     * .titletxt 15pt 粗黑在欄位上方、.subtxt 8pt Arial #939393；.inputst 框 1px #adadad、內距 5、行高 25、寬 calc(100% - 25px)；
     * 按鈕列 .member_button 置中、#backbu a 與返回鈕同款；沒有「加入會員」 */
    .login-box { overflow: hidden; }
    .m-login-pic { display: block; float: left; width: 50%; padding-top: 1em; text-align: center; }
    .m-login-pic img { max-width: 100%; height: auto; }
    table.login-fields { float: left; width: 50%; }
    table.login-fields, table.login-fields > tbody, table.login-fields tr, table.login-fields td { display: block; }
    table.login-fields td { padding: 0; }
    table.login-fields td + td { padding-bottom: 1em; }   /* 舊版欄位與下一個標題之間隔一列空白 */
    table.login-fields label { font-size: 15pt; font-weight: 700; color: #000; }
    .m-login-label { display: inline; }
    .m-login-sub { font: 8pt Arial, sans-serif; color: #939393; }
    table.login-fields input { width: calc(100% - 25px); max-width: none; padding: 5px; border: 1px solid #adadad; line-height: 25px; background: #fff; }
    .login-buttons a.m-hide { display: none; }
    .login-buttons { clear: both; padding: 0; text-align: center; }
    .login-buttons button, .login-buttons a { display: inline-block; margin: 10px 10px 10px 0; padding: .5em 2em; border: 0; border-radius: 3px;
                                              background: #666; color: #fff; font: 700 13pt "微軟正黑體", sans-serif; cursor: pointer; }
    .login-buttons button:hover, .login-buttons a:hover { background: #000; color: #fff; }
}

/* 舊版手機 style.css ≤479：#loginbg 圖與欄位各佔滿一行 */
@media (max-width: 479px) {
    .m-login-pic, table.login-fields { width: 100%; }
}

/* 內頁：後台編輯器的內文常有固定寬的表格與圖（技術服務有 806 寬的表）。舊版手機站硬把表格擠成 100%（字變直排），
 * 新版改成只有內文這塊可以左右捲，頁面本身不橫捲；contain 讓這塊不把外層表格撐寬。768～1003 也是手機版面，一起套 */
@media (max-width: 1003px) {
    .m-scroll { max-width: 100%; overflow-x: auto; contain: inline-size; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    .m-drawer, html.m-open .m-drawer { transition: none; }
}

/* ── N. 英文桌機固定（S10）──
 * _EnLayout 不是響應式（viewport 固定 1004，E4）：把 C、M、K 段在窄視窗的變更全部還原成桌機值。
 * 全部以 html.en 開頭，中文頁完全不受影響；數值取自 en_menu.css／en_main.css 與還原前的桌機 computed style。 */
@media (max-width: 1003px) {
    html.en .page { width: 1004px; }
    html.en #topbg { display: block; }
}
@media (max-width: 819px) {
    html.en .col-l { display: block; width: 232px; float: left; }
    html.en .col-r { width: 772px; float: left; }
    html.en .col-r > img { display: block; max-width: none; height: 162px; }
    /* 頁尾：解除 M 段的流動版型，回到 en_menu.css 的背景圖＋絕對定位 */
    html.en #footer { height: 315px; background: url(../legacy/images/index/en_index_11.jpg) repeat-x left top; }
    html.en #footer div { width: 1004px; }
    html.en #footer div #sitemap { padding: 0; }
    html.en #footer div #sitemap01, html.en #footer div #sitemap02, html.en #footer div #sitemap03,
    html.en #footer div #sitemap04, html.en #footer div #sitemap05, html.en #footer div #sitemap06 { position: absolute; line-height: 20px; }
    html.en #footer div #sitemap01 { width: 120px; }
    html.en #footer div #sitemap02 { width: 120px; }
    html.en #footer div #sitemap03 { width: 210px; }
    html.en #footer div #sitemap04 { width: 120px; }
    html.en #footer div #sitemap05 { width: 130px; }
    html.en #footer div #sitemap06 { width: 90px; }
    html.en #footer div #sitemap ul { margin: 0; }
    html.en #footer div #sitemap li, html.en #footer div #sitemap li.t { display: list-item; margin: 0; }
    html.en #footer div #sitemap a { margin: 0; color: #dcdcdc; font-size: 12px; font-weight: 400; }
    html.en #footer div #sitemap a:hover { color: #ff6000; }
    html.en #footer div #sitemap li.t a, html.en #footer div #sitemap05 a, html.en #footer div #sitemap06 a { margin: 0; color: #ccecf4; font-weight: 400; }
    html.en #footer div #sitemap li.t a:hover, html.en #footer div #sitemap05 a:hover, html.en #footer div #sitemap06 a:hover { color: #ff6000; }
    html.en #footer div #copyright { position: absolute; width: 750px; padding: 0; background: none; color: #949494; font-size: 13px; text-align: center; }
    html.en #footer div #copyright a { color: #949494; }
    html.en #footer div #copyright a:hover { color: #ff7200; }
}
@media (max-width: 767px) {
    html.en #con { padding: 0 20px; }
}

/* ── N（續）英文左欄按鈕圖（Task 5）──
 * 登入／登出鈕與四顆促銷鈕的圖是 CSS 背景，英文頁換成 en_ 開頭的圖；選擇器優先權高於 E 段，不影響中文頁。 */
html.en .img-button.login-button { background-image: url(../legacy/images/calendar/en_login_button.gif); }
html.en .img-button.login-button:hover { background-image: url(../legacy/images/calendar/en_login_buttonb.gif); }
html.en .img-button.logout-button { background-image: url(../legacy/images/calendar/en_logout_button.gif); }
html.en .img-button.logout-button:hover { background-image: url(../legacy/images/calendar/en_logout_buttonb.gif); }
html.en .left-promo .promo01 { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_01.jpg); }
html.en .left-promo .promo01:hover { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_b_01.jpg); }
html.en .left-promo .promo02 { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_02.jpg); }
html.en .left-promo .promo02:hover { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_b_02.jpg); }
html.en .left-promo .promo03 { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_03.jpg); }
html.en .left-promo .promo03:hover { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_b_03.jpg); }
html.en .left-promo .promo04 { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_04.jpg); }
html.en .left-promo .promo04:hover { background-image: url(../legacy/images/left_subbutton/en_left_subbutton_b_04.jpg); }

/* N-2. 英文首頁（_EnHomeLayout）：換圖＋把 F 段首頁的窄螢幕規則在英文頁還原 */
html.en .home-news-head { background-image: url(../legacy/images/index_title/en_index_newtitle_01.jpg); }
html.en .home-photos { background-image: url(../legacy/images/en_photo_bg.jpg); }
html.en .home-promo01 { background-image: url(../legacy/images/index_subbutton/en_subbutton_01.jpg); }
html.en .home-promo01:hover { background-image: url(../legacy/images/index_subbutton/en_subbutton_b_01.jpg); }
html.en .home-promo02 { background-image: url(../legacy/images/index_subbutton/en_subbutton_02.jpg); }
html.en .home-promo02:hover { background-image: url(../legacy/images/index_subbutton/en_subbutton_b_02.jpg); }
html.en .home-promo03 { background-image: url(../legacy/images/index_subbutton/en_subbutton_03.jpg); }
html.en .home-promo03:hover { background-image: url(../legacy/images/index_subbutton/en_subbutton_b_03.jpg); }
html.en .home-promo04 { background-image: url(../legacy/images/index_subbutton/en_subbutton_04.jpg); }
html.en .home-promo04:hover { background-image: url(../legacy/images/index_subbutton/en_subbutton_b_04.jpg); }
html.en .home-promo04 { background-position: 0 0; background-size: auto; }
/* 首頁登入框：en_log.css 的 #loginbg div{width:256px;position:relative} 也套到 #input01／#input02（left:80px），
 * 舊版在 256×165、scrolling=No 的 iframe 裡被裁掉；攤平後撐出 1004 框外 80px，照 iframe 外框裁切 */
html.en #loginbg { overflow: hidden; }
/* 內頁頁尾：en_menu.css:13 寫 330，但舊版 en_main.asp:184 的頁尾 iframe 高 315、scrolling=No，下方 15px 被裁掉；
 * 照 iframe 高（同中文 menu.css 的 315）。html.en #footer 優先權高過 F 段的 .home #footer，首頁 309 要一起寫 */
html.en #footer { height: 315px; }
html.en .home #footer { height: 309px; }
/* 聯絡我們：同 H 段，en_contact01.asp 是 XHTML Transitional（almost-standards），分隔列的 1px line.gif、表頭灰線與按鈕上方的 spacer.gif、標題圖都不留行高；
 * 新版標準模式被行高撐成 20px 條紋。中文頁同樣情形另案，這裡只動英文 */
html.en table.m-form td[background] > img,
html.en #active td[bgcolor="#e7e7e7"] > img,
html.en #active .contact-title,
html.en table.m-form td[colspan] > img:only-child { display: block; }
/* 舊版 en_contact01.asp 只載 en_index.css、沒有 en_reset.css；攤平後 en_reset.css:12 的 font-size:inherit 讓輸入框吃到 16px，
 * 每列高 3px、size=50 的框也變寬。退回瀏覽器預設字型（舊版 iframe 裡的樣子） */
html.en #active .contact_input, html.en #active .contact_text { font: revert; }
/* 入會說明：舊版 en_member09.asp 載的是中文 index.css／reset.css（內容是中文聲明），聲明與按鈕照舊用中文字型與行高 */
html.en .en-zh-block, html.en .en-zh-block td { font-family: "微軟正黑體"; line-height: 22px; }
@media (max-width: 1003px) {
    html.en .home #pic img { width: 1004px; height: 338px; }
}
@media (max-width: 819px) {
    html.en .home-cols { flex-direction: row; }
    html.en .home-side { display: block; }
    /* 首頁頁尾高 309（en_index.asp 的頁尾 iframe 高），要壓過內頁用的 html.en #footer 315 */
    html.en .home #footer { height: 309px; }
}
@media (max-width: 767px) {
    html.en .home-main { padding: 20px; }
    html.en .home-media { flex-direction: row; align-items: flex-start; }
    html.en .home-photos { flex-basis: 490px; width: auto; background-size: auto; }
    html.en .home-photos > table { width: 490px; }
    html.en .home-photo-row { flex-wrap: nowrap; gap: 0; }
    html.en .home-news-head { background-size: auto; }
    html.en .home-main table.new { display: table; }
    html.en .home-main table.new > tbody { display: table-row-group; }
    html.en .home-main table.new tr { display: table-row; }
    html.en .home-main table.new td { display: table-cell; width: auto; padding: revert; margin: 0; background: none; }
    html.en .home-main table.new td:nth-child(2) { display: table-cell; }
    html.en .home-main table.new td:nth-child(4) { order: 0; font: inherit; }
    html.en .home-main table.new td:nth-child(3) a { padding: revert; font-size: inherit; line-height: inherit; color: inherit; }
    html.en .home-main table.new td[colspan] { margin: 0; padding: revert; background: #c0c0c0; }
    html.en .home-main table.new td[colspan] img { display: inline; }
}

/* ── O. ISTT 專區（計畫 07）──
 * 期刊頁搬自 un_istt_show.asp／un_istt_detail.asp 的 inline <style> 與 ctstt.css 的 .gbtn
 * （ctstt.css 有全域 table 規則，不整支載入）；指南頁的分頁籤原本靠 bootstrap 4，新版不載 bootstrap，補最少的樣式。 */
.istt-heading { text-align: left; margin-bottom: 1em; }
.istt-center { text-align: center; margin: 1em 0; }
.istt-rel-link {
    display: inline-block; width: 200px; padding: 12px; text-align: center;
    color: #fff !important; background-color: rgb(20, 96, 200);
}
.istt-btn {
    display: inline-block; min-width: 80px; height: 32px; padding: 6px; border: 0; border-radius: 6px;
    font-family: 微軟正黑體, sans-serif; font-weight: 400; line-height: 20px; text-align: center;
    color: rgb(251, 251, 251) !important; background-color: rgb(54, 55, 57); cursor: pointer; box-sizing: border-box;
}
.istt-search { text-align: center; margin: 1em 0; }
.istt-search select, .istt-search input[type=text] { height: 28px; margin: 0 4px; }
.istt-dashed { border: 0; border-top: 1px dashed #999; margin: 1em 0; }
.istt-empty { text-align: center; padding: 3em 0; }
.istt-journals .col { text-align: center; }
.istt-cover { max-width: 100%; height: auto; }
.istt-no-cover {
    display: flex; align-items: center; justify-content: center;
    height: 200px; border: 1px dashed #bbb; color: #888;
}
.istt-subject { font-size: 1.2em; font-weight: 600; margin-bottom: 1em; }
.istt-doc { margin-bottom: 1em; }
.istt-content { overflow-wrap: anywhere; }
.istt-content img { max-width: 100%; height: auto; }
.istt-back { text-align: center; margin: 1.5em 0; }
.istt-clear { clear: both; }

.istt-tabs { display: flex; flex-wrap: wrap; margin: 0; border-bottom: 1px solid #dee2e6; }
.istt-tabs .nav-link-GS { display: block; padding: 8px 16px; color: inherit; text-decoration: none; }
.istt-tabs .nav-link-GS.active { color: #495057; background-color: #e5e5e5; border: 1px solid #dee2e6; border-bottom-color: #e5e5e5; }
.istt-guide-item { display: block; color: inherit; }
.istt-guide-item:hover { background-color: #f3f6fb; }
.istt-guide-image { display: block; max-width: 100%; height: auto; margin: 1em auto; }
.istt-guide-pdf { display: block; width: 100%; height: 80vh; min-height: 480px; margin: 1em 0; border: 1px solid #ddd; }
.istt-guide-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 1em 0; }
.istt-guide-edge { display: inline-block; min-width: 80px; padding: 6px; color: #888; text-align: center; }

@media (max-width: 767px) {
    .M_note .col, .M_note .col2 { float: none; width: auto; }
    .istt-guide-pdf { height: 60vh; min-height: 320px; }
}

/* ── 次選單會員登入／登出（較新版 un_menu.asp:16-18、49-63）──
   次選單左移到 550（多了會員登入）；只限中文頁首。 */
html:not(.en) #topbg div #submenu { left: 550px; }
#topbg div #submenu .submenu-form { display: inline; margin: 0; }
#topbg div #submenu .submenu-logout { padding: 0; border: 0; background: none; color: #a2ecff; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
#topbg div #submenu .submenu-logout:hover { color: #ff6600; }

/* ===== 大師講座（計畫 10） ===== */
.lecture-heading { text-align: left; margin-bottom: 1em; }
.lecture-title { background-color: #eef0f3; }
.lecture-meta { color: #4c4c4c; }
.lecture-notes { color: #6d6d6d; margin: 1em 0 3em; }
.lecture-join { font-size: 15px; margin: 0 0 1.5em; }
.lecture-video { display: block; max-width: 100%; height: auto; background: #000; }
.lecture-video[hidden] { display: none; }
.lecture-novideo { padding: 2em 0; color: #6d6d6d; }
.lecture-end { width: 640px; max-width: 100%; min-height: 264px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; background: #1460c8; color: #fff; text-align: center; }
.lecture-end[hidden] { display: none; }
.lecture-end-btns a { display: inline-block; margin: 0 .5em; padding: .4em 1em; border: 1px solid #fff; color: #fff !important; }

/* ===== 團體會員（un_group_show.asp／un_group_detail.asp；頁內 <style> 改寫於此） ===== */
.group-heading { margin: 10px 0; }
.group-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.group-cards .col { width: 200px; text-align: center; }
.group-logo { width: 180px; height: 180px; object-fit: contain; }
.group-banner { margin: 10px 0; padding: 8px; background-color: lightgray; border-radius: 7px; font-size: 24pt; font-weight: bold; }
.group-center { text-align: center; }
.group-btn { display: inline-block; width: 200px; padding: 12px; color: #fff; background-color: rgb(20, 96, 200); text-align: center; text-decoration: none; }
.group-weblink { padding-top: 50px; min-height: 80px; text-align: right; }
.group-weblink-btn { display: inline-block; padding: 20px; border: 1px solid #fff; border-radius: 8px; color: #fff; background-color: blueviolet; font-size: 14pt; text-decoration: none; }
.group-photo { max-width: 640px; margin: 10px auto; text-align: center; }
.group-photo img { max-width: 100%; height: auto; object-fit: contain; }
.group-summary, .group-text { margin: 10px 0; line-height: 1.6; }
.group-section { margin: 20px 0 10px; border-bottom: 3px solid #000; font-size: 20pt; font-weight: bold; text-align: center; }
.group-products { display: flex; flex-wrap: wrap; }
.group-product { width: 20%; padding: 4px; box-sizing: border-box; text-align: center; }
.group-product img { max-width: 100%; height: auto; object-fit: contain; }
.group-achieve { display: flex; gap: 12px; margin: 12px 0; }
.group-achieve.right { flex-direction: row-reverse; }
.group-achieve-img, .group-achieve-text { width: 50%; }
.group-achieve-img img { max-width: 100%; height: auto; object-fit: contain; }
.group-back { text-align: right; }
.group-back a { padding: 3px; border: 1px solid blue; }
@media (max-width: 767px) {
  .group-cards .col { width: calc(50% - 5px); }
  .group-logo { width: 100%; height: auto; max-height: 180px; }
  .group-product { width: 50%; }
  .group-achieve, .group-achieve.right { flex-direction: column; }
  .group-achieve-img, .group-achieve-text { width: 100%; }
}

/* ===== 會員專區（un_left_member.asp 巢狀選單、un_member61／62.asp 表格） ===== */
.left-menu-top { vertical-align: top; }
.left-menu-group, .left-menu-group ul { margin: 0; list-style-type: none; }
.left-menu-group { padding-left: 0; }
.left-menu-group ul { padding-left: 20px; }
.member-table { width: 100%; font-size: 10pt; }
.member-table td { text-align: center; }

/* 下載記錄搜尋列（un_member61.asp .search_bar：左邊條件、右邊按鈕） */
.member-search { overflow: hidden; }
.member-search-fields { float: left; }
.member-search-button { float: right; }
.member-download-notice { color: #c00; margin: 0 0 8px; }
@media (max-width: 767px) {
    .member-search-fields, .member-search-button { float: none; margin-bottom: 6px; }
    .member-search input[type=text] { width: 100% !important; box-sizing: border-box; }
}

/* 活動報名（計畫 11）：外觀搬自舊站 ctstt.css 的 .tbl_form／.gbtn，改 act- 前綴避免碰撞 */
.act-content { margin: 12px 0; color: #6d6d6d; }
.act-info { width: 100%; border-collapse: collapse; margin: 10px 0; background: #fff; }
.act-info th, .act-info td { padding: 6px; border: 1px solid #000; }
.act-info th { width: 20%; background: #069; color: #fff; text-align: center; white-space: nowrap; }
.act-info td { text-align: left; }
.act-buttons { text-align: center; margin: 12px 0; }
.act-btn { display: inline-block; min-width: 80px; height: 32px; line-height: 20px; padding: 6px; box-sizing: border-box; border-radius: 6px; background: rgb(54,55,57); color: #fbfbfb; text-decoration: none; }
.act-notice { color: red; text-align: center; margin: 8px 0; }
.act-notice-ok { color: green; }
@media (max-width: 767px) { .act-info th { width: 32%; white-space: normal; } }
.act-errors { color: red; margin: 8px 0 8px 20px; }
.act-req { color: red; }
.act-note { color: blue; }
.act-alert { margin: 8px 0; }
.act-form input[type=text], .act-form input[type=email], .act-form textarea { width: 90%; max-width: 420px; }
.act-form label { margin-right: 10px; white-space: nowrap; }
.act-inline { display: inline; }