@charset "UTF-8";
/* !====js-下拉選單==== */
.dropdown {
  position: relative;
}
/* [data-toggle="dropdown"]{position: relative;cursor: pointer;display: block;padding-right: 2rem;} */
/* [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;
}

/* !====選單==== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: var(--transition);
}
.navbar > .containerHD {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: calc(var(--hd--space) / 2) var(--hd--space);
  transition: var(--transition);
}
.navbar--fixed {
  background-color: white;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
.navbar--fixed > .containerHD {
  padding: 0 var(--hd--space);
}
.navbar--fixed .hdLogo-w {
  display: none;
}
.navbar--fixed .hdLogo {
  display: block;
}
.navbar--fixed .navbarBrand {
  width: clamp(10rem, 18vw, 18rem);
}
.navbar--fixed .navLink {
  color: var(--black);
  font-weight: var(--bold);
}
.navbar--fixed .navLink__en {
  color: var(--mjColor);
}
.navbar--fixed .navbarNav__item:after {
  border-right: 1px solid var(--black);
}
.navbar--fixed .navbarToggle span {
  background-color: var(--cl);
}
.navbar--fixed .navbarToggle.--isOpen span {
  background-color: white;
}
@media screen and (max-width: 991px) {
  .navbar--fixed .navLink {
    color: white;
  }
  .navbar--fixed .navLink__en {
    color: white;
  }
}

.navbarBrand {
  width: clamp(12rem, 20vw, 20rem);
  display: block;
  padding: 1rem 0;
  text-align: center;
}

.navbarToggle {
  order: 1;
  display: none;
}
@media screen and (max-width: 991px) {
  .navbarToggle {
    --w: 2rem;
    --h: 1px;
    --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;
    z-index: 20;
  }
  .navbarToggle span {
    display: block;
    width: var(--w);
    height: var(--h);
    background-color: white;
    transform-origin: center;
  }
  .navbarToggle span:nth-child(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(0) translate(-50%, calc(-1 * var(--mv)));
    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(2) {
    opacity: 0;
  }
  .navbarToggle.--isOpen span:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.navbarNav {
  --navGap: clamp(2rem, 4.5vw, 4.5rem);
  display: flex;
  gap: calc(var(--navGap) / 2);
  align-items: center;
  margin-left: auto;
}
.navbarNav__item {
  display: flex;
  align-items: center;
}
.navbarNav__item:after {
  content: "";
  display: block;
  width: 1px;
  height: 1.5rem;
  border-right: 1px solid white;
  margin-left: calc(var(--navGap) / 2);
}
.navbarNav__item:last-child:after {
  border: none;
}
@media screen and (max-width: 991px) {
  .navbarNav__item {
    justify-content: center;
    padding: 1rem 0;
    border-bottom: 1px dashed var(--mjColor-l);
  }
  .navbarNav__item:after {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .navbarNav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/all/menu-bg.jpg);
    background-size: cover;
    z-index: 10;
    align-items: center;
    padding-top: 5rem;
  }
}

.navLink {
  --cl: var(--black);
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--text);
  font-weight: var(--bold);
  line-height: 1;
  /* &:hover{gap: clamp(.75rem,1vw,1rem);} */
}
.navLink__en {
  font-size: var(--textS);
  letter-spacing: 0;
}
@media screen and (max-width: 991px) {
  .navLink {
    padding: 0.5rem 1rem;
  }
}

.navSub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background-color: #fff;
  /* border-radius: 0.5rem; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 1rem 0 0;
}
@media screen and (max-width: 991px) {
  .navSub {
    position: static;
  }
}

.navSubLink {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
}
.navSubLink:hover {
  background: var(--mjColor-d);
  color: white;
}

/* 預設顯示白色 logo，隱藏彩色 logo */
.hdLogo-w {
  display: block;
}

.hdLogo {
  display: none;
}