body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url("../images/bg.jpg") 0 0/contain;
  font-family: "S THeiti TC", "Helvetica Neue", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
header {
  background: url("../images/header/bg4.png") no-repeat calc(50% + 549px) 40px, linear-gradient(to right, #8ec0e4 0, #8ec0e4 calc(50% - 549px), transparent calc(50% - 549px), transparent calc(50% + 549px)), url("../images/header/bg2.png") repeat-x 0 0, rgba(197,198,182,0.412);
}
header.lock {
  background: linear-gradient(to right, #8ec0e4 0, #8ec0e4 calc(50% - 549px), transparent calc(50% - 549px), transparent calc(50% + 549px)), url("../images/header/bg2.png") repeat-x 0 0;
  opacity: 0.95;
}
header .header-bg {
  height: 227px;
  background: url("../images/header/bg.png") no-repeat 0 0/contain;
}
#navbar {
  max-height: calc(100dvh - 64px);
  overflow: auto;
}
#navbar > li,
#navbar .menu > li {
  list-style: none;
  border-bottom: solid 1px #bbb;
}
#navbar > li a,
#navbar .menu > li > a {
  padding: 1rem 1.75rem;
}
#navbar a {
  display: flex;
  align-items: center;
}
.collapse-toggle .menu-open {
  display: none;
}
.collapse-toggle.collapsed .menu-open {
  display: inline;
}
.collapse-toggle.collapsed .menu-close {
  display: none;
}
.menu li {
  position: relative;
  border-bottom: solid 1px #bbb;
}
.menu li:hover > .submenu {
  display: block;
}
.submenu {
  display: none;
  position: relative;
  top: 100%;
  left: 0;
  background-color: rgba(255,255,255,0.871);
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.submenu > li:hover {
  background: #96c09a;
}
.submenu > li:hover > a {
  color: #f7fafc;
}
.submenu > li a span:first-child {
  padding: 1rem 0.5rem 1rem 2.75rem;
}
.has-submenu .submenu > li {
  padding: 1rem 3.75rem;
}
.bg-trapezoid {
  position: relative;
  height: 2rem;
  background: #6e7783;
  margin-inline: 2rem;
  clip-path: polygon(0 100%, 13px 0, calc(100% - 13px) 0, 100% 100%);
}
.bg-trapezoid:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2b2b1e;
  clip-path: polygon(calc(100% - 26px) 100%, calc(100% - 13px) 0, 100% 100%);
}
.modal-backdrop {
  --bs-backdrop-opacity: 0.9;
}
.modal-header .btn-close {
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
}
@media (min-width: 1024px) {
  #navbar {
    display: flex;
    overflow: unset;
  }
  #navbar > li,
  #navbar .menu > li {
    height: 100%;
    border-bottom: 0;
  }
  #navbar > li a,
  #navbar .menu > li > a {
    padding: 1.25rem 1rem 6px;
  }
  #navbar > li a:hover,
  #navbar .menu > li > a:hover {
    border-bottom: solid 5px #8ec0e4;
  }
  .menu li {
    border-bottom: 0;
  }
  .submenu {
    position: absolute;
  }
  .submenu > li {
    padding: 0 1rem;
  }
  .submenu > li a span:first-child {
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-bottom: solid 1px #d4d4d4;
  }
  .has-submenu .submenu {
    top: 0;
  }
  .has-submenu .submenu > li {
    padding: 0.5rem 1rem;
  }
  .has-submenu .submenu.submenu-right {
    left: 100%;
  }
  .has-submenu .submenu.submenu-left {
    left: unset;
    right: 100%;
  }
  #theme .swiper {
    width: calc(100% - 220px);
  }
  #snapshot {
    background: url("../images/index/bg3.png") no-repeat top right, url("../images/index/bg2.jpg") no-repeat center/cover;
  }
}