/* 桌面版游標 */
@media screen and (min-width: 992px) {
  .menu.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
  }
  .menu {
    cursor: grab;
    cursor: -webkit-grab;
  }
}



/* 手機版不要顯示游標 */
@media screen and (max-width: 991px) {
  .menu,
  .menu.active {
    cursor: default !important;
  }
}


#header {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 30;
}

.navbar{
    position: relative;
/*
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 2;
*/
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1em;	
	width: 100%;
    box-sizing: border-box;
}


.buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 1em;
	
}

.brand{
    display: inline-block;
  background: url(../logo.svg) no-repeat center top;
    background-size: auto;
  background-size: auto;
  background-size: auto 88px;
  width: 360px;
  height: 88px;
  text-decoration: none;
  text-indent: -9999px;
}

.brand:hover{
    font-weight: bolder;
    color: #428aff;
}

button{
    border: none;
    transition: 0.3s;
    cursor: pointer;
}

.btn{
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    background: #428aff;
    padding: 0.5em 1.3em;
    border-radius: 16px;
    color: #fff;
}

.btn:hover{
    background: #3877db;
}

.menu-btn{
    margin-left: 1em;
    background: none;
    display: inline-block;
}

.menu-btn span{
    font-size: 2.3em;
}

.dropdown > div, .sub-dropdown > div {
    cursor: pointer;
}



    .dropdown .menu a {
        color: #666;
    }


.dropdown .menu a:hover{
    color: #398e1d;
}






.bbg {
	font-weight: 600;
	background-color: #f2f2f2;
}


@media screen and (min-width: 992px) {
	

	
    .navbar{
        padding: 1em 1.5em;
		margin-bottom: 0;
    }
    .dropdown > div{
        padding: 1em 1.5em;
    }
	
	
	.dropdown > div span{
       font-size: 1.2em;
		color: #666;
    }
	
	.dropdown:hover > div span{
        color: #699c04;
    }
	
	
	
	
    .mega-menu{
        display: flex;
        justify-content: center;
    }
    .menu-btn{
        display: none;
    }
    .menu{
        background: #fff;
        position: absolute;
        top: auto;
        left: 0;
        width: 100%;
        padding: 0 2em;
       
        transition: 0.4s ease-in-out;
		
        display: flex;
        justify-content:flex-start;
        align-items: flex-start;
        gap: 2em;
      
		
      overflow-x: auto;
		 overflow-y: scroll;
       flex-wrap: nowrap; 
  gap: 10px; 
		
	
		
    }

  
  .menu > li {
     flex: 0 0 220px;
  list-style: none; 
  margin-right: 10px;
	  padding: 2.5em 0;
    }
  
  
    .menu > li:first-child{
/*
        font-size: 1.1em;
        font-weight: bold;
        margin: 0;
*/
		
    }
	
	
.sub-dropdown > div span:first-child a {
    color: #398e1d;
}
	
	

    .sub-dropdown > div span:first-child{
        padding: 10px 15px;
        display: block;
        background-color: rgba(243, 249, 236, 0.8);
        margin-bottom: 10px;
        color: #398e1d;
        font-size: 16px;
        font-weight: 500;
		
    }
    
	
	
    .dropdown > div{
        border-bottom: 3px #fff solid;
        transition: 0.3s;
    }

    .dropdown:hover > div{
        border-color: #699c04;
    }

    .dropdown li{
        margin-bottom: 0.3em;
        font-size: 1.1em;
		padding-left: 5px;
		
    }

	
    .mega-menu li.dropdown {
    position: initial;
       
    }
	
	
	

/*
	   .dropdown > div span:last-child, 
    .sub-dropdown > div{
        display: none;
    }
*/

	
	span.material-symbols-outlined {
        display: none;
    }
	
	
	
	
	
    /* Width */
    .menu::-webkit-scrollbar{
        width: 8px;
    }
    /* Track */
    .menu::-webkit-scrollbar-track{
        background: #f1f1f1;
    }
    /* Handle */
    .menu::-webkit-scrollbar-thumb{
        background: #888;
    }

    /* Handle on hover */
    .menu::-webkit-scrollbar-thumb:hover{
        background: #555;
    }

    /* Hide menu */
    .menu{
        height: 0;
    }
	
    .dropdown:hover .menu{
/*        height: 50vh;*/
		
		height: 400px;
       
    }
}





.menu-container{
width: inherit;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}





/* Responsive Design */
@media screen and (max-width: 992px) {
	
		
.brand {
    background-size: auto 60px;
    width: 200px;
    height: 60px;
}
	
	
    .navbar{
        padding: 1em 1.5em;
		margin-bottom: 0;
    }
    .menu-container{
        background: #fff;
        position: absolute;
        top: 88px;
        left: 0;
        width: 100%;
		display: block;
        overflow-y: hidden;
        transition: 0.3s ease-in-out;
    }

    /* Width */
    .mega-menu::-webkit-scrollbar{
        width: 8px;
    }
    /* Track */
    .mega-menu::-webkit-scrollbar-track{
        background: #f1f1f1;
    }
    /* Handle */
    .mega-menu::-webkit-scrollbar-thumb{
        background: #888;
    }
    /* Handle on hover */
    .mega-menu::-webkit-scrollbar-thumb:hover{
        background: #555;
    }
    .mega-menu{
        padding: 1em;
        height: 100%;
        overflow-y: scroll;
        margin-top: 50px;
        border-top: 1px dashed #d3d3d3;
    }
    .mega-menu li{
        font-weight: bold;
        font-size: 1.1em;
    }
    .mega-menu li > div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5em;
    }
    .menu li{
        padding: 0 0 0 1em;
        font-size: 1em;
        font-weight: 400;
    }
	
	
    .menu a {
        display: block;
/*        margin: 0.8em 0;*/
    }
	
	
	
	
    .menu ul.sub-menu a{
        display: block;
        margin: 0.8em 0;
    }	
	
	
	
	
    .menu{
        display: none;
    }
    /* Toggle class for Javascript */
    .menu-show{
        display: block;
    }
    .material-symbols-outlined{
        transition: 0.3s;
    }
    /* Toggle class for javascript */
    .icon-rotated{
        transform: rotate(90deg);
    }
    .dropdown>div, 
	.sub-dropdown > div{
        cursor: pointer;
        padding: 0.5em;
		    font-size: 1em;
    font-weight: 500;
    }
	
	.dropdown>div a, 
	.sub-dropdown > div a{
        color: #666;
    font-size: 1em;
    font-weight: 500;
    }
	
    .sub-menu{
        font-size: 0.9em;
        display: none;
    }
    /* Toggle class for Javascript */
    .sub-menu-show{
        display: block;
    }
    .dropdown:hover>div, 
	.sub-dropdown:hover>div{
        background: #dbdbdb;
    }
    /* Hide menu */
    .menu-container{
        height: 0;
    }
    /* Toggle class for javascript */
    .mega-menu-show{
        height: 50vh;
    }
}



@media (min-width: 992px) {
  /* 一般狀態：允許選字 */
  .menu, .menu * {
    user-select: text;
  }

  /* 只有真正拖曳時才禁止選字與顯示抓手 */
  .menu.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
  }
  .menu.dragging, .menu.dragging * {
    user-select: none;
  }
}



#header .mlist_top {
	position: absolute;
    top: 20px;
        right: 43px;
    z-index: 80;
    display: block;
}
#header .mlist_top .m_anchor {
	color: #8a8a8a;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 1px;
}
#header .mlist_top .m_anchor:hover {
color: #699c04;
	text-decoration: none;
}