/* 文章css */
/* 更新的 CSS 部分 */
.article-header {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center; /* 將主標題和更新日期置中 */
    padding: 2rem 0;
}

.article-header img {
    width: 100%;
    height: auto;
    max-width: 1200px; /* 增加首圖最大寬度 */
    margin: 0 auto; /* 確保居中 */
    display: block;
}

.article-content {
    padding: 2rem;
    color: #fff;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left; /* 文章內容置左 */
}

.article-header h1 {
    font-size: 2.5rem;
	color: #fff;
    margin-top: 5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.article-header p {
    font-size: 1.125rem;
    line-height: 1.6;
	color: #ccc;
    text-align: center; /* 更新日期置中 */
}

.article-content a{
    color: #666;
    text-decoration: inherit;
}

/* 首圖樣式 */
.article-header-image {
    width: 100%;
    height: auto;
    max-width: 1200px; /* 控制首圖最大寬度 */
    margin: 0 auto; /* 確保居中 */
    display: block;
    aspect-ratio: 16 / 9; /* 保持16:9比例 */
    object-fit: cover; /* 確保圖片覆蓋 */
    border-radius: 10px; /* 可選，設置圓角 */
}

/* 文章內的圖片 */
.article-content img {
    width: 716px;
    height: 389px;
    object-fit: cover;
    border-radius: 10px; /* 可選，設置圓角 */
    margin: 20px auto; /* 可選，設置上下邊距 */
    display: block;
}

.article-content h3 {
    text-align: left; /* 次標題置左 */
    margin-top: 2rem; /* 可選，設置上下邊距 */
    font-size: 1.45rem; /* 調整次標題字體大小 */
	
}

.article-content h2 {
    text-align: left; /* 次標題置左 */
    margin-top: 2rem; /* 可選，設置上下邊距 */
    font-size: 1.75rem; /* 調整次標題字體大小 */
	
}

.article-content p {
    font-size: 1.125rem;
    line-height: 1.6;
    text-align: left; /* 文章敘述置左 */
    margin-top: 1rem; /* 可選，設置上下邊距 */
}

.article-content p, .article-content h2,.article-content h3, .article-content ul, .article-content span{
    margin-left: 45px; /* 確保文字和標題稍微向右移動 */
}

.article-content ul {
    list-style: none;
    padding-left: 20px;
}

.article-content ul li {
    position: relative;
}

.article-content ul li::before {
    content: '•';
    position: absolute;
    left: -20px;
    color: #fff; /* 可選，設置項目符號顏色 */
}

/* 新增的按鈕樣式 */
.article-navigation {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.article-navigation a {
    display: block;
    padding: 1rem 2rem;
    color: #fff;
    background-color: #FF5733; /* 使用橙色 */
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.article-navigation a:hover {
    background-color: #CC462A; /* 深一點的橙色，提供懸停效果 */
}

/* 強調文字顏色 */
.article-header .update-type {
    color: rgb(245, 183, 43); /* 更新顏色 */
}

.article-header .event-type {
    color: rgb(67, 204, 218); /* 活動顏色 */
}