a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  scroll-behavior: smooth;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  color-scheme: light only;
  --wrapper-width: 1280px;
  --wrapper-padding: 8px;
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

[v-cloak] {
  opacity: 0;
  visibility: hidden;
}

body {
  /* Prevent scroll chaining */
  overscroll-behavior-y: contain;
  /* scroll bar space */
  scrollbar-gutter: stable;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif, monospace;
  max-width: 1920px;
  margin: 0 auto;
  line-height: 1.3;
  background: #fff;
}

#app {
  overflow-x: hidden;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Remove default input eye */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

/* scrollbar */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Transition */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

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

.base-wrapper {
  width: var(--wrapper-width);
  max-width: 100%;
  padding: 40px var(--wrapper-padding);
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .base-wrapper {
    padding: 80px var(--wrapper-padding);
  }
}

.font-bold {
  font-weight: 700;
}

.base-link {
  overflow-wrap: break-word;
  text-decoration: none;
  color: #000;
}

.base-btn {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
}

.text-blue {
  color: #0072c1;
  font-weight: 700;
}

.base-remark {
  font-size: 12px;
  color: #484848;
}

@media screen and (min-width: 768px) {
  .base-remark {
    font-size: 14px;
  }
}

.base-shadow {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07);
}

.header {
  position: relative;
  background-color: #fff;
  z-index: 1;
}

.header .base-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--wrapper-padding);
}

.footer {
  width: 100%;
  position: relative;
  color: #313e54;
  background: #f2f2f2;
  padding: 40px 0px 0;
  font-weight: bold;
  --background-rainbow: linear-gradient(90deg,
      #df1c4b 0%,
      #f41f5e 15%,
      #f96585 25%,
      #f8613c 40%,
      #b495cd 50%,
      #ceabf9 60%,
      #797df2 75%,
      #489cf6 85%,
      #6f59ed 100%);
}

.footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 16px;
  top: 0;
  background: var(--background-rainbow);
}

.footer .footer-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 24px;
}

.footer .footer-company-name {
  font-size: 22px;
  margin: 16px 0;
}

.footer .footer-company-desc {
  font-size: 14px;
}

.footer .footer-head-contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
  font-weight: 700;
}

.footer .footer-head-phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.footer .footer-head-phone-number {
  font-size: 30px;
  color: #021d3a;
  text-decoration: none;
}

.footer .footer-social-media {
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px;
}

.footer .footer-social-media-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  -webkit-transition: 0.3s ease all;
  transition: 0.3s ease all;
  background: #021d3a;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
}

.footer .footer-warning {
  position: relative;
  padding: 24px 0 0;
}

.footer .footer-warning::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: -2px;
  background: var(--background-rainbow);
}

.footer .footer-warning ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  font-size: 15px;
}

.footer .footer-warning ul li {
  margin-bottom: 16px;
  line-height: 1.5;
}

.footer .footer-copyright-text {
  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;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: 12px;
  border: solid 1px #50ffcf;
  margin: auto;
  padding: 4px 32px;
  border-radius: 30px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(75, 153, 255, 0.4)), to(rgba(214, 125, 255, 0.5)));
  background: linear-gradient(90deg, rgba(75, 153, 255, 0.4) 0%, rgba(214, 125, 255, 0.5) 100%);
  line-height: 1.2rem;
}

.footer .footer-bottom-contact {
  position: relative;
  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;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: #fff;
  background-color: #021d3a;
  padding: 16px 0;
  margin: 40px 0 0;
}

.footer .footer-bottom-contact::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  top: -4px;
  background: var(--background-rainbow);
}

@media screen and (max-width: 1199px) {
  .footer .footer-head img {
    margin: auto;
  }
}

@media screen and (min-width: 769px) {
  .footer .footer-head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
  }

  .footer .footer-social-media {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
}

