/* 字體 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
@font-face {
  font-family: "Times New Roman";
  src: url(../../fonts/times_1.ttf);
}

@font-face {
  font-family: "Noto Sans TC";
  src: url(../../fonts/Noto/NotoSansTC-Regular.otf);
}

@font-face {
  font-family: "NotoSerifTC-Bold";
  src: url(../../fonts/Noto/NotoSerifTC-Bold.otf);
}

@font-face {
  font-family: "NotoSerifTC-SemiBold";
  src: url(../../fonts/Noto/NotoSerifTC-SemiBold.otf);
}

.pointer {
  cursor: pointer;
}
/*svg 在IE兼容問題*/
.ie9 img[src$=".svg"] {
  width: 100%;
}

/*============nav===============*/

.logo {
  width: 31%;
  position: fixed;
  display: block;
  top: 2%;
  left: 5%;
  font-size: 1vw;
  letter-spacing: 0.2vw;
  z-index: 98;
}
.bar {
  position: fixed;
  display: block;
  width: 7.3%;
  height: auto;
  top: 2.8%;
  right: 5%;
  z-index: 999;
}

#header {
  position: fixed;
  display: block;
  top: 0;
  left: 0px;
  z-index: 99;
  width: 100%;
  height: 100%;
  color: #534740;
  box-sizing: border-box;
  font-family: "NotoSerifTC-SemiBold";
  background-color: rgba(247, 246, 242, 0.95);
  font-size: 4.15vw;
  letter-spacing: 0.5vw;
}

.header-area {
  position: fixed;
  display: block;
  width: 100%;
  height: 15vw;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(247, 246, 242, 0.95);
}

nav {
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

nav ul {
  height: auto;
  padding: 0;
  margin: 0;
}

nav li {
  width: 100%;
  height: auto;
  line-height: 17vw;
  vertical-align: middle;
  display: block;
  list-style-type: none;
  position: relative;
  text-align: center;
}

nav li::after {
  content: "";
  width: 7vw;
  height: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background-color: #534740;
}

nav li:first-child::before {
  content: "";
  width: 7vw;
  height: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  background-color: #534740;
}

nav li > a {
  color: #534740;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  position: relative;
}

/* nav li > a:hover,
.sub a:hover {
  color: #b88f43;
} */

.active {
  color: #b88f43!important;
}

.sub {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  text-align: center;
  margin-top: -3vw;
  padding-bottom: 5vw;
}

.sub-li {
  width: fit-content;
  height: 100%;
  display: block;
}

#nav-li1 {
  margin: 0 auto;
}

#nav-li4 {
  margin: 0 auto;
}

.sub a {
  width: 100%;
  height: 10vw;
  line-height: 10vw;
  color: #534740;
  display: block;
}