﻿.carousel .carousel__control i {
    font-size: 1.2rem;
    border-radius: 3rem;
    margin: 0.5rem 0.1rem 0.1rem 0.1rem;
    padding: 0.6rem;
}

.carousel__indicators li{
  height:3rem;
  width:12rem;
  background: rgb(255 255 255 / 90%);
  font-size:1.1rem;
  /*margin-top:2rem;*/
  border-radius:5%;
  overflow:hidden;
  line-height:1.3rem;
}

.carousel__indicators li div{
  padding:2px 5px 0px 5px;
}

.carousel__indicators li.active{
  background: rgb(255 196 255 / 84%);
  font-weight: bold;
  color: #2B358C;
  font-size:1.2rem;
  margin-top:0;
}

.carousel__indicators li:hover{
  background-color: #dadc;
  color: #2B358C;
  font-size: 1.2rem;
}

.carousel__indicators{
  bottom: 1.5rem;
}


.imgLiquid img {
  visibility: hidden;
}
/* override */
.fade:not(.show) {
  opacity: 0;
  display: none;
}

.main-content-area {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
/* -- 修改：輪播寬度改為 90% -- */
.carousel__container {
  width: 90%;
}

.carousel__item img {
  max-height: 25em; /* 縮小高度 */
  height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  object-position: center;
  width: 100%;
}


.carousel__control {
  position: relative;
  text-align: center;
  color: black;
  top: 0.625rem;
}

/*.carousel__control.carousel__control--prev,
      .carousel__control.carousel__control--pause,
      .carousel__control.carousel__control--next
      {
        top:0rem;
      }*/

.btn {
  white-space: normal;
}

.branch-links {
  width: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #e9ecef;
  border-radius: 0.5rem;
  padding: 1rem;
  max-height: 450px;
}

  .branch-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
    height: 5rem; /* 固定高度，避免高屏分局拉高整體 */
    padding: .125rem 0.5rem; /* 稍微減少 padding */
    margin-bottom: 0.5em;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止自動換行 */
    overflow: hidden; /* 隱藏超出文字 */
    box-sizing: border-box;
  }

    .branch-links a:last-child {
      margin-bottom: 0;
    }

    .branch-links a:hover {
      background-color: #2B358C;
      color: white;
      transform: translateY(-5px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

.service-section {
  background-color: white;
  padding: 3rem 2rem;
  margin-top: 2rem;
  border-radius: 0.5rem;
}

.service-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  background-color: #e3f2fd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #0d47a1;
  transition: all 0.3s ease;
}

.service-item a:hover .service-icon {
  background-color: #0d47a1;
  color: white;
}

.service-item a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.news-section {
  background-color: #f8f9fa;
  padding: 3rem 2rem;
  margin-top: 2rem;
  border-radius: 0.5rem;
}

.news-list .list-group-item {
  border: none;
  background: transparent;
  padding: 0.75rem 0;
  border-bottom: 1px dashed #ddd;
}

  .news-list .list-group-item a {
    text-decoration: none;
    color: #333;
  }

    .news-list .list-group-item a:hover {
      color: #0d47a1;
    }

.news-list .date {
  color: #6c757d;
  margin-right: 1rem;
}

.info-block {
  display: block;
  border: 1px solid #ddd;
  padding: 1.5rem;
  text-align: center;
  text-decoration: none;
  border-radius: 0.5rem;
  color: #333;
  background-color: white;
  transition: all 0.3s ease;
}

  .info-block:hover {
    border-color: #0d47a1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-5px);
  }

  .info-block img {
    max-width: 80px;
    margin-bottom: 1rem;
  }

.tab-container {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
}
/* 讓索引標籤的視覺效果更突出 */
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

  .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
  }
/* 為圖片區塊增加一些上下間距 */
.tab-content {
  padding-top: 20px;
}
/* 預設標籤樣式 */
.nav-tabs .nav-link {
  background-color: #e9ecef; /* 預設背景色 (淺灰色) */
  color: #495057; /* 預設文字顏色 */
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* 平滑過渡效果 */
  width: 100%;
}
  /* 滑鼠懸停在非作用中標籤上的樣式 */
  .nav-tabs .nav-link:not(.active):hover {
    background-color: #d1d5db; /* 懸停時的背景色 (稍深灰色) */
    color: #000; /* 懸停時的文字顏色 */
  }
  /* 作用中標籤的樣式 */
  .nav-tabs .nav-link.active {
    color: #ffffff; /* 作用中標籤的文字顏色 (白色) */
    background-color: #007bff; /* 作用中標籤的背景色 (藍色) */
    border-color: #dee2e6 #dee2e6 #fff;
  }
/* 為圖片區塊增加一些上下間距 */
.tab-content {
  padding-top: 20px;
}

/* 
      統計資料 */
.inner-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  /*margin-right:10%;*/
  color: black;
}

.inner-unit {
  text-align: center;
  font-size: 0.7rem;
  /*margin-right:10%;*/
  color: black;
}


.branch-label {
	/*color: #2B358C;*/
  text-align: left;
  margin-left: 1em;
  margin-top: 0.25em;
  font-size: 1.25em;
}

.active.carousel__item--left {
  transform: translate3d(0, 0, 0);
}
.active.carousel__item--left.carousel__item--next {
  transform: translate3d(100%, 0, 0);
}



@media only screen and (max-width: 992px) { 
  .carousel__item img {
    height: auto;
    width: 100%;
    max-height:none;
  }

}


@media only screen and (max-width: 768px) {
.carousel__indicators li{
  height:2.6rem;
  font-size:1rem;
  line-height:1.2rem;
}

.carousel__indicators li.active{
  font-size:1rem;
}

.carousel__indicators li:hover{
  font-size: 1rem;
}


}