@charset "gb2312";
/* by relten */

html, body { scroll-behavior:smooth; }
body, div, ul, ol, li, dl, dt, dd, p, form, input, select, h1, h2, h3, h4, h5, h6 { margin:0; padding:0;}
body { color:#333; font-family:"微软雅黑" }
input, select, img { vertical-align:middle; }
img { border:0; }
ul, li { list-style:none; }
a:link, a:visited { color:#333; text-decoration:none; }
a:hover { color:#e6212a; }
a.fa:link, a.fa:visited { color:#333; text-decoration:none; }
a.fa:hover { color:#fff; }
a.ba:link, a.ba:visited { color:#000; text-decoration:none; }
a.ba:hover { color:#c00; }
a.ca:link, a.ca:visited { color:#fff; text-decoration:none; }
a.ca:hover { color:#fff; }
a.da:link, a.da:visited { color:#aaa; text-decoration:none; }
a.da:hover { color:#fff; }
a.ra,
a.ra:hover {
  color: red !important;
}

#width { width: 1440px; margin: 0 auto; clear: both;}
.red { color: #e6212a;}
.font14 { font-size: 14px!important; color: #999; padding-top: 10px; line-height: 22px;}

#top { width:100%; height: 120px; background-color:#fff; transition: all 0.5s;}
.top_width { width:90%; margin:0 auto; transition: all 0.5s;}

#logo { margin: 25px auto; clear: both; overflow: hidden;}
#logo img { width:260px;}
#logo { float: left;}

#menu { width:55%; float:right;}
#menu ul { font-weight:bold; font-size:16px;}
#menu ul li{ float:left;margin: 35px 25px 25px 25px; line-height:40px;}
#menu ul li:hover{ border-bottom:solid 2px #C00; color:#C00;}

.sub_menu { background: #fff; text-align: center; display: none; position: absolute; color: white; padding:20px 25px; margin-left: -75px; opacity: 0.9; border-top:2px solid #c00; z-index: 99999999; box-shadow: 0 0 12px #aaa;}
.sub_menu div {  font-size: 14px; line-height: 36px; font-weight:normal; color:#000; border-bottom:1px solid #eee;}
#menu li:hover .sub_menu { display: block; transition: all 0.5s; margin-top: 0px; z-index: 99999999;}

.sub_menu2 { background: #fff; text-align: center; display: none; position: absolute; color: white; padding:20px 25px; margin-left: -40px; opacity: 0.9; border-top:2px solid #c00; z-index: 99999999; box-shadow: 0 0 12px #eee; transform: translate(0);}
.sub_menu2 div {  font-size: 14px; line-height: 36px; font-weight:normal; color:#000; border-bottom:1px solid #eee;}
#menu li:hover .sub_menu2 { display: block; transition: all 0.5s; margin-top: 0px; z-index: 99999999;}

.sub_menu3 { background: #fff; width: 120px; margin: -56px 0 0 150px; text-align: center; display: none; position: absolute; color: white; padding:20px 25px; opacity: 0.9; z-index: 99999999;}
.sub_menu3 p {  font-size: 14px; line-height: 36px; font-weight:normal; color:#000; border-bottom:1px solid #eee;}
#sub_m_2:hover .sub_menu3 { display: block; transition: all 0.5s; z-index: 99999999;}




#banner img { width:100%;}


#cheng {background-color:#eee; padding:15px 0;clear: both; overflow: hidden;}

#about_home {
  width: 100%;
  margin: 0 auto;
  overflow: hidden; /* 清除浮动，传统写法 */
}

/* 左侧图片：左浮动，宽度自适应 */
.about_home_l {
  float: left;
  width: 48%; /* 左右各占近一半，自动缩放 */
  margin: 0;
  padding: 0;
}

/* 图片自动适应容器，不拉伸 */
.about_home_l img {
  width: 100%;
  height: auto;
  border: 0;
  display: block;
}
.about_home_r {
  float: right;
  width: 48%;
  margin: 0;
  padding: 0;
}
.about_home_center {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box; /* 老浏览器也支持 */
}
		.about_home_r h1 { font-weight:normal; line-height:100px; padding-left:30px;}
		.about_home_r h4 { font-weight:100; line-height:30px; color:#999; padding-left:30px;}
		.about_home_center ul { margin-top:70px;}
		.about_home_center li { float:left; color:#999; font-size:12px; border-right:1px solid #eee; padding:0 30px;}		
		.about_home_center li:last-child {  border-right:none;}
		.about_home_center li h2 { font-size:46px; color:#C00; font-weight:normal;}



#product_home { padding:80px 0;}
#product_home h1 { font-weight:normal; line-height:80px; margin:0 auto; width:400px;}
#product_home h4 { font-weight:100; line-height:30px; color:#999; margin:0 auto; width:600px;}
#pic_list { width:90%; margin:30px auto;display: flex; justify-content: space-between;position: relative; }
.p_img { width: 31%; text-align: center;}
.p_img img { width: 100%; height: auto;}
.p_img p { line-height:30px;}


.pro_arrow_prev { width: 45px; height: 45px; background-image: url(../img/left-arrow.png); background-size: auto auto; background-repeat: no-repeat; background-color: #fff; background-position: center center; border-radius:50%;box-shadow:0 0 15px 5px rgba(0, 0, 0, 0.1); left: -3%; position: absolute; top: 50%; opacity: 0.35;}
.pro_arrow_next { width: 45px; height: 45px; background-image: url(../img/right-arrow.png); background-size: auto auto; background-repeat: no-repeat; background-color: #fff; background-position: center center; border-radius:50%;box-shadow:0 0 15px 5px rgba(0, 0, 0, 0.1); right: -3%; position: absolute; top: 50%; opacity: 0.5;}




#footer { background-color:#272727; padding:3.5%;}
.footer_logo { width:80%; margin:0 auto; border-bottom:1px solid #333; overflow:hidden;}
.f_logo { float:left;}
.f_seo { color:#fff; padding-left:50px; line-height:60px; float:left;}

.footer_menu  { width:80%; margin:50px auto; overflow:hidden;}
.footer_menu dl { color:#fff; float:left; margin-right:60px; overflow:hidden;}
.footer_menu dl dt { line-height:60px; display:block; position:relative; margin-bottom:15px; font-size:18px;}
.footer_menu dl dt::after {content: ''; position: absolute;  left: 0; bottom: 0; width: 25px; height: 1px;  background-color: #474747;}
.footer_menu dl dd { color:#aaa; font-size:14px; line-height:32px;}
.footer_vx { float:right; width:130px; margin-top:20px;}
.footer_vx p { text-align:center; color:#aaa; line-height:36px;}
.footer_vx img { width:100%;}

#search { background-color:#272727; padding:3.5%; border-top:1px solid #333;}
.copyright { width:40%; float:left; color:#eee; font-size:12px;}
.search { float:right; width: 59%;}
.search form { float:right; min-width: 230px; }
.ico { float:left; line-height: 30px; text-align: right; width: 60%; color: #fff;}
.ico img { padding: 0 0 0 10px;}
.search .input{width: 175px;  height: 25px; line-height: 25px;   padding: 5px 10px;  font-size: 14px;  background-color: #3d3d3d; outline: none; color: #fff;  border: none;}

.search .input_button{ border: none; height: 35px; width: 35px; background-image: url(../img/search.jpg);}


#about_history {
	display: flex;
	flex-wrap: wrap;
	gap: 16px; /* 图片之间的间距，可自由修改 */
	padding: 20px 0;
	max-width: 1280px;
	margin: 0 auto;
}

.history_img {flex: 1 1 calc(33.333% - 12px); 
  min-width: 280px; /* 最小宽度，防止挤压变形 */
  text-align: center;}

.history_img strong{ color: #c00; line-height: 36px }
.history { display: none !important; }
.history h1{ line-height: 80px; font-weight: normal; }


#left_ico { position: fixed; top: 200px; right: 0px; }
#left_ico li { clear: both; background-color: #fff; padding: 8px; width: 40px; margin-bottom: 10px; border-radius: 10px 0 0 10px; box-shadow:0 0 4px 2px rgba(0,0,0,0.1);}
#left_ico li img { width: 100%; }


.left_vx { position: relative; display: none;}

.left_vx::after{
  content: '';
  position: absolute;
  right:-15px;
  top:18%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #eee;
}

#l_vx:hover .left_vx { display:block; position: absolute; border: 1px solid #eee; background-color: #fff; padding: 10px; width: 150px; left: -192px; margin-top: -48px; border-radius: 10px;}

.left_skype { position: relative; display: none;}

.left_skype::after{
  content: '';
  position: absolute;
  right:-15px;
  top:50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #eee;
}

#l_skype:hover .left_skype { display:block; position: absolute; border: 1px solid #eee; background-color: #fff; padding: 10px; width: 92px; left: -132px; margin-top: -48px; border-radius: 10px;}


/* 父容器：控制所有卡片怎么排列 */
#about_core {
  display: flex;          /* 1. 开启弹性布局，让子元素横着/自动排列 */
  flex-wrap: wrap;        /* 2. 自动换行：一行放不下就自动换到下一行 */
  justify-content: space-between; /* 3. 两端对齐：左边贴左、右边贴右，中间平均分开 */
  gap: 16px;              /* 4. 卡片之间的左右间距 */
}

/* 子卡片：每个图片+文字的小盒子 */
.core_img {
  flex: 0 1 calc(33.333% - 12px); /* 6. 一行默认放3个，减去间距 */
  min-width: 260px;        /* 7. 最小宽度，缩到260px就自动换行 */
  text-align: center;      /* 8. 里面的图片和文字水平居中 */
  box-sizing: border-box;  /* 9. 固定盒子大小，不会被padding撑变形 */
}

/* 图片样式 */
.core_img img {
  max-width: 100%;        /* 10. 图片最大宽度=父盒子宽度，不会超出 */
  height: auto;           /* 11. 高度自动等比例，不会拉伸变形 */
  display: block;         /* 12. 去掉图片默认的底部空白 */
  margin: 0 auto 10px;    /* 13. 图片水平居中，底部留10px空隙 */
}

/* 文字样式 */
.core_img p {
  margin: 0;              /* 14. 去掉文字默认的外边距 */
  line-height: 1.5;       /* 15. 行高=1.5倍，文字更舒服 */
  font-size: 15px;        /* 16. 文字大小 */
}

#about_core div { margin-bottom: 30px;}










/* by about */

#about_sub_menu { margin:0 auto; width: 100%; background-color: #f1f1f1; z-index: 99;text-align: center; padding: 30px 0;}
#about_sub_menu ul {display: inline;}
#about_sub_menu ul li {line-height: 30px; display: inline;margin: 0 8px;}

.about_sub_top { position: fixed; top: 120px; left: 0; transition: all 0.3s ease; }
.sub_top { position: fixed; top: 0; left: 0; z-index: 9999; border-bottom:1px solid #eee;transition: all 0.3s ease;}


#about_company { margin:50px 0;}
.about_com { background-image:url(../img/jzl_03.jpg) ;background-repeat: no-repeat;background-size:auto 100%; padding: 50px;}
.about_com h1 {  font-weight: normal; line-height: 80px; color: #fff;}
.about_com h2 {  line-height: 80px;}
.about_com p {  line-height: 30px; color: #fff!important; width: 60%;}
#about_company h2 {  line-height: 80px; color: #333; font-size: 20px;}
#about_company p {  line-height: 30px; color: #333; font-size: 14px;}
#about_company ul { margin-bottom: 50px;}
#about_company li {  float: left; line-height: 50px;  width: 347px; margin-right: 30px;}
#about_company li p {  line-height: 24px; text-align: center; color:#000;}


.about_company_num { background-color: #f9f9f9; display: flex; justify-content: center; gap:25px;}
.about_company_num dl { padding: 25px 40px; border-right:1px solid #eee; margin: 25px 0;}
.about_company_num dl:last-child { border-right:none;}
.about_company_num dt { font-size: 40px; color: #CC0609; line-height: 50px;}
.about_company_num dd { color: #999; line-height: 50px;}

.about_Culture  h1 {  font-weight: normal; line-height: 80px; margin-top: 50px;}
.about_Culture  li { width: 460px; float: left; padding-right: 30px; margin-top: 20px;}
.about_Culture li:nth-child(3) {  padding-right: 0 !important;}
.about_Culture li p { font-size: 14px; line-height: 24px; padding: 20px 0; color: #666;}

#width h1 {  font-weight: normal; line-height: 120px;}

.about_core { width: 100%; background-color: #eaeaea;}
.about_core img { padding: 80px 0;}

.img-item img {  width: 100%;  display: block;  object-fit: cover;}
.img-item dd { text-align: center; line-height: 30px;}

.core_page h1 {  font-weight: normal; line-height: 50px !important; margin-top: 50px;}
.core_page h4 {  font-weight: normal; color: #999; line-height: 30px;}

#width.pro { padding: 25px; }
#width.pro ul { display: flex;  flex-wrap: wrap;}
#width.pro ul li { width: 30%;  text-align: center;  margin: 20px; border: 1px solid #eee; border-radius: 10px 10px 0 0; padding: 15px 0 0;}
#width.pro ul li:hover {border: 1px solid #e6212a;}
#width.pro ul li p { line-height: 50px; background-color: #fafafa;}
#width.pro ul li img { width: 100%;  display: block; height: auto;}

#width.pro dl { width: 1280px;  margin: 30px auto;  display: flex; justify-content: center; align-items: center;}
#width.pro dl dd { float: left; text-align: center; line-height: 36px; padding: 5px 15px; border: 1px solid #eee; margin: 15px;}
#width.pro dl dd:hover { border: 1px solid #e6212a;cursor: pointer;}

.pro_l { width:40%; float: left;}
.pro_l img { width:100%;}
.pro_r { width:59%; float: right; padding-top: 50px;}

#width.solution { padding: 25px; margin-top: 50px;}
#width.solution ul {}
#width.solution ul li { width: 30%;  text-align: center; float: left; margin: 20px; box-shadow:5px 5px 10px #ddd;}
#width.solution ul li p { line-height: 50px; font-size: 18px;}
#width.solution ul li img { width: 100%;  display: block;}

.solution_l {  width:70%; float: left;}
.solution_l h1 {  border-bottom: 1px solid #eee;}
.solution_l h2 { font-weight: normal; line-height: 56px; padding-top: 50px;}
.solution_l p { line-height: 26px; color: #666; padding-bottom: 50px;}
.solution_l p img {  width: 100%;  display: block;}
.solution_r {  width:26%; float: right;}

.solution_r dd { clear:both; margin-bottom: 50px; text-align: center; box-shadow:5px 5px 10px #ddd;}
.solution_r dd p { line-height: 50px; font-size: 18px;}

.Social { text-align: center; width: 100%; padding: 50px 0;}


.Contact_l { width:30%; float: left;}
.Contact_l img { width:100%;}
.Contact_r { width:60%; float: right;}
.Contact_r h2 { padding-top: 60px;}
.Contact_r p { font-size: 18px; line-height: 36px; padding-top: 30px;}




/*  以下为手机版样式  */

@media screen and (max-width:1920px){
	#menu {
    width: 65%;
    float: right;
}
}



@media screen and (max-width:1445px){
	.top_width { width:100%;}
	#menu { width:75%; float:right;}	
	#width { width: 90%;}
	#width.solution ul li { width: 30%;  text-align: center; float: left; margin: 10px; box-shadow:5px 5px 10px #ddd;}
	.about_home_l { float:left; width:40%;}	
	.about_home_r { width:60%;}
	.about_home_r h1 { line-height:50px; padding-left:30px;}
	.about_home_r h4 { padding-left:30px;}
	.about_home_center { width:90%; padding:30px 0;}
	.about_home_center ul { margin-top:20px;}
	.about_home_center li { padding:0 30px;}
	.about_home_center li h2 { font-size:36px; color:#C00; font-weight:normal;}
	#width.pro ul li { margin: 10px;}
}



@media screen and (max-width:1280px){
	.top_width { width:100%;}
	#menu { width:75%; float:right;}
	#menu ul li{ margin: 35px 10px 15px;}
	.about_home_l { float:left; width:35%;}	
	.about_home_r { width:65%;}
	.about_home_r h1 { line-height:30px; padding-left:30px;}
	.about_home_r h4 { padding-left:30px; line-height: 26px;}
	.about_home_center { width:90%; padding:30px 0;}
	.about_home_center ul { margin-top:10px; margin-left: 15px;}
	.about_home_center li { padding:0 15px;}
	.about_home_center li h2 { font-size:30px; color:#C00; font-weight:normal;}
	.footer_vx { display: none;}
	.f_seo { display: none;}
	#width { width: 90%;}
	.about_Culture li:nth-child(3) {  padding-right: 30px !important;}
	.copyright { width:35%;}
	.search { width: 64%;}
	.ico { width: 50%;}
	
	
	.about_company_num dt { font-size: 24px;}
	.about_company_num dd { line-height: 24px;}
	.about_company_num dl { padding: 5px;}
}


@media screen and (max-width:1055px){
	.top_width { width:100%;}	
	#logo img { width:200px;}
	#menu { width:75%; float:right;}
	#menu ul li{ margin: 35px 10px 15px 10px;}
	
	
	.footer_vx { display: none;}
	.f_seo { display: none;}
	#width { width: 90%;}
	.about_Culture  li { width: 380px;}
	.about_Culture li:nth-child(3) {  padding-right: 30px !important;}
	.Contact_l img { padding: 20% 15%;}
	.about_company_num dl { padding: 5px;}
	#width.pro dl { width: 100%;}
}

@media screen and (max-width:1024px){
	#menu { width:75%; float:right;}
	#menu ul li{ margin: 35px 10px 15px;}
}
@media screen and (max-width:888px){
	#menu { width:100%; float: left; clear: both; background-color: #fff;}
	
	.about_home_l { float:left; width:100%;}
	.about_home_l img {width:92%;margin-left: 4%;}
	.about_home_r { width:100%;}
	.about_home_r h1 { line-height:50px; padding-left:30px;}
	.about_home_r h4 { padding-left:30px; line-height: 30px;}
	.about_home_center { width:90%; padding:30px 0;}
	.about_home_center ul { margin-top:10px; margin-left: 15px;}
	.about_home_center li { padding:30px;}
	.about_home_center li h2 { font-size:30px; color:#C00; font-weight:normal;}
}

@media screen and (max-width:820px){
	.copyright { display: none}
	.search { width: 100%;}
	.ico { width: 50%; text-align: left;}
	.pro_arrow_prev { display: none;}
	.pro_arrow_next { display: none;}
}


@media screen and (max-width:768px){
	.top_width { width:100%;}
	#logo { margin: 25px 0 0;}
	#logo img { width:200px;}
	#menu { width:100%; float: left; clear: both; background-color: #fff;}
	#menu ul li{ margin: 35px 15px 15px 15px;}
	
	.footer_vx { display: none;}
	.f_seo { display: none;}
	#width { width: 98%; box-sizing: border-box; }
	.about_Culture  li { width: 300px;}
	.about_Culture li:nth-child(3) {  padding-right: 30px !important;}
	.Contact_l img { padding: 20% 15%;}
	#footer { display: none;}
	#about_sub_menu ul { gap:20px;}
	#about_sub_menu { clear:both;}
	.about-history { display: none;}
	.history { display: block !important;}
	#width.solution ul li { width: 45%;   margin: 10px; box-shadow:5px 5px 10px #ddd;}
	#width.solution ul li p { line-height: 30px; font-size: 14px;}
	.solution_l {width: 100%}
	.solution_r {width: 100%}
	.about_com p {  width: 100%;}
	
	#width.pro ul li { width: 45%;}
	
}
@media screen and (max-width:736px){
	#menu { display: none;}
	
	.about_Culture  li { width: 460px;}
	.about_company_num dt { font-size: 18px;}
	.about_company_num dd { line-height: 14px;}
	.about_company_num dl { padding: 5px;}
	
	
}

@media screen and (max-width:540px){
	.top_width { width:100%;}
	#logo { margin: 25px 0 0;}
	#logo img { width:200px;}
	#menu { display: none;}
	



	
	.about_home_center li { float: none;}
	.footer_vx { display: none;}
	.f_seo { display: none;}
	
	
	.Contact_l { width: 100%;}
	.Contact_r { width: 100%; float: left; margin: 15px;}
	.about_company_num dt { font-size: 20px;}
	.about_company_num dd { line-height: 24px;font-size: 14px;}
	.about_company_num dl { width: 150px;}
	#footer { display: none;}
	#pic_list { width:100%; margin: 0;}
	
	.about-history { display: none;}
	.history { display: block !important;}
	#width.pro dl dd { margin: 5px;}
	#width.pro ul { gap:1.25%;}
	

	
	.pro_l { width:100%; float: left;}
	.pro_l img { width:100%;}
	.pro_r { width:100%; float: left;}
	
	.p_img{ width: 90%;}
	
	.ico { display: none;}
	.core_img {  min-width: 360px;}
	#width.pro { padding: 25px 0;}
	#width.pro ul li { width: 44%;}
	#width.pro ul li p { font-size: 14px;}
	
	#width h1 { font-size: 26px;}
}