@charset "utf-8";

/* ---------------------------- 首頁用 */
section.main { width:100%; max-width:1000px; margin:0 auto; }
.wrap { width:100%; margin:0px auto; padding:0; }

@media screen and (max-width:1100px){
	.wrap { padding:0 3%; }
}


/* more */
.more { width:100%; text-align:center; padding:0; margin:20px auto 50px; position:relative; z-index:1; clear: both; }
.more a { display:inline-block; width:260px; outline:none; letter-spacing:2px; text-decoration:none; text-transform: uppercase; border-radius:3px; position:relative; overflow: hidden; margin:0 15px; }
.more a span { display:block; font-family:'Noto Sans TC'; font-size:20px; color:#fff; padding:3px 0px 5px 12px; background-color:#055ab0; transition: transform 0.3s; }
.more a:before { content:attr(data-hover); font-family:'Noto Sans TC'; font-size:20px; position: absolute; top: 0; left: 0; z-index: -1; width:100%; height:100%; background-color:#b7d5f2; color:#003c78; padding:3px 0px 5px 12px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%); }
.more a:hover span, .more a:focus span 
{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); }
.more a:hover:before, .more a:focus:before 
{ -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); }

@media screen and (max-width:600px){
	.more a span, .more a:before { font-size:16px; }
}
@media screen and (max-width:420px){
    .labelTit { font-size:24px; }
    .more { margin:10px auto 30px; }
}



/* 選前固定內容：3影音取代大圖 ↓ */
/* ---------------------------- 3影音 */
section.bigPHoto { width:100%; margin:0 auto; }
section.bigPHoto .wrap { max-width:1200px; width:100%; }

