.MenuBtn{border:0px var(--lightGray) solid;border-radius:.4rem;font-size:2rem;font-family:Noto Sans TC,sans-serif;font-weight:700;text-decoration:none;margin-top:5%;color:var(--darkGray);background-color:var(--linkBGColor);padding:.3rem .5rem;display:flex;align-items:center;display:none}.MenuBtn:hover{background-color:var(--lightGray)}.MenuCloseBtn{border:0;outline:0;text-decoration:none;color:var(--lightGray);background-color:transparent;padding:2%;position:absolute;top:1%;right:2%;cursor:pointer}.MenuCloseBtn:hover{color:var(--darkGray)}#MenuFrameDiv{width:100vw;min-height:100vh;background-color:#00000090;display:flex;align-items:center;flex-direction:column;justify-content:center;position:fixed;top:0;left:0;z-index:98;transform:translate(-100%);opacity:0}#MenuFrameDiv.active{transform:translate(0);opacity:1}.MenuSensorDiv{width:100vw;height:100vh;background-color:transparent;position:fixed;top:0;left:0;transform:translateY(-100%)}#MenuFrameDiv.active>.MenuSensorDiv{transform:translateY(0);opacity:1}.MenuAreaDiv{width:270px;height:100vh;background-color:#fff;padding:1.5% 1.7%;position:fixed;top:0;left:0;transform:translate(-100%);opacity:0;transition:transform .3s ease,opacity .3s ease;overflow-y:scroll}#MenuFrameDiv.active>.MenuAreaDiv{transform:translate(0);opacity:1}.MenuAreaDiv>.MainMenu{width:100%;display:flex;align-items:flex-start;flex-direction:column;justify-content:flex-start;list-style:none;padding:0;padding-bottom:1.5rem;margin-top:12%}.MenuAreaDiv>.MainMenu>li{width:100%;margin:1% 0%;font-size:1.1rem;font-weight:450;font-family:Noto Sans TC,sans-serif;display:block;white-space:nowrap;position:relative;cursor:pointer}.MenuToggle{width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.MenuToggle>.icon{position:absolute;top:50%;right:3%;transform:translateY(-50%);transition:transform .3s ease-out}.MenuAreaDiv>.MainMenu>li>.MenuToggle>a,.MenuAreaDiv>.MainMenu>li>a,.MenuAreaDiv>.MainMenu>li>.SubMenu>li>a{border-radius:.6rem;width:100%;display:block;text-decoration:none;color:var(--mainColor);-webkit-user-select:none;-moz-user-select:none;user-select:none}.MenuAreaDiv>.MainMenu>li>.MenuToggle>a:hover,.MenuAreaDiv>.MainMenu>li>a:hover,.MenuAreaDiv>.MainMenu>li>.SubMenu>li>a:hover{background-color:var(--lightColor)}.MenuAreaDiv>.MainMenu>li>.MenuToggle>a:visited,.MenuAreaDiv>.MainMenu>li>a:visited,.MenuAreaDiv>.MainMenu>li>.SubMenu>li>a:visited{color:var(--mainColor)}.MenuAreaDiv>.MainMenu>li>.MenuToggle>a>i,.MenuAreaDiv>.MainMenu>li>a>i,.MenuAreaDiv>.MainMenu>li>.SubMenu>li>a>i{margin-right:5%}.MenuAreaDiv>.MainMenu>li>.MenuToggle>a,.MenuAreaDiv>.MainMenu>li>a,.MenuAreaDiv>.MainMenu>li>.SubMenu>li>a{padding:.7rem .9rem}.MenuAreaDiv>.MainMenu>li>.SubMenu>li>a{padding:.5rem .7rem}.MenuAreaDiv>.MenuAreaDiv>.MainMenu li a:visited,.MenuAreaDiv>.MainMenu>li>.SubMenu li a:visited{color:var(--mainColor)}.MenuAreaDiv>.MainMenu>li>.SubMenu{width:90%;max-height:0;background-color:#fff;list-style:none;padding:0;margin-left:10%;position:relative;overflow:hidden;transition:max-height .3s ease-out,padding .3s ease-out}.MenuAreaDiv>.MainMenu>li>.SubMenu>li{border-radius:.6rem;width:100%;margin:2% 0;font-size:1rem;font-weight:450;font-family:Noto Sans TC,sans-serif;display:block;white-space:nowrap;position:relative}.MenuAreaDiv>.MainMenu>li>.SubMenu>li:hover{background-color:var(--hoverGray)}.has-submenu.open .icon{transform:rotate(90deg) translate(-40%)}.has-submenu.open .SubMenu{max-height:300px!important;padding-top:10px!important;padding-bottom:10px!important}.MenuSplit{width:100%;height:2rem}.MenuSplit>hr{border:1px solid;width:100%;color:var(--darkGray)}.MenuLoginbtn{border-radius:.5rem;width:100%;padding:.5rem .75rem;font-weight:700;font-family:Noto Sans TC,sans-serif;margin-bottom:.7%;text-decoration:none;color:#fff;background-color:var(--mainColor);transition:color .3s ease}.MenuLoginbtn:hover{filter:brightness(1.2)}.MenuAreaDiv>.MainMenu>form{width:100%;margin-bottom:10%}.MenuAreaDiv>.MainMenu>form>a{border:1px var(--redColor) solid;border-radius:.5rem;width:100%;padding:.5rem .75rem;font-size:1rem;font-weight:550;text-align:center;color:var(--redColor);text-decoration:none;white-space:nowrap;display:block}.MenuAreaDiv>.MainMenu form a:hover{color:#fff;background-color:var(--redColoe)}@media (max-width: 480px){.MenuAreaDiv{width:90vw}}
