@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px;}
body{ margin:0 auto; padding:0 auto; color:#333; font-size:14px; font-family:"微软雅黑", Arial; background:#ffffff; border:none; text-align:center;}
.clear{ float:none; clear:both; height:auto; border:none;}
a{ text-decoration:none;}
a:link, a:visited { text-decoration: none; color: #333333; }
a:hover{ text-decoration:underline; color:#333;}
a:active{ text-decoration: none; color: #333; }
ul,li{ list-style-type:none; margin:0; padding:0;}
input{ vertical-align:top;}
img{ border:none;}
p{ margin:0;}
h1,h2,h3,h4,h5,h6{ margin:0;}

.box{ width:100%; margin:0px auto; position:fixed; top:0px; z-index:99999; border-bottom:1px solid #CCCCCC;}
.banben{ width:90%; padding:0.5% 5%; margin:0px auto; background:#000000;}
.banben h2{ float:right; color:#FFFFFF; font-size:14px; font-weight:400; border-right:2px solid #999; padding-right:1%; margin-right:1%;}
.banben h2 a{ color:#FFFFFF;}
.top{ width:90%; margin:0px auto; height:90px; padding:0px 5%; background:#FFFFFF;}
.logo{ float:left; width:5%; padding-top:18px;}
.logo img{ width:100%; float:left;}
.logo h1{ float:left; font-size:24px; font-weight:400; margin-left:-2%; padding-top:2%;}

.flash{ width:100%; z-index:111; margin-top:5%;}
.flexslider ul.slides li{ width:100%; padding:7% 0px;}
.flexslider ul.slides li h3{ font-size:30px; text-align:left; font-family:Arial; color:#FFFFFF; margin-left:5%;}
.flexslider ul.slides li h2{ font-size:54px; text-align:left; color:#FFFFFF; font-weight:400; padding-top:1%; margin-left:5%;}
.flexslider ul.slides li hr{ width:3%; margin-top:3%; height:2px; background:#FF0000; border:none; margin-left:5%;}
.flexslider ul.slides li p{ font-size:18px; color:#FFFFFF; margin-top:3%; text-align:left; margin-left:5%;}
.flexslider ul.slides li a{ background:#0063CC; color:#FFFFFF; padding:0.8% 2%; float:left; margin-top:3%; margin-left:5%;}
.flash img{ width:100%;}
.flash2{ width:100%; margin:0px auto; height:424px; z-index:111; background:url(../images/contact.jpg) no-repeat top center; margin-top:6%;}
.flash2 h1{ font-size:48px; color:#fff; font-weight:bold; padding-top:150px;}
.flash2 p{ width:61%; margin:0px auto; font-size:22px; color:#fff; padding-top:0.5%; text-align:center; padding-top:20px; line-height:180%;}

.inav{ float:right; width:70%; margin:0px auto;}
.nav{ width:100%;position:relative;}
.nav ul li{ float:left; width:14%; font-size:16px; text-align:center; position:relative;}
.nav ul li a{ display:block; width:100%; height:60px; padding-top:30px; color:#333;}
.nav ul li a:hover{ color:#007CC3;}
.nav ul li.li1 a{ display:block; width:100%;}
.nav ul ul {visibility:hidden;position:absolute; background:#FFFFFF;top:90px; width:100%; border-top:1px solid #CCCCCC; color:#333;}
.nav ul ul ul{ visibility:hidden; position:absolute; left:100%;top:0px; border:none;}
.nav ul li:hover ul,
.nav ul a:hover ul{visibility:visible;}
.nav ul ul li {clear:both;text-align:center; width:100%; font-size:15px; margin:0px; border:none;}
.nav ul ul li a{display:block;width:100%;  height:auto; padding-top:10px; padding-bottom:10px; border-bottom:1px solid #CCCCCC;}
.nav ul ul li a:hover{background:#007CC3; color:#FFFFFF;}
.nav ul ul ul li{ font-size:14px;}
.nav ul ul ul li a{clear:both;text-align:center;}
.nav UL LI:hover UL {VISIBILITY: visible}
.nav UL A:hover UL {
VISIBILITY: visible
 /*一级的li，a的hover时，设置二级菜单可见*/
}
.nav UL :hover UL UL {
  VISIBILITY: hidden
  /*一级的li，a的hover时，设置二级,三级菜单隐藏*/
}
.nav UL :hover UL :hover UL UL {
  VISIBILITY: hidden
  /*一级和二级的li，a的hover时，设置三级和四级级菜单隐藏*/
}
.nav UL :hover UL :hover UL {
  VISIBILITY: visible
  /*一级二级菜单hover时，设定3级菜单可见*/
}
.nav UL :hover UL :hover UL :hover UL {
  VISIBILITY: visible
  /*一级二级三级hover时，设置四级菜单可见*/
}
.nav ul ul ul a{ background:#fff;}
.nav ul ul ul a:hover{ background:#007CC3;}
.nav ul ul ul ul a{ background:#fff;}
.nav ul ul ul ul a:hover{ background:#007CC3;}


.tel{ display:none;}
.bgPop{  width:100%; display: none;  z-index: 9999999999999; left: 0; position:fixed;  top: 0; height:100%;  background: rgba(255,255,255,1); margin:0px auto;}

.nav ul.menu1{ z-index:999999; position:absolute; width:100%; background:#fff;  display:none; font-size:14px; border-top:1px solid #CCCCCC; color:#333;}
.nav ul.menu1 li{ float:none; width:100%; margin:0px; border:none; position:relative;}
.nav ul.menu1 li{ font-weight:400; background:#f6f6f6;}
.nav ul.menu1 li:hover{ background:#007CC3;}
.nav ul.menu1 li a{ width:100%; text-align:center; height:auto; padding-top:10px; padding-bottom:10px; border-bottom:1px solid #CCCCCC; font-size:14px; color:#333; padding-top:3%;}
.nav ul.menu1 li a:link, .menu1 ul li a:visited { text-decoration: none; color: #333; }
.nav ul.menu1 li:hover a{ color:#FFFFFF;}

.nav ul.menu2{ z-index:999999; position:absolute; width:100%; background:#fff;  display:none; font-size:14px; border-top:1px solid #CCCCCC; color:#333; left:100%; top:-1px;}
.nav ul.menu2 li{ float:none; width:100%; margin:0px; border:none;}
.nav ul.menu2 li{ font-weight:400; background:#f6f6f6;}
.nav ul.menu2 li:hover{ background:#007CC3;}
.nav ul.menu2 li a{ width:100%; text-align:center;  height:auto; padding-top:10px; padding-bottom:10px; border-bottom:1px solid #CCCCCC; font-size:14px; color:#333; padding-top:3%;}
.nav ul.menu2 li a:link, .menu1 ul li a:visited { text-decoration: none; color: #333; }
.nav ul.menu2 li:hover a{ color:#FFFFFF;}

.nav ul.menu3{ z-index:999999; position:absolute; width:100%; background:#fff;  display:none; font-size:14px; border-top:1px solid #CCCCCC; color:#333; left:100%; top:-1px;}
.nav ul.menu3 li{ float:none; width:100%; margin:0px; border:none;}
.nav ul.menu3 li{ font-weight:400; background:#f6f6f6;}
.nav ul.menu3 li:hover{ background:#007CC3;}
.nav ul.menu3 li a{ width:100%; text-align:center;  height:auto; padding-top:10px; padding-bottom:10px; border-bottom:1px solid #CCCCCC; font-size:14px; color:#333; padding-top:3%;}
.nav ul.menu3 li a:link, .menu1 ul li a:visited { text-decoration: none; color: #333; }
.nav ul.menu3 li:hover a{ color:#FFFFFF;}


.s_pro{ width:80%; margin:0px auto; padding:0px 10%; margin-top:3%;}
.fenlei{ width:100%; margin:0px auto; margin-top:2%; border-bottom:1px solid #CCCCCC; padding-bottom:3%;}
.fenlei ul{ width:100%; margin:0px auto;}
.fenlei ul li{ float:left; margin:0px auto; width:10%; font-size:16px; padding:1% 2%; background:#fff; margin-left:2%; border:1px solid #CCCCCC; border-radius: 25px; margin-bottom:2%; cursor:pointer;}
.fenlei ul li:hover{ background:#007CC3; color:#FFFFFF;}
.fenlei ul li:hover a{ color:#FFFFFF;}
.s_p_top{ width:100%;}
.s_p_top h2{ font-size:48px; color:#999999; font-weight:400;}
.s_p_top h3{ margin:0px auto; width:auto; text-align:center; font-size:20px; margin-top:0.8%; font-weight:400; color:#BCBCBC;}
.s_p_bot{ width:100%; margin-top:1%;}
.cate_block{ width:100%; margin-bottom:1%;}
.cate_block h2{ width:98%; padding:1% 1%; background:#0063CC; text-align:left; font-size:16px; font-weight:400; color:#FFFFFF; margin-bottom:1%; margin-top:1%;}
.cate_block ul li{ float:left; width:auto; padding:1% 1%; background:#f6f6f6; margin-bottom:1%; margin-right:1%;}

.fenlei5{ width:100%; margin:0px auto; margin-top:2%; border-bottom:1px solid #CCCCCC; padding-bottom:3%;}
.fenlei5 ul{ width:100%; margin:0px auto;}
.fenlei5 ul li{ float:left; margin:0px auto; width:8%; font-size:16px; padding:1% 2%; background:#fff; margin-left:1.2%; border:1px solid #CCCCCC; border-radius: 25px; margin-bottom:2%; cursor:pointer;}
.fenlei5 ul li:hover{ background:#007CC3; color:#FFFFFF;}
.fenlei5 ul li:hover a{ color:#FFFFFF;}

.menu{  width: 100%;  margin: 0 auto; border-bottom:1px solid #CCCCCC; padding-bottom:8%; position:relative;}
.menu ul li{}
.menu ul li h2{ float:left; margin:0px auto; width:auto; font-size:16px; padding:1% 4%; background:#fff; margin-right:3%; border:1px solid #CCCCCC; border-radius: 25px; font-weight:400; margin-bottom:2%; cursor:pointer;}
.menu ul li h2:hover{ background:#007CC3; color:#FFFFFF;}
.menu ul li h2:hover a{ color:#FFFFFF;}
.menu ul li h2.action{ background:#007CC3; color:#FFFFFF;}
.menu ul li h2.action a{ color:#FFFFFF;}
.menu ul li>p{ display: none; position:absolute; width:96%; margin-top:7%; background:#f6f6f6; border-radius: 25px; padding:0px 2%;}
.menu ul li:first-child p{ display:block;}
.menu ul li>p a{ float:left; padding:1% 1%; text-align:left;}
.menu ul li>p a:hover{ color:#007CC3;}


.hhh2{ width:100%; margin-top:1%;}

.s_i_bot{ width:100%; margin-top:1%;}
.s_i_bot h2{ margin:0px auto; text-align:left; font-size:18px;}
.s_i_bot ul li{ float:left; width:25%; margin-top:2%;position: relative; overflow:hidden; cursor:pointer;}
.s_i_bot ul li img{ float:left; width:100%; overflow:hidden;}
.overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  padding:0px 10%;
   background-size:cover; /* 半透明背景 */
  color: #fff;
  text-align: left;
    visibility:visible;
  z-index:9999;
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s; /* 平滑过渡效果 */
  display:none;
}
.overlay2 p{ font-size:16px; line-height:180%; text-align:center; padding-top:33%;}
.s_i_bot ul li:hover .overlay2 {
display:block;
 background:#000;
  visibility: visible;
  opacity: 0.7;
}

.about{ width:90%; margin:0px auto; padding-bottom:5%; margin-top:3%; background:url(../images/abo_bg.jpg) no-repeat bottom right;}
.abo_top{ width:100%; margin:0px auto; background:url(../images/zimu.png) no-repeat top left;}
.abo_t_left{ float:left; width:30%; text-align:left; padding-left:2%;}
.abo_t_left h2{ font-size:40px; font-weight:400; padding-top:4%;}
.abo_t_left p{ padding-top:2%; font-size:24px; color:#999;}
.abo_t_right{ float:right; width:40%;}
.abo_t_right h3{ float:right; padding:2% 6%; background:#0063CC; font-size:16px; font-weight:400; margin-left:4%;}
.abo_t_right h3 a{ color:#FFFFFF;}
.abo_bot{ width:85%; margin:0px auto; float:right; overflow:hidden;}
.abo_bot p{ text-align:left; font-size:16px; line-height:200%; padding-top:4%;}
.abo_bot a{ background:#DA251D; font-size:16px; padding:1% 4%; float:left; margin-top:5%; color:#FFFFFF;}
 
.products{ width:100%; margin:0px auto; padding-top:2%; background:#f6f6f6;}  
.pro_top{ width:90%; margin:0px auto; text-align:left;}
.pro_top h2{ font-size:40px; font-weight:400; padding-top:4%;}
.pro_top p{ padding-top:1%; font-size:24px; color:#999;}
.pro_center{ width:100%; margin:0px auto; margin-top:2%;}
.pro_c_top{ width:90%; margin:0px auto;}
.pro_c_top ul li{ float:left; margin-right:10%; font-size:16px;}
.pro_c_top ul li.li a{ color:#0063CC; font-weight:bold;}
.pro_c_top ul li a:hover{ color:#0063CC; font-weight:bold;}
.pro_c_bot{ width:100%; margin:0px auto; margin-top:2%;}
.pro_c_bot ul li{ float:left; width:25%;position: relative; overflow:hidden; cursor:pointer;}
.pro_c_bot ul li img{ float:left; width:100%; overflow:hidden;}
.overlay1 {
  position: absolute;
  top: 0;
  left: 25%;
  width: 40%;
  padding:0px 5%;
  padding-bottom:5%;
  background:#fff;
   background-size:cover; /* 半透明背景 */
  color: #666;
  text-align: left;
    visibility:visible;
  z-index:9999;
  opacity: 0.9;
  transition: opacity 0.5s, visibility 0.5s; /* 平滑过渡效果 */
  display:none;
}
.overlay1 p{ font-size:14px; line-height:180%; text-align:left; padding-top:10%;}
.overlay1 a{ background:#0063CC; font-size:14px; padding:1% 4%; float:left; margin-top:5%; color:#FFFFFF;}

.pro_bot{ width:100%; margin:0px auto; margin-top:2%;}
.pro_bot ul li{ float:left; width:15%; margin-left:2%;position: relative; overflow:hidden; cursor:pointer;}
.pro_bot ul li:first-child{ margin-left:0px;}
.pro_bot ul li img{ float:left; width:98%; padding:1% 1%; overflow:hidden; background:#CCCCCC;}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  padding:0px 10%;
   background-size:cover; /* 半透明背景 */
  color: #fff;
  text-align: left;
    visibility:visible;
  z-index:9999;
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s; /* 平滑过渡效果 */
  display:none;
}
.overlay p{ font-size:16px; line-height:180%; text-align:center; padding-top:40%;}
.pro_bot ul li:hover .overlay {
display:block;
 background:#000;
  visibility: visible;
  opacity: 0.7;
}


.news{ width:100%; margin:0px auto; margin-top:3%;}
.n_bot{ width:100%; margin:0px auto; margin-top:2%;}
.n_b_nei{ width:23%; float:left; margin-left:2.3%; background:#f6f6f6; overflow:hidden; padding-bottom:3%; border-radius: 10px; margin-bottom:2%;}
.n_b_nei:first-child{ margin-left:0px;}
.n_b_nei img{ width:100%; overflow:hidden;}
.n_b_nei h2{ width:80%; margin:0px auto; padding:0px 10%; background:#f6f6f6; font-size:16px; color:#000000; font-weight:400; text-align:left; padding-top:5%; position:relative; z-index:8888;}
.n_b_nei h3{ width:80%; margin:0px auto; font-size:14px; text-align:left; line-height:180%; color:#999999; margin-top:3%; border-bottom:1px solid #CCCCCC; padding-bottom:7%;}
.n_b_nei p{ width:80%; margin:0px auto; margin-top:7%;}
.n_b_nei p span{ float:left;}
.n_b_nei a{ float:right; width:25%; display:block; border:1px solid #007CC3; color:#007CC3; padding:1.2% 0px; font-size:14px;}
.n_b_nei a:hover{ background:#007CC3; color:#FFFFFF;}

.news1{ width:90%; margin:0px auto; margin-top:2%;}
.fenlei2{ width:100%; margin:0px auto; margin-top:2%; border-bottom:1px solid #CCCCCC; padding-bottom:1%;}
.fenlei2 ul{ width:50%; margin:0px auto; padding-left:10%;}
.fenlei2 ul li{ float:left; margin:0px auto; width:auto; font-size:16px; padding:1% 4%; background:#fff; margin:0px 6%; border:1px solid #CCCCCC; border-radius: 25px; margin-bottom:2%; cursor:pointer;}
.fenlei2 ul li:first-child{ margin-left:0px;}
.fenlei2 ul li:hover{ background:#007CC3; color:#FFFFFF;}
.fenlei2 ul li:hover a{ color:#FFFFFF;}

.n_b_nei1{ width:23%; float:left; margin-left:1%; margin-right:1%; background:#f6f6f6; overflow:hidden; padding-bottom:3%; border-radius: 10px; margin-bottom:2%;}
.n_b_nei1 img{ width:100%; overflow:hidden;}
.n_b_nei1 h2{ width:80%; margin:0px auto; padding:0px 10%; background:#f6f6f6; font-size:16px; color:#000000; font-weight:400; text-align:left; padding-top:5%; position:relative; z-index:8888;}
.n_b_nei1 h3{ width:80%; margin:0px auto; font-size:14px; text-align:left; line-height:180%; color:#999999; margin-top:3%; border-bottom:1px solid #CCCCCC; padding-bottom:7%;}
.n_b_nei1 p{ width:80%; margin:0px auto; margin-top:7%;}
.n_b_nei1 p span{ float:left;}
.n_b_nei1 a{ float:right; width:25%; display:block; border:1px solid #007CC3; color:#007CC3; padding:1.2% 0px; font-size:14px;}
.n_b_nei1 a:hover{ background:#007CC3; color:#FFFFFF;}

.f_nav{ width:90%; margin:0px auto; padding:4% 5%; margin-top:3%; background:#0063CC; color:#FFFFFF;}
.f_abo{ width:13%; margin:0px auto; float:left; text-align:left;}
.f_abo h2{ font-size:20px; font-weight:400; border-bottom:2px solid #FFFFFF; width:100%; padding-bottom:6%;}
.f_abo p{ line-height:200%; margin-top:10%;}
.f_abo p a{ display:block; color:#FFFFFF;}
.f_pro{ width:13%; margin:0px auto; float:left; margin-left:5%; text-align:left;}
.f_pro h2{ font-size:20px; font-weight:400; border-bottom:2px solid #FFFFFF; width:100%; padding-bottom:6%;}
.f_pro p{ line-height:200%; margin-top:10%;}
.f_pro p a{ color:#FFFFFF;}
.f_con{ width:15%; margin:0px auto; float:left; margin-left:5%; text-align:left;}
.f_con h2{ font-size:20px; font-weight:400; border-bottom:2px solid #FFFFFF; width:100%; padding-bottom:4%;}
.f_con p{ line-height:200%; margin-top:7%;}
.f_wei{ float:right; width:18%;}
.f_wei img{ width:100%;}
.foot{ width:100%; margin:0px auto; padding:1% 0px; background:#0063CC; color:#FFFFFF; border-top:2px solid #228BFF;}

.main_img{

    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
	z-index:1;
	transition-delay: 0s;
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
	/* Firefox 4 */
	-moz-transition-delay: 0s;
    -moz-transition-duration: 1s;
    -moz-transition-property: all;
    -moz-transition-timing-function: ease;
	/* Safari 和 Chrome */
	-webkit-transition-delay: 0s;
    -webkit-transition-duration: 1s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease;
	/* Opera */
	-o-transition-delay: 0s;
    -o-transition-duration: 1s;
    -o-transition-property: all;
    -o-transition-timing-function: ease;
	}
.main_img .show {
    background: rgba(0, 0, 0, 0.4);

    left: 0;
    opacity: 0;
	filter:alpha(opacity=0);
    position: absolute;
    top: 0;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: opacity;
    transition-timing-function: ease-in;
	/* Firefox 4 */
	-moz-transition-delay: 0s;
    -moz-transition-duration: 0.3s;
    -moz-transition-property: opacity;
    -moz-transition-timing-function: ease-in;
	/* Safari 和 Chrome */
	-webkit-transition-delay:0s;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-property: opacity;
    -webkit-transition-timing-function: ease-in;
	/* Opera */
	-o-transition-delay:0s;
    -o-transition-duration: 0.3s;
    -o-transition-property: opacity;
    -o-transition-timing-function: ease-in;
    width:250px;
    z-index: 200;
}
.main_img .show .imgArea {
    left: 50%;
	bottom:0;
    margin:-15px 0px 0px -40px;
    opacity: 0;
    position: absolute;
    transition-delay: 0s;
    transition-duration: 0.4s;
    transition-property: all;
    transition-timing-function: ease;
	/* Firefox 4 */
	-moz-transition-delay: 0s;
    -moz-transition-duration: 0.4s;
    -moz-transition-property: all;
    -moz-transition-timing-function: ease;
	/* Safari 和 Chrome */
	-webkit-transition-delay:0s;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease;
	/* Opera */
	-o-transition-delay:0s;
    -o-transition-duration: 0.4s;
    -o-transition-property: all;
    -o-transition-timing-function: ease;
}
.main_img .show .imgArea a{
	color:rgba(255,255,255, 0.8);
	display:block;
	padding:5px 12px;
	border:rgba(255,255,255, 0.6) 1px solid;
	border-radius:8px;
	font-size: 16px;
}
.main_img .show .imgArea a:hover{
	background: rgba(255,255,255, 0.7);
	color:rgba(0,0,0, 0.6);
}
.main_img:hover  .show {opacity: 1;filter:alpha(opacity=100);}
.main_img:hover .show .imgArea{opacity:1;filter:alpha(opacity=100);bottom:40%;}
.main_img:hover {
	transform: scale(1.2, 1.2);
	
	-ms-transform:scale(1.2, 1.2); 	/* IE 9 */
	-moz-transform:scale(1.2, 1.2); 	/* Firefox */
	-webkit-transform:scale(1.2, 1.2); /* Safari 和 Chrome */
	-o-transform:scale(1.2, 1.2); 	/* Opera */
	    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    
    filter: grayscale(0%);
	
    filter: none;
}
.weizhi{ width:60%; margin:0px auto; padding:10px 20%; background:#ccc;}
.weizhi h2{ text-align:left; width:100%; font-size:14px; margin:0px auto; color:#666666; font-weight:400;}
.weizhi h2 a{ color:#666;}

.wenzi{ width:60%; margin:0px auto; margin-top:4%; margin-bottom:2%;}
.wenzi h2{ text-align:left; font-size:20px; font-weight:400; margin-top:1%;}
.wenzi p{ text-align:left; line-height:180%; margin-top:1%;}

.about1{ width:100%; margin:0px auto; margin-top:3%; line-height:220%;}
.about1 p{ line-height:220%; text-align:left; font-size:14px;}
.about1 img{ max-width:100%; overflow:hidden;}

.kehu{ width:100%; margin:0px auto; margin-top:3%;}
.kehu h2{ font-size:20px; font-weight:400; margin-bottom:3%; margin-top:5%;}
.kehu ul{ width:100%; margin-bottom:2%;}
.kehu ul li{ width:21%; float:left; margin-left:2%; margin-right:2%; position:relative; overflow:hidden;}
.kehu ul li img{ width:100%; overflow:hidden;}

.about4{ display:none;}

.zhengshu{ width:100%; padding:3% 0px; margin-top:2%;}
.huan{ width:80%; margin:0px auto; padding:0px 10%; margin-top:2%;}
.h_top{ width:100%;}
.h_top h2{ font-size:48px; color:#999999; font-weight:400;}
.h_bot{ width:100%; margin-top:2%;}
.h_bot img{ width:100%;}

.licheng{ width:100%;}
.left{ float:left; width:36%; border:1px solid #CCCCCC; background:#FFFFFF; border-radius: 10px; padding:2% 2%; text-align:left;}
.left ul{ padding-bottom:2%;}
.left span{ background:#008BD5; width:auto; padding:0.5% 1%; font-size:14px; color:#FFFFFF; border-radius: 5px;}
.left p{ padding-top:2%;}
.right{ float:right; width:36%; border:1px solid #CCCCCC; background:#FFFFFF; border-radius: 10px; padding:2% 2%; text-align:left; margin-top:20%;}
.right ul{ padding-bottom:2%;}
.right span{ background:#008BD5; width:auto; padding:0.5% 1%; font-size:14px; color:#FFFFFF; border-radius: 5px;}
.right p{ padding-top:2%;}

.ly_top{ width:100%; margin:0px auto; margin-top:2%;}
.ly_top h1{ font-size:24px; margin:0px auto; color:#333; font-weight:bold;}
.scroll{width:1140px; height:400px; margin:0px auto; margin-top:40px;}
  .scroll_left{width:60px;height:60px;background:url(../images/left.png) no-repeat;float:left; margin-right:20px; margin-top:140px; cursor:pointer;}
  .scroll_right{width:60px;height:60px;background:url(../images/right.png) left no-repeat;float:right; margin-top:140px; cursor:pointer;}
  .pic{width:960px;height:400px;float:left; margin-left:10px;}
  .pic ul{display:block;}
  .pic li{float:left;display:inline;width:305px;text-align:center;}
  .pic li img{ width:285px; height:340px;}
  .pic li span{ width:285px; font-size:14px; display:block; padding-top:2%;}

.main{ width:100%; margin:0px auto; background:#f5f5f5; padding-bottom:3%;}
.m_top{ width:80%; margin:0px auto; padding-top:3%;}
.m_t_di{ float:left; width:35%; text-align:left;}
.m_t_di ul li{ line-height:200%; text-align:left; font-size:18px; background:url(../images/add1.png) no-repeat left 5px; padding-left:18%; color:#000; margin-top:1%; font-weight:bold; margin-bottom:4%;}
.m_t_di ul li.li{ background:url(../images/tel1.png) no-repeat left 5px;}
.m_t_di ul li.li1{ background:url(../images/email1.png) no-repeat left 5px;}
.l_right{ float:right; width:40%;}
.l_right ul h2{ font-size:14px; text-align:left; margin-bottom:2%;}
.l_right ul li{ float:left; width:100%; margin-bottom:15px;}
.l_right ul li input{ width:100%; height:45px; border:1px solid #007CC3; border-radius:5px; padding-left:2%; color:#999999;}
.l_right ul li textarea{ width:100%; height:100px; border:1px solid #007CC3; border-radius:5px; padding-left:10px; color:#999999; padding-top:5px;}
.l_right ul li input.input{ width:20%; height:45px; border:none; background:#007CC3; color:#FFFFFF; float:left; padding-left:0px; font-size:16px;}

.contact1{ width:80%; margin:0px auto; margin-top:3%;}
.contact1 h2{ font-size:38px; font-weight:400;}
.contact1 p{ font-size:18px; margin-top:2%; line-height:180%;}
.contact1 img{ width:100%; margin-top:1%;}

.main1{ width:60%; margin:0px auto; margin-top:3%; line-height:180%;}
.main3{ width:60%; margin:0px auto; margin-top:3%; line-height:180%;}
.main3 h2{ font-size:20px; font-weight:400; margin-bottom:10px; border-bottom:1px solid #CCCCCC; padding-bottom:2%;}
.main3 p{ line-height:180%; text-align:left;}
.main3 img{ width:100%;}
.s_p_fen{ width:50%; margin:0px auto;}
.s_p_fen ul li{ float:left; width:46%; margin-left:2%; margin-right:2%; background:#f6f6f6; padding:2% 0px;}
.s_p_fen ul li:hover{ background:#1C327E; color:#FFFFFF;}
.s_p_fen ul li:hover a{ color:#FFFFFF;}

.chanpin{ width:100%; margin:0px auto; border-bottom:1px solid #CCCCCC; padding:4% 0px;}
.cp_left{ float:left; width:20%;}
.cp_left img{ width:98%; padding:1% 1%; overflow:hidden; background:#CCCCCC;}
.cp_right{ float:right; width:75%;}
.cp_right h2{ text-align:left; font-size:18px; font-weight:400; color:#007CC3; margin-bottom:1%;}
.cp_right p{ text-align:left; height:130px; line-height:180%; font-size:14px; margin-bottom:2%;}
.cp_right a.aaa{ float:left; padding:1% 3%; border:1px solid #CCCCCC; margin-right:2%; cursor:pointer;}
.cp_right a.aaa:hover{ background:#007CC3; color:#FFFFFF; border:1px solid #007CC3;}
.cp_right h3{ text-align:left; font-size:14px; font-weight:400; margin-bottom:2%; background:#f6f6f6; padding:1%; line-height:180%; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; overflow:hidden;}
.cp_right h3 p{ padding:0px; margin-bottom:0px;}

.show{ width:100%; margin:0px auto; margin-top:3%;}
.show_top{ width:100%;}
.show_top h2{ width:98%; padding:1% 1%; background:#0063CC; text-align:left; font-size:16px; font-weight:400; color:#FFFFFF; margin-bottom:1%; margin-top:1%;}
.s_t_left{ width:50%; float:left; overflow:hidden;}
.s_t_left img{ width:100%; overflow:hidden;}
.s_t_right{ width:40%; float:right; padding:5%; text-align:left;}
.show_bot{ width:100%; margin-top:4%;}
.s_b_top{ width:100%; background:#f6f6f6;}
.s_b_top h3{ float:left; width:13%; color:#007CC3; text-align:center; padding:1% 0px; font-size:14px; cursor:pointer;}
.s_b_top h3.h3{ background:#007CC3; color:#fff;}
.s_b_bot{ width:100%; margin-top:1%; text-align:left; line-height:180%;}

.main2{ width:60%; margin:0px auto; margin-top:3%; text-align:left;}
.main2 img{ width:100%; margin-bottom:1%;}
.main2 h2{ font-size:20px; font-weight:400; margin-bottom:10px;}
.main2 span{ display:block; margin:0px auto; margin-bottom:30px; font-size:12px; color:#999999;}
.main2 p{ text-align:left; line-height:220%; font-size:14px;}

.show1_top{ width:48%; background:#f6f6f6; float:right; margin-top:2%;}
.show1_top:nth-child(odd){ float:left;}
.s1_t_left{ width:50%; float:left; overflow:hidden;}
.s1_t_left img{ width:100%; overflow:hidden;}
.s1_t_right{ width:40%; float:right; padding:3% 5%; text-align:left;}
.s1_t_right h2{ font-size:18px; font-weight:400;}
.s1_t_right p{ text-align:left; line-height:180%; font-size:14px; padding-top:4%;}

.tupian{ width:60%; margin:0px auto; margin-top:2%;}
.tupian ul li{ float:left; width:24%; margin-left:1%; margin-right:1%; margin-top:2%; overflow:hidden; position:relative;}
.tupian ul li img{ width:98%; overflow:hidden; border:2px solid #CCCCCC;}
.tupian ul li span{ display:block; z-index:999; position:relative; background:#FFFFFF; padding-top:2%; font-size:14px;}

.pageinfo { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 10px; COLOR: #0076BE; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center; margin-top:20px;}
.pageinfo A { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 0px 2px; COLOR: #333; PADDING-TOP: 2px; TEXT-DECORATION: none; border: 1px solid #E1E1E1; }
.pageinfo A:hover { COLOR: #E3242C; border: 1px solid #E3242C; }
.pageinfo A:active { COLOR: #E3242C; border: 1px solid #E3242C; }
.pageinfo SPAN.thisclass { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #fff; PADDING-TOP: 2px; BACKGROUND-COLOR: #E3242C; border: 1px solid #E3242C; }
.pageinfo SPAN.pageinfo { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: #FFFFFF; border: 1px solid #E1E1E1; color: #333333; }
.pageinfo SPAN.disabled {DISPLAY: none}
.pageinfo SPAN.current { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; border: 1px solid #E60011; color:#FFFFFF; background-color: #E60011; }

@media (max-width: 1000px) {
.banben{ width:90%; padding:1% 5%; margin:0px auto; background:#000000; font-size:12px;}
.top{ height:auto;}
.logo{ float:left; width:20%; padding-top:2%; padding-bottom:2%;}
.logo img{ width:100%; float:left;}
  .logo h1{ display:none;}
  .set{ display:none;}
  .inav{ display:none;}
  .s_p_top h2{ font-size:28px; color:#999999; font-weight:400;}
.s_p_top h3{ margin:0px auto; width:auto; text-align:center; font-size:14px; margin-top:0.8%; font-weight:400; color:#BCBCBC;}
.news{ display:none;}
.a_a{ display:block; width:30%; margin:0px auto; padding:2% 0px; background:#209CD8; margin-top:1%;}
.s_p_bot ul li{ float:left; width:45%; margin:0px 2%; margin-top:2%; overflow:hidden;}

.tel{ display:block; float:right; width:46px; text-align:right; margin:0px auto; padding-top:1%;}
.tel img{ width:100%;}
.logo1{ float:left; width:30%; padding-top:5%; padding-left:5%;}
.logo1 img{ width:60%;}
.nav1{ width:80%; margin:0px auto; padding-top:35%;}
.nav1 ul li{ line-height:200%;}
.nav1 ul li a{ display:block; width:auto; height:26px; color:#666666; padding-top:14px; font-weight:bold; font-size:16px; font-family:Arial;}
.nav1 ul li a:hover{ border-bottom:2px solid #1C327E; height:24px; color:#1C327E;}
.xiala{ width:46px; text-align:right; margin:0px auto; position:fixed; top:3%; right:5%;}
.xiala img{ width:100%;}

.m_t_di{ float:left; width:100%; text-align:left;}
.m_t_di ul li{ line-height:170%; text-align:left; font-size:14px; background:url(../images/add1.png) no-repeat left 5px; padding-left:22%; color:#000; margin-top:1%; font-weight:bold; margin-bottom:4%;}
.l_right{ float:right; width:100%;}
.contact1 h2{ font-size:22px; font-weight:400;}
.contact1 p{ font-size:14px; margin-top:2%; line-height:180%;}

.abo_t_left{ float:left; width:45%; text-align:left; padding-left:2%;}
.abo_t_left h2{ font-size:20px; font-weight:400; padding-top:4%;}
.abo_bot{ width:100%; margin:0px auto; float:right; overflow:hidden;}
.abo_t_right h3{ float:right; padding:2% 6%; background:#0063CC; font-size:14px; font-weight:400; margin-bottom:2%;}

.flash2{ width:100%; margin:0px auto; height:auto; z-index:111; background:url(../images/contact.jpg) no-repeat top center; margin-top:20%; padding-bottom:5%;}
.flash2 h1{ font-size:22px; color:#fff; font-weight:bold; padding-top:10%;}
.flash2 p{ width:61%; margin:0px auto; font-size:14px; color:#fff; padding-top:0.5%; text-align:center; padding-top:10px; line-height:180%;}

.pro_top h2{ font-size:22px; font-weight:400; padding-top:4%;}
.pro_c_top ul li{ float:left; margin-right:5%;}
.pro_c_bot ul li{ float:left; width:50%;position: relative; overflow:hidden; cursor:pointer;}
.pro_bot ul li{ float:left; width:31%; margin-right:2%;position: relative; overflow:hidden; cursor:pointer;}
.overlay1 {
  position: absolute;
  top: 0;
  left: 5%;
  width: 80%;
  padding:0px 5%;
  padding-bottom:5%;
  background:#fff;
   background-size:cover; /* 半透明背景 */
  color: #666;
  text-align: left;
    visibility:visible;
  z-index:9999;
  opacity: 0.9;
  transition: opacity 0.5s, visibility 0.5s; /* 平滑过渡效果 */
  display:none;
}
.overlay1 p{ font-size:12px; line-height:150%; text-align:left; padding-top:10%;}
.overlay1 a{ background:#0063CC; font-size:14px; padding:1% 4%; float:left; margin-top:5%; color:#FFFFFF;}

.show{ width:100%; margin:0px auto; margin-top:3%;}
.show_top{ width:100%; background:#f6f6f6;}
.s_t_left{ width:100%; float:left; overflow:hidden;}
.s_t_left img{ width:100%; overflow:hidden;}
.s_t_right{ width:90%; float:right; padding:5%; text-align:left;}

.weizhi{ width:80%; margin:0px auto; padding:10px 10%; background:#ccc;}

.f_abo{ display:none;}
.f_pro{ display:none;}
.f_wei{ display:none;}
.f_con{ width:90%;}
.foot{ width:90%; margin:0px auto; padding:3% 5%; background:#0063CC; color:#FFFFFF; border-top:2px solid #228BFF; line-height:180%;}

.pro_bot{ display:none;}

.flash{ width:100%; z-index:111; margin-top:20%;}
.flexslider ul.slides li h3{ font-size:18px; text-align:left; font-family:Arial; color:#FFFFFF; margin-left:5%;}
.flexslider ul.slides li h2{ font-size:22px; text-align:left; color:#FFFFFF; font-weight:400; padding-top:1%; margin-left:5%;}
.flexslider ul.slides li hr{ width:3%; margin-top:5%; height:2px; background:#FF0000; border:none; margin-left:5%;}
.flexslider ul.slides li p{ font-size:14px; color:#FFFFFF; margin-top:3%; text-align:left; margin-left:5%;}
.flexslider ul.slides li a{ background:#0063CC; color:#FFFFFF; padding:0.8% 2%; float:left; margin-top:3%; margin-left:5%;}

.fenlei ul{ width:100%; margin:0px auto;}
.fenlei ul li{ float:left; width:auto; font-size:14px; padding:1% 4%; background:#f6f6f6; margin-left:0px; margin-right:2%; margin-bottom:2%;}
.fenlei ul li:first-child{ margin-left:0px;}

.n_b_nei{ width:48%; float:left; margin-left:2%; background:#f6f6f6; overflow:hidden; padding-bottom:3%; border-radius: 10px;}
.n_b_nei:first-child{ margin-left:2%;}
.n_b_nei img{ width:100%; overflow:hidden;}
.n_b_nei h2{ width:90%; margin:0px auto; padding:0px 10%; background:#f6f6f6; font-size:14px; color:#000000; font-weight:400; text-align:left; padding-top:5%; position:relative; z-index:8888;}
.n_b_nei h3{ display:none; width:90%; margin:0px auto; font-size:12px; text-align:left; line-height:180%; color:#999999; margin-top:3%; border-bottom:1px solid #CCCCCC; padding-bottom:7%;}
.n_b_nei p{ width:90%; margin:0px auto; margin-top:7%; font-size:12px;}
.n_b_nei p span{ float:left; display:none;}
.n_b_nei a{ float:right; width:50%; display:block; border:1px solid #007CC3; color:#007CC3; padding:1.2% 0px; font-size:14px;}
.n_b_nei a:hover{ background:#007CC3; color:#FFFFFF;}

.s_i_bot ul li{ float:left; width:50%; margin-top:2%;position: relative; overflow:hidden; cursor:pointer;}

.main2{ width:80%; margin:0px auto; margin-top:3%;}
.main1{ width:80%; margin:0px auto; margin-top:3%;}

.licheng{ display:none;}
.about4{ display:block; text-align:left; line-height:180%; margin-top:2%;}
.about4 img{ width:100%;}
.zhengshu{ display:none;}

.chanpin{ width:100%; margin:0px auto; border-bottom:1px solid #CCCCCC; padding:4% 0px;}
.cp_left{ float:left; width:100%; position:relative; overflow:hidden;}
.cp_left img{ width:98%; padding:1% 1%; overflow:hidden; background:#CCCCCC;}
.cp_right{ float:left; width:100%; margin-top:1%;}
.cp_right h2{ text-align:left; font-size:18px; font-weight:400; color:#007CC3; margin-bottom:1%;}
.cp_right p{ text-align:left; height:auto; line-height:180%; font-size:14px; margin-bottom:2%;}
.cp_right a{ float:left; padding:1% 3%; border:1px solid #CCCCCC; margin-right:2%;}
.cp_right a:hover{ background:#007CC3; color:#FFFFFF; border:1px solid #007CC3;}
}

/* ----- 悬浮容器 (右下角固定) ----- */
        .float-container {
            position: fixed;
            bottom: 32px;
            right: 32px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            /* 子按钮的间距由下方独立控制，这里作为整体间距参考 */
            pointer-events: none;
            /* 让容器本身不阻挡点击，内部按钮自己控制 */
        }

        /* 所有子按钮都使用 pointer-events: auto 恢复点击 */
        .float-container>* {
            pointer-events: auto;
        }

        /* ----- 子按钮 (两个展开的图标) ----- */
        .sub-btn {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #ffffff;
            color: #1f3b4a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            box-shadow: 0 8px 24px rgba(0, 20, 30, 0.14),
                0 2px 6px rgba(0, 0, 0, 0.04);
            border: none;
            cursor: pointer;
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease,
                box-shadow 0.2s ease;
            opacity: 0;
            transform: scale(0.6) translateY(16px);
            pointer-events: none;
            /* 默认不可点击，展开后恢复 */
            position: relative;
            text-decoration: none;
            /* 移除a标签下划线 */
        }

        /* 展开状态 */
        .sub-btn.active {
            opacity: 1;
            transform: scale(1) translateY(0);
            pointer-events: auto;
        }

        /* 子按钮悬停效果 */
        .sub-btn:hover {
            transform: scale(1.08) translateY(-2px) !important;
            box-shadow: 0 14px 32px rgba(0, 20, 30, 0.2);
        }

      /* 不同子按钮颜色 */
        .sub-btn.wechat {
		background:none;
            color: #49E670;
        }

        .sub-btn.qq {
		background:none;
            color: #3AB20B;
        }


        /* 子按钮上的小标签（微信 / QQ） */
        .sub-btn .label {
            position: absolute;
            right: calc(100% + 16px);
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 500;
            padding: 4px 12px;
            border-radius: 40px;
            white-space: nowrap;
            letter-spacing: 0.3px;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* 悬停时显示标签 */
        .sub-btn:hover .label {
            opacity: 1;
        }

        /* ----- 主按钮 (固定图标) ----- */
        .main-btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1b6d8a, #0e4a61);
            color: #ffffff;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 40, 60, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                background 0.3s ease;
            position: relative;
            z-index: 2;
            pointer-events: auto;
            /* 主按钮永远可点击 */
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .main-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 14px 40px rgba(0, 40, 60, 0.45);
        }

        .main-btn:active {
            transform: scale(0.92);
        }

        /* 主按钮内的图标 (使用 Font Awesome) */
        .main-btn i {
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s ease;
            display: block;
        }

        /* 展开状态：主按钮图标旋转 (plus → times) */
        .main-btn.expanded i {
            transform: rotate(90deg);
            /* 或者直接切换图标，这里用旋转加替换 */
        }

        /* 我们用两个图标切换，更干净 */
        .main-btn .icon-plus {
            display: block;
        }

        .main-btn .icon-times {
            display: none;
        }

        .main-btn.expanded .icon-plus {
            display: none;
        }

        .main-btn.expanded .icon-times {
            display: block;
        }

        /* 主按钮展开时背景微调 */
        .main-btn.expanded {
            background: linear-gradient(135deg, #2c4f62, #1a3645);
            box-shadow: 0 10px 30px rgba(0, 20, 30, 0.4);
        }

        /* ----- 动画: 子按钮交错延迟 (通过JS控制) ----- */
        /* 我们使用JS动态添加active类，并通过CSS transition处理动画 */

        /* 小屏适配 */
        @media (max-width: 480px) {
            .float-container {
                bottom: 20px;
                right: 20px;
            }
            .main-btn {
                width: 60px;
                height: 60px;
                font-size: 26px;
            }
            .sub-btn {
                width: 50px;
                height: 50px;
                font-size: 22px;
            }
            .sub-btn .label {
                font-size: 0.65rem;
                padding: 3px 10px;
                right: calc(100% + 12px);
            }
            .demo-card {
                padding: 2rem 1.5rem;
                margin: 0 1rem;
            }
            .demo-card h1 {
                font-size: 1.6rem;
            }
        }

        /* 辅助: 按钮点击波纹 (简单装饰) */
        .main-btn::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.15);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .main-btn:active::after {
            opacity: 1;
        }

        /* 子按钮点击反馈 */
        .sub-btn:active {
            transform: scale(0.88) !important;
        }

        /* 让标签在移动端也有更好的触感 */
        @media (hover: none) {
            .sub-btn .label {
                display: none;
            }
        }