@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%; overflow: hidden; pointer-events: none;}
.ztzl-header .header-bg .bg{display: block; width: 100%; height: auto; max-width: 100%;}  /* ★ 关键：背景图跟随视口缩放。原图约 1920px 宽，缩放 150%（视口≈1280）时溢出 640px，而文字层按视口居中 → 相对背景图偏左约 320px */
.ztzl-header .logo{
  position: absolute;
  top: 2.2%;
  left: 0;                     /* ★ 改 18% → 0：不再按视口百分比硬偏移 */
  right: 0;                    /* ★ 新增：左右撑满，内部 .container（1400px + margin auto）自然居中 */
  line-height: 0;
}
.ztzl-header .logo img {width: 30%;}
.ztzl-header .title{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: 48.21%;               /* ★ 关键：max-width → width。absolute 元素要水平居中必须有确定宽度，只给 max-width 时宽度被 left:0 钉死，margin:auto 无效 */
  margin: 0 auto;              /* ★ 配合 left:0 / right:0 实现真正居中 */
  line-height: 0;
  text-align: center;          /* ★ 新增：内部图片水平居中 */
}
.ztzl-header .title img{
  position: static;            /* ★ 去掉 absolute：原来 left: 2% 是二次左移的直接来源 */
  display: block;
  max-width: 100%;             /* ★ 新增：不超出 68.21% 的容器 */
  max-height: 370px;
}


/* =====================  前言 ===================== */
.qianyan-area {
  position: relative;        /* ★ 改：absolute → relative，排在前言块下方 */
  margin: 40px auto 0;      /* ★ 修复：auto 0 → 40px auto 0（margin 简写先上下后左右，原写法左右是 0，不居中） */
  z-index: 10;
  width: calc(100%);  /* ★ 改：窄屏两侧各留 20px（原来是 100% 贴满屏幕） */
  max-width: 1400px;         /* ★ 新增：与 .container 的 1400px 对齐 */
  box-sizing: border-box;    /* ★ 新增：让左右各 20px 内边距算进宽度，避免再溢出 40px */
  height: auto;              /* ★ 改 367px → auto：两列内容总高远超 367px，固定会溢出 */
  display: flex;             /* ★ 新增：一行两列的基础（原来没开 flex，comm 上的 flex:0 0 全是死代码） */
  flex-wrap: wrap;           /* ★ 新增：标题一行、左右两列一行 */
  justify-content: space-between;  /* ★ 两端对齐：左列贴左、右列贴右 */
  gap: 20px;                 /* ★ 新增：行间距 / 列间距都是 20px */
  background-color: #FFF7E8;
}
.qianyan-area .qianyan-area-tit {
  margin: 10px auto 0;
  margin-top: 40px;
  min-height: 72px;
  color: #854646;
  font-size: 50px;
  text-align: center;
}
.qianyan-content {
  margin-top: 20px;
  height:auto;
  min-height: 200px;
  width:100%;
  padding: 0 20px;
}
.qianyan-area p {
  height: auto;
  color: #383838;
  font-size: 20px;
  line-height: 30px;
  text-indent: 2em;
  text-align: justify; 
}

/* =====================  导航三菜单 ===================== */
.daohang-area {
  position: relative;        /* ★ 改：absolute → relative，排在前言块下方 */
  margin: 40px auto 0;      /* ★ 修复：auto 0 → 40px auto 0（margin 简写先上下后左右，原写法左右是 0，不居中） */
  z-index: 10;
  width: calc(100%);  /* ★ 改：窄屏两侧各留 20px（原来是 100% 贴满屏幕） */
  max-width: 1400px;         /* ★ 新增：与 .container 的 1400px 对齐 */
  box-sizing: border-box;    /* ★ 新增：让左右各 20px 内边距算进宽度，避免再溢出 40px */
  height: auto;              /* ★ 改 367px → auto：两列内容总高远超 367px，固定会溢出 */
  display: flex;             /* ★ 新增：一行两列的基础（原来没开 flex，comm 上的 flex:0 0 全是死代码） */
  flex-wrap: wrap;           /* ★ 新增：标题一行、左右两列一行 */
  justify-content: space-between;  /* ★ 两端对齐：左列贴左、右列贴右 */
  gap: 20px;                 /* ★ 新增：行间距 / 列间距都是 20px */
  background-color: #FFF7E8;
}
.daohang-area li {
  flex: 0 0 calc((100% - 40px) / 3);  /* ★ 三等分：容器宽减去 2 个 20px 列间距后除以 3 */
  box-sizing: border-box;             /* ★ 若后续加 padding/边框，不会撑破列宽 */
  list-style: none;                   /* 去掉默认项目符号 */
}

