@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Nunito+Sans:wght@400;500;700;800&display=swap");
/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2023 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: Grnet $
 * $Date: 2023/07 $ 
 * */
:root {
  --radius: 10px;
  --radius-page: 20px;
  --gap: 25px;
  --gap-item: 15px;
  --gap-vertical: 110px;
  --w-container: calc(1450px + var(--gap) * 2);
  --w-container-lg: calc(1750px + var(--gap) * 2);
  --w-container-sm: calc(1260px + var(--gap) * 2);
  --h-header: 98px;
  --h-topbar: 0px;
  --h-input: 60px;
  --h-btn: 50px;
  --h-pager: 36px;
  --plyr-control-spacing: 10px;
  --plyr-color-main: rgb(86 138 229);
  --fw-normal: 400;
  --fw-middle: 400;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fz-def: 16px;
  --fz-menu: 1.125rem;
  --fz-subhead: 2.875rem;
  --fz-subhead-lg: 3.125rem;
  --fz-listname: 1.5rem;
  --fz-listname-lg: 1.625rem;
  --fz-listname-sm: 1.375rem;
  --fz-brief: 1.125rem;
  --fz-input: 1.0625rem;
  --fz-btn: 0.9375rem;
  --fz-h1: 1.875rem;
  --fz-h2: 1.625rem;
  --fz-h3: 1.5rem;
  --fz-h4: 1.375rem;
  --fz-h5: 1.25rem;
  --fz-h6: 1.125rem;
}
:root .is-fixed-header .header {
  --h-header: 98px;
}
:root body.is-has-topbar {
  --h-topbar: 50px;
}
:root .g-btn-round.lg, :root .g-btn-cube.lg {
  --h-btn: 60px;
}

@media (max-width: 1499px) {
  :root {
    --gap-vertical: 80px;
    --h-input: 50px;
    --h-btn: 46px;
    --fz-menu: 1.0625rem;
  }
  :root .g-btn-round.lg, :root .g-btn-cube.lg {
    --h-btn: 50px;
  }
}
@media (max-width: 1299px) {
  :root {
    --gap-vertical: 60px;
    --h-header: 75px;
    --h-topbar: 0px;
    --fz-menu: 1rem;
    --fz-brief: 1.0625rem;
    --fz-subhead: 2rem;
    --fz-subhead-lg: 2.875rem;
    --fz-listname: 1.375rem;
    --fz-listname-lg: 1.5rem;
    --fz-listname-sm: 1.25rem;
  }
  :root .is-fixed-header .header {
    --h-header: 75px;
  }
  :root body.is-has-topbar {
    --h-topbar: 32px;
  }
}
@media (max-width: 991px) {
  :root {
    --fw-bold: 500;
  }
}
@media (max-width: 767px) {
  :root {
    --gap-vertical: 40px;
    --h-header: 60px;
    --h-input: 46px;
    --h-btn: 46px;
    --radius-page: 15px;
    --radius: 6px;
    --fz-subhead: 1.5rem;
    --fz-subhead-lg: 1.875rem;
    --fz-listname: 1.25rem;
    --fz-listname-lg: 1.4125rem;
    --fz-listname-sm: 1.1875rem;
    --fz-brief: 1rem;
    --fz-input: 1rem;
  }
  :root .is-fixed-header .header {
    --h-header: 60px;
  }
  :root .g-btn-round.lg, :root .g-btn-cube.lg {
    --h-btn: 46px;
  }
}
/**!
 * * 保留BS v3隱藏/顯示的樣式 https://getbootstrap.com/docs/3.4/customize/
 * * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * * Copyright 2011-2019 Twitter, Inc.
 * * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/**! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
img {
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

[role=button] {
  cursor: pointer;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.hidden {
  display: none !important;
}

.affix {
  position: fixed;
}

@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block,
.visible-print,
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table !important;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1299px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table !important;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1299px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1299px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1299px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1300px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table !important;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1300px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1300px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1300px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1299px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1300px) {
  .hidden-lg {
    display: none !important;
  }
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table !important;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.disabled,
.disabled:hover {
  cursor: not-allowed;
}

/*
 * Reset
 */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

