@charset "UTF-8";

/* 專欄文章 */

.knowledge-section { padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
.knowledge h1 { font-size: 30px; font-weight: 500; color: #000; }
.page-title { font-size: 24px; font-weight: bold; color: #1a1a1a; margin-bottom: 24px; }

.category-tabs { display: flex; gap: 10px; margin:20px 0; flex-wrap: wrap; }
.category-tabs .tab-btn { padding:8px 20px; border: 1px solid #c5d0de; background-color: #fff; border-radius: 4px; cursor: pointer; font-size: 15px; color: #333; transition: all 0.2s; }
.category-tabs .tab-btn.active, .category-tabs .tab-btn:hover { background-color: #18387f; color: #fff; border-color: #18387f;}

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.article-card { display: block; background: #fff; overflow: hidden; text-decoration: none; border: 1px solid #e0e6ed; border-radius:5px; box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: transform 0.2s, box-shadow 0.2s; }
.article-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.knowImg { overflow: hidden; width: 100%; height: 200px; }
.knowImg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.article-card:hover .knowImg img { transform: scale(1.06); }
.card-content { padding: 20px; }
.card-content h3 { font-size: 20px; font-weight: bold; color: #1a1a1a; margin: 0 0 8px 0; }
.article-card:hover .card-content h3 { color: #18387f; }
.card-meta { font-size: 16px; color: #888; margin-bottom: 12px; display: flex;}
.card-meta .date { padding-right:10px; margin-right:10px; border-right:1px solid #ddd;}
.card-desc { font-size: 15px; color: #666; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding:50px 0; }
.pagination a { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 4px; text-decoration: none; color: #333; font-size: 14px; }
.pagination a.active, .pagination a:hover { background-color: #18387f; color: #fff; }

/* 內文 */
.article-container { max-width: 1000px; margin: 0 auto; padding: 0 15px; }
.page-top-bg { background-color: #18387F; padding:90px 0 80px 0; }
.main-body { margin-top: -120px; padding-bottom: 60px; }
.bread-nav { color: #b0c4de; font-size: 13px; margin-bottom: 25px; }
.bread-nav a { color: #fff; text-decoration: none; font-size: 13px;}
.bread-nav a:hover { text-decoration: underline; }
.main-heading { color: #fff; font-size: 30px; font-weight: 700; text-align: center; }
.article-content { background-color: #fff; border-radius: 6px; padding: 45px; border: 1px solid #e0e6ed; border-radius:5px; box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
.article-body { font-size:16px; line-height:25px;}
.article-body p { margin-bottom:15px;}
.article-body strong { font-weight:bold;}
.article-body img { max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
.read-more-section { margin-top: 40px; }
.article-h { text-align: center; font-size: 17px; color: #000; margin-bottom: 15px; font-weight: 500; }
.read-more-grid { display: flex; gap: 15px; justify-content: space-between; }
.read-more-grid a { flex: 1; background-color: #fff; border:1px solid #e0e6ed; padding: 15px; text-align: center; color: #333; text-decoration: none; font-size: 14px; border-radius: 4px; transition: all .3s ease; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.read-more-grid a:hover { border-color: #18387F; color: #18387F; }
.read-more-grid a .arr { display:inline-block; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #18387F; border-right: 0; margin-right: 5px; }
.cta-section { margin-top:40px; text-align: center; }
.cta-actions { display: flex; justify-content: center; gap: 15px; }
.cta-actions a{ display: inline-block; padding: 12px 35px; border-radius:5px; font-size: 15px; text-decoration: none; font-weight: 500; min-width: 140px; text-align: center; transition: opacity .2s; }
.cta-actions a:hover { opacity: .9; }
.btn-light-gray { border:1px solid #18387F; color:#18387F; }
.btn-navy-blue { background:#18387F; color:#fff; }
.btn-back { color:#18387F; margin:20px auto 0 auto; font-size:14px;}
.btn-back:hover { text-decoration:underline;}

@media (max-width: 768px) {
    .page-top-bg { padding:90px 0 70px 0; }
    .main-heading { font-size: 22px; }
    .content-box { padding: 25px 20px; }
    .read-more-grid { flex-direction: column; }
    .cta-actions { flex-direction: column; }
    .custom-btn { }
    .article-content { padding:20px;}
    .article-body { font-size:15px; line-height:23px;}
}


@media screen and (max-width: 992px) {
	.article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
	.article-grid { grid-template-columns: 1fr; }
	.category-tabs { gap: 6px; }
	.category-tabs .tab-btn { padding: 6px 12px; font-size: 13px; }
}