@charset "UTF-8";

/* ==========================================================================
   ESG投資 2026/10 改版樣式（接在公版 headerFooter.css 之後載入）
   色票：主綠 #648c80 / 亮綠 #009973 / 內文灰 #595959 / 淺綠底 #e7f7ef
         線條 #afc6ba / 強調橘 #ffa227
   ========================================================================== */
.esg-page {
  padding-top: 68px;
  /* 公版固定式 header 高度（實際值由 js/esg.js 依 header 高度同步） */
  background-color: #fff;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
  /* 自成一個堆疊層：內容區裡的元素（例如 Swiper 分頁圓點 z-index 10）不會蓋到公版 header */
}

/* 本頁內容的基本設定：內容區與 ESG產品 popup（popup 放在內容區外面，所以要一起列）共用 */
.esg-page,
.esg-popup {
  font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  line-height: 1.5;
  color: #595959;
}

.esg-page *,
.esg-popup * {
  font-family: inherit;
  line-height: inherit;
}

:where(.esg-page, .esg-popup) h1,
:where(.esg-page, .esg-popup) h2,
:where(.esg-page, .esg-popup) h3,
:where(.esg-page, .esg-popup) h4,
:where(.esg-page, .esg-popup) p,
:where(.esg-page, .esg-popup) ul,
:where(.esg-page, .esg-popup) ol,
:where(.esg-page, .esg-popup) li,
:where(.esg-page, .esg-popup) figure {
  margin: 0;
  padding: 0;
}

:where(.esg-page, .esg-popup) ul {
  list-style: none;
}

:where(.esg-page, .esg-popup) a {
  color: inherit;
  text-decoration: none;
}

.esg-page span {
  color: inherit;
}

.esg-page img {
  max-width: 100%;
}

/* 按鈕元素歸零 */
.esg-tabs__btn,
.esg-prod__more,
.esg-carbon__toggle {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.esg-page [id^="anchor"] {
  scroll-margin-top: 68px;
}

/* --------------------------------------------------------------------------
   公版 header 的本頁微調（headerFooter.css 維持公版原檔，不直接修改）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 801px) {

  /* 頁籤字級 16px */
  #header .main-nav ul.anchor li {
    font-size: 16px;
  }

  /* 公版最後一項是按鈕；本頁為文字頁籤，取消右邊距讓右緣對齊內容區 */
  #header .main-nav ul.anchor li:last-child {
    margin-right: 0;
  }
}

.esg-container {
  max-width: 1200px;
  /* 與公版 header .container 相同，左右緣才會對齊 */
  margin: 0 auto;
  padding: 0 30px;
}

.esg-title {
  padding: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #009973;
}

.esg-title--green {
  color: #009973;
}

/* 膠囊外框按鈕 */
.esg-pill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 200px;
  max-width: 100%;
  height: 50px;
  border: 1px solid #648c80;
  border-radius: 50px;
  background-color: #fff;
  font-size: 16px;
  color: #648c80;
  word-break: normal;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.esg-pill:hover {
  background-color: #648c80;
  color: #fff;
}

/* --------------------------------------------------------------------------
   輪播：使用 Swiper 14（css/plugin/swiper-bundle.css、js/plugin/swiper-bundle.js，設定在 js/esg.js）
   滑動、循環、拖曳都交給 Swiper；這裡只把分頁指示調成本頁的橫條樣式
   -------------------------------------------------------------------------- */
.esg-slider {
  position: relative;
  min-width: 0;
  /* Swiper 分頁指示的外觀變數 */
  --swiper-pagination-color: #648c80;
  --swiper-pagination-bullet-inactive-color: #afc6ba;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-width: 41px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-bullet-border-radius: 3px;
  --swiper-pagination-bullet-horizontal-gap: 8px;
}

.esg-slider .swiper-slide {
  height: auto;
  /* 同一列卡片等高 */
}

/* 分頁指示放在輪播下方（Swiper 預設是疊在輪播內） */
.esg-slider .swiper-pagination {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 24px;
}

