/* 設定主圖片容器的下邊距 */
#main-image-container {
    margin-bottom: 10px; /* 設定底部間距，讓圖片與下面的內容有些許間隔 */
}

/* 當指示器縮略圖被懸停或選中時，變更邊框顏色 */
.carousel-indicators img:hover,
.carousel-indicators .active img {
    border-color: #007bff; /* 當懸停或選中時，邊框顯示藍色 */
}

/* 設定圖片輪播控制按鈕的樣式 */
.carousel-controls-wrapper {
    position: relative; /* 設置為相對定位，方便後續的調整 */
    text-align: center; /* 將控制按鈕置中對齊 */
    margin-top: 20px; /* 在輪播控制區域與圖片之間添加一些間距 */
}

/* 設定控制按鈕的樣式 */
.carousel-control {
    display: inline-block; /* 將控制按鈕設置為內聯區塊顯示 */
    margin: 0 10px; /* 為左右邊界設置間距 */
    font-size: 20px; /* 設置字體大小為20px */
    color: #333; /* 設定顏色為深灰色 */
    text-decoration: none; /* 移除文字裝飾 */
    vertical-align: middle; /* 垂直置中對齊 */
}

/* 當鼠標懸停時變更控制按鈕顏色 */
.carousel-control:hover {
    color: #000; /* 懸停時顏色變為黑色 */
}

/* 圖片輪播容器設定 */
.thumbnail-carousel {
    display: flex; /* 使用Flexbox來排列內容 */
    justify-content: flex-start; /* 水平對齊到左邊 */
    align-items: center; /* 垂直對齊到中間 */
    width: 100%; /* 容器寬度設為100%，佔據父容器的全部寬度 */
}

/* 圖片本身的樣式設定 */
.indicator-thumbnail {
    max-width: 100%; /* 讓圖片最大寬度為100% */
    height: auto; /* 讓圖片最大高度為100% */
    object-fit: contain; /* 保持圖片比例，讓圖片在容器內不會變形 */
    display: block; /* 設置為塊級元素，避免圖片底部出現空白 */
}

/* 縮略圖指示器容器樣式 */
.thumbnail-indicators {
    display: flex; /* 使用Flexbox來排列縮略圖 */
    justify-content: center; /* 水平居中對齊縮略圖 */
    align-items: center; /* 垂直置中縮略圖 */
    position: relative; /* 設置為相對定位，便於使用定位調整 */
    padding: 0; /* 去除預設的內邊距 */
    flex-wrap: wrap; /* 確保縮略圖不會因為容器過小而重疊，並允許換行 */
}

/* 設定每個縮略圖指示器的樣式 */
.thumbnail-indicators li {
    position: relative; /* 使每個縮略圖的位置可以進行微調 */
    margin: 5px; /* 設定縮略圖之間的間距 */
    display: inline-block; /* 保持縮略圖水平排列 */
}

/* 設定每個縮略圖的樣式 */
.indicator-thumbnail {
    width: 50px; /* 設定縮略圖的寬度為50px */
    height: auto; /* 高度自動調整，保持圖片比例 */
    border: 2px solid transparent; /* 預設邊框為透明 */
    transition: border-color 0.3s; /* 邊框顏色變化時，添加平滑過渡效果 */
}

/* 當某個縮略圖被選中時，變更邊框顏色 */
.thumbnail-indicators .active .indicator-thumbnail {
    border-color: #007bff; /* 設置選中縮略圖的邊框顏色為藍色 */
}