@media screen and (min-width: 1200px) {
  .footer .footer-head {
    text-align: left;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .footer .footer-head-contact {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }

  .footer .footer-head-phone {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.go-top-icon {
  position: fixed;
  bottom: 64px;
  right: 16px;
  border-radius: 50%;
  z-index: 1;
  width: 48px;
  height: 48px;
  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;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.go-top-icon:hover {
  opacity: 0.8;
}

.go-top-enter-active,
.go-top-leave-active {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.go-top-enter,
.go-top-leave-to {
  -webkit-transform: translateY(120px);
  transform: translateY(120px);
}

@media screen and (max-width: 767px) {


  .go-top-caret-icon {
    font-size: 24px;
  }

  .go-top-text {
    display: none;
  }

  .section-banner .pic-banner {
    margin-top: 70px;
  }

  .section-banner .text {
    position: relative !important;
    z-index: 20 !important;
    /* 蝴蝶的 z-index 通常為 5 或 10，設定 20 可確保文字在最上層 */
    top: 50px;
    /* 向上移動 ，數字越大移越多 */
  }

  .section-banner .text .title {}

  .section-banner .text .title-1 {
    font-size: 47px;
  }

  .section-banner .text .subtitle {
    letter-spacing: 3px;
  }

}

.section-banner {
  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;
  background: url("../images/bannerBg.png") no-repeat bottom/cover;
  min-height: auto !important;
  /* 取消原本可能存在的最小高度限制 */
  height: 600px;
  /* 設定一個固定的高度，例如從 800px 縮短至 600px，數值請依需求調整 */
  overflow: hidden;
  /* 確保超出高度的內容（如圖片底部）被隱藏 */
  display: flex;
  align-items: center;
  /* 讓內容在縮短後的區塊中垂直居中 */
}

.section-banner .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
  font-size: 20px;
  padding: 0 8px;
  padding-left: max(20px, (100% - 1280px) / 2);
}

.section-banner .text .title {
  display: inline-block;
  font-size: 40px;
  font-weight: 700;
  background: -webkit-gradient(linear, left top, right top, from(#00abd9), color-stop(#0072c1), to(#00abd9));
  background: linear-gradient(to right, #0d2b6e, #2451bb, #0d2b6e, #09359c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}



.section-banner .text .subtitle {
  position: relative;
  color: #000000;
  margin: 10px 0 35px 0;
  font-weight: 600;
}

.section-banner .text .subtitle::after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 0;
  width: 100%;
  height: 4px;
  background: -webkit-gradient(linear, left top, right top, from(#0072c1), color-stop(#0072c1), to(#4d8fcc));
  background: linear-gradient(to right, #0072c1, #0d2b6e, #4d8fcc);
}

@media screen and (min-width: 768px) {
  .section-banner .text {
    position: relative;
    /* 確保位移屬性生效 */
    top: 0px;
    /* 向上移動 ，數字越大移越多 */
    font-size: 24px;
  }

  .section-banner .text .title {
    font-size: 64px;
    letter-spacing: 3.6px;
  }

  .section-banner .text .title-1 {
    margin-right: 32px;
  }

  .section-banner .text .subtitle {
    letter-spacing: 7.1px;
  }

}

@media screen and (min-width: 1024px) {

  .banner-dynamic-group {
    position: relative;
    /* 確保相對定位開啟 */
    left: -70px;
    /* [調整這裡] 負值代表向左移，數字越大移越多 */

    /* 如果你發現圖組移動後，滑鼠追蹤視差失效了，
           請確保這行也有保留（或是合併到 Vue 的 parallaxStyle 中） */
  }

  .section-banner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 40px;
  }

  

  .section-banner .text {
    position: relative;
    /* 確保位移屬性生效 */
    top: -20px;
    /* 向上移動 ，數字越大移越多 */
    width: 50%;
  }

  .section-banner .pic-banner {
    margin-top: 220px;
    width: 50%;
  }

  .section-banner .text .title-1 {
    font-size: 50px;
    letter-spacing: 0px;
  }


  .section-banner .text .subtitle {
    letter-spacing: 9px;
  }
}

.section-quote .base-wrapper {
  padding: 80px var(--wrapper-padding);
}

.section-quote .content {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-weight: 700;
  font-size: 20px;
  position: relative;
  padding: 0 24px;
}

.section-quote .quote {
  position: absolute;
  font-size: 64px;
}

.section-quote .quote-start {
  top: -40px;
  left: -40px;
}

.section-quote .quote-end {
  bottom: -8px;
  right: -40px;
}

.section-quote .base-remark {
  font-weight: normal;
  margin-top: 32px;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .section-quote .base-wrapper {
    padding: 104px var(--wrapper-padding);
  }

  .section-quote .content {
    font-size: 30px;
  }
}

.section-performance .title {
  font-weight: 700;
  text-align: center;
  font-size: 30px;
  background: linear-gradient(to right, #0d2b6e, #2451bb, #0d2b6e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 30px;
}

.section-performance .table {
  width: 100%;
}

.section-performance .table thead {
  background: #4d8fcc;
  color: #fff;
}

.section-performance .table tbody tr:nth-child(odd) {
  background: #edf6ff;
}

.section-performance .table th,
.section-performance .table td {
  font-size: 16px;
  padding: 7px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.section-performance .table .name {
  text-align: left;
}

.section-performance .table-1 {
  margin-top: 24px;

}

.section-performance .table-1 thead {
  background: #4d8fcc;
  color: #fff;
}

.section-performance .table-1 tbody tr:nth-child(odd) {
  background: #edf6ff;
}

.section-performance .link {
  font-size: 20px;
  margin: 8px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  font-weight: 700;
}

.section-performance .link .icon-go {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #000;
}

@media screen and (min-width: 768px) {
  .section-performance .title {
    font-size: 40px;
  }

  .section-performance .table th,
  .section-performance .table td {
    font-size: 20px;
    padding: 16px;
  }

  .section-performance .table-1 {
    margin-top: 56px;
  }

  .section-performance .link {
    font-size: 24px;
  }

  .section-performance .link .icon-go {
    width: 40px;
    height: 40px;
  }
}

@media screen and (min-width: 1024px) {
  .section-performance .title {
    font-size: 48px;
  }
}

.section-highlight {
  overflow: hidden;
}

.section-highlight .base-wrapper {
  position: relative;
  padding: 40px 24px;
  height: 100%;
}

.section-highlight .first {
  color: #fff;
  background: -webkit-gradient(linear, left top, right top, from(#3769ff), to(#4d8fcc));
  background: linear-gradient(to right, #3769ff, #4d8fcc);
}

.section-highlight .first .title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px;
}

.section-highlight .first .num {
  position: absolute;
  color: #fff;
  opacity: 0.2;
  font-weight: 700;
  font-size: 200px;
  bottom: -64px;
  right: -24px;
}

.section-highlight .second .base-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
}

.section-highlight .second .title {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.section-highlight .second .item:nth-child(1) .title {
  color: #0072c1;
}

.section-highlight .second .item:nth-child(2) .title {
  color: #0072c1;
}

.section-highlight .second .item:nth-child(3) .title {
  color: #4d8fcc;
}

@media screen and (min-width: 768px) {
  .section-highlight .first .title {
    font-size: 48px;
  }

  .section-highlight .first .subtitle {
    font-size: 24px;
  }

  .section-highlight .first .num {
    bottom: -32px;
  }

  .section-highlight .second .title {
    font-size: 32px;
  }

  .section-highlight .second .desc {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  .section-highlight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .section-highlight .base-wrapper {
    padding: 40px 80px;
  }

  .section-highlight .first {
    width: 40%;
    position: relative;
  }

  .section-highlight .first::after {
    content: "";
    position: absolute;
    top: 80px;
    right: -56px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 56px 0 56px 56px;
    border-color: transparent transparent transparent #4d8fcc;
  }

  .section-highlight .first .title {
    margin-bottom: 64px;
  }

  .section-highlight .second {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .section-highlight .second .base-wrapper {
    gap: 80px;
  }
}

.section-now {
  background: #4d8fcc;
}

.section-now .base-wrapper {
  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;
}

.section-now .title {
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  margin-bottom: 30px;
}

.section-now .subtitle {
  font-weight: 700;
  color: #fff;
}

.section-now .swiper {
  width: 100%;
  margin-top: 32px;
}

.section-now .swiper-button-next,
.section-now .swiper-button-prev {
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px;
  border-radius: 50%;
}

.section-now .swiper-button-disabled {
  display: none;
}

.section-now .card {
  width: 336px;
  height: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 24px;
  background: #fff;
  color: #000;
  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;
  border-radius: 8px;
}

.section-now .card:last-child {
  margin-right: 0 !important;
}

.section-now .card .card-title {
  color: #B50000;
  font-weight: 900;
  margin: 30px 0px 10px 0px;
}

.section-now .card .card-desc {
  margin: 4px 0 35px;
  font-weight: 600;
}

.section-now .card .card-tag {
  color: #fff;
  background: #4d8fcc;
  padding: 8px;
  width: 100%;
  text-align: center;
  border-radius: 16px;
  margin-bottom: 16px;
}

.section-now .card .circle {
  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-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 160px;
  aspect-ratio: 1/1;
  border: 8px solid;
  border-radius: 50%;
}

.section-now .card .circle-top {
  border-color: #0072c1;
}

.section-now .card .circle-bottom {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  border-color: #0072c1;
}

.section-now .base-remark {
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
  .section-now .title {
    font-size: 48px;
  }

  .section-now .subtitle {
    font-size: 20px;
  }

  .section-now .card {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }

  .section-now .card .card-title {
    font-size: 24px;
  }

  .section-now .card .card-desc {
    font-size: 20px;
  }

  .section-now .card .circle {
    font-size: 20px;
  }
}

.section-why .base-wrapper {
  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;
}

.section-why .title {
  font-size: 30px;
  font-weight: 700;
  color: #0072c1;
  margin-bottom: 30px;
}

.section-why .subtitle {
  font-weight: 700;
}

.section-why .tag {
  width: 100%;
  background: #d9d9d9;
  padding: 8px;
  font-size: 14px;
  border-radius: 16px;
  text-align: center;
  margin: 32px 0 16px;
}

.section-why .base-remark {
  margin-top: 8px;
}

@media screen and (min-width: 768px) {
  .section-why .title {
    font-size: 48px;
  }

  .section-why .subtitle {
    font-size: 24px;
  }
}

.section-change .base-wrapper {
  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;
}

.section-change .title {
  font-size: 30px;
  font-weight: 700;
  color: #0072c1;
  margin-bottom: 20px;
  text-align: center;
}

.section-change .subtitle {
  font-weight: 700;
}

.section-change .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin: 24px 0 16px;
}

.section-change .content-left,
.section-change .content-right {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.section-change .content .icon {
  font-size: 40px;
  color: #4d8fcc;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.section-change .content .year {
  font-weight: 700;
}

.section-change .content .item {
  font-size: 14px;
  padding: 4px;
  background: #e1f0ff;
}

.section-change .content .item-highlight {
  color: #fff;
  background: #4d8fcc;
}

@media screen and (min-width: 768px) {
  .section-change .title {
    font-size: 48px;
  }

  .section-change .subtitle {
    font-size: 24px;
  }

  .section-change .content {
    gap: 32px;
  }

  .section-change .content .year {
    font-size: 24px;
    text-align: center;
  }

  .section-change .content .icon {
    font-size: 80px;
  }

  .section-change .content .item {
    font-size: 20px;
    padding: 8px 16px;
  }
}

@media screen and (min-width: 1024px) {
  .section-change .content .item {
    padding: 8px 32px;
    white-space: nowrap;
  }
}

.section-effect .base-wrapper {
  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;
}

.section-effect .title {
  font-size: 30px;
  font-weight: 700;
  color: #0072c1;
  margin-bottom: 35px;
  text-align: center;
}

.section-effect .subtitle {
  font-weight: 700;
}

.section-effect .content {
  margin: 0 0 16px;
}

.section-effect .bar-circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 32px 0;
}

.section-effect .circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 176px;
  aspect-ratio: 1/1;
  border: 8px solid;
  border-radius: 50%;
}

.section-effect .circle-left {
  border-color: #4d8fcc;
}

.section-effect .circle-right {
  -webkit-transform: translateX(-16px);
  transform: translateX(-16px);
  border-color: #0072c1;
}

.section-effect .base-remark {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

@media screen and (min-width: 768px) {
  .section-effect .title {
    font-size: 48px;
  }

  .section-effect .subtitle {
    font-size: 24px;
  }

  .section-effect .circle {
    width: 240px;
    font-size: 20px;
  }

}

@media screen and (min-width: 1024px) {
  .section-effect .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .section-effect .content {
    margin: 24px 0 16px;
  }

  .section-effect .bar-circle {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .section-effect .circle-right {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
  }

  .section-effect .pic-effect {
    width: 10%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}

.section-link {
  background: url("../images/bg.png") no-repeat 80%/cover;
  margin-top: -70px;
}

.section-link .base-wrapper {
  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;
  gap: 30px;
}

.section-link .base-link {
  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-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 16px;
  border-radius: 8px;
  min-height: 160px;
  font-size: 20px;
  width: 100%;
  -webkit-transition: 0.4s opacity;
  transition: 0.4s opacity;
}

.section-link .base-link .name {
  color: #fff;
}

.section-link .base-link:nth-child(1) {
  background: #0072c1;
}

.section-link .base-link:nth-child(2) {
  background: #4d8fcc;
}

.section-link .base-link:hover {
  opacity: 0.8;
}

.section-link .detail {
  margin-top: 16px;
  text-align: right;
  font-size: 16px;
}

.section-link .icon-go {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #000;
}

@media screen and (min-width: 768px) {
  .section-link .base-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 24px;
  }

  .section-link .base-link {
    font-size: 32px;
    height: auto;
    padding: 32px;
  }

  .section-link .detail {
    font-size: 24px;
  }

  .section-link .icon-go {
    width: 40px;
    height: 40px;
  }
}

@media screen and (min-width: 1024px) {
  .section-link {
    padding: 40px var(--wrapper-padding);
  }
}

@media screen and (min-width: 768px) {
  .change-line {
    display: inline-block;
  }

  .fund-desc {
    font-size: 24px;
    /* 手機版基金文字同步縮小 */
    width: 95%;
    /* 自動填滿容器寬度 */

  }
}


/* ==========================================================================
   Why Now 卡片 CTA 按鈕樣式
   ========================================================================== */

/* 確保 a 標籤填滿卡片，並修正原本的行內樣式 */
.card-link-wrapper {
  text-decoration: none !important;
  /* 移除底線 */
  color: inherit !important;
  /* 繼承文字顏色 */
  display: flex !important;
  /* 使用 Flex 佈局 */
  flex-direction: column;
  /* 直式排列內容 */
  align-items: center;
  /* 水平居中 */
  height: 100%;
  /* 填滿卡片高度 */
  width: 100%;
  /* 填滿卡片寬度 */
  padding-bottom: 20px;
  /* 底部留白，給按鈕空間 */
  box-sizing: border-box;
  /* 確保 padding 不影響寬度計算 */
}

/* CTA 按鈕主體：長的膠囊形色塊 */
.card-cta {
  display: inline-flex;
  /* 使用 Flex 佈局讓文字和圖示對齊 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  background-color: #00448a;
  /* 按鈕背景顏色 (建議使用富蘭克林的企業藍色，請自行調整) */
  color: #ffffff !important;
  /* 文字顏色為白色 */
  padding: 13px 40px;
  /* 上下、左右內邊距，調整按鈕大小 */
  border-radius: 50px;
  /* 膠囊形狀的關鍵：圓角半徑設大 */
  font-size: 20px;
  /* 文字大小 */
  font-weight: bold;
  /* 文字加粗 */
  margin-top: auto;
  /* 關鍵：將按鈕推至卡片底部 */
  transition: background-color 0.3s ease, transform 0.2s ease;
  /* 加色塊變化和縮放動畫 */
}

/* 小三角形圖示樣式 */
.cta-icon {
  margin-left: 8px;
  /* 與文字的間距 */
  font-size: 14px;
  /* 圖示大小 */
  transition: transform 0.3s ease;
  /* 加圖示位移動畫 */
}

/* 滑鼠懸停 (Hover) 時的交互效果 */
.card-link-wrapper:hover .card-cta {
  background-color: #0056b3;
  /* 懸停時背景變深 */
  transform: translateY(-2px);
  /* 輕微上移，增加點擊感 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  /* 陰影變深 */
}

/* 滑鼠懸停時，小三角形往右指的動畫 */
.card-link-wrapper:hover .cta-icon {
  transform: translateX(3px);
  /* 圖示向右移動 3px */
}




/* 動態圖組總容器 */
.banner-dynamic-group {
  position: relative;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s cubic-out;
  /* 讓滑鼠追蹤更平滑 */
  z-index: 2;
  top: 26%;
}

/* 呼吸浮動層 */
.banner-float-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  animation: floating 4s ease-in-out infinite;
}

/* 火箭主體 */
.rocket-center {
  width: 120px;
  /* 依比例調整，原始 180px 的寬度在網頁上可微調 */
  height: auto;
  position: relative;
  z-index: 10;
}

/* 翅膀通用樣式 */
.wing {
  width: 400px !important;
  /* 設定你想要的寬度 */
  max-width: none !important;
  /* 關鍵：強制不允許最大寬度限制 */
  height: auto !important;
  position: absolute;
  top: 33%;
  z-index: 5;
  transform: translateY(-50%);
  animation: wingFlap 2s ease-in-out infinite;
}

/* 左翅：固定右邊，向左縮放 */
.wing-left {
  right: 80%;
  /* 貼齊火箭左側 */
  transform-origin: right center;
}

/* 右翅：固定左邊，向右縮放 */
.wing-right {
  left: 80%;
  /* 貼齊火箭右側 */
  transform-origin: left center;
}

/* --- 動畫關鍵幀 --- */

/* 1. 上下浮動 (呼吸感) */
@keyframes floating {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* 2. 翅膀開合 (100% ~ 85%) */
@keyframes wingFlap {

  0%,
  100% {
    transform: translateY(-50%) scaleX(1.);
  }

  50% {
    transform: translateY(-50%) scaleX(0.7);
  }
}

/* 手機版適應性調整 */
@media screen and (max-width: 1023px) {
  .banner-dynamic-group {
    width: 100%;
    margin-top: -50px;
  }

  .rocket-center {
    width: 80px;
  }

  .wing {
    width: 350px;
  }


}




/* ==========================================================================
   全新 SVG 高質感 GDP 圓餅圖
   ========================================================================== */

/* 膠囊型灰底主標題 */
.gdp-main-title {
  background-color: #ffffff;
  color: #333;
  border-radius: 50px;
  padding: 12px 60px;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  width: max-content;
  margin: 40px auto;
  margin-bottom: 10px;
}

.gdp-charts-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 130px;
  margin: 30px 0 60px 0;
}

.gdp-chart-item {
  text-align: center;
  width: 300px;
  /* 整體寬度放大 50% (原為 200px) */
  position: relative;
}

/* 為了讓底部有對齊的底線 (參考圖中各圖表下方的橫線) */
.gdp-chart-item::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #999;
  margin: 30px 0;
}



.gdp-svg-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.gdp-svg {
  width: 100%;
  height: 100%;
  /* 平滑過渡動畫 */
  transition: all 0.1s linear;
}

/* 中心金屬質感圓心與年份 */
.pie-center-metallic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  /* 回復精緻的漸層與多重陰影 */
  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #cfcfcf 100%);
  border-radius: 50%;
  border: 2px solid #b0b0b0;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.2),
    inset 0 -2px 5px rgba(255, 255, 255, 0.8),
    0 5px 15px rgba(0, 0, 0, 0.1),
    0 0 0 8px rgba(255, 255, 255, 0.5);
  /* 外圈發光環 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 42px;
  font-weight: 900;
  font-style: italic;
  color: #444;
  text-shadow: 1px 1px 0px #fff;
}

/* 底部放大的數據排版 */
.gdp-data-box {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  text-align: center;
}

.gdp-data-line {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 方塊色標 */
.square-red {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #B50000;
  margin-right: 10px;
}

.square-blue {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #0072c1;
  margin-right: 10px;
}

/* 加大加粗的數字 */
.gdp-data-percent {
  font-size: 36px;
  font-weight: 900;
  margin-left: 10px;
  margin-bottom: 10px;
  font-style: italic;
}

.text-red {
  color: #B50000;
}

.text-blue {
  color: #0072C1;
}

/* 手機版適應 */
@media screen and (max-width: 768px) {
  .gdp-main-title {
    font-size: 16px;
    padding: 10px 30px;
    max-width: 90%;
    white-space: normal;
    margin-bottom: 0px;
  }

  /* 動態圖組總容器 */
  .banner-dynamic-group {
    position: relative;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s cubic-out;
    /* 讓滑鼠追蹤更平滑 */
    z-index: 2;
    top: 17%;
  }

  /* 火箭主體 */
  .rocket-center {
    width: 60px;
    /* 依比例調整，原始 180px 的寬度在網頁上可微調 */
    height: auto;
    position: relative;
    z-index: 10;
    top: 10%;
  }

  /* 翅膀通用樣式 */
  .wing {
    width: 200px !important;
    /* 設定你想要的寬度 */
    max-width: none !important;
    /* 關鍵：強制不允許最大寬度限制 */
    height: auto !important;
    position: absolute;
    top: 33%;
    z-index: 5;
    transform: translateY(-50%);
    animation: wingFlap 2s ease-in-out infinite;
  }

  .section-link {
    /* 移除了錯誤的等號，並直接將位置設定為 20%(水平) 100%(垂直貼齊底部) */
    background: url("") no-repeat 20% 80% / cover !important;
    margin-top: -30px;
    margin-bottom: 20px;
    padding: 0 15px;
  }
}






/* 僅移除「最後一個」圓餅圖下方的橫線 */
.gdp-chart-item:last-child::after {
  display: none !important;
}

/* ==========================================================================
   刊頭新版副標題樣式 (電腦版單行 / 手機版雙行)
   ========================================================================== */

.new-subtitle-style {
  position: relative;
  /* 為了定位底線 */
  display: flex;
  flex-direction: row;
  /* 電腦版預設：水平排列 */
  flex-wrap: wrap;
  /* 允許換行 */
  margin: 20px 0 60px 0 !important;
  width: fit-content;
  /* 讓容器寬度隨內容縮放，底線才不會過長 */
}

/* 重新加入藍色漸層底線 */
.new-subtitle-style::after {
  content: "";
  position: absolute;
  bottom: -24px;
  /* 調整底線與文字的距離 */
  left: 0;
  width: 100%;
  /* 寬度跟隨容器文字 */
  height: 4px;
  background: linear-gradient(to right, #0072C1, #0072C1, #4d8fcc);
}

.subtitle-line {
  display: flex;
  align-items: center;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 40px;
  white-space: nowrap;
  /* 確保每一小組文字不會自己斷行 */
}

/* 紅底白字圓形 */
.circle-char {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #B50000;
  color: #FFFFFF;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 5px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}


.text-blue-part {
  color: #071f55;
}

.text-red-part {
  color: #B50000;
}





/* --------------------------------------------------------------------------
   手機版 (Media Query)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .new-subtitle-style {
    flex-direction: row !important;
    /* 強制橫排 */
    flex-wrap: nowrap !important;
    /* 絕對不換行 */
    justify-content: flex-start;
    margin-bottom: 20px !important;
  }

  .subtitle-line {
    font-size: 28px !important;
    /* 縮小字體以塞進手機螢幕 */
    letter-spacing: 0px !important;
  }

  .circle-char {
    width: 40px !important;
    /* 縮小圓圈 */
    height: 40px !important;
    font-size: 32px !important;
    margin-right: 4px !important;
  }

  .banner-content-wrapper::after {
    margin-top: -30px;
    /* 配合縮小的文字調整底線位置 */
  }

  .fund-desc {
    font-size: 22px;
    /* 手機版基金文字同步縮小 */
    width: 98%;
    /* 自動填滿容器寬度 */

  }
}



/* 包裹容器：決定底線的總寬度 */
.banner-content-wrapper {
  position: relative;
  width: fit-content;
  /* 關鍵：寬度隨內部最寬的文字伸縮 */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 將底線改到此容器上，確保寬度一致 */
.banner-content-wrapper::after {
  content: "";
  position: absolute;
  top: 115px;
  /* 定位在副標題下方、基金名稱上方 */
  left: 0;
  width: 95%;
  /* 自動填滿容器寬度 */
  height: 5px;
  background: linear-gradient(to right, #0072c1, #0072c1, #4d8fcc);
}

/* 移除原本副標題上的底線設定 */
.new-subtitle-style::after {
  display: none !important;
}

/* 調整基金文字間距，避免壓到線 */
.fund-desc {
  margin-top: 0px;
  line-height: 1.2;
}







/* ==========================================================================
   持股龍頭卡片網格樣式 (電腦版 5x2 / 手機版 2x5)
   ========================================================================== */

.holdings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 電腦版：5個色塊一排 */
  gap: 20px;
  /* 色塊間距 */
  width: 1200px;
  /* 總寬度 */
  max-width: 100%;
  /* 避免超出螢幕 */
  margin: 40px auto;
  /* 居中並調整間距 */
}

.holding-item {
  background-color: #e1f0ff;
  /* 指定背景色 */
  border-radius: 12px;
  /* 圓角色塊 */
  padding: 24px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  text-align: center;
  transition: transform 0.3s ease;
}

/* 滑鼠懸停微位移效果 */
.holding-item:hover {
  transform: translateY(-5px);
}

.holding-logo {
  width: auto;
  height: 150px;
  /* 統一 LOGO 高度 */
  object-fit: contain;
  /* 保持 LOGO 比例不變形 */
  margin-bottom: 15px;
}

.holding-name {
  font-size: 22px;
  font-weight: 700;
  color: #174A92;
  /* 企業名稱顏色 */
  margin-bottom: 5px;
}

.holding-desc {
  font-size: 14px;
  color: #666;
  /* 描述文字顏色 */
}

/* --------------------------------------------------------------------------
   手機版 (RWD)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
  .holdings-grid {
    width: 100%;
    padding: 0 16px;
  }
}

@media screen and (max-width: 1023px) {
  .holdings-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 手機版：2個色塊一排 */
    gap: 12px;
  }

  .holding-item {
    padding: 15px 10px;
  }

  .holding-logo {
    height: 100px;
  }

  .holding-name {
    font-size: 22px;
  }

  .holding-desc {
    font-size: 13px;
  }
}



/* ==========================================================================
   快捷導覽標籤 (Quick Nav)
   ========================================================================== */

.kv-quick-nav-section {
  position: relative;
  z-index: 20;
  max-width: 630px;
  margin: 40px auto;

}

.quick-nav-section {
  position: relative;
  z-index: 20;
  max-width: 1320px;
  margin: -90px auto 40px;
  padding: 0 20px;
}

.kv-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: left;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.kv-nav-item {
  position: relative;
  background-color: #B50000;
  color: #ffffff;
  border-radius: 5px;
  padding: 15px 30px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;

  /* 確保內容在按鈕內完全居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-item {
  position: relative;
  background-color: #0056b3;
  color: #ffffff;
  border-radius: 50px;
  padding: 15px 10px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;

  /* 確保內容在按鈕內完全居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-item:hover {
  background-color: #4594e9;
  transform: translateY(-5px);
}

.kv-nav-text {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 3px;
  margin: 0 20px;

  /* Flex 排版讓文字與三角形左右並排並垂直置中 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* 文字與三角形的間距 */
}

.nav-text {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 3px;
  margin-left: 20px;
  padding-bottom: 5px;

  /* Flex 排版讓文字與三角形左右並排並垂直置中 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* 文字與三角形的間距 */
}

/* 確保電腦版雙行文字本身是置中對齊的 */
.nav-text-inner {
  text-align: center;
}

/* 三角形圖示大小 (與文字相近) */
.nav-icon {
  font-size: 30px;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   手機版 (Mobile)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {


  .nav-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 隱藏換行符號，讓文字變成單行 */
  .desktop-br {
    display: none;
  }

  .nav-item {
    /* 降低手機版按鈕高度：縮小 padding 與 min-height */
    padding: 10px 20px;
    min-height: 44px;
  }

  .nav-item:hover {
    transform: none;
  }

  .nav-text {
    font-size: 22px;
    font-weight: 500;
    width: 100%;
    /* 確保手機版文字與三角形完美置中 (移除先前為蝴蝶留的 padding-left) */
    padding-left: 0;
  }

  .nav-text-inner {
    white-space: nowrap;
    /* 強制不換行 */
  }

  .nav-icon {
    font-size: 28px;
    margin-top: 4px;
  }
}


/* ==========================================================================
   GDP 圓餅圖手機版左右排列 (RWD)
   ========================================================================== */
@media screen and (max-width: 767px) {

  /* 1. 總容器：垂直堆疊三個圓餅圖項目 */
  .gdp-charts-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-left: -20px;
  }

  /* 2. 單一項目：圖表在左、數據在右 */
  .gdp-chart-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 0 20px 0;
    /* 預留底部橫線的空間 */
  }

  /* 修正底部分隔線的位置 */
  .gdp-chart-item::after {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    margin: 0;
  }

  /* 3. 縮小圓餅圖尺寸 (適合手機螢幕) */
  .gdp-svg-wrapper {
    width: 220px;
    height: 220px;
    margin: 0;
    flex-shrink: 0;
    /* 確保圖表不會被文字擠壓 */
  }

  /* 縮小金屬圓心與字體 */
  .pie-center-metallic {
    width: 105px;
    height: 105px;
    font-size: 32px;
    border-width: 2px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 -2px 5px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* 4. 右側數據區塊排版 */
  .gdp-data-box {
    margin-top: 0;
    margin-left: 20px;
    text-align: left;
    width: 150px;
    /* 固定寬度讓上下兩行數據對齊 */
    gap: 20px;
    /* 增加紅、藍區塊的間距 */
  }

  /* 讓方塊與文字保持同一行，並允許百分比斷行 */
  .gdp-data-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
  }

  .square-red,
  .square-blue {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }

  /* 5. 百分比數字強制換行並放大靠右 */
  .gdp-data-percent {
    width: 100%;
    text-align: right;
    font-size: 34px;
    margin-top: 6px;
    margin-left: 0;
    margin-bottom: 0;
  }

  .gdp-data-percent span {
    font-size: 16px !important;
    /* % 符號縮小 */
  }
}




/* ==========================================================================
   Why Now 區塊：卡片排版優化 (電腦版 + 手機版)
   ========================================================================== */

/* --------------------------------------------------------------------------
   電腦版 (Desktop) - Icon置中、適當間距
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {

  
  .kv-quick-nav-section {
    margin-left: 0px;
  }

  .section-now .card a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
  }

  .section-now .card a img {
    width: 160px !important;
    /* 恢復電腦版應有的大尺寸 */
    height: auto;
    margin: 0 auto 30px auto !important;
    /* Icon 置中，並與下方紅字保持 30px 距離 */
    display: block;
  }

  .section-now .card-title {
    font-size: 34px !important;
    margin: 0 0 10px 0 !important;
    text-align: center;
  }

  .section-now .card-desc {
    font-size: 26px !important;
    margin: 0 0 35px 0 !important;
    text-align: center;
    font-weight: 500 !important;
  }
}





/* ==========================================================================
   Why Now 區塊：電腦版卡片微調 (Icon置中與適當距離)
   ========================================================================== */
.section-now .card a img {
  display: block;
  margin: 20px 0 10px 0 !important;
  /* 確保圖片水平置中 */
  width: 90px !important;
  /* 控制圖片大小，不用太大 */
  height: auto;
}

.section-now .card .card-title {
  margin-top: 25px !important;
  /* 控制 Icon 與下方紅字的適當距離 */
}



/* ==========================================================================
   Why Now 區塊：手機版 3.5 : 6.5 左右分割排版 (RWD)
   ========================================================================== */
@media screen and (max-width: 767px) {

  /* 1. 停用 Swiper 的橫向滑動，改為垂直堆疊 */
  .section-now .swiper-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    transform: none !important;
    height: auto !important;
  }

  .section-now .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
  }

  /* 隱藏 Swiper 的左右箭頭 */
  .section-now .swiper-button-next,
  .section-now .swiper-button-prev,
  .section-now .swiper-button-disabled {
    display: none !important;
  }

  /* 2. 卡片本體邊距適度縮小 */
  .section-now .card {
    padding: 20px 15px !important;
  }

  /* 3. 使用 CSS Grid 進行 3.5 : 6.5 的左右排版 */
  .section-now .card a {
    position: relative;
    display: grid !important;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto auto auto;
    align-content: center;
    /* 內容垂直置中 */
    align-items: center;
    width: 100% !important;
    padding-bottom: 0 !important;
    gap: 3px 0;
  }

  /* 4. 畫出中間的分隔細線 */
  .section-now .card a::after {
    content: '';
    position: absolute;
    left: 40%;
    top: 5%;
    bottom: 5%;
    width: 1px;
    background-color: #dcdcdc;
    /* 淺灰色細線 */
  }

  /* 5. 左側：Icon 圖片 (跨越右邊的三行) */
  .section-now .card a img {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    width: 75px !important;
    /* 左側icon不用太大 */
    height: auto;
    margin: 0 auto !important;
    /* 圖片在左側區域置中 */
    padding-right: 15px;
    /* 稍微推離分隔線 */
    box-sizing: content-box;
  }

  /* 6. 右側：文字與按鈕垂直置中排列 */
  .section-now .card-title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 30px !important;
    margin: 0 !important;
    text-align: center !important;
    padding-left: 10px;
    /* 推離分隔線 */
  }

  .section-now .card-desc {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: center !important;
    padding-left: 10px;
  }

  .section-now .card-cta {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    margin: 10px auto 15px auto !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    justify-self: center;
    /* 確保按鈕在右側置中 */
    width: auto !important;
    position: relative;
    left: 5px;
    /* 配合文字的 padding-left，達到視覺上的中心點對齊 */
  }
}


/* ==========================================================================
   手機版專屬語意斷行與大標題質感優化
   ========================================================================== */

/* 1. 電腦版：隱藏手機專用的換行符號 */
.mobile-br {
  display: none;
}

/* 2. 手機版 (RWD) 調整 */
@media screen and (max-width: 1023px) {

  /* 啟動手機版斷行 */
  .mobile-br {
    display: block;
    content: "";
    margin-top: 8px;
    /* 讓上下兩行稍微拉開一點距離，增加呼吸感 */
  }

  /* 提升大標題的質感與大氣感 */
  .section-main .title {
    line-height: 1.4 !important;
    /* 放寬行距，避免兩行文字黏在一起 */
    letter-spacing: 1.5px !important;
    /* 微幅增加字距，看起來更從容穩重 */
    word-break: keep-all !important;
    /* 盡量保持中文詞彙完整，避免單字被切斷 */
  }
}



/* ==========================================================================
   導覽列上方警語樣式 (Nav Warning)
   ========================================================================== */

.nav-warning {
  font-size: 13px;
  font-weight: 700;
  /* 全粗體 */
  color: #000000;
  margin-bottom: 18px;
  /* 與導覽按鈕的距離 */
  text-align: left;

  /* 桌機版預設：對齊刊頭藍線寬度 (約 50%) */
  width: 46%;
  max-width: 600px;
}

/* --------------------------------------------------------------------------
   手機版調整 (Mobile)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {

  .nav-warning {
    width: 100%;
    /* 手機版佔滿寬度 */
    line-height: 1.2;
    max-width: 100%;
    padding: 0 0px;
    font-size: 12px;
    /* 手機版字級稍微縮小以維持美感 */
    margin-bottom: 12px;
    text-align: justify;
    /* 兩端對齊讓視覺更整齊 */
  }
}











/* ==========================================================================
   修正：平板與窄版電腦螢幕左右留白 (提升閱讀舒適度)
   ========================================================================== */
@media screen and (min-width: 768px) {
  .base-wrapper {
    /* 將左右邊距從原本預設的 8px 加大到 40px (或 5%)，確保內容不貼邊 */
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  /* 確保績效表格在窄螢幕下不會因為增加邊距而被擠壓破版 */
  .section-performance .table {
    word-break: keep-all;
  }
}

/* 若螢幕大於 1400px，則鎖定邊距避免過度內縮 */
@media screen and (min-width: 1400px) {
  .base-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}








/* ==========================================================================
   修正 1：績效表格在窄電腦/平板上的破版問題 (讓左側文字可換行)
   ========================================================================== */
@media screen and (min-width: 768px) {

  /* 允許左側基金名稱與警語自動換行，並給予舒適的行距 */
  .section-performance .table td.name {
    word-break: normal !important;
    white-space: normal !important;
    min-width: 280px;
    line-height: 1.4;
  }

  /* 確保右側的「數字欄位」保持一條線不換行，維持表格俐落感 */
  .section-performance .table td:not(.name),
  .section-performance .table th {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}

/* ==========================================================================
   修正 2：GDP 圓餅圖在窄電腦/平板上 (768px~1280px) 保持一排等比縮放
   ========================================================================== */

@media screen and (min-width: 768px) {
.gdp-charts-container {
    flex-wrap: nowrap !important;
    /* 強制不換行，全部排在同一排 */
    gap: 2vw !important;
    /* 將原本巨大的 130px 間距縮小為動態比例 */
  }
  }

@media screen and (min-width: 768px) and (max-width: 1280px) {
  

  /* 讓三個圓餅圖平分畫面寬度 */
  .gdp-chart-item {
    width: 30vw !important;
  }

  /* SVG 圖表與金屬圓心等比例縮小 */
  .gdp-svg-wrapper {
    width: 25vw !important;
    height: 25vw !important;
  }

  .pie-center-metallic {
    width: 12vw !important;
    height: 12vw !important;
    font-size: 3.2vw !important;
  }

  /* 數字與文字也跟隨螢幕等比例縮小 */
  .gdp-data-percent {
    font-size: 3.5vw !important;
  }

  .gdp-data-line {
    font-size: 1.8vw !important;
  }

  /* 縮短底部的分隔線避免互相黏在一起 */
  .gdp-chart-item::after {
    width: 90% !important;
    margin: 20px auto !important;
  }
}




/* ==========================================================================
   刊頭 A-GROUP & B-GROUP 完美對齊重構 (覆蓋舊有樣式)
   ========================================================================== */

/* 1. 隱藏舊的底線與多餘的包裝設定，避免干擾新排版 */
.banner-content-wrapper::after,
.new-subtitle-style::after {
  display: none !important;
}

/* 2. A-GROUP 主容器核心邏輯 */
.a-group {
  width: fit-content !important;
  /* 讓父容器隨內容伸縮 */
  display: flex;
  flex-direction: column;
  max-width: 60%;
  z-index: 20 !important;
  position: relative;
  margin-bottom: 40px;
}

/* 3. 新的獨立藍色橫線：嚴格等於 A-GROUP 的寬度 */
.banner-blue-line {
  width: 97% !important;
  /* 現在它會精準對齊標題決定的寬度 */
  height: 5px;
  background: linear-gradient(to right, #0d2b6e, #0072c1, #071f55);
  margin: 15px 0;
  /* 控制與主/副標的上下間距 */
}

/* 4. 主標與副標：絕對單行 (白名單鎖定) */
.title-1,
.new-subtitle-style,
.subtitle-line {}

.new-subtitle-style {
  margin: 0 !important;
  /* 由 A-GROUP 統一控管間距 */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

/* 5. B-GROUP：內部文字齊左，允許換行 */
.b-group {
  /* 核心魔法： */
  width: 0 !important;
  /* 1. 告訴瀏覽器：在計算容器寬度時，我不貢獻任何寬度 */
  min-width: 100% !important;
  /* 2. 但在容器寬度確定後，我要填滿整個父容器 */
  padding-right: 3%;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
  white-space: normal !important;
  /* 確保文字在分配到的空間內自動換行 */
}

.fund-desc {
  margin: 0 !important;
  white-space: normal !important;
  /* 允許文字換行 */
  line-height: 1.4 !important;
}


/* --------------------------------------------------------------------------
   電腦版排版 (1024px 以上) - 置左排列
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .section-banner {
    align-items: center;
    /* 垂直置中 */
    padding-left: 0vw;
  }

  .a-group {
    align-items: flex-start !important;
    /* A-GROUP 內元素靠左對齊 */
    margin-right: auto;
    
  }


}




/* --------------------------------------------------------------------------
   手機與平板版排版 (1023px 以下) - 上下置中排列
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .section-banner {
    flex-direction: column !important;
    height: 170vw;
    margin-top: -20px;
    overflow: hidden !important;
    /* 準備裁切火箭下半部火燄 */
  }

  /* A-GROUP 手機版置中邏輯 */
  .a-group {
    margin-right: 10px !important;
    align-items: center !important;
    /* 內部元素居中對齊 */
    width: max-content !important;
    max-width: 100% !important;
    /* 確保左右距離邊緣約 5% */

  }

  .b-group {
    /* 核心魔法： */
    width: 0 !important;
    /* 1. 告訴瀏覽器：在計算容器寬度時，我不貢獻任何寬度 */
    min-width: 105% !important;
    /* 2. 但在容器寬度確定後，我要填滿整個父容器 */
    text-align: left !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 5px;
    margin-left: 25px;
    white-space: normal !important;
    /* 確保文字在分配到的空間內自動換行 */
  }

  .banner-blue-line {
    width: 100% !important;
    /* 現在它會精準對齊標題決定的寬度 */
    height: 5px;
    background: linear-gradient(to right, #0d2b6e, #0072c1, #0d2b6e);
    margin-top: 7px;
  }

  /* 字體使用 vw 動態縮小，以確保在手機上「維持單行」 */
  .title-1 {
    font-size: 10vw !important;
    margin: 0 !important;
    letter-spacing: 1px;
    line-height: 50px;
    width: 60% !important;
    max-width: 60% !important;
  }



  .subtitle-line {
    font-size: 7vw !important;
    letter-spacing: 0 !important;
    line-height: 7vw;
  }

  .circle-char {
    width: 8.5vw !important;
    height: 8.5vw !important;
    font-size: 7vw !important;
  }

  .fund-desc {
    font-size: 4.5vw !important;
  }

  /* 蝴蝶圖組定位與火焰裁切 */
  .banner-dynamic-group {
    width: 100% !important;
    margin-top: 105px !important;
    /* 與文字的間距 */
    height: 52vw !important;
    /* 核心：限制總高度以蝴蝶下緣為準，超出的火焰會被 overflow 裁掉 */
    display: flex;
    align-items: flex-start;
    /* 讓圖組從頂部排，截掉底部 */
    top: 0 !important;
  }

  .banner-float-wrapper {
    top: -2vw;
    /* 微調蝴蝶高低位置 */
  }

  .wing {
    width: 45vw !important;
  }

  .rocket-center {
    width: 12vw !important;
  }




  /* 配合截掉的火焰，將下方的導覽列拉上來，維持漂亮的安全距離 */
  .quick-nav-section {
    margin-top: -75px;
  }

  .kv-nav-text {
    font-size: 25px;
    font-weight: 350;
    line-height: 1.3;
    letter-spacing: 3px;
    margin: 0 0;

    /* Flex 排版讓文字與三角形左右並排並垂直置中 */
    display: flex;
    align-items: left;
    justify-content: left;
    gap: 12px;
    /* 文字與三角形的間距 */
  }

}


@media screen and (max-width: 768px) {
  .section-banner {
    height: 135vw;
    margin-top: -20px;
    overflow: hidden !important;
    /* 準備裁切火箭下半部火燄 */
  }

  .quick-nav-section {
    margin-top: -79px;
  }

  .kv-quick-nav-section {
    max-width: 768px;
    margin-top: 30px;
  }
}







/* ==========================================================================
   刊頭新增視覺元素：時鐘刻度與噴煙火箭
   ========================================================================== */
.kv-visual-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  /* 確保在背景層之上，但不可遮擋按鈕 */
}

/* 確保時鐘刻度在下層 */
.kv-scale {
  width: 700px;
  position: relative;
  z-index: 1;
}

/* 確保火箭在上層，並加入簡單的浮動動畫提升生動感 */
.kv-rocket {
  position: absolute;
  z-index: 2;
  animation: rocketHover 5s ease-in-out infinite;
}

@keyframes rocketHover {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translate(20px, -35px);
  }
}

/* --------------------------------------------------------------------------
   桌機版 (1024px 以上) - 置於右側空白處
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .kv-visual-group {
    width: 50%;
    /* 填滿 flex row 的右半部 */
    height: 100%;
  }



  .kv-rocket {
    top: 20%;
    right: 40%;
    width: 700px;
  }
}

/* --------------------------------------------------------------------------
   手機與平板版 (1023px 以下) - 置於按鈕下方
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .kv-visual-group {
    width: 100%;
    margin-top: 20px;
    /* 與上方按鈕保持安全距離 */
    min-height: 400px;
    /* 賦予足夠高度容納絕對定位的圖像 */
    overflow: hidden;
    /* 避免放大的刻度超出螢幕產生水平卷軸 */
  }


  .kv-scale {
    position: absolute;
    bottom: -25%;
    /* 依據參考圖，刻度中心偏右下 */
    right: -20%;
    width: 150%;
    /* 放大以營造放射張力，請依實際圖檔尺寸微調 */
    max-width: 1300px;
  }


  .kv-rocket {
    top: 140% !important;
    left: 45%;
    width: 750px;
    /* 讓火箭在手機上佔據視覺主體 */
  }

  .a-group {
    margin-top: 70px !important;

  }

  .section-banner {
    height: 1000px;
  }
  
}





