@charset "utf-8";
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        box-sizing: border-box;
    }
    h3,ul,li,ol,a { list-style: none; text-decoration: none; }
    body {
        font-family: 'Microsoft YaHei', sans-serif;
    }
html {
  font-size: 16px; /* 1rem = 16px */
}

/* 小屏幕（手机）：缩小根元素字体，所有rem字体同步缩小 */
@media screen and (max-width: 768px) {
  html {
    font-size: 14px; /* 1rem = 14px */
  }
}

/* 大屏幕（电脑）：放大根元素字体，所有rem字体同步放大 */
@media screen and (min-width: 1200px) {
  html {
    font-size: 18px; /* 1rem = 18px */
  }
}


a { text-decoration: none; list-style: none; text-decoration: none;  }


 /* 悬吊图片容器自适应响应式 */
 .index_main1_box { width: 100%; display: flex; justify-content: center; background: url(../images/index_tpdbj.png) no-repeat center top; background-size: cover;}
        .img-container {
            width: 100%;
            max-width: 1600px;
            display: flex;
            justify-content:space-between;
            align-items: flex-start;
            flex-wrap: wrap;
        
            /* 兼容IE:flex布局：添加浏览器前缀（可选，增强兼容性） */
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            padding-bottom: 260px;
        }

        /* 图片项：独立容器，保证吊线与图片一对一绑定 */
        .img-item {
            padding: 0px 1%;
            width: 20%;
            min-width: 50px;
            max-width: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            /* 兼容IE:flex布局 */
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -webkit-flex: 1;
       
        }

        /* 吊线：精致质感，最小高度40px，兼容IE内核（放弃CSS变量，直接指定高度） */
        .hang-line {
            width: 1px; /* 更纤细，更精致 */
            background-color: #efeaeb;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            /* 兼容IE：添加transform前缀 */
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.09); /* 增强立体感 */
            border-radius: 1px; /* 线的圆角，更细腻 */
        }

        /* 奇数位吊线：直接设置高度40px（最小高度，确保连接图片） */
        .img-item:nth-child(2n+1) .hang-line {
            height: 80px; /* 明确高度，替代CSS变量动态计算，兼容IE */
        }

        /* 偶数位吊线：直接设置高度140px（40px+100px，确保连接下移后的图片） */
        .img-item:nth-child(2n) .hang-line {
            height: 180px; /* 明确高度=最小高度+偶数图片下移距离，兼容IE */
        }

        /* 自适应图片：质感拉满，基础动画配置 */
        .hang-img {
            width: 100%;
            height:100%;
            object-fit: cover;
            position: relative;
            top: 80px;
   

            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); /* 顺滑过渡 */
            /* 兼容IE：添加transition前缀 */
            -webkit-transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            -moz-transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            -ms-transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* 奇数位图片：向上跳动（默认正向动画）+ 错落延迟 */
        .img-item:nth-child(2n+1) .hang-img {
            animation: bounce-up 2.2s ease-in-out infinite; /* 向上跳动动画 */
            /* 兼容IE：添加animation前缀 */
            -webkit-animation: bounce-up 2.2s ease-in-out infinite;
            -moz-animation: bounce-up 2.2s ease-in-out infinite;
            -ms-animation: bounce-up 2.2s ease-in-out infinite;
        }
        .img-item:nth-child(1) .hang-img {
            animation-delay: 0s;
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            -ms-animation-delay: 0s;
        }
        .img-item:nth-child(3) .hang-img {
            animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
            -ms-animation-delay: 0.4s;
        }

        /* 偶数位图片：向下跳动（反向动画）+ 错落延迟 + 下移100px */
        .img-item:nth-child(2n) .hang-img {
            top: 180px; /* 直接写死40px+100px，放弃calc()复杂计算，兼容IE */
            animation: bounce-down 2.2s ease-in-out infinite; /* 向下跳动动画（反向） */
            /* 兼容IE：添加animation前缀 */
            -webkit-animation: bounce-down 2.2s ease-in-out infinite;
            -moz-animation: bounce-down 2.2s ease-in-out infinite;
            -ms-animation: bounce-down 2.2s ease-in-out infinite;
        }
        .img-item:nth-child(2) .hang-img {
            animation-delay: 0.2s;
            -webkit-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            -ms-animation-delay: 0.2s;
        }
        .img-item:nth-child(4) .hang-img {
            animation-delay: 0.6s;
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            -ms-animation-delay: 0.6s;
        }

        /* 奇数位：向上跳动动画（不对称关键帧，更自然） */
        @keyframes bounce-up {
            0% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(-14px); /* 向上大幅跳动 */
            }
            50% {
                transform: translateY(0);
            }
            75% {
                transform: translateY(-7px); /* 向上小幅回弹 */
            }
            100% {
                transform: translateY(0);
            }
        }
        /* 兼容IE：添加@keyframes前缀 */
        @-webkit-keyframes bounce-up {
            0% {
                -webkit-transform: translateY(0);
            }
            25% {
                -webkit-transform: translateY(-14px);
            }
            50% {
                -webkit-transform: translateY(0);
            }
            75% {
                -webkit-transform: translateY(-7px);
            }
            100% {
                -webkit-transform: translateY(0);
            }
        }

        /* 偶数位：向下跳动动画（与奇数反向，视觉互补） */
        @keyframes bounce-down {
            0% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(14px); /* 向下大幅跳动（与奇数反向） */
            }
            50% {
                transform: translateY(0);
            }
            75% {
                transform: translateY(7px); /* 向下小幅回弹（与奇数反向） */
            }
            100% {
                transform: translateY(0);
            }
        }
        /* 兼容IE：添加@keyframes前缀 */
        @-webkit-keyframes bounce-down {
            0% {
                -webkit-transform: translateY(0);
            }
            25% {
                -webkit-transform: translateY(14px);
            }
            50% {
                -webkit-transform: translateY(0);
            }
            75% {
                -webkit-transform: translateY(7px);
            }
            100% {
                -webkit-transform: translateY(0);
            }
        }

        /* 鼠标悬停：强化交互，突出焦点 */
        .hang-img:hover {
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12); /* 加深阴影 */
            transform: translateY(-8px); /* 整体上移，增强反馈 */
            /* 兼容IE：暂停动画+transform前缀 */
            -webkit-transform: translateY(-8px);
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
            border-color: rgba(255, 255, 255, 1); /* 边框高亮 */
        }


