body {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
margin: 0;
padding: 0;
}

.news-web{
  width: 100%;
}
.news-main{
  width: 100%;
}
.product-nav{
  width: 100%;
  background: #ffffff;
  text-align: center;
}
.product-nav .nav-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 127px;
}
.product-nav .nav-list li{
  margin: 0;
  padding: 0;
font-size: 22px;
font-family: Source Han Sans CN, Source Han Sans CN-Bold;
font-weight: 700;
text-align: left;
color: #333333;
margin-top: 28px;

}
.product-nav .nav-sec{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-sec:hover .nav-text{
  color: #f10d0c;
}
.nav-sec:hover .nav-line{
  border: 1px solid #f10d0c;
}
.product-nav .nav-line{
  width: 95px;
height: 0px;
margin-top: 28px;
}
.nav-line-one{
  border: 1px solid #f10d0c;
}
.nav-text-one{
  color: #f10d0c;
}
.news-details{
  width: 100%;
  background: #f6f6f6;
  padding-top: 113px;
  padding-bottom: 83px;
}
.news-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}
.content-box{
  width: 100%;
  display: flex;
  gap: 3.4375rem;
  justify-content: center;
  flex-wrap: wrap;
}
.news-details .content-left{
  width: 39.32%;
  height: auto;
}
.news-details .content-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 44.9%;
  gap: 2.1875rem;
}
.news-title{
  width: 100%;
max-height: 80px;
font-size: 30px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #000000;
  overflow: hidden; /* 隐藏溢出内容 */
  display: -webkit-box; /* 使用-webkit-box布局模型 */
  -webkit-box-orient: vertical; /* 指定子元素应如何在垂直方向上布局 */
  -webkit-line-clamp: 2; /* 最多显示的行数 */
  text-overflow: ellipsis; /* 使用省略号代替溢出内容 */
}
.news-time{
  height: 15px;
font-size: 14px;
font-family: Source Han Sans CN, Source Han Sans CN-Medium;
font-weight: 500;
text-align: left;
color: #acacac;
}
.news-intro{
  width: 100%;
max-height: 81px;
font-size: 20px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #919191;
line-height: 38px;
    overflow: hidden; /* 隐藏溢出内容 */
  display: -webkit-box; /* 使用-webkit-box布局模型 */
  -webkit-box-orient: vertical; /* 指定子元素应如何在垂直方向上布局 */
  -webkit-line-clamp: 2; /* 最多显示的行数 */
  text-overflow: ellipsis; /* 使用省略号代替溢出内容 */

}
.news-button{
  width: 165px;
height: 56px;
border: 1px solid #f10d0c;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #f10d0c;
line-height: 34px;
text-align: center;
border-radius: 20px;
}
.news-button:hover{
  background: #f10d0c;
  color: #ffffff;
}
.news-page{
  display: flex;
  justify-content: center;
  gap: 1.6875rem;
  margin-top: 126px;
}
.news-page button{
  width: 165px;
height: 56px;
border: 1px solid #a1a1a1;
border-radius: 15px;
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #000000;
text-align: center;
}
.news-page button:hover{
    background: #f10d0c;
      color: #ffffff;
}
/* 响应式媒体查询 */
@media (max-width: 1200px) {

  }

@media (max-width: 992px) {
.product-nav .nav-list{
  flex-direction: column;
  gap: 0;
}
.content-box .content-right{
  width: 80%;
  height: auto;
}
.content-left{
  width: 80%;
  height: auto;
}
}


@media (max-width: 768px) {
  .news-details .content-left{
  width: 80%;
  height: auto;
}
.news-details{
  padding-top: 50px;
  padding-bottom: 50px;
}
.news-details .content-right{
  width: 80%;
  gap: 1.25rem;
}
.content-box{
  gap: 1.875rem;
}
.news-page{
  margin-top: 70px;
}
}

@media (max-width: 480px) {
.product-box{
  width: 100%;
}
.product-box .product-pic{
  width: 100%;
  margin-left: 0;
}
.news-title{
  font-size: 1.25rem;
}
.news-intro{
  font-size: .9375rem;
}
}
/* 过渡效果 */
.content-box {
  transition: transform 0.3s ease;
}

.content-box:hover {
  transform: translateY(-5px);
}

/* 按钮动画效果 */
button {
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
  background-color: #555555;
  color: #ffffff;
}

/* 页面按钮动画效果 */
.news-page button {
  transition: transform 0.3s ease;
}

.news-page button:hover {
  transform: scale(1.1);
}