@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
  font-family: GenYoGothicTW-Bold;
  src: url("../../fonts/GenYoGothicTW-Bold.ttf"); }

@font-face {
  font-family: GenYoGothicTW-ExtraLight;
  src: url("../../fonts/GenYoGothicTW-ExtraLight.ttf"); }

@font-face {
  font-family: GenYoGothicTW-Heavy;
  src: url("../../fonts/GenYoGothicTW-Heavy.ttf"); }

@font-face {
  font-family: GenYoGothicTW-Light;
  src: url("../../fonts/GenYoGothicTW-Light.ttf"); }

@font-face {
  font-family: GenYoGothicTW-Medium;
  src: url("../../fonts/GenYoGothicTW-Medium.ttf"); }

@font-face {
  font-family: Gotham-XLight;
  src: url("../../fonts/Gotham-XLight.otf"); }

@font-face {
  font-family: Gotham-XLightItalic;
  src: url("../../fonts/Gotham-XLightItalic.otf"); }



      /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
      /* Document
        ========================================================================== */
      /**
      * 1. Correct the line height in all browsers.
      * 2. Prevent adjustments of font size after orientation changes in iOS.
      */
      html {
        line-height: 1.15;
        /* 1 */
        -webkit-text-size-adjust: 100%;
        /* 2 */ }

      /* Sections
        ========================================================================== */
      /**
      * Remove the margin in all browsers.
      */
      body {
        margin: 0; }

      /**
      * Render the `main` element consistently in IE.
      */
      main1 {
        display: block; }

      /**
      * Correct the font size and margin on `h1` elements within `section` and
      * `article` contexts in Chrome, Firefox, and Safari.
      */
      h1 {
        font-size: 2em;
        margin: 0.67em 0; text-indent: -99999px;position: absolute;}

      /* Grouping content
        ========================================================================== */
      /**
      * 1. Add the correct box sizing in Firefox.
      * 2. Show the overflow in Edge and IE.
      */
      hr {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        /* 1 */
        height: 0;
        /* 1 */
        overflow: visible;
        /* 2 */ }

      /**
      * 1. Correct the inheritance and scaling of font size in all browsers.
      * 2. Correct the odd `em` font sizing in all browsers.
      */
      pre {
        font-family: monospace, monospace;
        /* 1 */
        font-size: 1em;
        /* 2 */ }

      /* Text-level semantics
        ========================================================================== */
      /**
      * Remove the gray background on active links in IE 10.
      */
      a {
        background-color: transparent; }

      /**
      * 1. Remove the bottom border in Chrome 57-
      * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
      */
      abbr[title] {
        border-bottom: none;
        /* 1 */
        text-decoration: underline;
        /* 2 */
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
        /* 2 */ }

      /**
      * Add the correct font weight in Chrome, Edge, and Safari.
      */
      b,
      strong {
        font-weight: bolder; }

      /**
      * 1. Correct the inheritance and scaling of font size in all browsers.
      * 2. Correct the odd `em` font sizing in all browsers.
      */
      code,
      kbd,
      samp {
        font-family: monospace, monospace;
        /* 1 */
        font-size: 1em;
        /* 2 */ }

      /**
      * Add the correct font size in all browsers.
      */
      small {
        font-size: 80%; }

      /**
      * Prevent `sub` and `sup` elements from affecting the line height in
      * all browsers.
      */
      sub,
      sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline; }

      sub {
        bottom: -0.25em; }

      sup {
        top: -0.5em; }

      /* Embedded content
        ========================================================================== */
      /**
      * Remove the border on ../images inside links in IE 10.
      */
      img {
        border-style: none; }

      /* Forms
        ========================================================================== */
      /**
      * 1. Change the font styles in all browsers.
      * 2. Remove the margin in Firefox and Safari.
      */
      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: inherit;
        /* 1 */
        font-size: 100%;
        /* 1 */
        line-height: 1.15;
        /* 1 */
        margin: 0;
        /* 2 */ }

      /**
      * Show the overflow in IE.
      * 1. Show the overflow in Edge.
      */
      button,
      input {
        /* 1 */
        overflow: visible; }

      /**
      * Remove the inheritance of text transform in Edge, Firefox, and IE.
      * 1. Remove the inheritance of text transform in Firefox.
      */
      button,
      select {
        /* 1 */
        text-transform: none; }

      /**
      * Correct the inability to style clickable types in iOS and Safari.
      */
      button,
      [type="button"],
      [type="reset"],
      [type="submit"] {
        -webkit-appearance: button; }

      /**
      * Remove the inner border and padding in Firefox.
      */
      button::-moz-focus-inner,
      [type="button"]::-moz-focus-inner,
      [type="reset"]::-moz-focus-inner,
      [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0; }

      /**
      * Restore the focus styles unset by the previous rule.
      */
      button:-moz-focusring,
      [type="button"]:-moz-focusring,
      [type="reset"]:-moz-focusring,
      [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText; }

      /**
      * Correct the padding in Firefox.
      */
      fieldset {
        padding: 0.35em 0.75em 0.625em; }

      /**
      * 1. Correct the text wrapping in Edge and IE.
      * 2. Correct the color inheritance from `fieldset` elements in IE.
      * 3. Remove the padding so developers are not caught out when they zero out
      *    `fieldset` elements in all browsers.
      */
      legend {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        /* 1 */
        color: inherit;
        /* 2 */
        display: table;
        /* 1 */
        max-width: 100%;
        /* 1 */
        padding: 0;
        /* 3 */
        white-space: normal;
        /* 1 */ }

      /**
      * Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */
      progress {
        vertical-align: baseline; }

      /**
      * Remove the default vertical scrollbar in IE 10+.
      */
      textarea {
        overflow: auto; }

      /**
      * 1. Add the correct box sizing in IE 10.
      * 2. Remove the padding in IE 10.
      */
      [type="checkbox"],
      [type="radio"] {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        /* 1 */
        padding: 0;
        /* 2 */ }

      /**
      * Correct the cursor style of increment and decrement buttons in Chrome.
      */
      [type="number"]::-webkit-inner-spin-button,
      [type="number"]::-webkit-outer-spin-button {
        height: auto; }

      /**
      * 1. Correct the odd appearance in Chrome and Safari.
      * 2. Correct the outline style in Safari.
      */
      [type="search"] {
        -webkit-appearance: textfield;
        /* 1 */
        outline-offset: -2px;
        /* 2 */ }

      /**
      * Remove the inner padding in Chrome and Safari on macOS.
      */
      [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none; }

      /**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
      ::-webkit-file-upload-button {
        -webkit-appearance: button;
        /* 1 */
        font: inherit;
        /* 2 */ }

      /* Interactive
        ========================================================================== */
      /*
      * Add the correct display in Edge, IE 10+, and Firefox.
      */
      details {
        display: block; }

      /*
      * Add the correct display in all browsers.
      */
      summary {
        display: list-item; }

      /* Misc
        ========================================================================== */
      /**
      * Add the correct display in IE 10+.
      */
      template {
        display: none; }

      /**
      * Add the correct display in IE 10.
      */
      [hidden] {
        display: none; }

      /*CSS variables Setting*/
      /**
      * Swiper 4.4.2
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * http://www.idangero.us/swiper/
      *
      * Copyright 2014-2018 Vladimir Kharlampidi
      *
      * Released under the MIT License
      *
      * Released on: November 1, 2018
      */
      .swiper-container {
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1; }

      .swiper-container-no-flexbox .swiper-slide {
        float: left; }

      .swiper-container-vertical > .swiper-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; }

      .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        -o-transition-property: transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;
        transition-property: transform,-webkit-transform;
        -webkit-box-sizing: content-box;
        box-sizing: content-box; }

      .swiper-container-android .swiper-slide, .swiper-wrapper {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }

      .swiper-container-multirow > .swiper-wrapper {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }

      .swiper-container-free-mode > .swiper-wrapper {
        -webkit-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        margin: 0 auto; }

      .swiper-slide {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        -o-transition-property: transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;
        transition-property: transform,-webkit-transform; }

      .swiper-slide-invisible-blank {
        visibility: hidden; }

      .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
        height: auto; }

      .swiper-container-autoheight .swiper-wrapper {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-transition-property: height,-webkit-transform;
        transition-property: height,-webkit-transform;
        -o-transition-property: transform,height;
        transition-property: transform,height;
        transition-property: transform,height,-webkit-transform; }

      .swiper-container-3d {
        -webkit-perspective: 1200px;
        perspective: 1200px; }

      .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d; }

      .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10; }

      .swiper-container-3d .swiper-slide-shadow-left {
        background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
        background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

      .swiper-container-3d .swiper-slide-shadow-right {
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

      .swiper-container-3d .swiper-slide-shadow-top {
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
        background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

      .swiper-container-3d .swiper-slide-shadow-bottom {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

      .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
        -ms-touch-action: pan-y;
        touch-action: pan-y; }

      .swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
        -ms-touch-action: pan-x;
        touch-action: pan-x; }

      .swiper-button-next, .swiper-button-prev {
        position: absolute;
        top: 50%;
        width: 27px;
        height: 44px;
        margin-top: -22px;
        z-index: 10;
        cursor: pointer;
        background-size: 27px 44px;
        background-position: center;
        background-repeat: no-repeat; }

      .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
        opacity: .35;
        cursor: auto;
        pointer-events: none; }

      .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
        left: 10px;
        right: auto; }

      .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
        right: 10px;
        left: auto; }

      .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

      .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }

      .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

      .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }

      .swiper-button-lock {
        display: none; }

      .swiper-pagination {
        position: absolute;
        text-align: center;
        -webkit-transition: .3s opacity;
        -o-transition: .3s opacity;
        transition: .3s opacity;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 10; }

      .swiper-pagination.swiper-pagination-hidden {
        opacity: 0; }

      .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 10px;
        left: 0;
        width: 100%; }

      .swiper-pagination-bullets-dynamic {
        overflow: hidden;
        font-size: 0; }

      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        -webkit-transform: scale(0.33);
        -ms-transform: scale(0.33);
        transform: scale(0.33);
        position: relative; }

      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); }

      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); }

      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
        -webkit-transform: scale(0.66);
        -ms-transform: scale(0.66);
        transform: scale(0.66); }

      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
        -webkit-transform: scale(0.33);
        -ms-transform: scale(0.33);
        transform: scale(0.33); }

      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
        -webkit-transform: scale(0.66);
        -ms-transform: scale(0.66);
        transform: scale(0.66); }

      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
        -webkit-transform: scale(0.33);
        -ms-transform: scale(0.33);
        transform: scale(0.33); }

      .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
        background: #000;
        opacity: .2; }

      button.swiper-pagination-bullet {
        border: none;
        margin: 0;
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; }

      .swiper-pagination-clickable .swiper-pagination-bullet {
        cursor: pointer; }

      .swiper-pagination-bullet-active {
        opacity: 1;
        background: #007aff; }

      .swiper-container-vertical > .swiper-pagination-bullets {
        right: 10px;
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0); }

      .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 6px 0;
        display: block; }

      .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 8px; }

      .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        display: inline-block;
        -webkit-transition: .2s top,.2s -webkit-transform;
        -o-transition: .2s top,.2s -webkit-transform;
        transition: .2s top,.2s -webkit-transform;
        -o-transition: .2s transform,.2s top;
        -webkit-transition: .2s transform,.2s top;
        transition: .2s transform,.2s top;
        -webkit-transition: .2s transform,.2s top,.2s -webkit-transform;
        -o-transition: .2s transform,.2s top,.2s -webkit-transform;
        transition: .2s transform,.2s top,.2s -webkit-transform; }

      .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 4px; }

      .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        white-space: nowrap; }

      .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        -webkit-transition: .2s left,.2s -webkit-transform;
        -o-transition: .2s left,.2s -webkit-transform;
        transition: .2s left,.2s -webkit-transform;
        -o-transition: .2s transform,.2s left;
        -webkit-transition: .2s transform,.2s left;
        transition: .2s transform,.2s left;
        -webkit-transition: .2s transform,.2s left,.2s -webkit-transform;
        -o-transition: .2s transform,.2s left,.2s -webkit-transform;
        transition: .2s transform,.2s left,.2s -webkit-transform; }

      .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        -webkit-transition: .2s right,.2s -webkit-transform;
        -o-transition: .2s right,.2s -webkit-transform;
        transition: .2s right,.2s -webkit-transform;
        -o-transition: .2s transform,.2s right;
        -webkit-transition: .2s transform,.2s right;
        transition: .2s transform,.2s right;
        -webkit-transition: .2s transform,.2s right,.2s -webkit-transform;
        -o-transition: .2s transform,.2s right,.2s -webkit-transform;
        transition: .2s transform,.2s right,.2s -webkit-transform; }

      .swiper-pagination-progressbar {
        background: rgba(0, 0, 0, 0.25);
        position: absolute; }

      .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: #007aff;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top; }

      .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        -webkit-transform-origin: right top;
        -ms-transform-origin: right top;
        transform-origin: right top; }

      .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
        width: 100%;
        height: 4px;
        left: 0;
        top: 0; }

      .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar {
        width: 4px;
        height: 100%;
        left: 0;
        top: 0; }

      .swiper-pagination-white .swiper-pagination-bullet-active {
        background: #fff; }

      .swiper-pagination-progressbar.swiper-pagination-white {
        background: rgba(255, 255, 255, 0.25); }

      .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
        background: #fff; }

      .swiper-pagination-black .swiper-pagination-bullet-active {
        background: #000; }

      .swiper-pagination-progressbar.swiper-pagination-black {
        background: rgba(0, 0, 0, 0.25); }

      .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
        background: #000; }

      .swiper-pagination-lock {
        display: none; }

      .swiper-scrollbar {
        border-radius: 10px;
        position: relative;
        -ms-touch-action: none;
        background: rgba(0, 0, 0, 0.1); }

      .swiper-container-horizontal > .swiper-scrollbar {
        position: absolute;
        left: 1%;
        bottom: 3px;
        z-index: 50;
        height: 5px;
        width: 98%; }

      .swiper-container-vertical > .swiper-scrollbar {
        position: absolute;
        right: 3px;
        top: 1%;
        z-index: 50;
        width: 5px;
        height: 98%; }

      .swiper-scrollbar-drag {
        height: 100%;
        width: 100%;
        position: relative;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        left: 0;
        top: 0; }

      .swiper-scrollbar-cursor-drag {
        cursor: move; }

      .swiper-scrollbar-lock {
        display: none; }

      .swiper-zoom-container {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center; }

      .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
        max-width: 100%;
        max-height: 100%;
        -o-object-fit: contain;
        object-fit: contain; }

      .swiper-slide-zoomed {
        cursor: move; }

      .swiper-lazy-preloader {
        width: 42px;
        height: 42px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -21px;
        margin-top: -21px;
        z-index: 10;
        -webkit-transform-origin: 50%;
        -ms-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
        animation: swiper-preloader-spin 1s steps(12, end) infinite; }

      .swiper-lazy-preloader:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        background-position: 50%;
        background-size: 100%;
        background-repeat: no-repeat; }

      .swiper-lazy-preloader-white:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

      @-webkit-keyframes swiper-preloader-spin {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg); } }

      @keyframes swiper-preloader-spin {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg); } }

      .swiper-container .swiper-notification {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        opacity: 0;
        z-index: -1000; }

      .swiper-container-fade.swiper-container-free-mode .swiper-slide {
        -webkit-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out; }

      .swiper-container-fade .swiper-slide {
        pointer-events: none;
        -webkit-transition-property: opacity;
        -o-transition-property: opacity;
        transition-property: opacity; }

      .swiper-container-fade .swiper-slide .swiper-slide {
        pointer-events: none; }

      .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
        pointer-events: auto; }

      .swiper-container-cube {
        overflow: visible; }

      .swiper-container-cube .swiper-slide {
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 1;
        visibility: hidden;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        width: 100%;
        height: 100%; }

      .swiper-container-cube .swiper-slide .swiper-slide {
        pointer-events: none; }

      .swiper-container-cube.swiper-container-rtl .swiper-slide {
        -webkit-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0; }

      .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
        pointer-events: auto; }

      .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev {
        pointer-events: auto;
        visibility: visible; }

      .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
        z-index: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }

      .swiper-container-cube .swiper-cube-shadow {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .6;
        -webkit-filter: blur(50px);
        filter: blur(50px);
        z-index: 0; }

      .swiper-container-flip {
        overflow: visible; }

      .swiper-container-flip .swiper-slide {
        pointer-events: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 1; }

      .swiper-container-flip .swiper-slide .swiper-slide {
        pointer-events: none; }

      .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
        pointer-events: auto; }

      .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {
        z-index: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }

      .swiper-container-coverflow .swiper-wrapper {
        -ms-perspective: 1200px; }

      .hidden {
        display: none !important; }


      .swiper-wrapper.disabled {
          transform: translate3d(0px, 0, 0) !important;
      }
      .swiper-pagination.disabled,.swiper-button-prev.disabled,.swiper-button-next.disabled {
          display: none !important;
      }


      html,
      body {
        padding: 0;
        margin: 0; }

      #main1 {
        position: relative;
        z-index: 0;
        padding-bottom: 0px; }

      #loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #dde3e5;
        z-index: 10;
        font-family: "Montserrat", "sourcehansans-tc", "Noto Sans S Chinese", "Noto Sans TC", "PingFang TC",
      "Microsoft JhengHei", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
        #loading > img {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -87px);
          -ms-transform: translate(-50%, -87px);
          transform: translate(-50%, -87px); }

      #loading .percentage {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 19px;
        font-weight: 600;
        text-indent: 8px;
        -webkit-transform: translate(-50%, 20px);
        -ms-transform: translate(-50%, 20px);
        transform: translate(-50%, 20px); }

      #loading .percentage span {
        margin-right: 2px; }

      /* font-size: 36px;  */
      .bg-hack {
        position: absolute;
        width: 100%;
        min-height: 100%;
        background-size: cover;
        background-repeat: repeat-y;
        background-image: url(../images/mobile_bg.png?t=241203);
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1; }
        @media screen and (min-height: 1478px) {
          .bg-hack {
            background-size: contain; } }
        .bg-hack.less {
          background-size: cover; }

      .bg-bottom {
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 335px;
        height: 320px;
        background-image: url("../images/bg-btm.png");
        background-size: cover; }

      section#section1 > img {
        width: 89%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        left: 2px; }

      section#section1 h1 {
        font-size: 0;
        opacity: 0; }

      section#section2 {
        position: relative;
        top: -20px; }
        section#section2 > img {
          width: 100%;
          display: block;
          margin-left: auto;
          margin-right: auto; }
        section#section2 p {
          font-size: 0;
          opacity: 0; }

      /* section#section3 {
        margin-bottom: 31px; } */
        section#section3 > img {
          width: 78.125%;
          display: block;
          margin-left: auto;
          margin-right: auto; }
        section#section3 > p {
          font-size: 0;
          opacity: 0; }

      section#section4 a {
        width: 275px;
        display: block;
        margin-left: auto;
        margin-right: auto; }
        section#section4 a > img {
          width: 100%; }

      .outer_link-container {
        position: fixed;
        width: 60px;
        left: 1%;
        bottom: 80px;
        z-index: 2; }
        .outer_link-container .outer_link {
          display: block;
          top: 0; }
          .outer_link-container .outer_link img {
            width: 100%;
            image-rendering: -moz-crisp-edges;
            /* Firefox */
            image-rendering: -o-crisp-edges;
            /* Opera */
            image-rendering: -webkit-optimize-contrast;
            /* Webkit (non-standard naming) */
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor; }

      /*****************************************
      *                 card                 *
      *****************************************/
      .card-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 255px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        margin-top: 18px; }

      .card {
        width: 100%;
        min-height: 224px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-top: 2px solid #2f0303;
        border-bottom: 2px solid #2f0303;
        background-image: url("../images/card_bg.jpg");
        background-size: contain; }
        .card{
          margin-bottom: 15px; }
        .card > * {
          width: 224px;
          margin-left: auto;
          margin-right: auto; }
        .card-head {
          margin-top: 16px;
          height: 79px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between; }
          .card-head .brand {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center; }
            .card-head .brand > a {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
              -ms-flex-direction: column;
              flex-direction: column;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center; }
              .card-head .brand > a > img {
                display: block;
                pointer-events: none; }
                .card-head .brand > a > img:first-of-type {
                  max-width: 100px; }
                .card-head .brand > a > img:nth-of-type(2) {
                  width: 16px;
                  height: 16px;
                  position: relative;
                  top: 3px; }
          .card-head .cup {
            width: 110px; }
            .card-head .cup > img {
              width: 100%; }
        .card-body {
          margin-top: 15px;
          margin-bottom: 8px;
          padding-top: 15px;
          border-top: 2px solid #2f0303;
          -webkit-box-flex: 1;
          -ms-flex-positive: 1;
          flex-grow: 1;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column; }
          .card-body .content {
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1; }
          .card-body .name {
            font-size: 14px;
            font-family: GenYoGothicTW-Bold;
            text-transform: uppercase;
            color: #2f0303;
            line-height: 1.5;
            margin: 0; }
          .card-body .story {
            margin: 0;
            font-size: 12px;
            font-family: GenYoGothicTW-Bold;
            color: #2f0303;
            line-height: 1.5; }
          .card-body .popup {
            border-radius: 5px;
            margin-left: auto;
            width: 75px;
            height: 25px;
            margin-top: 6px;
            text-align: center;
            font-family: GenYoGothicTW-Bold;
            color: #fff;
            background-color: #000;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
            font-size: 0;
            background-image: url("../images/pop_btn.png");
            background-size: cover;
            background-position: center; }

      /*****************************************
      *                 popup                 *
      *****************************************/
      #pop {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: -10;
        opacity: 0;
        -webkit-transition: all 0.75s ease;
        -o-transition: all 0.75s ease;
        transition: all 0.75s ease; }
        #pop.show {
          z-index: 1000;
          opacity: 1; }
        #pop .close {
          width: 30px;
          height: 30px;
          background-size: cover;
          background-image: url("../../images/close.png");
          position: absolute;
          top: -55px;
          right: 35px;
          cursor: pointer; }

      .swiper-component {
        width: 360px;
        position: relative;
        height: 500px;
        top: 52%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .swiper-component.hack_h {
          height: 400px; }
          .swiper-component.hack_h .swiper-container {
            height: 400px; }
        .swiper-component .swiper-container {
          width: 280px;
          height: 100%;
          overflow-y: auto; }
          .swiper-component .swiper-container .swiper-slide img {
            width: 100%; }
        .swiper-component .swiper-pagination {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: distribute;
          justify-content: space-around;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          bottom: -40px; }
          .swiper-component .swiper-pagination > span:not(:last-of-type) {
            margin-right: 10px; }
        .swiper-component .swiper-pagination-bullet {
          width: 10px;
          height: 10px;
          opacity: 1;
          border: 2px solid #fff;
          background-color: rgba(255, 255, 255, 0); }
          .swiper-component .swiper-pagination-bullet-active {
            background-color: #fff; }
        .swiper-component .swiper-custom-left,
        .swiper-component .swiper-custom-right {
          width: 16px;
          height: 28px;
          cursor: pointer;
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          image-rendering: auto;
          image-rendering: crisp-edges;
          -ms-interpolation-mode: nearest-neighbor;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-pixelated;
          image-rendering: pixelated;
          /* Safari seems to support, but seems deprecated and does the same thing as the others. */
          image-rendering: -webkit-optimize-contrast; }
        .swiper-component .swiper-custom-left {
          background-size: contain;
          background-repeat: no-repeat;
          background-image: url("../../images/left.png");
          background-position: left center; }
        .swiper-component .swiper-custom-right {
          background-size: contain;
          background-repeat: no-repeat;
          background-image: url("../../images/right.png");
          background-position: right center; }

      /*****************************************
      *                 footer                 *
      *****************************************/
      /*****************************************
      *                warnings                *
      *****************************************/
      #warnings {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 63px;
        font-size: 0;
        text-align: center;
        background: url(https://www.kirin.com.tw/blog/../images/common/warning-bg.png) #383838 center top no-repeat;
        background-size: cover;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        overflow: hidden;
        z-index: 1; }

      #warnings span {
        display: inline-block;
        height: 100%;
        color: #b6b6b6;
        font-size: 22px;
        font-weight: 300;
        line-height: 63px;
        letter-spacing: 3px;
        vertical-align: middle; }

      #warnings span:nth-child(1) {
        padding-left: 3px;
        -webkit-transform: scaleY(1.2);
        -ms-transform: scaleY(1.2);
        transform: scaleY(1.2); }

      #warnings span img {
        width: 22px;
        margin-top: -2px;
        margin-right: 3px;
        vertical-align: middle; }

      #warnings span:nth-child(3) {
        -webkit-transform: scaleY(1.2);
        -ms-transform: scaleY(1.2);
        transform: scaleY(1.2); }

      /*****************************************
      *                 footer                 *
      *****************************************/
      #footer {
        /*position: fixed;*/
        /*bottom: 63px;*/
      }

      .wheretoset {
          width: 100%;
          position: absolute;
          top: 0;
          transform: translateY(-100%);
          -webkit-transform: translateY(-100%);
          opacity: 0;
          z-index: -1;
          -webkit-transition: opacity 0.4s ease, bottom 0.4s ease 0.2s;
          -o-transition: opacity 0.4s ease, bottom 0.4s ease 0.2s;
          transition: opacity 0.4s ease, bottom 0.4s ease 0.2s; 
          display: none;
        }
        
        
      .wheretoset.show {
            opacity: 1;
            z-index: 1;
            -webkit-transition: opacity 0.3s ease 0.1s, bottom 0.3s ease;
            -o-transition: opacity 0.3s ease 0.1s, bottom 0.3s ease;
            transition: opacity 0.3s ease 0.1s, bottom 0.3s ease; }
      .wheretoset.show a {
              z-index: 1; }
      .wheretoset a {
            display: block;
            width: 41%;
            height: 36px;
            position: absolute;
            right: 0;
            cursor: pointer;
            z-index: -1; }
      .wheretoset > img {
            position: relative;
            width: 102%;
            left: -1%; }




      /*202409*/
      body{position: relative;}




      .flag-left{
        position: absolute;
        left: calc(50% - 960px);
        top: 310px;
      }

      .flag-right{
        position: absolute;
        right: calc(50% - 960px);
        top: 310px;
        transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
      }

      @media screen and (max-width: 999px) {
        #footer .top{display: none;}
        .flag-left img, .flag-right img, .logo img{width: 100%;display: block;}
        #main1 section#section1{padding-top: 0px;}
        section#section1 > img{width: 154px;}

        .flag-left{
          position: absolute;
          left: 0;
          width: 92px;
          top: 310px;
        }

        .flag-right{
          position: absolute;
          right: 0;
          width: 92px;
          top: 310px;
          transform: scaleX(-1);
          -webkit-transform: scaleX(-1);
        }
        section#section2{top: 0;}

        .burger-btn{
              position: absolute;
              top: 0px;
              right: 0px;
              width: 55px;
              height: 55px;
              cursor: pointer;
              display: flex;justify-content: center;align-items: center;
              z-index: 2;
          }
          .burger-btn span {
              position: absolute;
              display: block;
              width:calc( 46 / 84 * 100%);
              height: 3px;
              border-radius: 2px;
              background: #fff;
              -webkit-transition: -webkit-transform 0.3s ease;
              transition: transform 0.3s ease;
          }
          .burger-btn span:nth-child(1) {
              -webkit-transform: scale(1,1) translate(0,-10px) rotate(0deg);
              transform: scale(1,1) translate(0,-10px) rotate(0deg);
          }
          .burger-btn span:nth-child(2) {
              -webkit-transform: scale(1,1) translate(0,0px) rotate(0deg);
              transform: scale(1,1) translate(0,0px) rotate(0deg);
          }
          .burger-btn span:nth-child(3) {
              -webkit-transform: scale(1,1) translate(0,10px) rotate(0deg);
              transform: scale(1,1) translate(0,10px) rotate(0deg);
          }


          .fixed-btns{
            position: fixed;
            right: 1vw;
            top: 25dvh;
            z-index: 8;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
          }
          .fixed-burger,.fixed-btns img{width: 100%;}
          .fixed-burger{
            width: calc(217px / 4);
            -webkit-transition: all .3s ease;
          transition: all .3s ease;
          }
          .fixed-nav{
            width: calc(310px / 4);
          }

          .fixed-btns.expand .fixed-burger{height: 0;width: 0;}
          .fixed-btns .fixed-nav a img{opacity: 0;pointer-events: none;z-index: -999;-webkit-transition: all .3s ease;
          transition: all .3s ease;transform: translateY(-10px);-webkit-transform: translateY(-10px);}
          
          .fixed-btns .fixed-nav a img{-webkit-transition: all .3s ease;    transition: all .3s ease;}
          .fixed-btns.expand .fixed-nav a img{pointer-events: initial;z-index: 0;opacity: 1;transform: translateY(0px);-webkit-transform: translateY(0px);}
          .fixed-btns.expand .fixed-nav a img:nth-child(1){}
          .fixed-btns.expand .fixed-nav a:nth-child(2) img{transition-delay: .1s;}
          .fixed-btns.expand .fixed-nav a:nth-child(3) img{transition-delay: .2s;}
      















      #shortcut-line-oa {
      display: none;
      }
      
      body {
        margin: 0;
        overflow-x: hidden; /* 禁止水平滾動 */
      }

      #main1 {
        width: 335px;
        overflow-x: hidden; /* 同樣禁止水平滾動 */
        padding-top: 10px;
        margin: 0px 20px 0px 20px;
      }

      .section {
        width: 100%; /* 使每個section的寬度為100% */
        box-sizing: border-box; /* 包含padding和border */
        padding: 0; /* 移除內邊距 */
      }

      img {
        max-width: 100%; /* 圖片最大寬度為100% */
        height: auto; /* 高度自動 */
        display: block;
      }

      .outer_link-container {
        text-align: center; /* 將外部鏈接居中 */
        margin: 0; /* 移除外邊距 */
      }	  
      
      .fixed-nav {
        pointer-events: none; /* 禁止點擊击 */
        opacity: 0; /* 隱藏按鈕 */
        transition: opacity 0.3s ease; /* 增加過渡效果 */
      }

      .fixed-btns.expand .fixed-nav {
        pointer-events: auto; /* 啟用點擊 */
        opacity: 1; /* 顯示按钮 */
      }





      /*****************************************
      *                  tabs                 *
      *****************************************/


      .tabs {
        position: relative;
        margin: 88px 20px 25px 20px;
      }

      .tabs-header {}
      .tabs-header ul {}
      .tabs-header li {
        float: left;
        position: relative;
        border: #dedede 1px solid;
        margin: 0 5px 0 0;
      }
      .tabs-header li:last-child {margin: 0;}
      .tabs-header li a {
        display: flex;
        width: 106px;
        height: 48px;
        color: #6b6b6b;
        font-size: 10px;
        line-height: 48px;
        background-color: #ffffff;
        background-position: 20px center;
        background-repeat: no-repeat;
        background-size: 8px 5px;
        justify-content: center;
    }


      .tabs-header li.current {border-color: #d7000f;}
      .tabs-header li.current a {
        color: #ffffff;

        background-color: #d7000f;
      }

    
      
      .fixed-btn {
        position: fixed;
        right: 0;
        bottom: calc(100px);
        transform: translateY(-50%);
        z-index: 1;
        width: 25vw;
      }
      .fixed-btn img {
        width: 100%;
      }




    #header {
      z-index: 9;
    }    
    #menu {
      top:  -69px !important;
      z-index: 5 !important;
    }

    #warnings {
      position: fixed;
      top: auto;
      bottom: 0px;
      z-index: 6;
    }



    /*****************************************
    *                 section 0              *
    *****************************************/

    #section0 .kv-banner {
        padding-top: -57px
        width: 100%;
        position: relative;
    }

    .kv-banner img {
        width: 100%;
    }

    #section0 .kv-banner_icon {
      position: absolute;
      top: 25%;
      left: 36%;
      z-index: 10;
      width: 28%;
    }

    /*****************************************
    *                 按鈕文字位置          *
    *****************************************/

    #first-buttom a {
      text-indent: 5px;
  }








}