@charset "UTF-8";
/* CSS Document */

.nav-a {
    cursor: pointer;
}

@media screen and (min-width:1025px) { /*桌面*/
/* 主選單樣式 */
.Hmenu {
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 100;
    display: block;
}
.Hmenu li {
    display: block;
    position: relative;
    border-bottom: 1px solid hsla(0,0%,44%,1.00);
    width: 90%;
    margin: 0 auto 0 auto;
}
.Hmenu li a {
    display: block;
    padding-top: 13px;
    padding-bottom: 13px;
    color: #575757;
    text-decoration: none;
    transition: color 0.8s; /* 添加文本颜色过渡效果 */
}
.Hmenu li a:hover {
    color: #000; /* 鼠标悬停时改变文字颜色 */
}
/* 隱藏子選單 */
.Hmenu .Hsubmenu {
    /*display: none;*/
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 100%;
    width: 250px;
    background-color: hsla(0, 0%, 0%, 0.85);
    opacity: 0; /* 初始设为透明 */
    padding: 0;
    transition: opacity 0.8s; /* 添加透明度过渡效果 */
}
.Hmenu .Hsubmenu li {
    width: 100%;
    text-align: center;
    border: 0px solid hsla(359, 67%, 44%, 1.00);
    position: relative;
}
.Hmenu .Hsubmenu li a {
    color: #fff;
}
/* 當滑鼠移至父選單時，顯示子選單 */
.Hmenu li.submenu-open > .Hsubmenu {
    visibility: visible;
    opacity: 1; /* 鼠标悬停时透明度变为1 */
}
/* 讓三層子選單向右偏移 */
.Hsubmenu .Hsubmenu {
    left: 100%;
    top: 0;
}
	
.Hmenu li .icon-arrow_right{
		position: absolute;
        top: 14px;
		font-size:18pt;
	}

	/* Mega Menu：側邊欄空間窄，多欄版面改成向右展開的寬面板(跟一般Hsubmenu一樣往右飛出，只是變寬+多欄) */
	.mega-col-title {
		display: block;
		font-weight: bold;
	}
	.mega-col-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.Hmenu .Hsubmenu.mega-menu {
		width: 1000px;
		max-width: 90vw;
		display: grid;
		grid-template-columns: repeat(5, 1fr); /*固定一排5欄；改用grid而不是flex，欄位數不足5個時會靠左對齊，不會被硬置中*/
		gap: 30px;
		padding: 20px 30px;
	}
	.Hmenu .Hsubmenu.mega-menu .mega-col {
		width: auto;
		min-width: 0;
		text-align: left;
	}
	.Hmenu .Hsubmenu.mega-menu .mega-col-title {
		color: #fff;
		border-bottom: 1px solid hsla(0,0%,100%,0.3);
		padding-bottom: 8px;
		margin-bottom: 8px;
	}
	.Hmenu .Hsubmenu.mega-menu .mega-col-list li {
		width: 100%;
		text-align: left;
	}

    /*=========================選單=========================*/
}
@media screen and (max-width:1024px) { /*行動裝置*/
    /* 平板/手機都不單獨顯示左側邊欄(.leftNAV_wrap)，併入水平選單的漢堡選單裡；
       水平選單(navber.php裡的#Hnav)本身就是同一份垂直選單資料(LV='V')，且在nav.css的行動裝置斷點已經會顯示在漢堡選單內，
       這裡只要把獨立側邊欄關掉，不用另外複製一份選單渲染邏輯 */
    .leftNAV_wrap{
        display: none;
    }
}