
/* !====js-下拉選單==== */
[data-toggle="dropdown"]{position: relative;cursor: pointer;display: block;/* padding-right: 2rem; */}
.dropdownMenu{display: none;}
.dropdown:has(.--isOpen) .dropdownMenu{right: 0;opacity: 1;transform: translate(-50%,0);pointer-events: all;z-index: 2;}

/* !====選單==== */
.navbar{position: fixed;top: 0;left: 0;right: 0;z-index: 9999;max-width: 100vw;}
.navbar>.container{display: flex;align-items: flex-start;gap:clamp(1rem,2vw,2rem);max-width: 100%;padding: 0;justify-content: space-between;}
.navbarBrand{display: flex;align-items: center;;padding: clamp(1.1rem,2vw,2rem)clamp(0.5rem,2vw,1.5rem);text-align: center;background: var(--mjColor);border-bottom-right-radius:clamp( 1.5rem,3vw,2.5rem);box-shadow: var(--shD);}
.logo{margin:0;}
.logo__img{width:clamp(13.5rem,25vw,20rem);aspect-ratio:320/48;object-fit:cover}
.navbarToggle{order:1;display: none;}
.navWrap{display:flex;margin:clamp(0.5rem,1vw,0.8rem) 0;padding-right: 1.5rem;gap:clamp(1rem,1.5vw,1.8rem);align-items: stretch;}
.navbarNav{--pdY: 0px;display: flex;gap:1rem;align-items: center;margin-left: auto;padding: var(--pdY) 2.5rem;background: #fff;border-radius: 100rem;position: relative;}
.navbarNav__item{}
.navLink{color: var(--bodyColor);display: flex;cursor: pointer;font-size: clamp(1.125rem,1vw,1.25rem);flex-direction: column;overflow: hidden;align-items: center;padding: clamp(0.8rem,1.25vw,1.25rem) 0.625rem;}
.navLink:hover .navLink__en{color:var( --subColor-d)}
.navbarNav__item.active .navLink__en{color: var(--subColor-d);}
.navbarNav__item.active .navLink{color: var(--subColor-d);}
.navLink__tt{--hH:1.8rem;position:relative;overflow: hidden;transition: 0.3s linear all;height:var(--hH);overflow: hidden;}
.rollup__inner{display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform;}
.rollup__line{display:block;height:var(--hH);}

.navLink.--isOpen .rollup__inner,.navLink:hover .rollup__inner { transform: translateY(-1.8rem);}

.navLink__tt:after{content:attr(data-tt);position: absolute;left:0;top:100%;}
.navLink__en{text-transform:uppercase;color: var(--subColor);font-size:0.75rem;font-weight:600;transition: 0.3s  all;}
.navSub{--num:3;position: absolute;top: 95%;left: 50%;min-width: clamp(34rem,40vw,38rem);background-color: #fff;padding: clamp(0.8rem,2vw,2rem) clamp(1rem,2vw,2rem);border-radius: clamp(0.8rem,1.5vw,1.5rem);box-shadow: 0 0 10px rgba(0,0,0,0.1);list-style: none;margin: 1rem 0 0;display: inline-grid;grid-template-columns: repeat(var(--num),1fr);gap: 1.5rem;transform: translate(-50%,0rem);pointer-events: none;opacity: 0;transition: 0.4s transform;flex-wrap: wrap;}
.navSub__item{border-bottom:1px dashed #c2c2c2 ;position: relative;}
.navSub__item:hover .navSubLink{color:var(--mjColor)}
.navSubLink{--dotW:0.375rem;font-size:clamp(1rem,1.8vw,1.125rem);position:relative;padding: 0.25rem 0;padding-left:calc(var(--dotW) + 0.5rem);width: 100%;display: inline-block;}
.navSubLink:after{content:'';position:absolute;width:var(--dotW);aspect-ratio:1;background:var(--mjColor);left:0;top:50%;transform:translateY(-50%);border-radius:100rem;}
.funcBtn__item{display:flex;flex-direction:column;align-items: center;background: var(--subColor);color: #fff;min-width: clamp(6rem,8vw,7.5rem);height: 100%;border-radius: 100rem;padding: 1rem clamp(1rem,2vw,1.5rem);gap: 1px;justify-content: center;position: relative;}
.funcBtn__item__tt .bi{font-size: 1.375rem;line-height: 1;}
.funcBtn__item__sub{text-transform:uppercase;color: var(--bgColor);font-size:clamp(0.75rem,1vw,0.93rem);font-weight:500;letter-spacing: 0.7px;}

@media screen and (min-width:1480px){
    .navWrap{padding-right:clamp(3rem,4vw,5rem);}
}
@media screen and (max-width: 991px) {
    /* !991====選單==== */
    .navbarToggle{--w: 2rem;--h:2px;--mv: .5rem;--cl: var(--black);position: relative;        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;/**/ position: absolute;right:6rem;top:50%;transform: translateY(-50%);}
    .navWrap{padding-right: 1rem;}
    .funcBtn__item{min-width: 4rem;aspect-ratio: 1 / 1;}
    .funcBtn__item__sub{display: none;}
    .navbarToggle span{width: 1.8rem;height: 2px;background: var(--bodyColor);display: inline-block;border-radius: 100rem;transition: 0.3s all;}
    .navbarToggle.inner span{background: #fff;}
    .navbar--fixed  .navbarToggle.inner span{background: var(--bodyColor);}
    .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:calc(var(--headerH) + 1rem);left:50%;transform: translateX(-50%);bottom:0;background-color:rgba(255, 255, 255, 0.95);z-index:9999;flex-direction: column;align-items: center;border-radius: 1.25rem;width: calc(100% - 2rem);padding:1.25rem;max-height: calc( 100vh - var(--headerH) - 2rem);overflow-y: auto;}
    .navLink{padding: .5rem 1rem;}
    .navSub{display: none;}
    .navSub,.dropdown:has(.--isOpen) .dropdownMenu{position: static;--num: 1;transform: translate(0, 0);box-shadow: none;background:#efefef;margin-top: 0;min-width: 100%;}
    .navSub__item{padding:0.5rem}
    .navSub__item:last-of-type{border-bottom: none;}
    .navLink.--isOpen .rollup__inner,.navLink:hover .rollup__inner { transform: translateY(0);}

}