.swiperVideo { padding:20px 0px 0px; position:relative; }
.swiperVideo .swiper-container { padding:0 0 40px; margin-bottom:20px; min-height:300px; } /* 預留高度防止跳動 */
.swiperVideo .swiper-wrapper { height:auto; }
.swiperVideo .swiper-slide { background-color:#222; border-radius:5px; overflow:hidden; width:33.33%; float:left; }
.swiperVideo .swiper-slide .ph { width:100%; height:0; padding:0 0 57%; overflow:hidden; }
.swiperVideo .swiper-slide .ph img { width:100%; height:auto; }
.swiperVideo .swiper-slide h3 { color:#fff; word-break:break-all; padding:4px 10px 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; height:60px; overflow:hidden; }

/* 載入中骨架屏樣式 (當容器為空時) */
#video-list:empty {
    display: block;
    height: 280px;
    /* 模擬三個 16:9 的區塊 */
    background: 
        linear-gradient(90deg, #333 31%, transparent 31%, transparent 34%, #333 34%, #333 65%, transparent 65%, transparent 68%, #333 68%) no-repeat top / 100% 180px,
        linear-gradient(90deg, #444 31%, transparent 31%, transparent 34%, #444 34%, #444 65%, transparent 65%, transparent 68%, #444 68%) no-repeat bottom / 100% 60px;
}
.swiperVideo .swiper-slide:hover .ph img { width:100%; height:auto; }
.swiperVideo .swiper-slide:hover h3 { color:#98dfff; }
/* 分頁 */
.swiperVideo .swiper-container-horizontal>.swiper-pagination-bullets { bottom:5px; }
.swiper-pagination-bullet { width:10px; height:10px; background-color:#ccc; opacity: 1; }
.swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background-color:#03a9f4; }
/* 左右鍵 */
.swiperVideo .swiper-button-prev, .swiperVideo .swiper-button-next { width:70px; height:70px; position:absolute; top:38%; z-index:1; background-size:20px; }
.swiperVideo .swiper-button-next { right:-70px; transition: .15s linear; }
.swiperVideo .swiper-button-prev { left:-70px; transition: .15s linear; }
.swiperVideo .swiper-button-next:hover { right:-75px; }
.swiperVideo .swiper-button-prev:hover { left:-75px; }

@media screen and (max-width:1300px){
    section.bigPHoto .wrap { width:96%; }
	.swiperVideo .swiper-button-prev, .swiperVideo .swiper-button-next { border-radius:100%; background-color:rgba(255,255,255,0.7); }
    .swiperVideo .swiper-button-next { right:-40px; }
    .swiperVideo .swiper-button-prev { left:-40px; }
	.swiperVideo .swiper-button-next:hover { right:-45px; }
	.swiperVideo .swiper-button-prev:hover { left:-45px; }
    .swiperVideo .swiper-button-prev:hover, .swiperVideo .swiper-button-next:hover { background-color:rgba(255,255,255,0.9); }
}
@media screen and (max-width:1100px){
	section.bigPHoto .wrap { overflow:hidden; }
}
@media screen and (max-width:600px){
    .swiperVideo .swiper-slide h3 { height:65px; }
	.swiperVideo .swiper-button-prev, .swiperVideo .swiper-button-next { top:42%; }
}
@media screen and (max-width:450px){
	.swiperVideo { padding:0px; }
	.swiperVideo .swiper-container { margin-bottom:0; }
    .swiperVideo .swiper-container-horizontal>.swiper-pagination-bullets { bottom:10px; }
	.swiperVideo .swiper-button-prev, .swiperVideo .swiper-button-next { top:38%; }
	.swiperVideo .swiper-slide h3 { height:60px; }
	.swiperVideo .swiper-container { min-height: 180px; }
}
@media screen and (max-width:380px){
	.swiperVideo .swiper-button-prev, .swiperVideo .swiper-button-next { width:50px; height:50px; background-size:16px; }
	.swiperVideo .swiper-button-next { right:-25px; }
    .swiperVideo .swiper-button-prev { left:-25px; }
	.swiperVideo .swiper-button-next:hover { right:-30px; }
	.swiperVideo .swiper-button-prev:hover { left:-30px; }
}


/* ---------------------------- 3影音下：8則最新新聞 */
ul.listNews { display:flex; width:100%; flex-wrap:wrap; justify-content:space-between; gap:0 20px; }
ul.listNews li { width:48%; padding:0 0 25px; position:relative; }
ul.listNews li:nth-child(odd):after { content:""; height:100%; width:1px; border-right:1px dotted #999; position:absolute; right:-4%; top:0; }
ul.listNews li a .ph { width:30%; float:left; height:0; padding:0 0 19%; border-radius:5px; overflow:hidden; }
ul.listNews li a h3 { width:70%; float:right; padding:0px 0px 5px 13px; margin-top: -4px; }

@media screen and (max-width:850px){
	ul.listNews li { padding: 0 0 20px; }
	ul.listNews li:nth-child(odd):after { right:-4%; }
}
@media screen and (max-width:600px){
    ul.listNews li { width:100%; margin:0 0 15px; padding:0 0 15px; border-bottom:1px solid #ccc; }
    ul.listNews li a .ph { width:34%; padding-bottom:22%; background-color:#f0f0f0; }
    ul.listNews li a h3 { width:64%; padding:0; }
    ul.listNews li:nth-child(odd):after { display:none; }
}


/* ---------------------------- 4則最新新聞 */
.latest_news { width:100%; display:flex; height:auto; overflow:hidden; flex-wrap:wrap; justify-content:space-between; }
.latest_news a.newsbox { display:block; width:24%; background-color:#eee; border-radius:5px; overflow:hidden; margin-bottom:5px; } /*4欄*/
.latest_news a.newsbox .ph { width:100%; height:0; padding:0 0 64%; overflow:hidden; }
.latest_news a.newsbox h3 { line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-height:64px; padding:5px 8px; overflow:hidden; }

@media screen and (max-width:900px){
    .latest_news a.newsbox { width:49%; margin-bottom:15px; } /*2欄*/
}
@media screen and (max-width:600px){
    .latest_news a.newsbox { width:100%; background-color:#fff; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #ccc; } /*1欄*/
    .latest_news a.newsbox .ph { float:left; width:34%; padding:0 0 22%; background-color:#f0f0f0; border-radius:5px; overflow:hidden; }
    .latest_news a.newsbox h3 { line-height:1.4; width:64%; float:right; display:block; padding:0px; margin-top: -4px; }
}


/* ---------------------------- 評論 */
.comment { float:left; width:calc(100% - 315px); margin-bottom:15px; }
.comment .ph { float:left; width:30%; height:0; padding-bottom:20%; border-radius:5px; overflow:hidden; }
.comment ul { float:right; width:70%; margin-top:-4px; }
.comment ul li { width:100%; position:relative; padding-left:28px; margin-bottom:13px; }
.comment ul li:before { content: ""; width:6px; height:6px; border-radius:100%; background-color:#03a9f4; position:absolute; left:15px; top:9px; }
.comment ul li a h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:55px; overflow:hidden; padding:0; }

.commentR { width:300px; float:right; margin-bottom:15px; min-height:250px; border:1px solid #ccc; }

@media screen and (max-width:950px){
	.commentR { display:none; }
	.comment { width:100%; }
}
@media screen and (max-width:600px){
	.comment .ph { width:34%; padding-bottom:22%; background-color:#f0f0f0; }
	.comment ul { float:none; width:100%; }
	.comment ul li { width: auto; border-bottom: 1px solid #ccc; padding: 0px 0px 10px 25px; }
	.comment ul li:first-of-type { height:0; padding-bottom:23%; border-bottom: none; overflow: hidden; }
	.comment ul li:first-of-type h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; min-height:64px; overflow:hidden; }
	.comment ul li:before { left:9px; }
	.comment ul li a h3 { display:block; max-height:80px; }
}


/* ---------------------------- 首頁 fb */
.recall_share { margin:0 auto; padding:0; }
.fb_footer { display:flex; justify-content:center; gap:0 20px; margin:25px auto 0; padding:25px; background-color:#f6f6f6; border-bottom:1px solid #ddd; }
.fb_footer .share-btn { width:260px; height:40px; padding:8px; font-family:'Noto Sans TC'; font-size:16px; letter-spacing:1px; text-align:center; color:#fff; border: none; border-radius:3px; cursor: pointer; transition: .3s; }
.fb_footer .fb { background-color: #3b5998; }
.fb_footer .fb:hover { background-color:#2d4373; }
.fb_footer .line { background-color: #00c300; }
.fb_footer .line:hover { background-color:#009900; }
@media screen and (max-width:500px){
	.fb_footer { padding:25px 3%; gap:0 3%; }
	.fb_footer .share-btn { width:47%; font-size:14px; }
}



/* ---------------------------- 首頁：開票後 - 縣市長當選名單地圖 */



/* ---------------------------- 首頁：開票後 - 選情統計 */



/* ---------------------------- 首頁：即時開票 - 縣市長當選名單 */



/* ---------------------------- 首頁：即時開票 - 各縣市長即時開票 */