/* Swiper 這幾項寫在巢狀 CSS 裡，較舊的瀏覽器讀不到，這裡補上平面寫法 */
.esg-slider .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap);
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

/* --------------------------------------------------------------------------
   KV：PC 以「橢圓遮罩 + 方形遮罩」裁切 kv.png，左側疊白色漸層
   尺寸皆以設計稿 1920 x 676 換算為 % / vw，隨視窗等比縮放
   -------------------------------------------------------------------------- */
.esg-kv {
  position: relative;
  height: 41.4063vw;
  /* 795 / 1920：圖片區 676 + 下方留白 119 */
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
}

.esg-kv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35.2083vw;
  /* 676 / 1920 */
  /* 第一層：橢圓（即「橢圓遮罩.svg」的路徑，2379.23 x 991.76，底部貼齊圖片區底）；第二層：方形（補滿上半部）
     橢圓以 data URI 內嵌：外部 SVG 檔在直接開啟本機檔案（file://）時會被瀏覽器擋下，遮罩會失效 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2379.23 991.76' preserveAspectRatio='none'%3E%3Cpath d='M2379.23,543.68c0,300.26-532.61,448.09-1189.62,448.09S0,843.94,0,543.68,532.61,0,1189.62,0s1189.62,243.41,1189.62,543.68Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2379.23 991.76' preserveAspectRatio='none'%3E%3Cpath d='M2379.23,543.68c0,300.26-532.61,448.09-1189.62,448.09S0,843.94,0,543.68,532.61,0,1189.62,0s1189.62,243.41,1189.62,543.68Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 123.918% 146.71%, 100% 34%;
  mask-size: 123.918% 146.71%, 100% 34%;
  -webkit-mask-position: 54.35% 100%, 0 0;
  mask-position: 54.35% 100%, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.esg-kv__bg img {
  position: absolute;
  left: 27.396%;
  /* 526 / 1920 */
  bottom: 0;
  width: 89.635%;
  /* 1721 / 1920 */
  max-width: none;
  height: auto;
}

/* 白色漸層遮罩（左 → 右） */
.esg-kv__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #fff 27.4%, rgba(255, 255, 255, 0.96) 34.5%, rgba(255, 255, 255, 0.88) 40.6%, rgba(255, 255, 255, 0.74) 46.9%, rgba(255, 255, 255, 0.53) 53.1%, rgba(255, 255, 255, 0.22) 59.4%, rgba(255, 255, 255, 0) 62.8%);
}

.esg-kv__txt {
  position: absolute;
  top: 17.2vw;
  /* 文字區塊的垂直中心，約在圖片區高度的 49%（1920 寬時為 330px） */
  left: 17.24vw;
  /* 331 / 1920 */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

.esg-kv__txt h1 {
  font-size: 30px;
  font-size: max(30px, 2.5vw);
  /* 48 / 1920 */
  font-weight: 700;
  line-height: 1.3;
  color: #648c80;
}

.esg-kv__txt p {
  margin-top: 0.62em;
  font-size: 18px;
  font-size: max(18px, 1.4583vw);
  /* 28 / 1920 */
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: #595959;
}

.esg-kv__txt p em {
  font-style: normal;
  color: #ffa227;
}

/* --------------------------------------------------------------------------
   當投資遇上永續?
   -------------------------------------------------------------------------- */
.esg-intro {
  margin-top: 0;
  padding: 41px 0 35px;
  background-color: #e7f7ef;
}

.esg-intro__inner {
  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;
}

.esg-intro__lead {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding-right: 30px;
}

.esg-intro__lead .esg-title {
  margin-bottom: 14px;
  text-align: left;
}

.esg-intro__lead p {
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  color: #595959;
}

.esg-intro__lead p strong {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  color: #648c80;
}

.esg-intro__slider {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 602px;
  flex: 0 0 602px;
  max-width: 53%;
}

.esg-intro__card {
  height: 100%;
  min-height: 179px;
  padding: 20px 20px 18px;
  border-radius: 8px;
  background-color: #fff;
}

.esg-intro__card h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: #648c80;
}