/* =====================  范成大年谱 ===================== */
.fcdnp-area {
  position: relative;        /* ★ 改：absolute → relative，排在前言块下方 */
  margin: 40px auto 0;      /* ★ 修复：auto 0 → 40px auto 0（margin 简写先上下后左右，原写法左右是 0，不居中） */
  z-index: 10;
  width: calc(100%);  /* ★ 改：窄屏两侧各留 20px（原来是 100% 贴满屏幕） */
  max-width: 1400px;         /* ★ 新增：与 .container 的 1400px 对齐 */
  box-sizing: border-box;    /* ★ 新增：让左右各 20px 内边距算进宽度，避免再溢出 40px */
  height: auto;              /* ★ 改 367px → auto：两列内容总高远超 367px，固定会溢出 */
  justify-content: space-between;  /* ★ 两端对齐：左列贴左、右列贴右 */
  gap: 20px;                 /* ★ 新增：行间距 / 列间距都是 20px */
}
/* =====================  光影回眸 01 ===================== */
.fcdnp-area .gyhm-area-01{
  position: relative;
  margin: 0px auto 0;
  height: auto;
  max-width: 1400px;
  z-index: 10;
  text-align: center;
  justify-content: space-between;  /* ★ 两端对齐：左列贴左、右列贴右 */
}
/* =====================  光影回眸 02 ===================== */
.fcdnp-area .gyhm-area-02{
  position: relative;
  margin: 0px auto 0;
  height: auto;
  max-width: 1400px;
  z-index: 10;
  text-align: center;
  justify-content: space-between;  /* ★ 两端对齐：左列贴左、右列贴右 */
}
.fcdnp-area .gyhm-area-02 span {
  position: absolute;                    /* ★ 改 relative → absolute：只有脱离文档流才能浮在图片上方 */
  left: 0;                               /* ★ 与 right 成对：横向撑满容器 */
  right: 0;
  bottom: 0;                             /* ★ 贴容器底边（absolute 下 bottom 才真正生效） */
  display: block;                        /* ★ 关键：span 默认 inline，width/height 对其无效，必须转块级 */
  width: 100%;
  height: auto;                          /* ★ 改固定 60px：文字换行时自动增高，不会被裁切 */
  min-height: 60px;                      /* 保留原设计高度作为下限 */
  padding: 10px 20px;                    /* 内边距，避免文字贴边 */
  box-sizing: border-box;                /* 内边距算进高度 / 宽度 */
  font-size: 18px;                       /* ★ 文字 20px */
  line-height: 30px;
  color: #fff;                           /* 深色半透明底上用白字才看得清 */
  background-color: rgba(75, 72, 72, 0.6);  /* ★ 半透明：#854646 的 60% 不透明度 */
}
/* =====================  光影回眸 03 ===================== */
.fcdnp-area .gyhm-area-03{
  position: relative;
  margin: 20px auto 0;
  height: auto;
  max-width: 1400px;
  z-index: 10;
  text-align: center;
  display: flex;                   /* ★ 新增：三列布局的基础（原来没开 flex，justify-content 是死代码） */
  flex-wrap: wrap;
  gap: 20px;                       /* ★ 间隙 20px（行/列通用） */
}

