/* ----------------------------------------------
    top-menu
------------------------------------------------*/

.top-menu {
    --height: 60px;
    background: rgba(255, 255, 255, 1);
    margin: auto;
    width: 100%;
    height: var(--height);
    padding: 0;
    max-width: 1920px;
    display: flex;
    left: 0;
    right: 0;
    box-shadow: 8px 2px 45px rgba(0, 0, 0, 0.2), 86px 10px 30px rgba(0, 0, 0, 0.08);
    z-index: 99;

    /* 關鍵修正：預設就使用 fixed，動畫才不會斷層 */
    position: fixed;
    top: -180px; /* 隱藏時的位置 */
    transition: top 0.5s ease; /* 只對 top 做過場動畫 */
}

/* 顯示時的狀態 */
.top-menu.show {
    top: 0;
    /* 這裡不用再寫 position: fixed 和 transition 了，會繼承上面的 */
}

.top-menu:after{
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    top: calc(var(--height) - 4px);
    right: 0;
        background: url(../images/raduis.png) center 0 /100% no-repeat;


    z-index: -1;
}

.top-menu a{
    width: 100%;
    height: 100%;
}




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



.top-menu {
  --height: 41px;
}
.top-menu::after {
  content: '';
  width: 40px;
  height: 40px;
  top: calc(var(--height) - 2px);
  right: 0;
}
}






/*-----------------------------------------------
    list
-----------------------------------------------*/
.menu-list {
    flex: 7;
    /* 自然靠左 */
    max-width: 550px;
    height: var(--height);
    /*! background: #d74f4fa3; */
    max-width: 260px;
}

.menu-list {
    display: flex;
    /*! justify-content: left; */
    margin-left: auto;
    margin-right: auto;
}

.menu-list li.menu-title{
    font-size: var(--fs-3xs);
    letter-spacing: 0.2rem;
    position: relative;
    color: var(--orange);
    flex: 2;
    max-width: 7rem;
}

.menu-title:before{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 25%;
    height: 1px;

    background:#000;


}



.menu-list li {
    flex: 1;

    gap: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    max-width: 5rem;
    color: #000;
}


.menu-list li a {
    letter-spacing: .03em;
    flex-direction: column;

    position: relative;
    font-size: var(--fs-p);
    transition: all .3s ease;
    line-height: var(--height);
    color: #000;
}



.menu-list li a span {
    transition: all .3s ease;
    position: relative;
}
/* 1. 基礎樣式：定義點點出現的樣子（包含 active 與 hover） */
.menu-list li a.active span:before,
.menu-list li a:hover span:before {
    content: '\3002';
    position: absolute;
    width: 15px;
    height: 15px;
    top: -7px;
    right: -5px;
    font-size: var(--fs-h4);
    line-height: 1;
    text-align: center;
    transition: all .3s ease;
    opacity: 1; /* 預設 active 是亮的 */
}

/* 2. 關鍵：當滑鼠進入「整個選單區域」時，強制把裡面「所有」點點都藏起來 */
.menu-list:hover li a span:before {
    opacity: 0;
}

/* 3. 最重要：唯獨「滑鼠正指著的那一個」點點，不管它是不是 active，都要顯示 */
.menu-list li a:hover span:before {
    opacity: 1 !important; /* 用 !important 確保它能覆蓋掉上面的全域隱藏 */
}


@media screen and (max-width: 1280px) {
.menu-list {
    flex: 6;
    max-width: 450px;
}

}


@media screen and (max-width:768px) {
.menu-list {
    flex: 6;
    padding: 0 0 0 10%;
}

.menu-list li.menu-title {
  flex: 1.5;
  font-size: var(--fs-4xs);
  letter-spacing: 0.1rem;
  display: none;
}

    /*! open & close */
    .menu-list-open {
        top: 0;
        transition: all .5s ease;
        z-index: 1;
    }

    .menu-list-close {
        top: -100vh;
        transition: all .8s ease;
        z-index: 0;
    }

.menu-title::before {
  content: '';
  right: 0;
  top: 50%;
  width: 20%;
  height: 1px;
}

.menu-list li a {

    font-size: var(--fs-h6);

}

}




/*-----------------------------------------------
    logo
-----------------------------------------------*/

.logo {
    flex: 1;
    position: relative;
    max-width: 230px;
    background: url(../images/logo-m.png) 1.5rem center /80% no-repeat;
}



.go-home {
    flex: 1;
    max-width: 130px;

    display: flex;
    justify-content: center;
    align-items: center;
    transition:all .3s ease;
    position: relative;
    cursor: pointer;
}

.go-home a{
    font-size: var(--fs-xs);
    padding: 0.1rem 0.85rem;
    border-radius: 5px;
    border: 1px solid var(--black02);
    width: auto;
    height: auto;
    color: var(--black02);
}




@media screen and (max-width: 1800px) {
.logo {
    background: url(../images/logo.png) center 50% /55% no-repeat;
}


}

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


.logo {
    flex: 3;
    background: #fff url(../images/logo-m.png) 15px 50% /120px no-repeat;
    padding: 0.5rem;
    width: 100%;
    /*! height: 45px; */
    /*! max-width: initial; */

    min-width: 135px;
}

.go-home {
    flex: 2;}
.go-home a{
    padding: 0;
    border-radius: 0px;
    border: 0px solid var(--black02);
    width: 20px;
    height: 20px;
    color:transparent;
    background: url(../images/icon-home.png) center 0 /100% no-repeat;

}



}

/*-----------------------------------------------
    header-menu
-----------------------------------------------*/

