@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap");
@font-face {
  font-family: "bahnschrift";
  src: url("../fonts/bahnschrift.ttf"); }
@font-face {
  font-family: "LucidaSansUnicode";
  src: url("../fonts/LucidaSansUnicode.ttf"); }
a {
  text-decoration: none; }

.en {
  font-family: "bahnschrift", sans-serif; }

.en-title {
  font-family: "LucidaSansUnicode", sans-serif; }

@font-face {
  font-family: "custom-sans-serif";
  src: local("Heiti TC"), local("Noto Sans CJK TC"), local("微軟正黑體"), local("Microsoft JhengHei"), local("PingFang"), local("STHeiti");
  unicode-range: U+4E00-9FFF; }
@font-face {
  font-family: "custom-sans-serif";
  src: local("bahnschrift"), local(Helvetica), local(Arial);
  unicode-range: U+00-024F; }
.custom-sans-serif {
  font-family: "custom-sans-serif"; }

body {
  font-family: "bahnschrift", 思源黑體 , 微軟正黑體 , 蘋方黑體 , 華康麗黑體 , Helvetica , Arial , sans-serif , serif;
  background-color: #f7f4ed;
  padding-top: 60px; }
  @media (min-width: 768px) {
    body {
      padding-top: 80px; } }

.container-tpl, .container-tpl2 {
  position: relative;
  width: 89.56521739130435%;
  margin: 0 auto; }
  .container-tpl > .inner, .container-tpl2 > .inner {
    position: relative;
    width: 96.09375%;
    margin: 0 auto; }

.container-main, .container-main2 {
  position: relative;
  width: 89.56521739130435%;
  margin: 0 auto; }
  .container-main > .inner, .container-main2 > .inner {
    position: relative;
    width: 100%;
    margin: 0 auto; }

@media (min-width: 576px) {
  .container-tpl, .container-tpl2 {
    width: 91.42857142857143%; }
    .container-tpl > .inner, .container-tpl2 > .inner {
      width: 96.09375%; }

  .container-main, .container-main2 {
    position: relative;
    width: 91.42857142857143%; }
    .container-main > .inner, .container-main2 > .inner {
      width: 96.09375%; } }
@media (min-width: 1400px) {
  .container-tpl {
    max-width: 1280px; }

  .container-main {
    max-width: 1280px; } }
@media (min-width: 1041.46341px) {
  .container-tpl2 {
    max-width: 952.19512px; }

  .container-main2 {
    max-width: 952.19512px; } }
.wrapper {
  position: relative;
  width: 100%; }

*,
*::before,
*::after {
  box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth; } }
.icon {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
  background-color: transparent; }

.icon.facebook {
  background-image: url("../images/icon/fb.svg"); }

.icon.facebook-w {
  background-image: url("../images/icon/fb-w.svg"); }

.icon.twitter {
  background-image: url("../images/icon/icon-twitter.svg"); }

.icon.instagram {
  background-image: url("../images/icon/ig.svg"); }

.icon.instagram-w {
  background-image: url("../images/icon/ig-w.svg"); }

.icon.email {
  background-image: url("../images/icon/email.svg"); }

.icon.email-w {
  background-image: url("../images/icon/email-w.svg"); }

.icon.arrow-top {
  background-image: url("../images/icon/icon-arrow-top.svg"); }

.icon.arrow-right {
  background-image: url("../images/icon/icon-arrow-right.svg"); }

.icon.arrow-bottom {
  background-image: url("../images/icon/icon-arrow-bottom.svg"); }

.icon.arrow-left {
  background-image: url("../images/icon/icon-arrow-left.svg"); }

.icon.close {
  background-image: url("../images/icon/icon-menu-close.svg"); }

.icon.sort {
  background-image: url("../images/icon/icon-sort.svg"); }

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 99;
  background: #f7f4ed; }
  @media (min-width: 768px) {
    .header {
      height: 80px; } }
  .header .container-tpl > .inner {
    height: 60px; }
    @media (min-width: 768px) {
      .header .container-tpl > .inner {
        height: 80px; } }

@media (min-width: 768px) {
  .logo {
    width: 70px;
    height: 46px; } }
.logo span {
  color: #595751;
  font-size: 16px;
  font-family: 'LucidaSansUnicode', sans-serif;
  letter-spacing: 0.25em; }

