@charset "utf-8";
/* CSS Document */

.tab--service {
 /* margin-bottom: 32px;*/

}	
	
.tab--service ul {
    display: flex;
  justify-content: space-between; /* 均分空間 */	
	
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
  	
}

.tab--service li {
  scroll-snap-align: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  
	  flex: 1;               /* 每個 li 占等份寬度 */
  text-align: center;    /* 文字置中 */
	
}	

.tab--service-2 ul {
  display: flex;
  justify-content: center;   /* 置中 */
  position: relative;
  width: 100%;
  max-width: 100%; /* 不超過父層 */
}

.tab--service-2 li {
  width: 25%;                /* 每個 li 固定 1/4 */
  text-align: center;        /* 文字置中 */
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: transform 0.4s ease, opacity 0.4s ease;
}


.tab--sm .tab_li{
	font-size: 19px;
	color: #47484b ;
}


.tab_li {
  position: relative;
  color: inherit;
  font-weight: normal;

}

/* 基礎底線樣式：預設為寬度 0 */
.tab_li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #000000;
  width: 0;
  transition: width 0.4s ease;
}

/* 有動畫的 tab：寬度變成 100% */
.tab_li.active.js-active::after {
  width: 100%; 
}

/* 預設第一個 tab，直接顯示底線、沒動畫 */
.tab_li.default-active::after {
  width: 100%;
  transition: none; /*  無動畫 */
}

.tab_li.active {
  color: #0a2d82;
  font-weight: bold;
}

	
/*@media only screen and (min-width:48em) and (max-width:74.9375em) {
	 .tab--sm-2 ul {
    justify-content:center !important; 
  }	
}*/



@media (max-width: 640px) {
	/* 靠左對齊 */
	 .tab--sm ul {
    justify-content: flex-start !important; 
  }
	
	.tab--sm .tab_li{
		font-size: 17px;
		color: #47484b ;
	}
	
  
  .tab--sm.tab--service {
    padding-top: 8px;
    margin-bottom: 16px;
  }
}	

