html { position: relative; width: 100%; height: 100%; }

body { font-family: "Microsoft JhengHei", Arial, Helvetica, sans-serif; line-height: 2; color: #333; padding-bottom: 0px; width: 100%; height: 100%; }

a:focus-visible, a:focus-visible img, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .navbar-toggler:focus-visible, .form-control:focus, .form-select:focus, .page-link:focus, .nav-link:focus-visible, .dropdown-item:focus-visible { outline: 2px solid #ffffff !important; box-shadow: 0 0 0 6px #000 !important; }

.header { border-bottom: none; }

.index-header { background-color: #524932; min-height: 10px; color: #FFF; }

.index-banner { width: 100%; height: calc(100% - 10px); max-width: 100%; max-height: calc(100% - 10px); background-image: url(../images/indexBG.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; text-align: center; }
.index-banner > .container { height: 100%; }
.index-banner > .container > .row { height: 100%; align-items: center; }
.index-banner .index-block { height: 40%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.index-banner .index-block .index-icon { width: auto; height: 70%; position: relative; z-index: 1; }
.index-banner .index-block .discribe { padding: 5px 5px; margin: 5px auto 0 auto; border-left: 5px solid #999; line-height: 1.5; font-size: .75rem; color: #212529; text-shadow: 1px 1px rgba(255, 255, 255, 0.5); display: inline-block; text-align: left; filter: drop-shadow(0 0 15px #FFF) drop-shadow(0 0 30px #FFF); }
@media screen and (min-width: 1200px) { .index-banner .index-block .discribe { font-size: .9rem; } }
.index-banner .index-block.WVS { transform: translateY(15%); }
.index-banner .index-block.PS { transform: translateY(15%); }
.index-banner .index-banner-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.index-banner .index-banner-content h1 { margin: 0; padding: 0; display: block; height: auto; position: relative; }
.index-banner .index-banner-content h1 .index-logo { max-width: 100%; max-height: 100%; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.75)); }
.index-banner .index-banner-content h1 .index-enter { text-indent: -9999px; overflow: hidden; width: 30.753968254%; height: 12.4855491329%; position: absolute; top: 76%; left: 50%; transform: translateX(-50%); background-image: url("../images/index-enter-a.png"); background-size: cover; }
.index-banner .index-banner-content h1 .index-enter:hover { background-image: url("../images/index-enter-hover.png"); }
@media screen and (min-width: 992px) { .index-banner .index-banner-content { width: auto; height: 60%; display: inline-block; margin: auto; }
  .index-banner .index-banner-content h1 { height: 100%; } }

.footer { position: relative; box-shadow: none; }