﻿
@media (max-width: 1441px) {
	
	.aboutleft{  margin-left:-650px;}
	.aboutleft li{line-height:50px; cursor:pointer; }
	
	.aboutright{ float:right; width:1200px; padding-right:20px; padding-top:140px; height:860px}
}


@media (max-width: 1401px) {
	.wrap{ width:1200px; margin:0 auto;}
	.aboutmain .wrap{ width:1200px; margin:0 auto}
	.list{ height:390px; overflow:hidden;}
.list li{ float:left; width:390px; margin-right:15px; overflow:hidden}
.list li img{ width:390px; height:390px;}

.list2 li{ float:left; width:390px; margin-right:15px; overflow:hidden; margin-bottom:15px;}
.list2 li img{ width:390px; height:390px;}
.aboutright{ float:right; width:1070px; padding-right:0;padding-top:100px; height:900px}

	.aboutlist2 li .libox{ position:absolute; z-index:3; left:20%; top:20%; display:none}
	.left{ float:left; width:100%}
.right{ float:right; margin-top:0; width:300px;}

.leftbox{ width:700px;}
.aboutlist3 li{  width:390px;margin-bottom:15px; margin-right:15px;}
.aboutlist3 li .liboximg img{ width:390px; height:390px;}

.aboutdiv .l{ float:left; padding-left:40px;}
.aboutdiv .l img{ width:400px;}
.aboutdiv .r{ padding-left:40px;}

.aboutleft{  margin-left:-600px;}


	
	}
	
	
	
	@media (max-width: 1201px) {
		.wrap{ width:100%; padding:0 10px;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
		
		.head{  height:87px; padding:0 0;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
		.head .wrap{ padding:0;}
		
		.nav{ display:none}
		.logo{  padding:15px 0 0 0; position:static; width:100%; text-align:center}
		.logo img{ display:block; margin:0 11px}
		
		
		.hwx{ display:block}
		.monav { display:block; width:100%; padding:0 20px;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  }
		
		.monavlist{ width:100%;  text-align:center;display: flex;flex-direction: row;justify-content: space-between; }
		.monavlist li{ padding:15px 0 14px; font-size:14px;position:relative; z-index:2223;font-family:"Hum"; }
		.monavlist li:nth-child(2){ margin-left:24px;}
	.monavlist li i{ background:url(../images/list.svg) no-repeat; background-position:center top; background-repeat:no-repeat;background-size:cover; width:10px; height:10px; display:inline-block; margin-left:5px;}
	
	.monavlist li a{ color:#606060}
	.monavlist li.hover,.monavlist li.cur{ color:#d9d9d9; background:url(../images/line.jpg) center bottom no-repeat; display:block;}
	.monavlist li.hover a,.monavlist li.cur a{ color:#d9d9d9}
	.monavlist li.hover i,.monavlist li.cur i{background:url(../images/list2.svg) no-repeat; background-position:center top; background-repeat:no-repeat;background-size:cover;}
	
	
	
	.mobox{ position:absolute; top:87px; left:0; width:100%; z-index:2223; display:none; background:url(../images/bgnav.png) repeat; width:100%}
   .mobox ul{ width:80%;  margin:0 auto;}
	.mobox li { padding:0; text-align:center; line-height:70px; font-size:16px; background:url(../images/navline.png) 0 bottom repeat-x; font-family:"Hum";}
	.mobox li a{ color:#d9d9d9; display:block}
	
	.title{ display:none}
	.banner_web{ float:left; width:100%;}
	.sp{ display:block}
	.pc{ display:none}
	.sp-height{ display:block; height:87px; clear:both; width:100%; overflow:hidden}
	
	.list{ height:auto; overflow:hidden;}
	.list li{ float:left; width:49%; margin-right:2%; margin-bottom:10px; overflow:hidden}
.list li img{ width:100%; height:180px;}
.list li:nth-child(3){margin-right:2%; }
.list li:nth-child(2n){ margin-right:0}

.list li h2{ position:absolute; left:0; bottom:0; width:100%; text-align:center; font-size:16px;  z-index:2; height:auto; line-height:20px; padding:10px 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;  background:url(../images/masksp.png) 0 0 repeat-x;  }

	.foot{ float:left; width:100%; margin:20px 0; text-align:center}
	.foot .l{ position:static; display:block; margin-bottom:20px; text-align:center}
	.foot .l img{ margin:0 9px}
	.foot .r { position:static; display:block; margin-bottom:20px; text-align:center; width:100%; clear:both; float:left;display: flex;flex-direction: row;justify-content: center;}
	.foot .r span{ margin:0 10px; float:inherit; display:inline-block}
	.foot .r .sp2{ display:inline-block}
	

.indexmain{ float:left; width:100%; margin-top:10px;}
.mtitle{ padding-top:20px; height:42px;}

/*产品*/
.title2{ display:none}
.title3{ display:none}
.mnav{ display:none}
.main{ float:left; width:100%; margin-top:0;}
.workmain{ background:#000; padding-bottom:0;}
.workmain .wrap{ padding:0;}

.list2 li{ float:left; width:100%; margin-right:0; overflow:hidden; margin-bottom:15px;}
.list2 li img{ width:100%; height:100%;}


.pages{ float:left; width:100%; padding:10px 0 0 0; text-align:center; display:none}
.pages a{ display:inline-block; width:36px; line-height:36px; margin:0 auto; background:#1a1a1a; color:#606060; font-size:16px; margin:0 5px;}
.worknav{ display:block; height:50px; line-height:50px; width:100%; padding:0 10px;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; clear:both; color:#606060;font-family:"SF";background:#181818; overflow:hidden; position:fixed; top:87px; text-align:left; text-transform:uppercase}
.worknav i{ font-size:22px; font-weight:bold; font-style:italic; margin-right:5px;font-family:"SFTT";}	


.list2 li h2{ position:static; left:0; bottom:0; width:100%; text-align:center; font-size:18px;  z-index:2; line-height:60px; background:#181818;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; overflow:hidden; padding-top:0; height:60px;}

.wrap2{width:100%; padding:0 10px;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  }
.nohead{ display:none}

.deback{ position:fixed; width:30px; left:10px; top:10px; z-index:2222222; display:block}
.deback2{position:fixed; width:30px; left:10px; top:10px; z-index:2222222;}
.deback .debackbg,.deback2 .debackbg{ width:30px; height:30px;}
.deback span,.deback2 span{ position:absolute; left:0; top:0; width:30px; height:30px; }
.dett{ float:left; width:100%; padding:0 0 30px 0; margin-bottom:30px; }
.dett img{ display:block}
.dett h1{ text-align:center; font-size:30px; color:#d9d9d9; margin-bottom:30px;}
.time{ text-align:center}







.decon1{ float:left; width:100%; margin-bottom:30px; height:auto;flex-direction:row;}
.decontab{ float:left; width:50%; border-left:1px solid #181818;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height:auto;}
.detab-1{ font-size:14px; line-height:16px; padding:6px 0; padding-left:10px; }
.detab-1 span{ display:inline-block; float:none; padding-right:10px; width:56px;}
.decontab2 .detab-1{ padding:6px 0;padding-left:10px;}
.decon1 .decontab:nth-child(1){ padding-top:10px;}
.decon1 .decontab:nth-child(2){ padding-top:10px;}
.decon1 .decontab:nth-child(5){ padding-bottom:10px;}
.decon1 .decontab:nth-child(6){ padding-bottom:10px;}



/*about */
.aboutmain{ float:left; width:100%; padding:0 0 30px 0;}

.aboutmain .wrap{ width:100%; padding:0 10px;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }


.aboutleft{ display:none}
.aboutright{ float:right; width:100%; padding-top:0; height:auto;}
.aboutbox{ display:block; padding-top:40px; display:block; clear:both}
.motitle{ display:block; font-size:18px; color:#909090; margin-bottom:30px; font-weight:bold}
.aboutcon1{ color:#606060; line-height:24px;}

.aboutconbox{opacity:1;}


.aboutlist2 li:hover .libg,.aboutlist2 li:hover .libox{ display:block }
.aboutlist2 li{ float:left; width:25%;overflow:hidden; position:relative}
.aboutlist2 li .libox{ position:absolute; z-index:3; left:10%; top:10%;}
.aboutlist2 li .libox .p1{ font-size:12px; color:#adadad; font-weight:bold; margin-bottom:5px;display:none;}
.aboutlist2 li .libox .p2{ font-size:14px; color:#d9d9d9; font-weight:bold; margin-bottom:5px;padding-top:5px;}
.aboutlist2 li .libox .line{ width:20px; display:block; height:1px; overflow:hidden; background:#adadad; margin-bottom:5px;}
.aboutlist2 li .libox h2{ font-size:14px; color:#d9d9d9; font-weight:bold; }
.aboutlist2 li .libox h2 i{ font-size:12px; font-family:"SFLI"; color:#adadad; margin-left:0;vertical-align:bottom;display:block;padding-top:4px;}

.aboutban1 img{ width:100%; float:left; margin-bottom:30px;}



.serlist li{ float:left; width:25%; padding:0 5px;box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin-bottom:20px; }
.serlist li img{ height:32px; margin:0 auto;}

.aboutmain2{ float:left; width:100%; padding:60px 0 50px 0;}
.fanhui{ display:none}
.sp-jiao{ display:block; margin:0 auto; text-align:center; margin-bottom:20px; width:20px; height:20px; background:url(../images/downjiao.svg) no-repeat}
.left{ float:left; width:100%}
.right{ float:right; margin-bottom:30px; width:100%}
.left h1{ font-size:30px; color:#999; margin-bottom:10px; text-align:center}

.left h2{ font-size:16px; font-weight:bold;color:#606060; text-align:center; margin-bottom:30px;}
.leftbox{ margin-top:0;color:#606060; line-height:28px; font-size:16px; width:100%;}
.aboutmain3{ float:left; width:100%; padding:40px 0 50px 0;}
.abouttext{ display:none}

.aboutlist3 li{ float:left; width:100%;  overflow:hidden; margin:0; position:relative; cursor:pointer}
.aboutlist3 li .liboximg{ margin-bottom:20px;}
.aboutlist3 li .liboximg img{ width:100%; height:100%; display:block}


.aboutlist3 li:hover .libg,.aboutlist3 li:hover .libox{ display:none}

.aboutdiv{ position:static; left:0; top:0; width:100%;  height:auto; z-index:23;  padding:0;}
.closebox{ float:right; padding:28px 38px 28px 0; cursor:pointer; display:none}
.aboutdiv .l{ float:left; padding-left:0; display:none}


.aboutdiv .r{ float:left; padding-left:0; width:100%; font-size:16px; color:#606060; line-height:28px; margin-top:0;}
.aboutdiv .r h1{ font-size:30px; font-weight:bold; margin-bottom:10px; text-align:center}
.aboutdiv .r h2{ font-size:16px; font-family:"SF"; color:#606060; font-style:italic; margin-bottom:30px; text-align:center}
.aboutdiv .r h2 i{ font-weight:bold;font-style:italic; margin-right:10px; font-size:18px;}
.aboutdiv .sp-box{ display:block; margin-bottom:20px;}
.aboutdiv .sp-box img{ display:block; width:100%;}
.aboutfoudong{opacity:1; color:#606060}

.aboutlist3{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-start;margin-bottom:0}

.aboutcon2 .popin {
	position:static;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:100;
	align-items:left;
}

.aboutcon2 .popin .wrapper {

	display:flex;
	align-items:left;
	position:static;

	z-index:1;
	top:0;
	margin-top:0;
	margin-bottom:0
	
}
.aboutcon2 .popin .background{ display:none}



/*.aboutlist3 li{ width:450px; margin-bottom:25px; cursor:pointer}
.aboutlist3 li .liboximg{ position:relative; overflow:hidden}
.aboutlist3 li .liboximg img{ width:450px; height:450px; display:block}
.aboutlist3 li .liboximg img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);}
.aboutlist3 li:hover .liboximg  img{transform: scale(1.08);-ms-transform: scale(1.08); -moz-transform: scale(1.08);-webkit-transform: scale(1.08); -o-transform: scale(1.08);}

.aboutlist3 li .libg{ position:absolute; z-index:2; background:#000;opacity:0.7; height:100%; width:100%;  display:none;}
.aboutlist3 li .libox{ position:absolute; z-index:3; left:0; width:100%; top:28%; text-align:center; display:none}
.aboutlist3 li .libox .p1{ font-size:30px; color:#d9d9d9; font-weight:bold; margin-bottom:60px;}
.aboutlist3 li .libox .p2{ font-size:22px; font-family:"SFTT"; color:#adadad; font-style:italic; font-weight:bold; margin-bottom:6px;}
.aboutlist3 li .libox .p3{ font-size:14px; font-family:"SFLI"; color:#adadad; font-style:italic; }

.aboutlist3 li:hover .libg,.aboutlist3 li:hover .libox{ display:block}
.aboutcon2{ float:left; width:100%; position:relative}

.aboutlist3{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;

	margin-bottom:-1.60584%

}
.aboutcon2 .popin {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:100;
	align-items:center;

transition:all .5s cubic-bezier(.16, 1.08, .38, .98);
	transition-property:opacity, visibility, transform;
	opacity:1;
	display:none
	
	
	
}



.aboutcon2 .popin .wrapper {

	display:flex;
	align-items:center;
	position:-webkit-sticky;
	position:sticky;
	z-index:1;
	top:150px;
	margin-top:50px;
	margin-bottom:50px
	
}

.aboutcon2 .popin .background {
	background:#000;
	opacity:.85;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}



.aboutdivbg{position:fixed; left:0; top:0; width:100%; background:#000; height:100%;opacity:0.7; z-index:22; display:none}

.closebox{ position:absolute; right:30px; top:0; cursor:pointer}
.closebox span{ display:block; width:16px; height:16px; background:url(../images/close.svg) no-repeat;}
.aboutdiv .l{ float:left; padding-left:60px; width:500px; margin-top:30px;}
.aboutdiv .l img{ width:100%}

.aboutdiv .r{ float:left; padding-left:60px; width:583px; font-size:16px; color:#d9d9d9; line-height:30px; margin-top:60px;}
.aboutdiv .r h1{ font-size:42px; font-weight:bold; margin-bottom:30px;}
.aboutdiv .r h2{ font-size:25px; font-family:"SFLI"; color:#606060; font-style:italic; margin-bottom:60px;}
.aboutdiv .r h2 i{ font-weight:bold;font-style:italic; margin-right:10px; font-size:25px;font-family:"SFTT";}
.aboutfoudong{opacity:0.8; color:#d9d9d9}*/

.deconmo{ height:400px;}


	}
	
	
	@media (max-width: 721px) {
		
		
		.monavlist{justify-content: space-between;}
		
		.foot .m{ padding:0 30px;}
	
.deconmo{ height:200px;}
	
	}
	
		@media (max-width: 370px) {
		
		
		.foot .l img{ margin:0 1%}
	

	
	}
	
		@media (min-width: 1202px) {
			.abouttop1{ padding-top:150px; height:950px;}
.abouttop2{ padding-top:120px;height:980px;}
.abouttop3{ padding-top:120px;height:980px;}
.abouttop4{ padding-top:120px;height:980px;}
.abouttop5{ padding-top:80px;height:970px;}
.abouttop6{ padding-top:220px; height:780px;}	


	
	}
	

	
	
