:root{
    --mjColor: #172A88; /* 主色 */
    --mjColor-l: #3C7BD4;
    --subColor: #F39800; /* 副色 */

    --black: #2A2C37;

    --gray: #A6A6A6;
    --gray-d: #616265;
    --gray-l: #E6E6E6;
    --gray-lx2: #F8F8F8;

    --red: #DF5252;
    --green:#19B442;

    --trans: all .3s linear;
    --trans-ease: all .3s ease-out;

    --outline: 5px dotted var(--subColor);
    --outline-offset: 0;
}

/* !====js-下拉選單==== */
.dropdown{position:relative;}
[data-toggle="dropdown"]{position: relative;cursor: pointer;display: block;}
/* [data-toggle="dropdown"]::after{content: '\F282';font-family: bootstrap-icons;display: inline-block;transition: var(--trans);} */
[data-toggle="dropdown"].--isOpen::after{transform: rotate(-180deg);}
.dropdownMenu{position: absolute;top: 100%;left: 0;width: 100%;background: var(--mjColor-lx3);box-shadow: 0 .5rem .5rem -.5rem rgba(0, 0, 0, 0.2);opacity: 0;transform: translate(0, -3rem);transition: var(--trans);pointer-events: none;}
.dropdown:has(.--isOpen) .dropdownMenu{pointer-events:inherit;/* transform:translate(0,0);*/
opacity:1;}
/* 當 navLink 沒有 --isOpen 時，dropdownMenu 不可被聚焦 */
.dropdown:not(:has(.--isOpen)) .dropdownMenu a,
.dropdown:not(:has(.--isOpen)) .dropdownMenu button{pointer-events:none;}
.dropdownMenu__close{display: none;}