button,
button:visited,
button:hover,
button:focus,
button:active {
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

a[accesskey] {
  color: transparent !important;
  position: absolute !important;
  top: 0;
  left: 0;
  font-size: 0;
}

img,
a img {
  border: none;
  max-width: 100%;
  height: auto !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

img,
input[type=image],
video,
embed,
iframe,
marquee,
object,
table {
  aspect-ratio: attr(width)/attr(height);
}

video, embed, iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

section,
article,
aside,
footer,
header,
nav,
main {
  display: block;
}

p {
  line-height: inherit;
}

ol.reset,
ul.reset,
li.reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

label {
  font-weight: inherit;
}

input,
button,
textarea,
select,
optgroup,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
  border-radius: 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

input:not([type=radio]):not([type=checkbox]),
textarea,
select,
input[type=text] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

select::-ms-expand {
  display: none;
}

[type=date].js-datepicker {
  background-image: none;
}

input:not([type=button]),
input:not([type=submit]),
input:not([type=reset]) {
  font-size: 16px !important;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
  height: 0.625em;
  width: 0.625em;
  margin-right: -8px;
  margin-left: 3px;
  opacity: 0;
  pointer-events: none;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23888' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z' /%3E%3C/svg%3E");
}

input[type=search]:focus::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

\::-webkit-input-placeholder {
  color: #888;
  font-size: 16px;
}

\::-moz-placeholder {
  color: #888;
  font-size: 16px;
}

\:-ms-input-placeholder,
:-moz-placeholder {
  color: #888;
  font-size: 16px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: inherit;
}

::-moz-selection {
  background-color: rgba(195, 0, 110, 0.9);
  color: #fff;
}

::selection {
  background-color: rgba(195, 0, 110, 0.9);
  color: #fff;
}

::-moz-selection {
  background-color: rgba(195, 0, 110, 0.9);
  color: #fff;
}

hr {
  display: block;
  background: none;
  height: 1px;
  width: 100%;
  margin: var(--gap) auto;
  border: none;
  border-top: 1px solid #d2d2d2;
}

@media (max-width: 639px) {
  hr {
    margin: var(--gap) auto;
  }
}
.container {
  width: 100%;
  max-width: var(--w-container);
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gap);
  padding-right: var(--gap);
}
.container.sm {
  max-width: var(--w-container-sm);
}
.container.xs {
  max-width: var(--w-container-xs);
}

.p-mainwrap {
  position: relative;
  z-index: 10;
  min-height: 40vh;
  padding-bottom: calc(var(--gap-vertical) * 0.4);
  padding-top: calc(var(--gap-vertical) * 0.6);
  background: url(../images/page_bg_top.png) no-repeat right 0, url(../images/page_bg_bottom.png) no-repeat right max(250vh, 100%);
  background-size: max(100%, 1200px) auto;
  background-attachment: auto, fixed;
  background-color: #f5f5f5;
}
.p-mainwrap.no-p-top {
  padding-top: 0;
}
.p-mainwrap.no-p-bottom {
  padding-bottom: 0;
}
.p-mainwrap.is-has-article {
  padding-bottom: 0;
}
.p-mainwrap > .container {
  z-index: 10;
}

@media (max-width: 767px) {
  .p-mainwrap {
    padding-top: var(--gap);
    padding-bottom: 2px;
  }
  .p-mainwrap .p-innerwrap {
    margin-top: calc(var(--gap) * -1);
  }
}
.p-innerwrap {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-page);
  background-color: #fff;
  padding: calc(var(--gap-vertical) * 0.5) calc(var(--gap-vertical) * 0.8) calc(var(--gap-vertical) * 0.8);
  font-size: var(--fz-brief);
}

@media (max-width: 767px) {
  .p-innerwrap {
    margin-left: calc(var(--gap) * -1);
    margin-right: calc(var(--gap) * -1);
    padding: var(--gap);
  }
}
.p-memberwrap {
  padding-top: max(var(--gap), var(--gap-vertical) * 0.4);
  padding-bottom: max(var(--gap), var(--gap-vertical) * 0.4);
}
.p-memberwrap.no-p-top {
  padding-top: 0;
}
.p-memberwrap.no-p-bottom {
  padding-bottom: 0;
}

.wrap-half {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  position: relative;
}

.wrap-half-left {
  width: 540px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 540px;
          flex: 0 0 540px;
  z-index: 25;
}

.wrap-half-right {
  width: calc(100% - 540px - var(--h-btn));
  -webkit-box-flex: 1;
      -ms-flex: 1 0 calc(100% - 540px - var(--h-btn));
          flex: 1 0 calc(100% - 540px - var(--h-btn));
  margin-left: var(--h-btn);
}

@media (max-width: 1299px) {
  .wrap-half-left {
    width: 340px;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 340px;
            flex: 1 0 340px;
  }
  .wrap-half-right {
    width: calc(100% - 340px - var(--h-btn));
    -webkit-box-flex: 1;
        -ms-flex: 1 0 calc(100% - 340px - var(--h-btn));
            flex: 1 0 calc(100% - 340px - var(--h-btn));
  }
}
@media (min-width: 992px) {
  .wrap-half-left {
    position: sticky;
    top: var(--h-header);
  }
}
@media (max-width: 991px) {
  .wrap-half {
    display: block;
  }
  .wrap-half-left {
    width: 100%;
    margin: 0 auto 20px;
  }
  .wrap-half-right {
    width: 100%;
    margin-left: auto;
  }
}
/*
 * 按鈕
 */
