@charset "utf-8";
/* eyoucms.com 易优CMS -- 好用,免费,安全 */
:root {
    --primary-blue: #004a99;   /* 工业蓝 */
    --eco-green: #28a745;      /* 环保绿 */
    --industrial-dark: #333333; /* 深灰黑 */
}
/* Style Reset*/
body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, h2, font { 
    margin: 0; padding: 0; border: 0; 
}
ul, li { list-style: none; }
img { border: 0; vertical-align: middle; max-width: 100%; }
body { color: #333; font-size: 14px; font-family: "Microsoft Yahei", Arial; background: var(--bg-light); line-height: 1.6; }
a { text-decoration: none; color: #333; transition: 0.3s; }
.fl { float: left; } .fr { float: right; }
.clear { clear: both; height: 0; overflow: hidden; }
.center{ text-align:center;}
.center img{ border:1px solid #ccc;}
/* fixed */
.fixed{position:fixed;width:55px;height:212px;right:25px;bottom:50px;_position: absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));z-index:99999;}
.fixed a{display:block;width:55px;height:53px;}
.barbook{background:url(../img/fixed.jpg) 0 0 no-repeat;}
.barbook:hover{background-position:-54px 0;}
.fixed a.codepic{background:url(../img/fixed.jpg) 0 0 no-repeat;background-position:0 -53px;height:52px;}
.fixed a.codepic:hover{background-position:-54px -53px;}
.fixed div{position:relative;}
.fixed a.backup{background:url(../img/fixed.jpg) 0 0 no-repeat;background-position:0 -158px;height:52px;}
.fixed a.backup:hover{background-position:-54px -158px;height:53px;}
.fixed div img{position:absolute;left:-196px;width:196px;height:196px;top:-106px;display:none;}
/*header*/
body { color: #333; font-size: 14px; font-family: "Microsoft Yahei", Arial; background: #fff; }
a { color: #333; }
.header { 
    width: 100%; min-width: 1004px; height: 80px; padding-top: 10px; 
    position: relative; z-index: 9; background: #fff;
    border-bottom: 3px solid var(--primary-blue); 
}
.logo { float: left; display: inline; padding-left: 20px; }
.headerr{ float:right; width:366px;}
.tel{ float:right;width:380px;}
.tel span,.tel p{ width:348px;display:block; float:right; text-align:right;}
.tel span { 
    background: none; /* 去掉原本的 tel.gif */
    font: bold 24px/30px 'Microsoft Yahei'; 
    color: var(--primary-blue); /* 红色变蓝色 */
}
.tel p { color: var(--eco-green); font: 26px/36px 'Impact'; }
/* --- 修复公告栏与搜索框布局 (开始) --- */

/* 1. 公告栏黑色背景条 */
.notice {
    width: 100%;
    height: 60px; /* 固定高度 */
    background: #262626 !important;
    overflow: hidden;
    clear: both;
}

/* 2. 主体内容区域：强制 Flex 横向排列 */
.notice .main {
    width: 1004px;
    height: 100%;
    margin: 0 auto;
    display: flex !important;    /* 开启 Flex 布局 */
    align-items: center !important; /* 垂直居中对齐 */
    flex-wrap: nowrap !important;   /* 禁止换行 */
}

/* 清除所有子元素的浮动，防止干扰 */
.notice .main > * {
    float: none !important;
    display: block;
}

/* 3. 标题 "网站公告" */
.notice .main b {
    flex: 0 0 auto; /* 固定宽度，不伸缩 */
    color: #fff;
    font-size: 16px;
    margin-right: 20px; /* 与滚动文字的间距 */
    white-space: nowrap;
}

/* 4. 滚动字幕区域 */
.notice .main marquee {
    flex: 1 1 auto; /* 自动占据中间剩余的所有空间 */
    margin-right: 30px; /* 与搜索框的间距 */
    color: #fff;
    height: 60px;
    line-height: 60px;
}
.notice .main marquee p {
    margin: 0; 
    padding: 0;
    display: inline; /* 确保文字在一行显示 */
    color: #fff;
}

/* 5. 搜索框容器 */
.search {
    flex: 0 0 400px; /* 固定宽度 400px，不伸缩 */
    width: 400px !important;
    height: 36px !important;
    background: #fff !important; /* 强制白色背景 */
    display: flex !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* 搜索表单 */
.search form {
    width: 100%;
    height: 100%;
    display: flex !important; /* 表单内部也用 Flex */
    margin: 0; padding: 0;
}

/* 搜索输入框 */
.search .text {
    flex: 1 !important; /* 占据剩余空间 */
    height: 36px !important;
    line-height: 36px !important;
    border: none !important;
    padding: 0 15px !important;
    font-size: 14px;
    color: #333 !important; /* 文字黑色 */
    background: transparent !important;
    outline: none;
}

/* 搜索按钮 */
.search .button {
    flex: 0 0 80px !important; /* 固定宽度 80px */
    width: 80px !important;
    height: 36px !important;
    background: #28a745 !important; /* 环保绿 */
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    font-size: 16px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 36px; /* 让文字垂直居中 */
    text-align: center;
}

.search .button:hover {
    background: #218838 !important;
}

.select{float:left;width:82px; margin-left:3px; display:inline;background:url(../img/select.gif) left top no-repeat; position:relative}
.select select{margin:5px auto;width:80px;}
div.selectbox-wrapper{border: #d4d4d4 1px solid; overflow:hidden;width:80px; *left:0;position: absolute;background: #fff;text-align:left;*margin-top:0;z-index:10;}
div.selectbox-wrapper ul li.selected {background:#efefef;}
div.selectbox-wrapper ul li.current {color: #fff;background:#9ba8b8}
div.selectbox-wrapper ul li {text-align:center;padding-right:3px;padding-bottom:3px;width:100%;cursor:pointer;line-height: 20px;padding-top: 3px;font-size:12px;color:#666;}
.selectbox{border:none;display:block;width:80px;text-indent:8px;cursor:pointer;background:none;font-size:12px;height:32px;line-height:32px;color:#707070;}

/* 导航菜单 - 核心修改 */
.menu { width: 100%; height: 60px; background: #fff; }
.menu ul { width: 1004px; margin: 0 auto; }
.menu li { float: left; margin: 0 10px; }
.menu li a { 
    display: block; min-width: 80px; line-height: 56px; text-align: center; 
    border-top: 4px solid #fff; font-size: 15px; font-weight: bold; 
}
/* 悬浮状态由红色变蓝色 */
.menu a:hover, .menu li a.cur { 
    border-top: 4px solid var(--primary-blue) !important; 
    color: var(--primary-blue); 
}
.banner {
    width: 100% !important;
    height: 450px !important; /* 保持您设定的固定高度 */
    text-align: center;
    z-index: 1; 
    overflow: hidden;
    position: relative;
}


#ul01 li img {
    width: 100% !important;      /* 强制图片宽度 100% */
    height: 450px !important;     /* 强制图片高度与容器一致 */
    object-fit: cover !important; /* 关键：图片按比例填充，不拉伸变形 */
    display: block;
}
#ul01 {width:100%; float:left;text-align:center; display:inline;position:relative;height:450px;  overflow:hidden; }
#ul01 ul{ position:absolute;width:100%; left:0;}
#ul01 li{ float:left; width:100%; height:620px; overflow:hidden; }
#ul01 li a{ display:block; height:455px;}

/* --- 智能 Banner 导航按钮 --- */
.slider-nav {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    opacity: 0; /* 平时完全隐藏 */
    transition: opacity 0.4s ease; /* 优雅的淡入效果 */
}

/* 鼠标移入 Banner 时显示按钮 */
.banner:hover .slider-nav {
    opacity: 1;
}

.nav-btn {
    position: absolute;
    width: 50px;
    height: 80px;
    background: rgba(0, 74, 153, 0.4); /* 品牌工业蓝半透明 */
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    background: rgba(0, 74, 153, 0.8); /* 悬停时加深颜色 */
}

/* 左右按钮位置 */
.prev-btn { left: 0; border-radius: 0 5px 5px 0; }
.next-btn { right: 0; border-radius: 5px 0 0 5px; }

/* 箭头符号（使用纯 CSS 绘制） */
.nav-btn::after {
    content: '';
    width: 15px;
    height: 15px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    display: block;
}
.prev-btn::after { transform: rotate(-135deg); margin-left: 5px; }
.next-btn::after { transform: rotate(45deg); margin-right: 5px; }



/* 产品中心整块区域 */
.product-section {
    background-color: #f8f9fa; /* 浅灰色背景，对应目标图 */
    padding: 80px 0;
    text-align: center;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

/* --- 仿新闻动态标题样式 --- */
.news-style-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px; /* 与下方产品的间距 */
}

/* 装饰横线 */
.news-style-title .line {
    width: 80px;         /* 横线长度 */
    height: 1px;         /* 横线厚度 */
    background: #ccc;    /* 横线颜色 */
}

/* 装饰小圆点 */
.news-style-title .dot {
    width: 6px;
    height: 6px;
    background: #999;    /* 圆点颜色 */
    border-radius: 50%;
    margin: 0 15px;      /* 圆点与线、文字的间距 */
}

/* 标题文字微调 */
.news-style-title .section-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0;           /* 清除自带外边距 */
    letter-spacing: 2px;
}

.section-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 50px;
    letter-spacing: 2px;
}

/* 网格布局 */
.product-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.product-item {
    flex: 1;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 悬停效果：向上浮动 */
.product-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* 图片区域：灰色占位感 */
.product-img-box {
    height: 240px;
    background: #e9ecef; /* 图片加载前的底色 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片上的文字叠加（如目标图中灰色块里的文字） */
.img-overlay-text {
    position: absolute;
    color: #888;
    font-size: 14px;
    pointer-events: none;
}

/* 底部标题区域 */
.product-info {
    padding: 25px 0;
    background: #fff;
    /* 核心：底部的蓝色横条 */
    border-bottom: 4px solid #004a99; 
}

.product-info h4 {
    margin: 0;
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

/* 主力产品系列总容器 */
.main-products {
    background-color: #f7f8fa; /* 浅灰色大背景 */
    padding: 60px 0;
    text-align: center;
}

.main-products .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-heading {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
}

/* 栅格布局 */
.product-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.product-card {
    flex: 1;
    background-color: #fff;
    transition: transform 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.product-card:hover {
    transform: translateY(-5px);
}

/* 上方灰色图片区域 */
.card-image-box {
    position: relative;
    height: 220px;
    background-color: #dcdcdc; /* 目标图中的灰色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* 让背景显现灰色质感 */
}

/* 图片正中间的文字 */
.image-mask {
    position: absolute;
    color: #888;
    font-size: 16px;
}

/* 下方白色区域及蓝色装饰条 */
.card-footer {
    padding: 20px 10px;
    background-color: #fff;
    /* 核心：底部的蓝色横条 */
    border-bottom: 5px solid #004a99; 
}

.card-footer h3 {
    margin: 0;
    font-size: 18px;
    color: #222;
    font-weight: bold;
}

#prev,#next{ display:block; float:right; width:38px; height:38px; overflow:hidden;cursor:pointer;margin-left:10px; }

.rollbut{ float:right; text-align:right; width:980px;padding-bottom:10px;}
.rollbut a{background:url(../img/arrowbg2.gif) top left no-repeat; text-align:center; line-height:38px; color:#fff; font-size:28px; font-family:'宋体';height:38px; width:38px; float:right; cursor:pointer; margin-left:10px; display:inline; }
.rollbut a:hover{background:url(../img/arrowbg2.gif) top right no-repeat}
#swap_pic { margin:0 auto;width: 980px;overflow: hidden;}
.box { position:relative; width:980px; float:left; height:410px; overflow:hidden;}
.pics { position:absolute; width:5000px; top:0;}
.pics li {width: 980px; float: left; height:410px; overflow: hidden}
.pics li a{ float:left; position:relative; width:245px; cursor:pointer;}
.pics a font{ display:none; position:absolute; width:100%; height:100%;background:url(../img/proico.png) center no-repeat #262626; filter:alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;}
.pics a:hover font{ display:block;}


/* index*/
.qnav { padding: 60px 0; background: #fff; text-align: center; }
.qnav ul { width: 1004px; margin: 0 auto; display: flex; justify-content: center; }
.qnav ul li { width: 200px; margin: 0 40px; }
.qnav ul li a { display: block; text-align: center; color: #333; font-weight: bold; }

/* 这里的 font 标签就是那个圆圈 */

.qnav { 
    padding: 80px 0; 
    background: #fff; 
    border-bottom: 1px solid #f0f0f0; 
}

.qnav_t { 
    text-align: center; 
    margin-bottom: 20px; 
}
.qnav ul { 
    width: 1004px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-around; 
    align-items: flex-start;
}

.qnav ul li { 
    width: 260px; 
    text-align: center; 
}

.qnav ul li a { 
    display: block; 
    color: #333; 
    font: bold 18px/1.5 'Microsoft Yahei'; 
    text-decoration: none;
}

/* 核心：圆圈容器样式 */
.qnav ul li a font { 
    display: flex !important; 
    align-items: center; 
    justify-content: center; 
    width: 130px;           /* 略微调大一点，视觉效果更好 */
    height: 130px; 
    margin: 0 auto 20px; 
    border-radius: 50%; 
    color: #fff; 
    font-size: 55px; 
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 让翻转更丝滑 */
    background-image: none !important; /* 强制覆盖掉旧的 gif 背景 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 增加一点工业高级感阴影 */
}

/* 精准配色：根据你的第二张效果图设置颜色 */
.qnav ul li:nth-child(1) a font { background-color: #f67272 !important; } /* 科技红 */
.qnav ul li:nth-child(2) a font { background-color: #004a99 !important; } /* 工业蓝 */
.qnav ul li:nth-child(3) a font { background-color: #28a745 !important; } /* 环保绿 */

/* 悬浮效果：3D翻转 + 颜色微变 */
.qnav ul li a:hover font { 
    transform: rotateY(180deg); 
}

.qnav ul li:nth-child(1) a:hover font { background-color: #e55a5a !important; }
.qnav ul li:nth-child(2) a:hover font { background-color: #003366 !important; }
.qnav ul li:nth-child(3) a:hover font { background-color: #218838 !important; }

.case{overflow:hidden; position:relative;width:100%;height:416px;background:#262626; padding-top:50px;}
.case li{ position: absolute;width:980px; left:0;display:inline;}
.view-port {overflow: hidden;position: relative; width:980px;}
.track a.prev,.track a.next { display:none;}
.track a.prev.disabled,.track a.next.disabled { display: none;}
.slider-container {position: relative;height:350px;}
.bullet-pagination {width: 100%;text-align: center;}
.bullet {display: inline-block;width:10px; border:2px solid #c0c0c0; height:10px;border-radius:10px;margin-right: 5px;}
.bullet.active { border: 2px solid var(--primary-blue) !important; background: var(--primary-blue) !important;}
.caseimg{ float:left; width:400px; margin-right:48px; display:inline;}
.case_r{ float:left; width:528px; font-size:14px; }
.case_rt{float:left; width:528px; color:#fff; font-size:22px; margin-bottom:27px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-family:'Microsoft Yahei'} 
.case_r p{ margin-bottom:30px;color:#757575; width:100%; line-height:32px;display:block;}
.more{background:url(../img/more.png) 0 0 no-repeat; width:110px; height:32px; line-height:32px; color:#fff; display:block; text-align:center; font-size:14px;}
.ititle{ text-align:center; font-size:22px; color:#262626;font-family:'Microsoft Yahei'; height:69px; width:385px; margin:0 auto;}
.ititle font{ height:47px;text-transform:uppercase; display:block; line-height:1; font-size:38px; font-family:'Impact';}
.news{width:100%;height:456px; padding-top:48px;}
.news .ititle{background:url(../img/news_t.gif) bottom center no-repeat;}
.news ul{ width:1300px;}
.news ul li{ width:436px;float:left;margin:50px 100px 0 0px; display:inline; cursor:pointer;}
.news img{float:left;}
.protxt{ width:326px; float:right; color:#717171; font-size:14px; line-height:24px;}
.protxt font{ font-size:16px;  cursor:pointer;float:left; width:100%; margin-bottom:10px; font-weight:bold; color:#292929;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.news li a font:hover{color:var(--primary-blue); }
.news li a:hover{color:#3f3f3f; }
.newsmore{ width:980px; border-top:1px solid #e2e2e2; margin-top:68px; float:left;text-align:center }
.newsmore a{margin:-16px auto 0;}
.main, .fyMain { width: 1200px !important;margin: 0 auto !important; clear: both; }
.fyMain {display: flex !important;align-items: flex-start;gap: 30px; padding: 50px 0 60px 0 !important;}
/* foot*/
.footclear{ width:100%; clear:both; margin:0 0 0px 0;height:0px; font-size:0; overflow:hidden;}
.foot{width:100%; min-width:1004px;color:#707070; background:#1a1d22; height:268px;}
.f_link{ width:100%;height:75px;line-height:75px; text-align:center; color:#707070;background:#f5f5f5}
.foot .f_link a{padding-left:20px; color:#707070; border-top: none !important;}
.bottomnav{width:100%; height:45px; line-height:45px;text-align:center; background:var(--primary-blue);}
.foot .bottomnav a{color:#fff;display:inline-block;width: 90px;margin: 0 2px;_display:inline; _zoom:1;}
.bottomnav a:hover{ color:var(--primary-blue);background:url(../img/bootnav.gif)  center no-repeat;}

.bootTxt{text-align:center; padding-top:40px; height:80px;line-height:30px;}
.foot a{ color:#707070;  }
.share{width:230px; display:inline-block; margin-top:33px; float:left; margin-left:30px;}
/* 二级页面*/
.fyLeft { width: 260px !important; position: sticky !important; top: 20px; flex-shrink: 0; float: none !important; }
.l_pro{margin-bottom:38px;}
.proOne{margin-bottom:8px;}
.l_procon{ width:100%; clear:both;}
.proOne li a.on{background:none; font-weight:bold;color:#6d6d6d; }


.proTwo li a{border:0;border-bottom:1px solid #ccc;color:#6d6d6d;height:40px; line-height:40px;width:210px;background:url(../img/protwo.gif) 12px center  no-repeat }

.l_news ul{ display:block;float:left;width:230px; padding-bottom:30px;}
.l_news li a{ display:block;height:36px; line-height:36px;width:206px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;background: url(../img/newsico1.gif) 2px center no-repeat;padding-left:24px; color:#707070; }
.l_news li a:hover{ color:#000; background: url(../img/newsico2.gif) 2px center no-repeat; }
.ltitle{ width:230px; height:55px;float:left;font-weight:bold;}
.titlefl{ float:left; width:146px;}
.titlefl span{ color:#1a1d22;font:22px/22px 'Microsoft Yahei';}
.ltitle p{ color:var(--primary-blue);  text-transform:uppercase; font:26px /30px 'impact';}
.ltitle a{ color:#fff; background:#1a1d22; width:84px; margin-top:26px; float:right; font:14px/21px '宋体';}
.l_pro .ltitle a{width:58px;}
.l_contact{ clear:both;width:100%; line-height:24px;}
.l_contact .contacttel{ color:#1a1d22;}
.contacttel{ color:#898989; height:74px;font:22px/22px 'Microsoft Yahei';}
.contacttel p{ color:#898989;font:28px/30px 'Impact';}
.contacttel img{ vertical-align:-0.2em; margin-right:3px;}
.lconmore{ background:#1a1d22; line-height:20px;height:20px; display:block; margin-top:5px;}
.lconmore a{background:#e2e2e2; color:#000;line-height:20px; padding:0 3px; float:right;}

.about-stats-bar {
    display: flex !important;
    justify-content: space-around !important;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #003366 100%) !important;
    padding: 30px 10px !important;
    border-radius: 8px;
    margin-bottom: 50px !important;
}
.about-stats-bar .stat-item {
    flex: 1 !important; /* 核心：平分空间 */
    text-align: center !important;
}
/* 让每一个数据项占据 25% 的等分宽度 */
.about-stats-bar .stat-item {
    flex: 1 !important;                  /* 关键：让 4 个项平分宽度，解决挤在左边的问题 */
    text-align: center !important;        /* 强制内容居中 */
    border-right: 1px solid rgba(255,255,255,0.1); /* 添加极淡的分隔线增加精致感 */
}

/* 移除最后一项的分隔线 */
.about-stats-bar .stat-item:last-child {
    border-right: none !important;
}

/* 数字样式优化 */
.about-stats-bar .stat-item h3 {
    font-size: 32px !important;
    color: #28a745 !important;           /* 工业绿 */
    margin: 0 0 10px 0 !important;
    font-family: 'Impact', sans-serif !important;
    line-height: 1 !important;
}

/* 描述文字样式优化 */
.about-stats-bar .stat-item p {
    font-size: 14px !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    white-space: nowrap !important;      /* 防止文字折行 */
}
.stat-item h3 { font-size: 28px !important; color: #28a745 !important; margin-bottom: 5px !important; font-family: 'Impact'; }

.section-title-box { display: flex !important; align-items: center; margin: 40px 0 25px; }
.section-title-box .line { width: 40px; height: 1px; background: #004a99; }
.section-title-box .dot { width: 6px; height: 6px; background: #28a745; border-radius: 50%; margin: 0 10px; }
.section-title-box h2 { font-size: 22px !important; color: #004a99 !important; font-weight: bold !important; margin:0 !important; }

.about-feature-img-box img {
    width: 100% !important; height: 320px !important; object-fit: cover !important; 
    border-radius: 4px; margin-bottom: 10px;
}

.collab-pills { display: flex !important; flex-wrap: wrap; gap: 15px; }
.collab-pills span { 
    padding: 8px 22px; background: #f8f9fa; border: 1px solid #eee; 
    border-radius: 20px; font-weight: bold; color: #666; transition: 0.3s;
}
.collab-pills span:hover { background: var(--primary-blue) !important; color: #fff !important; }
/* fyRight*/
.fyRight {
    flex-grow: 1;background: #ffffff ;padding: 40px ;border-radius: 12px;box-shadow: 0 10px 40px rgba(0,0,0,0.06) ; border: 1px solid #eef1f5 ;width: auto ;overflow: visible ; min-height: 1200px;display: flex;flex-direction: column;}

.title{float:left; height:36px; margin-bottom:20px;width:100%; border-bottom:1px solid #a6a6a6}
.title .fl {color: #24272e;font: bold 22px/36px 'Microsoft Yahei'; padding-left: 15px;border-left: 5px solid var(--primary-blue); border-bottom: 1px solid var(--primary-blue);height: 36px;margin-bottom: -1px;position: relative;display: inline-block; }
.titler{ float:right;color:#707070;line-height:22px;font-weight:normal;}
.titler a{color:#707070;}
.titler font{ font-size:12px; color:#707070;}
.membermain{padding-top:20px;}
.padding25{ padding:0 42px 20px;width:620px;word-break:break-all; line-height:30px; font-size:14px;}
.mainr_line{float:left; height:18px; width:99%;background:url(../img/line_s.gif) top left repeat-x;}
/* list*/

.pro_list li{ width:210px; overflow:hidden; text-align:center; height:193px; float:left; margin:0 12px 20px; display:inline;border-bottom:2px solid #07090e; }
.pro_list li a{background:#1a1d22; display:block;float:left;width:210px; }
.pro_list li a:hover{ background:#ef6268;}
.proname{height:35px; color:#fff; line-height:35px;float:left; width:90%; padding:0 5%;text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.pro_list img{ border:1px solid #ccc; padding:2px; background:#fff;}
.pro_list li a:hover img{  border:1px solid #ef6268;}

.news_list{flex-grow: 1; }
.news_list li a {width: 100% !important;padding: 15px 20px !important; display: flex !important;justify-content: space-between;box-sizing: border-box;}
.news_list li a:hover {color: var(--primary-blue) !important; background-color: #f8f9fa !important; padding-left: 30px !important; }
.news_list li a .fr{ font-size:12px;}
.news_list li a span{ cursor:pointer; }
.news_list li .fl{width:400px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.news_line{ clear:both;width:687px; height:1px; }
.news_list p{ font-size:12px; padding:10px 20px; line-height:20px; color:#ccc;}
.newseven a{ background:#eee;}
.pro_txtimg{ margin-bottom:20px;width:100%; float:left;}
.pro_txtimg li{margin-bottom:27px; background:#eee;height:159px; width:680px; padding:15px 10px 15px 15px;}
.pro_li_img{float:left; background:#fff;display:inline; margin-bottom:10px;border:1px solid #e5e5e5; padding:4px; width:200px;}
.pro_li_txt{float:right; position:relative; width:460px; color:#696969; line-height:36px; font-size:14px;}
.pro_li_txt p{ font-size:12px; line-height:32px;}
.protitle{ margin-bottom:16px; width:100%; height:32px;background:#1a1d22; font-size:14px;color:#fff; font-weight:bold;}
.protitle .fr{ float:right;width:70px; height:32px;text-align:center; color:#fff; background:#ef6268;font:normal 16px/32px 'Microsoft Yahei';}
.protitle .fl{ color:#fff; font-size:14px; line-height:32px; font-weight:bold;text-overflow:ellipsis; overflow:hidden; white-space:nowrap ;width:70%; display:block; padding-left:10px;}
/*news_view*/
.padding25 h2{ font-size:18px; font-family:'黑体'; font-weight:normal; color:var(--primary-blue);}
.padding25 .center img{ border:1px solid #ccc; margin-bottom:10px; width:auto; max-width:600px;_width:expression(this.width > 600 ? "600px" : this.width);overflow:hidden; }
.newsview{ display:inline;width:615px; padding-top:25px; margin-top:30px;border-top:1px dotted var(--primary-blue);border-bottom:1px dotted var(--primary-blue);margin-bottom:25px; padding-bottom:15px; font-size:14px; line-height:28px; float:left; color:#555;}
.main_r_nav .fl{ width:80%;line-height:35px; padding-top:10px; padding-left:18px; color:#555;}
.main_r_nav .fl a{ float:left; width:100%;text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.main_r_nav{ float:left; width:100%; border-radius:4px;background:#eee; font-size:12px; }
.returnlist{ float:right;color:#e76b53 ; font-size:12px; }
.main_r_nav a:hover{color:#ef9195 ; }
.title_s{ text-align: center;color: #77787a;font-size: 12px;line-height: 35px;}
/* page*/
.page{margin-top:15px;float:left; width:100%; height:30px; text-align:center; color:#1a1d22;}
.page a { color:#1a1d22; padding:0 5px;}
.page *{ display:inline-block; _zoom:1;_display:inline;vertical-align:middle;line-height:20px;height:20px;padding-bottom:1px; }
.page img{ height:19px;}
.page a:hover {color:#ef6268; }
.page .current {display:inline-block; padding:0 5px; color:var(--primary-blue);line-height:20px;height:20px;}
.total{text-align:center;height:20px; line-height:20px;}
.reach{text-align:left; padding:0 5px; height:20px; line-height:20px;}
.btn{ width:36px;}
.input_page{ width:30px;height:14px; text-align:center; border:1px solid #ef6268; font-size:12px; line-height:14px;}
/* search*/
.searchnull{ float:left; text-align:center; width:100%; padding:3% 0; font-size:14px;}
.searchnull font{ color:#F00; font-size:14px;}
.searchmore{ float:left; width:92%; background:#efefef; text-align:center;margin:10px 20px;_margin:10px ; border:1px solid #dbd6f1}
.searchmore a{ line-height:25px; color:#333;}
.input_title{ background:none; line-height:30px;height:30px; padding-left:7px;}
/* book*/
/* 验证码与错误提示补丁 */
.c_red { color: #f67272; margin-left: 5px; }
.errMsg { color: #f67272; font-size: 12px; line-height: 42px; margin-left: 10px; }
.bookmain{width:640px; margin:20px auto;height:auto;background:#fff;padding:0 25px ; overflow:auto; }
.bookline{width: 640px; height:34px;float:left; margin-top:10px;}
.book3{ width:640px; margin:0 auto;}
.booktop{ width:640px; height:30px; float:left; background:url(../img/bookico.png) no-repeat 10px 7px; }
.booktop_name{ width:470px; height:30px; float:left; padding-left:30px; line-height:30px; font-weight:bold;}
.booktop_time{ width:150px; height:30px; float:left; color:#ccc; text-align:right; line-height:30px;}
.bookcontent{ width:610px; min-height:40px; height: auto!important; height:40px;float:left; border:1px solid #d6deef; background:url(../img/bookcontentbg.jpg) repeat-x; background-color:#fff; padding:10px; color:rgb(30,54,1);}
.bookadmin{ width:650px; height:auto; float:left;}
.bookadmin_top{ width:650px; height:12px; float:left;}
.bookadmin_mid{ width:610px; min-height:30px; background:#fff; height: auto!important; height:30px; border-left:1px solid #d6deef; border-right:1px solid #d6deef; border-bottom:1px solid #d6deef; float:left; padding:10px; color:rgb(30,54,1);}
.admintimecol{ color:#5e7194;}

/* 1. 确保整个留言容器居中并清除浮动干扰 */
.book { 
    width: 100% !important; 
    padding: 30px 0 !important; 
    clear: both !important;
    float: none !important;
    display: block !important;
}

/* 2. 表单主容器：设置最大宽度并真正居中 */
.message { 
    width: 100% !important; 
    max-width: 850px !important; /* 调整表单整体宽度 */
    margin: 0 auto !important;   /* 关键：水平居中对齐 */
    padding: 0 !important;
    float: none !important;
}

/* 3. 列表项：强制横向排列，不限高度 */
.message li { 
    width: 100% !important; 
    margin-bottom: 25px !important; 
    display: flex !important; 
    align-items: flex-start !important;
    height: auto !important; 
    float: none !important;
}

/* 4. 标题标签对齐优化 */
.message li p.message_title { 
    width: 120px !important; 
    text-align: right !important; 
    padding-right: 25px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    line-height: 45px !important; /* 确保文字与输入框垂直中心对齐 */
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* 5. 输入框包裹容器：强制占据剩余全部宽度 */
.message li p.message_content { 
    flex-grow: 1 !important;
    width: auto !important;
    margin: 0 !important;
    display: block !important;
}

.message li input[type="text"], 
.message li textarea { 
    width: 100%;
    max-width: 100% !important;     /* 防止溢出 */
    min-height: 45px !important;    /* 增加输入高度，更大气 */
    border: 1px solid #dcdfe6 !important; 
    border-radius: 4px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    box-sizing: border-box !important; 
    background: #fff !important;
    transition: border 0.3s;
}

/* 留言内容框高度设置 */
.message li.contentb textarea { 
    height: 180px !important; 
    padding: 12px 15px !important;
}

/* 输入框聚焦效果 */
.message li input:focus, 
.message li textarea:focus { 
    border-color: var(--primary-blue) !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(0,74,153,0.1) !important;
}

/* 7. 提交按钮：对齐到输入区起始位置 */
.message li.yzm { 
    padding-left: 120px !important; /* 必须与 label 宽度一致以保持垂直对齐 */
    width: 100% !important;
}

.message_sub button { 
    background: var(--primary-blue) !important; 
    color: #fff !important; 
    border: none !important; 
    padding: 12px 80px !important; 
    font-size: 18px !important; 
    font-weight: bold !important; 
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0,74,153,0.3) !important;
}

.message_sub button:hover {
    background: #003366 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,74,153,0.4) !important;
}

.message_content input:focus, 
.message_content textarea:focus {
border-color: var(--primary-blue);
box-shadow: 0 0 8px rgba(0,74,153,0.1);
outline: none;
}

.message_content textarea { height: 150px; resize: vertical; }
.errMsg { color: #f67272; font-size: 12px; margin-left: 10px; line-height: 40px; }
.searchred{ color:#f00 !important; margin:0 !important}

/* hr*/
.hrBox{ width:634px; float:left; min-height:91px; _height:91px; border:1px solid #dbdbdb; margin-bottom:20px; background:#efefef; margin-left:20px;_margin-left:10px; } 
.hrBoxL{ width:100px; float:left; text-align:center;  }
.hrBoxL li{ width:100px; min-height:30px; _height:30px; line-height:30px;border-bottom:1px #dbdbdb solid;vertical-align: bottom}
.jobName{ width:380px; float:left;}
.hrBtn{ width:100px; float:left; text-align:center; padding-top:3px;}
.hrBoxL li.haode{ border-bottom:none;}
.hrBoxR{ width:533px; float:left; text-align:left; border-left:1px solid #dbdbdb;}
.hrBoxR li{ width:508px; min-height:30px; _height:30px; line-height:30px; border-bottom:1px #dbdbdb solid; padding-left:15px; vertical-align: bottom; padding-right:10px;}
.hrBoxR li.topline{ overflow:hidden; height:30px;}
.hrBoxR li.topline img{ margin-top:3px;}
.hrBoxR li.haode{ border-bottom:none;}
.hrTable{ width:614px; float:left; height:440px; background:#efefef; border:1px solid #dbdbdb;margin-left:35px;_margin-left:17px;}
.tableTitle{ width:614px; height:36px; text-align:center; line-height:36px; border-bottom:1px solid #dbdbdb; font-weight:bold;}
.lineOne{ height:30px; line-height:30px; border-bottom:1px solid #dbdbdb; width:614px;}
.lineOneL{ width:94px; float:left; text-align:center; border-right:1px solid #dbdbdb;}
.lineOneR{ width:509px; float:left; padding-left:10px;}
.tableMainL{ width:94px; float:left; border-right:1px solid #dbdbdb; text-align:center;}
.tableMainL li{ width:94px; height:30px; line-height:30px; border-bottom:1px solid #dbdbdb;}
.tableMainR{ width:211px; float:left; border-right:1px solid #dbdbdb; text-align:left; }
.tableMainR li{ width:206px; height:30px; line-height:30px; border-bottom:1px solid #dbdbdb; padding-left:5px; vertical-align: bottom;}
.tableMainR li span{display:inline-block;}
.tableMainRno{ width:212px; float:left; text-align:left;}
.tableMainRno li{ width:207px; height:30px; line-height:30px; border-bottom:1px solid #dbdbdb; padding-left:5px; vertical-align: bottom;}
.tableMainRno li span{display:inline-block;}
.input_hr{ width:126px; height:17px; line-height:17px; padding:0px; vertical-align:middle; font-size:12px; border:1px solid #dbdbdb;}
.sel_hr{ width:130px; height:20px; line-height:20px; padding:0px; vertical-align:middle; font-size:12px; }
.bottomLine{ width:614px; height:123px; border-bottom:1px solid #dbdbdb; }
.lineBootL{ width:94px; height:123px; border-right:1px solid #dbdbdb; text-align:center; float:left;}
.lineBootR{ width:509px; float:left; padding-left:10px;  height:123px;}
.are_hr{ width:470px; height:80px; margin-top:11px;}
.hr_btn{ width:614px; height:31px; line-height:31px; background:#333; color:#fff;}
.hr_btnL{ width:310px; float:left; border-right:1px solid #dbdbdb; text-align:center; height:31px;}
.hr_btnR{ width:300px; float:left; text-align:center; }

/* hr */
.hr{ margin:10px auto; width:95%;font-size:12px;line-height:24px; border:1px #CCC solid;border-collapse: collapse; background:#efefef; }
.hr td{border:1px #CCC solid;border-collapse: collapse; line-height:2;}
.hr input,.hr textarea{ line-height:20px; vertical-align:middle;height:20px; border:1px solid #ccc;}
.hr a{ color:#333;}
.hr a:hover{ color:#de0303;}
.hr_btn{width:100px; height:40px; font-size:12px;}
#hrform{ float:left; width:100%;}

/* --- 产品展示模块 Product --- */
.product { background: var(--industrial-dark); padding: 60px 0; height: auto; }
.product .ititle { color: #fff; border-bottom: 2px solid var(--primary-blue); display: inline-block; width: auto; padding-bottom: 10px; margin-bottom: 40px; }
.pics a font { 
    background: var(--primary-blue) !important; /* 遮罩层变蓝色 */
    opacity: 0.8; 
}

/* --- 工程案例 Case --- */
.case { background: #fff; color: #333; height: auto; padding-bottom: 50px; }
.bullet.active { 
    border: 2px solid #004a99 !important; 
    background: #004a99 !important; 
}
.case_rt { color: #004a99 !important; font-weight: bold; }
/* --- 侧边栏与按钮 --- */
.more { 
    background: var(--primary-blue); border-radius: 4px; 
    transition: 0.3s; 
}
.more:hover { background: var(--eco-green); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* --- Footer 页脚 --- */
.foot { background: var(--industrial-dark); border-top: none !important; }
.bottomnav { background: var(--primary-blue); } /* 底部导航条变蓝 */
.bottomnav a:hover { background: var(--eco-green); color: #fff; }


/* pages */

.pages{width:100%;height:28px; margin:14px 0; clear:both;}
.pages ul{float:right; margin:0 15px 0 0; display:inline;}
.pages ul li{float:left;display:inline;margin:0 7px 0 0;font:500 12px/28px "microsoft yahei";color: #1A1D22;width:auto;height:26px;padding: 0px 10px; border: 1px solid #ddd;background:  #fff;text-align:center;}
.pages ul li a{color:#666; display:block;width:auto;height:26px;}
.pages ul li:hover, .pages ul li.active {background: var(--primary-blue) !important;border-color: var(--primary-blue) !important;}
.pages ul li:hover a, .pages ul li.active a {color: #fff !important;}
.pages ul li.prev{width:64px;height:26px;background: url(../img/prev_page.jpg) 6px center no-repeat #1A1D22;text-indent:13px;border: 1px solid #1A1D22;text-align:left;}
.pages ul li.prevon{width:64px;height:26px;background:url(../img/prev_pageon.jpg) 6px center no-repeat #CDCDCD;text-indent:13px; border:1px solid #CDCDCD; text-align:left;}
.pages ul li.prev a,.pages ul li.next a{display:block;width:64px;height:26px;}
.pages ul li.prevon a,.pages ul li.nexton a{display:block;width:64px;height:26px;color: #FFFFFF;}
.pages ul li.ok a{display:block;width:55px;height:28px;}
.pages ul li.next{width:64px;height:26px;background: url(../img/next_page.jpg) 54px center no-repeat #1A1D22;text-indent:6px;border: 1px solid #1A1D22;text-align:left;}
.pages ul li.nexton{width:64px;height:26px;background:url(../img/next_pageon.jpg) 54px center no-repeat #CDCDCD;text-indent:6px; border:1px solid #CDCDCD; text-align:left;}
.pages ul li.clickli{background: #CDCDCD;border: 1px solid #CDCDCD;}
.pages ul li.clickli a{color: #FFFFFF;}
.pages ul li.dot{border:0; background:none;color:#64728f;}
.pages ul li.allpage{width:136px;border:0;background:none;}
.allpage input{width:26px;height:26px;border:1px solid #76a533;text-align:center;background:#76a533; margin:0 5px;color:#fff;font:12px/26px "microsoft yahei";}
.pages ul li.ok{background:#76a533;width:53px;height:26px;float:left;border:1px solid #76a533}
.pages ul li.ok a{color:#fff}