@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Noto+Sans+TC:wght@100..900&display=swap");
@import url("https://fonts.cdnfonts.com/css/avenir");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
*header
*/
body {
  padding-top: 80px;
}
body .logo .custom-logo-link {
  display: inline-block;
  height: 100%;
  width: auto;
}
body .logo .custom-logo-link img {
  width: auto;
  height: 100%;
}
body header,
body body.home header.scrolled {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
body header #desighuHeader #floatHeader,
body body.home header.scrolled #desighuHeader #floatHeader {
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
  z-index: 9999;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: 1;
  height: 100%;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader,
  body body.home header.scrolled #desighuHeader #floatHeader {
    width: 50%;
    position: absolute;
    right: -100%;
    flex-direction: column;
    height: calc(100vh - 95px);
    top: 95px;
    overflow-y: auto;
    padding: 40px 20px;
    justify-content: start;
    background-color: #FFFFFF;
  }
}
@media (max-width: 768px) {
  body header #desighuHeader #floatHeader,
  body body.home header.scrolled #desighuHeader #floatHeader {
    width: 100%;
    height: calc(100vh - 80px);
    top: 80px;
  }
}
body header #desighuHeader #floatHeader #webNavigation,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation {
    width: 100%;
    align-items: flex-start;
    flex: none;
    height: auto;
  }
}
body header #desighuHeader #floatHeader #webNavigation nav,
body header #desighuHeader #floatHeader #webNavigation ul,
body header #desighuHeader #floatHeader #webNavigation li,
body header #desighuHeader #floatHeader #webNavigation a,
body header #desighuHeader #floatHeader #webNavigation span,
body header #desighuHeader #floatHeader #webNavigation svg,
body header #desighuHeader #floatHeader #webNavigation path,
body header #desighuHeader #floatHeader #webNavigation .menuHasChildrenSvg,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation li,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation svg,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation path,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation .menuHasChildrenSvg {
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
body header #desighuHeader #floatHeader #webNavigation .menuHasChildrenSvg,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation .menuHasChildrenSvg {
  transform: rotate(270deg);
}
body header #desighuHeader #floatHeader #webNavigation > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: end;
  width: 100%;
  position: relative;
  height: 100%;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul {
    flex-direction: column;
    height: auto;
    gap: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li {
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
  height: 100%;
  position: relative;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li:before,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 28px;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li:before,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:before {
    display: none;
  }
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li {
    width: 100%;
    padding: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > .menuHasChildrenSvg,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > .menuHasChildrenSvg {
  display: none;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > .menuHasChildrenSvg,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > .menuHasChildrenSvg {
    display: flex;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 21.6px */
  letter-spacing: 2px;
  color: #533326;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > a {
    color: #1A1A1A;
    text-align: left;
    justify-content: flex-start;
    padding: 24px 24px 24px 40px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 2px;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > a span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > a span {
  color: inherit;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > a span,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > a span {
    color: inherit;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav {
  width: -moz-max-content;
  width: max-content;
  background-color: #FFFFFF;
  position: absolute;
  top: calc(100% + 28px);
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
  box-shadow: 164px 97px 53px 0px rgba(89, 87, 87, 0), 105px 62px 49px 0px rgba(89, 87, 87, 0.01), 59px 35px 41px 0px rgba(89, 87, 87, 0.05), 26px 15px 30px 0px rgba(89, 87, 87, 0.09), 7px 4px 17px 0px rgba(89, 87, 87, 0.1);
  display: grid;
  grid-template-rows: 0fr;
  left: -10px;
  min-width: 180px;
  z-index: 5;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav {
    position: relative;
    box-shadow: none;
    width: 100%;
    left: 0;
    transform: translateX(0);
    display: grid;
    padding: 0;
    transform: translateX(0);
    left: 0;
    min-width: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul {
    flex-direction: column;
    gap: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: linear-gradient(0deg, rgba(83, 51, 38, 0.05) 0%, rgba(83, 51, 38, 0.05) 100%), #FFF;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li {
    width: 100%;
    display: unset;
    padding: 0;
  }
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li .menuHasChildrenSvg,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li .menuHasChildrenSvg {
    display: flex;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 21.6px */
  letter-spacing: 2px;
  color: #533326;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a {
    color: #1A1A1A;
    padding: 24px 24px 24px 60px;
    justify-content: flex-start;
    font-size: 14px;
    font-style: normal;
    font-weight: 350;
    line-height: 100%;
    letter-spacing: 2px;
    white-space: normal;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a span {
  color: inherit;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a:hover,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a:hover {
  color: #1A1A1A;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a:hover span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > a:hover span {
  color: inherit;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav {
  grid-template-rows: 0fr;
  display: grid;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  background-color: #FFFFFF;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
  box-shadow: 164px 97px 53px 0px rgba(89, 87, 87, 0), 105px 62px 49px 0px rgba(89, 87, 87, 0.01), 59px 35px 41px 0px rgba(89, 87, 87, 0.05), 26px 15px 30px 0px rgba(89, 87, 87, 0.09), 7px 4px 17px 0px rgba(89, 87, 87, 0.1);
  z-index: 10;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav {
    position: relative;
    left: 0;
    min-width: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul {
    gap: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li {
  position: relative;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: linear-gradient(0deg, rgba(185, 155, 122, 0.05) 0%, rgba(185, 155, 122, 0.05) 100%), #FFF;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li {
    padding: 0;
    display: unset;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 2px;
  color: #533326;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a {
    padding: 24px 24px 24px 80px;
    justify-content: flex-start;
    font-size: 14px;
    font-style: normal;
    font-weight: 350;
    line-height: 100%;
    letter-spacing: 2px;
    white-space: initial;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a span {
  color: inherit;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a .line,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a .line {
  position: relative;
  left: 0;
  order: 2;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a:hover .line,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a:hover .line {
  left: 0;
  color: #533326;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a:hover .line span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li a:hover .line span {
  color: #533326;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li .menuHasChildrenSvg svg path,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li .menuHasChildrenSvg svg path {
  fill: #1A1A1A;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li .menuHasChildrenSvg,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li .menuHasChildrenSvg {
    display: flex;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav {
  grid-template-rows: 0fr;
  display: grid;
  position: absolute;
  top: 0;
  right: 100%;
  min-width: 180px;
  background-color: #FFFFFF;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
  box-shadow: 164px 97px 53px 0px rgba(89, 87, 87, 0), 105px 62px 49px 0px rgba(89, 87, 87, 0.01), 59px 35px 41px 0px rgba(89, 87, 87, 0.05), 26px 15px 30px 0px rgba(89, 87, 87, 0.09), 7px 4px 17px 0px rgba(89, 87, 87, 0.1);
  z-index: 15;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav {
    min-width: 0;
    position: relative;
    right: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul {
    gap: 0;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li {
  position: relative;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: rgba(185, 155, 122, 0.1);
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li {
    padding: 0;
    display: unset;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li > a {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 2px;
  color: #533326;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li > a {
    padding: 24px 24px 24px 100px;
    justify-content: flex-start;
    font-size: 14px;
    font-style: normal;
    font-weight: 350;
    line-height: 100%;
    letter-spacing: 2px;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li > a span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li > nav > ul > li > a span {
  color: inherit;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover {
  background: rgba(185, 155, 122, 0.2);
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav {
  grid-template-rows: 0fr;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav > ul, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav > ul {
  overflow: visible;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav > ul, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav > ul {
    overflow: hidden;
  }
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav > ul > li > .menuHasChildrenSvg path, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav > ul > li > .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.active > nav > ul > li > .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li:hover > nav > ul > li > .menuHasChildrenSvg path {
    fill: #1A1A1A;
  }
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.open > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.open > a {
    background-color: rgba(185, 155, 122, 0.2);
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.open > .menuHasChildrenSvg,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.open > .menuHasChildrenSvg {
    transform: rotate(180deg);
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.open > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li > nav > ul > li.open > nav {
    grid-template-rows: 1fr;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover {
  background-color: #B99B7A;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > a, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > a {
  color: white;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > .menuHasChildrenSvg path, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > .menuHasChildrenSvg path,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > .menuHasChildrenSvg path,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > .menuHasChildrenSvg path {
  fill: white;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > .menuHasChildrenSvg path, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > .menuHasChildrenSvg path {
    fill: #1A1A1A;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav {
  grid-template-rows: 1fr;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav > ul, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav > ul {
  overflow: visible;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav > ul, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav > ul {
    overflow: hidden;
  }
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover {
    background-color: unset;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active a, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover a {
    color: unset;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active .menuHasChildrenSvg path, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover .menuHasChildrenSvg path {
    fill: #1A1A1A;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav, body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.active > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li:hover > nav {
    grid-template-rows: 0fr;
  }
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a {
    background-color: #B99B7A;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a,
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a span,
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a .line,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a span,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > a .line {
    color: #FFFFFF;
    stroke: #FFFFFF;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > .menuHasChildrenSvg,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > .menuHasChildrenSvg {
    transform: rotate(180deg);
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > .menuHasChildrenSvg path {
    fill: #FFFFFF;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > nav > ul > li.open > nav {
    grid-template-rows: 1fr;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li.active > a, body header #desighuHeader #floatHeader #webNavigation > ul > li:hover > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.active > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:hover > a {
  color: #533326;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li.active > nav, body header #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.active > nav,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav {
  grid-template-rows: 1fr;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li.active > nav, body header #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.active > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav {
    grid-template-rows: 0fr;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li.active > nav > ul, body header #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.active > nav > ul,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav > ul {
  overflow: visible;
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li.active > nav > ul, body header #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.active > nav > ul,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:hover > nav > ul {
    overflow: hidden;
  }
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation > ul > li.open > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.open > a {
    background-color: #533326;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li.open > a,
  body header #desighuHeader #floatHeader #webNavigation > ul > li.open > a span,
  body header #desighuHeader #floatHeader #webNavigation > ul > li.open > a .line,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.open > a,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.open > a span,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.open > a .line {
    color: #FFFFFF;
    stroke: #FFFFFF;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li.open > .menuHasChildrenSvg,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.open > .menuHasChildrenSvg {
    transform: rotate(180deg);
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li.open > .menuHasChildrenSvg path,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.open > .menuHasChildrenSvg path {
    fill: #FFFFFF;
  }
  body header #desighuHeader #floatHeader #webNavigation > ul > li.open > nav,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.open > nav {
    grid-template-rows: 1fr;
  }
}
body header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a {
  color: #1A1A1A;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a span,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a span {
  color: inherit;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::before,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::before {
  opacity: 0;
  background-image: linear-gradient(to right, #FFF, #FFF 1px, transparent 1px, transparent 3px);
  opacity: 0;
}
body header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::after,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::after {
  left: 0;
  width: 100%;
  background-color: #533326;
}
body header #desighuHeader #floatHeader #webNavigation .arrowBotton,
body body.home header.scrolled #desighuHeader #floatHeader #webNavigation .arrowBotton {
  display: none;
  transition: all 450ms, transform 900ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (max-width: 1300px) {
  body header #desighuHeader #floatHeader #webNavigation .arrowBotton,
  body body.home header.scrolled #desighuHeader #floatHeader #webNavigation .arrowBotton {
    display: block;
  }
}
body header #desighuHeader #floatHeader.active-menu_m,
body body.home header.scrolled #desighuHeader #floatHeader.active-menu_m {
  right: 0;
}
body header.scrolled {
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.1));
}
body header.scrolled .hamberger .bar {
  background-color: #B99B7A;
}
body header.awake {
  transform: translateY(0);
}
@media (max-width: 1300px) {
  body header.awake {
    transform: translateY(0);
  }
}
body header.sleep {
  transform: translateY(0);
}

body.home {
  padding-top: 0;
}
body.home header {
  background-color: unset;
}
@media (max-width: 1300px) {
  body.home header #desighuHeader #floatHeader #webNavigation > ul > li {
    padding: 0;
  }
}
body.home header #desighuHeader #floatHeader #webNavigation > ul > li > a {
  color: #FFFFFF;
}
@media (max-width: 1300px) {
  body.home header #desighuHeader #floatHeader #webNavigation > ul > li > a {
    color: #1A1A1A;
  }
}
body.home header #desighuHeader #floatHeader #webNavigation > ul > li:hover > a {
  color: #1A1A1A;
}
body.home header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a {
  color: #1A1A1A;
}
body.home header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a span {
  color: inherit;
}
body.home header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::before {
  opacity: 0;
  background-image: linear-gradient(to right, #FFF, #FFF 1px, transparent 1px, transparent 3px);
  opacity: 0;
}
body.home header #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::after {
  left: 0;
  width: 100%;
  background-color: #533326;
}
body.home .logo .logoColor {
  display: none;
}
body.home .hamberger .bar {
  background-color: #FFFFFF;
}
body.home header.scrolled {
  background-color: #FFFFFF;
}
body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > a {
  color: #533326;
}
@media (max-width: 1300px) {
  body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li > a {
    color: #1A1A1A;
  }
}
body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li:hover > a {
  color: #1A1A1A;
}
body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a {
  color: #533326;
}
body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a span {
  color: inherit;
}
body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::before {
  opacity: 0;
  background-image: linear-gradient(to right, #FFF, #FFF 1px, transparent 1px, transparent 3px);
  opacity: 0;
}
body.home header.scrolled #desighuHeader #floatHeader #webNavigation > ul > li.current-menu-item > a .line::after {
  left: 0;
  width: 100%;
  background-color: #533326;
}
body.home header.scrolled .logo .custom-logo-link {
  display: none;
}
body.home header.scrolled .logo .logoColor {
  display: inline-block;
}

/*
*footer
*/
/*
*連結底線
*/
a.lineBottom .line {
  position: relative;
}
a.lineBottom .line:before, a.lineBottom .line:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  bottom: 0;
  height: 1px;
  transition: all 0.5s cubic-bezier(0.43, 0.05, 0.17, 1);
}
a.lineBottom .line::before {
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
}
a.lineBottom .line::after {
  right: 0;
  width: 0;
  background: #533326;
}
a.lineBottom:hover .line::before {
  opacity: 0;
  background-image: linear-gradient(to right, #FFF, #FFF 1px, transparent 1px, transparent 3px);
  opacity: 0;
}
a.lineBottom:hover .line::after {
  left: 0;
  width: 100%;
  background-color: #533326;
}

.socialIcons {
  transition: all 0.3s ease-in-out;
}
.socialIcons svg rect,
.socialIcons svg path {
  transition: all 0.3s ease-in-out;
}
.socialIcons:hover svg rect {
  fill: #533326;
}
.socialIcons:hover svg path {
  fill: white;
}

.socialIconsFloat {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #B99B7A;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 480px) {
  .socialIconsFloat {
    width: 40px;
    height: 40px;
  }
}
.socialIconsFloat svg path {
  transition: all 0.3s ease-in-out;
}
.socialIconsFloat:hover {
  background-color: #1A1A1A;
}
.socialIconsFloat:hover svg path {
  fill: #B99B7A;
}

input[type=text]:focus, input[type=text]:focus-visible, input[type=text]:active,
input[type=tel]:focus,
input[type=tel]:focus-visible,
input[type=tel]:active,
input[type=email]:focus,
input[type=email]:focus-visible,
input[type=email]:active,
textarea:focus,
textarea:focus-visible,
textarea:active {
  border: 0px solid #533326 !important;
}
input[type=text].wpcf7-not-valid,
input[type=tel].wpcf7-not-valid,
input[type=email].wpcf7-not-valid,
textarea.wpcf7-not-valid {
  border: 2px solid #D7383B !important;
}

.wpcf7-list-item:has(input[type=checkbox]) {
  display: flex !important;
  align-items: center;
  padding: 0;
  position: relative;
}
.wpcf7-list-item:has(input[type=checkbox]) input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 50;
}
.wpcf7-list-item:has(input[type=checkbox]) input[type=checkbox] + span {
  position: relative;
}
.wpcf7-list-item:has(input[type=checkbox]) input[type=checkbox] + span::after {
  content: "";
  background: #F5F5F5;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 4px;
  z-index: 10;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.wpcf7-list-item:has(input[type=checkbox]) input[type=checkbox] + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #F5F5F5;
  border-radius: 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s ease-in-out;
  /* 防止文字被滑鼠選取反白 */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #533326;
}
.wpcf7-list-item:has(input[type=checkbox]) input[type=checkbox]:checked + span::after {
  background: #533326;
}
.wpcf7-list-item:has(input[type=checkbox]) .wpcf7-list-item-label {
  padding-left: 28px;
  display: inline-block;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 350;
  line-height: 200%;
  letter-spacing: 2px;
  color: #1A1A1A;
}

label:has(input[type=radio]),
.wpcf7-list-item:has(input[type=radio]) {
  display: flex !important;
  align-items: center;
  padding: 0;
  position: relative;
}
label:has(input[type=radio]) input[type=radio],
.wpcf7-list-item:has(input[type=radio]) input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 50;
}
label:has(input[type=radio]) input[type=radio] + span,
.wpcf7-list-item:has(input[type=radio]) input[type=radio] + span {
  position: relative;
}
label:has(input[type=radio]) input[type=radio] + span::before,
.wpcf7-list-item:has(input[type=radio]) input[type=radio] + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #5C5C5C;
  border-radius: 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s ease-in-out;
  /* 防止文字被滑鼠選取反白 */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
label:has(input[type=radio]) input[type=radio] + span::after,
.wpcf7-list-item:has(input[type=radio]) input[type=radio] + span::after {
  content: "";
  background: #5C5C5C;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 4px;
  z-index: 10;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
label:has(input[type=radio]) input[type=radio]:checked + span::after,
.wpcf7-list-item:has(input[type=radio]) input[type=radio]:checked + span::after {
  background: #533326;
}
label:has(input[type=radio]) .wpcf7-list-item-label,
.wpcf7-list-item:has(input[type=radio]) .wpcf7-list-item-label {
  padding-left: 24px;
}

select {
  appearance: none;
  /* 移除默認樣式 */
  -webkit-appearance: none;
  -moz-appearance: none;
}

.selectBlock {
  position: relative;
}

.selectSvg {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

select:focus {
  outline: none;
}

select::-ms-expand {
  display: none;
  /* 隱藏IE的默認箭頭 */
}

.fancybox-button svg path {
  fill: #FFFFFF;
}

.swiper-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.swiper-pagination span {
  width: 8px;
  height: 8px;
  opacity: 1;
  background-color: #FFFFFF;
  padding: 0;
  margin: 0 !important;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #B99B7A;
}

.outpatientSwiperOut .swiper-pagination-bullet-active {
  background-color: #533326;
}

.swiper-scrollbar .swiper-scrollbar-drag {
  background-color: rgba(185, 155, 122, 0.7);
}

.breadcrumb #breadcrumbs > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.breadcrumb #breadcrumbs a,
.breadcrumb #breadcrumbs span {
  font-size: 14px;
  font-style: normal;
  font-weight: 350;
  line-height: 200%;
  /* 28px */
  letter-spacing: 2px;
  color: #FFFFFF;
}
.breadcrumb #breadcrumbs a {
  transition: all 0.3s ease-in-out;
}
.breadcrumb #breadcrumbs a:hover {
  color: #1A1A1A;
}

.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
  border: 0px solid #FFFFFF;
  padding: 20px 16px;
  color: #533326;
  font-size: 15px;
  font-style: normal;
  font-weight: 350;
  line-height: 100%;
  letter-spacing: 2px;
}
.wpcf7-form textarea {
  height: 86px;
}
.wpcf7-form label {
  background-color: #F5F5F5;
  color: #533326;
  font-size: 15px;
  font-style: normal;
  font-weight: 350;
  line-height: 100%;
  letter-spacing: 2px;
  display: inline-block;
  white-space: nowrap;
}
.wpcf7-form sup {
  color: #FC500A;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 2px;
  top: 1px;
}
.wpcf7-form .wpcf7-not-valid-tip {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  line-height: normal;
  margin: 4px 0;
  color: #D7383B;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
}
.wpcf7-form .wpcf7-response-output {
  border: 0 !important;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%;
  margin-top: 4px;
  color: #D7383B;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  text-align: center;
}
@media (max-width: 768px) {
  .wpcf7-form .wpcf7-response-output {
    text-align: center;
  }
}
.wpcf7-form .wpcf7-list-item {
  margin: 0;
}
.wpcf7-form ::-moz-placeholder {
  color: #1A1A1A;
  font-size: 15px;
  font-style: normal;
  font-weight: 350;
  line-height: 200%;
  letter-spacing: 2px;
  opacity: 1;
}
.wpcf7-form ::placeholder {
  color: #1A1A1A;
  font-size: 15px;
  font-style: normal;
  font-weight: 350;
  line-height: 200%;
  letter-spacing: 2px;
  opacity: 1;
}
.wpcf7-form .submitbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  position: relative;
  gap: 3px;
  border-radius: 100px;
  border: 1px solid #B99B7A;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  padding: 16px 24px;
}
.wpcf7-form .submitbtn .wpcf7-submit {
  width: -moz-fit-content;
  width: fit-content;
  color: #1A1A1A;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 2px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  background-color: unset;
  padding: 0;
}
.wpcf7-form .submitbtn:hover {
  background-color: #B99B7A;
}
.wpcf7-form .submitbtn:hover .wpcf7-submit {
  color: #FFFFFF;
}
.wpcf7-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 4px;
  transform: translateY(-50%);
}
.wpcf7-form #contactForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
}
@media (max-width: 768px) {
  .wpcf7-form #contactForm {
    gap: 20px;
  }
}
.wpcf7-form .labelLeft {
  position: relative;
}
.wpcf7-form .labelLeft label {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
}
.wpcf7-form .labelTop {
  background-color: #F5F5F5;
}
.wpcf7-form .labelTop label {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  padding: 20px 16px 4px 16px;
}
.wpcf7-form .labelTop .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 16px 20px 16px;
}
.wpcf7-form .labelTop .wpcf7-not-valid-tip {
  position: relative !important;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 0.5 !important;
  color: #5C5C5C !important;
}

input::placeholder,
textarea::placeholder {
  opacity: 0.5 !important;
  color: #5C5C5C !important;
}

.fancybox-is-open .fancybox-bg {
  background: var(--gray-1, #545860);
  opacity: 0.5;
}

input:focus,
textarea:focus {
  outline: none;
}
input:focus-visible,
textarea:focus-visible {
  outline: none;
}
input:active,
textarea:active {
  outline: none;
}

#pagination .page-numbers {
  width: 40px;
  height: 40px;
  font-family: "Avenir", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 120%;
  /* 19.2px */
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
#pagination .page-numbers.current {
  color: #B99B7A;
  background-color: #B99B7A;
  color: #FFFFFF;
}
#pagination .page-numbers.current:hover {
  color: #FFFFFF !important;
}
#pagination .page-numbers.next {
  margin-left: 24px;
}
#pagination .page-numbers.prev {
  margin-right: 24px;
}
#pagination .page-numbers.next, #pagination .page-numbers.prev {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#pagination .page-numbers.next path, #pagination .page-numbers.prev path {
  transition: all 0.3s ease-in-out;
}
#pagination .page-numbers.next:hover path, #pagination .page-numbers.prev:hover path {
  fill: #1A1A1A;
}
#pagination .page-numbers:hover {
  color: #B99B7A;
}

.alinkArrowBeveled {
  transition: all 0.3s ease-in-out;
}
.alinkArrowBeveled > div {
  display: flex;
  justify-content: flex-end;
  width: 10px;
  height: 10px;
  overflow: hidden;
  min-width: 10px;
  max-width: 10px;
  min-height: 10px;
  max-height: 10px;
}
.alinkArrowBeveled > div svg {
  min-width: 10px;
  max-width: 10px;
  min-height: 10px;
  max-height: 10px;
  transition: all 0.3s ease-in-out;
}
.alinkArrowBeveled > div svg:first-child {
  position: relative;
  top: 10px;
}
.alinkArrowBeveled:hover {
  background-color: #1A1A1A;
}
.alinkArrowBeveled:hover svg {
  transform: translate3d(10px, -10px, 0);
}

.alinkArrowBeveledB {
  transition: all 0.3s ease-in-out;
}
.alinkArrowBeveledB > div {
  display: flex;
  justify-content: flex-end;
  width: 10px;
  height: 10px;
  overflow: hidden;
  min-width: 10px;
  max-width: 10px;
  min-height: 10px;
  max-height: 10px;
}
.alinkArrowBeveledB > div svg {
  min-width: 10px;
  max-width: 10px;
  min-height: 10px;
  max-height: 10px;
  transition: all 0.3s ease-in-out;
}
.alinkArrowBeveledB > div svg:first-child {
  position: relative;
  top: 10px;
}
.alinkArrowBeveledB:hover {
  color: #1A1A1A;
}
.alinkArrowBeveledB:hover span {
  color: inherit;
}
.alinkArrowBeveledB:hover svg {
  transform: translate3d(10px, -10px, 0);
}

.hoverToBigOut .hoverToBig {
  width: calc(20% - 3.2px);
  height: 441px;
}
@media (max-width: 921px) {
  .hoverToBigOut .hoverToBig {
    height: auto;
    width: 100%;
  }
}

.hoverToBigOut:has(.hoverToBig.active) .hoverToBig {
  width: calc(17.5% - 3.2px);
}
@media (max-width: 921px) {
  .hoverToBigOut:has(.hoverToBig.active) .hoverToBig {
    width: 100%;
  }
}
.hoverToBigOut:has(.hoverToBig.active) .hoverToBig.active {
  width: calc(30% - 3.2px);
}
@media (max-width: 921px) {
  .hoverToBigOut:has(.hoverToBig.active) .hoverToBig.active {
    width: 100%;
  }
}

.hamberger {
  width: 32px;
  height: 32px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s;
  margin-left: auto;
}
@media (max-width: 1300px) {
  .hamberger {
    display: flex;
  }
}

.hamberger .bar {
  display: block;
  width: 24px;
  height: 1px;
  border-radius: 9999px;
  background-color: #B99B7A;
  transition: all 0.2s ease-in-out;
}

.hamberger .bar:not(:last-child) {
  margin-bottom: 8px;
}

.hamberger.active {
  transition-delay: 0.4s;
  transform: rotate(45deg) translate(0px, -4px);
}

.hamberger.active > .bar:nth-child(2) {
  width: 0;
}

.hamberger.active > .bar:nth-child(1),
.hamberger.active > .bar:nth-child(3) {
  transition-delay: 0.2s;
}

.hamberger.active > .bar:nth-child(1) {
  transform: translateY(15px);
}

.hamberger.active > .bar:nth-child(3) {
  transform: translateY(-3px) rotate(90deg);
}

.check404,
.no-results {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 80px 0 120px 0;
  flex-direction: column;
  gap: 40px;
}
@media (max-width: 768px) {
  .check404,
  .no-results {
    padding: 40px 0 0 80px 0;
  }
}

.check404 h1,
.no-results h2 {
  text-align: center;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 120px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  color: #533326;
  letter-spacing: 2.4px;
}

#teamSingeBlock .breadcrumb #breadcrumbs a,
#teamSingeBlock .breadcrumb #breadcrumbs span,
#casesSingeBlock .breadcrumb #breadcrumbs a,
#casesSingeBlock .breadcrumb #breadcrumbs span,
#servicesTaxBlock .breadcrumb #breadcrumbs a,
#servicesTaxBlock .breadcrumb #breadcrumbs span {
  color: #533326;
}
#teamSingeBlock .breadcrumb #breadcrumbs a:hover,
#casesSingeBlock .breadcrumb #breadcrumbs a:hover,
#servicesTaxBlock .breadcrumb #breadcrumbs a:hover {
  color: #1A1A1A;
}

.eventCard {
  opacity: 0;
  animation: cardShow 3s ease 0s forwards 1 normal;
  animation-delay: 0.3s;
}

@keyframes cardShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.arrowFloat {
  animation: arrowFloatShow 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate both running;
}

@keyframes arrowFloatShow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.arrowFloatB {
  animation: arrowFloatShowB 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate both running;
}

@keyframes arrowFloatShowB {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
}
.fadeWord {
  transform: translateY(50px);
  animation: wordShow 1.5s ease 0s forwards 1 normal;
}

@keyframes wordShow {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
.floatAni {
  transform: translate(200px, -50%);
  animation: floatAniShow 1.5s ease 0s forwards 1 normal;
  animation-delay: 0.5s;
}

@keyframes floatAniShow {
  0% {
    transform: translate(200px, -50%);
  }
  100% {
    transform: translate(0px, -50%);
  }
}
.web_search {
  border-radius: 10px;
  background-color: #FFFFFF;
  padding: 58px 40px 40px 40px;
}
.web_search .fancybox-button {
  top: 8px;
  right: 8px;
  background-color: #533326;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
.web_search .fancybox-button svg path {
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
  fill: #FFFFFF;
}
.web_search .web_search-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  gap: 24px;
}
.web_search input {
  width: 100%;
  padding: 8px 24px;
  background-color: #f4f4f4;
}
.web_search button {
  display: flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #533326;
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
}
.web_search button:hover {
  color: #FFFFFF;
  background-color: #533326;
}
.web_search ::-moz-placeholder {
  color: #1A1A1A;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: 0.15px;
}
.web_search ::placeholder {
  color: #1A1A1A;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: 0.15px;
}/*# sourceMappingURL=main.css.map */