@charset "utf-8";

/* ===================== 页面基础 ===================== */
body{background-color: #fff;}
a{transition: color .3s; -webkit-transition: color .3s;}

/* ===================== 头部横幅 ===================== */
.ztzl-header {position: relative; z-index: 0; line-height: 0;}
.ztzl-header .header-bg{display: block; width: 100%; pointer-events: none;}
.ztzl-header .logo{position: absolute; top: 2.2%; left: 18%; width: 16.9%; line-height: 0;}
.ztzl-header .logo img {width: 30%;}
.ztzl-header .title{position: absolute; top: 100px; left: 0; right: 0; margin: 0 auto; max-width: 68.21%; line-height: 0;}
.ztzl-header .title img{display: block; max-height: 291px; margin: 0 auto;}


/***one-area start***/
.one-area {
  position: relative; z-index: 2; margin-top: -600px;
  height: 453px;
  width: 100%;
  background: url(../images/one-area-bg.png) center center no-repeat;
}

.one-area p {
  float: left;            /* ★ 关键：文字块浮左，才能与右侧图片并排 */
  width: 70%;
  min-height: 120px;
  font-size: 18px;
  color: #00398A;
  text-indent: 2em;
  line-height: 36px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box; /* 让 40px 左右内边距算进 66% 内，避免总宽溢出 */
}
.one-area img {
  position: absolute;     /* ★ 脱离文档流，不再受 float 规则约束 */
  top: 0;                 /* ★ 贴容器顶部 */
  right: 60px;               /* ★ 贴容器右侧 */
  width: 296px;
  height: 409px;
  display: block;
}
.zdxm-area {
  position: relative; z-index: 2; margin-top: 40px;
  height: 1010px;
  display: flex;                  /* 关键：开启 flex，子项上的 flex 属性才生效 */
  flex-wrap: wrap;                /* 窄屏时允许换行堆叠 */
  justify-content: space-between; /* 左右两列分别贴两边，两边对齐 */
}
.zdxm-area .zdxm-area-tit{
  height: 125px;
  position: absolute;
  left: 0; right: 0; margin: 0 auto; 
  text-align: center;
}
.zdxm-area .zdxm-area-common {
  height: 851px;
  flex: 0 0 calc((100% - 20px) / 2);  /* 每列占一半宽，中间自动留 20px 间距 */
  margin-top: 145px;
  box-sizing: border-box;             /* 若后续加 border/padding，宽度不会被撑破 */
  background-color: #F0F7FF;
}
.zdxm-area .zdxm-area-common .zdxm-area-common-tit {
  height:78px;
  text-align: center;
  background: url(../images/common-tit-bg.png) center center no-repeat;
  font-size: 40px;
  font-weight: bold;
  line-height: 78px;
  color: #fff;
}
.zdxm-area .zdxm-area-common img {
  display: block;          /* ★ 关键：img 默认是行内元素，margin:auto 不生效 */
  width: 90%;              /* 相对 .item 内容宽（680px）= 612px，配合 margin:auto 居中 */
  height: 348px;
  margin: 20px auto;       /* 上下 20px，左右 auto → 水平居中 */
  object-fit: cover;       /* 宽度变化后按原比例裁切填充，避免 348px 定高把图拉变形 */
}
.zdxm-area .zdxm-area-common .content-area {
  display: block; 
  height: 275px;
  margin: 20px auto;       /* 上下 20px，左右 auto → 水平居中 */
  background-color: #fff;
  background: url(../images/content-bg.png) center center no-repeat;
  padding-top: 20px;

}

.zdxm-area .zdxm-area-common .content-area .content-area-tit {
  height:36px;
  line-height: 36px;
  font-size: 26px;
  width: 90%;
  text-align: center;
  color: #085CBD;
  font-weight: bold;
  margin: 10px auto; 
}
.zdxm-area .zdxm-area-common .content-area p {
  width: 90%;
  font-size: 18px;
  color: #383838;
  text-indent: 2em;
  line-height: 36px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box; /* 让 40px 左右内边距算进 66% 内，避免总宽溢出 */
  margin: 10px auto; 
}

.zdxm-area .zdxm-area-common .news-slide {
  width: 680px;
  height: 773px;
}
.module-box {
  display:block;
}

.imgScale a img{
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.imgScale a:hover img{
  -moz-transform:scale3d(1.1, 1.1, 1);
  -ms-transform:scale3d(1.1, 1.1, 1);
  -o-transform:scale3d(1.1, 1.1, 1);
  -webkit-transform:scale3d(1.1, 1.1, 1);
  transform:scale3d(1.1, 1.1, 1);
}

/*owl-carousel*/
.owl-carousel{touch-action:none;}
.owl-carousel .owl-stage{position:relative;}
.owl-carousel .owl-stage-outer{position:relative; overflow:hidden;}  /* 关键：裁剪，为 stage 移动留出空间 */
.owl-carousel .owl-item{position:relative; min-height:1px; float:left;}  /* 关键：item 横向排列 */
.owl-carousel .item{display:block; width:100%; overflow:hidden;}

/* 图片新闻滚动 */
.tpxw{position:relative;}
.tpxw .owl-carousel img{height:348px;}
.tpxw .owl-carousel .item-name{position:absolute; right:0; bottom:0; left:0; z-index:9; padding:0 90px 0 10px; height:52px; line-height:52px; color:#fff; background-color:rgba(0,0,0,.3);}
.tpxw .owl-carousel .owl-nav>div{position:absolute; top:50%; margin-top:-45px; width:30px; height:55px; background-image:url(../images/slider_btn.png); background-repeat:no-repeat; background-color:rgba(0,0,0,.3); opacity:0;}
.tpxw .owl-carousel .owl-nav>div:hover{background-color:rgba(0,0,0,.5);}
.tpxw .owl-carousel .owl-nav .owl-prev{left:0;}
.tpxw .owl-carousel .owl-nav .owl-next{right:0; background-position:-30px 0;}
.tpxw .owl-carousel:hover .owl-nav>div{opacity:1;}

/* 左右切换箭头：隐藏（如需恢复，删除下面这一行即可，上方箭头样式仍然保留） */
.tpxw .owl-carousel .owl-nav{display:none;}

/* 圆点指示器：左右撑满容器 + flex 居中 */
.tpxw .owl-dots{position:absolute; left:0; right:0; bottom:0; z-index:99; display:flex; justify-content:center;}
.tpxw .owl-dot{float:none; width:12px; height:12px; margin:0 4px; background-color:#d0d0d0; border-radius:50%;}
.tpxw .owl-dot.active{background-color:#c10d0c;}

.news-slide .tpxw .item-name{padding-right:10px; text-align:center;}
.news-slide .tpxw .owl-dots{display:flex;}   /* 必须同步改为 flex，否则会覆盖上面的居中布局 */

/*** 苏州铁路建设历程 start ***/
.sztljslc-area {
  position: relative; z-index: 2; margin-top: 40px;
  height: auto;
  display: flex;                  /* 关键：开启 flex，子项上的 flex 属性才生效 */
  flex-wrap: wrap;                /* 窄屏时允许换行堆叠 */
  justify-content: space-between; /* 左右两列分别贴两边，两边对齐 */
}
.sztljslc-area .sztljslc-area-tit{
  height: 125px;
  position: absolute;
  left: 0; right: 0; margin: 0 auto; 
  text-align: center;
}
.sztljslc-area  .sztljslc-main {
  height: auto;
  padding-top: 80px;
  margin: 20px auto;
}
/*** 苏州铁路建设历程 end ***/

.tupzs-area {
  position: relative; z-index: 2; margin-top: 40px;
  height: 604px;
  display: flex;                  /* 关键：开启 flex，子项上的 flex 属性才生效 */
  flex-wrap: wrap;                /* 窄屏时允许换行堆叠 */
  justify-content: space-between; /* 左右两列分别贴两边，两边对齐 */
}
.tupzs-area .tupzs-area-tit {
  height: 125px;
  position: absolute;
  left: 0; right: 0; margin: 0 auto; 
  text-align: center;
}
.tupzs-area  .tupzs-slide {
  width: 100%;           /* ★ 撑满 flex 容器：不写的话 flex item 宽度按内容算，且 space-between 下单元素会靠左 */
  height: 569px;
  padding-top: 80px;
  margin: 20px auto;     /* 左右 auto → 水平居中 */
}

.tupzs-slide .gzjz-swiper {
  width: 100%;             /* ★ 与父容器同宽（原 130% 是"两侧露边"的溢出式布局，与居中需求冲突） */
  height: 476px;
  position: relative;
  margin: 60px auto 22px;  /* 左右 auto → 水平居中 */
  box-sizing: border-box;
}

.tupzs-slide .gzjz-swiper .swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;      /* 裁掉两侧溢出的 slide */
}

.tupzs-slide .gzjz-swiper .swiper-container .swiper-wrapper {
  width: 100%;
  height: 435px;
  display: flex;             /* 关键：缺失会导致 slide 垂直堆叠，无法横向轮播 */
  box-sizing: content-box;
  transition-property: transform;
}

.tupzs-slide .gzjz-swiper .swiper-container .swiper-slide {
  width: 650px;
  height: 100%;
  flex-shrink: 0;            /* 关键：防止 slide 被 flex 容器压缩 */
  position: relative;
  transition-property: transform;
  background-color: #666666;
}

.tupzs-slide .gzjz-swiper .swiper-container .swiper-wrapper .swi-img {
  width: 650px;
  height: 100%;
}

.tupzs-slide .gzjz-swiper .swiper-container .swiper-wrapper .title-area{
  width:650px;
  height: 36px;
  font-size: 20px;
  line-height: 36px;
  color:#383838;
  text-align: center;
}
.tupzs-slide .gzjz-swiper .swiper-container .swiper-wrapper .title-area a {
  width:650px;
  height: 36px;
  font-size: 20px;
  line-height: 36px;
  color:#383838;
  text-align: center;
}

.tupzs-slide .gzjz-swiper .swiper-container .swiper-wrapper .swi-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tupzs-slide .gzjz-swiper .swiper-container .swiper-pagination {
  bottom: 0;
  display: none;
}

/****“童”绘“轨道上的苏州” start***/
.thgdsdsz-area {
  width:auto;
  height: 560px;
  margin: 100px auto 0;
}
.thgdsdsz-area  .thgdsdsz-area-tit {
  height: 125px; margin: 0 auto; 
  text-align: center;
}

.ztzl .item a{display:block;}
.ztzl .item img{display:block; width:100%; height:280px; object-fit:cover;}  /* 三张原图尺寸不一，统一裁切为等高 */
.ztzl .item span{display:block; font-weight: bold; text-align:center; font-size:20px; line-height:24px; padding-top:8px; color:#383838; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}  /* 图片标题：独占一行、水平居中 */
.ztzl img{height:auto;}
.ztzl .owl-dots{display:none;}
.ztzl .owl-nav.disabled{display:block;}
.ztzl .owl-nav a{position:absolute; top:50%; z-index:1; margin-top:-15px; width:30px; height:30px; background-color:#fff; border-radius:50%;}
.ztzl .owl-nav a:before{position:absolute; top:50%; right:0; left:0; z-index:3; content:""; margin:-10px auto 0; width:20px; height:20px; background-repeat:no-repeat; background-image:url(../images/slider_arrow.png);}
.ztzl .owl-nav .owl-prev,
.ztzl .owl-nav .owl-next{position:absolute; top:0; z-index:5; width:30px; height:100%;}
.ztzl .owl-nav .owl-prev{left:-40px;}
.ztzl .owl-nav .owl-next{right:-40px;}
.ztzl .owl-nav .owl-next a:before{background-position:-20px 0;}


/****“童”绘“轨道上的苏州” end***/

/* ===================== 响应式 ===================== */
.container.width-1920 {
  width: 1920px;
  z-index: 999;
}

@media (max-width:1480px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .container,
  .container[class*="width-"] {
    width: 1170px;
  }
  .ztzl-header .logo{position: absolute; top: 2.2%; left: 10%; width: 80%; line-height: 0;}
  .ztzl-header .logo img {width: 80%;}
  .one-area {
    position: relative; z-index: 2; margin-top: 20px;
    height: auto;       /* ★ 关键：内容变成"上下堆叠"后总高超过 453px 固定值，改 auto 让容器随内容撑高，避免溢出盖到 zdxm-area */
    padding-bottom: 30px;  /* 底部留 30px 内边距，避免内容贴容器边 */
    width: 100%;
    background: url(../images/one-area-bg.png) center top no-repeat;
  }

  .one-area p {    
    margin: 0 auto;  
    width: 100%;
    height: auto;
    font-size: 18px;
    color: #00398A;
    text-indent: 2em;
    line-height: 36px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .one-area img {
    position: static;    /* ★ 回到正常文档流，基础规则的 top:0/right:60px 自动失效，不再产生偏移 */
    display: block;      /* ★ 关键：块级元素 margin:auto 才有水平居中效果 */
    margin: 20px auto 0; /* 左右 auto → 水平居中 */
    width: 98%;
    height: auto;        /* ★ 高度自适应，避免继承的 409px 定高把宽图拉变形 */
    float: none;         /* ★ 清除浮动，否则 margin:auto 失效 */
  }

  /* ===== 重点项目 1480px 响应式：去掉固定宽度，跟随列宽自适应 ===== */
  .zdxm-area {
    position: static;   
    display: block;      /* ★ 关键：块级元素 margin:auto 才有水平居中效果 */
    margin: 20px auto 0; /* 左右 auto → 水平居中 */
    height: auto;          /* 内容可能超过固定 1010px，改为自适应 */
  }
  .zdxm-area .zdxm-area-tit{
    position: static;   
    height: auto;
    display: block; 
    margin: 0 auto; 
    text-align: center;

  }
  .zdxm-area .zdxm-area-common {
    height: auto;          /* 同理，让内容撑高，不裁切 */
    margin-top: 60px;     /* 保留：给顶部绝对定位的大标题留空间 */
  }
  .zdxm-area .zdxm-area-common .news-slide {
    width: 100%;           /* ★ 核心修复：680px 固定宽 → 100%，跟随 565px 列宽 */
    height: auto;
  }
  .zdxm-area .zdxm-area-common img {
    height: 300px;         /* 列变窄后适当降低定高，保持图片比例美观 */
  }
  .zdxm-area .zdxm-area-common .content-area {
    height: auto;          /* 文字行数随宽度增加，高度自适应 */
    background-size: 100% 100%;  /* ★ 背景图随新宽度拉伸铺满，避免两侧留白 */
  }
  .zdxm-area .zdxm-area-common .zdxm-area-common-tit {
    background-size: 100% 100%;  /* 标题背景图同样适配 */
  }

  .sztljslc-area  .sztljslc-main {
    height: auto;
    padding-top: 80px;
    margin: 20px auto;
  }
  
}

@media (max-width:1400px) {

  .container,
  .container[class*="width-"] {
    width: 970px;
  }
  /* ===== 重点项目 1400px 响应式：去掉固定宽度，跟随列宽自适应 ===== */
  .zdxm-area {
    position: static;   
    display: block;      /* ★ 关键：块级元素 margin:auto 才有水平居中效果 */
    margin: 20px auto 0; /* 左右 auto → 水平居中 */
    height: auto;          /* 内容可能超过固定 1010px，改为自适应 */
  }
  .zdxm-area .zdxm-area-tit{
    position: static;   
    height: auto;
    display: block; 
    margin: 0 auto; 
    text-align: center;

  }
  .zdxm-area .zdxm-area-common {
    height: auto;          /* 同理，让内容撑高，不裁切 */
    margin-top: 60px;     /* 保留：给顶部绝对定位的大标题留空间 */
  }
  .zdxm-area .zdxm-area-common .news-slide {
    width: 100%;           /* ★ 核心修复：680px 固定宽 → 100%，跟随 565px 列宽 */
    height: auto;
  }
  .zdxm-area .zdxm-area-common img {
    height: 300px;         /* 列变窄后适当降低定高，保持图片比例美观 */
  }
  .zdxm-area .zdxm-area-common .content-area {
    height: auto;          /* 文字行数随宽度增加，高度自适应 */
    background-size: 100% 100%;  /* ★ 背景图随新宽度拉伸铺满，避免两侧留白 */
  }
  .zdxm-area .zdxm-area-common .zdxm-area-common-tit {
    background-size: 100% 100%;  /* 标题背景图同样适配 */
  }

  .sztljslc-area  .sztljslc-main {
    height: auto;
    padding-top: 80px;
    margin: 20px auto;
  }
}

@media (max-width:992px) {

  /* .container{padding-left: 15px; padding-right: 15px;} */
  .container,
  .container[class*="width-"] {
    width: 750px;
  }
  .sztljslc-area  .sztljslc-main {
    height: auto;
    padding-top: 80px;
    margin: 20px auto;
  }
}

@media (max-width:768px) {

  .container,
  .container[class*="width-"] {
    width: auto;
  }
  .ztzl-header .logo{position: absolute; top: 2.2%; left: 10%; width: 80%; line-height: 0;}
  .ztzl-header .logo img {width: 80%;}

  .sztljslc-area  .sztljslc-main {
    height: auto;
    padding-top: 80px;
    margin: 20px auto;
  }
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container {
  max-width: 1920px;
}