.cento-header .logo,
.cento-header .logo a,
.wsite-menu-default a,
.wsite-form-label,
.wsite-form-input,
.wsite-button .wsite-button-inner,
.wsite-editor .wsite-button .wsite-button-inner,
body,
input,
textarea,
button {
  font-family: "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif !important;
}

h2,
.banner-wrap .banner h2 {
  font-family: Georgia, "Times New Roman", "Noto Serif TC", serif !important;
}

.desktop-nav .wsite-menu-item-wrap,
.desktop-nav .wsite-menu-subitem-wrap {
  position: relative;
}

.desktop-nav .wsite-menu-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: none;
  min-width: 220px;
  padding-top: 8px;
}

.desktop-nav .wsite-menu-item-wrap:hover > .wsite-menu-wrap,
.desktop-nav .wsite-menu-subitem-wrap:hover > .wsite-menu-wrap {
  display: block !important;
}

.desktop-nav .wsite-menu {
  display: block;
  padding: 8px 0;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.desktop-nav .wsite-menu li {
  display: block;
  padding: 0;
}

.desktop-nav .wsite-menu a {
  padding: 8px 16px;
  text-align: left;
  white-space: nowrap;
}

.desktop-nav .wsite-menu .wsite-menu-wrap {
  top: 0;
  left: 100%;
  padding-top: 0;
  padding-left: 8px;
}

.wsite-youtube-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #111;
}

.wsite-youtube-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cf-form-note {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 4px solid #333333;
  background: #f7f7f7;
  font-size: 15px;
  line-height: 1.6;
}

.cf-form-status {
  display: none;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #eef7ef;
  border-left: 4px solid #4a8f56;
  color: #23462b;
}

body.form-success .cf-form-status {
  display: block;
}

.cf-form-status-error {
  display: none;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #fbeeee;
  border-left: 4px solid #b04a4a;
  color: #5c2323;
}

body.form-error .cf-form-status-error {
  display: block;
}

.cf-form-actions {
  margin-top: 14px;
}

.cf-form-actions button {
  cursor: pointer;
}

.cf-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.local-slideshow {
  margin: 20px 0;
}

.local-slideshow-frame {
  position: relative;
  background: #111;
  overflow: hidden;
}

.local-slideshow-link,
.local-slideshow-link:hover {
  display: block;
  color: inherit;
}

.local-slideshow-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  margin: 0 auto;
  object-fit: contain;
}

.local-slideshow-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.local-slideshow-button:hover {
  background: rgba(0, 0, 0, 0.75);
}

.local-slideshow-button.prev {
  left: 12px;
}

.local-slideshow-button.next {
  right: 12px;
}

.local-slideshow-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 0;
}

.local-slideshow-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  opacity: 0.7;
}

.local-slideshow-thumb.active {
  border-color: #333333;
  opacity: 1;
}

.local-slideshow-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.88);
}

.lightbox-modal.open {
  display: flex;
}

.lightbox-stage {
  position: relative;
  width: min(1200px, 100%);
  max-height: 100%;
  text-align: center;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 80px);
  margin: 0 auto;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  cursor: pointer;
}

.lightbox-close {
  top: -8px;
  right: -8px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 28px;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
}

.lightbox-nav.prev {
  left: 12px;
}

.lightbox-nav.next {
  right: 12px;
}

.lightbox-caption {
  margin-top: 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .desktop-nav .wsite-menu-wrap {
    position: static;
    min-width: 0;
    padding-top: 0;
    box-shadow: none;
  }

  .desktop-nav .wsite-menu-item-wrap:hover > .wsite-menu-wrap,
  .desktop-nav .wsite-menu-subitem-wrap:hover > .wsite-menu-wrap {
    display: none !important;
  }

  .local-slideshow-thumb {
    width: 62px;
    height: 46px;
  }

  .lightbox-modal {
    padding: 12px;
  }
}

/*
  Base Weebly page-builder rules restored from the original site's
  cdn2.editmysite.com/css/sites.css, which was not carried over during
  the static export. Without these, .wsite-section-wrap / .wsite-multicol
  layouts (used throughout every page) lose their table-based sizing and
  their content overlaps.
*/
.wsite-section-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.wsite-section-wrap .wsite-section {
  vertical-align: middle;
}

/*
  Critical: as a table-cell the per-section inline height (e.g. 280px)
  behaves as a MINIMUM and the section grows to fit tall content like the
  film poster. As a plain block that height is fixed and content spills
  over the following section.
*/
.wsite-section {
  display: table-cell;
  width: 100%;
  height: 230px;
}

.wsite-header-section {
  text-align: center;
}

.wsite-section-wrap:only-child .wsite-body-section {
  height: 400px;
  vertical-align: top;
}

.wsite-body-section {
  height: 400px;
  vertical-align: top;
}

.wsite-multicol {
  direction: ltr;
}

.wsite-multicol-table {
  border-collapse: collapse;
  width: 100%;
}

.wsite-multicol-col {
  padding: 0;
  box-sizing: border-box;
}

.wsite-image {
  position: relative;
}

.wsite-image-border-none a img {
  border-width: 0 !important;
}

.wsite-not-footer {
  text-align: left;
}

.wsite-content-title,
.paragraph {
  word-wrap: break-word;
}

.wsite-youtube-wrapper {
  max-width: 100%;
}

.wsite-youtube-size-medium {
  width: 401px;
}

.wsite-youtube-size-large {
  width: 501px;
}

.wsite-youtube-size-xl {
  width: 650px;
}

.wsite-youtube-size-hd {
  width: 853px;
}

.wsite-youtube-align-center {
  margin: 0 auto;
}

.form-required {
  display: inline;
  color: #ff2825 !important;
}

.wsite-form-fields-required-label {
  font-weight: normal;
  font-style: italic;
}

/* 讓表單欄位填滿欄寬，取代 Weebly 原本 370px 的窄版上限 */
.wsite-form-field .wsite-form-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cccccc;
  border-radius: 1px;
  background: #fbfbfb;
  font-size: 16px;
  line-height: 1.5;
}

.wsite-form-field .wsite-form-input:focus {
  outline: none;
  border-color: #333333;
  background: #ffffff;
}

.wsite-form-field {
  margin-bottom: 16px !important;
}

.wsite-form-label {
  display: block;
  margin-bottom: 6px;
}

.galleryImageBorder,
a .galleryImageBorder {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.13);
  background-color: rgba(206, 208, 210, 0.1);
}

a .galleryImageBorder {
  background-color: transparent;
}

/*
  main_style.css forces the site title to display:block, which makes it
  a full-width box that hugs the left edge instead of respecting the
  .cento-header .logo { text-align: center } rule (text-align only
  centers inline content, not block-level boxes).
*/
.cento-header .logo a,
.cento-header .logo #wsite-title {
  display: inline-block;
}

/*
  Base button box model from Weebly sites.css. The theme only styles
  colors/padding on .wsite-button-inner; without inline-block boxes the
  inner <span> stays inline and its background paints per line box,
  turning multi-line buttons into a cross shape instead of a rectangle.
*/
.wsite-button {
  display: inline-block;
  text-decoration: none !important;
  cursor: pointer;
}

.wsite-button .wsite-button-inner {
  display: inline-block;
}

/* hr.styled-hr had no rule at all, so it rendered as an unstyled
   browser-default 3D inset line instead of the intended subtle divider. */
hr.styled-hr {
  height: 1px;
  margin: 0 auto;
  border: 0;
  background-color: rgba(0, 0, 0, 0.13);
}