/* !====js-下拉選單==== */
/* .dropdown{position:relative} */
[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: rotate(135deg);position: absolute;top: 50%;right: 0;margin-top: -5px;} */
/* [data-toggle="dropdown"].--isOpen::after{transform: rotate(-45deg);} */
.dropdownMenu{display: none;}
.dropdown:has(.--isOpen) .dropdownMenu{border-top: 1px solid #ccc;}
.navSubList{--num: 3;--gap:clamp(1rem,2vw,2rem);gap: var(--gap) ;display: flex;flex-wrap: wrap;padding-left: 0;}

/* !====選單==== */
.navbar{position: relative;top: 0;left: 0;right: 0;z-index: 9999;background-color: #fff;transition: 0.4s all ease-in-out;}
/* .navbar.innerHead{border-bottom: 1px solid #d3d3d3;} */
.navbar>.container{display: flex;align-items: center;gap:2rem;max-width: 100%;}
.navbarBrand{display: block;width: clamp(8rem,12vw,12rem);;aspect-ratio: 8/3;text-align: center;overflow: hidden;text-indent: -9999px;background: url(../images/all/logo.png)no-repeat center center / contain;}
.navbarToggle{order:1;display: none;}
.navbarNav{display: flex;align-items: center;gap:clamp(1rem,2vw,2rem);margin-left: auto;}
.navbarNav__btn{margin-left: 1rem;}
.navbarNav__lang{position: relative;;margin-left: calc(-1 * clamp(0.8rem,1.2vw,1.25rem));}
.navLink{--cl: var(--black);display: block;position: relative;;cursor: pointer;padding:clamp(1.5rem,2vw,2.5rem)  0;color:#222C33;font-size: clamp(1.125rem,1.25vw,1.25rem);transition: 0.3s all ease-in-out;}
.navLink.--isOpen,.navbarNav__item.active .navLink{color:#075A8D;}
.navLink::after{content:"";position: absolute;left: 50%;bottom:10%;transform: translateX(-50%);width: 100%;height: 2px;background: #075A8D;opacity: 0;transition: 0.3s all ease-in-out;}
.navLink.--isOpen::after ,.navbarNav__item.active .navLink::after{opacity: 1;bottom:0}
.navSub{position: absolute;;width: 100%;padding:clamp(2rem,3vw,3rem) clamp(1.25rem,6vw,6rem);top: var(--headerH);left: 0;;background-color: #fff;;list-style: none;}
.navSub::before{content:"";position: absolute;left: 0;top:0;width: 100%;height: 100%;background: #fff;}
.navSub__tit{position: relative;display: flex;align-items: center;gap:clamp(0.5rem,1vw,1rem);margin-bottom: clamp(1.25rem,2vw,2rem);color:#075A8D;font-size: clamp(1.5rem,2vw,2rem);font-weight: 500;z-index: 2;}
.navSub__tit::after{display: flex;align-items: center;justify-content: center;width: clamp(1.8rem,3vw,2.2rem);height: clamp(1.8rem,3vw,2.2rem);border-radius: 50%;background-color: #075A8D;text-align: center;color:#fff;font-size: clamp(1rem,1.5vw,1.5rem);}
.navSub__item{width:calc((100% - var(--gap) * (var(--num) - 1)) / var(--num) );;position: relative;z-index: 2;background: #eee;border-radius: 8px;overflow: hidden;transition: 0.3s all ease-in-out;}
.navSub__item:hover .navSubLinkBg{transform: translate(-50%,-50%) scale(1.05);}
.navSubLink{display: block;position: relative;z-index: 2;;padding:clamp(1.5rem,2.5vw,2.5rem) clamp(1.25rem,2vw,2rem);background:linear-gradient(180deg, rgba(7, 90, 141, 0.40) 0%, rgba(7, 90, 141, 0.60) 100%);color:#fff;font-size: clamp(1.25rem, 1.375vw, 1.375rem);font-weight: 500;transition: 0.3s all ease-in-out;height: 100%;}
.navSub__item:hover .navSubLink{background: transparent;}
.navSub__item:hover .navSubLink::before{opacity: 1;}
.navSubLink::before{content:"";width: 100%;height: 100%;position: absolute;left: 0;top:0;background: linear-gradient(180deg, rgba(240, 131, 0, 0.70) 0%, rgba(240, 131, 0, 0.95) 100%);z-index: -1;opacity: 0;transition: 0.3s all ease-in-out;}
.navSubLinkBg{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);width: 100%;height: 100%;object-fit: cover;transition: 0.4s all ease-in-out; mix-blend-mode: multiply;}
.langIcon{display: block;position: relative;;width:clamp(2.8rem,3.5vw,3.5rem) ;aspect-ratio: 1/1;border-radius: 50%;background: #EAEAEA;transition: 0.3s all ease-in-out;}
.langIcon:hover{background: var(--subColor);color:#fff}
.langIcon::after{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);font-size: clamp(1.25rem, 1.5vw, 1.5rem);}
.langList{display: none;;flex-direction: column;width: 6rem;;background: #EAEAEA;text-align: center;border-radius: 0.8rem;position: absolute;left: 50%;bottom:-0.9rem;transform: translate(-50%,100%);overflow: hidden;}
.--isOpen .langList{display: flex;}
.langList__item{padding:0.5rem 1rem}
.langList__item:hover{color: #075A8D;}
.langList__item.active{background-color: #075A8D;color:#fff}

/* !====選單fixed樣式==== */
.navbar--fixed{position: sticky;border-bottom: 1px solid #d3d3d3;}
.navbar--fixed .navbarBrand{width: clamp(6rem,12vw,10rem);}
.navbar--fixed .navLink{padding:clamp(1.5rem,2vw,2rem) 0}

@media screen and (max-width: 992px) {
    /* !768====選單==== */
    .navbar{padding:clamp(0.6rem,1.3vw,1.5rem) 0}
    .navbar>.container{justify-content: space-between;}
    .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;}
    .navbarToggle span{width: 1.8rem;height: 2px;background: var(--bodyColor);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:clamp(1.25rem,3vw,3rem) clamp(1.25rem,2vw,2rem);max-height: calc(100vh - var(--headerH));overflow-y: scroll;}
    .navLink{padding:.5rem 1rem .5rem 1rem;font-size: 1.125rem;}
    .navSub{position: static;padding:0.5rem 1rem;background: transparent;}
    .navLink.--isOpen{color:#075A8D;background: #e0e0e0;border-radius: 0.5rem;font-weight: 500;}
    .navSub::before{display: none;}
    .langIcon{display: none;}
    .--isOpen .langList{position: relative;left: auto;top:auto;transform: translate(0,0);width: min(100%,15rem);flex-direction: row;justify-content: center;background: #fff;margin: 0 auto;}
    .langList__item{width: 100%;font-size: 0.9rem;white-space: nowrap;}
    .navbarNav .btnStyle.--onlyTxt{justify-content: center;width: 100%;margin:2rem 0 1rem 0}
    .navbarNav__item{margin-bottom:clamp(0.5rem,1vw,1rem) ;}
    .navSub__tit{display: none;}
    .navSubList{--num:1}
    .navSub__item{background:transparent;}
    .navSub__item .navSubLink{font-size: 1rem;color:var(--bodyColor-l);font-weight: 500; padding: 0;}
    .navLink::after{display: none;}
    .navSubLink,.navbar--fixed .navLink{padding:0.25rem 0;;background: transparent;}
    .navSubLinkBg,.navSubLink::before{display: none;}
    .dropdown:has(.--isOpen) .dropdownMenu{border-top: none;}
    .navbarNav__item > .navLink::before{content:"";position: absolute;;right:1rem;top:50%;transform: translateY(-50%);width: 0.8rem;height: 1px;background: var(--bodyColor);}
    .navbarNav__item > .navLink::after{content:"";position: absolute;;right:1.4rem;top:50%;transform: translateY(-50%);width: 1px;height: 0.8rem;background: var(--bodyColor);display: block;opacity: 1;left: auto;transform-origin: 0.18rem 0.15rem;}
    .navbarNav__item > .navLink.--isOpen::before{background: var(--mjColor);}
    .navbarNav__item > .navLink.--isOpen::after{transform: rotate(90deg);opacity: 0;}


}