@charset "UTF-8";
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Light.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Regular.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Medium.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Bold.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 300;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Light.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Regular.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Medium.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Bold.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 900;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Black.ttf") format("truetype");
  font-display: swap; }

html,
body {
  font-family: "Noto Sans TC", sans-serif, Arial, Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #6A3900;
  background: #FAF2DB; }
  @media only screen and (max-width: 1023px) {
    html,
    body {
      background-size: 40px; }
      html.-menuOpen,
      body.-menuOpen {
        overflow: hidden; } }

main {
  overflow: hidden; }

a,
button {
  padding: 0;
  line-height: 1.5;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }

.footer a {
  color: #FFF; }

@media only screen and (max-width: 767px) {
  .footer {
    padding-bottom: 60px; } }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

/*
 * Browser Upgrade Prompt
 */
.browserupgrade {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  margin: 0.2em 0;
  background: #ccc;
  padding: 0.2em 0; }

body {
  height: 100%; }

.wrapper {
  min-height: 100%;
  overflow: hidden; }

.main {
  padding-top: 80px; }
  .main p {
    padding: 0; }
  @media screen and (max-width: 1024px) {
    .main {
      padding-top: 76px; } }
  @media only screen and (max-width: 767px) {
    .main {
      padding-top: 58px; } }

.service {
  position: fixed;
  right: 20px;
  bottom: 148px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: url(../images/icon/yuan.svg);
  cursor: pointer;
  z-index: 50;
  transition: .3s; }
  .service-box {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    display: none;
    flex-direction: column;
    width: 186px;
    padding: 8px;
    font-size: 12px;
    color: #0072ff;
    line-height: 1.6;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
    background: #fff;
    z-index: 10; }
    .service-box span {
      color: #707070; }
  @media only screen and (min-width: 768px) {
    .service:hover .service-box {
      display: flex; } }
  @media only screen and (max-width: 1279px) {
    .service {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .service {
      bottom: 172px;
      width: 43px;
      height: 43px; } }

.line {
  position: fixed;
  right: 20px;
  bottom: 84px;
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: url(../images/icon/line.svg) no-repeat center/contain;
  cursor: pointer;
  text-decoration: none;
  z-index: 50;
  transition: .2s; }
  .line:hover {
    transform: scale(1.1); }
  @media only screen and (max-width: 1279px) {
    .line {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .line {
      bottom: 121px;
      width: 43px;
      height: 43px; } }

.goTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: url(../images/icon/top.svg);
  opacity: 1;
  cursor: pointer;
  z-index: 50;
  transition: .2s; }
  .goTop:hover {
    transform: scale(1.1); }
  @media only screen and (max-width: 1279px) {
    .goTop {
      right: 12px; } }
  @media only screen and (max-width: 767px) {
    .goTop {
      bottom: 70px;
      width: 43px;
      height: 43px; } }

.float {
  position: fixed;
  top: 160px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 50px;
  z-index: 50; }
  .float-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 20px 12px;
    border-radius: 10px;
    background-color: #4A76D5; }
    .float-item img {
      width: 22px; }
    .float-item div {
      color: #FFF;
      letter-spacing: 0.5px;
      -webkit-writing-mode: vertical-lr;
          -ms-writing-mode: tb-lr;
              writing-mode: vertical-lr; }
    .float-item.-rd {
      background-color: #F94B4B; }
  @media only screen and (min-width: 1024px) {
    .float-item {
      transition: .3s; }
      .float-item:hover {
        transform: scale(1.05); }

        /* 1. 設定初始狀態：加入過渡動畫 */
    .card-item {
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    border-color 0.3s ease;
        position: relative;
        z-index: 1;
        border: 2px solid transparent; /* 預留邊框位置 */
    }

    /* 2. 設定 Hover 狀態：漂浮  + 變色 */
    .card-item:hover {
        transform: translateY(-6px);
        border-color: #FFCF7B; /* 微微顯現淡金色邊框，呼應銀行色調 */
        z-index: 10; /* 確保浮起的卡片不會被隔壁擋住 */
    }
       }
  @media only screen and (max-width: 1279px) {
    .float {
      right: 12px;
      width: 40px; }
      .float-item {
        padding: 15px 10px; }
        .float-item img {
          width: 18px; } }
  @media only screen and (max-width: 767px) {
    .float {
      display: flex;
      top: auto;
      bottom: 0;
      right: 0;
      flex-direction: row;
      gap: 0;
      width: 100%; }
      .float-item {
        flex: 1;
        flex-direction: row;
        justify-content: center;
        padding: 12px;
        border-radius: 0; }
        .float-item div {
          padding-bottom: 1px;
          -webkit-writing-mode: initial;
              -ms-writing-mode: initial;
                  writing-mode: initial; } }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Light.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Regular.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Medium.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Bold.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 300;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Light.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Regular.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Medium.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Bold.ttf") format("truetype");
  font-display: swap; }

@font-face {
  font-family: 'SweiGothicCJKtc';
  font-style: normal;
  font-weight: 900;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Black.ttf") format("truetype");
  font-display: swap; }

/* ------------------------------- Header ------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 20px;
  background: white url(../images/header/header_bg.png) no-repeat center right/auto;
  z-index: 100; }
  .header-logo {
    flex: 1;
    display: block;
    font-size: 0; }
    .header-logo a {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      width: 187px;
      height: 39px;
      background-image: url("../images/header/yuantabank_logo.svg");
      background-size: 100% auto;
      background-repeat: no-repeat; }
  .header-nav {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    padding: 0 20px;
    font-size: 18px;
    color: #272727; }
    .header-nav a {
      color: #272727;
      text-decoration: none; }
    .header-nav span {
      margin: 0 14px; }
  .header-plusLogo {
    flex: 0 0 auto;
    width: 130px;
    height: 39px;
    margin-left: 30px;
    background: url(../images/header/yuantaplus_logo.svg) no-repeat center/contain; }
  .header-burger {
    flex: 0 0 auto;
    display: none; }
  @media screen and (max-width: 1024px) {
    .header {
      height: 76px; }
      .header-logo a {
        width: 171px;
        height: 36px; }
      .header-nav {
        font-size: 16px;
        padding: 0 12px; }
        .header-nav span {
          margin: 0 5px; }
      .header-plusLogo {
        width: 120px;
        margin-left: 5px; } }
  @media only screen and (max-width: 1023px) {
    .header-nav {
      position: fixed;
      top: 76px;
      left: 0;
      width: 100%;
      height: calc(100% - 76px);
      padding: 0 50px 50px;
      flex-direction: column;
      justify-content: center;
      font-size: 20px;
      text-align: center;
      background-color: #FFF;
      opacity: 0;
      pointer-events: none;
      transition: .3s;
      z-index: 5; }
      .header-nav a {
        padding: 20px;
        border-top: 1px solid #272727; }
        .header-nav a:first-child {
          border-top: none; }
      .header-nav span {
        display: none; }
      .-menuOpen .header-nav {
        opacity: 1;
        pointer-events: visible; }
    .header-plusLogo {
      display: none; }
    .header-burger {
      position: relative;
      display: block;
      width: 36px;
      height: 36px;
      background: url(../images/header/burger.svg) no-repeat center/contain;
      z-index: 10; }
      .-menuOpen .header-burger {
        background-image: url(../images/header/cross.svg); } }
  @media only screen and (max-width: 767px) {
    .header {
      padding: 16px;
      height: 58px; }
      .header-logo a {
        width: 123px;
        height: 26px; }
      .header-plusLogo {
        width: 87px; }
      .header-burger {
        width: 24px;
        height: 24px; } }

@-webkit-keyframes float01 {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-15%, -12%); } }

@keyframes float01 {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-15%, -12%); } }

@-webkit-keyframes float02 {
  0% {
    transform: translate(-1.8%, 3%); }
  100% {
    transform: translate(6%, -10%); } }

@keyframes float02 {
  0% {
    transform: translate(-1.8%, 3%); }
  100% {
    transform: translate(6%, -10%); } }

@-webkit-keyframes float {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -12%); } }

@keyframes float {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -12%); } }

@-webkit-keyframes float-lg {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -20%); } }

@keyframes float-lg {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -20%); } }

@-webkit-keyframes child {
  0% {
    transform: skewX(-2deg); }
  100% {
    transform: skewX(2deg); } }

@keyframes child {
  0% {
    transform: skewX(-2deg); }
  100% {
    transform: skewX(2deg); } }

@-webkit-keyframes shake {
  0% {
    transform: rotate(-2deg); }
  100% {
    transform: rotate(2deg); } }

@keyframes shake {
  0% {
    transform: rotate(-2deg); }
  100% {
    transform: rotate(2deg); } }

@-webkit-keyframes shake-lg {
  0% {
    transform: rotate(-6deg); }
  100% {
    transform: rotate(6deg); } }

@keyframes shake-lg {
  0% {
    transform: rotate(-6deg); }
  100% {
    transform: rotate(6deg); } }

@-webkit-keyframes flower {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

@keyframes flower {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes coin01 {
  0% {
    transform: scale(0.2) translate(-50%, -5%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(50%, -5%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(50%, -5%);
    opacity: 0; } }

@keyframes coin01 {
  0% {
    transform: scale(0.2) translate(-50%, -5%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(50%, -5%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(50%, -5%);
    opacity: 0; } }

@-webkit-keyframes coin02 {
  0% {
    transform: scale(0.2) translate(20%, 50%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(-20%, -50%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(-20%, -50%);
    opacity: 0; } }

@keyframes coin02 {
  0% {
    transform: scale(0.2) translate(20%, 50%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(-20%, -50%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(-20%, -50%);
    opacity: 0; } }

@-webkit-keyframes coin03 {
  0% {
    transform: scale(0.2) translate(-50%, 50%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(50%, -50%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(50%, -50%);
    opacity: 0; } }

@keyframes coin03 {
  0% {
    transform: scale(0.2) translate(-50%, 50%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(50%, -50%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(50%, -50%);
    opacity: 0; } }

@-webkit-keyframes coin04 {
  0% {
    transform: scale(0.2) translate(50%, -5%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(-50%, -5%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(-50%, -5%);
    opacity: 0; } }

@keyframes coin04 {
  0% {
    transform: scale(0.2) translate(50%, -5%);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    transform: scale(1) translate(-50%, -5%);
    opacity: 0; }
  100% {
    transform: scale(1) translate(-50%, -5%);
    opacity: 0; } }

.banner {
  position: relative;
  padding-bottom: 560px;
  border-radius: 0 0 76px 76px;
  overflow: hidden; }
  .banner img {
    width: 100%; }
  .banner-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1180px;
    height: 100%;
    font-size: 0;
    z-index: 1; }
    .banner-wrap > div {
      position: absolute; }
  .banner-bg {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 162.71186%; }
  .banner-coin > img {
    position: relative; }
  .banner-coin::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center/contain;
    mix-blend-mode: screen; }
  .banner-coin.-c01 {
    top: 50%;
    left: 100%;
    width: 40.42373%; }
    .banner-coin.-c01 > img {
      transform-origin: left bottom;
      -webkit-animation: coin01 2s linear infinite;
              animation: coin01 2s linear infinite; }
    .banner-coin.-c01::before {
      background-image: url(./../images/banner/coin01.png);
      transform-origin: left bottom;
      -webkit-animation: coin01 2s linear infinite;
              animation: coin01 2s linear infinite; }
  .banner-coin.-c02 {
    top: 18.75%;
    right: calc(100% + 1.69492%);
    width: 10.25424%; }
    .banner-coin.-c02 > img {
      transform-origin: right bottom;
      -webkit-animation: coin02 2s linear infinite;
              animation: coin02 2s linear infinite; }
    .banner-coin.-c02::before {
      background-image: url(./../images/banner/coin02.png);
      transform-origin: right bottom;
      -webkit-animation: coin02 2s linear infinite;
              animation: coin02 2s linear infinite; }
  .banner-coin.-c03 {
    top: 21.60714%;
    left: calc(100% - 4.49153%);
    width: 13.81356%; }
    .banner-coin.-c03 > img {
      transform-origin: left bottom;
      -webkit-animation: coin03 2s linear infinite;
              animation: coin03 2s linear infinite; }
    .banner-coin.-c03::before {
      background-image: url(./../images/banner/coin03.png);
      transform-origin: left bottom;
      -webkit-animation: coin03 2s linear infinite;
              animation: coin03 2s linear infinite; }
  .banner-coin.-c04 {
    top: 61.60714%;
    right: calc(100% - 6.94915%);
    width: 30.08475%; }
    .banner-coin.-c04 > img {
      transform-origin: right bottom;
      -webkit-animation: coin04 2s linear infinite;
              animation: coin04 2s linear infinite; }
    .banner-coin.-c04::before {
      background-image: url(./../images/banner/coin04.png);
      transform-origin: right bottom;
      -webkit-animation: coin04 2s linear infinite;
              animation: coin04 2s linear infinite; }
  .banner-envelope {
    top: 20.35714%;
    right: 5.33898%;
    width: 43.05085%; }
  .banner-hand {
    top: 50%;
    right: -12.28814%;
    width: 35.59322%; }
  .banner-tit {
    top: 19.10714%;
    left: 5.67797%;
    width: 41.18644%; }
  @media only screen and (min-width: 1921px) {
    .banner {
      padding-bottom: 29.16667vw; }
      .banner-wrap {
        width: 61.45833%;
        max-width: none; } }
  @media only screen and (max-width: 1179px) {
    .banner {
      padding-bottom: 47.45763%; } }
  @media only screen and (max-width: 767px) {
    .banner {
      padding-bottom: 126.4%;
      border-radius: 0 0 7.5% 7.5%; }
      .banner-bg {
        width: 100%; }
      .banner-coin.-c01 {
        display: none; }
      .banner-coin.-c02 {
        display: none; }
      .banner-coin.-c03 {
        top: 50.42194%;
        left: 74.66667%;
        width: 17.06667%; }
      .banner-coin.-c04 {
        display: none; }
      .banner-coin.-c05 {
        top: 65.82278%;
        left: 68%;
        width: 42.66667%; }
        .banner-coin.-c05 > img {
          transform-origin: left bottom;
          -webkit-animation: coin03 2s linear infinite;
                  animation: coin03 2s linear infinite; }
        .banner-coin.-c05::before {
          background-image: url(./../images/banner/coin05.png);
          transform-origin: left bottom;
          -webkit-animation: coin03 2s linear infinite;
                  animation: coin03 2s linear infinite; }
      .banner-coin.-c06 {
        top: 44.3038%;
        left: 0;
        width: 40%; }
        .banner-coin.-c06 > img {
          transform-origin: right bottom;
          -webkit-animation: coin02 2s linear infinite;
                  animation: coin02 2s linear infinite; }
        .banner-coin.-c06::before {
          background-image: url(./../images/banner/coin06.png);
          transform-origin: right bottom;
          -webkit-animation: coin02 2s linear infinite;
                  animation: coin02 2s linear infinite; }
      .banner-envelope {
        top: 53.5865%;
        right: 18.13333%;
        width: 70.93333%;
        transform: rotate(13.5deg); }
      .banner-hand {
        top: 78.05907%;
        right: 0.8%;
        width: 48%;
        transform: rotate(6deg); }
      .banner-tit {
        top: 8.43882%;
        left: 50%;
        transform: translateX(-50%);
        width: 66.93333%; } }

.envelope {
  position: relative;
  padding-bottom: 114.17323%; }
  .envelope-b {
    position: absolute;
    top: 8.62069%;
    left: 7.28346%;
    width: 85.43307%; }
  .envelope-01 {
    position: absolute;
    top: 25.86207%;
    left: 0;
    width: 29.13386%;
    -webkit-animation: float01 1.5s ease-in-out infinite alternate;
            animation: float01 1.5s ease-in-out infinite alternate; }
  .envelope-02 {
    position: absolute;
    top: 11.37931%;
    right: 1.9685%;
    width: 25.59055%;
    -webkit-animation: float02 1.5s -0.6s ease-in-out infinite alternate;
            animation: float02 1.5s -0.6s ease-in-out infinite alternate; }
  .envelope-03 {
    position: absolute;
    top: 21.2069%;
    left: 34.64567%;
    width: 19.48819%;
    animation: float 1.5s ease-in-out infinite alternate-reverse; }
  .envelope-04 {
    position: absolute;
    top: 0;
    right: 22.24409%;
    width: 17.71654%;
    -webkit-animation: float 1.5s -0.3s ease-in-out infinite alternate;
            animation: float 1.5s -0.3s ease-in-out infinite alternate; }
  .envelope-t {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 91.53543%; }

.link {
  color: #007fe0 !important; }

.btn {
  padding: 10px 26px;
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 0.02em;
  border-radius: 25px;
  background: linear-gradient(0deg, #FF815D -11.44%, #FE6167 42.69%, #FF0A39 100%);
  cursor: pointer; }
  @media only screen and (min-width: 1024px) {
    .btn {
      transition: .3s; }
      .btn:hover {
        transform: scale(1.1); } }
  @media only screen and (max-width: 1023px) {
    .btn {
      padding: 6px 20px;
      font-size: 15px; } }

.anchor {
  transform: translateY(-80px); }
  @media screen and (max-width: 1024px) {
    .anchor {
      transform: translateY(-76px); } }
  @media only screen and (max-width: 767px) {
    .anchor {
      transform: translateY(-58px); } }

.block {
  position: relative;
  padding: 100px 0; }
  .block-wrap {
    position: relative;
    box-sizing: border-box;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
    z-index: 1; }
  .block-head {
    margin-bottom: 40px; }
  .block-tit img {
    width: 446px; }
  .block-desc {
    margin-top: 16px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.45; }
  .block-note {
    margin-top: 32px;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: #454545; }
    .block-note ol {
      line-height: 1.2; }
  .block-deco {
    pointer-events: none; }
    .block-deco > div {
      position: absolute; }
    .block-deco .cloud01 {
      top: 206px;
      right: calc(100% + 187px);
      width: 170px; }
    .block-deco .cloud02 {
      top: 333px;
      left: calc(100% + 204px);
      width: 147px; }
    .block-deco .coin01 {
      top: 181px;
      right: calc(100% + 156px);
      width: 97px;
      -webkit-animation: float-lg 1.5s ease-in-out infinite alternate;
              animation: float-lg 1.5s ease-in-out infinite alternate; }
    .block-deco .coin02 {
      top: 300px;
      left: calc(100% + 150px);
      width: 90px;
      animation: float-lg 1.5s ease-in-out infinite alternate-reverse; }
    .block-deco .envelope01 {
      bottom: 80px;
      right: calc(100% + 112px);
      width: 225px;
      animation: float 1.5s ease-in-out infinite alternate-reverse; }
    .block-deco .envelope02 {
      bottom: 40px;
      left: calc(100% + 81px);
      width: 264px;
      -webkit-animation: float 1.5s ease-in-out infinite alternate;
              animation: float 1.5s ease-in-out infinite alternate; }
    .block-deco .lantern01 {
      top: -100px;
      right: calc(100% + 80px);
      width: 454px;
      transform-origin: top center;
      animation: child 1.5s ease-in-out infinite alternate-reverse; }
    .block-deco .lantern02 {
      top: -100px;
      left: calc(100% + 80px);
      width: 454px;
      transform-origin: top center;
      -webkit-animation: child 1.5s ease-in-out infinite alternate;
              animation: child 1.5s ease-in-out infinite alternate; }
      .block-deco .lantern02 img {
        transform: scaleX(-1); }
    .block-deco .envelope03 {
      top: 375px;
      left: calc(100% - 150px);
      width: 277px; }
    .block-deco .boy {
      bottom: -40px;
      right: calc(100% + 35px);
      width: 277px;
      transform-origin: bottom center;
      -webkit-animation: child 1.5s ease-in-out infinite alternate;
              animation: child 1.5s ease-in-out infinite alternate; }
    .block-deco .girl {
      bottom: -210px;
      left: calc(100% + 24px);
      width: 152px;
      -webkit-animation: shake 1.5s ease-in-out infinite alternate;
              animation: shake 1.5s ease-in-out infinite alternate; }
    .block-deco .flower01 {
      top: 278px;
      left: calc(100% + 10px);
      width: 52px;
      -webkit-animation: flower 6s linear infinite;
              animation: flower 6s linear infinite; }
    .block-deco .flower02 {
      bottom: 36px;
      right: calc(100% + 27px);
      width: 69px;
      -webkit-animation: flower 6s linear infinite;
              animation: flower 6s linear infinite; }
    .block-deco .tree01 {
      top: 318px;
      right: calc(100% - 60px);
      width: 166px; }
    .block-deco .tree02 {
      bottom: -2px;
      left: calc(100% - 132px);
      width: 230px; }
  .block.-b01 {
    background: url(./../images/bg/city.svg) repeat-x bottom center/1920px; }
  .block.-b02 {
    background-color: #FAE5BC; }
  .block.-b04 {
    padding-top: 0; }
  .block.-b04 .block-wrap {
    max-width: 1100px; }
  @media only screen and (max-width: 1023px) {
    .block {
      padding: 90px 0; }
      .block-deco .lantern01 {
        top: -90px;
        right: calc(100% - 110px);
        width: 180px; }
      .block-deco .lantern02 {
        top: -90px;
        left: calc(100% - 110px);
        width: 180px; }
      .block-deco .girl {
        bottom: -130px;
        left: calc(100% - 120px);
        width: 72px; }
      .block-deco .coin01 {
        top: auto;
        bottom: -55px;
        right: calc(100% - 110px);
        width: 42px; }
      .block-wrap {
        padding: 0 20px; }
      .block-head {
        margin-bottom: 26px; }
      .block-tit img {
        width: 260px; }
      .block-desc {
        font-size: 16px; }
      .block-note {
        margin-top: 26px;
        font-size: 12px; }
      .block.-b01 {
        background: none; }
      .block.-b04 {
        padding-bottom: 60px; } }

.table {
  border-radius: 10px 10px 0 0;
  overflow: hidden; }
  .table table {
    width: 100%;
    border: 2px solid #FFCF7B; }
    .table table thead {
      background-color: #FFCF7B; }
      .table table thead th {
        font-size: 20px;
        font-weight: bold;
        border-left: 2px solid #FFF; }
        .table table thead th:first-child {
          border-left: none; }
    .table table tbody {
      background-color: #FFFCF3; }
      .table table tbody td {
        font-size: 18px;
        border: 2px solid #FFCF7B; }
    .table table th,
    .table table td {
      padding: 15px;
      line-height: 1.2;
      vertical-align: middle; }
      .table table th b,
      .table table td b {
        color: #FF4A4A; }
  @media only screen and (max-width: 1023px) {
    .table + .table {
      margin-top: 26px; }
    .table table thead th {
      font-size: 18px; }
    .table table tbody td {
      font-size: 16px; }
    .table table th,
    .table table td {
      padding: 8px; } }

.swiper-pagination {
  position: static;
  margin-top: 40px;
  line-height: 0; }

.swiper .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 5px;
  border-radius: 5px;
  background-color: #D9D9D9;
  opacity: 1;
  transition: width .3s, background-color .3s; }
  .swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 18px;
    background-color: #FF6E6E; }

.envelopes {
  overflow: visible; }
  .envelopes-item {
    position: relative;
    width: 370px;
    height: 195px;
    padding: 12px 0; }
    .envelopes-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 194px;
      height: 100%;
      border-radius: 20px;
      background-color: #E80A4F; }
  .envelopes-content {
    position: relative;
    height: 100%;
    padding: 22px 8px 15px 134px;
    border-radius: 10px;
    background: linear-gradient(89.96deg, #FDF8D4 0%, #FDF9DE 42%, #FFFDF4 100%); }
  .envelopes-num {
    display: inline-block;
    padding: 0 calc(20px - 0.16em) 1px 20px;
    font-size: 19px;
    font-weight: bold;
    color: #FFF;
    letter-spacing: 0.16em;
    line-height: 1.5;
    border-radius: 20px;
    background-color: #F72954; }
  .envelopes-money {
    padding: 16px 0 10px; }
    .envelopes-money > img {
      width: auto;
      height: 51px;
      vertical-align: bottom; }
    .envelopes-money > span {
      margin-left: 4px;
      font-size: 21px;
      font-weight: bold;
      color: #F72249; }
  .envelopes-txt {
    font-size: 18px;
    font-weight: bold;
    color: #6A3900; }
  .envelopes-head {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100%;
    padding-right: 30px;
    border-radius: 20px 0 0 20px;
    background: url(./../images/bg/envelope-t.svg) no-repeat center right/cover; }
    .envelopes-head span {
      flex: 0 0 auto;
      padding: 12px 5px;
      font-size: 28px;
      font-weight: bold;
      color: #F7254D;
      line-height: 1.15;
      text-align: center;
      border-radius: 50px;
      background: linear-gradient(180deg, #FFD552 0%, #FFE294 53.37%, #FFD552 96.64%); }
  @media only screen and (min-width: 1024px) {
    .envelopes-content {
      transition: .3s; }
    .envelopes-item:hover .envelopes-content {
      transform: translateX(7%); } }
  @media only screen and (min-width: 768px) {
    .envelopes {
      padding: 20px;
      border-radius: 15px;
      background-color: #EFD4A1; }
      .envelopes .swiper-wrapper {
        flex-direction: column;
        gap: 40px;
        transform: none !important; }
      .envelopes .swiper-slide {
        display: flex;
        justify-content: center;
        gap: 40px; }
      .envelopes .swiper-pagination {
        display: none; } }
  @media only screen and (max-width: 1023px) {
    .envelopes-item {
      width: 255px;
      height: 135px;
      padding: 8px 0; }
      .envelopes-item::before {
        width: 134px;
        border-radius: 16px; }
    .envelopes-content {
      padding: 11px 6px 8px 94px;
      border-radius: 8px; }
    .envelopes-num {
      padding: 0 calc(14px - 0.16em) 1px 14px;
      font-size: 13px; }
    .envelopes-money {
      padding: 13px 0 7px; }
      .envelopes-money > img {
        height: 34px; }
      .envelopes-money > span {
        margin-left: 3px;
        font-size: 15px; }
    .envelopes-txt {
      font-size: 13px; }
    .envelopes-head {
      width: 104px;
      padding-right: 22px;
      border-radius: 16px 0 0 16px; }
      .envelopes-head span {
        padding: 10px 4px;
        font-size: 19px; } }
  @media only screen and (max-width: 767px) {
    .envelopes {
      padding: 0 32px; }
      .envelopes-item + .envelopes-item {
        margin-top: 30px; }
      .envelopes .swiper-slide {
        width: 255px; } }

.card {
  overflow: visible; }
  .card-item {
    padding: 15px 18px;
    border-radius: 7px;
    background-color: #FFF; }
  .card-pic {
    margin-bottom: 20px;
    font-size: 0; }
  .card-tit {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.32em;
    font-size: 22px;
    line-height: 1.16;
    font-weight: 700;
    color: #FE505E; }
  .card-txt {
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700; }
  .card-action {
    margin-top: 16px; }
    
  @media only screen and (min-width: 768px) {
    .card {
    padding: 40px 20px; /* 增加上下間距 */
    border-radius: 16px;
    background-color: #F72A56; 
    overflow: hidden; /* 確保超出範圍的卡片隱藏，等待滑動 */
  
  }
   .card .swiper-pagination-bullet:nth-child(n+3) {
    display: none !important;
  }

  /* 1. 移除原本隱藏首尾卡片的指令 */
  .card-item:first-child, 
  .card-item:last-child {
    display: block; /* 恢復顯示 */
  }

  .card .swiper-wrapper {
    display: flex;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  /* 強制桌機版游標維持箭頭 (雖然 JS 已設，但 CSS 雙重保險) */
    .card.swiper, .card .swiper-slide {
        cursor: default !important;
    }

  /* 3. 調整每張卡片在 Slide 裡的寬度 */
  .card .swiper-slide {
    height: auto; /* 讓卡片高度一致 */
    display: flex;
    justify-content: center;
  }

  .card-item {
    width: 100%; /* 填滿 swiper-slide */
    max-width: 280px; /* 限制單張卡片最大寬度，避免電腦版太寬 */
    margin: 0 auto;
    transition: transform .3s;
  }

  /* 4. 顯示分頁圓點（原本被設為 none） */
 .card .swiper-pagination {
    display: block;
    text-align: center;
    margin-top: 30px;
  }
 }

  @media only screen and (max-width: 1023px) {
    .card-item {
      flex: 0 0 auto;
      width: 100%;
      padding: 12px 15px; }
    .card-pic {
      margin-bottom: 16px; }
    .card-tit {
      font-size: 18px; }
    .card-txt {
      margin-top: 1px;
      font-size: 16px; }
    .card-action {
      margin-top: 12px; } }

  @media only screen and (max-width: 767px) {
    .card {
      padding: 0 40px !important; }
    .card .swiper-slide {
        height: auto !important; /* 讓 Swiper 根據內容自動撐開高度 */
        display: flex !important; /* 關鍵：讓 Slide 變成 Flex 容器 */
        transition: transform 0.4s ease, opacity 0.4s ease;
        transform: scale(0.9); /* 非活動卡片縮小 10% */
        opacity: 0.6;          /* 非活動卡片半透明 */
        
    }
    .card .swiper-slide-active {
        transform: scale(1);   /* 回復原始大小 */
        opacity: 1;            /* 全亮 */
    }
    .card-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        /* ★ 重要：強制讓所有卡片高度撐滿，達到一樣大 */
        height: 100% !important;
    }
    .card-item .card-tit {
        /* 確保標題區塊高度一致，不會因為文字行數影響整張卡片 */
        min-height: 2.32em; 
    }
    }

.collapse {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
  font-family: "Noto Sans TC", sans-serif, Arial, Helvetica;
  text-align: left;
  border-radius: 10px;
  background-color: #FFF; }
  .collapse .collapse-action {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 25px 0;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #2C2C2C;
    text-decoration: none; }
    .collapse .collapse-action::after {
      content: '＋';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      display: block;
      font-size: 1.2em;
      transition: .3s; }
  .collapse-content {
    display: none;
    padding: 25px 0;
    font-size: 16px;
    color: #2C2C2C;
    border-top: 1px solid #2C2C2C; }
  .collapse.is-open .collapse-action::after {
    content: '－';
    transform: translateY(-50%) rotate(180deg); }
  @media only screen and (max-width: 1023px) {
    .collapse {
      padding: 0 15px;
      border-radius: 10px; }
      .collapse .collapse-action {
        padding: 20px 0;
        font-size: 16px; }
      .collapse-content {
        padding: 20px 0;
        font-size: 14px; } }

ol {
  font-weight: inherit;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.5625em; }
  ol b {
    font-weight: bold; }
  ol a {
    display: inline; }
  ol table {
    width: 100%;
    margin: 0.25em 0;
    border-collapse: collapse;
    border-spacing: 0; }
    ol table thead {
      font-weight: bold; }
    ol table th,
    ol table td {
      padding: 0.25em;
      border: 1px solid #000; }
  ol.chinese {
    list-style-type: none;
    padding-left: 2em; }
    ol.chinese > li {
      position: relative; }
      ol.chinese > li::before {
        content: "(" attr(data-num) ")";
        position: absolute;
        top: 0;
        left: -0.3125em;
        transform: translateX(-100%); }
  ol.brackets {
    list-style-type: none; }
    ol.brackets > li {
      position: relative;
      counter-increment: section; }
      ol.brackets > li::before {
        content: "(" counter(section, decimal) ")";
        position: absolute;
        top: 0;
        left: -0.3125em;
        transform: translateX(-100%);
        min-width: 1.25em;
        text-align: center; }
  ol.cjk {
    list-style-type: none;
    padding-left: 2em; }
    ol.cjk > li {
      position: relative; }
      ol.cjk > li::before {
        content: attr(data-num) "、";
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-100%); }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: 1em; }

p {
  margin: 0; }

b {
  font-weight: bold; }

.-gTxt {
  display: inline-block; }

.-rdTxt {
  color: #E82512; }

@media only screen and (max-width: 1023px) {
  .-pc {
    display: none !important; } }

@media only screen and (max-width: 767px) {
  .-pc-pad {
    display: none; } }

@media only screen and (min-width: 1024px) {
  .-pad {
    display: none; } }

@media only screen and (max-width: 767px) {
  .-pad {
    display: none; } }

@media only screen and (min-width: 1024px) {
  .-mb-pad {
    display: none; } }

@media only screen and (min-width: 768px) {
  .-mb {
    display: none; } }

.-hidden {
  display: none !important; }

  .card-item {
    /* 防止拖拽時選取到文字，提升滑動順暢度 */
    user-select: none;
    -webkit-user-drag: none;
}
.card.swiper {
    position: relative;
    z-index: 20 !important;
    touch-action: pan-y !important; /* 告訴瀏覽器：這區塊允許左右滑動 */
}
/* 2. 徹底穿透背景裝飾物（雲朵、金幣） */
.block-deco, 
.block-deco div {
    pointer-events: none !important;
    z-index: 1;
}

.card-item {
    /* 防止滑鼠拖拽時選到文字 */
    user-select: none;
    -webkit-user-select: none;
    
    /* 防止瀏覽器預設的圖片拖動行為 */
    -webkit-user-drag: none;
}

.card-item img {
    pointer-events: none; /* 確保滑鼠是點在卡片上而非圖片上 */
}

.card-item .btn {
    pointer-events: auto; /* 只有按鈕恢復點擊功能 */
}