/* ==========================================================================
   GDP & 專利：新版左右分割排版
   ========================================================================== */
.gdp-split-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.split-left {
  width: 45%;
  text-align: left;
}

.split-right {
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.split-title {
  font-size: 44px;
  font-weight: 700;
  background: linear-gradient(to right, #0d2b6e, #2451bb, #0d2b6e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 20px;
  line-height: 1.2;
}

.split-subtitle {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 30px;
}

/* 圓餅圖的新版列容器 */
.new-gdp-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
  /* 縮小圖表與箭頭的間距 */
  margin: 10px 0 20px 0;
  width: 100%;
}

.new-gdp-layout .gdp-chart-item {
  width: 45%;
}

/* 隱藏舊版的底部橫線 */
.new-gdp-layout .gdp-chart-item::after {
  display: none !important;
}

/* 繪製圖表之間的指向箭頭 */
.gdp-arrow {
  width: 45px;
  height: 35px;
  background-color: #63a0d4;
  /* 箭頭顏色可配合主視覺微調 */
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 100px;
  /* 往下推，對齊圓餅圖圓心 */
}

.patent-chart-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-top: 15px;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}




/* --------------------------------------------------------------------------
   手機版 (767px 以下) - 垂直堆疊
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  .kv-rocket {
    top: 25%;
    left: -8%;
    width: 85%;
    /* 讓火箭在手機上佔據視覺主體 */
  }




  .gdp-split-layout {
    flex-direction: column;
    gap: 20px;
  }

  .split-left,
  .split-right {
    width: 100%;
  }

  .split-title {
    font-size: 34px;
  }

  .split-subtitle {
    font-size: 22px;
  }

  /* 手機版的備註放到底部 */
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
    margin-top: 20px;
    text-align: justify;
  }

  /* 手機版：圓餅圖垂直堆疊 */
  .new-gdp-layout {
    flex-direction: column !important;
    gap: 0px;
    align-items: center;
  }

  .new-gdp-layout .gdp-chart-item {
    width: 100%;
  }

  /* 手機版：箭頭轉向朝下 */
  .gdp-arrow {
    transform: rotate(90deg);
    margin-top: 0;
    align-self: center;
    /* 垂直置中 */
  }
}

