/* ================= Swiper Tab 外層 ================= */
#div_outer_tab {
    padding: 27px 0 24px;
    margin-bottom: 32px;
}

@media (max-width: 767px) {
    #div_outer_tab {
        padding: 16px 0 12px;
        margin-bottom: 0;
    }
}

/* ================= Swiper wrapper ================= */
.top-menu-slider.swiper-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media(max-width:991px){
	.top-menu-slider .swiper-slide {
		padding: 24px 0;
	}
}
@media(max-width:767px){
	.top-menu-slider .swiper-slide {
		padding: 16px 0;
	}
}

/* ================= Tab 項目（對應 .tab-item a） ================= */
.category-item {
    align-items: center;
    text-decoration: none;
    font-size: 22px;
}

.category-title {
    position: relative;
    white-space: nowrap;
}

/* 加 |（最後一個不加） */
#div_outer_tab .tab-menu-swiper03 .swiper-slide:not(:last-child)::after {
    content: "";
    position:absolute;
    background: #B7B7B7;
    width: 1px;
    height: 20px;
    top:8px;
}
@media(max-width:991px){
	#div_outer_tab .tab-menu-swiper03 .swiper-slide:not(:last-child)::after {
		top:25px;
	}
}
@media(max-width:767px){
	#div_outer_tab .tab-menu-swiper03 .swiper-slide:not(:last-child)::after {
		top: 20px;
        height: 16px;
	}
}

#div_outer_tab .tab-menu-swiper03{
	overflow:visible;
}
#div_outer_tab .tab-menu-swiper03 .swiper-slide a{
	position:relative;
	margin: 0 32px;
}
@media (max-width: 1199px) {
    #div_outer_tab .tab-menu-swiper03 .swiper-slide a {
        font-size: 18px;
        margin: 0 24px;
    }
}
@media (max-width: 991px) {
    #div_outer_tab .tab-menu-swiper03 .swiper-slide a {
        font-size: 16px;
        margin: 0 16px;
    }
}
@media (max-width: 767px) {
    #div_outer_tab .tab-menu-swiper03 .swiper-slide a {
        font-size: 12px;
        margin: 0 8px;
    }
}

/* active 時 | 不吃背景色 */
.category-item.active .category-title::after {
    color: rgba(255, 255, 255, 0.6);
}

/* 手機版 */
@media (max-width: 767px) {
    .swiper-slide:not(:last-child) .category-title::after {
        margin-left: 8px;
    }
}


/* ================= Active 狀態 ================= */
.category-item.active {
    background: linear-gradient(to bottom, #ff769d 0%, #ff3c74 100%);
    color: #fff;
    border-radius: 30px;
    padding: 8px 24px 7px;
    font-weight:500;
}
@media(max-width:767px){
	.category-item.active {
     padding: 8px 12px 7px;
	}
}

/* active 文字強制白色 */
.category-item.active .category-title {
    color: #fff;
}

/* ================= Scrollbar 微調 ================= */
.scrollbar_menu_sort {
    margin-top: 12px;
}


/********************** 原本的tab css **********************/
.tab-menu-container {
    padding: 24px 0;
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
}

@media (max-width: 767px) {
    .tab-menu-container {
        padding: 16px 0;
        margin-bottom: 16px;
        display: flex;
        justify-content: left;
    }
}

.tab-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    font-family: "Noto Sans TC";
}

/* 標籤項目 */
.tab-item {
    padding: 0 32px;
    cursor: pointer;
    line-height: 1;
}
@media (max-width: 767px) {
    .tab-item {
        padding: 0 8px;
        cursor: pointer;
        line-height: 1;
    }
}

.tab-item a {
    text-decoration: none;
    color: #555;
    font-size: 16px;
    display: block;
}

.tab-divider {
    color: #ccc;
    font-size: 16px;
    margin: 0 -5px;
}

