/* 新闻列表页面样式 */



/* 新闻Banner */

/* 应用领域Banner */

.news-banner {

    height: 40vw; /* 使用视窗宽度的百分比 */

    max-height: 565px; /* 保持最大高度限制 */

    min-height: 300px; /* 添加最小高度，避免在小屏幕上太矮 */

    background-image: url('../images/news-banner.jpg');

    background-size: cover;

    background-position: center;

    position: relative;

    display: flex;

    align-items: center;

}



.news-banner::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.2);

}



.news-banner .banner-content {

    position: relative;

    z-index: 2;

    color: #fff;

    padding-left: 50px;

}

.news-banner h1 {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 10px;

}



.news-banner h2 {

    font-size: 36px;

    font-weight: 300;

    margin-bottom: 30px;

    opacity: 0.8;

}



.breadcrumb {

    font-size: 16px;

    color: rgba(255, 255, 255, 0.8);

}



.breadcrumb a {

    color: #fff;

    text-decoration: none;

    transition: color 0.3s ease;

}



.breadcrumb a:hover {

    color: #4CAF50;

}








/* 推荐新闻 */

.featured-news {

    padding: 20px 0;

    background-color: #fff;

}



.featured-slider {

    position: relative;

    height: 400px;

    margin-top: 50px;

    overflow: hidden;

}



.featured-item {

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 0.5s ease;

}



.featured-item.active {

    display: flex;

    opacity: 1;

}



.featured-image {

    flex: 0 0 50%;

    height: 100%;

    overflow: hidden;

}



.featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.featured-item:hover .featured-image img {

    transform: scale(1.05);

}



.featured-content {

    flex: 0 0 50%;

    padding: 40px 50px;

    background-color: #f8f9fa;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.featured-content .news-date {

    font-size: 14px;

    color: #999;

    margin-bottom: 15px;

}



.featured-content h3 {

    font-size: 24px;

    color: #0b779c;

    margin-bottom: 20px;

    line-height: 1.3;

}



.featured-content p {

    font-size: 16px;

    color: #666;

    margin-bottom: 30px;

    line-height: 1.6;

}



.slider-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 30px;

}



.slider-prev,

.slider-next {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: #f8f9fa;

    border: none;

    color: #0b779c;

    font-size: 16px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.slider-prev:hover,

.slider-next:hover {

    background-color: #0b779c;

    color: #fff;

}



.slider-dots {

    display: flex;

    margin: 0 20px;

}



.dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #ddd;

    margin: 0 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.dot.active {

    background-color: #0b779c;

}



/* 新闻列表 */

.news-list {

    padding: 20px 0 80px 0;

    background-color: #f8f9fa;

}



.news-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 50px;

}



.news-card {

    background-color: #fff;

    overflow: hidden;

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

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.news-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}



.news-thumbnail {

    position: relative;

    height: 0;

    padding-bottom: 56.25%; /* 16:9 比例 */

    overflow: hidden;

}



.news-thumbnail img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.news-card:hover .news-thumbnail img {

    transform: scale(1.1);

}



.news-info {

    padding: 25px;

}



.news-info .news-date {

    font-size: 14px;

    color: #999;

    margin-bottom: 10px;

    display: block;

}



.news-info h3 {

    font-size: 20px;

    color: #0b779c;

    margin-bottom: 15px;

    line-height: 1.4;

    transition: color 0.3s ease;

}



.news-card:hover .news-info h3 {

    color: #4CAF50;

}



.news-info p {

    font-size: 15px;

    color: #666;

    margin-bottom: 20px;

    line-height: 1.6;

}



.read-more {

    color: #0b779c;

    font-weight: 500;

    position: relative;

    padding-bottom: 2px;

    transition: color 0.3s ease;

    text-decoration: none;

}



.read-more:after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background-color: #4CAF50;

    transition: width 0.3s ease;

}



.read-more:hover {

    color: #4CAF50;

}



.read-more:hover:after {

    width: 100%;

}



.load-more {

    text-align: center;

    margin-top: 50px;

}

/* 响应式调整 */

@media (max-width: 992px) {

    .news-banner {

        height: 50vw; /* 在中等屏幕上增加高度比例 */

    }

    

    .news-banner h1 {

        font-size: 36px;

    }

    

    .news-banner h2 {

        font-size: 28px;

    }

}



@media (max-width: 768px) {

    .news-banner {

        height: 60vw; /* 在小屏幕上进一步增加高度比例 */

    }

    

    .news-banner h1 {

        font-size: 26px;

    }

    

    .news-banner h2 {

        font-size: 24px;

    }

    

    .news-banner .banner-content {

        padding-left: 30px;
		padding-right: 30px;
		margin-top:80px;
		text-align:center;

    }

}



@media (max-width: 576px) {

    .news-banner {

        height: 70vw; /* 在超小屏幕上使用更大的高度比例 */

    }

    

    .news-banner h1 {

        font-size: 26px;

    }

    

    .news-banner h2 {

        font-size: 20px;

    }

}
/* 响应式调整 */

@media (max-width: 1200px) {

    .featured-content {

        padding: 30px;

    }

    

    .featured-content h3 {

        font-size: 24px;

    }

}



@media (max-width: 992px) {

    .news-banner {

        height: 400px;

    }

    

    .news-banner h1 {

        font-size: 40px;

    }

    

    .news-banner h2 {

        font-size: 30px;

    }

    

    .featured-item {

        flex-direction: column;

        height: auto;

    }

    

    .featured-image,

    .featured-content {

        flex: 0 0 100%;

    }

    

    .featured-image {

        height: 300px;

    }

    

    .featured-slider {

        height: auto;

    }

    

    .news-grid {

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

    }

}



@media (max-width: 768px) {

    .news-banner {

        height: 300px;

    }

    

    .news-banner h1 {

        font-size: 32px;

    }

    

    .news-banner h2 {

        font-size: 24px;

    }

    

    .featured-content h3 {

        font-size: 22px;

    }

}



@media (max-width: 576px) {

    .news-grid {

        grid-template-columns: 1fr;

    }

    

    .news-banner .banner-content {

        padding-left: 20px;

    }

}