/* ==========================================================================
   徹底解決：筆電/平板 (768px 以上) 圓餅圖掉到下一行的問題
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1980px) {

  .section-banner .text.a-group {
  width: 50% ;
  max-width: 50% ;
}

  /* 1. 強制右側容器絕對不允許換行 */
  .new-gdp-layout {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  /* 2. 解除原本寫死的 300px 寬度限制，改為彈性 % 數 */
  .new-gdp-layout .gdp-chart-item {
    width: 45% !important;
    flex-shrink: 1 !important;
    /* 允許空間不夠時自適應擠壓縮小 */
  }

  /* 3. 讓 SVG 圓餅圖外框維持完美的 1:1 正方形並自動縮放 */
  .new-gdp-layout .gdp-svg-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    max-width: 250px;
    /* 限制最大寬度，避免在大螢幕放太大 */
  }

  /* 4. 讓中間的金屬圓心也跟著外部 SVG 等比例縮放 */
  .new-gdp-layout .pie-center-metallic {
    width: 46% !important;
    /* 相對外框縮小 */
    height: 46% !important;
    font-size: clamp(20px, 2.5vw, 42px) !important;
    /* 字體動態縮放 */
  }

  /* 5. 針對 768px ~ 1199px (平板與窄筆電) 額外縮小文字與箭頭 */
  @media (max-width: 1199px) {
    .gdp-arrow {
      transform: scale(0.6);
      /* 縮小箭頭 */
      margin-top: 15%;
      /* 箭頭往下推對齊圓心 */
    }

    .gdp-data-percent {
      font-size: 26px !important;
    }

    .gdp-data-line {
      font-size: 14px !important;
    }

    .square-red,
    .square-blue {
      width: 14px;
      height: 14px;
    }
  }
}



