@charset "utf-8";
/* CSS Document */

@media screen and (max-width:800px) { /* 配合快訊轉 M 版 */
	.whitecon { padding:0 2%; margin-top:5px; } /* 列表 */
	
}

h3 { font-weight:normal; }

/* 快訊下的關鍵字 */
.top_keywords { display:none; }
@media screen and (max-width:800px) { /* 配合快訊轉 M 版 */
	div.ltnheader .row2 ul li.h_kw { display:none; } /* header 關鍵字隱藏 */
	.top_keywords { display:block; height:32px; overflow-x: overlay; overflow-y: hidden; margin:16px 0 0px !important; padding:0 10px; }
	/* 橫向捲軸調整 */
	.top_keywords::-webkit-scrollbar { height: 5px; }
	.top_keywords::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; }
	.top_keywords::-webkit-scrollbar-track { background: transparent; }

	.top_keywords .top_ky_wrap { line-height:28px; display: inline-block; }
	/* 熱搜 */
	.top_keywords b { font-weight:normal; display: inline-block; font-size:17px; color:#fff; background-color:#e9ae2c; margin-right:12px; padding:3px 12px 0; border-radius:20px; letter-spacing:2px; float:left; }

	.top_keywords ul { width: calc(100% - 85px); float: left; display: flex; flex-wrap: nowrap; }
	.top_keywords ul li { float: left; border:1px solid #d66900; border-radius:20px; margin-right:12px; flex-shrink: 0; }
	.top_keywords a { font-size: 17px; color: #111; padding:2px 12px 0; }
	.top_keywords a:hover { color:#d66900; }
}


/*------------------------------*\
			 列表共用
\*------------------------------*/
ul.list { display:flex; width:100%; padding: 20px 20px 0 20px; margin: 0; list-style: none; flex-wrap:wrap; flex-direction:column; gap:15px 0; }
ul.list li { border-bottom:1px solid #eaeaea; padding:0 0 15px; }
ul.list li:last-child { border-bottom:none; }

ul.list li a { display:flex; flex-wrap:nowrap; gap:0 20px; }
ul.list li a div.ph { width:20%; height:0; padding:0 0 13%; overflow: hidden; line-height: 0; opacity: 1; border-radius: 8px; position: relative; background: url('../images/default.png') no-repeat center; background-size:cover; border: 1px solid #ccc; }
ul.list li a div.ph img /*縮圖*/{ width: 100%; }

ul.list li a div.tit { width: 80%; color: #111; }
ul.list li a div.tit h3 { display: inline-block; font-size:22px; line-height:1.3; letter-spacing:0.5px; }
ul.list li a div.tit span.video { display: inline-block; width: 23px; height: 20px;	margin: 0 6px; background: url('../images/video.svg') no-repeat center; background-size:23px auto; background-position-y:1px; }
ul.list li a div.tit span.time { display: block; font-size:14px; font-family: Verdana; color:#a28f7e; padding:3px 0 0;  }
ul.list li a div.tit p { height:43px; font-size: 16px; line-height:1.4; letter-spacing: 1px; color: #888; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; margin:8px 0 0; }

ul.list li a:hover div.tit h3 {	color: #b03c3f; }
ul.list li a:hover div.ph { opacity: 0.8; transition: opacity 0.2s linear; }

.listEnd { /*display: none;*/ width:95%; text-align: center; border-top:1px solid #aaa; margin:20px auto; padding:10px; }
@media screen and (max-width:800px) { /* 配合快訊轉 M 版 */
	ul.list { padding: 20px 0 0; }
	ul.list li a div.tit h3 { font-size:20px; }
	ul.list li a div.tit p { display:none; }
}
@media screen and (max-width:600px) {
	ul.list li { border-bottom:none; }
	ul.list li a { gap: 0 15px; }
	ul.list li a div.ph { width:30%; padding:0 0 19%; }
	ul.list li a div.tit { width:70%; }
	
	.listEnd { width:100%; }
}
@media screen and (max-width:450px) {
	ul.list li { padding:0; }
	ul.list li a { gap: 0 8px; }
	ul.list li a div.ph { width:35%; padding:0 0 23%; }
	ul.list li a div.tit { width:65%; display:flex; flex-wrap:nowrap; flex-flow: column nowrap; float: right; }
	ul.list li a div.tit h3 { font-size:18px; -webkit-box-orient: vertical; -webkit-line-clamp:3; display: inline-block; display: -webkit-box; overflow:hidden; }
	ul.list li a div.tit span.time { display: flex; font-size:13px; align-items: baseline; margin: auto 0 0; }
}
@media screen and (max-width:375px) {
	
}
/*------------------------------*\
		列表大圖 - 輪播
\*------------------------------*/

.Listswiper-box { width:100%; height:auto; background-color:#fff; position:relative; overflow:hidden; padding-bottom: 1%; }
.Listswiper-box .swiper-wrapper { z-index:0; } /* 浮水印廣告 */
.Listswiper-box .Listswiper-container { margin:0 0 36px; }
.Listswiper-box .Listswiper-container img { width:100%; height:auto; }
/* 標題 */
.Listswiper-container h3 { width:100%; height:60px; font-size:20px; letter-spacing:0.5px; line-height:1.35; padding:4px 4%; background-color: #3d3d3d; color: #ddd; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
a.swiper-slide:hover h3 { background-color: #222; }
/* 分頁 */
.Listpagination { width:100%; bottom:14px; z-index:0 !important;/* z-index浮水印廣告 */ }
.Listpagination .swiper-pagination-bullet { margin:0 3px; background-color:#787878; width: 9px; height: 9px; }
.Listpagination .swiper-pagination-bullet-active { background-color:#b03c3f; }
/* 上下頁 */
.Listswiper-button-next, .Listswiper-button-prev { width:40px; height:50px; top:30%; text-shadow: 2px 2px 8px #000; position:absolute; z-index:0; cursor:pointer; }
.Listswiper-button-prev { left:0; }
.Listswiper-button-next { right:0; }
.Listswiper-button-prev::before, .Listswiper-button-next::before 
{ content:""; display:block; width:100%; height:100%; opacity: 0.8; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iODAiIGhlaWdodD0iMTUwIj48cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHBvaW50cz0iNjAsMTAgMjIsNzIuNSA2MCwxNDAgIi8+PC9zdmc+");
background-size: contain; background-repeat: no-repeat; 
filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.9)); -webkit-filter:drop-shadow(0px 0px 5px rgba(0,0,0,.9)); }
.Listswiper-button-next::before { transform: rotate(180deg); }


/* ESG專區 - 圖片限制高度 */
.Listswiper-box .Listswiper-container .swiper-slide div { padding: 0 0 58%; height:0; background-color:#333; overflow: hidden; }

.Listswiper-box .Listswiper-container .swiper-slide { overflow: hidden; border-radius:8px; }

@media screen and (max-width:800px) {
    .Listswiper-container h3 { height:58px; letter-spacing:1px; }
}
@media screen and (max-width:600px) {
    .Listpagination { width:100%; bottom:15px; }
    .Listswiper-container h3 { font-size:22px; height:67px; color:#fff; padding:1% 2%; }
}
@media screen and (max-width:450px) {
	.Listswiper-container h3 { font-size:20px; height:60px; }
}

/*------------------------------*\
		  地方新聞 分類
\*------------------------------*/
.area { width: 99%; display: flex; flex-wrap: wrap; flex-direction:row; gap:25px 0; margin:10px 0 25px; gap:11px; justify-content: center; }
.area a { padding: 0 8px; color:#111; line-height:34px; letter-spacing: 1px; border-radius:5px; border:1px solid #c4a69c; background-color:#f3f3f3; }
.area a:hover {	color:#fff; background-color:#b03c3f; }
.area_m { display: none; } /*m版 隱藏*/

@media screen and (max-width:1245px) {
	.area { justify-content: left; }
}
@media screen and (max-width:800px) {
	.area { width: 90%; margin:10px auto 25px; }
}
@media screen and (max-width:700px) {
    /*電腦版 隱藏*/
	.area { display: none; }
    /*行動裝置版*/
	.area_m { display:block; width: 100%; text-align:center; margin: 10px 0 20px; padding:0 10px; }
	.area_m select { width:60%; height: 30px; font-size: 16px; font-family: "黑體", "微軟正黑體", "新細明體", Arial, sans-serif; border: 1px solid #999; background: url(https://cache.ltn.com.tw/images/arrow.png) no-repeat right center #fff; background-size: 1rem; padding: 0px 10px; border-radius: 5px; -webkit-appearance: none; /*Chrome*/ -moz-appearance: none; /*FF*/ appearance: none; /*CSS3*/ }
	.area_m select::-ms-expand { display: none; /*IE*/ }
}