/*banner 开始*/
     /* 基础样式 */
        .banner-container {
            position: relative;
            width: 100%;
            height: 70vh;
            overflow: hidden;
            _height: 600px; /* IE6固定高度，避免vh单位问题 */
        }
        .banner-list {
            position: relative;
            width: 100%;
            height: 100%;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .banner-item {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
            *display: none;
        }
        .banner-item.active {
            display: block;
            *display: block;
        }
        .banner-item img {
            width: 100%;
            height: 100%;
            border: 0;
            object-fit: cover;
        }
        .banner-control {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            z-index: 10;
        }
        .banner-dots {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            padding: 5px;
            background-color: #333;
            background-color: rgba(0,0,0,0.5);
            border-radius: 20px;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
        }
        .banner-dots span {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin: 0 2px;
            border-radius: 50%;
        }
        .banner-dots span.active {
            background-color: #fff;
            color: #333;
        }
        .banner-arrows {
            position: absolute;
            top: 50%;
            width: 100%;
            z-index: 10;
        }
        .banner-arrow {
            position: absolute;
            width: 40px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #333;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            margin-top: -30px; /* 垂直居中修正 */
        }
        .banner-arrow-prev {
            left: 20px;
        }
        .banner-arrow-next {
            right: 20px;
        }

        /* 现代浏览器动画 - 优化过渡时间 */
        .modern .banner-item {
            opacity: 0;
            display: block !important;
            transform: scale(1.1);
            transition: opacity 0.8s ease-in-out, transform 4s ease-out; /* 减少过渡时间 */
            z-index: 0;
        }
        .modern .banner-item.active {
            opacity: 1;
            transform: scale(1);
            z-index: 1;
        }

        /* IE兼容模式专用样式（解决跳动核心） */
        .ie-compat .banner-item {
            /* 禁用缩放动画，改用淡入淡出避免跳动 */
            filter: alpha(opacity=0);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            transition: none !important;
            transform: none !important;
        }
        .ie-compat .banner-item.active {
            filter: alpha(opacity=100);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        }
        .ie-compat .banner-list {
            /* 固定容器尺寸，避免重绘时尺寸变化 */
            height: 100% !important;
            overflow: hidden;
        }
        
        /* 加载指示器 */
        .loading-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(0,0,0,0.7);
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 100;
        }