/* ==========================================================================
   修正：圓餅圖與下方數據的間距
   ========================================================================== */

/* 1. 調整數據區塊的向上間距 (原本設定為 40px，我們將其縮小) */
.gdp-data-box {
  margin-top: 10px !important;
  /* 根據需求可改為 5px 或 10px */
}

/* 2. 修正手機版與平板版在調整後可能造成的擁擠感 */
@media screen and (max-width: 1023px) {
  .gdp-data-box {
    margin-top: 15px !important;
    /* 手機版保留一點點呼吸空間 */
  }
}

/* 3. 如果您發現數據區塊內的「紅/藍色塊」與「百分比數字」之間的行距太開，也可以一併壓縮 */
.gdp-data-line {
  margin-bottom: 0px !important;
  /* 縮小兩行數據之間的垂直間距 */
}




/* ==========================================================================
   新增：股債配置區塊 (section-allocation)
   ========================================================================== */
.section-allocation {
  color: #ffffff;
}

.allocation-main-title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(to right, #0d2b6e, #2451bb, #0d2b6e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin-bottom: 40px;
}

.allocation-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 左右垂直置中對齊 */
  justify-content: space-between;
  gap: 40px;
}

.block-margin-top {
  margin-top: 60px;
}

.allocation-text {
  width: 40%;
  text-align: left;
}

