/* !====js-下拉選單==== */
.dropdown{position:relative}
[data-toggle="dropdown"]{position: relative;cursor: pointer;display: block;padding-right: 2rem;}
[data-toggle="dropdown"]::after{content: '\F282';font-family: bootstrap-icons;display: block;transform: translate(-50%, -50%);position: absolute;top: 50%;right: 0;transition: all .5s;}
[data-toggle="dropdown"].--isOpen::after{transform: translate(-50%, -50%) rotate(-180deg);}
.dropdownMenu{display: block;opacity: 0;pointer-events: none; position: absolute;top: 100%;left: 0;min-width: 180px;transition: all .5s;}
.dropdown:has(.--isOpen) .dropdownMenu{width: fit-content;}
[data-toggle="dropdown"]::after{display:none;}


/* !====選單==== */
.navbar{position: fixed;top: 0;left: 0;right: 0;z-index: 999999;background-color: #fff;box-shadow: 0 0 1.5rem rgba(0,0,0,0.15);}
.navbar>.container{max-width:100%;display: flex;align-items: center;justify-content: space-between;gap: clamp(1rem,2vw,2rem);padding:0 var(--hd--space);}
.navbarBrand{display: flex;align-items: center;gap: clamp(.5rem,1vw,1rem);padding: var(--logoP) 0;text-align: center;text-wrap: nowrap;font-size: var(--titleM);font-weight: var(--bold);color: var(--dark);line-height: 1;z-index: 10;}
.navbarBrand .logo{height: var(--logoH);aspect-ratio: 40 / 9;}
.navbarBrand .logo img{width:100%;height:100%; object-fit: cover;}
.navbarToggle{order:1;display: none;}
.navbarNav{display: flex;align-items: center;margin-left: auto;}

.navLink{--cl: var(--dark);font-size: var(--text);font-weight: var(--normal);display: block;text-wrap: nowrap;position:relative;cursor: pointer;--linkP:  clamp(.5rem,1vw,1rem);padding: calc(var(--linkP)/2) var(--linkP);color:var(--cl);}
.navbarNav__item{position:relative;}
.navbarNav__item::before, .navbarNav__item::after{content:'';display:block;width:0;height:1px;border-bottom:.15rem solid var(--mjColor-d);transition:all .5s;position:absolute;bottom:0;}
.navbarNav__item::before{right:50%;}
.navbarNav__item::after{left:50%;}
.navbarNav__item:hover .navLink{color: var(--mjColor-d);}
.navbarNav__item:hover::before, 
.navbarNav__item:hover::after{width:15%;}
.active.navbarNav__item .navLink{color: var(--mjColor-d);}
.active.navbarNav__item::before,
.active.navbarNav__item::after{width: 1rem;}
.navSub{background-color: #fff;border: 1px solid var(--gray-lx2);box-shadow: 0 0 10px rgba(0,0,0,0.1);list-style: none;/* margin: 1rem 0 0; */padding: 0;}
.navSub__item .navSubLink{display: block;text-wrap: nowrap;width: 100%;--linkP: clamp(.5rem,.75vw,.75rem);padding: var(--linkP) calc(var(--linkP)*2);border-bottom: 1px dashed var(--gray); font-size: 1rem;}
.navSub__item .navSubLink:hover{background:var(--gray-l);}
.navSub__item:last-child .navSubLink{border:none;}
@media screen and (min-width: 991px) {
.navbarNav__item:hover .dropdownMenu{opacity: 1;pointer-events: auto;}
}
.navbarNav__item.searchBox{--w: clamp(2.15rem,2.5vw,2.5rem);width:var(--w);height:var(--w);display:flex;justify-content:center;align-items:center;border-radius:99rem;background:white;color:var(--dark);transition:all .5s;}
.navbarNav__item.searchBox:hover{background:var(--mjColor-d);color:white;}
.navbarNav__item.searchBox:hover:before,
.navbarNav__item.searchBox:hover:after{display:none;}

/* !====選單==== */
.navbarToggle{--w: clamp(2.5rem,4vw,4rem);--h: 1px;--mv: .75rem;--cl: var(--);--cl: var(--dark);display: flex;align-items: center;justify-content: center;width: var(--w);height: var(--w);padding: 0;border: none;background-color: transparent;position: relative;z-index: 10;}
.navbarToggle span{display: block;width: var(--w);height: var(--h);background-color: var(--cl);transform-origin: center;transition: var(--transition);}
.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;}

/* !====網頁展開漢堡選單 */
.openMenu {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 5;background: white;pointer-events: none;opacity: 0;transition: all .5s;display: flex;overflow-x: hidden;}
.openMenu::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-image: url(../images/all/texture.jpg);background-size: contain;z-index: 1;pointer-events: none;opacity: .4;-webkit-transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: 1s cubic-bezier(0.42, 0, 0.58, 1);}
.openMenu__inner {position: relative;width: 75%;padding-top: calc(var(--blockHeight) + var(--hd--space));padding-left: calc(var(--hd--space)*2);z-index: 2;}
.openMenu .deco-object {right: -2%;left: unset;width: clamp(240px, 35vw, 640px);position: fixed;bottom: -.5rem;}
.openMenu .deco-object::before{top: 60%;}
.openMenu .deco-object::after{top: 25%;left: 25%;}
.openMenu.open {pointer-events: auto;opacity: 1;}
.openMenuList {display: flex;flex-wrap: wrap;--num: 6;--gap: clamp(2rem,4vw,4rem);gap: var(--gap);}
.openMenuList__item {width: calc((100% - (var(--num) - 1) * var(--gap)) / var(--num));}
.openMenuList__item .navLink {padding: 0;font-size: 1rem;margin-bottom: clamp(.1rem,.5vw,.5rem);}
.openMenuList__item .navLink:hover{color:var(--mjColor-d);}
.openMenuTit {font-size: var(--titleS);font-weight: var(--heavy);color: var(--dark);margin-bottom: clamp(1rem,1.5vw,1.5rem);}
.openMenuTit:after {content: '';display: block;width: clamp(2.5rem,3vw,3rem);height: .25rem;background: var(--mjColor);margin: .25rem 0;}


