@media (max-width: 575.98px) {
}

@media (min-width: 576px) and (max-width: 767.98px) {
}
/* 大平板 */
@media (min-width: 768px) and (max-width: 991.98px) {
}
/* 小桌機*/
@media (min-width: 992px) and (max-width: 1199.98px) {
}
/* 特大桌機尺寸 */
@media (min-width: 1200px) {
}

.pagination-select {
    height: 50px !important;
    line-height: 1.3;
    padding-top: 2px;
    padding-bottom: 2px;
    transform: translateY(-1px);
    display: inline-block !important;
    align-items: unset !important;
}

.siteclamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 改為 4 就是顯示 4 行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.culsite-card {
    width: 100%;
    max-width: 100%; /* 可自行調整 */
    background-color: #F5F1E8;
    border: 1px solid;
    border-radius: 8px;
    z-index: 2;
    position: relative;
    box-sizing: border-box;
}

.culcard-underlay {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 100%;
    height: 100%;
    background-color: #8fcac3;
    border-radius: 8px;
    border: 1px solid;
    z-index: 1;
}

.culcard-label {
    background-color: #68442b;
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
}

    .culcard-label.col {
        flex: 0 0 auto;
        width: auto;
    }

.culmap-img {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.lang-toggle {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 30px;
}

    .lang-toggle input {
        display: none;
    }

    .lang-toggle label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        border-radius: 10px;
        padding: 0;
        cursor: pointer;
        height: 100%;
        border: 1px solid #C3AD9C;
        overflow: hidden;
    }

.lang-option {
    width: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 0.875rem;
    font-weight: bold;
    color: #C3AD9C !important;
    background-color: white;
    transition: all 0.2s ease;
}

/* 點選時切換樣式 */
input:not(:checked) + label .lang-zh {
    background-color: #68442b;
    color: white !important;
}

input:checked + label .lang-en {
    background-color: #68442b;
    color: white !important;
}

.dropdown.all {
    border: 0.5px solid #68442b !important;
    border-radius: 6px;
    background-color: #FFF;
}

.custom-dropdown-btn {
    color: #C3AD9C !important;
}

.custom-dropdown-item {
    color: #C3AD9C !important;
}

.dropdown-menu.all .custom-dropdown-item:hover {
    background-color: #F5F1E8 !important;
    color: #68442b;
}

.dropdown-menu.all .custom-dropdown-item:focus {
    background-color: transparent !important;
    color: #68442b;
}

.dropdown-menu.all .custom-dropdown-item:focus {
    box-shadow: none;
}
/* 主卡片 */
/*.blue-card {
    width: 18rem;
    position: relative;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    z-index: 2;
    box-sizing: border-box;
    padding-bottom: 1rem;*/
/* 你原本的樣式可加這裡 */
/*}*/

/* 圖片底層紙張（只在圖片下方） */
/*.blucard-underlay {
    position: absolute;
    bottom: 12px;*/ /* 往下移 */
/*right: 12px;*/ /* 往右移 */
/*width: 100%;
    height: 100%;
    background-color: #EB8B2D;
    z-index: 1;
}*/

/* 圖片浮在上層 */
/*.img-wrapper img {
    position: relative;
    z-index: 2;
    border-radius: 8px;
}*/
/*.zone-img {
    position: absolute;
    width: 20%;
    display: none;
    z-index: 10;*/ /* 圖片在下面 */
/*}

.zone-hover {
    position: absolute;
    width: 100px;
    height: 100px;
    cursor: pointer;
    z-index: 20;*/ /* hover 區域在上面，避免被圖片擋住 */
/*}*/


/*.zone-item {
    position: absolute;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zone-img {
    width: 100%;
    height: auto;
    z-index: 10;
}

.zone-name {
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 4px;
    z-index: 10;
    color: #333;
}

.zone-hover {
    position: absolute;
    width: 100px;
    height: 100px;
    cursor: pointer;
    z-index: 20;  在圖片之上，保持互動 
    background: rgba(0,0,0,0);
}*/

.zone-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zone-img {
    width: 100%;
    height: auto; /* 高度自適應 */
    z-index: 10;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.zone-name {
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 4px;
    z-index: 10;
    color: #333;
    display: none;
}

.zone-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 覆蓋整個 zone-item */
    height: 100%;
    cursor: pointer;
    z-index: 20;
    background: rgba(0,0,0,0);
}



.img-container {
    position: relative;
    aspect-ratio: 5/3;
    overflow: hidden; /* 多餘的圖片裁掉 */
}

    .img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 裁切填滿 */
        object-position: center; /* 圖片置中 */
    }

.outer-img-container {
    position: relative;
    aspect-ratio: 5/4;
    overflow: hidden; /* 多餘的圖片裁掉 */
}

    .outer-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 裁切填滿 */
        object-position: center; /* 圖片置中 */
    }