#solid {
    width: 100%;
    height: 100vh; /* 使用视口高度实现全屏 */
    position: relative;
    overflow: hidden;
}

/* 移除不必要的solid0-3类 */
#solid ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
}

#solid ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-size: cover;
  /* 添加过渡动画 */
  transition: opacity 0.7s ease-in-out;
}

#solid ul li:first-child {
  background: url(../images/banner1.jpg) no-repeat 100% 100%;
  background-size: cover;
  display: block; /* 默认显示第一张 */
}
#solid ul li:nth-child(2){
  background: url("../images/banner4.jpg") no-repeat 100% 100%;
  background-size: cover;
}
#solid ul li:nth-child(2) img{
  top:28% !important;
  left: 10%;
  width: 70%;

}
#solid ul li:nth-child(3){
  background: url("../images/banner2.jpg") no-repeat 100% 100%;
  background-size: cover;
}
#solid ul li:nth-child(4){
  background: url("../images/banner3.jpg") no-repeat 100% 100%;
  background-size: cover;
}

#solid ul li img {
	position: absolute;
	top: 30%;
	width: 55%;
    object-fit: cover; /* 保持图片比例并填充容器 */
}

/* 导航点样式 - 响应式定位 */
#solid #btt {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    z-index: 1000;
}

#solid #btt span {
    display: block;
    width: 30px;
    height: 5px;
    margin: 0 10px !important;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

#solid #btt span.active,
#solid #btt span:hover {
    background: #fff;
    opacity: 1;
}

/* 响应式调整 */


.background-container {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 60px;
  bottom: 0;
  left: 0;
  background: rgba(128, 128, 128, 0.7);
  border-radius: 4px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  /* 性能优化 */
  transform: translateZ(0);
}

.logo-scroll {
  display: inline-block;
  height: 100%;
  white-space: nowrap;
  /* 初始动画由JS控制 */
  will-change: transform;
  /* 优化渲染 */
  backface-visibility: hidden;
}

.logo-scroll img {
  height: 60px;
  width: auto;
  max-width: 120px;
  min-width: 80px;
  display: inline-block;
  margin: 0 20px;
  vertical-align: middle;
  /* 图像优化 */
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  transition: transform 0.3s ease;
}

.logo-scroll img:hover {
  transform: scale(1.2);
}


