@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1440px) {

	.width_all{ max-width:1180px;}
	
	.nav a{ padding:0 14px;}
	
	.banner_width{ width:1180px;}
	
	.new_product_width{ width:1180px;}
	
	.foot_l{ width:83.5%;}
	.foot_r{ width:12.5%;}

}

@media screen and (max-width:1200px) {

	.width_all{ max-width:980px;}
	
	.head_top .cnen{ margin:30px 0 30px 4px;}
	.head_top .cnen span{ margin:0 3px 0 0;}
	.nav a{ padding:0 3px;}
	
	.banner_width{ width:980px;}
	
	.about_name:before{ left:32%;}
	.about_name:after{ right:32%;}
	
	.channeng_name:before{ left:32%;}
	.channeng_name:after{ right:32%;}
	
	.q_c_name:before{ left:32%;}
	.q_c_name:after{ right:32%;}
	
	.new_p_name:before{ left:32%;}
	.new_p_name:after{ right:32%;}
	.new_product .new_p_tab li{ width:6%;}
	.new_product_width{ width:980px;}
	
	.applicable_name:before{ left:32%;}
	.applicable_name:after{ right:32%;}
	

}

@media screen and (max-width:1000px) {

	.width_all{ width:98%;}
	
	.head_top .cnen{ display:none;}
	
	#navToggle{ height:auto; padding:7px 9px; margin:0 -9px 0 0; display:block; float:right;}
	#navToggle span{ position:relative; width:25px; height:1px; margin-top:37px;}
	#navToggle span:before,#navToggle span:after{ content:''; position:relative; width:100%; height:1px; left:0;}
	#navToggle span,#navToggle span:before,#navToggle span:after{ -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s; display:block; background:#70ad47;}
	#navToggle span:before{ top:8px;}
	#navToggle span:after{ bottom:10px;}
	#navToggle.open span:before{ top:10px; -webkit-transform:translateY(-11px) rotate(-45deg); -moz-transform:translateY(-11px) rotate(-45deg); -ms-transform:translateY(-11px) rotate(-45deg); -o-transform:translateY(-11px) rotate(-45deg); transform:translateY(-11px) rotate(-45deg);}
	#navToggle.open span:after{ bottom:12px; -webkit-transform:translateY(10px) rotate(45deg); -moz-transform:translateY(10px) rotate(45deg); -ms-transform:translateY(10px) rotate(45deg); -o-transform:translateY(10px) rotate(45deg); transform:translateY(10px) rotate(45deg);}
	#navToggle.open span{ background:none;}
	#navToggle.open span:before,#navToggle.open span:after{ background:#70ad47;}
	.nav{ display:none;}
	

	
	.banner{ height:auto; width:100%; margin:0 auto; overflow:hidden; background:url(../images/sjhome.jpg) center no-repeat; display:flex; justify-content:center; align-items:center; flex-direction:column;}
	.banner_width{ width:100%;}
	.banner_name{ margin:160px 0 18px 0;}
	.banner_company{ margin:18px 0 72px 0;}
	

	
	.about_us{ width:100%; margin:0 auto; overflow:hidden; height:auto;  background:url(../images/sjabout_us.jpg) center no-repeat; display:flex; justify-content:center; align-items:center; flex-direction:column;}

	
	
	.about_name{ margin:30px auto 27px auto;}
	.about_name:before{ left:26%;}
	.about_name:after{ right:26%;}
	.about{ margin:32px auto;}
	.about_more{ margin:28px auto 32px auto;}
	
	.channeng{ margin:42px auto;}
	.channeng_name{ margin:0 auto;}
	.channeng_name:before{ left:26%;}
	.channeng_name:after{ right:26%;}
	.channeng_width dl{ width:50%; padding:18px 0;}
	.channeng_width dl:after{ content:""; width:100%; height:1px; background:#ccc; position:absolute; bottom:0; left:0;}
	.channeng_width dl:nth-child(3):after{ display:none;}
	.channeng_width dl:nth-child(4):after{ display:none;}
	.channeng_width dl:nth-child(2n):before{ display:none;}
	.channeng_more{ width:100%;}
	
	.quality{ height:auto;}
	.q_c_name{ margin:42px auto 32px auto;}
	.q_c_name:before{ left:26%;}
	.q_c_name:after{ right:26%;}
	.quality_jies{ margin:32px auto;}
	.q_c_more{ margin:32px auto 42px auto;}
	
	.new_product{ height:auto;}
	.new_product:before{ height:37%;}
	.new_product_width{ width:100%; margin:32px auto;}
	.new_p_name{ margin:42px auto 32px auto;}
	.new_p_name:before{ left:26%;}
	.new_p_name:after{ right:26%;}
	.new_product .new_p_tab li{ width:10%; margin:0 1%;}
	
	.applicable{ height:auto;}
	.applicable_name{ margin:42px auto 32px auto;}
	.applicable_name:before{ left:26%;}
	.applicable_name:after{ right:26%;}
	.applicable_width dl{ width:48%; margin:0 4% 4% 0; overflow:hidden;}
	.applicable_width dl:nth-child(2n){ margin:0 0 4% 0;}
	.applicable_width dl:nth-child(3n){ margin:0 4% 4% 0;}
	.applicable_width dl:nth-child(6n){ margin:0 0 4% 0;}
	.applicable_more{ width:100%; margin:0 auto 42px auto;}
	
	.foot_l{ width:76%;}
	.foot_l dl{ display:none;}
	.foot_l dl:nth-child(5){ float:none; display:block; width:100%;}
	.foot_r{ width:20%;}

}

@media screen and (max-width:640px) {

	.head_top .logo{ margin:12px auto;}
	.head_top h1{ margin:12px 0 12px 5px; font-size:14px; letter-spacing:1.4px;}
	
	#navToggle span{ margin-top:23px;}
	
	.banner_name{ margin:132px 0 18px 0; font-size:29px; line-height:52px; text-align: left;}
	.banner_company{ margin:18px 0 72px 0; font-size:16px; line-height:36px; text-align: left;}
	
	.about_name:before{ left:16%;}
	.about_name:after{ right:16%;}
	.about{ font-size:14px; line-height:18px;}
	
	.channeng_name:before{ left:16%;}
	.channeng_name:after{ right:16%;}
	.channeng_width dl dd{ font-size:34px; line-height:52px;}
	.channeng_width dl dd .channeng_up{ font-size:18px;}
	
	.q_c_name:before{ left:16%;}
	.q_c_name:after{ right:16%;}
	
	.new_product:before{ height:34%;}
	.new_p_name:before{ left:16%;}
	.new_p_name:after{ right:16%;}
	.new_product .new_p_tab li{ width:16.8%;}
	.new_p_right .new_p_more{ width:88%;}
	
	.applicable_name:before{ left:16%;}
	.applicable_name:after{ right:16%;}
	.applicable_width dl{ float:none; width:100%; margin:0 0 6% 0;}
	.applicable_width dl:nth-child(2n){ margin:0 0 6% 0;}
	.applicable_width dl:nth-child(3n){ margin:0 0 6% 0;}
	.applicable_width dl:nth-child(6n){ margin:0 0 6% 0;}
	
	.foot_l{ width:70%;}
	.foot_l dl:nth-child(5){ width:96%;}
	.foot_r{ width:26%;}

}