.forXS {
	display:none;
}
.index {
	font-family:'Noto Sans TC', sans-serif;
  --c-bg: #161617;
  --c-black: #000;
  --c-bold: #1f1f1f;
  --c-text: #3c3c3c;
  --t64:clamp(36px, 3.33vw, 64px);
  --t42:clamp(24px, 2.188vw, 42px);
  --t36:clamp(20px, 1.875vw, 36px);
  --t30:clamp(17px, 1.563vw, 30px);
  --t24:clamp(14px, 1.25vw, 24px);
  --t22:clamp(12px, 1.146vw, 22px);
  --t20:clamp(12px, 1.042vw, 20px);
  --t18: 18px;
}
.sec-heading {
   font-weight:bold;
   font-size:var(--t64);
   text-align:center;
}
.index img{
  max-width: 100%;
  width:100%;
  height:auto;
}
.c-green {
	color:#30DD59;
}

#index-2-top {
	background:var(--c-bg);
}
#index-4-bottom{
	background:#fff;
}

@media (max-width: 991px) {
.forXS {
	display:block;
}
.forLG {
	display:none;
}
.index {
  --t64:11.11vw;
  --t42:6.401vw;
  --t36:clamp(20px, 1.875vw, 36px);
  --t24:clamp(14px, 1.25vw, 24px);
  --t22:clamp(12px, 1.146vw, 22px);
  --t20:3.623vw;
  --t18: 14px;
}
}

/*-----------------------
.block-hero
------------------------*/
.block-hero{
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(226, 215, 203, 0.5) 100%);
}

.block-hero .hero-inner{
  position:relative;
   overflow: hidden;
}
.block-hero .bg-image{
  max-width:100%;
  display:block;
  position:relative;
  margin:0 auto;
}
.block-hero .bg-image img{
  max-width: 100%;
  width:100%;
  height:auto;
  object-fit:cover;
}

.block-hero .overlay{
	position: absolute;
    display: flex;
    flex-direction: column;
	align-items: center;
    bottom: 40%;
    left: 10%;
}
.block-hero .overlay img{
    max-width: 100%;
    width: clamp(360px, 21.4vw, 411px);
	height:auto;
    margin-bottom: 1.302vw;
}
.block-hero .overlay .cta-btn{
  display:block;
  text-align:center;
  background:#000;
  color:#fff;
  padding:15px 10px;
  text-decoration:none;
  font-weight:400;
  border-radius:36px;
  letter-spacing:0.6px;
  pointer-events:auto;
  width: 180px;
  font-size:18px;
}
.block-hero .overlay .cta-btn:hover{
  font-weight:bold;
}

@media (max-width: 991px) {
.block-hero .overlay{
    bottom: 6%;
    left: 0;
	right:0;
    text-align: center;
}
.block-hero .overlay img {
    max-width: 100%;
    width: 80%;
    height: auto;
    margin-bottom: 0px;
} 
.block-hero .overlay .cta-btn{
	width: 25.8vw;
	font-size: 4.265vw;
	padding: 1.93vw 3.823vw 2.6vw;
}
#index-hero-btm.block-hero .overlay {
	bottom: auto;
	top: 10%;
}
#index-hero-btm.block-hero .overlay img {
	max-width: 100%;
	width: 58%;
}
#index-hero-btm.block-hero .overlay .cta-btn {
	width: 28.8vw;
	font-size: 3.865vw;
	padding: 1.63vw 3.823vw 2.4vw;
	margin-top: 4vw;
}
#index-hero-btm.block-hero .bg-image img {
    max-width: 100%;
    width: 100%;
    height: 130vw;
}

}