/**第二部分***/
.btn {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid white;
	border-radius: 10px;
	color: white;
	text-decoration: none;
	transition: background-color 0.3s ease;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sk_content_one{ width: 100%; margin: 10px auto; overflow: hidden; background-color: #ffffff; background-image: url('../images/sk_content_one_bg.png');}
.sk_content_one_con{ padding: 10px 0px 15px; overflow: hidden;  width: 1210px; margin: 0 auto;}
.sk_content_one_list{ width: 393px; float: left; margin: 0 5px; transition: background-color 0.3s ease; /* 平滑过渡效果 */}
.sk_one_img{ width: 393px; text-align: center;position: relative; /* 设置为相对定位，作为内部绝对定位元素的参考 */}
.sk_one_img:hover { background-color: #ffffff;transform: scale(1.02);}
.sk_text-overlay-one{ 
	position: absolute;
    top: 50%; /* 垂直居中，可根据需要调整 */
    left: 50%; /* 水平居中，可根据需要调整 */
    transform: translate(-50%, -50%); /* 配合上面的定位实现精确居中 */
    text-align: center;
    color: #ffffff;
    font-family: Arial, sans-serif;}
.sk_text-overlay-one .line {white-space: nowrap;}
.sk_text-overlay-one .line1 {font-size: 32px;font-weight: bold;margin-bottom: 10px;}


.sk_title_all{ width: 100%; height: 50px; line-height: 50px; font-size: 30px; color: #000000;text-align: center; font-weight: 300; margin: 20px 0px 20px 0px;}
.sk_title_all_detail{ width: 100%;  font-size: 12px; color: #666666; padding-left: 30%; }
.nl-con_all{ font-size: 30px; font-weight: 500; color: #18375e; padding-top: 70px; width: 100%; text-align: center; }



.sk_content_two{ width: 100%; margin: 0px auto;  background-color: #ffffff;}
.sk_content_two_img{ width: 100%;height:96vh; }
.sk_content_two_img img{  width: 100%;height:100%;object-fit: cover; }

.sk_content_two2{ width: 100%; margin: 0px auto;  background-color: #ffffff;}
.sk_content_two_img2{ width: 100%;height:96vh;}
.sk_content_two_img2 img{ width: 100%;height:100%;object-fit: cover;}
.nl-con{ width: 100%;  text-align: center; height: 600px; background: url("../images/nl.jpg") no-repeat 100% 100%; background-size: cover; }
.nl-con img{ width: 100%; height:400px; margin-top: 30px; }



.sk_content_three{ width: 1200px; margin: 10px auto; overflow: hidden; background-color: #ffffff; }
.sk_content_three_left{ width: 100%; float: left; overflow: hidden; }
.sk_content_three_left ul{ width: 99%px; display: block; padding: 5px 0px 20px; box-sizing: border-box; overflow: hidden; }
.sk_content_three_left ul li{ display: block; width: 325px; float: left; margin-right: 0px; margin-left: 50px; box-shadow: 0 0 7px #efefef; border-radius: 10px; paddingfile:///C:/Users/Admin/Desktop/首页需求/兰格官网图/首页.png: 13px; box-sizing: border-box; }
.sk_content_three_img{ overflow: hidden; margin-bottom: 15px; }
.sk_content_three_img img{ width: 300px; height: 320px; }
.sk_content_three_img:hover img {transform: scale(1.2); }
.sk_content_three_top{ width: 100%; font-size: 15px; color: #000000; margin-bottom: 5px; }
.sk_content_three_list{ width: 100%; display: flex; justify-content: space-between; font-size: 14px; color: #333333 }




/*第三部分内容*/

.content-three-new {
  background-color: #ffffff;
  padding: 20px 0;
}

.text-container {
  text-align: center;
  padding-top: 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.title {
  font-size: 28px;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 16px;
  color: #999;
  margin-bottom: 20px;
}

.description {
  font-size: 14px;
  width: 80%;
  margin: 0 auto 30px;
}

.logo-container {
  max-width: 1400px;
  margin: 0 auto 10px;
  overflow: hidden;
  background-color: #ffffff;
}

.logo-wrapper {
  display: flex;
  transition: transform 0.5s ease;
  width: 300%; /* 3页 x 100% */
}

.page {
  width: 33.333%; /* 每页宽度 */
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 每行5列 */
  grid-template-rows: repeat(3, 1fr); /* 每页3行 */
  gap: 20px;
  box-sizing: border-box;
  padding: 0 0px;
  min-height: 360px; /* 确保有足够高度显示3行 */
}

.page a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.page img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  transition: transform 0.3s ease;
}

.page img:hover {
  transform: scale(1.2);
}

.progress-bars-container {
  width: 100%;
  max-width: 200px;
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.progress-bar {
  width: 30px;
  height: 4px;
  background-color: #eee;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 5px;
  cursor: pointer;
}

.progress {
  height: 100%;
  background-color: lightblue;
  width: 0%;
  transition: width 0.5s linear;
}

/* 1200px以下响应式调整 */
@media (max-width: 1200px) {
  .content-three-new {
    padding: 20px 15px;
  }
  
  .page {
    grid-template-columns: repeat(4, 1fr); /* 改为每行4列 */
    gap: 15px;
    padding: 0 15px;
    min-height: 400px; /* 增加高度适应更多行 */
  }
  
  .page a {
    height: 90px;
  }
  
  .page img {
    max-height: 70px;
  }
}


/**第四部分内容**/
.sk_content_four_container{
    width: 100%; 
    overflow: hidden; 
    background-color: #ffffff;
}
.sk_content_four {
    max-width: 1400px; /* 设置一个最大宽度，防止在大屏幕上过于宽大 */
    margin: 0 auto; /* 水平居中 */
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    position: relative;
    padding: 0 10px; /* 增加内边距，防止内容贴边 */
}

.sk_content_four_left {
    width: 100%; /* 使用百分比宽度，自适应父元素 */
    overflow: hidden;
    position: relative;
}

.news-container {
    width: 100%;
    overflow: hidden;
}

#newsList {
    display: flex;
    padding: 20px 0;
    box-sizing: border-box;
    transition: transform 0.5s ease;
}

#newsList li {
    flex: 0 0 calc(25% - 20px); /* 使用百分比宽度，并减去左右间距 */
    margin: 0 10px;
    box-shadow: 0 0 7px #efefef;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
	list-style-type: none
}

#newsList li:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.sk_content_four_img {
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 6px;
    height: 150px;
}

.sk_content_four_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

#newsList li:hover.sk_content_four_img img {
    transform: scale(1.05);
}

.sk_content_four_top {
    color: #666666;
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 5px;
}

.sk_content_four_top img {
    margin-right: 5px;
}

.sk_content_four_bottom span {
    color: #333333;
    font-size: 14px;
    display: block;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	line-height: 25px;
}

.sk_content_four_date {
    color: #666666;
    font-size: 12px;
    margin-top: 5px;
}

.arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.arrow:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.arrow-left {
	display: none;
}

.arrow-right {
	display: none;
}

.arrow-left::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #000;
}

.arrow-right::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #000;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom:10px;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination-dot.active {
    background-color: #333;
}

.sk_title_all {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 20px;
	font-size: 30px;
	font-weight: 500;
	color: #18375e;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  #newsList li {
    width: calc(25% - 20px);
  }
}