:root {
  --mainColor: #947728;
  --textColor: #53575A;
  --bg-gray: #E6E6E6;
  --bg-light-gray: #F5F5F5;
  --max-width: 1366px;
  --menuWidth: 300px;
  --max-info-width: calc(var(--max-width) - var(--menuWidth));
}

@media (prefers-color-scheme: dark) {
  circle {
    fill: black;
    stroke: yellow;
  }
}

* {
  font-family: 'Crimson Text', 'Noto Serif TC', serif;
  /* font-family: 'Noto Sans TC', serif; */
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 2rem;
  box-sizing: border-box;
  color: var(--textColor);
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-light-gray);
}

a {
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(200, 200, 200, 0.3);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(189, 168, 143, 0.8);
}

footer > div  {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* footer */
footer {
  background: #FFF;
}

footer > div {
  padding: 3em 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

footer .footerLink a {
  width: 2em;
  height: 2em;
  display: inline-block;
  margin: 0 1em;
}

footer a, footer p span {
  font-family: 'Noto Sans TC';
}

footer .footerLink a img {
  width: 100%;
}

footer .contactInfo {
  display: flex;
  margin: 1em 0;
}

footer .contactInfo p {
  margin: 0 1em;
}

footer .contactInfo p img {
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
}

.rights {
  font-size: 14px;
  letter-spacing: 0.85px;
  font-weight: 400;
  margin: 0;
}


/* menu */
#menu {
  display: flex;
  padding: 0 10%;
  z-index: 3;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

ul {
  list-style-type: none;
}

#menu > ul {
  margin: 0;
  padding: 0;
  width: 8em;
}

#menu li {
  margin: 0.3em 0;
}

#menu > ul > li > ul {
  padding-left: 1em;
  display: none;
}

#menu > ul > li:hover > ul, #menu > ul > .isPage > ul {
  display: block;
}

#menu > ul > li > a {
  position: relative;
  width: 100%;
  /*border-style: solid;*/
}

#menu > ul > li:hover > a > span , .isPage> a > span, .thisPage, .dropdown-content > li:hover > a {
  color: var(--mainColor);
  
}

#menu > ul > li:hover > a:after, .isPage > a:after {
  content: '';
  border-bottom: solid 1px var(--mainColor);
  display: block;
  position: absolute;
  top: 1.5em;
  width: 100%;
  animation: ad_width .3s linear forwards; 
}

#menu img {
  width: 4em;
  margin: 30px auto;
}

@keyframes ad_width {
  from { 
    width: 0;
  }

  to { 
    width: 100%; 
  }
}

#menu div .dropdown-content a {
  background: var(--bg-light-white-60);
  color: var(--bg-gray);
  padding: 0.5rem 1rem;
}

[data-goto] {
  cursor: pointer;
}

/* container */
/* .container {
  padding-top: 4.375rem;
} */