/* !====選單==== */
.navbar{position: fixed;top: 0;left: 0;right: 0;z-index: 9999;display: flex;background-color: #fff;/*box-shadow: 0 0 .5rem rgba(0,0,0,0.25);*/     border-bottom: 1px solid var(--gray-l);}
.navbar>.container{display: flex;align-items: center;gap:2rem}
.navbarBrand{display:inline-block;background: var(--mjColor);padding:clamp(0.5rem,1vw,0.8rem) clamp(1.5rem,3vw,2.5rem);}
.navbarBrand__img{display: block;width: clamp(7rem,13vw,9rem);aspect-ratio: 8/5;background: url(../images/all/logo-white.svg)no-repeat center center / contain;}
.navbarToggle{order:1;display: none;}
.navbarNav{display: flex;flex: 1;align-items: center;}
.navbarNav__item{}
.navLink{--cl: var(--black);position: relative;;display: block;cursor: pointer;padding: clamp(0.8rem,3vw,2.3rem) clamp(1rem,1.5vw,1.5rem);font-weight: 500;font-size: clamp(1rem,1.3vw,1.125rem);}
.navLink::before{content:"";display: block;position: absolute;left: 50%;bottom:0;transform: translateX(-50%);width: 0;height: 1px;background: var(--mjColor);transition: 0.3s all ease-in-out;}
.navLink:hover::before ,.navbarNav__item.active .navLink::before{width: 100%;}
.navLink:hover,.navbarNav__item.active .navLink {background: #f7f7f7; color:var(--mjColor)}
.navLink:hover span,.navbarNav__item.active .navLink span{color:var(--black)}
.navLink__en{display: block;opacity: .6;font-size: clamp(0.875rem,1vw,1rem);text-align: center;font-size: 0.8em;margin-top: 0.2rem;font-weight: 400;}
.navSub{position: absolute;left:50%;transform: translateX(-50%);width: fit-content;min-width: 14rem;background-color: #fff;padding: 0rem;border: 1px solid var(--gray-lx2);box-shadow: 0 0 10px rgba(0,0,0,0.1);list-style: none;margin: 0 0 0;}
.navSub__item .navSubLink{display: flex;align-items: center;padding:clamp(0.6rem,1vw,1rem) clamp(1.2rem,2.5vw,2rem);text-transform: uppercase;font-size: clamp(0.93rem,1.3vw,1.125rem);}
.navSub__item .navSubLink::before{content:"";display: block;width: 0.375rem;height: 0.375rem;margin-right: 0.8rem;background: #cbcbcb}
.navSub__item:hover .navSubLink{color:var(--mjColor);background: #ebebeb;}
.navSub__item:hover  .navSubLink::before{background: var(--mjColor);}
.navSubLink{white-space: nowrap;}
.memberBtn{position: relative;;display: flex;flex-direction: column;align-items: center;justify-content: center;aspect-ratio: 1/1;padding:clamp(0.5rem,1vw,0.8rem) clamp(0.8rem,1.5vw,1.3rem);background: #F7F7F7;font-size: clamp(0.875rem,1.3vw,1rem);}
.memberBtn::before{content:"";display: block;position: absolute;left: 50%;bottom:0;transform: translateX(-50%);width: 0;height: 2px;background: var(--mjColor);transition: 0.3s all ease-in-out;}
.memberBtn__icon{position: relative;;width: 2rem;aspect-ratio: 1/1;margin-bottom: 0.4rem;}
.memberBtn__icon::before{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);font-size: clamp(1.5rem,2vw,1.8rem);}
.memberBtn:hover{color:var(--mjColor)}
.memberBtn:hover::before{width: 100%;}
.memberBtn.--enter{display: none;}
.body--login .memberBtn.--enter{display: flex;}
.body--login .memberBtn{display: none;}
/* 透明底header */
.navbar.--white{background: transparent;border-bottom: 1px solid rgba(255,255,255,0.25);}
.navbar.--white .navbarBrand{background: transparent;}
.navbar.--white .navLink::before{background: #fff;}
.navbar.--white .navLink,.navbar.--white .navLink__en{color:#fff;font-weight: 400;}
.navbar.--white .navLink__en{font-weight: 300;opacity: .5;}
.navbar.--white  .navLink:hover,.navbar.--white  .navbarNav__item.active .navLink {background: rgba(255,255,255,0.12); color:#fff}
.navbar.--white .navLink:hover span,.navbar.--white .navbarNav__item.active .navLink span{color:#fff}
.navbar.--white .memberBtn{color:#fff;background: transparent;font-weight: 300;}
.navbar.--white .memberBtn::before {background: #fff;height: 1px;}
.navbar.--white .memberBtn:hover{background: rgba(255,255,255,0.12);}
.navbar.--white .navbarNav.--isOpen .navLink, .navbar.--white .navbarNav.--isOpen .navLink__en{color:var(--black);font-weight: 500;}



@media screen and (max-width: 991px) {
    /* !991====選單==== */
    .navbar{justify-content: space-between;padding-right: 4rem;}
    .navbarToggle{--w: 2rem;--h:2px;--mv: .5rem;--cl: var(--black);position: absolute;right:1.2rem;top:50%;transform: translateY(-50%);display: flex;flex-direction: column;gap:0.35rem;align-items: center;justify-content: center;width: var(--w);height: var(--w);padding: 0;border: none;background-color: transparent;}
    .navbar.--white .navbarToggle span{background:#fff}
    .navbarToggle span{width: 1.8rem;height: 2px;background: var(--black);display: inline-block;border-radius: 100rem;transition: 0.3s all;}
    .navbarToggle.--isOpen  span:nth-child(1){transform:translateY(0.45rem) rotate(45deg);}
    .navbarToggle.--isOpen  span:nth-child(2){transform:translateX(0.75rem);opacity:0;}
    .navbarToggle.--isOpen  span:nth-child(3){transform:translateY(-0.5rem) rotate(-45deg);}
    .navbarNav{display: none;position: fixed;top:var(--headerH);left:0;right:0;bottom:0;background-color:rgba(238, 238, 238,1);z-index:9999;flex-direction: column;align-items: center;padding: 1.125rem;}
    .navbarNav.--isOpen{display: block;}
    .navLink{padding: .8rem 1rem;}
    .navLink::before{display: none;}
    .navLink__en{text-align: left;}
    .navSub{position: static;width: 100%;;transform:translateX(0);box-shadow: none;border:none;background-color: transparent}
    .navSub.dropdownMenu{display: none;}
    .navbarNav__item+.navbarNav__item{border-top: 1px dashed var(--gray);}
    .navbarNav__item.dropdown .navLink::after{content:"";position:absolute;right:0.5rem;top:40%;transform:translateY(-50%);width:0.6rem;aspect-ratio: 1/1;border-right:1px solid #333;border-bottom:1px solid #333;transform:rotate(45deg);transition: var(--trans);}
    .navbarNav__item.dropdown .navLink.--isOpen::after{transform:rotate(-135deg);top:50%}
    .navbarNav .dropdown:has(.--isOpen) .navSub.dropdownMenu{display: block;}
    .navLink:hover, .navbarNav__item.active .navLink{background: transparent;}
    .memberBtn{background: transparent;}
    .memberBtn__icon{margin-bottom: 0;}

}