@charset "utf-8";
/* ══════════════════════════
   BANNER / SPLIDE
══════════════════════════ */
#banner-splide { width: 100%; height: 100vh; }
#banner-splide .splide__track { height: 100%; }
#banner-splide .splide__list { height: 100%; }
#banner-splide .splide__slide {
  position: relative; height: 100%;
  overflow: hidden;
}
.slide-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 8s ease-out;
}
.splide__slide.is-active .slide-media { transform: scale(1); }

.slide-video-wrap {
  position: absolute; inset: 0; overflow: hidden;
}
.slide-video-wrap iframe,
.slide-video-wrap video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  pointer-events: none;
}
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    0deg,
    rgba(10,22,14,0.25) 0%,
    rgba(10,22,14,0.05) 40%,
    rgba(10,22,14,0.5) 65%,
    rgba(10,22,14,0.75) 100%
  );
}
.slide-content {
  position: absolute; inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2em;
  padding: 6.25vw 6.25vw 4.76vw;
  box-sizing: border-box;
}
.slide-label{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.slide-label .label-item{
  font-size: 1.3em;
  line-height: 180%;
  letter-spacing: 0.3em;
  color: var(--cyan-blue-light);
  padding: 8px 15px;
  border-radius: 99px;
  background-color: var(--green-dark);
}
.slide-tag {
  font-size: 2.4em; letter-spacing: 0.3em;
  color: var(--gold-light);
  text-transform: uppercase;
  opacity: 0; transform: translateY(20px);
  transition: all 0.7s 0.2s;
}
.slide-title {
  font-family: "Noto Serif SC", "微軟雅黑", "Microsoft YaHei", serif;
  font-size: clamp(2.625rem, 6vw, 5rem);
  font-weight: 600; line-height: 1.1;
  color: #fff;
  opacity: 0; transform: translateY(24px);
  transition: all 0.8s 0.35s;
}
.slide-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  color: var(--gold-light);
  display: block; font-size: 1.15em;
}
.slide-desc {
  font-size: 1.8em;
  line-height: 150%;
  font-weight: 300;
  color: rgba(255,255,255,0.95);
  max-width: 480px; line-height: 1.7;
  margin-bottom: 20px;
  opacity: 0; transform: translateY(20px);
  transition: all 0.8s 0.5s;
}
.slide-cta {
  display: inline-flex;
  align-items: center; gap: 10px;
  color: #fff;
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-light);
  padding: 15px 1.5em;
  opacity: 0; transform: translateY(16px);
  transition: all 0.7s 0.65s;
  max-width: calc(7.6em + 56px);
}
.slide-cta:hover,
.slide-cta:focus {
  color: var(--gold-light);
}
.slide-cta .arrow{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gold-light);
  border-radius: 99px;
  transition:all 0.4s ease;
}
.slide-cta .arrow::before{
  content: '';
  display: block;
  transition: transform 0.3s;
}
.slide-cta .arrow::before{
  width: 16px;
  height: 16px;
  background-color: rgb(255, 255, 255);
  mask-image: url(../images/icon_readmore.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
}
.slide-cta:hover .arrow{
  transform: translateX(6px);
}
.splide__slide.is-active .slide-tag,
.splide__slide.is-active .slide-title,
.splide__slide.is-active .slide-desc,
.splide__slide.is-active .slide-cta {
  opacity: 1; transform: translateY(0);
}
@media (max-width: 768px) {
  .slide-content { padding: 10vw 20px 32px;}
}
@media screen and ( min-width: 991px) {
  .slide-desc {max-width: 50%;}
}
@media screen and (min-width:1200px) {
  #banner-splide {height: calc(100vh - 176px);}
  #wrapper:has(#header.flex) #banner-splide {
    height: calc(100vh - 90px);
  }
  .slide-content {padding: 120px 120px 80px;}
}
/* Splide custom arrows */
#banner-splide .splide__arrow {
  background: rgba(12,31,20,0.6);
  border: 1px solid rgba(196,151,58,0.4);
  width: 48px; height: 48px;
  border-radius: 99px;
  backdrop-filter: blur(8px);
  transition: all 0.3s;
  opacity: 0;
}
#banner-splide .splide__arrow svg { fill: var(--gold); }
#banner-splide .splide__arrow:hover {
  background: var(--gold);
  border-color: var(--gold);
}
#banner-splide .splide__arrow:hover svg { fill: var(--green-dark); }
#banner-splide .splide__arrows { display: flex; }
#banner-splide .splide__arrow--prev { left: -40px; }
#banner-splide .splide__arrow--next { right: -40px; }
#banner-splide:hover .splide__arrow--prev { left: 40px; opacity: 1;}
#banner-splide:hover .splide__arrow--next { right: 40px; opacity: 1;}
/* Splide custom pagination */
#banner-splide .splide__pagination {
  bottom: 30px;
  gap: 8px;
}
#banner-splide .splide__pagination__page {
  width: 32px; height: 6px; border-radius: 6px;
  background: rgba(255,255,255,0.9);
  transition: background 0.3s, width 0.3s;
  position: relative;
  overflow: hidden;
  opacity: 1;
}
#banner-splide .splide__pagination__page.is-active {
  width: 56px;
  transform: none;
}
#banner-splide .splide__pagination__page::before{
  content: "";display: block;
  width: 0%;height: 100%;
  background: var(--cyan-blue-light);
  border-radius: 6px;
}
#banner-splide .splide__pagination__page.is-active::before{
  transition:all 0.2s;
	animation-duration:5.5s;
	animation-iteration-count:1;
	animation-name:fullWidth;
	animation-fill-mode: forwards;
}
#banner-splide:has(.slide-video-wrap) li:first-of-type .splide__pagination__page.is-active::before{
  animation-duration:20s;
}
@-webkit-keyframes fullWidth{
	0%{width:0%;}
	100%{width:100%;}
}
@keyframes fullWidth{
	0%{width:0%;}
	100%{width:100%;}
}
@media screen and (max-width: 767px) {
  #banner-splide .splide__arrow {
    display: none;
    visibility: hidden;
  }
}
@media screen and (min-width: 1260px) {
  #banner-splide:hover .splide__arrow--prev { left: 80px;}
  #banner-splide:hover .splide__arrow--next { right: 80px;}
}
/* ── Video Controls (Slide 1) ── */
.video-controls {
  position: absolute;
  bottom: 40px; right: 20px;
  display: flex; gap: 8px;
  z-index: 20;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
  pointer-events: none;
}
.splide__slide.is-active .video-controls {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.video-ctrl-btn {
  width: 44px; height: 44px;
  border: none;
  background: #fff;
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
  position: relative;
  overflow: hidden;
  border-radius: 44px;
}
.video-ctrl-btn:hover {
  background: rgba(196,151,58,0.75);
  border-color: var(--gold);
  transform: scale(1.06);
}
.video-ctrl-btn span {
  width: 20px; height: 20px;
  fill: #fff;
  position: absolute;
  transition: opacity 0.2s, transform 0.2s;
  background-color: #333;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: auto;
}
.video-ctrl-btn:hover span{
  background-color: #fff;
}
#iconVideoPause{
  mask-image: url(../images/video_pause.svg);
}
#iconVideoPlay{
  mask-image: url(../images/video_play.svg);
}
#iconMuted{
  mask-image: url(../images/video_muted.svg);
}
#iconUnmuted{
  mask-image: url(../images/video_unmuted.svg);
}
/* icon states */
.video-ctrl-btn .icon-show { opacity: 1; transform: scale(1); }
.video-ctrl-btn .icon-hide { opacity: 0; transform: scale(1); }

