@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

header {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    z-index: 100;
}

header.is-sticky {
    top: 0;
    background-color: rgba(230, 238, 233, 0.89);
    position: fixed;
}

header.is-sticky .w-header-top {
    display: none;
}

header.is-sticky .w-header {
    padding: 25px 0;
}

header.is-sticky .w-nav-menu-item a, header.is-sticky .w-nav-menu-item>div {
    color: black;
    font-weight: 600;
}

header.is-sticky .w-nav-line { 
    height: 1px;
    background-color: rgb(95, 95, 95);
}

header.is-sticky .w-nav-menu-item i {
    color: rgb(95, 95, 95);
}

header.is-sticky nav li:hover .w-nav-line {
    background-color: var(--green-color);
}

header.is-sticky nav li:hover .w-nav-menu-item > div {
    color: var(--green-color);
}

header.is-sticky nav li:hover i {
    color: var(--green-color);
}

.w-header {
    margin: 0 auto;
    padding: 32.5px 0;
    width: 100%;
    max-width: 83.5%;
    row-gap: 20px;
    background-color: transparent;
    flex-direction: column;
    display: flex;
}

.w-header-top {
    position: relative;
    justify-content: center;
    display: flex;
}

.w-header-top img {
    width: 100%;
    max-width: 95px;
}

.w-header-tools {
    right: 0;
    column-gap: 10px;
    z-index: 99999;
    position: absolute;
    flex-direction: row;
    display: flex;
}

.w-header-social,
.w-header-lang {
    width: 45px;
    height: 45px;
    border: 1px solid white;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
}

.w-header-social img {
    margin-left: -4px;
    width: 100%;
    max-width: 21px;
}

.w-header-social i,
.w-header-lang i {
    font-size: 22px;
    color: var(--green-color);
}

.w-header-social ul,
.w-header-lang ul {
    padding: 55px 0 0;
    top: 0;
    row-gap: 5px;
    position: absolute;
    flex-direction: column;
    display: none;
}

.w-header-social.is-active ul,
.w-header-lang.is-active ul {
    display: flex;
}

.w-header-social ul li,
.w-header-lang ul li {
    width: 45px;
    height: 45px;
    border: 1px solid white;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    color: var(--green-color);
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: transform 0.3s ease;
}

.w-header-social ul li:hover,
.w-header-lang ul li:hover {
    transform: translateY(-3px);
}

.w-header-social a {
    width: 100%;
    height: 100%;
    color: white;
    align-items: center;
    justify-content: center;
    display: flex;
}

.w-soical-qrcode {
    padding: 10px;
    width: 100%;
    min-width: 140px;
    top: 0;
    left: -155px;
    background-color: white;
    align-items: center;
    justify-content: center;
    position: absolute;
    display: none;
}

.w-soical-qrcode.is-active {
    display: flex;
}

.w-soical-qrcode img {
    min-width: 120px;
    width: 100%;
}

.w-header-lang-text {
    color: white;
}

nav ul {
    column-gap: 40px;
    grid-template-columns: repeat(7, auto);
    display: grid;
}

nav ul li {
    width: 100%;
    flex-direction: column;
    display: flex;
    position: relative;
    cursor: pointer;
}

nav ul li.hovering .w-nav-line {
    background-color: rgba(255, 255, 255, 1);
}

nav ul li.hovering .w-nav-menu-item i {
    opacity: 1;
}

nav ul li:nth-last-child(2) .w-nav-layer1 {
    min-width: initial;
}

nav ul li:last-child .w-nav-layer1 {
    min-width: 200px;
}

.w-nav-line {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3);
}

.w-nav-menu-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.w-nav-menu-item a {
    width: 100%;
}

.w-nav-menu-item a,
.w-nav-menu-item>div {
    padding: 8.5px 5px;
    font-weight: 500;
    color: white;
}

.w-nav-menu-item i {
    font-size: 14px;
    opacity: 0.25;
    color: white;
}

.w-nav-layer1 {
    min-width: 400px;
    width: 100%;
    row-gap: 15px;
    top: 50px;
    padding: 30px 20px;
    background-color: #e1ebea;
    position: absolute;
    flex-direction: column;
    display: none;
}

.w-nav-layer1::before {
    content: "";
    position: absolute;
    /* 向上延伸，填滿您設定的 50px 空隙 */
    top: -50px;
    left: 0;
    width: 100%;
    /* 高度剛好等於空隙的高度 */
    height: 50px;
    /* 保持透明，使用者完全看不見，但滑鼠碰得到 */
    background-color: transparent;
}

.w-nav-layer1.is-active {
    display: flex;
}

.w-nav-layer1>li,
.w-nav-layer1>li>a {
    width: 100%;
    font-size: 18px;
    cursor: pointer;
}

.w-nav-layer1>li>a:hover {
    font-weight: bold;
    color: var(--green-color);
}

.w-nav-layer2 {
    /* --- 核心動畫設定 --- */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* 將超出的內容隱藏 */
    visibility: hidden;
    /* 確保隱藏時不會被滑鼠誤觸 */

    /* 為了平滑過渡，預設狀態的 padding-top/bottom 與 margin 設為 0 */
    padding: 0 20px;
    margin-top: 0;

    /* 設定轉場效果：高度、透明度、間距都給予 0.3 秒平滑過渡 */
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease, visibility 0.3s;

    /* --- 保留原本的排版設定 --- */
    row-gap: 15px;
    background-color: #cfe4e1;
    flex-direction: column;
    /* 這裡可以直接保持 flex，因為它已經被壓扁且隱藏了 */
    display: flex;
}

/* 當 jQuery 加入 is-active 時的展開狀態 */
.w-nav-layer2.is-active {
    /* 設定一個確定會大於次選單內容的高度 (例如 400px 或 500px) */
    max-height: 500px;
    opacity: 1;
    visibility: visible;

    /* 恢復原本的間距 */
    padding: 20px;
    margin-top: 15px;
}

.w-nav-layer2 div,
.w-nav-layer2 a {
    align-items: center;
    display: flex;
}

.w-nav-layer2 a:hover {
    color: var(--green-color);
}

.w-nav-layer2 div i,
.w-nav-layer2 a i {
    height: 20px;
    font-size: 12px;
    align-items: center;
    flex-direction: row;
    display: flex;
}

.w-nav-layer2 a,
.w-nav-layer2 a span {
    font-size: 16px;
}

.w-nav-layer3 {
    row-gap: 10px;
    padding: 15px 15px 0;
    grid-template-columns: repeat(1, 1fr);
    display: grid;
}

.w-nav-layer3 li {
    padding: 10px;
    background-color: #a7d8d2;
}