/*-----------------------
.block-banner
------------------------*/
.block-banner{
background: #fff;
}
.block-banner .banner-inner{
  position:relative;
   overflow: hidden;
}
.block-banner.full-banner .banner-inner{
  width:100%;
}
.block-banner .bg-image{
  max-width:100%;
  display:block;
  position:relative;
  margin:0 auto;
}
.block-banner .bg-image img{
  max-width: 100%;
  width:100%;
  height:auto;
  object-fit:cover;
}
.block-banner .overlay-text{
	position: absolute;
    display: flex;
    flex-direction: column;
	align-items: center;
    bottom: 7%;
    left: 0;
	right:0;
    text-align: center;
}
#index-banner-1.block-banner .overlay-text h2{
	font-size:var(--t64);
	font-weight:bold;
    line-height: 1.4;
}
#index-banner-2.block-banner .banner-inner{
    padding:0 14vw;
    margin: 4vw 0 10vw;
}
#index-banner-2.block-banner .bg-image img{
    border-radius:48px
}
#index-banner-2.block-banner .overlay-text{
	color:#fff;
    bottom: 8%;
}
#index-banner-2.block-banner .overlay-text h3{
	font-size:var(--t36);
	font-weight:bold;
}
#index-banner-2.block-banner .overlay-text p{
	font-size:var(--t20);
    padding-top: 0.5vw;
}

@media (max-width: 991px) {
.block-banner .overlay-text{
    bottom: 2%;
} 
.block-banner .overlay-text h3{
    font-size: 5.797vw;	
}
.block-banner .overlay-text p{
	font-size:20px;
}
#index-banner-1.block-banner .overlay-text h2 {
    font-size: 5.797vw;
}
#index-banner-2.block-banner .overlay-text h3 {
    line-height: 1.4;
}
#index-banner-2.block-banner .banner-inner {
    padding: 0 10vw;
    margin: 0vw 0 20vw;
}
#index-banner-2.block-banner .overlay-text span{
	display:block;
}
#index-banner-2.block-banner .bg-image img {
    border-radius: 2.865vw;
	height: 110vw;
}
#index-banner-2.block-banner .overlay-text {
    color: #fff;
    bottom: 6%;
    text-align: left;
    left: 5.5%;
    align-items: flex-start;
    padding: 0 10vw;
}
}

/*-----------------------
.block-3box
------------------------*/
.block-3box {
    position:relative;
    overflow: hidden;
	background:var(--c-bg);
}
.block-3box .highlight-inner {
   padding:10vw 0 0;
}
.block-3box .sec-heading{
   color:#fff;
    padding-bottom: 5.4vw;
}
.block-3box .row-flex {
   padding:0vw 14vw;
   display:flex;
   flex-wrap:wrap;
}
.block-3box .row-flex .col-box{
   width:calc(100%/3);
   padding:0 0.4vw;
}


@media (max-width: 991px) {
.block-3box .highlight-inner {
   padding:20vw 0 16vw;
}
.block-3box .row-flex {
    padding: 0vw 6.7vw;
}
.block-3box .row-flex .col-box{
   width:calc(100%/1);
}
.block-3box .row-flex .col-box:nth-child(2),
.block-3box .row-flex .col-box:nth-child(3){
   display:none;
}
}


/*-----------------------
.block-info 
------------------------*/
.block-info {
  position:relative;
   overflow: hidden;
   background:#fff;
}
.block-info .info-inner {
   padding:12vw 0;
}
#index-smart.block-info .info-inner {
   padding:6vw 0;
}
#index-easy.block-info .info-inner {
   padding:8vw 0;
}
.block-info h2.title-center {
	color:#000;
	text-align:center;
	font-weight:bold;
	font-size:var(--t64);
}
.block-info .row-grid {
   padding:0;
   display:grid;
   grid-template-columns:1fr;
}
.block-info .row-grid .col-image{
	padding-top:4vw;
	margin:0 auto;
	max-width:60.417vw;
}
.block-info .row-grid .col-image img{
  width:100%;
  height:auto;
  object-fit:cover;
}