.menu {
  position: relative;
  display: none;
  background: #f7f4ed; }
  @media (min-width: 768px) {
    .menu {
      display: block; } }
  @media (max-width: 767px) {
    .menu {
      position: fixed;
      width: 100%;
      height: 60px;
      top: 60px;
      left: 0; }
      .menu::before {
        content: '';
        display: block;
        position: absolute;
        height: 1px;
        width: 100%;
        background: #aaa;
        width: 86.06658%;
        left: 0;
        right: 0;
        margin: 0 auto; } }
  .menu .inner {
    display: flex; }
    @media (max-width: 767px) {
      .menu .inner {
        position: absolute;
        width: 100%;
        height: 100%;
        align-items: center !important;
        justify-content: space-evenly !important; } }
    .menu .inner div {
      margin-left: 14px; }
      @media (max-width: 767px) {
        .menu .inner div {
          margin-left: 0; } }
      .menu .inner div a span {
        transition: color .2s ease-in-out;
        color: #595751;
        font-size: 13px;
        font-weight: 300; }
        @media (min-width: 768px) {
          .menu .inner div a span {
            font-size: 12px;
            font-weight: 300; } }
      .menu .inner div a:hover {
        text-decoration: none; }
        .menu .inner div a:hover span {
          color: #aaa; }

.nav-side {
  position: relative;
  width: 45px;
  height: 45px; }

.btn-menu {
  display: block;
  position: relative;
  width: 45px;
  height: 45px; }
  @media (min-width: 768px) {
    .btn-menu {
      display: none; } }
  .btn-menu span {
    position: absolute;
    display: block;
    width: 20px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1px;
    background-color: #1f2020;
    transition: all 0.15s ease-in-out; }
    .btn-menu span:nth-child(1) {
      top: -17px; }
    .btn-menu span:nth-child(2) {
      top: 0px; }
    .btn-menu span:nth-child(3) {
      top: 17px; }
  .btn-menu.active span:nth-child(1) {
    top: 0;
    transform: rotate(45deg); }
  .btn-menu.active span:nth-child(2) {
    top: 0px;
    right: -20px;
    opacity: 0; }
  .btn-menu.active span:nth-child(3) {
    top: 0;
    transform: rotate(-45deg); }
  @media (min-width: 768px) {
    .btn-menu:hover {
      cursor: pointer; }
      .btn-menu:hover span:nth-child(1) {
        top: 0;
        transform: rotate(45deg); }
      .btn-menu:hover span:nth-child(2) {
        top: 0px;
        right: -20px;
        opacity: 0; }
      .btn-menu:hover span:nth-child(3) {
        top: 0;
        transform: rotate(-45deg); } }

#footer {
  position: relative;
  color: #595751; }
  #footer .container-tpl .inner {
    padding: 3.5625rem 0; }
    @media (min-width: 768px) {
      #footer .container-tpl .inner {
        padding: 57px 0; } }
    #footer .container-tpl .inner::before {
      content: "";
      height: 1px;
      width: 100%;
      background: #aaa;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto; }
  #footer a {
    color: #595751; }
  #footer span {
    font-size: 13px; }
  #footer #back-top {
    opacity: 0.2;
    transition: opacity .2s ease-in-out; }
    #footer #back-top:hover {
      opacity: 1; }
  @media (min-width: 768px) {
    #footer .icon {
      margin-left: 5px; } }
  @media (max-width: 767px) {
    #footer .icon {
      margin-right: 5px; } }

.parts {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }

.pt-80 {
  padding-top: 80px; }

.pt-60 {
  padding-top: 60px; }

.pt-50 {
  padding-top: 50px; }

.pt-30 {
  padding-top: 30px; }

.pt-10 {
  padding-top: 10px; }

.pt-0 {
  padding-top: 0px; }

.pb-80 {
  padding-bottom: 80px; }

.pb-60 {
  padding-bottom: 60px; }

.pb-50 {
  padding-bottom: 50px; }

.pb-30 {
  padding-bottom: 30px; }

.pb-10 {
  padding-bottom: 10px; }

.pb-0 {
  padding-bottom: 0px; }

.mt-80 {
  margin-top: 80px; }

.mt-60 {
  margin-top: 60px; }

.mt-50 {
  margin-top: 50px; }

.mt-30 {
  margin-top: 30px; }

.mt-10 {
  margin-top: 10px; }

.mt-0 {
  margin-top: 0px; }

.mb-80 {
  margin-bottom: 80px; }

.mb-60 {
  margin-bottom: 60px; }

.mb-50 {
  margin-bottom: 50px; }

.mb-30 {
  margin-bottom: 30px; }

.mb-10 {
  margin-bottom: 10px; }

.mb-0 {
  margin-bottom: 0px; }

.top-line::before {
  content: "";
  height: 1px;
  width: 100%;
  background: #aaa;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto; }

.bottom-line::after {
  content: "";
  height: 1px;
  width: 100%;
  background: #aaa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto; }

@keyframes backgroundScroll {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-5%);
    -moz-transform: translateX(-5%);
    transform: translateX(-5%); }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0); } }
.slideshow-backgroundScroll .landing-item .landing-item-bg {
  animation: backgroundScroll 30s linear infinite; }

@media (max-width: 767px) {
  .slideshow-backgroundScroll .landing-item .landing-item-bg {
    animation: backgroundScroll 20s linear infinite; } }
.lh-2d2 {
  line-height: 2.2em !important; }