/* 新闻详情页样式 */







/* 新闻标题区域 - 修改灰色背景和标题样式 */

.news-header {

    background-color: #f0f0f0;

	padding-top:200px;

	padding-bottom:20px;

    width: 100%;

}



.news-header h1 {

    font-size: 36px;

    color: #333;

    margin-bottom: 20px;

    line-height: 1.3;

    text-align: center; /* 标题居中 */

}



.news-meta {

    display: flex;

    align-items: center;

    margin-bottom: 20px;

    color: #777;

    font-size: 14px;

    justify-content: center; /* 居中显示 */

}



.breadcrumb {

    font-size: 14px;

    color: #777;

    padding: 0 15px; /* 添加左右内边距 */

}



/* 确保容器内的内容有适当的内边距 */

.news-header .container {
	max-width:1200px;

    padding: 0 15px;

}



/* 响应式调整 */

@media (max-width: 768px) {

    .news-header {

        padding: 30px 0;

    }

    

    .news-meta {

        flex-direction: column;

        align-items: center;

        gap: 10px;

    }

}



.news-date {

    margin-right: 20px;

}



.news-meta i {

    margin-right: 5px;

}



.breadcrumb {

    font-size: 14px;

    color: #777;

}



.breadcrumb a {

    color: #0b779c;

    text-decoration: none;

    transition: color 0.3s ease;

}



.breadcrumb a:hover {

    color: #4CAF50;

}



/* 新闻内容区域 */

.news-content {

    background-color: #fff;
	max-width:1200px;
	padding:10px 40px;
	margin:40px auto;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    margin-bottom: 30px;

}
.news-content img {
	width:100%;
	height:auto;
}


.news-summary {

    font-size: 18px;

    color: #555;

    line-height: 1.6;

    padding-bottom: 20px;

    margin-bottom: 30px;

    border-bottom: 1px solid #eee;

    font-weight: 500;

}



.news-image {

    margin: 30px 0;

    border-radius: 10px;

    overflow: hidden;

}



.news-image img {

    width: 100%;

    height: auto;

    display: block;

}



.image-caption {

    text-align: center;

    color: #777;

    font-size: 14px;

    padding: 10px;

    background-color: #f8f9fa;

    margin: 0;

}



.news-content h2 {

    font-size: 28px;

    color: #0b779c;

    margin: 30px 0 20px;

    padding-bottom: 10px;

    border-bottom: 2px solid #eee;

}



.news-content h3 {

    font-size: 22px;

    color: #0b779c;

    margin: 25px 0 15px;

}



.news-content p {

    font-size: 16px;

    color: #333;

    line-height: 1.8;

    margin-bottom: 20px;

}



.news-content ul, .news-content ol {

    margin-bottom: 20px;

    padding-left: 20px;

}



.news-content li {

    font-size: 16px;

    color: #333;

    line-height: 1.8;

    margin-bottom: 10px;

}



blockquote {

    background-color: #f8f9fa;

    border-left: 4px solid #4CAF50;

    padding: 20px;

    margin: 30px 0;

    font-style: italic;

    color: #555;

}



blockquote p {

    margin-bottom: 10px;

}



blockquote cite {

    font-style: normal;

    font-weight: 500;

    color: #777;

}



/* 分享区域 */

.news-share {

    display: flex;

    align-items: center;

    padding: 20px 0;

    border-top: 1px solid #eee;

    border-bottom: 1px solid #eee;

    margin-bottom: 30px;

}



.news-share span {

    margin-right: 15px;

    color: #777;

}



.share-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: #f0f0f0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #555;

    margin-right: 10px;

    transition: all 0.3s ease;

}



.share-icon:hover {

    background-color: #0b779c;

    color: #fff;

}



/* 上一篇/下一篇导航 */

.news-navigation {

    display: flex;

    justify-content: space-between;

    margin-bottom: 50px;

}



.prev-news, .next-news {

    display: flex;

    align-items: center;

    background-color: #fff;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    text-decoration: none;

    transition: all 0.3s ease;

    max-width: 48%;

}



.prev-news:hover, .next-news:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



.prev-news i, .next-news i {

    font-size: 20px;

    color: #0b779c;

}



.prev-news i {

    margin-right: 15px;

}



.next-news i {

    margin-left: 15px;

}



.nav-content {

    flex: 1;

}



.nav-content span {

    display: block;

    font-size: 14px;

    color: #777;

    margin-bottom: 5px;

}



.nav-content h4 {

    font-size: 16px;

    color: #0b779c;

    margin: 0;

    transition: color 0.3s ease;

}



.prev-news:hover .nav-content h4, .next-news:hover .nav-content h4 {

    color: #4CAF50;

}



.next-news .nav-content {

    text-align: right;

}



/* 相关新闻 */

.related-news {

    padding: 80px 0;

    background-color: #fff;

}



.related-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 50px;

}



/* 响应式调整 */

@media (max-width: 992px) {

    .news-header h1 {

        font-size: 30px;

    }

    

    .news-navigation {

        flex-direction: column;

        gap: 20px;

    }

    

    .prev-news, .next-news {

        max-width: 100%;

    }

    

    .related-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .news-detail {

        padding: 60px 0;

    }

    

    .news-header {

        padding: 30px;

    }

    

    .news-header h1 {

        font-size: 26px;

    }

    

    .news-content {

        padding: 30px;

    }

    

    .news-summary {

        font-size: 16px;

    }

    

    .news-content h2 {

        font-size: 24px;

    }

    

    .news-content h3 {

        font-size: 20px;

    }

}



@media (max-width: 576px) {

    .news-meta {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    

    .related-grid {

        grid-template-columns: 1fr;

    }

}