.tab-item.active {
    background: linear-gradient(to bottom, #f26b8d, #e94b7c);
    color: #fff;
    border-radius: 20px;
    padding: 10px 20px;
    box-shadow: 0 4px 8px rgba(233, 75, 124, 0.3);
    margin: 0 32px;
}
@media (max-width: 767px) {
    .tab-item.active {
        background: linear-gradient(to bottom, #f26b8d, #e94b7c);
        color: #fff;
        border-radius: 20px;
        padding: 10px 20px;
        box-shadow: 0 4px 8px rgba(233, 75, 124, 0.3);
        margin: 0 8px;
    }
}

.tab-item.active a {
    color: #fff;
}
/************************************ 原本的tab css END should  **************************************/



.ssArea{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:24px;
    margin-bottom: 32px;
}
@media (max-width: 991px) {
    .ssArea{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .ssArea{
        grid-template-columns: repeat(2, 1fr);
        gap:8px;
    }
}

/* 外層圖片區域 */
.ss-single-case{
	display: flex;
    flex-direction: column;
    gap: 0;
}
.ssArea .ssImgArea {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    display: block;
}

.ssArea .ssImgArea img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    max-width: none!important; /* 關鍵：打掉 WebView 的 max-width */
}

/* 浮水印 icon */
.ssArea .ssImgArea img.watermark {
    position: absolute;
    opacity: 0.8;
    pointer-events: none; /* 不阻擋點擊 */
}
@media (max-width: 767px) {
    .ssArea .ssImgArea img.watermark {
        position: absolute;
        opacity: 0.8;
        pointer-events: none;
    }
}

.ssImgArea:hover {
    cursor: pointer;
}

.ssHintArea {
    margin:11px 0 5px;
}

.ssHint_announced{
    background: linear-gradient(262deg, #FF97D6 2.73%, #93BAF2 97.8%); /* 粉藍>>粉紅色漸層 */
    color: #FFFFFF;
    font-weight:500;
    padding: 2px 8px 0px;
    border-radius: 999px;
    display: block;
    width: fit-content;
    letter-spacing: 1.2px;
}
.ssHint_closed{
    background-color: #8E8E8E;
    color: #FFFFFF;
    font-weight:500;
    padding: 2px 16px 0px 16px;
    border-radius: 999px;
    display: block;
    width: fit-content;
    letter-spacing: 1.2px;
}
.ssHint_inProgress{
    background: linear-gradient(to left, #f26b8d, #e94b7c);
    color: #FFFFFF;
    font-weight:500;
    padding: 2px 16px 0px 16px;
    border-radius: 999px;
    display: block;
    width: fit-content;
    letter-spacing: 1.2px;
}

.eventInfoArea{
    display: grid;
    grid-template-columns: 1fr auto;
    cursor: pointer;
    align-items: end;
}

.eventInfoArea .event_name{
    font-size: 19px;
    font-weight: 600;
    height: 56px;
    text-align: left;
    line-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 0;
}
@media(max-width:991px){
	.eventInfoArea .event_name{
	  font-size: 16px;
	  line-height: 24px;
	  height: 47px;
	}
}
@media(max-width:767px){
.eventInfoArea .event_name{
     font-size: 14px;
     line-height: 21px;
     height: 43px;
}	
}
@media(max-width:575px){
.eventInfoArea .event_name{
	font-size: 12px;
}	
}


.eventInfoArea .ss_dateArea{
	display:flex;
	align-items:center;
	gap:2px;
    font-size:18px;
    color: #8E8E8E;
}
@media(max-width:1439px){
	.eventInfoArea .ss_dateArea{
		font-size:14px;
	}
}
@media(max-width:575px){
	.eventInfoArea .ss_dateArea{
		font-size:12px;
	}
}
@media(max-width:392px){
	.eventInfoArea .ss_dateArea{
		zoom:0.88;
	}
}

.eventInfoArea .ss_dateArea i{
	font-size:24px;
}
@media(max-width:767px){
	.eventInfoArea .ss_dateArea i{
		font-size:16px;
	}
}

.eventInfoArea .btn_detail {
    justify-content: center;
    align-items: center;
}

/************************************ 內容 **************************************/

/* 容器樣式 */
.pagination-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    justify-content: center; /* 主要內容 (.pagination-control) 水平置中 */
    padding: 32px 20px;
}


/* 分頁控制項 */
.pagination-control {
    display: flex;
    align-items: center;
}

/* 箭頭按鈕 (上一頁/下一頁) */
.pagination-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: #555;
    text-decoration: none;
    margin: 0 10px;
}

.pagination-arrow.prev-page {
    background: linear-gradient(to left, #f26b8d, #e94b7c);
    border: none;
    cursor: pointer;
}

.pagination-arrow.prev-page:disabled {
    background: #f5f5f5;
    color: #b0b0b0;
    border: 1px solid #d0d0d0;
}

.pagination-arrow.next-page {
    background: linear-gradient(to right, #f26b8d, #e94b7c);
    border: none;
    cursor: pointer;
}

.pagination-arrow.next-page:disabled {
    background: #f5f5f5;
    color: #b0b0b0;
    border: 1px solid #d0d0d0;
}

/* 箭頭圖示 */
.arrow {
    border: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin: 0 3px;
}

.arrow.right {
    transform: rotate(-45deg);
    border-color: #fff;
}

/* 箭頭圖示 */
.arrow.left {
    transform: rotate(135deg);
    border-color: #b0b0b0;
}

.pagination-arrow.prev-page.disabled {
    cursor: default;
    opacity: 0.5;
}

/* 頁碼列表容器 */
.pagination-list {
    background-color: #f7f7f7;
    border-radius: 20px;
    padding: 5px;
    display: flex;
}

/* 頁碼連結 */
.page-num, .page-ellipsis {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    border-radius: 50%;
    margin: 0 2px;
}

/* 頁碼省略號 */
.page-ellipsis {
    color: #999;
}

.page-num.active {
    border: 1px solid #3B3B3B;
    color: #3B3B3B;
}


/* --- 跳頁區塊樣式 --- */

/* 新增Wrapper，使用絕對定位 */
.pagination-jump-wrapper {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.pagination-jump {
    display: flex !important;
    align-items: center;
    color: #555;
    font-size: 14px;
}

/* 自定義下拉選單的容器 */
.custom-select-wrapper {
    position: relative; /* 為了讓箭頭絕對定位 */
    display: inline-block;
    margin: 0 5px;
}

.jump-select {
    -webkit-appearance: none; /* Chrome, Safari */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* 標準 */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 30px 8px 15px; /* 左側留白，右側為箭頭預留空間 */
    font-size: 14px;
    cursor: pointer;
    outline: none;
    color: #555;
    width: 60px;
    text-align: center;
}

/* 自定義箭頭樣式 */
.custom-select-wrapper::after {
    content: ''; /* 必須有 content 才能顯示 */
    position: absolute;
    top: 50%;
    right: 12px; /* 箭頭距離右邊的距離 */
    transform: translateY(-50%) rotate(45deg); /* 旋轉形成箭頭 */
    width: 6px;
    height: 6px;
    border: solid #555;
    border-width: 0 1.5px 1.5px 0; /* V 字形狀 */
    pointer-events: none; /* 讓箭頭不阻擋 select 的點擊事件 */
}

.jump-go-btn {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 1.5px solid #FF3C74;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center;    /* 垂直置中 */
    background: linear-gradient(to right, #f26b8d, #e94b7c);
}