.btn-wrap {
  text-align: center;
  margin: var(--gap) auto;
}

@media (max-width: 767px) {
  .form-fieldset + .btn-wrap {
    text-align: center !important;
  }
}
@media (max-width: 579px) {
  .form-fieldset + .btn-wrap .g-btn-cube {
    width: 100%;
  }
}
.g-btn-round {
  white-space: nowrap;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  color: #fff;
  background-color: transparent;
  padding: 3px 20px;
  position: relative;
  overflow: hidden;
  -webkit-transition: background-color 0.25s, color 0.25s;
  transition: background-color 0.25s, color 0.25s;
}
.g-btn-round > span {
  position: relative;
}
.g-btn-round::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: #fff;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
}
.g-btn-round:hover, .g-btn-round:active {
  color: #568ae5;
}
.g-btn-round:hover::before, .g-btn-round:active::before {
  -webkit-transform: scale(1.04);
      -ms-transform: scale(1.04);
          transform: scale(1.04);
}

.g-btn-cube {
  position: relative;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  min-width: 230px;
  height: var(--h-btn);
  line-height: var(--h-btn);
  white-space: nowrap;
  border-radius: 5px;
  border: none;
  padding: 0 25px;
  background-color: #0069df;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: #fff;
  overflow: hidden;
  -webkit-transition: background-color 0.25s;
  transition: background-color 0.25s;
}
.g-btn-cube .eff {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: #ff3e41;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
}
.g-btn-cube.red {
  background-color: #ff3e41;
}
.g-btn-cube.red .eff {
  background-color: #ff585a;
}
.g-btn-cube.line {
  border: 1px solid #999;
  color: #333;
  background-color: #fff;
}
.g-btn-cube.line .eff {
  background-color: #888;
}
.g-btn-cube.gold {
  background-color: #c6a582;
}
.g-btn-cube.gold .eff {
  background-color: #ff3e41;
}
.g-btn-cube > span {
  position: relative;
  z-index: 5;
  display: inline-block;
  vertical-align: middle;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  overflow: hidden;
  margin-bottom: 0.2rem;
}
.g-btn-cube > span > span {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.g-btn-cube svg {
  width: 1.375rem;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

.pc .g-btn-cube:hover {
  color: #fff;
  border-color: #ff3e41;
}
.pc .g-btn-cube:hover.line {
  border: 1px solid #999;
}

/*
 * 入口頁
 */
#entrance {
  background-color: #f2d9b3;
  padding-top: 3vh;
  overflow-x: hidden;
  width: 100vw;
}
#entrance .header-logo {
  z-index: 500;
  position: absolute;
  top: min(60px, 6.25vh);
  left: max(3.5vw, var(--gap), (100vw - 1800px) * 0.5 + var(--gap));
}
#entrance .header-logo > * {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 5px;
}
#entrance .logo-img {
  margin: 0;
  padding: 0;
  width: 60px;
  -webkit-transition: width 0.35s;
  transition: width 0.35s;
  display: inline-block;
  vertical-align: middle;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#entrance .logo-img > * {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  font-size: 0;
  background: url("../images/logo.svg") no-repeat 0 0/100% auto;
  z-index: 0;
}
#entrance .logo-text {
  z-index: 15;
  font-size: 1rem;
  color: #2d2e42;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
}
#entrance .logo-text > span {
  white-space: nowrap;
  display: block;
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
}
#entrance .logo-text .zh {
  font-size: 1.25em;
  font-weight: 600;
}
#entrance .logo-text .en {
  color: #2d2e42;
  padding-left: 0.15em;
  margin-top: 3px;
}
#entrance > .container {
  z-index: 1;
  height: 100vh;
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.entrance__deco {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}
.entrance__deco > * {
  will-change: transform;
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
}
.entrance__deco .bg {
  z-index: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  height: max(250px, 83vh);
  width: 100%;
}
.entrance__deco .bg > div {
  aspect-ratio: 2000/900;
  width: 105%;
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 5%);
      -ms-transform: translate(-50%, 5%);
          transform: translate(-50%, 5%);
  background: url(../images/ent2025_bg.png) no-repeat center bottom/100% auto;
}
.entrance__deco .deco-tainan {
  margin: 0;
  padding: 0;
  width: 960px;
  display: block;
  max-width: max(400px, 33vw);
  position: absolute;
  z-index: 1;
  right: 4%;
  top: 9%;
}
.entrance__deco .deco-tainan > * {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 51.0416666667%;
  font-size: 0;
  background: url("../images/ent2025_tainan.png") no-repeat 0 0/100% auto;
  z-index: 0;
}
.entrance__deco .deco1 {
  margin: 0;
  padding: 0;
  width: 398px;
  display: block;
  max-width: max(140px, 15vw);
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 6vw;
}
.entrance__deco .deco1 > * {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 83.1658291457%;
  font-size: 0;
  background: url("../images/ent2025_deco1.png") no-repeat 0 0/100% auto;
  z-index: 0;
}
.entrance__deco .deco2 {
  margin: 0;
  padding: 0;
  width: 355px;
  display: block;
  max-width: max(90px, 13vw);
  position: absolute;
  z-index: 2;
  left: 15%;
  bottom: 4vw;
}
.entrance__deco .deco2 > * {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 78.3098591549%;
  font-size: 0;
  background: url("../images/ent2025_deco2.png") no-repeat 0 0/100% auto;
  z-index: 0;
}
.entrance__deco .deco3 {
  margin: 0;
  padding: 0;
  width: 388px;
  display: block;
  max-width: max(100px, 17vw);
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 5vw;
}
.entrance__deco .deco3 > * {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 52.5773195876%;
  font-size: 0;
  background: url("../images/ent2025_deco3.png") no-repeat 0 0/100% auto;
  z-index: 0;
}