.allocation-table-wrapper {
  width: 60%;
  background-color: #ffffff;
  /* 表格區保留白底 */
  color: #333333;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.allocation-title {
  font-size: 44px;
  color: #000000;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.allocation-subtitle {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 30px;
  color: #000000;
}





/* ==========================================================================
   更新：股債配置表格樣式 (對齊基金績效表格風格)
   ========================================================================== */
.allocation-table {
  width: 100%;
  border-collapse: collapse;
}

/* 表頭背景色改為與績效表格相同的富蘭克林藍 */
.allocation-table thead {
  background: #4d8fcc;
  color: #fff;
}

/* 奇數行加上淺藍底色，營造俐落的斑馬紋設計 */
.allocation-table tbody tr:nth-child(odd) {
  background: #edf6ff;
}

/* 偶數行維持白底 */
.allocation-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.allocation-table th,
.allocation-table td {
  /* 移除原本生硬的黑色實線邊框，改用空間留白來區隔 */
  padding: 14px 15px;
  text-align: center;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.5;
}

.allocation-table td {
  font-weight: 600;
  /* 微調字重，讓數據與文字更具專業份量感 */
  color: #333333;
}

.allocation-table th {
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}



/* 桌機與手機專用顯示控制 */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* --------------------------------------------------------------------------
   桌機版微調 (min-width: 1024px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .allocation-main-title {
    font-size: 48px;
    margin-bottom: 60px;
  }

  .allocation-title {
    font-size: 44px;
  }

  .allocation-subtitle {
    font-size: 24px;
  }

  .allocation-table th,
  .allocation-table td {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   平板/窄螢幕筆電 (768px ~ 1023px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .allocation-block {
    gap: 20px;
  }

  .allocation-text {
    width: 45%;
  }


  .allocation-title {
    font-size: 28px;
  }

  .allocation-subtitle {
    font-size: 18px;
  }

  .allocation-table th,
  .allocation-table td {
    font-size: 14px;
    padding: 8px;
  }
}

/* ==========================================================================
   更新：股債配置區塊 - 移除白底與膠囊標題設計
   ========================================================================== */

.allocation-table-wrapper {
  width: 60%;
  background-color: transparent;
  /* 移除原有的白底 */
  box-shadow: none;
  /* 移除外框陰影 */
  padding: 0;
  /* 移除內距，讓表格完全貼合 */
  border-radius: 0px;
  /* 增加外框圓角 */
  overflow: hidden;
  /* 關鍵：裁切表格本身的直角，完美貼合圓角外框 */
}

.allocation-table-title {
  background-color: #e5e5e5;
  /* 白色膠囊底色 */
  color: #333333;
  border-radius: 50px;
  /* 膠囊圓弧形 */
  padding: 12px 50px;
  /* 膠囊內部留白 */
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  width: max-content;
  /* 寬度隨文字內容彈性撐開 */
  margin: 0 auto 20px auto;
  /* 區塊水平置中，並與下方表格保持距離 */
}

/* --------------------------------------------------------------------------
   平板/窄螢幕筆電版微調
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .allocation-table-wrapper {
    width: 55%;
    padding: 0 !important;
    /* 確保平板模式下也不會有白底 padding */
  }

  .allocation-table-title {
    font-size: 20px;
    padding: 10px 30px;
  }
}

