@charset "utf-8";
/* ============================================================
   nw-fix.css — 讓 A 的 ftco 版型與 B 的 BasicCssSet 共存
   只針對三個根容器（頁首 / 頁尾 / 首頁），不影響 B 的任何內頁
   ============================================================ */

/* B 的 BasicCssSet-flex.css [class*="col-"]{float:left} 會把 A 的 col-md-* 浮起來，
   害 ftco 的 flex 版型（align-items-center / order-md-last）失效 */
#ftco-navbar [class*="col-"],
.ftco-footer [class*="col-"],
#nw-home [class*="col-"] { float: none; }

/* B 的 .btn{display:flex} —— A 側已改名 .nwbtn，這裡再保險一層 */
#ftco-navbar .nwbtn,
.ftco-footer .nwbtn,
#nw-home .nwbtn { display: inline-block; }

/* JS 沒跑起來時，.ftco-animate 不可以把內容藏起來（否則整頁空白） */
.ftco-animate { opacity: 1; visibility: visible; }
html.nw-js #nw-home .ftco-animate { opacity: 0; visibility: hidden; }

/* B 的 .logo{width:300px} 會撐爆 logo；新 nav 不帶 .logo，這裡限死尺寸。
   logo 本身是透明背景，字體是深灰加白色外框，深底與白底都看得清楚，
   所以不要幫它加任何底色 —— 早先誤判成「白色標誌」而在捲動後加了
   #2f2f30 的襯墊，結果就是白色導覽列上出現一塊黑色方塊。 */
#ftco-navbar .nw-brand { padding-top: 0; padding-bottom: 0; }
#ftco-navbar .nw-brand img { max-height: 50px; width: auto; display: block; background: none; }

/* 漢堡圖示（A 用的 .oi oi-menu 沒有對應字型，改用三條線） */
#ftco-navbar .nw-bars { display: inline-block; width: 22px; vertical-align: middle; margin-right: 6px; }
#ftco-navbar .nw-bars span { display: block; height: 2px; background: currentColor; margin: 4px 0; }

/* 搜尋框 */
#ftco-navbar .nw-search { display: flex; align-items: center; }
#ftco-navbar .nw-search input { border: none; padding: 4px 8px; width: 9em; font-size: 13px;
    background: rgba(255,255,255,.15); color: #fff; }