.esg-intro__card p {
  margin-top: 8px;
  font-size: 18px;
  line-height: 24px;
  text-align: left;
  color: #595959;
}

/* 標題前的圓形圖示（img/Aicon-*.svg、img/Bicon-*.svg，圓底已含在圖檔內） */
.esg-icon {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: block;
  width: 36px;
  height: 36px;
  margin-right: 12px;
}

/* --------------------------------------------------------------------------
   玉山攜手顧客，共創永續價值
   -------------------------------------------------------------------------- */
.esg-value {
  margin-top: 0;
  padding: 71px 0 40px;
}

.esg-value__inner {
  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;
}

.esg-value__lead {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 411px;
  flex: 0 0 411px;
  max-width: 38%;
}

.esg-value__lead .esg-title {
  margin-bottom: 20px;
  text-align: left;
  white-space: nowrap;
}

.esg-value__lead img {
  display: block;
  width: 100%;
  height: auto;
}

.esg-value__panel {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 600px;
  flex: 0 0 600px;
  max-width: 54%;
  padding: 40px 29px 38px 40px;
  background-color: #e7f7ef;
}

.esg-value__item+.esg-value__item {
  margin-top: 30px;
  padding-top: 13px;
  border-top: 1px solid #648c80;
}

.esg-value__item h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: #648c80;
}

.esg-value__item h3 a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: inherit;
  word-break: normal;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

