:root {
  --primary: #ee7836;
  --secondary: #80746a;
  --gray-1: #595757;
  --gray-2: #8b8a89;
  --gray-3: #c0b9b5;
  --gray-4: #f5f4f2;
  --gray-5: #494949;
  --gray-6: #5c5c5c;
  --gray-7: #8f8f8f;
  --white: #ffffff;
  --black: #000000;
  --red: #e40316;
  --plyr-color-main: #ee7836;
}

header.site-header {
  z-index: 9999;
}
@media (min-width: 768px) and (max-width: 1320px) {
  header.site-header {
    padding: 0;
  }
}
@media (max-width: 767px) {
  header.site-header {
    padding: 0;
  }
}
header.site-header > div {
  max-width: 100%;
  width: 1200px;
  height: 96px;
  background: #fff;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) and (max-width: 1320px) {
  header.site-header > div {
    gap: 24px;
  }
}
@media (max-width: 767px) {
  header.site-header > div {
    height: 55px;
  }
}
header.site-header > div .logo {
  width: 176px;
  height: 40px;
}
@media (max-width: 767px) {
  header.site-header > div .logo {
    width: 120px;
    height: unset;
    transform: translateY(-3px);
  }
}
header.site-header > div .search-form {
  max-width: 60%;
}
@media (max-width: 767px) {
  header.site-header > div .search-form {
    display: none;
  }
}
header.site-header > div .search-form > div {
  position: relative;
  max-width: 100%;
  width: 816px;
}
header.site-header > div .search-form > div input[type=text] {
  width: 100%;
  height: 48px;
  border-radius: 48px;
  border: 1px solid var(--secondary);
  background: var(--gray-4);
  padding: 12px 24px 12px 54px;
  color: var(--gray-1);
}
header.site-header > div .search-form > div input[type=text]::-moz-placeholder {
  color: var(--gray-3);
  /* body */
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
header.site-header > div .search-form > div input[type=text]::placeholder {
  color: var(--gray-3);
  /* body */
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
header.site-header > div .search-form > div button {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
}
header.site-header > div .search-form > div button svg {
  transform: translateY(-2px);
}
@media (min-width: 768px) and (max-width: 1320px) {
  header.site-header > div .items {
    width: 30%;
  }
}
header.site-header > div .items > ul {
  gap: 39px;
  height: 60px;
}
@media (max-width: 767px) {
  header.site-header > div .items > ul {
    gap: 20px;
  }
}
header.site-header > div .items > ul li {
  padding: 0;
  display: flex;
  flex-direction: column;
}
header.site-header > div .items > ul li a {
  position: relative;
  gap: 5px;
}
header.site-header > div .items > ul li a svg {
  height: 24px;
}
header.site-header > div .items > ul li a span {
  color: var(--secondary, #80746a);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  /* 12px */
}
header.site-header > div .items > ul li a .count {
  position: absolute;
  display: inline-flex;
  height: 14px;
  width: 14px;
  border-radius: 16px;
  background: var(--primary);
  color: var(--white);
  text-align: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  top: 0px;
  right: 0;
  margin: 0;
}
@media (max-width: 767px) {
  header.site-header > div .items > ul li a .count {
    top: 13px;
    left: 8px;
  }
}
header.site-header > div .items > ul li:hover .login-child-menu {
  display: block;
}
header.site-header > div .items > ul li .login-child-menu {
  background: #fff;
  z-index: 99999;
  display: none;
  left: 50%;
  top: 45px;
  transform: translateX(-50%) translateY(15px);
  white-space: nowrap;
  min-width: 204px;
  max-width: 100%;
  border: 1px solid var(--gray-3_line, #c0b9b5);
}
@media (max-width: 767px) {
  header.site-header > div .items > ul li .login-child-menu {
    transform: translateX(-85%) translateY(28px);
  }
}
header.site-header > div .items > ul li .login-child-menu li {
  padding: 20px;
  gap: 12.5px;
  border-bottom: 1px solid var(--gray-3_line, #c0b9b5);
  flex-direction: row;
}
header.site-header > div .items > ul li .login-child-menu li a {
  color: var(--secondary, #80746a);
  /* headline 3 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1px;
}
header.site-header > div .items > ul li .login-child-menu li a:hover {
  border-color: var(--primary);
  color: var(--primary);
}
header.site-header > div .items > ul li .login-child-menu li a:hover svg path {
  stroke: var(--primary);
}

#site-header-menu > div {
  background: #f5f4f2;
}
#site-header-menu > div ul {
  display: flex;
  justify-content: center;
  list-style: none;
}
#site-header-menu > div ul li > a {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#site-header-menu > div ul li span {
  color: var(--gray-1, #595757);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  text-align: center;
  display: block;
  border-left: 1px solid var(--gray-3_line, #c0b9b5);
}
#site-header-menu > div ul li .page-list a {
  color: var(--secondary, #80746a);
  height: auto;
  /* headline 3 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1px;
}
#site-header-menu > div ul li .page-list a:hover {
  color: var(--primary, #ee7836);
}
#site-header-menu > div ul li .level a,
#site-header-menu > div ul li .level span {
  /* headline 3 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1px;
}
#site-header-menu > div ul li:last-child > a span {
  border-right: 1px solid var(--gray-3_line, #c0b9b5);
}
#site-header-menu > div ul li:hover span {
  color: var(--primary, #ee7836);
}
#site-header-menu > div ul li:hover .level-parent-container {
  display: block;
}

@media (max-width: 767px) {
  .ulife-super-menu {
    display: none;
  }
}

#nav-mobile-toggle-bar {
  display: none;
  background: transparent;
  border: none;
}
@media (max-width: 767px) {
  #nav-mobile-toggle-bar {
    display: block;
  }
}

#header-nav-mobile {
  position: fixed;
  top: 0;
  left: -1000%;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 50000;
  background: rgba(0, 0, 0, 0.5);
  transition: left 0.3s ease-in-out;
}
#header-nav-mobile.active {
  left: 0;
}
#header-nav-mobile > div {
  width: 70%;
  height: 100%;
  background-color: #FFFFFF;
  overflow-y: auto;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
#header-nav-mobile > div .main-menu-link {
  background-color: #F5F5F5;
  color: #aaa;
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 8px 12px;
  border-top: 1px solid #ccc;
}
#header-nav-mobile > div .child-level-0 button {
  display: none;
}
#header-nav-mobile > div button {
  background: transparent;
  border: none;
}
#header-nav-mobile > div .main-level-1 {
  background: #f2f3f4;
}
#header-nav-mobile > div .main-level-1 {
  display: block !important;
}
#header-nav-mobile > div .mobile-nav-header-container {
  padding: 12px;
}
#header-nav-mobile > div .mobile-nav-header-container img {
  width: 100px;
}
#header-nav-mobile > div .mobile-parent-menu a {
  color: var(--gray-1, #595757);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 5px 12px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#header-nav-mobile > div .mobile-parent-menu ul li div.active {
  background: #F8F8F8 !important;
}
#header-nav-mobile > div .level-1 > li > a {
  display: flex;
  padding: 5px 12px;
  justify-content: space-between;
  color: var(--gray-1, #595757);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#header-nav-mobile > div .level-2 {
  background: #F0F0F0;
  display: none;
}
#header-nav-mobile > div .level-2 .level-2-item {
  padding: 5px 12px;
}
#header-nav-mobile > div .level-2 .level-2-item a {
  padding: 0;
}
#header-nav-mobile > div .level-2 > li > a {
  display: flex;
  padding: 5px 12px;
  justify-content: space-between;
  color: var(--gray-1, #595757);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#header-nav-mobile > div .level-2 > li > ul > li > a {
  color: var(--gray-1, #595757);
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#header-nav-mobile > div .level-3 {
  background-color: #ecf0f1;
  display: none;
}
#header-nav-mobile > div .level-3 li {
  padding: 5px 0 !important;
}
#header-nav-mobile > div .level-5 {
  display: none;
  background-color: #F0F0F0;
}

.social-links-container {
  border-top: 1px solid #C0B9B5;
  padding: 12px;
}
.social-links-container a {
  font-size: 20px;
  color: #80746A;
}
.social-links-container a img {
  width: 35px;
}/*# sourceMappingURL=header.css.map */