#ftco-navbar .nw-search input::placeholder { color: rgba(255,255,255,.6); }
#ftco-navbar.scrolled .nw-search input { background: rgba(0,0,0,.06); color: #333; }
#ftco-navbar.scrolled .nw-search input::placeholder { color: rgba(0,0,0,.4); }
@media (max-width: 991.98px) { #ftco-navbar .nw-search { margin: .5rem 0 1rem; } }

/* B 的 TopMenuList 有第二層，A 的 nav 沒有，補 dropdown 深色樣式 */
#ftco-navbar .dropdown-menu { background: #000; border: none; border-radius: 0; margin-top: 0; }
#ftco-navbar .dropdown-item { color: rgba(255,255,255,.6); font-size: 13px; padding: .5rem 1.25rem; }
#ftco-navbar .dropdown-item:hover,
#ftco-navbar .dropdown-item:focus { background: transparent; color: #9dcc17; }
#ftco-navbar.scrolled .dropdown-menu { background: #fff; }
#ftco-navbar.scrolled .dropdown-item { color: rgba(0,0,0,.6); }

/* 頁尾社群 icon 用 B 本地的 font-awesome，尺寸對齊 A */
.ftco-footer .ftco-footer-social li a { display: flex; align-items: center; justify-content: center; }

/* ★關鍵：B 的 BasicCssSet-flex.css:8 把 #header,#footer,.content,.innerhtml 全部設成
   float:left; width:100%。新頁尾不再帶 id="footer"，就失去了那個浮動脈絡，
   會從頁面頂端開始疊在浮動的內容上（實測頁尾高度被撐成 4234px、整頁變黑）。
   這裡補回 B 的浮動模型並加 clear，讓頁尾確實落在所有浮動內容之後。 */
.ftco-footer { float: left; width: 100%; clear: both; }

/* 導覽列同理：新 nav 不帶 id="header"，但它是 position:absolute，
   需要自己撐出高度，否則內頁第一個區塊會被蓋住 */
#ftco-navbar { width: 100%; }

/* ============================================================
   #nw-page — 內頁的 ftco 根容器（等同 #nw-home 之於首頁）
   只有白名單內的 .aspx 會包這個 id，其餘 40 多頁完全不受影響
   ============================================================ */

/* BasicCssSet-flex.css:27 [class*="col-"]{float:left} 會把 Bootstrap 的
   .col-md-* 浮起來，害 align-items-center / order-md-last / d-flex 失效 */
#nw-page [class*="col-"] { float: none; }

/* ★ BasicCssSet-flex.css:8 把 #defaultimg / .content / .innerhtml / .frm
   設成 float:left; width:100%。內頁拿掉 #defaultimg 與 .content 之後就失去
   那個浮動脈絡，頁尾會從頁面頂端疊上來（同 .ftco-footer 踩過的坑）。 */
#nw-page { float: left; width: 100%; clear: both; }

/* 後台編輯器產出的 .innerhtml 進到 ftco 版型後不需要再浮動 */
#nw-page .innerhtml { float: none; width: 100%; }
#nw-page .innerhtml img { max-width: 100%; height: auto; }
#nw-page .frm { float: none; width: auto; }

/* B 的 .btn{display:flex}（BasicCssSet-flex.css:22） */
#nw-page .nwbtn { display: inline-block; }

/* B 後台的 banner 圖是 1425x260（約 5.5:1），套進 600px 高、background-size:cover
   的 hero 會從頂端裁掉大半，改成置中裁切 */
#nw-page .hero-wrap { background-position: center center; }
@media (max-width: 991.98px) {
    #nw-page .hero-wrap { background-position: center center !important; }
}

/* A 的 .block-20 是 padding-bottom 撐高的背景圖卡片，B 的 .rwdimg 不可以蓋到它 */
#nw-page .block-20 { background-size: cover; background-position: center center; }

/* 內頁分類列（A 沒有對應元件，比照 ftco 的配色自訂） */
#nw-page .nw-catnav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
#nw-page .nw-cat { display: inline-block; padding: .45rem 1.1rem; border: 1px solid #e6e6e6;
    border-radius: 2rem; font-size: 14px; color: #6b6b7b; background: #fff; transition: .3s; }
#nw-page .nw-cat:hover { border-color: #9dcc17; color: #9dcc17; text-decoration: none; }
#nw-page .nw-cat.active { background: #9dcc17; border-color: #9dcc17; color: #fff; }

/* 分類圖示卡被選取時的狀態 */
#nw-page .services.active h3 { color: #9dcc17; }

/* 左右交錯大卡：A 的 portfolio-wrap 依賴首頁輪播的脈絡，內頁自訂一個乾淨版本 */
#nw-page .nw-portfolio .img { min-height: 320px; background-size: cover; background-position: center center; }
#nw-page .nw-portfolio .text { background: #fff; }
#nw-page .nw-portfolio .subheading { color: #9dcc17; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase; display: block; margin-bottom: .3rem; }
#nw-page .nw-portfolio h2 { font-size: 22px; }
@media (max-width: 767.98px) { #nw-page .nw-portfolio .img { min-height: 220px; } }

/* 內頁的 ftco-section 上下留白 12em 太鬆，內頁收一點 */
#nw-page .ftco-section { padding: 6em 0; }
@media (max-width: 767.98px) { #nw-page .ftco-section { padding: 3.5em 0; } }

/* 頁尾連繫欄的 email 很長又不含空白，在 1024px 寬會把欄位撐出視窗造成橫向捲動 */
.ftco-footer .block-23 .text { word-break: break-word; overflow-wrap: anywhere; }
.ftco-footer .block-23 li { max-width: 100%; }

/* 聯絡我們：原本掛在側邊欄的聯絡資訊，改成 ftco 版面裡的一個資訊卡 */
#nw-page .nw-contactinfo { background:#f8f9fa; border-radius:6px; padding:1.75rem 2rem; }
#nw-page .nw-contactinfo h3 { font-size:20px; margin-bottom:1rem; color:#2f2f30; }
#nw-page .nw-contactinfo p { display:flex; margin-bottom:.5rem; line-height:1.9; }
#nw-page .nw-contactinfo .subtit { display:inline-block; width:4em; flex:0 0 4em;
    color:#9dcc17; font-weight:600; letter-spacing:.5px; }
#nw-page .nw-contactinfo .gmap { margin-top:1.5rem; }
#nw-page .nw-contactinfo .gmap iframe { width:100%; min-height:320px; border:0; }
#nw-page .gmap iframe { width:100%; min-height:320px; border:0; }
@media (max-width:767.98px){ #nw-page .nw-contactinfo { padding:1.25rem; } }