/* 4:4:6 布局：flex-grow 按比例分配"扣除 gap 后的剩余宽度"，无需手算 calc */
.fcdnp-area .gyhm-area-03 .area-03-01{
  position: relative;              /* ★ 关键：作为下方 span 的定位参照。缺这行 absolute 会一路上溯到 .fcdnp-area，三段文字全部叠在区域底部 */
  flex: 4 1 0;                     /* grow=4（4:4:6 中的 4） */
  min-width: 0;
  box-sizing: border-box;
}
.area-03-01 img {
  width: 100%;                     /* ★ 新增：图片按列宽自适应，否则按原图尺寸撑破列宽 */
  display: block;
}
.area-03-01 span {
  position: absolute;              /* ★ 参考 gyhm-area-02：遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;                  /* span 默认 inline，width / min-height 才生效 */
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}
.fcdnp-area .gyhm-area-03 .area-03-02{
  position: relative;              /* ★ 关键：作为下方 span 的定位参照 */
  flex: 4 1 0;                     /* grow=4 */
  min-width: 0;
  box-sizing: border-box;
}
.area-03-02 img {
  width: 100%;                     /* ★ 新增：图片按列宽自适应 */
  display: block;
}
.area-03-02 span {
  position: absolute;              /* ★ 参考 gyhm-area-02：遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;                  /* span 默认 inline，必须块级 */
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}
.fcdnp-area .gyhm-area-03 .area-03-03{
  position: relative;              /* ★ 关键：作为下方 span 的定位参照 */
  flex: 6 1 0;                     /* grow=6 */
  min-width: 0;
  box-sizing: border-box;
}
.area-03-03 img {
  width: 100%;                     /* ★ 新增：图片按列宽自适应 */
  display: block;
}
.area-03-03 span {
  position: absolute;              /* ★ 参考 gyhm-area-02：遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;                  /* span 默认 inline，必须块级 */
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}
/* =====================  光影回眸 04 ===================== */
.fcdnp-area .gyhm-area-04{
  position: relative;
  margin: 20px auto 0;
  height: auto;
  max-width: 1400px;
  z-index: 10;
  text-align: center;
  display: flex;                   /* 两列布局的基础 */
  flex-wrap: wrap;
  justify-content: space-between;  /* ★ 新增：两端对齐，保证 04-01 贴左、04-02 贴右 */
  gap: 20px;                       /* 间隙 20px（行/列通用） */
}
/* 8:6 布局：04-01 = 按 8:6 分得的宽度 + 20px，04-02 自动吃掉剩余宽度（gap 由容器统一提供） */
.fcdnp-area .gyhm-area-04 .area-04-01{
  position: relative;              /* ★ 关键：作为下方 span 的定位参照。缺这行 absolute 会上溯到 .fcdnp-area，两段文字会叠在区域底部 */
  flex: 0 0 calc((100% - 30px) * 8 / 14 + 20px);  /* ★ 原 8:6 比例宽再加 20px；固定宽度写法才能精确 +20px */
  min-width: 0;                    /* 防御：内部图片 / 长文本不会撑破比例 */
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-04 .area-04-01 img {
  width: 100%;                     /* 图片按列宽自适应，否则按原图尺寸撑破列宽 */
  display: block;
}
.fcdnp-area .gyhm-area-04 .area-04-01 span {
  position: absolute;              /* 参考 gyhm-area-03：遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;                  /* span 默认 inline，必须块级，width / min-height 才生效 */
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}

.fcdnp-area .gyhm-area-04 .area-04-02{
  position: relative;              /* ★ 关键：span 的定位参照 */
  flex: 1 1 0;                     /* ★ 自动吃掉剩余宽度（= 原 6 份 − 让出的 20px），无需手算 */
  min-width: 0;
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-04 .area-04-02 img {
  width: 100%;
  display: block;
}
.fcdnp-area .gyhm-area-04 .area-04-02 span {
  position: absolute;              /* 遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}
/* =====================  光影回眸 05 ===================== */
.fcdnp-area .gyhm-area-05{
  position: relative;
  margin: 20px auto 0;
  height: auto;
  max-width: 1400px;
  z-index: 10;
  text-align: center;
  display: flex;                   /* 两列布局的基础 */
  flex-wrap: wrap;
  justify-content: space-between;  /* 两端对齐：05-01 贴左、05-02 贴右 */
  gap: 20px;                       /* 间隙 20px（行/列通用） */
}
/* 2.4:1 布局：flex-grow 按比例分配"扣除 gap 后的剩余宽度" */
.fcdnp-area .gyhm-area-05 .area-05-01{
  position: relative;              /* ★ 关键：作为自己 span 的定位参照，否则 absolute 会上溯到 .fcdnp-area */
  flex: 2.4 1 0;                   /* grow=2.4（2.4:1 中的 2.4），flex-grow 支持小数 */
  min-width: 0;                    /* 防御：内部图片 / 长文本不会撑破比例 */
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-05 .area-05-01 img {
  width: 100%;                     /* 图片按列宽自适应，否则按原图尺寸撑破列宽 */
  display: block;
}
.fcdnp-area .gyhm-area-05 .area-05-01 span {
  position: absolute;              /* 参考 gyhm-area-03/04：遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;                  /* span 默认 inline，必须块级，width / min-height 才生效 */
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}

.fcdnp-area .gyhm-area-05 .area-05-02{
  flex: 1 1 0;                     /* grow=1（2.4:1 中的 1） */
  min-width: 0;
  box-sizing: border-box;
  display: flex;                   /* ★ 新增：上下布局的基础 */
  flex-direction: column;          /* ★ up 在上、down 在下 */
  gap: 20px;                       /* ★ 两块之间的纵向间距 */
}
/* 上下两块各自作为自己 span 的定位参照（缺 position:relative 会让三个 span 全叠到区域底部） */
.fcdnp-area .gyhm-area-05 .area-05-02 .area-05-02-up,
.fcdnp-area .gyhm-area-05 .area-05-02 .area-05-02-down {
  position: relative;              /* ★ 关键 */
  flex: 1 1 0;                     /* 上下平分 area-05-02 的高度 */
  min-width: 0;
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-05 .area-05-02 .area-05-02-up img,
.fcdnp-area .gyhm-area-05 .area-05-02 .area-05-02-down img {
  width: 100%;
  height: 100%;                    /* 填满各自分区（父级高度由 flex 分配确定） */
  object-fit: cover;               /* 按原比例裁切填充，不变形 */
  display: block;
}
.fcdnp-area .gyhm-area-05 .area-05-02 .area-05-02-up span,
.fcdnp-area .gyhm-area-05 .area-05-02 .area-05-02-down span {
  position: absolute;              /* 遮罩式，各自贴在各自图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}

/* =====================  光影回眸 06 ===================== */
.fcdnp-area .gyhm-area-06{
  position: relative;
  margin: 20px auto 0;
  height: auto;
  max-width: 1400px;
  z-index: 10;
  text-align: center;
  display: flex;                   /* 两列布局的基础 */
  flex-wrap: wrap;
  justify-content: space-between;  /* 两端对齐：06-01 贴左、06-02 贴右 */
  gap: 20px;                       /* 间隙 20px（行/列通用） */
}
/* 1:2.4 布局：flex-grow 按比例分配"扣除 gap 后的剩余宽度" */
.fcdnp-area .gyhm-area-06 .area-06-01{
  flex: 1 1 0;                     /* grow=1（1:2.4 中的 1） */
  min-width: 0;                    /* 防御：内部图片 / 长文本不会撑破比例 */
  box-sizing: border-box;
  display: flex;                   /* ★ 新增：上下布局的基础 */
  flex-direction: column;          /* ★ up 在上、down 在下 */
  gap: 20px;                       /* ★ 两块之间的纵向间距 */
}
/* 上下两块各自作为自己 span 的定位参照（缺 position:relative 会让两个 span 叠到区域底部） */
.fcdnp-area .gyhm-area-06 .area-06-01 .area-06-01-up,
.fcdnp-area .gyhm-area-06 .area-06-01 .area-06-01-down {
  position: relative;              /* ★ 关键 */
  flex: 1 1 0;                     /* 上下平分 area-06-01 的高度 */
  min-width: 0;
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-06 .area-06-01 .area-06-01-up img,
.fcdnp-area .gyhm-area-06 .area-06-01 .area-06-01-down img {
  width: 100%;
  height: 100%;                    /* 填满各自分区（父级高度由 flex 分配确定） */
  object-fit: cover;               /* 按原比例裁切填充，不变形 */
  display: block;
}
.fcdnp-area .gyhm-area-06 .area-06-01 .area-06-01-up span,
.fcdnp-area .gyhm-area-06 .area-06-01 .area-06-01-down span {
  position: absolute;              /* 遮罩式，各自贴在各自图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}

.fcdnp-area .gyhm-area-06 .area-06-02{
  position: relative;              /* ★ 关键：作为自己 span 的定位参照 */
  flex: 2.4 1 0;                   /* grow=2.4（1:2.4 中的 2.4） */
  min-width: 0;
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-06 .area-06-02 img {
  width: 100%;                     /* 图片按列宽自适应 */
  display: block;
}
.fcdnp-area .gyhm-area-06 .area-06-02 span {
  position: absolute;              /* 遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}
/* =====================  光影回眸 07 ===================== */
.fcdnp-area .gyhm-area-07{
  position: relative;
  margin: 20px auto 0;
  height: auto;
  max-width: 1400px;
  z-index: 10;
  text-align: center;
  display: flex;                   /* 两列布局的基础 */
  flex-wrap: wrap;
  justify-content: space-between;  /* 两端对齐：07-01 贴左、07-02 贴右 */
  gap: 20px;                       /* 间隙 20px（行/列通用） */
}
/* 1:1 布局：两块 flex-grow 相同，平分"扣除 gap 后的剩余宽度" */
.fcdnp-area .gyhm-area-07 .area-07-01 {
  position: relative;              /* ★ 关键：作为自己 span 的定位参照，否则 absolute 会上溯到 .fcdnp-area */
  flex: 1 1 0;                     /* grow=1（1:1） */
  min-width: 0;                    /* 防御：内部图片 / 长文本不会撑破比例 */
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-07 .area-07-01 img {
  width: 100%;                     /* 图片按列宽自适应，否则按原图尺寸撑破列宽 */
  display: block;
}
.fcdnp-area .gyhm-area-07 .area-07-01 span {
  position: absolute;              /* 参考 03/04/05/06：遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;                  /* span 默认 inline，必须块级，width / min-height 才生效 */
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}

.fcdnp-area .gyhm-area-07 .area-07-02 {
  position: relative;              /* ★ 关键：作为自己 span 的定位参照 */
  flex: 1 1 0;                     /* grow=1（1:1） */
  min-width: 0;
  box-sizing: border-box;
}
.fcdnp-area .gyhm-area-07 .area-07-02 img {
  width: 100%;
  display: block;
}
.fcdnp-area .gyhm-area-07 .area-07-02 span {
  position: absolute;              /* 遮罩式，浮在图片底部 */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  background-color: rgba(75, 72, 72, 0.6);
}

/* =====================  总结 ===================== */
.zongjie-area {
  position: relative;        /* ★ 改：absolute → relative，排在前言块下方 */
  margin: 40px auto;        /* ★ 上 40px 与上方内容留白，下 40px 与下方 .footer 留出间距，左右 auto 水平居中 */
  z-index: 10;
  width: calc(100%);  /* ★ 改：窄屏两侧各留 20px（原来是 100% 贴满屏幕） */
  max-width: 1400px;         /* ★ 新增：与 .container 的 1400px 对齐 */
  box-sizing: border-box;    /* ★ 新增：让左右各 20px 内边距算进宽度，避免再溢出 40px */
  height: auto;              /* ★ 改 367px → auto：两列内容总高远超 367px，固定会溢出 */
  display: flex;             /* ★ 新增：一行两列的基础（原来没开 flex，comm 上的 flex:0 0 全是死代码） */
  flex-wrap: wrap;           /* ★ 新增：标题一行、左右两列一行 */
  justify-content: space-between;  /* ★ 两端对齐：左列贴左、右列贴右 */
  gap: 20px;                 /* ★ 新增：行间距 / 列间距都是 20px */
  background-color: #FFF7E8;
}
.zongjie-area .zongjie-area-tit {
  margin: 10px auto 0;
  margin-top: 40px;
  min-height: 72px;
  color: #854646;
  font-size: 50px;
  text-align: center;
}
.zongjie-content {
  margin-top: 20px;
  height:auto;
  min-height: 200px;
  width:100%;
  padding: 0 20px;
}
.zongjie-area p {
  height: auto;
  color: #383838;
  font-size: 20px;
  line-height: 30px;
  text-indent: 2em;
  text-align: justify; 
}
/* ===================== 脚文件 ===================== */
/* footer */
.footer-links-tit{position: absolute; left: 0; width: 90px; line-height: 45px;}
.footer-links .hd{padding: 15px 0; border-bottom: 1px solid #C9C9C9;}
.footer-links .hd ul{margin: 0 -5px; padding-left: 90px;}
.footer-links .hd ul li{float: left; width: 20%; /*width: 16.666667%;*/}
.footer-links .hd ul li a{position: relative; z-index:5; display: block; text-align: center; margin: 0 5px; line-height: 41px; height: 45px; border-radius: 4px; font-size: 1em;}
.footer-links .hd ul li a span{max-width: 80%; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
.footer-links .hd ul li.hs a:after{content: ''; margin-top: 3px; width: 12px; height:10px; background: url(../images/public/footer_links_arrow.png) no-repeat; background-size: 100% 100%; margin-left: 20px; transition: .3s all;}
.footer-links .hd ul li.hs a:after,
.footer-links .hd ul li a span{display: inline-block; vertical-align: middle;}
.footer-links .hd ul li.on a:after{transform: rotate(-180deg); background-image: url(../images/public/footer_links_arrow_blue.png);}
/* .footer-links .hd ul li.hs.on a:after{background-image: url(../images/public/footer_links_arrow_blue.png);} */
.footer-links .hd ul li.hs.on a{color: #1658A0;}

.footer-links .bd ul{padding-top:14px; margin: 0 -5px; overflow: hidden; display: none;}
.footer-links .bd ul li{float: left; width: 20%;}
.footer-links .bd ul li h4{margin: 0 5px; margin-bottom: 2px; font-weight: normal; line-height:1.6em; overflow:hidden; vertical-align:top;}
.footer-links .bd ul li a{display: block; padding:10px; background:#f5f5f5; border-radius: 5px; text-align: center; color: #888; max-width:100%; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; transition: .3s all;}
.footer-links .bd ul li span{display: block; padding:10px; background:#f5f5f5; border-radius: 5px; text-align: center; color: #888; max-width:100%; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; transition: .3s all;}
.footer-links .bd ul li a:hover{background: #F0F8FF; color: #1658A0;}

/* .footer{font-size: .875em;} */
.footer {background-color: #AED157;}
.footer .container{position: relative; min-height: 100px;}
.footer a{color: #fff;}
.footer a:hover{text-decoration: underline;}
.footer-nav .split{margin: 0 15px; opacity: .6;}
.footer-txt{padding:20px 0 20px 40px; margin-left: 414px; color: #fff; line-height: 2.375;}
.footer-copyright .beian{padding-left: 25px; display: inline-block; background: url(../images/public/beian.png) no-repeat left center;}
.footer-copyright .mar{margin-right:15px;}
.footer-copyright .ipv6{font-style: normal; display: inline-block; padding: 0 5px; line-height: 20px; border: #3374ac 1px solid; border-radius: 2px; margin-left: 5px;}
.footer-wzbs{position: absolute; left: 0; top: 50%; margin-top: -40px; width: 414px;}
.footer-wzbs:after{content: ''; width: 1px; position: absolute; right: 0; height: 95px; margin: auto 0; background: #C9C9C9; opacity: 0.5;}
.footer-wzbs img{vertical-align: middle;}
.footer-wzbs .jiucuo{margin-left: 5px;}
.footer-wzbs .slh{height: 55px; background: #fff; border-radius: 2px; margin-left: 15px;}
.footer-copyright a,
.footer-copyright span{display: inline-block;}

@media (max-width: 1480px) {
	.footer-links .hd ul li a{font-size: 1em;}
}
@media (max-width: 1280px) {
	.footer-links{padding: 10px 0;}
	.footer-links-tit{display: none;}
	.footer-links .hd ul{padding-left: 0;}
	.footer-links .bd ul{padding-top: 10px;}
	.footer-links .hd ul li,
	.footer-links .bd ul li{width: 33.333333%;}
	.footer-links .hd ul li a span{display: block; text-align: left; margin-right: 48px; margin-left: 20px;}
	.footer-links .hd ul li.hs a:after{position: absolute; margin-top: -3px; right: 20px; top: 50%;}
	.footer-links .bd ul li a{text-align: left; padding-left: 20px; padding-right: 20px;}

	.footer{padding-bottom: 20px;}
	.footer-wzbs{position: static; margin-top: 0; text-align: center; width: auto;}
	.footer-txt{padding:30px 0 10px; text-align: center; margin-left: 0;}
	.footer-wzbs:after{display: none;}
	
}

@media (max-width: 768px) {
	.footer-links .hd ul li, .footer-links .bd ul li{width:50%;}
}
@media (max-width: 480px) {
	.footer-copyright{line-height: 2;}
	.footer-copyright .split{margin: 0 10px;}

	.footer-links > .container{margin: 0;}
	.footer-links .hd ul li, .footer-links .bd ul li{width: 100%;}
	.footer-links .hd ul{margin: 0;}
	.footer-links .hd ul li a{margin: 0;}
	.footer-links .hd ul li a span{margin-left: 10px;}
	.footer-links .hd ul li.hs a:after{right: 10px;}
	.footer-links .hd ul li.hs.on a{background: #F0F8FF;}
	.footer-links .bd ul li a{padding-left: 10px; padding-right: 10px;}
}



/* ===================== 响应式 ===================== */
.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;
  }

  
  
}

@media (max-width:1400px) {

  .container,
  .container[class*="width-"] {
    width: 970px;
  }
  
}

@media (max-width:992px) {

  .container,
  .container[class*="width-"] {
    width: 750px;
  }
  
  
}

@media (max-width:768px) {

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

  

}

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

.container {
  max-width: 1920px;
}