:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }



/*卡片浮動*/
.cardpop {
  transition: transform .2s, box-shadow .2s;
  transition: background-color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease !important; /*漸變*/
  
}
/*給動畫用*/
.cardpop-hover {
  transition: transform .2s, box-shadow .2s;
  transform: translateY(-5px);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, .2), -8px -8px 16px rgba(0, 0, 0, .2);
  background-color: #e8ae3a88 !important;
  
}
/*給使用者*/
.cardpop:hover {
  transition: transform .2s, box-shadow .2s;
  transform: translateY(-5px);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, .2), -8px -8px 16px rgba(0, 0, 0, .2);
  background-color: #e8ae3a88 !important;
  
}
/*卡片浮動*/

/**/

.iconbox {
  transition: transform .2s, box-shadow .2s;
}

.iconbox:hover {
  transition: transform .2s, box-shadow .2s;
  transform: translateY(-3px);
  /*box-shadow: 8px 8px 16px rgba(0, 0, 0, .2), -8px -8px 16px rgba(0, 0, 0, .2);*/
}


/**/


body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 106vw;
  height: 106vh;
  background-image: url('newbg.png');
  background-size: cover;
  background-position: center;
  z-index: -1;
  background-repeat: repeat;
}




.containerbio{
  display: flex;               /* 使用 Flexbox 布局 */
  justify-content: center; /* 两个元素之间保持间距 */
  align-items: center;         /* 垂直方向居中 */
  width: 100%;
}

.box1 {    
  width: 35%;       /* 每个容器宽度占父容器的45%  width: 50%; */
  background-color: rgba(173, 216, 230, 0);
  padding: 10px;
  box-sizing: border-box;
  
}

.box2 {    
  width: 35%;       /* 每个容器宽度占父容器的45%  width: 50%; */
  background-color: rgba(174, 230, 173, 0);
  padding: 10px;
  box-sizing: border-box;
 
}


.carousel-inner img {
  max-width: 40%; /* 調整為圖片相對父容器的百分比寬度 */
  max-height: 300px; /* 設置圖片的最大高度 */
  margin: 0 auto; /* 讓圖片居中 */
  object-fit: contain; /* 保持圖片比例，不變形 */
}

/*跑馬燈左右切換改色*/
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%) sepia(100%) saturate(1) hue-rotate(0deg);
}


/*跑馬燈底部按鈕*/
.carousel-indicators button {
  background-color: #ffffffcc !important; /* 指定圓點顏色 (紅色) */
  border: none !important; /* 移除邊框 */
  width: 13px !important; /* 自定義寬度 */
  height: 13px !important; /* 自定義高度 */
  margin: 0 8px !important; /* 指示器之間的間距 */
  border-radius: 50% !important; /* 確保圓形外觀 */
}

.carousel-indicators .active {
  background-color: #ffffffbc !important; /* 選中的圓點顏色 (綠色) */
  width: 15px !important; /* 放大選中的圓點 */
  height: 15px !important;
  transform: scale(1.2) !important; /* 添加放大效果 */
  transition: background-color 0.3s ease, transform 0.3s ease !important; /* 平滑過渡效果 */
}
/*跑馬燈底部按鈕*/

/*大頭照切換*/
.photo-container {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease; /* 背景图平滑过渡 */
  border: none;
}
/*大頭照切換*/


/*輪播照片加快*/
.carousel-item {
  transition: transform 0.2s ease-in-out !important; /* 移除切換動畫 */
}
/*輪播照片加快*/



/*大頭照漸變轉換*/
#photoContainer {
  transition: background-image 1s ease-in-out;
}
/*大頭照漸變轉換*/