@charset "UTF-8";

/*
 * Front-end styles for Bootstrap 5.
 *
 * Bootstrap itself is intentionally not bundled into this file. Load
 * bootstrap-5.3.8.min.css before this stylesheet.
 */

html,
body {
  width: 100%;
  height: 100%;
  background-image: url("../img/background/bgc_img.png");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}

#pnlMainBody {
  min-height: 60%;
  margin-top: 50px;
}

#pnlMainBody section {
  min-height: 65%;
  margin-bottom: 150px;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
}

header img {
  border-radius: 4px;
}

#pnlSection .card-body,
#pnlSection .panel-body {
  min-height: 60%;
}

.pnlArticles {
  min-height: 45%;
}

.items {
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

#pnlInformation {
  color: #000;
}

#pnlInformation h3 {
  padding: 5px;
  color: silver;
  background-color: #323232;
}

#pnlInformation .pnl-info-window aside:nth-of-type(1) {
  margin: 5px;
}

#pnlCopyRight {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  color: #fff;
  background-color: #5a692e;
}

#pnlCopyRight .container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
}

.img-full {
  width: 100%;
}

.img-item {
  width: 50px;
  padding-right: 10px;
  margin-bottom: 5px;
}

.pnl-image-link {
  padding-top: 5px;
}

.card-header h3,
.panel-heading h3 {
  font-weight: 800;
}

/* Bootstrap 5 navbar theme used by _partial/guest/nav.php. */
.navbar-home {
  background-color: #d29034;
  border-color: #d29034;
}

.navbar-home .navbar-brand,
.navbar-home .navbar-nav .nav-link,
.navbar-home .navbar-nav > li > a {
  color: #fff;
}

.navbar-home .navbar-nav .nav-link,
.navbar-home .navbar-nav > li > a {
  display: block;
  padding: 15px 12px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}

.navbar-home .navbar-brand:hover,
.navbar-home .navbar-brand:focus,
.navbar-home .navbar-nav .nav-link:hover,
.navbar-home .navbar-nav .nav-link:focus,
.navbar-home .navbar-nav > li > a:hover,
.navbar-home .navbar-nav > li > a:focus {
  color: #5a692e;
  background-color: transparent;
}

.navbar-home .navbar-nav .nav-link.active,
.navbar-home .navbar-nav .nav-link[aria-current="page"],
.navbar-home .navbar-nav > li.active > a {
  color: #5a692e;
  background-color: transparent;
}

.navbar-home .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-home .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-home .navbar-toggler-icon {
  filter: invert(1);
}

/* Bootstrap 3 typography and control dimensions used by guest partials. */
.btn {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.form-control {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
}

.form-group {
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
}

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border 0.2s ease-in-out;
}

.thumbnail > img,
.thumbnail a > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}

.hide,
.hidden {
  display: none !important;
}

/*
 * Keep the Bootstrap 3 layout dimensions while guest templates are migrated.
 * Bootstrap 3 used 750/970/1170px containers and activated col-md at 992px;
 * Bootstrap 5 uses different container widths and activates col-md at 768px.
 */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  --bs-gutter-x: 30px;
}

.row {
  --bs-gutter-x: 30px;
}

@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1170px;
  }
}

/* Undo Bootstrap 5's early md columns between 768px and 991px. */
@media (min-width: 768px) and (max-width: 991.98px) {
  [class*="col-md-"] {
    width: 100%;
  }

  .col-xs-6[class*="col-md-"] {
    width: 50%;
  }
}

/*
 * Temporary Bootstrap 3 compatibility styles. Remove these after the guest
 * templates have been migrated from panels and the old responsive helpers.
 */
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-default {
  border-color: #ddd;
}

.panel-body {
  padding: 15px;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.col-xs-6 {
  flex: 0 0 auto;
  width: 50%;
}

@media (max-width: 767.98px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-home .navbar-collapse {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .navbar-home .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
  }

  .navbar-home .navbar-nav > li > a {
    padding: 0.75rem 1rem;
  }
}