@media screen and (max-width: 1440px) {
/* !====展開選單 */
.openMenuList {--num: 5;}
}


@media screen and (max-width: 1200px) {
/* !====展開選單 */
.openMenu__inner {width: 100%;}
.openMenuList {--num: 4;}
}

@media screen and (max-width: 991px) {
.navbar>.container:has(.--isopen):before{content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-image: url(../images/all/texture.jpg);background-size: contain;z-index: -1;pointer-events: none;-webkit-transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: all .5s;opacity: .35;}
.navbarNav{display: block !important; height: auto !important;position: fixed;top:var(--headerH);left:0;right:0;bottom:0;background: white;z-index:9999;align-items: start;overflow-y: auto;transition: all .5s;opacity: 0;pointer-events: none;transform: translateX(50%);}
.navbarNav::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 140%;background-image: url(../images/all/texture.jpg);background-size: cover;z-index: -1;pointer-events: none;-webkit-transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: all .5s;opacity: 0;}
.navbarNav.--isOpen{opacity: 1;pointer-events: auto;transform: translateX(0%);height: 100%;display: flex!important;flex-direction: column;padding-bottom: var(--blockHeight);}
.navbarNav.--isOpen::before {opacity: .35;}
.navbarNav__item{width: 100%;}
.navbarNav__item .navLink{width: 100%;padding: clamp(.75rem,10vw,1rem) clamp(1.25rem,10vw,2rem);text-align:center;border-bottom: 1px solid var(--gray-l);var(--mjColor-d);display: flex;align-items: center;position: unset;}
.navbarNav__item .--isOpen.navLink {background:var(--mjColor-d);color:white;}
/* .navbarNav__item.active .navLink{color:var(--dark);} */
/* .navbar .navbarNav__item.active .navLink{color:white;} */
.navbarNav__item .navSubLink{display:flex;align-items:center;padding: clamp(.75rem,10vw,1rem) clamp(1.25rem,10vw,2rem);}
.navbarNav__item:has(.dropdownMenu) .navLink::after{content:'\F282';display:block;font-family:'bootstrap-icons';font-size:.75rem;margin-left:1rem;position: absolute;top: calc(clamp(.75rem,10vw,1rem)*2);right: clamp(1.25rem,10vw,2rem);}
.navSub{position: static;margin: 0;border-radius: 0;}
.navbarNav__item .navLink::before{content:"";display:block;width:.25rem;height:0%;top:0;left:0;background:var(--mjColor-d);position:absolute;transition:all .5s;z-index: 99;}
.navbarNav__item .navLink.--isOpen::before{height:100%;}
.navbarToggle.--isOpen span{--w: clamp(1.5rem,2vw,2rem);}
body:has(.navbarNav.--isOpen){overflow:hidden;}

.searchBox__toggle{position:absolute;z-index:99999;left:0;padding-left:clamp(1.25rem,10vw,2rem);}
.searchBox__input{width: 100%;position:relative;top: 0;box-shadow: none;border: 1px solid rgba(0, 0, 0, .1);overflow: hidden;display: block;}
.searchBox__input__box{display: flex;justify-content: space-between;}
.searchBox__input__box input{border: none;padding: 1rem;padding-left: calc(clamp(1.25rem,10vw,2rem) + 2rem );width:100%;}
.searchBox__input .btnGo{color: white;--searchBtn: clamp(3.75rem,4vw,4rem);width: var(--searchBtn);height: var(--searchBtn);aspect-ratio: 1;background: var(--gray);border: none;border-left: solid 1px #eee;transition: all .5s;}
.searchBox__input .btnGo:hover{background: var(--mjColor-d);color:white;}
.navbarNav__item.searchBox{width: 100%;height: fit-content;display:flex;border-radius:0;background:none;color:var(--dark);transition:all .5s;order: -1;}
.navbarNav__item.searchBox:hover{color:var(--dark);}
.navbarNav__item.searchBox:hover:before,
.navbarNav__item.searchBox:hover:after{display:none;}

/* !====選單==== */
/* .navbarNav__item:hover .navLink{color: var(--mjColor-d);} */
.navbarNav__item::before, 
.navbarNav__item::after{display: none;}
.dropdown .dropdownMenu{display: none;box-shadow: none;background: rgba(255 255 255 / 50%);border-bottom: 1px dashed var(--gray);}
.dropdown:has(.--isOpen) .dropdownMenu{width: 100%;opacity: 1;pointer-events: auto;}


/* !====展開選單 */
.openMenu{display: none;}
.openMenu__inner{width: 100%;}
.openMenu .deco-object {right: -10%;width: clamp(360px, 40vw, 720px);}
.openMenuTit{font-size: var(--text);}
.openMenuList__item .navLink{margin: 0;}

}