.container {
  max-width: 1200px;
  width: 100%;
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 128, 0.15);
  overflow: hidden;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.news-section {
  padding: 50px 40px;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.section-title h2 {
  font-size: 2.2rem;
  color: #1e3a8a;
  margin-bottom: 15px;
  font-weight: 700;
}

.section-title .divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #1e40af, #3b82f6);
  margin: 0 auto 20px;
  border-radius: 2px;
}

.section-title p {
  font-size: 1.1rem;
  color: #4b5563;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  padding: 10px 80px;
}

.news-list {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  gap: 30px;
}

.news-item {
  flex: 0 0 calc(100% / 3 - 30px * 2 / 3);
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.1);
  transition: all 0.4s ease;
  position: relative;
}

.news-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(30, 58, 138, 0.2);
}

.news-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.image-container {
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}
\f053     \f054
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.news-item:hover .image-container img {
  transform: scale(1.08);
}

.content {
  padding: 25px;
}

.content h3 {
  font-size: 1.4rem;
  color: #000;
  margin-bottom: 15px;
  line-height: 1.4;
  min-height: 66px;
  transition: color 0.3s ease;
}

.news-item:hover .content h3 {
  color: #0065b5;
}

.content p {
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 20px;
  height: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e5e7eb;
}

.date {
  color: #6b7280;
  font-size: 0.9rem;
}

.read-more {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: #0065b5;
  color: white;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  gap: 8px;
}

.read-more::after {
  content: '→';
  transition: transform 0.3s ease;
}

.news-item:hover .read-more {
  background: #0065b5;
  padding-right: 25px;
}

.news-item:hover .read-more::after {
  transform: translateX(4px);
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.carousel-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0065b5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot.active {
  background: #0065b5;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  color: #0065b5;
  font-size: 1.5rem;
  z-index: 10;
}

.carousel-arrow:hover {
  background: #0065b5;
  color: white;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}

.carousel-arrow-left {
  left: 0;
}

.carousel-arrow-right {
  right: 0;
}

.indicator {
  text-align: center;
  margin-top: 25px;
  color: #4b5563;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.indicator i {
  color: #2563eb;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
  40% {transform: translateX(-10px);}
  60% {transform: translateX(-5px);}
}

/* 响应式设计 */
@media (max-width: 992px) {
  .news-item {
    flex: 0 0 calc(50% - 15px);
  }

  .carousel-arrow {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }

  .carousel-container {
    padding: 10px 70px;
  }
}

@media (max-width: 768px) {
  .news-item {
    flex: 0 0 100%;
  }

  .content p {
    height: auto;
    -webkit-line-clamp: 4;
  }

  .content h3 {
    min-height: auto;
  }

  .carousel-arrow {
    width: 46px;
    height: 46px;
  }

  .news-section {
    padding: 40px 30px;
  }

  header {
    padding: 30px 20px;
  }

  header h1 {
    font-size: 2.3rem;
  }
}

@media (max-width: 576px) {
  .carousel-container {
    padding: 10px 50px;
  }

  .section-title h2 {
    font-size: 1.9rem;
  }

  .section-title p {
    font-size: 1rem;
  }

  .image-container {
    height: 180px;
  }
}

.progress-bar {
  height: 5px;
  background: #dbeafe;
  border-radius: 3px;
  margin-top: 25px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  position: absolute;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #3b82f6, #1e40af);
  border-radius: 3px;
  transition: width 0.5s ease;
}


/*!
 * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */
.fa {
  font-family: var(--fa-style-family,"Font Awesome 6 Free");
  font-weight: var(--fa-style,900)
}

.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display,inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto
}

.fa-classic,.fa-regular,.fa-solid,.far,.fas {
  font-family: "Font Awesome 6 Free"
}

.fa-brands,.fab {
  font-family: "Font Awesome 6 Brands"
}

.fa-1x {
  font-size: 1em
}

.fa-2x {
  font-size: 2em
}

.fa-3x {
  font-size: 3em
}

.fa-4x {
  font-size: 4em
}

.fa-5x {
  font-size: 5em
}

.fa-6x {
  font-size: 6em
}

.fa-7x {
  font-size: 7em
}

.fa-8x {
  font-size: 8em
}

.fa-9x {
  font-size: 9em
}

.fa-10x {
  font-size: 10em
}

.fa-2xs {
  font-size: .625em;
  line-height: .1em;
  vertical-align: .225em
}

.fa-xs {
  font-size: .75em;
  line-height: .08333em;
  vertical-align: .125em
}

.fa-sm {
  font-size: .875em;
  line-height: .07143em;
  vertical-align: .05357em
}

.fa-lg {
  font-size: 1.25em;
  line-height: .05em;
  vertical-align: -.075em
}

.fa-xl {
  font-size: 1.5em;
  line-height: .04167em;
  vertical-align: -.125em
}

.fa-2xl {
  font-size: 2em;
  line-height: .03125em;
  vertical-align: -.1875em
}

.fa-fw {
  text-align: center;
  width: 1.25em
}

.fa-ul {
  list-style-type: none;
  margin-left: var(--fa-li-margin,2.5em);
  padding-left: 0
}

.fa-ul>li {
  position: relative
}

.fa-li {
  left: calc(var(--fa-li-width, 2em)*-1);
  position: absolute;
  text-align: center;
  width: var(--fa-li-width,2em);
  line-height: inherit
}

.fa-border {
  border-radius: var(--fa-border-radius,.1em);
  border: var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);
  padding: var(--fa-border-padding,.2em .25em .15em)
}

.fa-pull-left {
  float: left;
  margin-right: var(--fa-pull-margin,.3em)
}

.fa-pull-right {
  float: right;
  margin-left: var(--fa-pull-margin,.3em)
}