/*banner 结束*/

/* 搜索 开始 */

.search-box { width: 100%; padding: 30px 0px; display: flex; justify-content:center; border-bottom: 5px solid #af0e20; }
.search {
    width: 100%;  
    max-width: 1400px; 
    font-size: 16px;
    letter-spacing: 1px;
}


.search-form  {width: 100%; display: flex; flex-flow: row nowrap;  justify-content: space-between;}

.search-srk { 
    border: 1px solid #d3d3d3;
    width: 85%; 
    box-sizing: border-box; 
    height: 50px; 
    padding: 0px 15px; 
    line-height: 50px; 
    color: #000000;
    font-size: 16px; 
    border-radius: 35px;
    outline: 0;
    background: none;
    font-family: Microsoft YaHei;
    
}

.search-srk  placeholder {color:#1b1b1b;}

.search-submit { 
    width: 152px; 
    height: 50px; 
    border: 0;
    outline: 0;
   border-radius: 30px;
    background:#af0e20 url(../images/fdj.png) no-repeat 30px center; 
    padding-left: 30px;
    font-size: 22px;
    letter-spacing: 3px;
    color: #fff;
    cursor: pointer;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
}
/*搜索结束*/


 .index_main3_box { width: 100%; display: flex; justify-content: center;}
 .ksdh_box { width: 100%; max-width: 1600px; }
 .ksdh_titl { width: 100%; height: 60px; display: flex; font-family: "微软雅黑";  flex-flow: row nowrap; justify-content: space-between; align-items: center; }
 .ksdh_titl h3 { font-size: 30px; color: #ae0001;}
 .index_more a { font-size: 16px; color:#606060;}
 .ksdhlist { width: 100%; margin-top: 50px;}
 .ksdhlist img { width: 100%;}
 .index_main4_box { width: 100%; max-width: 1600px; margin: 70px auto 100px; display: flex; justify-content: center;}
 .index_fyt { width: 100%; height: 100%; max-height: 153px; max-width: 1600px; } 
 .index_fyt img { width: 100%; }



 /*数说我院开始*/
 .index_main5_box { width: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; background: url(../images/index_sswydbj.png) no-repeat center top; background-size: cover; }
 .sswy_box { width: 100%; max-width:95%; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; }
 .sswy_bt { width: 100%; max-width:396px; max-height: 53px; margin-bottom: 95px; display: flex; justify-content: center;}
 .sswy_bt img { width: 100%;}
  /* 核心容器：底对齐基准（IE兼容固定高度） */
    .data-card-container {
      width: 100%;  
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0 auto;
      /* IE兼容：用padding代替gap（gap不兼容IE） */
      padding: 0 10px;
      /* 固定高度=底对齐基准（IE支持） */
      height: 330px;
      position: relative;
      /* 可视化基准线：验证底对齐 */

      overflow: hidden;
    }

    /* 单个卡片：IE兼容的Flex+定位 */
    .data-card {
      width: 19%; /* IE不兼容calc，改用固定百分比 */
      min-width: 200px;
      display: inline-block; /* IE兼容：替代flex的降级写法 */
      vertical-align: top;
      position: relative;
      /* 必须100%高度，确保竖线到容器底部 */
      height: 100%;
      /* IE兼容：模拟flex align-items: center */
      line-height: 800px;
    }

    /* 奇数卡片下移（IE兼容写法） */
    .data-card:nth-child(odd) {
      margin-top: 78px;
    }

    /* 图标+文字容器：模拟flex居中（IE兼容） */
    .card-inner {
      display: inline-block;
      vertical-align: middle;
      line-height: normal;
      display: flex;
      align-items: center;
      /* justify-content: center; */
      gap: 15px;
    }

    /* 图标容器：IE兼容的正圆写法（无CSS3属性） */
    .icon-wrap {
      /* 宽高严格相等=正圆 */
      border: 1px dashed #ae0001;
      border-radius: 50%; /* IE兼容：用px代替50%（效果一致） */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ae0001;
      font-size:1.375rem;
      /* IE兼容：禁止压缩 */
      flex-shrink: 0;
      position: relative;
      z-index: 2; /* 高于竖线，防超边 */
      /* 彻底防超边：隐藏图标内的任何元素 */
      overflow: hidden;
    }

    .fa-solid { padding: 20px;}
    .fa-solid img { width: 100%; max-width: 80px;}
    /* 竖线：IE兼容写法（无CSS3属性，精准对齐） */
    .data-card::after {
      content: "";
      position: absolute;
      /* 1. 水平居中：图标中心（35px），IE支持 */
      left:60px;
      /* 2. 顶端：图标底部（70px），无缝衔接 */
      top: 125px;
      /* 3. 底端：容器底部，精准对齐（IE支持top+bottom同时设置） */
      bottom: 0;
      /* 4. 样式：IE兼容，无CSS3属性 */
      width: 1px;
      background-color: #ae0001;
      z-index: 1;
      /* IE兼容：强制高度≥100px（用条件判断降级） */
      min-height: 100px;
    }

    /* 文字样式（IE兼容） */
    .text-wrap {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
    }
    .data-num {
      font-size: 1.75rem;
      font-weight: 400;
      color: #ae0001;
      margin-bottom: 8px;
    }
    .data-desc {
      font-size: 1.25rem;
      color: #ae0001;
      font-family: "微软雅黑";
      letter-spacing: 1px; 
      margin-left: 15px;
      max-width: 181px;
    }

    
    footer { width: 100%; display: flex; justify-content: center; background:rgba(165,10,9,0.9);}
    .index_foot { width: 100%; max-width: 1600px; display: flex; align-items: center; justify-content:space-between; padding: 30px 0px; }
    .index_footbq { width: 50%; line-height: 35px; color:#fff; padding-left: 10px;}
    .foot_ewm { width: 40%;}
    .foot_ewm ul { width: 100%; display: flex; justify-content: flex-end; align-items: center;}
    .foot_ewm ul li { max-width:40%; margin-left: 30px;}
    .foot_ewm ul li img { width: 100%; height: 100%; max-width:111px; max-height: 111px;}
    .foot_ewm ul li p { color: #fff; text-align: center; line-height: 30px;}


    /* 响应式适配（IE兼容，仅支持媒体查询） */
    @media (max-width: 1024px) {
     .data-card { width: 31%; }
     .data-card-container { height:auto; } 
     .data-card:nth-child(odd) {  margin-top: 0px; }
     .data-card { margin-bottom: 111px;}
     .fa-solid img { max-width: 60px;}
       /* 竖线：IE兼容写法（无CSS3属性，精准对齐） */
    .data-card::after {
      content: "";
      position: absolute;
      top:102px;
      left:50px
    }
    .sswy_bt img {
    width: 100%;
    max-width: 245px;
    }
   .img-container { width: 90%; }
   .banner-container { width: 100%; height: 30vh;}
   .index_foot { width: 100%; max-width: 90%;}
   .search { width: 90%;}


    }
    @media (max-width: 768px) {
      .data-card { width: 48%; }
      /* .data-card-container { height: 600px; } */
      .content-item { display: flex; flex-flow: column wrap;}
      .content-item_imgbox { width: 100%;}
      .content-item-listbox  { width: 100%;}
    }
    @media (max-width: 480px) {
      /* .data-card { 
        width: 100%;
        margin: 0 auto 40px !important;
        height: auto;
        line-height: normal;
      }   */
      .data-card::after { width: 0px;}
    
      .data-card { margin-bottom: 50px;}

      .data-card-container { height: auto; border-bottom: none; }
      .data-card::after {
        bottom: auto;
        height: 200px; /* IE兼容：固定高度代替max */
      }
      .sswy_bt { margin-bottom: 60px;}

    }
/*数说我院结束*/