@charset "utf-8";
	/* CSS Document */
	
	@media (max-width: 768px){
		.max{ padding-left:2% !important; padding-right:2% !important; box-sizing:border-box;}
		.head_b{ padding:15px 0px;}
		.head_b .logo{ margin-top:0px; max-width:80%;}
		.head_b .text,.head_b  .introduce,.head_b .contact{ display:none;}
		#dh{ display:block;}
		.banner li img,.banner{ height:300px !important;}
		.iconfont{border:none;}
		.iconnav-list:before{ font-size:54px;}
		
		nav{ position:relative;}
		.nav{ position:absolute;  overflow:hidden;display: none; background:rgba(19,55,171,0.50); z-index:20; right:0px; width:40%;}
		.nav li{ float:left; width:100%;}
		.nav li a{ color:#fff; line-height:50px;}
		.nav>li{ max-width:100%;}
		.head_b .content{ display:none;}
		
		.pro{padding:30px 0px;}
		.pro_l .column{ display:none;}
		.pro_l{ max-width:100%; width:100%;padding-bottom: 20px;}
		.pro_l li{ max-width:calc(25% - 7.5px); margin-right:10px; padding:0px; text-align:center;}
		.pro_l ul li img{display: none;}
		.pro_l ul li{max-width:calc(20% - 10px); width:100%;float: left; padding:0px;}
		.pro_l ul li::after{ display:none;}
		.pro_l ul li a{ max-width:100%;}
		.pro_l .contact{ display:none;}
		.pro_r{ max-width:100%;}
		
		.trou_b ul{ max-width:37%;}
		.trou_b ul li div p{ font-size:16px;}
		.trou_b .picture{ max-width:26%;}
		
		.trouble .advert .title{ font-size:20px;}
		.trouble .advert .text{ font-size:18px;}
		.trouble .advert .icon{ font-size:14px; max-width:20%;}
		
		.often::before{ max-width:15%;}
		.often::after{ max-width:15%;}
		.often .title{ font-size:18px;}
		.often .text{ font-size:12px;}
		.goodness_b li{ display:block;}
		.goodness_b li .number{ display:none;}
		.goodness_b li .picture{ display:none;}
		.goodness_b li::before{ display:none;}
		.goodness_b li .content{ max-width:100%; padding:0px;}
		.goodness_b li .content .icon{ transform:translateX(0px); margin-top:0px;}
		.goodness_b li .content .icon img{ float:none; display:block; margin:0px auto;}
		section.about{ padding-top:40px;}
		.about_b .aboutTitle{ border-right:0px;}
		.about_b .aboutTitle .title{ text-align:center;}
		.about_b .aboutTitle .text{ text-align:center; margin-top:10px;}
		.about_b .about_r{ position:static; max-width:100%;}
		.about_b .picture{ display:none;}
		section.workshop{ margin-top:30px;}
		
		.news_l{ max-width:100%;}
		.news_r{margin-top:20px;}
		
		.workshop{ padding-bottom:30px;}
		.often{ margin-top:20px;}
		.footer_l{ max-width:100%;}
		.footer_l hr{ max-width:100%; width:100%;}
		.footer_nav a{ max-width:20%; width:100%; box-sizing:border-box; text-align:center;}
		.footer_infor{ text-align:center;}
		.footer_infor>p{ float:none; display:inline-block;}
		.footer_r{ float:none; display:block; margin:0px auto;}
		
		.page_r{ max-width:100%; width:100%;}
		.page_l{ max-width:100%;}
		.page_l .pro_l ul{ border:0px;}
		.page{ padding-bottom:30px; padding-top:10px;}	
	}
	@media (max-width: 425px){
		.dh{ max-height:40px;}
		.iconnav-list:before{ font-size:40px;}
		#top{display: none!important;}
		.headline{ display:none;}
		.header .logo img{ max-height:60px;}
		.banner li img,.banner{ height:200px !important;}
		section.products{ padding-bottom:30px;}
		.pro_b{ margin-top:10px;}
		.pro_l ul{ padding:0px;}
		.pro_l ul li{ max-width:calc((100% / 3) - 8px); width:100%; margin-right:12px;}
		.pro_l ul li a{font-size:14px;}
		.pro_l ul li:nth-of-type(3n){ margin-right:0px;}
		.pro_l ul li:nth-of-type(n+7){ display:none;}
		.pro_r li{ max-width:49%; width:100%; margin-right:0px;}
		.pro_r li:nth-of-type(even){ float:right;}
		.pro_r li:nth-of-type(n+5){ display:none;}
		
		.trou_b ul{ max-width:100%;}
		.trou_b ul li div{ padding:8px 0px; max-width:calc(100% - 20px); padding-left:2%; box-sizing:border-box;}
		.trou_b ul.tro_r{ display:none;}
		.trou_b .picture{ max-width:100%; margin-top:20px;}
		.trouble .advert .icon{ max-width:160px;}
		.trouble .advert .text{ font-size:14px; margin-top:10px;}
		.goodness_b li .content .title{ font-size:20px; margin-top:20px; text-align:center;}
		.about_b .aboutTitle .title{ font-size:20px;}
		.about_b .content{ padding:30px 2%;}
		.about_b .content .title{ text-align:center; line-height:normal;}
		.about_b .intro{ margin-top:10px;}
		.r1_left{ max-width:100%; width:100%; height:auto;}
		.news_r .r1{ display:block;}
		.news_r .r1 img{ height:auto;}
		.r2_right{ padding:10px 5%;}
		.footer_icon{ display:block;}
		.footer_icon .tel{ max-width:100%;background-position: center left;}
		.footer_icon .email{ max-width:100%; margin:20px 0px;background-position: center left;}
		.footer_icon .add{ max-width:100%;background-position: center left;}
		.footer_nav a{ padding:0px;}
		.footer_r{ max-width:100%; width:100%; border:0px;}
		.footer_r span{ text-align:center; float:left; width:100%; overflow:hidden;}
		.url{ padding:10px 0px; display:block; overflow:hidden;}
		.url .max .title{ max-width:100%; float:left; overflow:hidden; padding:0px;}
		.url .max .content{ max-width:100%; float:left; overflow:hidden; padding:0px;}
		.footer{ padding-bottom:120px;}
		.sj_footer{ display:block;}
		
		
		.news_list .page_r li .picture{ max-width:100%;}
		.news_list .page_r li .content{ max-width:100%;}
		.pro_list .page_r li{ max-width:49%; margin-right:0px;}
		.pro_list .page_r li:nth-of-type(even){ float:right;}
		.pro_list .page_r li img{ height:170px;}
	}
	  
	@media (max-width: 375px){
		.r2_right .title{ font-size:18px; text-align:center;}
		.r2_right .content{ margin-top:6px;}
		.dh{ height:auto;}
		.banner li img, .banner{ height:180px !important;}
		.head_b{ padding:10px 0px;}
		
		.honor_list li{ max-width:100%;}
		.honor_list li span img{ height:auto;}
		.case li{ margin:5px 30px 14px 30px;}
		.about_b .content .slogan{ font-size:18px; text-align:center;}
		section.about{ padding-bottom:40px;}
		.news_l ul .picture{ max-width:140px;}
		.news_l ul .content{ max-width:calc(100% - 155px);}
		.news_l ul .title{ font-size:14px;}
		.news_l ul .text{ font-size:12px;}
		section.url{ padding:15px 0px;}
		.pro_r ul li .picture img{ height:170px;}
		.pro_r ul li .title{ padding:10px 0px;}
		.head_line .max *{ font-size:12px;}
		.news_list .page_r li .picture img{ height:auto; max-height:300px;}
		.news_list .page_r li{ max-width:100%;}
		.page_address{margin-bottom:15px;}
		.news_list .page_r li .content{ margin-top:20px;}
		.news_list .page_r li .content .more{ margin:20px auto 0px auto; float:none; display:block;}
		.page_address .address{ display:none;}
		.page_odd_title{ font-size:18px;}
	}
	@media (max-width: 320px){
		#dh{ width:10%;}
		.logo{ width:85%;}
		.dh{ max-width:30px; max-height:30px; line-height:30px; font-size:24px; padding:0px;}
	}