/* 產品名稱後的箭頭：示意可點擊 */
.esg-value__arrow {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  fill: none;
  stroke: #5e8c5b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-transition: stroke 0.3s, -webkit-transform 0.3s;
  transition: stroke 0.3s, -webkit-transform 0.3s;
  transition: stroke 0.3s, transform 0.3s;
  transition: stroke 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.esg-value__item h3 a:hover .esg-value__arrow,
.esg-value__item h3 a:focus .esg-value__arrow,
.esg-value__item h3 a:active .esg-value__arrow {
  stroke: #009973;
  /* 跟著產品名稱一起變色 */
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

/* 產品名稱可點擊示意：滑鼠移入變色，箭頭右移 */
.esg-value__item h3 a:hover,
.esg-value__item h3 a:focus,
.esg-value__item h3 a:active {
  color: #009973;
}

.esg-value__item p {
  margin-top: 18px;
  font-size: 18px;
  line-height: 24px;
  text-align: left;
  color: #595959;
}

/* --------------------------------------------------------------------------
   ESG產品
   -------------------------------------------------------------------------- */
.esg-prod {
  margin-top: 0;
  padding: 41px 0 80px;
}

.esg-prod__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

.esg-prod__banner {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-radius: 20px;
  aspect-ratio: 720 / 264;
  -o-object-fit: cover;
  object-fit: cover;
}

.esg-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
}

.esg-tabs__btn {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  padding: 12px 0 13px;
  border-bottom: 3px solid #e1efef;
  font-size: 19px;
  font-weight: 500;
  color: #434343;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.esg-tabs__btn:hover,
.esg-tabs__btn.is-active {
  color: #648c80;
}

.esg-tabs__btn.is-active {
  border-bottom-color: #648c80;
}

.esg-prod__panel {
  display: none;
  margin-top: 28px;
}

.esg-prod__panel.is-active {
  display: block;
}

.esg-prod__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: 103px;
  padding: 14px 15px 14px 17px;
  border: 1px solid #afc6ba;
  border-radius: 8px;
  background-color: #fff;
}

.esg-prod__item+.esg-prod__item {
  margin-top: 20px;
}

/* 頁面上只顯示前三筆，完整清單按箭頭開 popup */
.esg-prod__panel .esg-prod__list>.esg-prod__item:nth-child(n+4) {
  display: none;
}

.esg-prod__main {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 16px;
}

.esg-prod__name {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: #648c80;

}

.esg-prod__name span {
  color: #a61e2e;

}

.esg-prod__note {
  margin-top: 2px;
  font-size: 16px;
  line-height: 19px;
  text-align: left;
  color: #648c80;
}

.esg-prod__desc {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  color: #595959;
}

.esg-prod__meta {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  text-align: right;
}

.esg-prod__meta p {
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  white-space: nowrap;
  color: #595959;
}

.esg-prod__meta a {
  font-size: 16px;
  line-height: 24px;
  color: #648c80;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: normal;
}

.esg-prod__meta a:hover {
  color: #009973;
}

.esg-prod__more {
  display: block;
  position: relative;
  width: 60px;
  height: 30px;
  margin: -6px auto 0;
  color: #648c80;
}

.esg-prod__more svg {
  display: block;
  width: 48px;
  height: 26px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.esg-prod__cta {
  margin: 28px auto 0;
}

.esg-prod__footnote {
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.6;
  text-align: justify;
  color: #595959;
}

/* --------------------------------------------------------------------------
   ESG產品完整清單 popup（外框與開關沿用原網頁 css/popup.css、js/popup.js，這裡只調整內容樣式）
   -------------------------------------------------------------------------- */
.esg-popup {
  max-width: 760px;
  padding: 40px 30px 30px;
  border-radius: 8px;
  word-break: normal;
}

.esg-popup .close-btn {
  top: 12px;
  right: 12px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.esg-popup .close-btn img {
  display: block;
  width: 32px;
  height: 32px;
}

.esg-popup__title {
  padding: 0 36px;
  font-size: 24px;
}

.esg-popup .scrollAreaWrapper {
  max-height: 65vh;
  margin: 20px 0 0;
  padding: 0 10px 0 0;
}

/* popup.css 會替清單加上項目符號與縮排，產品卡片不需要 */
.esg-popup .scrollAreaWrapper .esg-prod__list {
  margin: 0;
  font-size: inherit;
}

.esg-popup .scrollAreaWrapper .esg-prod__list>li {
  padding-top: 14px;
  text-indent: 0;
}

.esg-popup .scrollAreaWrapper .esg-prod__list>li::before {
  content: none;
}

/* --------------------------------------------------------------------------
   e起投資 讓財富與永續同行
   -------------------------------------------------------------------------- */
.esg-invest {
  margin-top: 0;
  padding: 49px 0 34px;
  background-color: #e7f7ef;
}

.esg-invest .esg-title {
  margin-bottom: 22px;
}

.esg-invest__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -15.5px;
}

.esg-invest__list li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 15.5px;
}

.esg-invest__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  min-height: 296px;
  padding: 40px 24px 20px 40px;
  background-color: #fcfefd;
  word-break: normal;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

/* 滑鼠移入：暖黃底，和區塊的淺綠底做出區隔 */
.esg-invest__card:hover,
.esg-invest__card:focus-visible {
  background-color: #fff8d6;
}

.esg-invest__icon {
  display: block;
  width: auto;
  height: 55px;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.esg-invest__card h3 {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: #648c80;
}

.esg-invest__card h4 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #595959;
}

.esg-invest__card p {
  margin-top: 6px;
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  color: #595959;
}

.esg-invest__arrow {
  display: block;
  width: 30px;
  height: 30px;
  margin: auto 0 0 auto;
  padding-top: 10px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  fill: none;
  stroke: #5e8c5b;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.esg-invest__card:hover .esg-invest__arrow {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

.esg-invest__note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: #595959;
}

/* --------------------------------------------------------------------------
   理財觀點
   -------------------------------------------------------------------------- */
.esg-view {
  margin-top: 0;
  padding: 150px 0 140px;
}

.esg-view__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid #afc6ba;
  border-radius: 8px;
  overflow: hidden;
}

.esg-view__txt {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  padding: 44px 20px 46px;
}

.esg-view__txt .esg-title {
  line-height: 34px;
  text-align: left;
}

.esg-view__txt p {
  margin-top: 18px;
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  color: #595959;
}

.esg-view__txt .esg-pill {
  height: 48px;
  margin-top: 24px;
  font-size: 15px;
}

.esg-br-pc {
  display: inline;
}

.esg-view__slider {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 46.8%;
  flex: 0 0 46.8%;
  max-width: 46.8%;
}

.esg-view__slider .swiper {
  height: 100%;
}