.entrance__img {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 60%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.entrance__img img {
  max-width: max(420px, 25vw);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  -webkit-animation: ani_teeth 2s both infinite;
          animation: ani_teeth 2s both infinite;
  -webkit-filter: drop-shadow(0 0 35px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(0 0 35px rgba(0, 0, 0, 0.15));
}

.entrance__text {
  position: relative;
  max-width: max(31vw, 600px);
}
.entrance__text .subhead {
  color: #2d2e42;
  line-height: 1.0606;
  font-size: clamp(1.25rem, 2.08vw, 2.5rem);
  font-weight: 900;
  margin-bottom: max(30px, 5vh);
}
.entrance__text .subhead .text1 {
  display: block;
  font-size: clamp(2rem, 3.75vw, 4.5rem);
  margin-bottom: 0.6em;
}
.entrance__text .subhead .text1 strong {
  display: block;
}
.entrance__text .subhead .text2 {
  display: block;
}
.entrance__text .subhead .text2 strong {
  display: block;
}
.entrance__text .info {
  display: block;
  font-weight: 500;
  color: #bc036a;
  font-size: clamp(1.125rem, 1.14vw, 1.25rem);
  line-height: 1.4;
}
.entrance__text .info > span {
  display: block;
}
.entrance__text .info small {
  font-size: 0.5833em;
  font-weight: 900;
}
.entrance__text .btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.entrance__text .btn-wrap > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.entrance__text .g-btn-cube {
  min-width: auto;
  background-color: #bc036a;
}
.entrance__text .g-btn-cube .eff {
  background-color: #da0982;
}
.entrance__text .g-btn-cube:hover {
  color: #fff;
}

@-webkit-keyframes ani_teeth {
  0%, 100% {
    margin-top: 0;
  }
  50% {
    margin-top: -15px;
  }
}

@keyframes ani_teeth {
  0%, 100% {
    margin-top: 0;
  }
  50% {
    margin-top: -15px;
  }
}
@media (min-width: 992px) and (min-height: 500px) {
  #entrance {
    overflow-y: hidden;
  }
}
@media (max-width: 1499px) {
  #entrance .logo-img {
    width: max(16%, 45px);
  }
}
@media (max-width: 991px) {
  #entrance {
    position: relative;
  }
  #entrance > .container {
    width: 100vw;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-top: 120px;
    padding-bottom: 100px;
    height: auto;
  }
  #entrance .header-logo {
    left: var(--gap);
    margin-left: auto;
  }
  #entrance .logo-text {
    font-size: 0.8125rem;
  }
  #entrance .logo-text .zh {
    font-weight: var(--fw-middle);
    font-size: 1.125em;
  }
  .entrance__img {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    width: 75%;
    margin: 0 auto;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    height: auto;
    aspect-ratio: 1;
  }
  .entrance__img img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    max-width: 100%;
    width: 100%;
    display: inline-block;
  }
  .entrance__text {
    width: 100%;
    max-width: none;
    margin: 0 auto 20px;
    text-align: center;
    max-width: min(100%, 600px);
  }
  .entrance__text .btn-wrap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
  }
  .entrance__text .btn-wrap > * {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
  .entrance__deco .deco-tainan {
    max-width: 80%;
    right: 10%;
    top: 25%;
  }
}
@media (max-width: 767px) {
  .entrance__deco .deco2 {
    left: 30%;
  }
}
@media (max-height: 579px) {
  #entrance > .container {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media (max-width: 499px) {
  .logo-text {
    font-size: 0.75rem;
  }
}