#index-light {
	background:var(--c-bg);
}
#index-light .info-inner{
   padding:0 11.458vw;
}
#index-light.block-info h3.title-left {
	color:#fff;
	text-align:left;
	font-weight:bold;
	font-size:var(--t42);
    margin-bottom: 0;
}
#index-light.block-info p.col-text {
	color:#86868b;
	text-align:left;
	font-size:var(--t20);
	padding-top:1.478vw;
}
#index-light.block-info p.col-text span {
	display:block;
}
#index-light.block-info p.col-text span.xs-block {
	display:inline-block;
}

#index-smart.block-info .row-grid .col-image{
	max-width:68.75vw;
}
#index-easy.block-info h2.title-center span{
	display:block;
}
#index-easy.block-info p.col-text {
	color:#000;
	text-align:center;
	font-size:var(--t24);
	padding-top:18px;
}
#index-easy.block-info .row-grid .col-image {
    order:3;
}
#index-easy.block-info .row-grid .col-note {
    order:4;
	color:#6B7280;
	text-align:center;
	font-size:var(--t20);
	padding-top:20px;
}

@media (max-width: 991px) {
.block-info h2.title-center {
    font-size: 6.763vw;
}
	
.block-info .row-grid .col-image {
    padding-top: 10.8vw;
    margin: 0 auto;
    max-width: 92vw;
}

.block-info .info-inner {
   padding:9.6vw 0;
}
#index-light .info-inner {
    padding: 0 9.6vw;
}
#index-light.block-info p.col-text {
    padding-top: 4.478vw;
}
#index-light.block-info p.col-text span.xs-block {
	display:block;
}

#index-easy.block-info .info-inner {
   padding:22vw 0;
}
#index-easy.block-info .row-grid .col-image {
    order:4;
}
#index-easy.block-info .row-grid .col-note {
    order:3;
    font-size: 2.7vw;
    padding-top: 0.8vw;
}
#index-easy.block-info p.col-text span{
	display:block;
}
#index-easy.block-info p.col-text {
    padding-top: 1vw;
}

#index-smart.block-info .info-inner {
   padding:6vw 0;
}
#index-smart.block-info .row-grid .col-image {
    max-width: 100vw;
}


}

/*-----------------------
.block-feature
------------------------*/
#index-feature {
	width: 100%;
	padding: 12vw 0 12vw;
	background:var(--c-bg);
	overflow: hidden;
}
#index-feature h3.title-left {
	color:#fff;
	text-align:left;
	font-weight:bold;
	font-size:var(--t42);
	padding-left:12vw;
	padding-bottom:3.2vw;
}
#index-feature .swiper {
	width: 100%;
	padding: 0 12%; /* 讓左右兩邊露出一點點下一張 */
}
#index-feature .swiper-slide {
	height: auto;
	cursor: pointer;
	transition: opacity 0.3s;
}
#index-feature .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.781vw;
	object-fit: cover;
}
#index-feature .slider-bottom-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 2.083vw;
	gap: 1.042vw;
	padding: 0 10%;
}
#index-feature .progress-container {
	position: relative;
	width: 15.625vw; /* 線條總長度 */
	height: 2px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
}
#index-feature .swiper-scrollbar {
	position: absolute !important;
	background: rgba(255,255,255,0.3) !important; /* 白色進度線 */
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	border-radius: 2px;
	opacity: 1 !important;
}
#index-feature .swiper-scrollbar-drag{
	background: rgba(255,255,255,1) !important; 
}
#index-feature .nav-container {
	display: flex;
	gap: 0.625vw;
}

#index-feature .swiper-button-prev,
#index-feature .swiper-button-next {
	position: static; 
	width: 1.875vw;
	height: 1.875vw;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	margin: 0;
}
#index-feature .swiper-button-prev::after,
#index-feature .swiper-button-next::after {
	font-size: 0.729vw; 
	color: #000;
	font-weight: bold;
}
#index-feature .swiper-button-prev::after{
    content: "prev" !important;
}
#index-feature .swiper-button-next::after {
    content: "next" !important;
}

