@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&display=swap');


:root {

}

* {
	text-decoration: none;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
*:actived {
	text-decoration: none;
}
/*
*:focus {
	outline: none;
}
*/
input, textarea, button, select, button, blockquote {
	appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
	border: none;
}
textarea {
    resize: none;
}
/* http://meyerweb.com/eric/toolscss/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/*reset start*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    font-family: 'Noto Sans TC', serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul, li {
	list-style: none;
	padding: 0;
	margin: 0;
}

/*reset end*/


/*自定義開始*/
body {
    font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
    background-color: #fbf7f8;
}
img {
	max-width: 100%;
}
a {
	cursor: pointer;
    color: inherit;
}



img.desktop {
    display: inline-block!important;
}
img.mobile {
    display: none!important;
}
.desktop {
    display: block;
}
.mobile {
    display: none;
}
/**************\
* 通用邊界
\**************/
.row {
    position: relative;
}
.container-fluid{
    width: 100%;
	margin: 0 auto;
    position: relative;
}
.container {
	width: 100%;
    max-width: 1170px;
	margin: 0 auto;
    position: relative;
}

/*選單*/
nav {
    position: relative;
    overflow: visible;
    z-index: 99;
    width: 100%;
}
nav.fixed {
    position: fixed;
    top: 0;
}
nav .sub-menu {
    display: none;
}
nav.fixed.down {
    background-color: #FFF;
}
nav.fixed.down .nav-content {
    align-items: stretch;
}
nav.fixed.down .menu-area {
    align-items: center;
}
nav.fixed.down .logo{
    padding: 5px 15px;
/*    transition: all 0.2s linear;*/
}
nav.fixed.down .logo img {
    width: 50px;
/*    transition: all 0.2s linear;*/
}
nav.fixed.down li.menu-item a {
    padding: 12px 15px;
/*    transition: all 0.2s linear;*/
}
.menu-area {
/*    transition: all 0.2s linear;*/
    padding: 0px 0;
    width: 100%;
/*    background-color: #f9e2ac; */
/*    background-image: linear-gradient(to right, #E4BC68 0%, #B97E33 100%);*/
}
.main-menu {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap:0 10px;
}
.toggle-mobile {
    display: none;
    padding: 5px;
    position: fixed;
    right: 0;
    top: 0;

    justify-content:space-between;
    align-items: center;
    z-index: 9999;
    cursor: pointer;
    opacity: 1;
    width: auto;
    flex-wrap: wrap;
    background-color: #966026; 
}
.toggle-mobile .toggle-title {
    color: #463E3A;
    margin: 0 5px;
}
.toggle-mobile .toggle-icon {
    margin: 0 5px;
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.toggle-mobile span.top {
    width: 34px;
    height: 2px;
    background-color: #463E3A;
    display: inline-block;
    transition: all 0.1s linear;
}
.toggle-mobile span.bottom {
    width: 34px;
    height: 2px;
    background-color: #463E3A;
    display: inline-block;
    transition: all 0.1s linear;
}
.toggle-mobile.active .toggle-icon {
    width: 36px;
    height: 36px;
}
.toggle-mobile.active span.top {
    width: 36px;
    height: 2px; 
    background-color: #463E3A;
    display: block;
    position: absolute;
    top: 18px;
    left: 0;
    transform: rotate(45deg);
    transition: all 0.1s linear;
}
.toggle-mobile.active span.bottom {
    width: 36px;
    height: 2px; 
    background-color: #463E3A;
    display: block;
    position: absolute;
    bottom: 17px;
    left: 0;
    transform: rotate(-45deg);
    transition: all 0.1s linear;
}
.menu-area.active {
    background-color: #966026;
/*    transition: all 0.2s linear;*/
    width: 100%;
    height: 100vh;
    left: 0;
    position: absolute;
    z-index: 9999;
    top: 0;
    overflow-y: scroll;
}
.toggle-mobile.active {
    background-color:transparent;
}
.toggle-mobile.active .toggle-title {
    display: none;
}
.nav-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
}

li.menu-item {
    margin: 0;
    position: relative;
    z-index: 1;
}
li.menu-item a {
    border-radius: 0;
    display: block;
    width: 100%;
    text-align: center;
    color: #966026;
    font-weight: 500;
/*    background-color: #E4BC68;*/
/*    padding: 15px;*/
    font-size: 1.15rem;
    padding: 10px 25px;
    line-height: 1.5;
/*    white-space: nowrap;*/
}
li.menu-item a:focus {
    color: #FFF;
    background: #966026;
}
li.menu-item > a {
/*    border-bottom:3px solid #966026;*/
}
li.menu-item:hover > a, li.menu-item.active > a, li.menu-item:focus-within > a {
/*    border-bottom: 5px solid #F0BB24;*/
    background-color: #966026;
/*    border-bottom:3px solid rgba(0,0,0,0);*/
    color: #FFF;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
/*    padding-bottom: 20px;*/
}
.down li.menu-item:hover > a, .down li.menu-item.active > a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

li.logotype {
    max-width: 120px;
}
li.menu-item:hover .sub-menu,
li.menu-item:focus-within .sub-menu,
li.menu-item.open .sub-menu {
    border-radius: 25px;
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #966026;
    padding-top: 3rem;
    z-index: -1;
}
li.sub-menu-item {
    text-align: center;
    padding: 0px 0px;    
    margin:0px 0;
    position: relative;
}
li.sub-menu-item a {
    display: block;
    width: 100%;
    text-align: center;
    color: #000;
    border-radius: 25px;
    font-weight: 500;
    background-color: inherit;
    padding: 10px 25px;
}
li.sub-menu-item:hover a {
    color: #FFF;
    text-decoration: underline;
}

section {
    padding: 60px 0;
}
nav + section {
/*    margin: 60px 0;*/
}
.menu-logo {
    
    display: inline-block;
}
.logo img{
    max-width: 100px;
}
.logo a {
    display: block;
}
.logo {
    padding: 15px;
/*
    padding:15px 15px 40px 15px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: #FFF;
*/
    margin-left: 25px;
}

.main-img {
    width: 100%;
}
.main-img img {
    width: 100%;
}


hr.hr {
    border: none;
    height: 2px;
    display: block;
    width: 100%;
/*    max-width: 900px;*/
    margin: 30px auto;
    background-color: #E4BC68;
    /* 主要漸層 */
    background-image: linear-gradient(to right, #E4BC68 0%, #B97E33 100%);
}
.section-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:15px;
    padding: 20px 0 30px;
}
a.btn-link {
    width: auto;
    color: #463e3a;
    padding: 10px 25px;
    font-weight: 500;
    font-size: 1.25rem;
    border-radius: 50px;
    background-color: #E4BC68;
}
a.btn-link:hover, a.btn-link.active {
    background-color: #966026;
    color: #FFF;
}

.section-news-item-area {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap:24px;
    flex-wrap: wrap;
}
.section-news-btn {
    margin: 30px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.news-item {
    width: calc(50% - 12px);
    border: 2px solid #966026;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    background-color: #FFF;
}
.news-img {
    overflow: hidden;
}
.news-img img {
    width: 100%;
    transform: scale(1);
    transition: transform .25s linear;
}
.news-title {
    font-size: 1.15rem;
    margin: 5px 0;
    line-height: 1.5;
    padding: 0 15px;
}
.news-desc {
    padding: 0 15px 15px;
    line-height: 1.5;
}
.news-item:hover .news-img img{
    transform: scale(1.05);
    transition: transform .25s linear;
}
.news-item:hover {
    color: #FFF;
    box-shadow:0 0 10px 5px rgba(0,0,0,.15); 
}
.news-item:hover {
    background-color: #966026;
}

.main-info {
    width: 100%;
    
}
.main-info h2 {
    font-size: 2.5rem;
    text-align: center;
    line-height: 1.5;
    margin: 10px auto;
    font-weight: 500;
}
.main-info h1 {
    font-size: 1.75rem;
    text-align: center;
    line-height: 1.5;
    margin: 10px auto;
    font-weight: 500;
}
.main-info p {
    font-size: 1.15rem;
    text-align: justify;
    line-height: 1.5;
    margin: 10px auto;
    max-width: 700px;
    font-weight: 500;
}
footer {
    background-color: #966026;
    padding: 60px 0;
/*
    background-image: url("../img/footer_bg.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom left;
*/
}
.nmns-info {
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.nmns-logo {
    width: 100%;
    margin-bottom: 15px;
}
.nmns-logo img {
    max-width: 300px;
}
/*.nmns-logo a {display: inline-block;}*/
.info {
    width: auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.info-item {
    width: 100%;
    margin-bottom: 10px;
}
.info-item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap:10px; 
}
.copyright-text {
    color: #FFF;
    line-height: 1.5;
    text-align: center;
}



@media only screen and (max-width: 945px) { 
    .main-menu {
        display: none;
    }
    .active .main-menu {
        display: flex;
        flex-wrap: wrap!important;
        padding-top: 70px;
    }
    li.menu-item {
        width: 100%;
        padding: 10px 0;
    }
/*
    .toggle-mobile {
        display: block;
    }
*/
    li.menu-item:hover .sub-menu {
        position: relative;
        padding-top: 0;
        margin-top: 5px;
        border-radius: 0;
    }
    li.menu-item:hover > a, li.menu-item.active > a {
        border-radius: 0;
    }
    li.sub-menu-item {
        width: 100%;
    }
    .menu-logo {
        width: 100px;
        height: 100px;
    }
    .logo img{
        max-width: 60px;
    }
    .logo {
        padding-top: 15%;
        padding-left: 15%;
    }
    .section-btn {
        flex-wrap: wrap;
    }
    .news-item {
        width: 100%;
    }
    .info {
        width: 100%;
    }
    .nmns-info {
        flex-wrap: wrap;
    }
}






@media screen and (max-width: 945px) {
    .container {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    img.desktop {
        display: none!important;
    }
    img.mobile {
        display: inline-block!important;
    }
    
    li.menu-item a {
        color: #000;
    }

}

.item-btn-area {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    gap:15px;
    justify-content: center;
    align-items: center;
}
a.more-btn {
    width: auto;
    color: #463e3a;
    padding: 10px 25px;
    font-weight: 500;
    font-size: 1.25rem;
    border-radius: 50px;
    background-color: #E4BC68;
    display: inline-block;
}
a.more-btn:hover {
    background-color: #966026;
    color: #FFF;
}

.sr-only-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
    text-decoration: none; /* 移除可能的下劃線 */
    color: #fff; /* 確保聚焦時的文字顏色可見 */
    background-color: #000; /* 確保聚焦時背景顏色可見 */
}

/* 僅在聚焦時顯示 */
.sr-only-focusable:focus {
    width: auto;
    height: auto;
    clip: auto;
    margin: 0;
    padding: 5px 10px; /* 增加視覺上的可點擊區域 */
    z-index: 9999; /* 確保它在最上層 */
    outline: 3px solid #f00; /* 使用明顯的邊框提示焦點 */
}


@media screen and (max-width: 945px) {
    a.more-btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
}

html {
    scroll-padding-top: 110px; /* 數值 = 導覽列高度 + 緩衝空間 */
}


/* 針對 Mobile 版 (放大200%時) 預留更多空間或調整 */
@media screen and (max-width: 945px) {
    body {
        /* 手機版導覽列通常較高或不同，請確保這裡的數值大於導覽列高度 */
        padding-top: 110px !important; 
    }
    
    
    /* ----------------------------------------- */
    /* 2. 漢堡按鈕樣式重置 (因為從 div 改成了 button) */
    /* ----------------------------------------- */
    button.toggle-mobile {
        background: #966026; /* 維持您原本的背景色 */
        border: none;       /* 移除 button 預設邊框 */
        appearance: none;   /* 移除瀏覽器預設外觀 */
        border-radius: 0;   /* 維持方角 */
        box-shadow: none;
        /* 繼承原本的定位屬性 */
        display: block;      /* 原本 css 是 display: none，但在 media query 裡會變成 block/flex */
        position: fixed;
        right: 0;
        top: 0;
    }
    button.toggle-mobile:focus {
        outline-color: #000 !important; /* 或是 #FFF 視實際背景而定 */
        outline-style: solid !important; /* 導覽列建議用實線比較清楚 */
        position: fixed;
        right: 0;
        top: 0;
        outline-offset: 0px;
        z-index: 10000;
    }
/* 注意：原本您的 CSS 在 @media (max-width: 945px) 裡有設定 .toggle-mobile { display: block; }
   建議檢查一下，改為 flex 或是保持 block 都可以，只要內容置中即可 */
}




/* ----------------------------------------- */
/* 3. 全域焦點樣式 (CS1140101E 規範) */
/* ----------------------------------------- */
/* 讓所有可互動元素在聚焦時，顯示明顯的虛線框 */
a:focus, 
button:focus, 
input:focus, 
select:focus, 
textarea:focus, 
[tabindex]:not([tabindex="-1"]):focus {
    /* 使用高對比顏色，這裡設為黑色虛線，若背景是深色建議改為白色或黃色 */
    outline: 3px dashed #000 !important; 
    outline-offset: 1px !important;
/*    background-color: rgba(255, 255, 200, 0.3);  微微打亮背景，幫助識別 */
    z-index: 9999;
    position: relative;
}

/* 針對導覽列內的連結 (深色背景區域) 特別設定亮色框 */
.menu-area a:focus{
    outline-color: #000 !important; /* 或是 #FFF 視實際背景而定 */
    outline-style: dashed !important; /* 導覽列建議用實線比較清楚 */
}

/* --- 無障礙：跳到主要內容區塊連結 --- */
a.skip-main {
    position: absolute;
    top: -9999px; /* 平常將其推到螢幕外隱藏 */
    left: -9999px;
    background-color: #000; /* 背景色：黑 */
    color: #FFF;            /* 文字色：白 */
    padding: 10px 20px;
    z-index: 100000;        /* 層級要最高，確保蓋過導覽列 */
    text-decoration: none;
    font-size: 1rem;
    border-radius: 0 0 5px 5px;
}

/* 當鍵盤 Tab 聚焦時，將其移回螢幕左上角顯示 */
a.skip-main:focus {
    top: 0;
    left: 0;
    outline: 3px solid #AD8040; /* 配合您網站的主色系外框 */
}

/* ========================================= */
/* 無障礙規範 CS2240700E：高可見度焦點指示 */
/* 使用雙層框線 (Double Border) 確保在深淺背景都清晰可見 */
/* ========================================= */

/* 針對所有可互動元素 (連結、按鈕、輸入框) */
a:focus, 
button:focus, 
input:focus, 
select:focus, 
textarea:focus, 
[tabindex]:not([tabindex="-1"]):focus {
    /* 1. 外層框線：深色 (黑色或深藍色)，寬度 2px */
    outline: 2px solid #000000 !important; 
    
    /* 2. 內層框線：利用 box-shadow 模擬一層白邊 */
    /* 這樣做會在元件與黑框之間產生一圈白邊，確保在黑色背景上也看得到 */
    box-shadow: 0 0 0 2px #FFFFFF !important;
    
    /* 3. 調整 outline 位置，避免貼太近 */
    outline-offset: 2px !important;
    
    /* 4. 確保層級最高，不被遮擋 */
    z-index: 10000;
    position: relative;
    
    /* 5. 確保透明度為不透明 */
    opacity: 1 !important;
}

/* 特別針對圖片連結 (img inside a)，有時候 outline 會被圖片蓋住 */
a:focus img {
    /* 讓圖片本身也有一點效果，輔助判斷 */
    filter: brightness(0.9);
}

/* 針對深色背景區域 (例如 footer 或 深色導覽列) 的微調 */
/* 如果您的網頁有特定的深色區塊 class，例如 .bg-dark */
.bg-dark a:focus,
footer a:focus,
nav a:focus {
    /* 在深色背景上，反過來：外白內黑 */
    outline-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px #000000 !important;
}