.esg-view__slide {
  display: block;
  position: relative;
  height: 100%;
  min-height: 299px;
  word-break: normal;
}

.esg-view__slide img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.esg-view__slide span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px 28px;
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 16px;
  line-height: 26px;
  color: #595959;
}

.esg-view__slider {
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-horizontal-gap: 4px;
}

.esg-view__slider .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 2;
  /* 只需高於輪播本體（z-index 1） */
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   e理財 愛地球
   -------------------------------------------------------------------------- */
.esg-eco {
  margin-top: 0;
  padding: 0;
}

.esg-eco .esg-title {
  margin-bottom: 22px;
}

.esg-eco__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.esg-eco__card {
  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-flex: 0;
  -ms-flex: 0 0 321px;
  flex: 0 0 321px;
  max-width: 31%;
  border: 1px solid #d9d8da;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}

.esg-eco__card img {
  display: block;
  width: 100%;
  aspect-ratio: 321 / 215;
  -o-object-fit: cover;
  object-fit: cover;
}

.esg-eco__body {
  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-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 20px 20px 30px;
}

.esg-eco__body h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #009a93;
}

.esg-eco__body p {
  margin: 8px 0 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #595959;
}

.esg-eco__body .esg-pill {
  width: 230px;
  height: 63px;
  margin: auto auto 0;
  border-color: #afc6ba;
  font-weight: 700;
}

.esg-eco__body .esg-pill:hover {
  border-color: #648c80;
}

/* --------------------------------------------------------------------------
   碳標籤認證
   -------------------------------------------------------------------------- */
.esg-carbon {
  margin-top: 0;
  padding: 117px 0 0;
}

.esg-carbon .esg-title {
  margin-bottom: 43px;
}

.esg-carbon__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-column-gap: 44px;
  -moz-column-gap: 44px;
  column-gap: 44px;
  max-width: 1124px;
  margin: 0 auto;
}

.esg-carbon__block {
  padding-left: 10px;
  border-left: 2px solid #afc6ba;
}

.esg-carbon__block h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #648c80;
}

.esg-carbon__toggle {
  display: block;
  position: relative;
  width: 100%;
  font-weight: inherit;
  text-align: left;
  color: inherit;
  cursor: default;
}

.esg-carbon__toggle svg {
  display: none;
}

.esg-carbon__block p {
  margin-top: 4px;
  max-width: 500px;
  font-size: 18px;
  line-height: 24px;
  text-align: left;
  color: #595959;
}

.esg-carbon__fig {
  margin: 40px 0 0;
}

.esg-carbon__fig img {
  display: block;
  width: 100%;
  height: auto;
}

.esg-carbon__fig figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 18px;
  color: #595959;
}

/* --------------------------------------------------------------------------
   注意事項（收合行為在 js/esg.js）
   -------------------------------------------------------------------------- */
.esg-page .faq {
  margin-top: 0;
  padding: 110px 30px 100px;
}

.esg-page .faq .sub-title {
  margin-bottom: 20px;
  padding: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #009973;
}

.esg-page .faq .row {
  width: 100%;
  max-width: 1142px;
  margin: 0 auto;
  padding: 6px 32px;
  border: 1px solid #afc6ba;
}

.esg-page .faq .qa {
  margin: 0;
  padding: 0;
  border: 0;
}

.esg-page .faq .qa+.qa {
  border-top: 1px solid #d5e2db;
}

.esg-page .faq .qa h3 {
  position: relative;
  margin: 0;
  padding: 14px 40px 14px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #648c80;
  cursor: pointer;
}

.esg-page .faq .qa h3:focus-visible {
  outline: 2px solid #648c80;
  outline-offset: 2px;
}

.esg-page .faq .qa h3 svg {
  position: absolute;
  top: 50%;
  right: 2px;
  display: block;
  width: 100%;
  max-width: 20px;
  margin-top: -5px;
  fill: #648c80;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.esg-page .faq .qa .active-qa .toggle-arrow {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.esg-page .faq .qa .answer {
  display: none;
  padding-bottom: 16px;
}

