:root {
            --menu-bg: #1a1a1a;
            --text-color: #ffffff;
            --accent-color: #3fa245;
            --loader-bg: #ffffff;
        }

        /* --- 1. Loading 畫面設計 (Preloader) --- */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--loader-bg);
            z-index: 9999; /* 最高層級 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            
            /* 揭幕動畫設定 */
            transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
            transform-origin: top;
        }

        /* Loading 完成後，向上滑開 */
        body.is-loaded #preloader {
            transform: translateY(-100%);
        }

        /* 中央的金色裝飾線與進度 */
        .loader-content {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        /* 當布幕要拉開前，內容先淡出 */
        body.is-loaded .loader-content {
            opacity: 0;
        }

        .loader-line {
            width: 2px;
            height: 0; /* 初始高度為 0 */
            background-color: var(--accent-color);
            margin-bottom: 20px;
            animation: lineGrow 1.5s ease-out forwards;
        }

        .loader-text {
            color: var(--accent-color);
            font-size: 1rem;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        @keyframes lineGrow {
            0% { height: 0; }
            100% { height: 80px; }
        }

        /* --- 2. 主畫面進場動畫 (Hero Entry) --- */
        /* 這些元素一開始是隱藏的 */
        .hero-animate {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s ease, transform 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        /* 當 body 加上 is-loaded 後，開始執行進場 */
        body.is-loaded .hero-animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 設定延遲，讓標題和文字錯開出現 */
        body.is-loaded .hero-animate:nth-child(1) { transition-delay: 0.8s; } /* 等布幕拉開 */
        body.is-loaded .hero-animate:nth-child(2) { transition-delay: 1.0s; }

 /*-----------------------------------------*/

nav {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;           /* 固定在頂部，不再位移 */
    left: 0;
    z-index: 99;
    background: url(../images/home-bg.jpg);
    background-repeat: repeat;
    
    opacity: 0;
    visibility: hidden;
    transform: scale(1.2) rotate(0deg); /* 從大比例且傾斜開始 */
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

nav.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(0deg); /* 回歸正常 */
}

.nav-list {
    width: 100%;
    list-style: none;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
li {
    margin: 0 2rem;
}
.nav-link {
    /*
    font-family: cursive;
    font-size: 2rem;
    padding: 1rem;
    */
}
.nav-link:hover, .nav-link:focus {
    /*color: #fff;*/
}

/* --- 圓形背景盒子 --- */
.menu-toggler-box {
    position: fixed;
    top: 2.5vh;
    right: 1.5vw;
    width: 4rem;
    height: 4rem;
    z-index: 998;
    background: #00469b;
    border-radius: 50%;
    /* 這裡也同步使用新的貝茲曲線 */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 漢堡按鈕主體 --- */
.menu-toggler {
    position: fixed;
    top: 2.5vh;
    right: 1.5vw;
    width: 4rem;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 線條垂直居中 */
    align-items: center;     /* 線條水平居中 */
    cursor: pointer;
    z-index: 999;
    padding: 10px;
    transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 線條基礎樣式 --- */
.bar {
    background-color: #fff;
    width: 2.2rem; /* 稍微縮短線條長度，在圓圈內更好看 */
    height: 3px;   /* 稍微調細一點點，更精緻 */
    border-radius: 0.8rem;
    position: absolute; /* 使用絕對定位來精確重疊 */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 初始位置偏移 */
.bar.top {
    transform: translateY(-8px);
}

.bar.bottom {
    transform: translateY(8px);
}

/* --- 開啟後的 X 效果 --- */
.menu-toggler.open {
    transform: scale(0.85); /* 整體輕微縮小 */
}

.open .bar.top {
    transform: translateY(0) rotate(45deg); /* 回到中心並旋轉 */
}

.open .bar.bottom {
    transform: translateY(0) rotate(-45deg); /* 回到中心並反轉 */
}

/* 如果你的 HTML 裡有第三根線 (middle)，開啟時讓它消失 */
.bar.middle {
    transition: opacity 300ms;
}
.open .bar.middle {
    opacity: 0;
}

.menu-box{
    display: table;
    margin: 20px auto 0 auto;
}
.menu-list{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */

    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    
    -webkit-justify-content: left;
    justify-content: left;
    align-items: top; 
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap; /* IE 10 換行 */
    flex-wrap: wrap;
    margin-top: 8%;
}
.menu-list li{ width: 200px; margin: 20px 20px;}
.menu-list h1{
    color: #3fa245;
    font-size: 20px;
    letter-spacing: 0.01em;
    line-height: 28px;
    font-weight: 600;
    padding-bottom: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #90d334;
}
.menu-list p{
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}
.menu-list p a{
    color: #555;
}
.menu-list .highlight a{
    color: #1c61c0;
}
.menu-list p a:hover{
    color: #1c61c0;
}
.menu-visual{
    position: absolute;
    bottom:0;
    width: 100%;
    height: auto;
    z-index: -1;
    opacity: 1;
}
.menu-visual-m{
    display: none;
    position: absolute;
    bottom:0;
    width: 100%;
    height: auto;
    z-index: -1;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .nav-list {
        flex-direction: column;
    }
    .nav-list li {
        margin: 2rem 0;
    }
    .nav-link {
        /*font-size: 1.5rem;*/
    }
    
.menu-box{ margin: 40px auto;}
.menu-list li{ margin: 20px 20px;}
.menu-visual{ display: none;}
.menu-visual-m{display: block;}
    
}

@media only screen and (max-width:640px) {

.menu-toggler-box { top: 10px; right: 10px;}
.menu-toggler { top: 10px; right: 10px;}
 
}

@media only screen and (max-width:480px) {

.menu-list li{ width: 170px; margin: 10px 15px;}
.menu-list h1{
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.menu-list p{
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;
}
 
}