/* !====js-下拉選單==== */
[data-toggle="dropdown"]{position: relative;cursor: pointer;display: block;/* padding-right: 2rem; */}
/* [data-toggle="dropdown"]::after{content: '';display: block;width: 10px;height: 10px;border-top: 2px solid var(--cl,var(--black));border-right: 2px solid var(--cl,var(--black));transform: translate(-50%, -50%) rotate(135deg);position: absolute;top: 50%;right: 0;margin-top: -5px;} */
/* [data-toggle="dropdown"].--isOpen::after{transform: translate(-50%, 0) rotate(-45deg);} */
.dropdownMenu{display: none;}
.dropdown:has(.--isOpen) .dropdownMenu{}

/* !====選單==== */
.logo{margin:0;height: var(--logoH);display: flex;align-items: center;justify-content: center;}
.logo__pic{width: 11.25rem;aspect-ratio: 300/29;object-fit: cover;}
.navbar{--pY: 1rem;position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: #fff;padding: var(--pY) 0;}
.navbar--fixed{box-shadow: 0 0 .5rem rgba(0,0,0,0.25);}
.navbar:has(~ .termPopWrap.--isOpen){z-index:9998;}
.navbar>.container{--logoH:3rem;display: flex;align-items: center;gap:2rem;justify-content: space-between;}
.navbarBrand{display: block;padding: 1rem 0;text-align: center;}
.navbarToggle{order:1;display: none;}
.navbarNav{display: flex;gap:1rem;/* align-items: center; */margin-left: auto;}
.navbarNav__item{position:relative;}
.navbarNav__item.dropdown:has(.--full){position: unset; }
.active.navbarNav__item .navLink{color:var(--mjColor);}
.navLink{--cl: var(--black);display: block;cursor: pointer;font-size: 1.125rem;font-weight: 500;padding: 0 0.25rem;height: 100%;display: inline-flex;align-items: center;}
.dropdown .navLink.--isOpen:after{width: 1rem;}

.navLayerWrap a[href="javascript:;"]{cursor:default;}

.navDown{position: absolute;top: calc(100% + var(--pY) * 1);left: 50%;min-width: 180px;background-color: #fff;list-style: none;/* width: calc(var(--container) - 1.5rem); */border-radius: 0;transform: translateX(-50%);padding: 0;border-top: 0.25rem solid var(--mjColor);overflow: hidden;}
.navDown.--full{padding:1rem 1.5rem;width: calc(var(--container) - 1.5rem);top: 100%;}
.navSub{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap: 3rem 2rem;}
.navSub__item{display: flex;flex-direction: column;/* gap: 0.5rem; */}
.navSubLink{font-size:1.125rem;font-weight: 500;padding-bottom: 0.25rem;border-bottom: 1px solid #ddd;margin-bottom: 0.5rem;color: var(--mjColor-d);}

.navWrap{display: flex;gap: clamp(1rem,2vw,2.25rem);height: var(--logoH);align-items: center;}
.funcBtn{display: flex;gap: 1rem;align-items: center;}
.funcBtn__item{position:relative;height: 100%;}
.funcBtn__item__toggle,.funcBtn__item__btn{cursor:pointer;height: 100%;display: inline-flex;align-items: center;position: relative;}
.--isOpen .funcBtn__item__toggle,.--isOpen .funcBtn__item__btn{color:var(--subColor);}
.dropdown .funcBtn__item__toggle:after,.dropdown .funcBtn__item__btn:after{content:'';position:absolute;width: 0;aspect-ratio:3/2;background:var(--subColor);left:50%;bottom:calc(var(--pY) * -1);transform: translateX(-50%);clip-path: polygon(50% 0%, 0% 100%, 100% 100%);transition: var(--trans-ease);}
.funcBtn__item.--isOpen .funcBtn__item__toggle:after,.funcBtn__item.--isOpen .funcBtn__item__btn:after{width:1rem}
.funcBtn__item__toggle .bi,.funcBtn__item__btn .bi{font-size:1.5rem;}
.langBtn,.userBtn{position:absolute;background: var(--lightColor);left: 50%;top: calc(100% + var(--pY));transform: translateX(-50%);text-wrap-mode: nowrap;min-width: 6.25rem;text-align: center;border-top: 0.25rem solid var(--subColor);display: none;}
.langBtn__item,.userBtn__item{padding:0.5rem 0;display: block;}
.langBtn__item.active, .userBtn__item.active{color:var(--subColor);}
/* .funcBtn__item.--search{position:static;} */
.searchBox{--cl:var(--subColor);position:absolute;right: -1.5rem;width: 100%;top: 100%;border-top: 0.25rem solid var(--cl);min-width: 20rem;transform: translateY(var(--pY));padding: 1rem;background: var(--lightColor);display: flex;}
.searchBox__btn{padding:0 1rem;display:inline-flex;background: var(--cl);color:#fff;align-items: center;font-size: 1.125rem;}
.searchBox__btn:hover{background:#000;}

.navSubList{display:flex;flex-direction:column;}
.navSubList__item{padding:0.125rem 0;position: relative;}
.navSubList__item:before{content:'-';margin-right:0.375rem;}

@media screen and (min-width:1440px){
    .dropdown{position:relative;}
    .navbarNav__item.dropdown:has(.--full){position: relative; }
    
    .navDown{left:50%;width:auto;transform:translateX(-50%);}
    .navDown.--full{width:auto;top: calc(100% + var(--pY));}
    .nav1Layer,.nav2Layer,.nav3Layer{min-width: clamp(14rem,20vw,20rem);}
}
@media screen and (min-width:992px){
    .menuClose{display: none;}
    /*!992 header*/
    .dropFull{--pX:1.5rem;--pY:1rem;display:grid;grid-template-columns:1fr 4fr;}
    .navbarNav__item:hover .navLink{color:var(--mjColor);}
    .funcBtn__item__toggle:hover{color:var(--subColor)}

    .dropdown .navLink:before{content:'';position:absolute;width:100%;top:calc(var(--pY) * -1);bottom:calc(var(--pY) * -1);left: 0;}
    .dropdown .navLink:after{content:'';position:absolute;width: 0;aspect-ratio:3/2;background:var(--mjColor);left:50%;bottom: calc(var(--pY) * -1);transform: translateX(-50%);clip-path: polygon(50% 0%, 0% 100%, 100% 100%);transition: var(--trans-ease);}

    .navLayerWrap{--gap: 2rem;display: flex;gap: var(--gap);}
    .nav1Layer,.nav2Layer,.nav3Layer{flex:1;}
    .nav1Layer{display:flex;flex-direction:column;}
    .nav1Layer__item, .nav2Layer__item__tt, .nav3Link,.navDown__item{padding: 0.5rem 1rem;font-size:1.125rem;text-wrap-mode: nowrap;display: flex;justify-content: space-between;align-items: center;}
    .nav1Layer__item.--hover{background:var(--mjColor);color:#fff;}
    .navDown__item.active{color:var(--mjColor-d);}
    .navDown__item.--records{background:var(--mjColor-d);color:#fff;}
    .navDown__item.--records:after{content:'\F71C';font-family:'Bootstrap-icons';}
    .navDown__item.--overview:after{content:'\F225';font-family:'Bootstrap-icons';}

    .nav2Layer,.nav3Layer{position:relative;}
    .nav2Layer__item{background: #017a9a;}
    .nav2Layer__item__tt{color:#fff;}
    .nav2Layer__item__tt.--hover{background: var(--color-1);}
    .nav3Link:hover{background:rgba(245,168,0,0.5);}
    /* .nav1Layer:not(:hover) + .nav2Layer .nav2Layer__item:first-child,.nav2Layer:not(:hover) .nav3Layer .nav3Layer__item:first-child{position:relative;opacity:1;pointer-events:auto;} */
    .nav2Layer__item{display:flex;flex-direction:column;position: absolute;left: 0;top: 0;pointer-events: none;opacity: 0;width: 100%;transition:var(--trans-ease);transform: translateY(0);}
    .active.nav2Layer__item{pointer-events:all;opacity:1;position: relative;transform: translateY(0);}
    .nav3Layer__item__box {display:flex;flex-direction:column;position: absolute;left: 0;top: 0;pointer-events: none;opacity: 0;width: 100%;transition: var(--trans-ease);}
    .active.nav3Layer__item__box {pointer-events:all;opacity:1;position: relative;transform: translateX(0);}
    .navDown__item:hover{background:var(--mjColor);color:#fff;}
    .nav1Layer + .nav2Layer:before,.nav2Layer + .nav3Layer:before{content:'';position:absolute;width:1px;height:100%;background:#ddd;left: calc(var(--gap) * -0.5);top:0;transform: translateX(-100%);}

    .--arr{position:relative;}
    .--arr:after{content:'\F285';font-family:'Bootstrap-icons';font-size:0.8em;}
}

@media screen and (max-width: 991px) {
    .navbar{--pY: 0.5rem;}
    /* !991====選單==== */
    .navbarToggle{--w: 1.5rem;--h:2px;--mv: .375rem;--cl: var(--black);position: relative;display: flex;align-items: center;justify-content: center;width: var(--w);height: var(--w);padding: 0;border: none;background-color: transparent;}
    .navbarToggle span{display: block;width: var(--w);height: var(--h);background-color: var(--cl);transform-origin: center;transition: var(--trans-ease);}
    .navbarToggle span:nth-child(1){position: absolute;top: 50%;left: 50%;transform: rotate(0) translate(-50%,calc(-1 * (var(--mv) + var(--h))));}
    .navbarToggle span:nth-child(3){position: absolute;top: 50%;left: 50%;transform: rotate(-0) translate(-50%,var(--mv));}
    .navbarToggle.--isOpen span:nth-child(1){position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);}
    .navbarToggle.--isOpen span:nth-child(3){position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(-45deg);}
    .navbarToggle.--isOpen span:nth-child(2){opacity: 0;}

    .navbarNav{display: none;position: fixed;top:var(--headerH);left:0;right:0;bottom:0;background-color:rgba(238, 238, 238, 0.95);z-index:9999;flex-direction: column;align-items: center;}
    .navLink:has(+.dropdownMenu):after{content:'\F285';font-family:'Bootstrap-icons';width: 2rem;text-align: right;border-left: 1px solid #aaa;}
    .navLink,.navDown__item{padding: .875rem 1rem;width: 100%;justify-content: space-between;font-size: 1.125rem;}
    .navSub{position: static;}

    .dropdown .dropdownMenu{position:fixed;left:0;top:var(--headerH);width:100%;transform: translateX(100%);bottom:0;z-index:1;border-top: none;padding: 0;height: 100%!important;display: flex!important;pointer-events: none;opacity: 0;transition: var(--trans-ease);}
    .dropdown:has(.--isOpen) .dropdownMenu{opacity:1;pointer-events:all;transform: translateX(0);}
    .menuClose{padding:0.5rem 1rem;display:flex;gap:0.5rem;background: var(--mjColor-d);color:#fff;font-size: 1.125rem;}
    .menuNext {width: 2rem;text-align: right;border-left: 1px solid #aaa;}
    .nav1Layer, .nav2Layer__item{display:flex;flex-direction:column;position: fixed;top: 0;left: 0;transform: translateX(100%);width: 100%;transition: var(--trans-ease);background: #f0f0f0;bottom: 0;}
    .nav3Layer__item__box{position:fixed;left:0;width:100%;top:0;display:flex;flex-direction:column;bottom:0;transition:var(--trans-ease);transform:translateX(100%);}
    .nav2Layer__item:has(.menuClose:only-child){display:none;} 

    .nav2Layer__item{background:#f1f1f1}
    .nav3Layer__item__box{background:#f5f5f5;}
    
    .active.nav2Layer__item{transform:translateX(0);}
    .nav1Layer__item, .nav2Layer__item__tt,.nav3Link {padding: .875rem 1rem;font-size: 1.125rem;display: inline-flex;justify-content: space-between;gap: 1rem;}
    .active.nav3Layer__item__box{transform:translateX(0);}
    .nav1Layer__item.--hover{background:rgba(0,0,0,0.05)}

    .--isOpen .nav1Layer{transform:translateX(0);}

    .dropdownMenu{display:flex;flex-direction:column;}
}