.header-menu{
    position: absolute;
    bottom: 32%;
    margin: auto;

    width: 30%;
    max-width: 400px;
    left: 5%;
    right: 0;
    /*background: var(--bg-color);*/

}

.header-menu > .menu-list li{
    max-width: inherit;
    height: 3.2rem;

}

.header-menu > .menu-title{
    color: #fff;
    font-size: var(--fs-2xs);
    text-align:center;
    letter-spacing: 0.1rem;
    margin: 0 auto 0.2rem;
    left: 0;
    right: 0;
    position: relative;
    display: block;
}





/* --- 外層 a 標籤設定 --- */
.header-menu > .menu-list li a {
    position: relative;
    display: flex; /* 用 flex 讓裡面的 span 容易對齊 */
    flex-direction: column;
    align-items: center;
    letter-spacing: .03em;
    font-family: var(--font-family2);
    font-size: var(--fs-xl);
    color: #fff;
    text-decoration: none;
    transition: all .3s ease;
}

/* --- 外層 a 標籤設定 --- */
.header-menu > .menu-list li a span{
    height: 3.2rem;
}



/* 倒影*/
.header-menu > .menu-list li a .reflect-text {
    /* 絕對定位，把它放在主文字正下方 */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;


    transform: scaleY(-1);

    opacity: 0.4;

    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 90%);
    mask-image: linear-gradient(to bottom, transparent 20%, black 90%);

    pointer-events: none;
}

/*hover*/

/* --- 1. 主文字預設狀態 (必須加上 translateY(0) 避免動畫算錯) --- */
.header-menu > .menu-list li a .main-text {
    transform: translateY(0);
    transition: transform 0.3s ease; /* 平滑動畫 */
    font-family: var(--font-family2);
    font-weight: 300;
}

/* --- 2. 倒影預設狀態 (加上 translateY(0) 跟 hover 結構對齊) --- */
.header-menu > .menu-list li a .reflect-text {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;

    /* 關鍵：預設狀態必須有 translateY(0)，不然會轉圈圈 */
    transform: translateY(0) scaleY(-1);

    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 90%);
    mask-image: linear-gradient(to bottom, transparent 20%, black 90%);
    pointer-events: none;

    transition: transform 0.3s ease; /* 平滑動畫 */
}

/* --- 3. 滑過 (Hover) 時的動作 --- */
.header-menu > .menu-list li:hover a .main-text {
    /* 主文字往上 */
    transform: translateY(-0.5rem);
}

.header-menu > .menu-list li:hover a .reflect-text {
    /* 倒影往下，同時保持翻轉 */
    transform: translateY(0.5rem) scaleY(-1);
}



/*menu-title*/

.header-menu > .menu-title::before {
  display: none;
}


.header-menu >.menu-title span{
    height: 1rem;
    display: block;
}
.header-menu >.menu-title .reflect-text {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;

    transform: scaleY(-1);

    opacity: 0.4;

    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 90%);
    mask-image: linear-gradient(to bottom, transparent 20%, black 90%);

    pointer-events: none; /* 避免滑鼠干擾 */
}



/*active圈圈*/
/* 1. 基礎樣式：定義點點出現的樣子（精準指定 .main-text，避免倒影也長出點點） */
.header-menu .menu-list li a.active .main-text::before,
.header-menu .menu-list li a:hover .main-text::before {
    content: '\3002';
    position: absolute;
    width: 15px;
    height: 15px;
    /*top: -16px;*/
    right: 0px;
    font-family: var(--font-family);
    font-size: var(--fs-h1);
    line-height: 1;
    text-align: center;
    transition: all .3s ease;
    opacity: 1; /* 預設 active 是亮的 */
}

/* 2. 關鍵：當滑鼠進入「整個選單區域」時，強制把裡面「所有」點點都藏起來 */
.header-menu .menu-list:hover li a .main-text::before {
    opacity: 0;
}

/* 3. 最重要：唯獨「滑鼠正指著的那一個」點點，不管它是不是 active，都要顯示 */
.header-menu .menu-list li a:hover .main-text::before {
    opacity: 1 !important; /* 用 !important 確保它能覆蓋掉上面的全域隱藏 */
}


@media screen and (max-width: 768px) {
.header-menu > .menu-list{
    display: none;
}
.header-menu > .menu-title{
    display: none;
}


.header-menu{
    bottom: 47.5%;
    margin: initial;
    width: 30%;
    max-width: 400px;
    left: 0%;
    right: 0;

}
}


/*-----------------------------------------------
    burger - m
-----------------------------------------------*/
.burger {
    display: none;
}

@media screen and (max-width:768px) {
    .burger {
        display: flex;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 99;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border: 0;
        padding: 0;
        background: transparent;
        align-items: center;
        justify-content: center;
        transition: all .5s ease-in-out;
    }

    .burger span {
        position: relative;
        width: 22px;
        height: 3px;
        border-radius: 5px;
        background: #000;
        box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
        transition: all .5s ease-in-out;
    }

    .burger span::before,
    .burger span::after {
        content: '';
        position: absolute;
        left: 0;
        width: 22px;
        height: 3px;
        border-radius: 5px;
        background: #000;
        box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
        transition: all .5s ease-in-out;
    }

    .burger span::before {
        transform: translateY(-7px);
    }

    .burger span::after {
        transform: translateY(7px);
    }


    .burger.open span {
        transform: translateX(-20px);
        background: transparent;
        box-shadow: none;
    }

    .burger.open span::before {
        transform: rotate(45deg) translate(15px, -15px);
    }

    .burger.open span::after {
        transform: rotate(-45deg) translate(15px, 15px);
    }
}