.esg-page .faq .qa .answer p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  text-align: justify;
  color: #595959;
}

.esg-page .faq .qa .answer a {
  color: #00a19b;
}

/* ==========================================================================
   平板
   ========================================================================== */
@media (max-width: 1180px) {
  .esg-br-pc {
    display: none;
  }

  .esg-invest__card {
    padding: 30px 20px 20px 24px;
  }
}

@media (max-width: 1100px) {
  .esg-intro__slider {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 46%;
    flex: 0 0 46%;
  }

  .esg-value__lead .esg-title {
    font-size: 24px;
  }

  .esg-view {
    padding: 100px 0;
  }

  .esg-carbon {
    padding-top: 90px;
  }
}

@media (max-width: 960px) {
  .esg-value__lead .esg-title {
    font-size: 20px;
  }

  .esg-view__txt .esg-title {
    font-size: 24px;
  }
}

/* ==========================================================================
   手機（設計稿 390）；最下方另有 340px 以下的微調
   ========================================================================== */
@media (max-width: 768px) {
  .esg-container {
    padding: 0 16px;
  }

  .esg-title {
    font-size: 22px;
  }

  /* KV：文字在上、整張圖在下，白色漸層改為由上往下 */
  .esg-kv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
  }

  .esg-kv__txt {
    position: relative;
    top: auto;
    left: auto;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding: 24px 16px 0;
    text-align: center;
    -webkit-transform: none;
    transform: none;
  }

  .esg-kv__txt h1 {
    font-size: 36px;
    line-height: 47px;
  }

  .esg-kv__txt p {
    margin-top: 11px;
    font-size: 22px;
    line-height: 31px;
    text-align: center;
  }

  .esg-kv__bg {
    position: relative;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    height: auto;
    margin-top: 2px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .esg-kv__bg img {
    position: static;
    display: block;
    width: 100%;
  }

  .esg-kv__bg::after {
    top: -1px;
    /* 蓋住圖片頂端的半像素邊 */
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.95) 9%, rgba(255, 255, 255, 0.9) 13.6%, rgba(255, 255, 255, 0.83) 18.2%, rgba(255, 255, 255, 0.72) 22.7%, rgba(255, 255, 255, 0.59) 27.3%, rgba(255, 255, 255, 0.42) 31.8%, rgba(255, 255, 255, 0.21) 36.4%, rgba(255, 255, 255, 0) 41.5%);
  }

  /* 當投資遇上永續? */
  .esg-intro {
    padding: 28px 0 34px;
  }

  .esg-intro__inner {
    display: block;
  }

  .esg-intro__lead {
    padding: 0 16px;
  }

  .esg-intro__lead .esg-title {
    margin-bottom: 10px;
  }

  .esg-intro__slider {
    max-width: none;
    margin-top: 28px;
  }

  .esg-intro__card {
    min-height: 0;
    padding: 16px 16px 18px;
  }

  /* 玉山攜手顧客，共創永續價值 */
  .esg-value {
    padding: 34px 0 0;
  }

  .esg-value__inner {
    display: block;
  }

  .esg-value__lead {
    max-width: none;
  }

  .esg-value__lead .esg-title {
    margin-bottom: 16px;
    font-size: 18px;
    text-align: center;
    color: #648c80;
  }

  .esg-value__panel {
    max-width: none;
    margin: 0 -16px;
    padding: 18px 16px 26px;
  }

  .esg-value__item+.esg-value__item {
    margin-top: 22px;
    padding-top: 22px;
  }

  .esg-value__item h3 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .esg-value__item p {
    margin-top: 12px;
  }

  /* ESG產品 */
  .esg-prod {
    padding: 80px 0 60px;
  }

  .esg-prod__inner {
    padding: 0 14px;
  }

  .esg-prod .esg-title {
    color: #009973;
  }

  .esg-prod__banner {
    margin-top: 10px;
    border-radius: 16px;
    aspect-ratio: 360 / 176;
  }

  .esg-tabs {
    margin-top: 14px;
  }

  .esg-tabs__btn {
    font-size: 16px;
  }

  .esg-prod__panel {
    margin-top: 20px;
  }

  .esg-prod__item {
    display: block;
    min-height: 0;
    padding: 12px 14px 12px;
  }

  .esg-prod__item+.esg-prod__item {
    margin-top: 12px;
  }

  .esg-prod__main {
    padding-right: 0;
  }

  .esg-prod__meta {
    margin-top: 6px;
    text-align: left;
  }

  .esg-prod__meta p {
    text-align: left;
    white-space: normal;
  }

  .esg-prod__footnote {
    margin-top: 32px;
  }

  .esg-popup {
    padding: 44px 14px 20px;
  }

  .esg-popup__title {
    padding: 0 30px;
    font-size: 20px;
  }

  /* e起投資 */
  .esg-invest {
    padding: 14px 0 34px;
  }

  .esg-invest .esg-title {
    margin-bottom: 12px;
  }

  .esg-invest__list {
    display: block;
    margin: 0 16px;
  }

  .esg-invest__list li {
    margin: 0;
  }

  .esg-invest__list li+li {
    margin-top: 15px;
  }

  .esg-invest__card {
    min-height: 0;
    padding: 20px 26px 24px;
  }

  .esg-invest__arrow {
    margin-top: 26px;
  }

  .esg-invest__note {
    margin-top: 22px;
  }

  /* 理財觀點 */
  .esg-view {
    padding: 28px 0 60px;
  }

  .esg-view__box {
    display: block;
  }

  .esg-view__txt {
    padding: 24px 16px 22px;
  }

  .esg-view__txt .esg-title {
    font-size: 22px;
    line-height: 26px;
  }

  .esg-view__slider {
    max-width: none;
    border-top: 1px solid #afc6ba;
  }

  .esg-view__slide {
    min-height: 60vw;
    /* 舊瀏覽器不支援 aspect-ratio 時的後備高度 */
    aspect-ratio: 357 / 238;
  }

  .esg-view__slide span {
    padding: 8px 14px 26px;
    font-size: 14px;
    line-height: 21px;
  }

  /* e理財 愛地球 */
  .esg-eco .esg-title {
    margin-bottom: 12px;
  }

  .esg-eco__list {
    display: block;
  }

  .esg-eco__card {
    max-width: 322px;
    margin: 0 auto;
  }

  .esg-eco__card+.esg-eco__card {
    margin-top: 18px;
  }

  /* 碳標籤認證：說明文字可收合 */
  .esg-carbon {
    padding-top: 46px;
  }

  .esg-carbon .esg-title {
    margin-bottom: 14px;
  }

  .esg-carbon__grid {
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
  }

  .esg-carbon__block {
    grid-column: 1 / -1;
    margin: 0 18px;
  }

  .esg-carbon__block+.esg-carbon__block {
    margin-top: 14px;
  }

  .esg-carbon__toggle {
    padding-right: 34px;
    cursor: pointer;
  }

  .esg-carbon__toggle svg {
    display: block;
    position: absolute;
    top: 50%;
    right: 4px;
    width: 20px;
    height: 11px;
    margin-top: -5px;
    fill: none;
    stroke: #648c80;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }

  .esg-carbon__block.is-closed .esg-carbon__toggle svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .esg-carbon__block.is-closed p {
    display: none;
  }

  .esg-carbon__block p {
    max-width: none;
  }

  .esg-carbon__fig {
    margin-top: 28px;
  }

  .esg-carbon__fig figcaption {
    margin-top: 10px;
    padding: 0 6px 0 18px;
  }

  /* 注意事項 */
  .esg-page .faq {
    padding: 70px 16px 60px;
  }

  .esg-page .faq .sub-title {
    margin-bottom: 14px;
    font-size: 22px;
  }

  .esg-page .faq .row {
    padding: 4px 14px;
  }
}

/* ==========================================================================
   窄螢幕（340px 以下，例如 iPhone SE 第一代）
   ========================================================================== */
@media (max-width: 340px) {
  .esg-kv__txt h1 {
    font-size: 32px;
  }

  .esg-kv__txt p {
    font-size: 19px;
  }
}