/* tooltip */
.video-ctrl-btn::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(12,31,20,0.9);
  color: rgba(255,255,255,0.85);
  font-size: 0.625rem; letter-spacing: 0.12em;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid rgba(196,151,58,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.video-ctrl-btn:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* scroll indicator */
.scroll-hint {
  position: absolute; bottom: 30px; right: 48px;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 1.2em; letter-spacing: 0.2em;
  z-index: 10;
  visibility: hidden;
}
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.6) translateY(20px); }
}
@media screen and (min-width: 768px) {
  .video-controls { right: 30px;}
}
@media screen and (min-width: 991px) {
  .video-controls { right: 48px;}
}
/* ══════════════════════════
   SECTION COMMONS
══════════════════════════ */
.section {
  padding: 8vw 0;
  position: relative;
}
.section.box1{
  padding-bottom: 0;
}
.section.box1::before{
  content: '';display: block;
  width: 100%; height: 100%;
  background-color: #faf6ed;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.section.box2::before{
  content: '';display: block;
  width: 100vw; height: 100vw;
  background-image: url(../images/totem_yao.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: 0;
  transform:translate3d(35%, 30%, 0);
  opacity: .1;
  z-index: -1;
}
.section.box2::after{
  content: '';display: block;
  width: 100%; height: 100%;
  background-color: #faf6ed;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -2;
}
.section.box3{
  z-index: 1;
  overflow: hidden;
}
.section.box3::before {
    content: '';display: block;
  width: 100vw; height: 100vw;
  background-image: url(../images/totem_dong.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: 0;
  transform:translate3d(-14.5%, 20%, 0);
  opacity: .95;
}
.section.box3::after{
  content: '';display: block;
  width: 100%; height: 100%;
  background-color: #6d5141;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.section.box4,.section.box5,.section.box6{
  padding-bottom: 0;
}
.section.box5::before{
  content: '';
  display: block;
  width: 100%;height: 100%;
  background-color: #fff;
  background-image: linear-gradient(0deg, #f5eee1 20%, rgba(255,255,255,0) 80%);
  position: absolute;
  right: 0;bottom: 0;
  z-index: -1;
}
.section.box6::before{
  content: '';display: block;
  width: 100%;height: 0%;
  padding-bottom: 74%;
  background-image: url(../images/sustainability_bg.webp);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: -6vw;
  z-index: -1;
}
.section.box8{
  background-color: #e3edf1;
  background-image: linear-gradient(0deg, #e3edf1 0%,  #c8e1e6 100%);
  background-image: url(../images/mountains.webp);
  background-position: center calc(100% + 1px);
  background-repeat: no-repeat;
  background-size: 116vw auto;
  padding-bottom: 21vw;
}
/**/
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 2vw;
}
.section-header .flex-gap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}
.section-header:has(.section-label){
  gap: 1.5em;
}
.section-header.header-center{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.section-title {
  font-family: "微軟雅黑", "Microsoft YaHei", serif;
  font-size: clamp(1.875rem, 4vw, 4.125rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-dark);
}
.section-title:has(em){
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2rem;
}
.section-title em {
  font-size: 1.25rem;
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  color: var(--gold-dark);
  display: block;
}
.section-title em[lang="en"]{
  font-family: Arial, Helvetica, sans-serif;
}
.section-label {
  font-size: clamp(1.25rem, 1.428vw, 1.875rem);
  line-height: 150%;
  letter-spacing: 0.025em;
  font-weight: 400;
  color: var(--text-mid);
  text-transform: uppercase;
  font-family: system-ui,sans-serif;
}
/**/
.light-type .section-title{
  color: var(--text-white);
}
.light-type .section-title em {
  color: #d1ba9a;
}
.light-type .section-label{
  color: #bbbbbb;
}
@media (max-width: 768px) {
  .section {padding: 12vw 0;}
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .section-title:has(em){gap: 1rem;}
}
@media screen and (min-width: 991px) {
  .section {padding: 5.2vw 0;}
  .section-title em {font-size: 1.5625rem;}
  .section-label {font-size: 3em;}
}
/**/
.readMore a{
	display:inline-block;
	padding:20px 20px 20px 30px;
	box-sizing:border-box;
	background-color:transparent;
  border: 1px solid #000;
	color:#000;
	font-size:1.8em;
	font-weight:bold;
	line-height:120%;
	transition:all 0.1s ease;
	border-radius:40px;
	box-shadow:0 0 4px rgba(255,255,255,0.3);
}
.readMore a:hover,
.readMore a:focus{
	background-color:#000;
	border-color:transparent;
	color:#ffffff;
}
.readMore a span{
	display: flex;
	align-items: center;
	position:relative;
	padding-right:56px;
	transition:all 0.4s ease;
}
.readMore a span:before,
.readMore a span:after{
	content:"";display:block;
	position:absolute;
	right:0;top:50%;
}
.readMore a span:before{
  width:30px; height:30px;
	background-color:#000;
  border-radius: 30px;
  margin-top: -15px;
}
.readMore a span:after{
  width:16px; height:16px;
  background-color: #fff;
  mask-image: url(../images/icon_readmore.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  margin-top: -8px;
  margin-right: 7px;
}
.coverBox .arrowMore{
  position: absolute;
  right: 0;bottom: 0;
  z-index: 1;
}
.arrowMore{
  width: auto;
  height: 70px;
  padding-left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  border-radius: 35px 0 20px;
  font-size: 1.8em;
  color: var(--text-dark);
  transition:all 0.4s ease;
  background-color: transparent;
}
.arrowMore{white-space: nowrap;}
a:hover .arrowMore,
a.arrowMore:hover{
  transform: translate3d(5px, 0, 0);
  color: var(--gold-dark);
}
.arrowMore .arrow{
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--text-dark);
  border-radius: 99px;
  transition:all 0.4s ease;
}
a.arrowMore:hover .arrow,
a.arrowMore:focus .arrow{
  background-color: var(--gold-dark);
}
.arrowMore .arrow::before{
  content: '';
  display: block;
  transition: transform 0.3s;
  width: 16px;
  height: 16px;
  background-color: rgb(255, 255, 255);
  mask-image: url(../images/icon_readmore.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
}
/* ══════════════════════════
  三大园区
══════════════════════════ */
.viewpointList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap:20px;
}
.viewpointList .item {
    width: 100%;
    transition: all 0.4s ease;
    min-width: 180px;
}
.viewWrap {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.coverBox {
  width: 100%;
  position: relative;
  display: block;
  transition: all 0.5s ease;
}
.viewWrap .photo {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  mask-image:
    url(../images/curve_box_top.svg),
    url(../images/curve_square.svg),
    url(../images/curve_box.svg),
    url(../images/curve_masking.svg);
  mask-size: 100% auto,100% auto,100% auto,auto 160px;
  mask-repeat: no-repeat;
  mask-position: left top,left calc(100% - 120px),left calc(100% - 200px) ,bottom right;
}
.viewWrap .photo .img {
  width: 100%;
  height: 0%;
  padding-bottom: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.5s ease;
}
.viewWrap:hover .photo .img,
.viewWrap:focus .photo .img {
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  transform: scale(1.08);
}
.viewWrap .photo img {
  object-fit: cover;
  object-position: center;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  max-width: none !important;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate3d(-50%, 0%, 0);
}
.viewWrap .photo::after{
  content: "";display: block;
  position: absolute;
  left: 0;top: 0;
  width: 100%;height: 100%;
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.7) 90%
  );
}
.viewWrap .photo,
.viewWrap .photo img{
  border-radius:clamp(1.5rem, 4.8vw, 2.5rem);
}
.viewWrap .coverWord {
  position: absolute;
  left: 0;top: 0;
  width: 100%;height: 100%;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px 20px 80px;
}
.viewWrap .firstTitle {
  font-size: 1.4em;
  font-weight: 400;
  background-color: #8f200e;
  padding: 10px 15px;
  border-radius: 99px;
  margin-bottom: 0.5em;
  white-space: nowrap;
}
.item:nth-child(2n) .viewWrap .firstTitle{
  background-color: #b18653;
}
.item:nth-child(3n) .viewWrap .firstTitle{
  background-color: #4c6a52;
}
.viewWrap .coverWord dl dt {
  font-size: 2.5em;
  line-height: 150%;
  font-weight: bold;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}
.viewWrap .coverWord dl dd {
  font-size: 1.5em;
  line-height: 150%;
  margin-top: .5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.viewWrap .coverWord dl dd[lang="en"]{
  font-family: "Bahnschrift", Arial, Helvetica, sans-serif;
  margin-top: .125em;
}
@media screen and (max-width: 990px) {
    .viewWrap .firstTitle {
    font-size: 1.3em;
    padding: 5px 10px;
  }
}
@media screen and (max-width: 480px) {
  .viewWrap .coverWord dl dt {
    font-size: 1.8em;
  }
}
@media screen and (min-width: 991px) {
  .viewpointList{
    flex-wrap: nowrap;
    flex-direction: row;
  }
  .viewpointList .item {width: 20%;}
  .viewpointList .item.focu-show{flex-grow: 1;}
  .coverBox {
    height: 66vh;
    min-height: 640px;
  }
  .viewWrap .photo .img {
    height: 100%;
    padding-bottom: 0%;
  }
  .viewWrap .coverWord {
    padding: 40px 30px 80px;
  }
  .viewWrap .photo,
  .viewWrap .photo img{
    border-radius: 40px;
  }
}
@media screen and (min-width: 1260px) {
  .viewpointList{gap: 30px;}
  .viewpointList .item {width: 25%;}
  .viewWrap .coverWord dl dt {font-size: 3.2em;}
  .viewWrap .coverWord dl dd {font-size: 2em;}
  .viewWrap .coverWord dl dd[lang="en"]{ font-size: 2.4em;}
}
@media screen and (min-width: 1680px) {
  .viewpointList .item {width: 484px;}
  .viewWrap .coverWord dl dt {font-size: 3.6em;}
}
/* ══════════════════════════
   桃源风情
══════════════════════════ */
.ethnicList{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
  gap: 20px;
  margin: 0 auto;
}
.ethnicList .item{
  width: 100%;
}
.ethnicList .item a{
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  border-radius: clamp(1.5rem, 4.8vw, 2.5rem);
  overflow: hidden;
}
.ethnicList .item a:hover,
.ethnicList .item a:focus{
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-name:pulse;
  -webkit-animation-timing-function:ease-in-out;
  animation-timing-function:ease-in-out
}
.ethnicList .item a::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-image: url(../images/ethnic_cover.webp);
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: luminosity;
}
.ethnicList .item:first-of-type a{
  background-color: #662619;
}
.ethnicList .item:nth-of-type(2) a{
  background-color: #392241;
}
.ethnicList .item:nth-of-type(3) a{
  background-color: #1a2f1c;
}
.ethnicList .item:last-of-type a{
  background-color: #2e2d56;
}
.pattern-box{
  width: 100%;height: 100%;
  position: relative;
  z-index: 1;
}
.pattern-box img{
  object-fit: cover;
  object-position: center center;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  position: absolute;
  left: 50%;top: 0%;
  transform: translate3d(-50%, 0%, 0);
}
@-webkit-keyframes pulse{
  0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
  50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
  to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@keyframes pulse{
  0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
  50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
  to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@media screen and (min-width: 768px) {
  .ethnicList{
    grid-template-columns: repeat(4, 1fr);
  }
  .ethnicList .item:nth-child(2n){margin-top: 3.5vw;}
}
@media screen and (min-width: 1260px) {
  .ethnicList{gap: 30px;}
  .ethnicList .item a{border-radius: 40px;}
}
@media screen and (min-width: 1680px) {
  .ethnicList{
    gap: 40px;
    max-width:1500px;
  }
  .ethnicList .item:nth-child(2n){
    margin-top: 60px;
  }
}
/* ══════════════════════════
   Splide Control Buttons
══════════════════════════ */
div[class$="-splide"]:has(.is-overflow) .splide{
  padding-bottom:36px;
}
.section .splide__list { cursor: grab; }
.section .splide__list:active { cursor: grabbing; }
/* ── Arrows ── */
.section .splide__arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section .splide__arrow {
  position: static; transform: none;
  width: 48px; height: 48px; border-radius: 0;
  background: transparent;
  border: none;
  opacity: 1;
  transition: background 0.3s, border-color 0.3s;
  border-radius: 50px;
}
.section .splide__arrow svg { fill: #fff; width: 18px; height: 18px; }
.section .splide__arrow:hover { background: var(--gold); border-color: var(--gold); }
.section .splide__arrow:hover svg { fill: #000; }
.section .splide__arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.section:not(.light-type) .splide__arrow svg{
  fill: #000;
}
/* ── splideMore ── */
.morewrap{
  display: flex;
  align-items: center;
  gap: 0;
}
.splideMore{
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50px;
}
.splideMore:hover,
.splideMore:focus{
  background-color: var(--gold);
  color: #000;
}
.splideMore::before{
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  mask-image: url(../images/icon-splidemore.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.splideMore:hover::before,
.splideMore:focus::before{
  background-color: #000;
}
@media screen and (min-width: 991px) {
  #ich-splide .splide__arrows,
  #gallery-splide .splide__arrows{
    position: absolute;
    top: -80px; right:0;
  }
  .morewrap{
    position: absolute;
    top: -80px; right: calc(238px + 10px);
  }
}
/* ── Pause Btn ── */
.section button[class$="-pause-btn"]{
  width: 48px; height: 48px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
  color: #fff;
  border-radius: 50px;
}
.section button[class$="-pause-btn"]:hover { background: var(--gold); border-color: var(--gold); color: var(--green-dark); }
.section button[class$="-pause-btn"] svg { width: 16px; height: 16px; fill: currentColor; }
/* ── Counter ── */
.section *[class$="-counter"] {
  min-width: 70px;
  height: 48px;
  padding:0;
  background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  flex-shrink: 0;
  font-family: 'Bahnschrift', 'Cormorant Garamond', serif;
  font-size: 2em;
  font-weight: 400;
  line-height: 1;
}
.section *[class$="-counter-current"]{
  color: var(--gold-light);
  transition: opacity 0.2s;
}
.section *[class$="-counter-sep"] { margin: 0px 0.5em;}
.section *[class$="-counter-sep"]::before {
    content: "";
    display: block;
    width: 2px;
    height: 1.25em;
    background-color: rgba(255, 255, 255,.5);
    transform: rotate(25deg);
}
.section *[class$="-counter-total"] { color: rgba(255, 255, 255,.5); }
.section:not(.light-type) *[class$="-counter-sep"]::before {background-color: #777;}
.section:not(.light-type) *[class$="-counter-total"]{
  color: #777;
}
/* ── Pagination ── */
.section .splide__pagination {
  gap: 6px;
}
.section .splide__pagination__page {
  width: 24px; height: 6px; border-radius: 0;
  background: rgba(255,255,255,0.15);
  border: none;border-radius: 6px;
  margin: 0; opacity: 1;
  transition: background 0.3s, width 0.35s;
}
.section .splide__pagination__page.is-active {
  background: var(--gold); width: 40px; transform: none;
}
.section:not(.light-type) .splide__pagination__page{
  background: rgba(0, 0, 0, 0.6);
}
.section:not(.light-type) .splide__pagination__page.is-active {
  background: var(--gold-chroma);
}
/* ── Pause Hint ── */
.section button[class$="-pause-hint"]{
  display: flex; align-items: center; gap: 8px;
  margin-top: 28px;
  font-size: 1.3em; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.35);
}
.section button[class$="-pause-dot"]{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: pulseDot 1.8s ease-in-out infinite;
}
.section button[class$="-pause-hint"].paused .ich-pause-dot { animation-play-state: paused; background: rgba(255,255,255,0.25); }
.section button[class$="-pause-hint"].paused span::after { content: '（暫停中）'; }

/* ══════════════════════════
   桃源非遗
══════════════════════════ */
.ich-splide { position: relative;}
#ich-splide {
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#ich-splide .splide__track {
  width: 100%;
  overflow: hidden;
  padding: 5px 0;
}
/* ── ich Card ── */
.ich-card {
  border: none;
  cursor: pointer;
  transition: transform 0.35s, border-color 0.3s;
  overflow: hidden;
  position: relative;
  background-color: rgba(0, 0, 0, 0.6);
  display: block;
  border-radius: clamp(1.5rem, 4.8vw, 2.5rem);
}
.ich-card:hover {
  transform: translateY(-5px);
}
.ich-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--green-mid);
  border-radius: clamp(1.5rem, 4.8vw, 2.5rem);
  box-sizing: border-box;
}
.ich-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.55s ease;
}
.ich-card:hover .ich-img {
  transform: scale(1.2);
}
.ich-body {
  padding: 20px;
  transition:opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
.ich-type {
  font-size: 1.3em; letter-spacing: 0.22em;
  color: var(--gold-light); margin-bottom: 5px;
}
.ich-name {
  font-family: serif;
  font-size: 2em; font-weight: bold;
  color: var(--cream); line-height: 1.4;
}
.ich-badge {
  background: var(--gold-chroma);
  color: #fff;
  font-size: 1.2em;
  letter-spacing: 0.15em;
  padding: 6px 10px;
  font-weight: 400;
  font-style: italic;
  border-radius: 99px;
}
@media screen and (min-width: 1260px) {
  .ich-card,.ich-img-wrap{border-radius: 40px;}
  .ich-name { font-size: 3em;}
  .ich-body {min-height: 124px;}
}
/* ══════════════════════════
   桃源映像
══════════════════════════ */
.gallery-splide { position: relative;}
#gallery-splide {
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#gallery-splide .splide__track {
  width: 100%;
  overflow: hidden;
  padding: 5px 0;
}
/* ── gallery Card ── */
.gallery-card {
  border: none;
  cursor: pointer;
  transition: transform 0.35s, border-color 0.3s;
  overflow: hidden;
  position: relative;
  display: block;
  border-radius: clamp(1.5rem, 4.8vw, 2.5rem);
}
.gallery-card:hover {
  transform: translateY(-5px);
}
.gallery-img-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--green-mid);
  border-radius: clamp(1.5rem, 4.8vw, 2.5rem);
  box-sizing: border-box;
}
.gallery-img-wrap::after{
  content: "";display: block;
  position: absolute;
  left: 0;top: 0;
  width: 100%;height: 100%;
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.7) 90%
  );
}
.gallery-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.55s ease;
}
.gallery-card:hover .gallery-img {
  transform: scale(1.2);
}
.gallery-body {
  position: absolute;
  bottom: 0;left: 0;
  width: 100%;
  padding: 20px;
  transition:opacity 0.4s ease;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1em;
}
.gallery-name {
  font-family: serif;
  font-size: 2em; font-weight: bold;
  color: var(--cream); line-height: 1.4;
}
.gallery-badge {
  position: absolute;
  top: 16px;left: 16px;
  background: var(--black-bg);
  color: #fff;
  font-size: 1.2em;
  letter-spacing: 0.15em;
  padding: 6px 10px;
  font-weight: 400;
  font-style: italic;
  border-radius: 99px;
}
.gallery-meta {
  font-size: 1.8em;
  line-height: 150%;
  color: var(--text-gray);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gallery-meta > *{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 點＝子元素間的分隔符，不出現在第一個元素前（攝影師移除後日期成唯一子元素，否則點孤立在最前，§3-39） */
.gallery-meta >*:not(:first-child)::before{
  content: "";display: block;
  width: 3px; height: 3px;
  background-color: var(--text-gray);
  border-radius: 3px;
}
@media screen and (min-width: 1260px) {
  .gallery-card,.gallery-img-wrap{border-radius: 40px;}
  .gallery-body { padding: 30px;}
  .gallery-name { font-size: 3em;}
  .gallery-badge {top: 30px;left: 30px;}
}
/* ══════════════════════════
   桃源风情
══════════════════════════ */
.relatedLinks{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
}
.relatedLinks .item{
  max-width: 100%;
}
.relatedLinks .item a{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5em;
  text-align: center;
}
.relatedLinks .item strong{
  font-size: 2.5em;
  line-height: 150%;
  font-weight: bold;
  color: var(--text-dark);
}
.relatedLinks .item p[lang="en"] {
    font-family: "Bahnschrift", Arial, Helvetica, sans-serif;
    margin-top: .125em;
    font-size: 1.8em;
    color: var(--gold-dark);
}
.icon-box{
  width: 70%;
  position: relative;
  z-index: 1;
  background-color: #faf6ed;
  border-radius: 46% / 46%;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  max-width: 160px;
}
.icon-box .img{
  width: 100%;
  height: 100%;
  display: block;
}
.icon-box img{
  object-fit: cover;
  object-position: center center;
  width: 80% !important;
  height: 80% !important;
  max-width: none !important;
  position: absolute;
  left: 50%;top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.relatedLinks .item a:hover .icon-box,
.relatedLinks .item a:focus .icon-box{
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-name:pulse;
  -webkit-animation-timing-function:ease-in-out;
  animation-timing-function:ease-in-out
}
@media screen and (max-width: 767px){
  .relatedLinks .item{
    width: calc(50% - 10px);
  }
}
@media screen and (min-width: 768px) and (max-width: 990px){
  .relatedLinks{
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 991px) {
  .relatedLinks{
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(6, 1fr);
  }
  .relatedLinks .item{ width: 100%;}
}
@media screen and (min-width: 1260px) {
  .relatedLinks{gap: 30px;}
  .relatedLinks .item strong{ font-size: 3.2em;}
  .relatedLinks .item p[lang="en"] {font-size: 2.4em;}
}
@media screen and (min-width: 1680px) {
  .relatedLinks{gap: 40px;}
  .icon-box{max-width: 160px;}
  .relatedLinks .item strong{ font-size: 3.6em;}
}
/* ══════════════════════════
   桃源盛事
══════════════════════════ */
.eventsWrap{
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr;
  gap: 20px;
}
.oneBox{
  padding: 20px;
  position: relative;
  z-index: 1;
}
.oneBox,.firstPost{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.oneBox::before{
  content: "";display: block;
  width: 100%;height: 100%;
  border-radius: clamp(1.5rem, 4.8vw, 2.5rem);
  background-color: #d6daea;
  mask-image: url(../images/curve_masking_top.svg), url(../images/curve_square.svg), url(../images/curve_box.svg);
  mask-size: auto 160px,100% auto, 100% auto;
  mask-repeat: no-repeat;
  mask-position: top right, left 120px, left 200px;
  position: absolute;
  right: 0;top: 0;
  z-index: -1;
}
.eventsWrap .oneBox:nth-child(2n)::before{
  background-color: #cce2d4;
}
.eventsWrap .oneBox:nth-child(3n)::before{
  background-color: #dbd6d2;
}
.box-head{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
}
.box-head .arrowMore{
  position: absolute;
  top:0;right:0;
}
.titleHead{
  width: calc(100% - 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.titleHead h3{
  font-size: clamp(1.75rem, 2.38vw, 2.25rem);
  color: #3f4a75;
}
.titleHead .subtitle{
  font-size: clamp(1.125rem, 1.42vw, 1.5rem);
  color: var(--text-mid);
}
.titleHead .subtitle[lang="en"]{
  font-family: "Bahnschrift", Arial, Helvetica, sans-serif;
}
.events-name{
  color: #3f4a75;
  font-size: 1.8em;
  line-height: 150%;
}
.eventsWrap .oneBox:nth-child(2n) .titleHead h3,
.eventsWrap .oneBox:nth-child(2n) .events-name{
  color: var(--green-mid);
}
.eventsWrap .oneBox:nth-child(3n) .titleHead h3,
.eventsWrap .oneBox:nth-child(3n) .events-name{
  color: #55463c;
}
.events-meta{
  font-size: 1.8em;
  line-height: 150%;
  color: var(--gold-deep);
}
.events-meta time{white-space: nowrap;}
a:hover .events-name,a:focus .events-name,
a:hover .events-meta,a:focus .events-meta{
  color: var(--red-deep) !important;
}
.photo-wrap,.video-wrap{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(0.75rem, 2vw, 1.25rem);
  overflow: hidden;
}
.photo-wrap .img{
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.55s ease;
}
.photo-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:center;
}
a:hover .photo-wrap .img,
a:focus .photo-wrap .img {
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  transform: scale(1.08);
}
.video-wrap{
  position: relative;
}
.video-wrap::before{
  content: "";
  display: block;
  position: absolute;
  left: 50%;top: 50%;
  background-image: url(../images/ico_videoPlay.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  z-index: 2;
  opacity: .7;
  transition: opacity 0.5s ease, transform 0.4s ease;
}
a:hover .video-wrap::before{
  opacity: .85;
  transform:scale(1.1);
}
.video-wrap::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 90%);
}
.onePost{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  transition: transform 0.4s ease;
}
.onePost:has(.events-meta){
  justify-content: space-between;
}
.onePost:hover,
.onePost:focus{
  transform: translate3d(0, -3px, 0);
}
.onePost .events-name{
  flex-grow: 1;
}
.eventsList{
  width: 100%;
  position: relative;
  list-style-type: none;
}
.eventsList li:has(+li){
  margin-bottom: 1.5rem;
}
.oneBox.dotList .events-name{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.oneBox.dotList .events-name::before{
  content:"";
  width:8px; height:8px;
  border-radius:4px;
  margin-top:.65em;
  flex-shrink:0;
  background: var(--cyan-blue-light);
}
.oneBox.dotList:nth-child(even) .events-name::before{
  background:var(--gold);
}
@media screen and (min-width: 768px) and (max-width: 990px){
  .oneBox{
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    align-content: flex-start;
    min-height: calc(22.75vw + 100px);
    gap: 20px;
  }
  .box-head{ min-height: 60px;}
  .firstPost{width: 100%;}
  .oneBox:has(.eventsList) .firstPost{
    padding-left: calc(40% + 20px);
    position: relative;
  }
  .oneBox:has(.eventsList) .photo-wrap{
    position: absolute;
    left: 0;top:0;
    width: 40%;
  }
  .oneBox:has(.firstPost) .eventsList{
    width: calc(100% - (40% + 20px));
  }
  .eventsList li:has(+li){
    margin-bottom: 15px;
  }
  .onePost .events-name{
    max-width: calc(100% - 110px);
  }
}
@media screen and (min-width: 768px) {
  .events-name{
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .onePost .events-name{
    max-width: calc(100% - 120px);
  }
}
@media screen and (min-width: 991px) {
  .eventsWrap{
    grid-template-columns: repeat(3, 1fr);
  }
  .oneBox{min-height: 100%;}
  .eventsList li:has(+li){
    margin-bottom: 2.5rem;
  }
  .oneBox:has(.firstPost) .eventsList li:has(+li){
    margin-bottom: 1.5rem;
  }
}
@media screen and (min-width: 1260px) {
  .eventsWrap{gap:30px;}
  .eventsWrap .oneBox{padding: 30px;}
  .eventsWrap .oneBox::before{border-radius: 40px;}
  .photo-wrap,.video-wrap{border-radius: 20px;}
  .events-name,.events-meta{
    font-size: 2em;
    line-height: 180%;
  }
  .onePost{flex-wrap: nowrap;}
  .oneBox.dotList .events-name::before{margin-top:.75em;}
}
/* ══════════════════════════
   桃源研学
══════════════════════════ */
.learnWrap{
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr;
  gap: 20px;
}
.learnWrap .oneBox::before{
  background-color: #2d713a;
}
.learnWrap .oneBox:nth-child(2n)::before{
  background-color: #b18653;
}
.learnWrap .oneBox:nth-child(3n)::before{
  background-color: #466e8c;
}
.learnWrap .photo-wrap,
.learnWrap .video-wrap{
  aspect-ratio: 3 / 2;
}
.learnWrap .titleHead .subtitle{
  color: #dddddd;
}
.learnWrap .events-name,
.learnWrap .titleHead h3,
.learnWrap .oneBox:nth-child(2n) .titleHead h3,
.learnWrap .oneBox:nth-child(2n) .events-name,
.learnWrap .oneBox:nth-child(3n) .titleHead h3,
.learnWrap .oneBox:nth-child(3n) .events-name{
  color: var(--text-white);
}
.learnWrap .events-meta{ color: #e6d282;}
.learnWrap a:hover .events-name,
.learnWrap a:focus .events-name,
.learnWrap a:hover .events-meta,
.learnWrap a:focus .events-meta{
  color: var(--cyan-blue-light) !important;
}
@media screen and (min-width: 768px) and (max-width: 990px){
  .learnWrap .oneBox{min-height:calc(26.5vw + 100px);}
}
@media screen and (min-width: 991px) {
  .learnWrap{
    grid-template-columns: 1fr 1fr 1fr;   /* §3-42：三卡等寬（原 1fr 1fr 38.809% 是 M2+M2+M1 不對稱佈局；研學盛事改圖文後三卡統一） */
  }
}
@media screen and (min-width: 1260px) {
  .learnWrap{gap:30px;}
  .learnWrap .oneBox{padding: 30px;}
  .learnWrap .oneBox::before{border-radius: 40px;}
  .learnWrap  .box-head{ min-height: 80px;}
}
@media screen and (min-width: 1680px) {
  .learnWrap{
    grid-template-columns: 1fr 1fr 1fr;   /* §3-42：三卡等寬（原 652px 固定第三欄＝舊不對稱佈局） */
  }
}
/* ══════════════════════════
   桃源永续
══════════════════════════ */
.esgWrap{ width: 100%;}
/* ---- Card grid ---- */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.card{
  position:relative;
  border-radius:clamp(1.5rem, 4.8vw, 2.5rem);
  background-color: transparent;
  box-shadow:var(--shadow);
  padding:20px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.esgWrap .card::before{
  content: "";
  display: block;
  width: 100%;height: 100%;
  border-radius: clamp(1.5rem, 4.8vw, 2.5rem);
  background-color: #faf0d7;
  mask-image: url(../images/curve_masking_top.svg), url(../images/curve_square.svg), url(../images/curve_box.svg);
  mask-size: auto 160px, 100% auto, 100% auto;
  mask-repeat: no-repeat;
  mask-position: top right, left 120px, left 200px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.card-head{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height: 70px;
}
.card-head-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.card-head .arrowMore{
  position: absolute;
  right: 0;top:0;
}
.icon-circle{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background:#fff;
  mask-image: url(../images/ico_mask.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.card-head-text .zh-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.75rem, 2.38vw, 2.25rem);
  color:var(--ink);
}
.card-head-text .en-label{
  display:block;
  font-family:var(--font-heading);
  font-style:normal;
  color:var(--gold-chroma);
  margin-bottom:2px;
  font-size:clamp(1.125rem, 1.42vw, 1.5rem);
  font-weight: 600;
  font-family: Bahnschrift, Arial, Helvetica, sans-serif;
}
/* ---- Photo carousel ---- */
.photo-splide{
  overflow:visible;
}
.photo-splide .splide__track{
  border-radius:clamp(0.75rem, 2vw, 1.25rem);
  overflow: hidden;
}
.photo-splide .splide__slide{
  position:relative;
}
.ph-photo{
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}
.ph-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* dots pagination */
.photo-splide .splide__pagination{
  bottom:auto;
  top:-30px;right:0;
  justify-content: flex-end;
  gap:10px;
}
.photo-splide .splide__pagination__page,
.photo-splide:not(.light-type) .splide__pagination__page{
  background:#b2b2b2;
  width:10px; height:10px;
  opacity:1;
  margin: 5px;
}
.photo-splide .splide__pagination__page.is-active{
  width:10px; height:10px;
  background:#fff;
}
.photo-splide .splide__pagination__page.is-active::before{
  content: "";display: block;
  width:20px; height: 20px;
  border: 1px solid var(--gold-chroma);
  position: absolute;
  left: -5px;top:-5px;
  border-radius: 20px;
}
/* ---- Bullet list ---- */
ul.feature-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:15px;
}
ul.feature-list li{
  font-size:1.8em;
  line-height:150%;
}
ul.feature-list li a{ color: var(--text-mid);}
ul.feature-list li a:hover,
ul.feature-list li a:focus{ color: var(--red-deep);}
ul.feature-list .onePost{
  display:flex;
  align-items:flex-start;
  justify-content: flex-start;
  gap:12px;
}
ul.feature-list .onePost::before{
  content:"";
  width:8px; height:8px;
  border-radius:4px;
  background:var(--gold-chroma);
  margin-top:.65em;
  flex-shrink:0;
}
@media screen and (min-width: 768px) and (max-width: 990px){
  .esgWrap .card{
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 20px;
  }
  .photo-splide{width: 40%;}
  ul.feature-list{width: calc(100% - (40% + 20px));}
}
@media screen and (min-width:991px){
  .grid{grid-template-columns:repeat(3, 1fr);}
  .esgWrap .card::before{
    background-color: #fff;
  }
  .card-head{min-height: 80px;}
  .icon-circle{background-color: #eee3d0;}
}
@media screen and (min-width: 1260px) {
  .grid{gap:30px;}
  .esgWrap .card::before{border-radius: 40px;}
  .icon-circle{width: 80px;height: 80px;}
  .card{padding: 30px;}
  ul.feature-list li{
    font-size:2em;
    line-height:180%;
  }
  ul.feature-list .onePost::before{margin-top:.75em;}
}
/* ══════════════════════════
   FADE-IN ANIMATION
══════════════════════════ */
.fade-up {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@media print {

}