@charset "utf-8";

/* CSS Document header + footer + 側邊欄 + 廣告 + 列表 */

body { background-color:#fff; color:#111; font-size:18px; line-height:1.6; font-family:"微軟正黑體", 'Noto Sans TC', Arial; }

/* hover */
a:link, a:visited, a:active { color:#111; }
img { width:100%; transition:all 0.4s ease; }
ul li, ul li a { display:block; overflow:hidden; transition:all 0.4s ease; }
a:hover .ph img { -webkit-transform:scale(1.05); -moz-transform:scale(1.05); -o-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05); }


/* 表格共用 */
table { width:90%; border-collapse:collapse; border-spacing:0; font-family:'微軟正黑體'; margin:20px auto; }
table th, table td { text-align:center; line-height:1.3; border:1px solid #d5d5d5; vertical-align:middle; padding:8px 10px; }
table th { font-family:'Noto Sans TC'; font-size:16px; font-weight:400; color:#fff; background-color:#82bac6; }
table td { color:#111; font-size:18px; }
/* 數字齊右 */
th.td_R, td.td_R { text-align:right; }
/* 文字齊左 */
th.td_L, td.td_L { text-align:left; }


/* ---------------------------- 手機版選單：下拉式選單 (▼) */
select { background:transparent; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
select::-ms-expand { display:none; }
select { display:inline-block; width:90%; height:1.8rem; line-height:1.5; font-size:16px; border:1px solid #79b5c2; border-radius:4px; padding:0 0 0 5px; margin:0; overflow:hidden; background-color:#fff; background:url(../images/arrow.png) no-repeat 100% center #fff; background-size:30px; }
form { display:block; text-align:center; margin:10px auto; }


/* ---------------------------- 廣告共用 */
@media screen and (max-width:800px){ /* 巨橫幅廣告隱藏 */
    .suggest_pc #ad-K1 { display: none; }
}
@media screen and (max-width:700px){ /* 配合首頁300*250廣告隱藏 */
    .suggest_pc { display: none; }
}
@media screen and (max-width:600px) { /* 廣告切換電腦版手機版 */
    .suggest_m { display: block; }
    div.suggestBottom { margin-bottom: 15px; }
    div.suggestTop { margin-top:15px; }
}


/* ---------------------------- top */
.top { display:none; width:45px; height:45px; border-radius:100%; cursor:pointer; background-color:#055ab0; position:fixed; bottom:120px; right:30px; z-index:50; box-shadow:0 0 6px 1px rgba(0,0,0,0.2); }
.top:before { content: "︿"; display: inline-block; color:#fff; font-size:24px; position: relative; top:-1px; left:11px; }
.top:hover, .top a:active { background-color:#b7d5f2; }
.top:hover:before { color:#003c78; }


/* ---------------------------- 內容區塊 */
section.bg { width:100%; background:url(../images/pcbg.jpg) no-repeat center top; background-size:100%; }
/* 次頁1200 */
section.submain { max-width:1200px; width:100%; margin:0 auto 20px; padding:10px; overflow:hidden; }
.wrap_list { width:calc(100% - 320px); float:left; } 

@media screen and (max-width:1000px) { /*側邊欄隱藏*/
	section.submain { padding:0 10px; }
	.wrap_list { width:100%; float:none; padding:10px; }
}
@media screen and (max-width:600px) {
	.wrap_list { padding:0 10px; }
}

/* ---------------------------- 大標：首頁 + 列表用 */
/* 首頁大標 */
.labelTit { width:100%; font-family:'Noto Sans TC'; font-weight:500; letter-spacing:3px; font-size:25px; color:#222; padding:0 0 10px; }
.labelTit:before { content:"◣ "; font-size:10px; letter-spacing:2px; color:#03a9f4; }
/* 所有標題 */
h3 { font-size:18px; line-height:1.4; font-family:'Noto Sans TC'; font-weight:400; letter-spacing: 1px; padding-bottom:5px; }
a:hover h3 { color:#0289f3; }

@media screen and (max-width:600px) { 
    h3 { font-size:20px; }
}
@media screen and (max-width:450px) { 
    h3 { font-size:18px !important; }
}

/* 次頁大標：統計、候選人、即時開票 */
/* 灰底大標齊左 (span縣市) */
h5.TIT { font-size:30px; font-weight:500; color:#195e76; padding:5px 0px; font-family:'Noto Sans TC'; }
h5.TIT span { font-size:30px; color:#20b3e6; padding:0 10px 0 0; } 
/* 白底次標齊左 */
h6.TIT { font-size:26px; font-weight:500; color:#195e76; margin:20px 30px 0px; font-family:'Noto Sans TC'; }

@media screen and (max-width:380px) {
    h5.TIT, h5.TIT span { font-size:24px; letter-spacing:0px; }
    h6.TIT { font-size:20px; }
}


/* ---------------------------- 共用 banner + 22縣市選單 */
.banner_menu { max-width:1200px; width:100%; margin:0 auto; position:relative; }

.banner { display:flex; justify-content:center; max-width:1200px; width:100%; height:24rem; background:url(../images/banner.jpg) no-repeat center top; background-size:100%; transition:all 0.5s; }
.banner span.logo1 { display:block; width:32%; height:16rem; background:url(../images/logo1.png) no-repeat 0 55px; background-size:100%; color:transparent; transition:all 0.5s; }
.banner span.logo2 { display:block; width:27%; height:16rem; transition:all 0.5s; }
.banner span.logo2 img { width:100%; margin:22% 0 0 0; }
.banner span.logo3 { display:block; margin:10px 0 0 4%; transition:all 0.5s; }
.banner span.logo3 img { width:auto; height:370px; }

/* 22縣市選單 */
.menu { width:96%; padding:10px; background:rgba(255, 255, 255, 0.6); border-radius:10px 10px 0 0; text-align:center; display:flex; justify-content:center; flex-wrap:wrap; gap:10px 0; transition:all 0.5s; position:absolute; left:2%; top:66%; }
.menu a { flex:0 0 9%; font-size:20px; letter-spacing:1px; font-family:'Noto Sans TC'; padding:0 0 10px; font-weight:500; position:relative; border-bottom:1px dotted #999; }
.menu a:hover { color:#025aa0 !important; }
/* 右邊隔線 */
.menu a:after { content:""; display:block; width:1px; height:18px; background-color:#999; position:absolute; top: 10px; right: 0; }
.menu a:nth-child(11):after, .menu a:nth-child(22):after { display:none; }
/* 六都紅字 */
.menu a:nth-child(1), .menu a:nth-child(2), .menu a:nth-child(3),
.menu a:nth-child(4), .menu a:nth-child(5), .menu a:nth-child(6) { color:#a00; }

@media screen and (max-width:1150px){
	.banner { height:23rem; }
	.banner span.logo1 { transform: translate(5px, -5px); }
	.banner span.logo3 { transform: scale(0.95) translate(35px,-5px); margin:0; }
}
@media screen and (max-width:1080px){ 
	.banner { height:22rem; }
	.banner span.logo3 { transform: scale(0.85) translate(45px,-25px); }
}
@media screen and (max-width:1024px){ /*1024*/
	.menu { top:63%; }
}
@media screen and (max-width:990px){ 
	.banner { height:21rem; }
	.banner span.logo1 { transform: translate(20px, -10px); }
	.banner span.logo2 { transform: translate(33px, 0px); }
	.banner span.logo3 { transform: scale(0.8) translate(30px,-35px); }
}
@media screen and (max-width:920px){ /*912*/
	.banner { height:20rem; }
	.menu { top:60%; }
}
@media screen and (max-width:880px){ 
	.banner { height:19rem; }
	.banner span.logo1 { transform: translate(20px,-18px); }
}
@media screen and (max-width:820px){ /*820|800*/
	.banner { height:18.5rem; }
	.menu { top:58%; }
}
@media screen and (max-width:750px){ /*768*/
	.banner span.logo3 { transform: scale(0.7) translate(15px,-55px); }
	.menu { top:56%; }
}
@media screen and (max-width:720px){ /*712*/
	.banner { height:17rem; }
	.banner span.logo1 { transform: translate(45px,-23px); }
	.banner span.logo2 { transform: translate(50px, 0px); }
	.banner span.logo3 { transform: scale(0.6) translate(20px,-70px); }
}
@media screen and (max-width:660px){ 
	.banner { height:16rem; }
	.menu { top:53%; }
}
@media screen and (max-width:600px){
	.banner_menu { height:22rem; }
	.banner { background:url(../images/Mbg.jpg) no-repeat center top; background-size:100%; }
	.banner span.logo1, .banner span.logo2, .banner span.logo3 { display:none; }
	.menu { top:43%; justify-content:start; gap:8px 0; }
	.menu a { flex:0 0 16.5%; padding:0 0 8px; font-size:18px; }
	/* 右邊隔線 */
	.menu a:nth-child(11):after, .menu a:nth-child(22):after { display:block; }
	.menu a:nth-child(6n):after { display:none; }
}
@media screen and (max-width:550px){
	.banner_menu { height:21.5rem; }
	.menu { top:41%; }
}
@media screen and (max-width:500px){
	.banner_menu { height:21rem; }
	.menu { top:38%; }
}
@media screen and (max-width:450px){ /*430*/
	.banner_menu { height:20rem; }
	.menu { top:35%; }
}
@media screen and (max-width:420px){ /*414*/
	.menu { top:34%; }
}
@media screen and (max-width:400px){ /*390|375*/
	.banner_menu { height:19rem; }
	.menu { top:34%; }
}
@media screen and (max-width:365px){ /*344|330*/
	.banner_menu { height:17.5rem; }
	.menu { width:98%; left:1%; top:33%; padding:5px; }
	.menu a { padding:0 0 5px; letter-spacing:0; font-size: 17px; }
	.menu a:after { height:15px; }
}


/* ---------------------------- footer */
.election2026_footer { width:100%; clear:both; padding:15px; text-align:center; background-color:#eee; }
.election2026_footer a { width:110px; display:inline-block; margin:0px auto 5px; }
.election2026_footer img { height:26px; width:auto; }
.election2026_footer p, .election2026_footer p span { color:#444; font-size:13px; letter-spacing:1px; line-height:1.5; }

@media screen and (max-width:600px) {
    .election2026_footer p span { display:block; line-height:1.3; }
}
@media screen and (max-width:380px) {
    .election2026_footer img { width:100px; }
}
@media screen and (max-width:330px) {
    .election2026_footer p, .election2026_footer p span { font-size:0.7rem; letter-spacing:0; }
}


/* ---------------------------- 麵包屑 */
.breadcrumbs { width:100%; height:30px; font-size:16px; margin:0 0 15px; overflow:hidden; clear:both; letter-spacing:1px; }
.breadcrumbs span {  margin:0 0 0 8px; }
.breadcrumbs a { color:#222; font-size:16px; font-family:'Noto Sans TC'; }
.breadcrumbs a:hover { color:#0082ea; }
.breadcrumbs .active { display:inline; font-size:22px; font-family:'Noto Sans TC'; font-weight:400; line-height:25px; color:#0082ea; }

@media screen and (max-width:600px) {
	.breadcrumbs .active { font-size:20px; }
}
@media screen and (max-width:450px) {
	.breadcrumbs span { margin:0 1px 0 5px; }
}


/* ---------------------------- 300側邊欄 */
aside { width:300px; float:right; margin:0; }
#right { width:300px; }
aside .suggest.suggest_pc { margin-bottom:20px; min-height:250px; border:1px solid #ccc; }
/* 側邊欄 fb */
aside .fb_aside { width:300px; }
/* 熱門新聞 */
.hotNews { width:300px; margin:0 0 20px; }
.hotNews .labelTit { font-size:20px; letter-spacing:1px; }
/* 新聞列表 */
.hotNews ul li { margin-bottom:20px; }
.hotNews ul li a .ph { width:100%; height:0; padding-bottom:59%; border-radius:6px; overflow:hidden; border: 1px solid #eee; }
.hotNews ul li a h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; min-height:50px; overflow:hidden; margin:5px 0 0 0; }

@media screen and (max-width:1000px) { /*側邊欄隱藏*/
    aside, aside #right { display:none; }
}


/* ---------------------------- 列表 */
ul.list { width:100%; padding:0; margin:0; list-style:none; display:flex; flex-wrap:wrap; flex-direction:column; gap:15px 0; }
ul.list li { border-bottom: 1px solid #eaeaea; padding: 0 0 15px; }
ul.list li a { display:flex; flex-wrap:nowrap; gap:0 15px; }
ul.list li a .ph { width:30%; height:0; padding: 0 0 18%; border-radius:5px; overflow:hidden; line-height:0; position:relative; border:1px solid #ccc; }
ul.list li a .tit { width:70%; color:#111; }
ul.list li a .tit h3 { font-size:20px; margin-top:-3px; }
ul.list li a .tit p { font-size:16px; color:#888; line-height:1.4; letter-spacing:1px; height:65px; overflow:hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; margin: 8px 0 0; }
ul.list li a .tit span.time { font-size:14px; font-family:Verdana; color:#866d56; padding-right:15px; }
ul.list li a .tit span.reporter { font-size:15px; color:#444; font-family:'Noto Sans TC'; }

/* 無更多資料 */
.listEnd { display: none; color:#999; text-align: center; margin: 15px auto 30px; }

@media screen and (max-width:850px) { 
    ul.list li a .tit p { -webkit-line-clamp:2; height:45px; }
}
@media screen and (max-width:700px) { 
    ul.list li a .tit p { display:none; }
}
@media screen and (max-width:450px) { 
	ul.list li a { gap:0 2%; }
	ul.list li a .ph { width:34%; padding-bottom:22.5%; }
	ul.list li a .tit { width:64%; }
	ul.list li a .tit span { display:block; }
	ul.list li a .tit span.time { font-size:13px; }
	ul.list li a .tit span.reporter { font-size:14px; color:#666; line-height: 1.4; }
}

/* --------------------------- 瀏覽器更新提醒 */
.ie9{width:800px;overflow:hidden;padding:25px 0;margin:0 auto;border:1px solid #ddd;}
.ie9 p{padding:0px 55px;margin:0px;font-size:18px;color:#222;line-height:30px;}
.button{padding:15px 0; }
.button a{display:block;height:40px;line-height:40px;border:1px solid #999;background-color:#f7f7f7; float:right;text-align:center;vertical-align:middle;padding:0px 15px;margin:0 10px; color:#2052d1;}
.button a:hover{background-color:#ddd;color:#222;}
a.close {width:40px;height:40px;margin:0 40px 0px 20px; padding:0px;}
a.close img{width:35px;margin-top:3px;}


/* ---------------------------- 共用註記 + 政黨小圖 */
/* 現任註記 */
span.starMark { line-height:1; padding:0 5px; vertical-align:top; }
span.starMark:before { content:"★"; font-size:12px; color:#fbb804; }
/* 政黨小圖 */
img.pp { display:inline-block; width:20px; text-align:center; vertical-align: middle; margin:-4px 0 0 0; }
/* 當選註記 */
span.elected { display:block; width:20px; height:20px; border-radius:100%; border:3px solid #c00; margin: 0 auto; position:relative; }
span.elected:before, span.elected:after { content:""; display:block; width:0px; border-left:3px solid #c00; position:absolute; }
span.elected:before { height:17px; top:-1px; left:6px; }
span.elected:after { height:10px; top:5px; left:2px; transform: rotate(45deg); }
/* 備註 */
span.note { display:block; width:100%; font-size:16px; text-align:left; color:#999; padding:0 0 20px; }


/* ---------------------------- 縣市選單 + 縣市長/縣市議員選單 */
/* 手機版選單隱藏 */
form.CityMenu { display:none; }
/* 共用 */
.CCmenu { width:100%; background-color:#fff; border:1px solid #eaeaea; margin-bottom:5px; padding:8px 15px; overflow:hidden; }
.CCmenu a { display:inline-block; font-size:16px; text-align:center; letter-spacing:0; padding:2px 0; margin:0 0 3px 0; }
.CCmenu a:hover, .CCmenu a:active, .CCmenu a.current { background-color:#ffc916; border-radius:2px; }
/* 分區 */
.CCmenu .sixCity { width:22%; float:left; margin:0 3.5% 0 0.6%; display:flex; flex-wrap:wrap; justify-content:space-between; }
.CCmenu .north { width:33%; float:left; margin:0 3.5% 0 0; display:flex; flex-wrap:wrap; }
.CCmenu .middle { width:22%; float:left; margin:0 3.5% 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; }
.CCmenu .south { width:11%; float:left; text-align: center; }
.CCmenu span { display:block; width:100%; font-size:20px; color:#ccc; text-align:center; line-height: 1.5; font-family:'Noto Sans TC'; font-weight:500; border-bottom:1px #ccc dashed; margin:0 0 5px 0; }
.CCmenu .sixCity a, .CCmenu .middle a { width:48%; }
.CCmenu .north a { width:32%; margin:0 1.5% 3px 0; }
.CCmenu .north a:nth-of-type(3n) { margin:0 0 3px 0; }
.CCmenu .south a { width:98%; }
/* 新聞用 */
.CCmenu.news a.allArea {/* 全台總覽 */ display:inline-block; width:10%; float:left; letter-spacing:5px; margin:35px 1.5% 0 0; border-radius:2px; border:1px solid #eaeaea; }
.CCmenu.news a.allArea.current { border:none; }
.CCmenu.news .sixCity { width:20%; margin:0 2% 0 0; }
.CCmenu.news .north { width:32%; margin:0 2% 0 0; }
.CCmenu.news .middle { width:20%; margin:0 2% 0 0; }
.CCmenu.news .south { width:10%; }

/* 縣市長/縣市議員 選單(共用) */
.status { width:100%; background-color:#fff; border:1px solid #eaeaea; margin-bottom:5px; padding:11px 15px 10px; overflow:hidden; }
.status a { display:inline-block; font-size:16px; text-align:center; letter-spacing:1px; padding:2px 3%; position:relative; margin-right:28px; }
.status a:after { content:"|"; font-size:15px; color:#bbb; position:absolute; top:3px; right:-17px; }
.status a:last-child:after { display:none; }
.status a:hover, .status a:active, .status a.current { background-color:#ffc916; border-radius:2px; }

@media screen and (max-width:650px) {
    .CCmenu.news a { font-size:15px; }
    .CCmenu.news a.allArea { letter-spacing:0; }
}
@media screen and (max-width:600px) {
    .CCmenu, .CCmenu.news { display:none; }
    /* 手機版選單 */
    form.CityMenu { display:block; }
    select[name="constituency"] optgroup { display:block; width:100%; color:#999; background-color:#dfe8eb; }
    select[name="constituency"] option { width:100%; color:#111; background-color:#fff; }
}

/* 議員：第1~16選舉區 -- 候選人 + 即時開票(開票結果) */
form.district { display:none; }
.status.district { padding: 11px 15px 5px; display:flex; flex-wrap:wrap; }
.status.district a { width:10%; padding:2px 0px; margin-bottom:5px; margin-right:2.8%; letter-spacing:-1px; }
.status.district a:after { right:-16%; }
.status.district a:nth-child(8n) { margin-right:0px; }
.status.district a:nth-child(8n):after { display:none; }
@media screen and (min-width:1130px) and (max-width:1260px){
    .status.district a { width:11.8%; }
    .status.district a:after { right:-11.5%; }
    .status.district a:nth-child(8n) { margin-right:2.8%; }
    .status.district a:nth-child(8n):after { display:block; }
    .status.district a:nth-child(7n) { margin-right:0px; }
    .status.district a:nth-child(7n):after { display:none; }
    .status.district a:last-child:after { display:none; }
}
@media screen and (min-width:1001px) and (max-width:1129px){
    .status.district a { width:14%; }
    .status.district a:after { right:-11.5%; }
    .status.district a:nth-child(8n), .status.district a:nth-child(7n) { margin-right:2.8%; }
    .status.district a:nth-child(8n):after, .status.district a:nth-child(7n):after  { display:block; }
    .status.district a:nth-child(6n) { margin-right:0px; }
    .status.district a:nth-child(6n):after { display:none; }
    .status.district a:last-child:after { display:none; }
}
@media screen and (max-width:920px) {
    .status.district a { width:11.8%; }
    .status.district a:after { right:-11.5%; }
    .status.district a:nth-child(8n) { margin-right:2.8%; }
    .status.district a:nth-child(8n):after { display:block; }
    .status.district a:nth-child(7n) { margin-right:0px; }
    .status.district a:nth-child(7n):after { display:none; }
    .status.district a:last-child:after { display:none; }
}
@media screen and (max-width:780px) {
    .status.district a { width:14%; }
    .status.district a:after { right:-11.5%; }
    .status.district a:nth-child(8n), .status.district a:nth-child(7n) { margin-right:2.8%; }
    .status.district a:nth-child(8n):after, .status.district a:nth-child(7n):after  { display:block; }
    .status.district a:nth-child(6n) { margin-right:0px; }
    .status.district a:nth-child(6n):after { display:none; }
}
@media screen and (max-width:666px) {
    .status.district a { font-size:15px; padding:2px 3px; }
}
@media screen and (max-width:600px) {
    /* 議員選舉區 */
    .status.district { display:none; }
    form.district { display:block; margin:0 auto 10px; }
    form.district select option { width:100%; color:#111; }
    /* 其他候選人名單 */
    .status.other a { padding:2px 2%; margin-right: 25px; }
}
@media screen and (max-width:550px) {
    /* 其他候選人名單 */
    .status.other a { display:block; text-align:left; letter-spacing:1px; padding:4px 4%; margin:0 auto 10px; border:1px solid #eee; }
    .status.other a:last-child { margin:0 auto; }
    .status.other a:after { display:none; }
}