/* --------------------------------------------------------------------------
   手機版微調
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .allocation-table-wrapper {
    width: 100%;
  }

  .allocation-table-title {
    font-size: 18px;
    padding: 8px 25px;
    max-width: 90%;
    /* 避免手機螢幕過窄時，文字長度讓膠囊超出畫面邊緣 */
    white-space: normal;
    /* 允許膠囊內文字換行 */
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   手機版 (767px 以下) - 垂直堆疊
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .allocation-main-title {
    font-size: 32px;
  }

  .block-margin-top {
    margin-top: 40px;
  }

  .allocation-block {
    flex-direction: column;
    gap: 20px;
  }

  .allocation-text,
  .allocation-table-wrapper {
    width: 100%;
  }

  /* 備註轉移至圖表下方 */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
    text-align: justify;
  }

  .allocation-title {
    font-size: 32px;
    text-align: center;
  }

  .allocation-subtitle {
    font-size: 20px;
    text-align: center;
  }

  /* 避免手機版表格太擠破版 */
  .allocation-table th,
  .allocation-table td {
    padding: 6px;
    font-size: 13px;
  }
}

/* ==========================================================================
   修正：手機版「美國以外的更多機會」與「新興市場已不同以往」主副標置中
   ========================================================================== */
@media screen and (max-width: 767px) {
  .gdp-split-layout .split-left {
    text-align: center !important;
    /* 強制手機版文字區塊置中對齊 */
  }
}




/* ==========================================================================
   新增：富蘭克林集團介紹區塊 (section-ft-intro)
   ========================================================================== */

/* --- 上半部：滿版橫幅 --- */
.ft-banner {
  width: 100%;
  height: 350px;
  /* 控制滿版區塊的高度，呈現窄長型 */
  background: url('../images/ftbg.jpg') no-repeat center right / cover;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #f5f5f5;
  /* 圖片載入前的底色 */
}

.ft-banner-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* 確保文字靠左 */
}

/* 加上微半透明白底，確保文字在任何背景圖片上都清晰可見 */
.ft-banner-content {
  background: rgba(255, 255, 255, 0);
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0);
  max-width: 600px;
  backdrop-filter: blur(3px);
  /* 現代感的毛玻璃效果 */
}

.ft-banner-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.ft-banner-subtitle {
  font-size: 44px;
  font-weight: 700;
  background: linear-gradient(to right, #0d2b6e, #2451bb, #0d2b6e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  line-height: 1.2;
}

/* --- 下半部：三大優勢 --- */
.ft-features-wrapper {
  padding-bottom: 60px;
}

.ft-feature-row {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 80px;
}

/* 利用 Flex 反轉實現 Z 字交錯排版 */
.ft-feature-row.reverse {
  flex-direction: row-reverse;
}

.ft-feature-img {
  width: 50%;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.ft-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ft-feature-img:hover img {
  transform: scale(1.05);
  /* 輕微放大互動感 */
}

.ft-feature-text {
  width: 50%;
}

.ft-feature-title {
  font-size: 44px;
  font-weight: 700;
  color: #000;
  margin-bottom: 25px;
  position: relative;
}

.ft-feature-title::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 140px;
  height: 3px;
  background-color: #0072c1;
  /* 標題下方的裝飾短線 */
}

.ft-feature-desc {
  font-size: 20px;
  line-height: 1.8;
  color: #444;
  text-align: justify;
}

/* --------------------------------------------------------------------------
   平板/窄筆電版微調
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .ft-banner {
    height: 280px;
  }

  .ft-banner-subtitle {
    font-size: 45px;
  }

  .ft-feature-row {
    gap: 30px;
    margin-bottom: 60px;
  }

  .ft-feature-title {
    font-size: 36px;
  }

  .ft-feature-desc {
    font-size: 18px;
  }
}


/* --------------------------------------------------------------------------
   手機版：改為垂直排列 (純白底、圖片在上、文字在下置中)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  .ft-features-wrapper {
    padding-top: 50px;
  }

  /* 1. 將原本容器的背景圖關閉，高度改為自動，並將底色改為純白 (#ffffff) */
  .ft-banner {
    height: auto;
    background-image: none !important;
    background-color: #ffffff;
    /* 這裡改為純白底 */
    flex-direction: column;
    margin-top: 60px;
  }

  /* 2. 利用偽元素，在文字上方「長」出一塊專屬圖片的空間 */
  .ft-banner::before {
    content: "";
    display: block;
    width: 100%;
    height: 280px;
    background: url('../images/ftbg.jpg') no-repeat 80% center / cover;
  }

  /* 3. 調整文字區塊的對齊，確保整體居中 */
  .ft-banner-wrapper {
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    padding: 40px 20px;
  }

  /* 4. 移除原本壓在圖上的半透明白底與陰影，強制文字內部也置中 */
  .ft-banner-content {
    padding: 0;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
    /* 文字置中對齊 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ft-banner-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .ft-banner-subtitle {
    font-size: 34px;
  }

  /* --- 下方三大優勢維持垂直堆疊 --- */
  .ft-feature-row,
  .ft-feature-row.reverse {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
  }

  .ft-feature-img,
  .ft-feature-text {
    width: 100%;
  }

  .ft-feature-title {
    font-size: 32px;
    text-align: center;
  }

  .ft-feature-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  /* 裝飾線置中 */
  .ft-feature-desc {
    font-size: 18px;
    text-align: justify;
  }
}



/* ==========================================================================
   新增：浮動開戶與下單頁籤
   ========================================================================== */
.floating-action-group {
  position: fixed;
  z-index: 99;
  /* 確保在最上層 */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

.floating-btn {
  background-color: #B50000;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.floating-btn:hover {
  background-color: #d60000;
}

/* --------------------------------------------------------------------------
   桌機版：右上角、垂直排列、文字垂直書寫
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .floating-action-group {
    top: 15%;
    /* 固定在右上角，距離頂部 20% */
    right: 0;
    display: flex;
    flex-direction: column;
    /* 垂直排列 */
    gap: 15px;
    /* 按鈕之間的距離 */
  }

  .floating-btn {
    writing-mode: vertical-rl;
    /* 關鍵：文字垂直書寫，從右至左 */
    letter-spacing: 5px;
    /* 增加文字間距更易讀 */
    padding: 20px 10px;
    /* 上下長、左右短 */
    font-size: 22px;
    border-radius: 8px 0 0 8px;
    /* 左側圓角，右側貼齊螢幕邊緣 */
  }
}

