:root{
    --mjColor: #BFC5B5; /* 主色 */
    --mjColor-d: #A4ACA0;
    --mjColor-dx2: #8D948A;
    --mjColor-l:#EAECE7;
    --subColor: #930051; /* 副色 */

    --black: #3C3C3C;

    --gray: #8D8E92;
    --gray-d: #777;
    --gray-l: #D9D9D9;
    --gray-lx2: #F5F5F5;

    --red: #d40023;

    --transition: all .3s linear;
    --transition-ease: all .3s ease-out;
}

/* !====js-下拉選單==== */
.dropdown{position:static;}
[data-toggle="dropdown"]{position: relative;cursor: pointer;display: block;}
/* [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{}

/* !====選單==== */
body:not(#pd0) .navbar{background: #fff;}
.navbar{position: fixed;top: 0;left: 0;right: 0;z-index: 9999;transition: 0.3s all ease-in-out;}
.navbar.has-submenu-open,.navbar--fixed{background: #fff;}
.navbar>.container{display: flex;align-items: center;justify-content: space-between;gap:2rem;padding-top:clamp(0.8rem,1.3vw,1.25rem);padding-bottom:clamp(0.8rem,1.3vw,1.25rem) }
.navRBx{display: flex;align-items: center;gap:clamp(0.8rem,1.2vw,1rem)}
.navbarBrand{display: block;text-align: center;width: clamp(7rem,8vw,7.5rem);}
.navbarBrand img{width: 100%;height: 100%;object-fit: contain;}
.navbarNav .searchBx{display: none;}
.searchBx{display: flex;align-items: center;justify-content: flex-end;border-radius: 4rem;padding:0.2rem;}
.searchBx.open{box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.15) inset;background: #fff;}
.searchBx.open .searchInput{width: clamp(12rem,16vw,15.625rem);}
.searchInput{border:none;background: transparent;transition: 0.3s ease-in-out all;padding-left: 1rem;width: 0;}
/* placeholder */
input::placeholder{color:var(--mjColor-d);font-weight:350;opacity:1;}
input::-moz-placeholder{color:var(--mjColor-d);font-weight:350;opacity:1;}
input::-webkit-input-placeholder{color:var(--mjColor-d);font-weight:350;}
input:focus-visible{outline:none;/* 移除外框線 */box-shadow:none;/* 移除陰影 (某些瀏覽器會有) */}
.searchBtn{position: relative;;background: var(--mjColor-d);width: clamp(2rem,3vw,2.5rem);aspect-ratio: 1/1;border:none;border-radius: 50%;}
.searchBtn::before{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);font-size:clamp(1rem,1.3vw,1rem) ;color:#fff}
.navbarToggle{order:1;display: none;}
.navbarNav{display: flex;gap:clamp(1.3rem,2vw,2rem);align-items: center;}
.navLink{--cl: var(--black);display: block;position: relative;;cursor: pointer;padding:clamp(0.8rem,1vw,1rem) 0}
.navLink::before{content:"";width: 0;height: 1px;background: var(--mjColor-dx2);position: absolute;left: 50%;bottom:0;transform: translateX(-50%);transition: var(--transition);}
.navLink.--isOpen,.navLink:hover,.active .navLink{color:var(--mjColor-dx2);}
.navLink.--isOpen::before,.navLink:hover::before,.active .navLink::before{width: 100%;}
.navSub{position: absolute;top: 100%;left: 0;min-width: 100vw;padding: 1rem;list-style: none;padding: clamp(1.5rem,3vw,3rem) 0;backdrop-filter: blur(16px);box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.1);background: linear-gradient(89deg, rgba(255, 255, 255, 0.8) 0.64%, #FFF 100%);}
.navSubContainer{--num: 6;--gap:1.5rem;display:flex;gap: 2rem var(--gap) ;flex-wrap: wrap}
.navSub__item{width:calc((100% - var(--gap) * (var(--num) - 1)) / var(--num) );}
.navSubLink{display:flex;;flex-direction:column;align-items:center;}
.navSubLink:hover .img-hover{opacity: 1;}
.navSubLink:hover .img-default{opacity: 0;}
.navSubLink__img{position: relative;;margin-bottom: 0.5rem;width:/* clamp( 4rem,6vw,5rem)*/7rem;aspect-ratio: 1/1;}
.navSubLink__img img{width:100%;height:100%;object-fit:contain;position:absolute;transition:0.3s all ease-in-out;left:50%;top:50%;transform:translate(-50%,-50%);}

.navSubLink__img .img-hover{opacity: 0;}
.navSubLink__tt{transition: var(--transition);}
.navSubLink:hover:hover .navSubLink__tt{color:var(--mjColor-dx2)}

/* .navSubLink__tt::after{content:"";display:inline-block;width:8px;height:8px;border-top:1px solid var(--mjColor-dx2);border-right:1px solid var(--mjColor-dx2);transform:rotate(45deg);;opacity: 0;overflow: hidden;transition: 0.3s all ease-in-out;position: relative;top:-2px}
.navSubLink:hover:hover .navSubLink__tt::after{opacity: 1;margin-left: 0.5rem} */



/* !====無障礙焦點樣式==== */
/* .navLink:focus,
.navSubLink:focus,
.navbarBrand:focus,
.navbarToggle:focus {outline: 2px solid #0066cc;outline-offset: 2px;background-color: rgba(0, 102, 204, 0.1);} */

/* 跳過連結 - 無障礙功能 */
.accesskey {position: absolute;top: -40px;left: 6px;background: #000;color: #fff;padding: .5rem;text-decoration: none;z-index: 10000;}
.accesskey:focus {top: 6px;}

@media screen and (max-width: 991px) {
    /* !991====選單==== */
    .navbarBrand{width: 8rem;}
    .navbarToggle{--w: 2rem;--h:2px;--mv: .5rem;--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(--mjColor-dx2);transform-origin: center;}
    .navbarToggle span:nth-child(1){position: absolute;top: 50%;left: 50%;transform: rotate(0) translate(-50%,calc(-1 * (var(--mv) + var(--h))));transition: var(--transition);}
    .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;padding:1rem 1.125rem ;max-height: calc(100vh - var(--headerH));overflow-y: auto;}
    .navLink{padding:.5rem 0rem;margin-bottom: 0.5rem;}
    .navSub{position: static;background: none;box-shadow: none;}
    .navSubContainer{--num:3;}
    .navLink::before{left: 0;transform: translateX(0);}
    .navLink.--isOpen::before, .navLink:hover::before{width: 100%;}

    /* 搜尋 */
    .navbarNav .searchBx{display: flex;padding: 0.6rem;margin: 2rem 0;box-shadow: none;}
    .navRBx .searchBx{display: none;}
    .searchBx.open .searchInput{padding:0.2rem 1rem}
    .searchBx.open .searchInput , .searchBx.open form{width: 100%;}



}
@media screen and (max-width: 640px) {

     /* 選單 */
    .navSubContainer{--num:2;}
    .navSub{min-width: calc(100% - 2.5rem);}
    .navSubLink__img{width: 100%;max-width:7rem ;}

}