* {
  box-sizing: border-box;
}

body{
  position: relative;
}
.container:after,
.container:before {
  display: table;
  content: "";
}

.container:after {
  clear: both;
}

.container {
  width: 1400px;
  margin-right: auto;
  margin-left: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: visible;
}

.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{padding-left: 15px; padding-right: 15px;} */
  .container,
  .container[class*="width-"] {
    width: 750px;
  }
}

@media (max-width:768px) {

  .container,
  .container[class*="width-"] {
    width: auto;
  }
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container {
  max-width: 1920px;
}

li:hover a,
li:hover h5 {
  color:#316ABC !important;
}

.img img {
  transition: all .3s;
}

li:hover .img img {
  transform: scale(1.03);
}


/* 头部 */
.xfjdyy-header {
  width: 100%;
}

.xfjdyy-header .header-bg {
  width: 100%;
}

.xfjdyy-header .header-bg img {
  width: 100%;
  display: block;
}

.xfjdyy-header .logo {
  position: absolute;
  top: 25px;
  width: 100%;
  display: flex; /* 新增：flex 布局 */
  justify-content: center;  /* 新增：水平居中 */
}

.xfjdyy-header .logo .container {
  width: auto;  /* 容器不再占满 1400px */
  margin: 0;    /* 取消 margin:auto */
}

.xfjdyy-header .logo a {
  width: 256px;
  display: inline-block;
}

.xfjdyy-header .logo a img {
  width: 100%;
}

/*头部文字内容*/
.xfjdyy-header  .title_one {
  position: absolute;
  top: 120px;
  width: 100%;
  height: 84px;
	font-size:60px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

/*头部与主体过度模块*/
.xfjdyy-header-main{
  position: relative;
  margin: 0 auto;
  width: 1180px;
  max-width: 100%;
  min-height: 144px;
  margin-top: -560px;
  background: url(../images/zhuti_bg_one.png) center center no-repeat;
  background-size: 100% 100%;
}

/* 主体内容 */
.xfjdyy-main {
  position: relative;
  margin: 0 auto;
  width:1366px;  /* 主体模块主轮廓1290px，内部轮廓1230px */
  max-width: 100%;
  height: 1956px;
  margin-top: -140px;
  background-color:#267DDE;
  background: url(../images/zhuti_main_bg.png) center center no-repeat;
  background-size: 100% 100%;
}
.xfjdyy-main .xfjdyy-from{
  position: relative;
  top: 80px;
  margin: 0 auto;
  width:1230px;
  max-width: 100%;
  background: url(../images/from-bg.png) center center no-repeat;
  background-size: 100% 100%;
  padding: 40px 0 40px;
}
/*表单s*/
.from-list .form-title {
  font-size: 22px;               /* ★ 与页面说明区标题（from-shuom .title 22px）同级，比表单控件大一级形成层级 */
  line-height: 44px;             /* ★ 与表单控件行高一致（input/select/btn 均为 44px） */
  color: #146BB8;                /* ★ 与表单字段文字同色（ul 的蓝色） */
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
.from-list {
  width:894px;
  min-height: 893px;
  margin: 0 auto;
}
.from-list  ul {
  width:894px; 
  font-size: 18px;
  color: #146BB8;
}
.from-list  ul li {
  width:298px;
  height: 44px;
  margin-right: 10px;
  line-height: 44px;
  margin-top: 20px;
  text-align: right;
  float: left; 
}
.from-list  ul li select{
  float: left;
  width: 202px;
  height: 44px;
  font-size: 18px;
  line-height: 44px;
  color: #BFCDD9;
  border: 1px solid  #74A6E3;
  padding: 10px; /* 增加内边距，让文字不贴边 */
  border-radius: 4px; /* 增加一点圆角，更美观 */
  outline: none; /* 去除点击时的默认蓝色高亮边框 */
}
.from-list  ul li select option{
  width: 180px;
  height: 44px;
  color: #BFCDD9;
}
.from-list  ul li input{
  float: left;
  width: 620px;
  height: 44px;
  font-size: 18px;
  line-height: 44px;
  color: #BFCDD9;
  border: 1px solid  #74A6E3;
  padding: 10px; /* 增加内边距，让文字不贴边 */
  border-radius: 4px; /* 增加一点圆角，更美观 */
  outline: none; /* 去除点击时的默认蓝色高亮边框 */
}
input::placeholder{
  color: #BFCDD9;
}
input::-webkit-input-placeholder {
  color: #BFCDD9;
}
input::-moz-placeholder {
  color: #BFCDD9;
}
input:-ms-input-placeholder {
  color: #BFCDD9;
}

.from-list  ul li input.short-input{
  float: left;
  width: 202px;
  height: 44px;
  font-size: 18px;
  line-height: 44px;
  color: #BFCDD9;
  border: 1px solid  #74A6E3;
  padding: 10px; /* 增加内边距，让文字不贴边 */
  border-radius: 4px; /* 增加一点圆角，更美观 */
  outline: none; /* 去除点击时的默认蓝色高亮边框 */
}
.from-list  ul li textarea{
  float: left;
  width: 620px;
  height: 136px;
  font-size: 18px;
  line-height: 44px;
  color: #BFCDD9;
  border: 1px solid  #74A6E3;
  padding: 10px; /* 增加内边距，让文字不贴边 */
  border-radius: 4px; /* 增加一点圆角，更美观 */
  outline: none; /* 去除点击时的默认蓝色高亮边框 */
}
.from-list  ul li.long-li {
  width:576px;
  height: 44px;
  line-height: 44px;
  float: left; 
}
.from-list  ul li.short-li {
  width:190px;
  height: 44px;
  line-height: 44px;
  float: left; 
}
.from-list  ul li.shortg-li{
  width:140px;
  height: 44px;
  line-height: 44px;
  float: left; 
}
.btn-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
}

input.btn{
  width: 300px;
  height: 48px;
  font-size: 18px;
  color: #fff;
  line-height: 48px !important;
  min-width: 300px;
  border-radius: 8px; /* 增加一点圆角，更美观 */
  border: 0px solid #2A82E4;
  background-color: #2A82E4;
}
/*表单end*/

/* ★ 响应式：1400px 以下表单自适应，保持一行多列 */
@media (max-width: 1400px) {
  .from-list,
  .from-list ul {
    width: 100%;                    /* ★ 固定 894px → 100%：跟随容器（1230px → 970px → 750px）缩放 */
    box-sizing: border-box;
    padding: 0 20px;
  }
  /* 各类 li 按桌面像素占比转百分比，float 多列结构不变 */
  .from-list ul li {                /* 字段名标签：298/894 ≈ 33% */
    width: 33%;
    box-sizing: border-box;
  }
  .from-list ul li.short-li {       /* 短输入：190/894 ≈ 21% */
    width: 21%;
  }
  .from-list ul li.shortg-li {      /* 短标签：140/894 ≈ 15% */
    width: 15%;
  }
  .from-list ul li.long-li {        /* 长输入：576/894 ≈ 64% */
    width: 64%;
  }
  /* 输入控件不再写死宽度（620px/202px），跟随所属 li 缩放。
     ★ input.short-input 必须带上：桌面规则是三段类名，特异性比 .from-list ul li input 高，
       不补上它的 width:202px / float:left 会压过这里的覆盖 */
  .from-list ul li input,
  .from-list ul li input.short-input,
  .from-list ul li select,
  .from-list ul li textarea {
    width: 100%;
  }
  /* 提交按钮固定 300px 仍放得下，不改 */
}

/* ★ 手机端（≤768px）：单列堆叠。百分比方案在极窄屏失效——
   15% 的短标签（约 60px）放不下「手机号码」等文字，换行后溢出固定 44px 高的 li，
   与下一行 float 元素重叠错乱。float: none 让每个 li 独占一行，彻底规避。 */
@media (max-width: 768px) {
  .from-list ul li,
  .from-list ul li.short-li,
  .from-list ul li.shortg-li,
  .from-list ul li.long-li {
    width: 100%;                  /* 独占一行 */
    float: none;                  /* ★ 关闭浮动 → 块级堆叠，不再有行内挤压 */
    height: auto;                 /* ★ 标签文字换行时 li 跟随变高，不再溢出 */
    line-height: 36px;
    text-align: left;             /* 单列后标签左对齐（右对齐会让文字贴到最右边） */
    margin-right: 0;
    margin-top: 12px;
  }
  .from-list ul li input,
  .from-list ul li input.short-input,   /* ★ 同上：压过桌面 short-input 的 float:left / width:202px */
  .from-list ul li select,
  .from-list ul li textarea {
    float: none;
    width: 100%;
  }
  input.btn {
    min-width: 0;                 /* ★ 手机上 300px 固定宽可能超出，允许收缩 */
    width: 80%;
  }
}
/*表单说明s*/
.from-shuom-one {
  width:1230px;
  min-height: 580px;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  background: url(../images/sub_shuom.png) center center no-repeat;
}

.from-shuom-one .title{
  width:300px;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  color: #383838;
  padding-left: 66px;
  background-image: url('../images/icon_01.png'); /* 图片路径 */
  background-repeat: no-repeat;            /* 不重复平铺 */
  background-position: left center;        /* 位置：左边，垂直居中 */
  background-size: 45px 41px;              /* 控制小图的大小（按需调整） */
}
.from-shuom-one p {
  width:1140px;
  font-size: 20px;
  line-height: 48px;
  padding-left: 66px;
}
.from-shuom-two {
  width:1230px;
  min-height: 260px;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;            /* 控制小图的大小（按需调整） */
  background: url(../images/sub_shuom2.png) center center no-repeat;
}
.from-shuom-two .title{
  width:300px;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  color: #383838;
  padding-left: 66px;
  background-image: url('../images/icon_02.png'); /* 图片路径 */
  background-repeat: no-repeat;            /* 不重复平铺 */
  background-position: left center;        /* 位置：左边，垂直居中 */
  background-size: 45px 41px; 
}
.from-shuom-two p {
  width:1140px;
  font-size: 20px;
  line-height: 48px;
  padding-left: 66px;
}


/*表单说明end*/