/* --------------------------------------------------------------------------
   手機版：底部、左右排列、滾動隱藏動態邏輯
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .floating-action-group {
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* 左右排列 */
  }

  .floating-btn {
    flex: 1;
    /* 平分寬度 */
    padding: 16px 0;
    font-size: 24px;
    border-radius: 0;
    /* 手機版不使用圓角，貼齊邊緣 */
    letter-spacing: 2px;
  }

  /* 兩個按鈕之間加上微細分隔線 */
  .floating-btn:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* 當正在滾動時 (JS 加上 .is-scrolling)，按鈕向下滑出畫面 */
  .floating-action-group.is-scrolling {
    transform: translateY(100%);
  }
}

/* Vue 的顯示/隱藏過渡動畫 (綁定 fade-slide) */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 進入前與離開後的狀態 */
.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
}

/* 桌機版隱藏時往右邊退去 */
@media screen and (min-width: 768px) {

  .fade-slide-enter-from,
  .fade-slide-leave-to {
    transform: translateX(100%);
  }
}

/* 手機版隱藏時往下方退去 */
@media screen and (max-width: 767px) {

  .fade-slide-enter-from,
  .fade-slide-leave-to {
    transform: translateY(100%);
  }
}

/* ==========================================================================
   層次優化方案一：替 GDP 區塊鋪上極淺的金融藍底色與微弱分隔線
   ========================================================================== */
#sec-gdp {
  background-color: #ecf6ff;
  /* 極淺的富蘭克林藍系底色 */
  border-bottom: 1px solid #e2effa;
  padding-top: 80px;
  /* 確保區塊上下有足夠的呼吸空間 */
  padding-bottom: 80px;
  margin-top: 40px;
  /* 與上方績效區塊拉開距離 */
}

/* 修正手機版上下留白 */
@media screen and (max-width: 767px) {
  #sec-gdp {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}




/* ==========================================================================
   優化：股債配置區塊 - 科技網格底紋 (Tech Grid) 與浮動卡片
   ========================================================================== */

/* 1. 設定滿版微弱的垂直與水平正交網格背景 */
.section-allocation {
  position: relative;
  background-color: #ffffff !important;
  /* 強制覆蓋 HTML 上的 inline 顏色，確保為純白 */

  /* 繪製網格線：使用富蘭克林品牌藍色，但透明度降至極低的 4% */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  /* 網格的方塊大小，可視喜好調整數值 (例如 50px) */
  background-position: center top;

  padding-top: 60px;
  padding-bottom: 60px;
}



/* 4. 手機版與平板版微調：確保小螢幕上也有良好的卡片邊距 */
@media screen and (max-width: 1023px) {
  .allocation-table-wrapper {
    padding: 15px !important;
  }
}

@media screen and (max-width: 767px) {
  .section-allocation {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ==========================================================================
   修正 1：主標題行距縮小與允許斷行
   ========================================================================== */
.title-1 {
  white-space: normal !important;
  /* 允許文字斷行 */
  word-break: keep-all !important;
  /* 盡量保持中文詞彙完整不被隨意切斷 */
  line-height: 0.15 !important;
  /* 縮小行距 (數字越小越緊密) */
}

@media screen and (max-width: 1023px) {
  .title-1 {
    line-height: 1.2 !important;
    /* 手機版稍微放寬一點點呼吸空間 */
  }
}





/* ==========================================================================
   修正 2：統一容器基準，完美鎖定火箭與刻度的相對位置
   ========================================================================== */
/* 重置外層容器 */
.kv-visual-group {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 讓刻度作為基準底圖，撐開高度 */
.kv-scale {
  position: relative !important;
  top: 10% !important;
  bottom: auto !important;
  left: auto !important;
  right: 20% !important;
  width: 200% !important;
  /* 控制整體圖組大小，可視需求縮放 */
  max-width: 1200px !important;
  height: auto !important;
  z-index: 1;
}

/* 火箭依附在刻度容器上，使用 % 確保等比縮放 */
.kv-rocket {
  position: absolute !important;
  z-index: 2;
  top: auto !important;
  right: auto !important;

  /* --- 請在這裡微調對齊您圖中的比例 --- */
  width: 70% !important;
  /* 火箭佔整體圖組的大小比例 */
  top: 20% !important;
  /* 距離底部的比例 */
  left: -10% !important;
  /* 距離左側的比例 */
  /* ------------------------------------- */

  animation: rocketHover 5s ease-in-out infinite;
}

/* 手機版微調圖組大小 */
@media screen and (max-width: 1023px) {
  .kv-scale {
    width: 160% !important;
    /* 手機版讓刻度佔比更大 */
    right: 30%;
  }

  .kv-rocket {
    width: 60% !important;
    /* 手機版讓火箭佔比更大 */
    bottom: -110% !important;
    left: 10% !important;
  }
}

@media screen and (max-width: 768px) {
  .kv-scale {
    margin-top: 5%;
  }
}




/* ==========================================================================
   修正 3：手機版績效表格不超出畫面，依螢幕等比縮小
   ========================================================================== */
@media screen and (max-width: 1023px) {

  .section-performance .table,
  .section-performance .table-1 {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    /* 關鍵：強制表格不超出外框 */
  }

  .section-performance .table th,
  .section-performance .table td,
  .section-performance .table-1 th,
  .section-performance .table-1 td {
    white-space: normal !important;
    /* 允許文字換行 */
    word-break: break-word !important;
    /* 長數字或長文字強制斷行 */
    padding: 4px 2px !important;
    /* 極度壓縮內層留白 */
    font-size: 11px !important;
    /* 縮小字級以塞入畫面 (可依需求改為 10px 或 12px) */
    line-height: 1.2 !important;
  }

  /* 第一欄（基金名稱 / 期間等）給予稍微多一點點的寬度比例 */
  .section-performance .table th:first-child,
  .section-performance .table td:first-child,
  .section-performance .table-1 th:first-child,
  .section-performance .table-1 td:first-child {
    width: 25% !important;
  }
}



/* ==========================================================================
   終極修正：刊頭主標題斷行與行距衝突
   ========================================================================== */

/* 1. 修正外層容器：解除 max-content，讓容器可以被螢幕寬度擠壓從而觸發斷行 */


/* 2. 徹底解除 title 的不換行限制，並縮短行距 */
#app .section-main .section-banner .text .title,
#app .section-main .section-banner .text .title-1 {
  white-space: normal !important;
  /* 允許文字換行 */
  word-break: normal !important;
  /* 【關鍵】覆蓋 keep-all，允許長中文自動斷行 */
  overflow-wrap: break-word !important;
  line-height: 1.15 !important;
  /* 縮短行距 */
}

/* 3. 手機版特定微調 */
@media screen and (max-width: 1023px) {

  #app .section-main .section-banner .text .title,
  #app .section-main .section-banner .text .title-1 {
    line-height: 1.25 !important;
    /* 覆蓋原本寫死的 50px，改用動態比例 */
    font-size: 8vw !important;
    /* 建議：原本是 10vw，既然字變多了，稍微縮小字級能讓排版更精緻 */
  }
}