@media (max-width: 768px) {
	
.tab--service-2 li {
  width: 50%;                /* 每個 li 固定 1/4 */
  text-align: center;        /* 文字置中 */
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
	

.tab--sm ul > li {
    font-size: 16px; 
	padding: 0.5rem 0rem;
  }
	

}	

	
.tab-content-ev > div {
  display: none;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s ease;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.tab-content-ev > .active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

.tab-content-ev {
  position: relative;
  overflow: hidden;
}

.tab--service ul {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tab--service li {
  scroll-snap-align: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
	
.spacer--edge--footer {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--page--bg--color);
}
.spacer--edge--footer::before {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #33978b;
  background-image: url(../../assets/images/pattern-30.png);
  background-size: 1500px 500px;
  background-repeat: repeat-x;
  background-position: center 70px;
  -webkit-clip-path: polygon(0% 0%, 20% 50%, 75% 0%, 100% 30%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 20% 50%, 75% 0%, 100% 30%, 100% 100%, 0% 100%);
}
@media (max-width: 640px) {
  .spacer--edge--footer {
    height: 80px;
  }
  .spacer--edge--footer::before {
    background-size: 1000px 333px;
    background-position: center top;
  }
}
 body {
        --theme--color: #33978b;
        --text--color: #383838;
	    --theme2--color: #33978b;
	    --theme3--color: #33978b;
    }
	
.custom-img {
  width: 100%;
  border-radius: 0; /* 預設 rounded-none */
}

@media (min-width: 768px) {
  .custom-img {
    border-radius: 0.75rem; /* md:rounded-xl */
    max-height: 60vh;      /* md:max-h-[60vh] */
  }
}

@media (min-width: 1024px) {
  .custom-img {
    max-height: 70vh;      /* lg:max-h-[70vh] */
  }
}
	
.custom-tag {
  background-color: #0a2785;
  color: #ffffff;
  font-size: 1.125rem;   /* text-lg */
  line-height: 1.75rem;
  font-weight: 600;      /* font-semibold */
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border-radius: 0.75rem;  /* rounded-xl */
  width: 100%;
  margin-bottom: 0.5rem;   /* mb-2 */
  margin-left: auto;       /* m-auto */
  margin-right: auto;
  display: block;
}
.custom-tag-sub{color:#043899; margin: auto; text-align: center; margin-bottom: 10px;}

@media (min-width: 1024px) {
  .custom-tag {
    margin-left: 0;  /* lg:mx-0 */
    margin-right: 0;
	text-align: center;
	  margin: auto;
  }
}	
	
	
.custom-tag-2 {
  background-color: #0a2785;
  color: #ffffff;
  font-size: 1.125rem;   /* text-lg */
  line-height: 1.75rem;
  font-weight: 600;      /* font-semibold */
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border-radius: 0.75rem;  /* rounded-xl */
  width: -moz-fit-content; /* Firefox */
  width: fit-content;      /* 標準 */
  margin-bottom: 0.5rem;   /* mb-2 */
  margin-left: 0;       /* m-auto */
  /*margin-right: auto;*/
  display: block;
}
	
.custom-title {
  font-size: 1.5rem;     /* text-2xl */
  line-height: 2rem;
  color: #44403c;        /* text-stone700 */
  font-weight: 700;      /* font-bold */
  margin-bottom: 1.5rem; /* mb-6 */
  display: block;
}

@media (min-width: 768px) {
  .custom-title {
    font-size: 40px;     /* md:text-[40px] */
    margin-bottom: 0;    /* md:mb-0 */
    margin-left: 0;      /* md:mx-0 */
    margin-right: 0;
  }
}
	/* 基本區塊 */
.tab-section {
  background-color: rgba(234, 235, 237, 0.0);
  padding: 40px 0;
}

/*.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}*/

/* 手機版標題 */
.mobile-title {
  text-align: center;
  margin-bottom: 20px;
}
/*
.custom-tag {
  font-size: 18px;
  font-weight: 600;
  display: inline-block;
}
*/
/* Tabs 選單 */
.tab-header ul {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.tab-header li {
  cursor: pointer;
  font-size: 18px;
  padding: 8px 20px;
  border-radius: 8px;
  background: #f5f5f5;
  transition: all 0.3s ease;
}

.tab-header li.active {
  background: #0a2785;
  color: white;
  font-weight: bold;
}

/* 內容區塊 */
.tab-content-ev {
  width: 100%;
}

.tab-pane {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tab-pane.active {
  display: block;
  opacity: 1;
}

.tab-flex {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.tab-flex.reverse {
  flex-direction: column;
}

@media (min-width: 1024px) {
  .tab-flex {
    flex-direction: row;
  }

  .tab-flex.reverse {
    flex-direction: row-reverse;
  }
}

.tab-img {
  flex: 0 0 60%;
  display: flex;
  justify-content: center;
}

.tab-img img {
  max-width: 100%;
  border-radius: 12px;
}

.tab-text {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
}

.tab-text h2 {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.6;
  background: linear-gradient(to bottom, #0070f3, #0a2785);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



@media (min-width: 768px) {
  .tab-text h2 {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .tab-text h2 {
    font-size: 32px;
  }

}

.tab-text p {
  font-size: 18px;
  color: #374151;
  line-height: 1.7;
}

/* Tag 標籤 */
 .tab-tag {
  font-size: 18px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  display: inline-block;  /* 讓寬度依內容而定 */
  margin-bottom: 6px;
  margin-left: 0px;
  width: auto;            /* 確保不會被撐滿 */
}


.tab-tag.blue {
  background: #0a2785;
  color: white;
}

@media only screen and (min-width:75em) {
.pc-hidden{display:none;}
}
@media only screen and (min-width:48em) and (max-width:74.9375em) {
.mobile-hidden{display: none;}
}
@media only screen and (max-width:47.9375em){
.mobile-hidden{display: none;}
}

@media only screen and (min-width:1024px) {
.pc-hidden2{display:none;}
}
@media only screen and (min-width:769px) and (max-width:1023px) {
.pc-hidden2{display: none;}
}
@media only screen and (max-width:1022px){
.mobile-hidden2{display: none;}
}

.servicestortexttitle{
	font-size: 32px;
	color: #000000;
	font-weight: 600;
	}
	

	
.servicestortext{
	font-size: 20px;
	line-height: 2em;
	color: #222222;
	padding: 2px;
	text-align: left;
	margin-top: -20px;
	}
	
@media only screen and (max-width:768px){
	
.servicestortexttitle{
	font-size: 26px;
	color: #000000;
	font-weight: 600;
	}	
.servicestortext{margin-top: -20px;}
}	
.servicestorimg{
	width: 100%;
	display: flex;
	align-items: flex-start;
	}


	/* 父容器 */
.flex-container {
  display: flex;
  flex-direction: column; /* 預設直向 */
  gap: 1rem; /* gap-4 = 16px */
  margin-top: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .flex-container {
    flex-direction: row; /* md:flex-row */
    gap: 0; /* md:gap-0 */
    margin-top: 0; /* md:mt-0 */
    padding-right: 1rem; /* md:pe-4 = padding-inline-end: 16px */
    /*border-right: 1px solid #e5e7eb;*/ /* md:divide-x (灰色分隔線，實際顏色視 tailwind config) */
  }
}

/* span 文字 */
.text-title {
  color: #44403c; /* text-stone700 */
  font-size: 1.125rem; /* text-lg */
  font-weight: 700; /* font-bold */
  margin-top: 0.5rem; /* mt-2 */
}

/* button 服務據點查詢 */
.btn-gradient {
  margin-top: 1.5rem; /* mt-6 */
  font-size: 1.125rem; /* text-lg */
  font-weight: 700; /* font-semibold + font-bold */
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid transparent;
  background-origin: border-box;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to bottom, #2446B6, #0A2D82) border-box;
  color: #0A2D82;
  transition: color 0.2s;
  display: inline-block;
}

.btn-gradient:hover {
  color: #2446B6;
}

/* 小字 */
.text-small {
  margin-top: 1.5rem; /* mt-6 */
  font-size: 0.875rem; /* text-sm */
}

.button-ride {
  transition: opacity 0.6s ease-out;
	margin-top: 6px;
	color: #222222;
    font-size: 20px;
	font-weight: 600;
	padding: 10px;
	border: 1px solid #0a2c7f;
	border-radius: 10px;
    width: 160px;
	text-align: center;
	background-color: #FFFFFF;
	cursor: pointer;
	margin-left: 10px;
}

.button-ride:hover {
  background-color:rgba(155,225,249,0.30); 
  color: #000000;
  cursor: pointer;
}


.ev-rightline{border-right: 1px solid #e5e7eb;	}

.title {
  font-size: 40px;             /* text-[40px] */
  line-height: 120%;           /* leading-[120%] */
  font-weight: 700;            /* font-bold */
  text-align: center;          /* text-center */
  font-family: "Noto Sans TC", sans-serif;

  /* 文字漸層效果 */
  background-image: linear-gradient(180deg, #0A2D82 0%, #2446B6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;       /* bg-clip-text */
  color: transparent;          /* text-transparent */
}
	
.embed--subsidy {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 600px;
  min-height: 600px;
  border-radius: 16px;
  background: #efefef;
  padding: 16px;
}
.embed--subsidy iframe {
  width: 100%;
  height: 100%;
}
@media (max-width: 640px) {
  .embed--subsidy {
    height: auto;
    border-radius: 0;
  }
  .embed--subsidy iframe {
    height: 640px;
  }
}
	
	
 h2 {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.6;
  background: linear-gradient(to bottom, #0070f3, #0a2785);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}