/* 電腦版：顯示 3 張 */
@media (min-width: 991px) {
#index-feature .swiper-slide {
	width: 46%;
}
}

/* 手機版：顯示 1 張並靠邊 */
@media (max-width: 991px) {
#index-feature {
    width: 100%;
    padding: 22vw 0 22vw;
}
#index-feature h3.title-left {
    color: #fff;
    text-align: left;
    font-weight: bold;
    font-size: var(--t42);
    padding-left: 12vw;
    padding-bottom: 6.8vw;
}
#index-feature .swiper-slide {
  width: 94%;
}
#index-feature .swiper-slide img {
    border-radius: 1.481vw;
}

#index-feature .slider-bottom-bar {
	width: 110%;
	margin-left: -1.8vw;
	margin-right: auto;
	margin-top: 6.083vw;
	gap: 1.642vw;
	padding: 0;
}
#index-feature .progress-container {
	flex: 1; 
}
#index-feature .nav-container {
    gap: 1.625vw;
}
#index-feature .swiper-button-prev, 
#index-feature .swiper-button-next {
    width: 5.875vw;
    height: 5.875vw;
}
#index-feature .swiper-button-prev::after, 
#index-feature .swiper-button-next::after {
    font-size: 1.875vw;
}


}

/*-----------------------
#index-case > block-card
------------------------*/
.block-card {
  padding: 10.896vw 11.458vw 8.896vw;
  width: 100%;
  box-sizing: border-box;
  background#fff;
}
.block-card .row-heading{
  padding-left:2.5vw;
  padding-bottom:3.25vw;
  text-align:left;
}
.block-card .row-heading .text-title{
    text-align:left;
    font-size:var(--t42);
    font-weight:bold;
    margin-bottom: 0.8vw;
}
.block-card .row-heading .text-desc{
  font-size:var(--t20);
}
.block-card .row-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.block-card .col-card {
  position: relative;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  border-radius: 0.833vw;
  overflow: hidden;
}

/* 圖片控制 */
.block-card .col-card .img-container {
  position: relative;
  width: 100%;
}

.block-card .col-card .img-base, 
.block-card .col-card .img-hover {
  width: 100%;
  height: auto;
  transition: opacity 0.4s ease;
}

.block-card .col-card .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* 按鈕 */
.block-card .col-card .trigger-btn {
  position: absolute;
  bottom: 1.25vw;
  right: 1.25vw;
  width: 2.708vw;
  height: 2.708vw;
  background: #fff;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.021vw;
  font-weight:normal;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 5;
  transition: all 0.3s ease;
  cursor:pointer;
}

/* --- 狀態切換時的 CSS --- */
.block-card .col-card.is-active .img-hover { opacity: 1; }
.block-card .col-card.is-active .text-label { opacity: 0; }
.block-card .col-card.is-active .trigger-btn { transform:rotate(45deg);}

@media (min-width: 992px) {
  .mobile-only { display: none; }
  .block-card .trigger-btn:hover ~ .block-card .img-container .img-hover,
  .block-card .col-card:has(.trigger-btn:hover) .img-hover { opacity: 1; }
  .block-card .trigger-btn:hover {transform:rotate(45deg);}

}

@media (max-width:991px) {
.pc-only { 
  display: none; 
}
.block-card {
    padding: 18vw 9vw 18vw;
}
.block-card .row-heading .text-title {
    margin-bottom: 2.2vw;
}
.block-card .row-heading {
    padding-left: 0;
    padding-bottom: 4.25vw;
}

.block-card .row-grid { 
  flex-direction: column; 
    gap: 4vw;
}
.block-card .col-card { 
    max-width: 100%; 
    border-radius: 2vw;
}
.block-card .col-card .img-base, 
.block-card .col-card .img-hover {
    height: 105vw;
    object-fit: cover;
}
.block-card .col-card .trigger-btn {
    bottom: 6.25vw;
    right: 5.25vw;
    width: 7.708vw;
    height: 7.708vw;
    font-size: 7.708vw;
}

}