@charset "utf-8";
/*当浏览器尺寸小于960px的时执行下面的CSS*/
@media screen and (max-width: 960px){
/* 首页焦点图banner幻灯片 */
.slideBox{width:100%; height:auto; position:relative; overflow:hidden; margin:0 auto; max-width:100%; background:#fff; }
.slideBox .hd{ width:100%; position:absolute; height:20px; line-height:20px; left:0; bottom:70px; text-align:center; z-index:1; }
.slideBox .hd li{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#333; text-indent:-9999px; overflow:hidden; margin:10px;   cursor:pointer;}
.slideBox .hd li.on{ background:#fff;  }
.slideBox .prev{ position:absolute; left:20px; top:0; display:none; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox .next{ position:absolute; right:20px; top:0; display:none; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative; text-align:center;  }
.slideBox .bd li img{vertical-align:top; max-width:100%; height:auto;}
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */

/*首页三块*/
.index_three{
	width:100%;
	height:auto;
	transform: translateY(-50px);
}
.index_three li{width:100%; height:auto; background: rgba(255, 255, 255, 0.8); position:relative; box-shadow:5px 5px 8px 0 rgba(0,0,0,0.10); border-radius:20px; overflow:hidden}
.index_three li+li{ margin-top:10px;}
.index_three li span{display:block; width:100%; height:auto; overflow:hidden; position:relative;}
.index_three li span img{max-width:100%; height:auto;}

.index_three li p{ width:87%; height:50px; line-height:50px; margin:0 auto; color:#d6000f; font-size:18px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.index_three li a{ display:block}
.index_three li i{ display:block; width:20px; height:20px; z-index: 1; position:absolute; right:25px; top:16px; background:url(../images/indexjt.png) no-repeat; transition-duration:500ms;}
.index_three li:hover i{right:20px;}
.index_three li .bj{ background-color:#FFF; padding:10px 0}

.dl_three{ width:90%; height:auto; margin:0 auto}
.dl_three dd{ width:100%; height:auto; line-height:40px; background:url(../img/jt.jpg) no-repeat right center;}
.dl_three dd a{ display:block}
.dl_three dd+dd{border-top:1px solid #E6E6E6;}
/*首页三块_end*/

/*搜索*/
.key_so_bj{ width:95%; height:auto; margin:0 auto;}
.key_so_bj h2{text-align:center; font-size:0.22rem}

/*加盟*/
.jiameng{ width:100%; height:auto; margin-top:50px; background:#0b308e url(../images/gaolou.png) no-repeat right top; border-radius:25px 25px 0 0; overflow:hidden; padding-bottom:30px}
.gongren{ width:100%; height:auto; margin-top:30px}
.gongren img{ max-width:100%; height:auto}
.shuiyin{ display:none}

.ggc{width:100%; height:auto;}
.ggc h2{font-size:0.32rem; font-weight:100; color:#FFF; margin-top:20px; padding-left:25px}
.ggc h3{font-size:0.22rem; font-weight:100; color:#FFF; margin-top:10px; padding-left:25px}
.ggc h4{width:87%; height:auto; margin:0 auto; font-size:0.14rem; font-weight:100; color:#FFF; line-height:30px; margin-top:15px}
.fw{ width:93%; height:auto; margin:0 auto; padding:20px; margin-top:30px;  border-radius:25px; background: rgba(255, 240, 0, 0.8); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

.family{ width:100%; height:auto;}
.family li{width:100%; height:0.45rem; line-height:0.45rem; font-size:0.14rem; background:#FFF url(../images/jt3.png) no-repeat right 15px center; border-radius:5px; text-indent:20px}
.family li a{ display:block;}
.family li+li{margin-top:10px;}
.family li:hover{background:#0b308e url(../images/jt4.png) no-repeat right 15px center;}
.family li:hover a{color:#FFF}

.gzh{ width:100%; height:auto; background-color:#FFF; border-radius:0 0 25px 25px; padding:20px 0}
.gzh_box{ width:88%; height:auto; margin:0 auto;}
.gzh_box li{width:100%; height:auto; overflow:hidden;}
.gzh_box li+li{ margin-top:10px}
.gzh_box li span{ float:left;}
.gzh_box li span img{ width:100%; height:auto}
.gzh_box li em{ float:left; margin-left:20px; font-size:0.2rem; margin-top:11px}
.gzh_box li em i{ display:block; font-size:0.14rem; margin-top:10px}
.gzh_box li a{ display:block}

/*简介*/
.iabout{background:#e1e2e6 url(../images/iabout.png) no-repeat center center; margin-top:0px; padding:40px 0 20px 0}
.about_c{ width:100%; height:auto; overflow:hidden}
.about_c>.l{width:100%; height:auto;}
.about_c>.r{width:100%; height:auto; padding-top:20px}

.a_h2{ font-size:0.26rem; font-weight:bold; line-height: 1.2; color:#d8222f; }
.a_h2 span{ display:block; font-size:0.18rem; font-weight:100; line-height: 1.2; margin-top:10px}
.a_c{ font-size:0.14rem; line-height:0.28rem; color: #5f5f5f; margin-top:20px;}

.gundong{ width:92%; height:auto; margin:0 auto; overflow:hidden; padding:20px 0;}
.gundong>.l{ float:left; width:50%; height:auto; font-size:48px; font-weight:bold; color:#d6000f; }
.gundong>.r{ float:right;width:50%; height:auto; line-height:2}

.three{
	width:100%;
	height:auto;
	margin-top:40px;
}
.three li{ width:100%; height:auto; background-color:#FFF;  border-radius:15px; padding:20px; margin-bottom:10px; position:relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; transition: 0.5s all ease}
.three li h6{color: #e6e6e6; font-family: "DIN"; text-transform: uppercase; font-size:0.4rem;}
.three li h5{ color:#d8222f; font-size:0.18rem; font-weight:bold; line-height:0.26rem}
.three li:hover{ background-color:#d8222f;}
.three li:hover h5{color: #e6e6e6;}
.t_icon1{ display:block; width:64px; height:64px; background:url(../images/pro.png) no-repeat left top; position:absolute; top:26px; right:15px}
.three li:hover .t_icon1{background:url(../images/pro-1.png) no-repeat left top;}
.t_icon2{ display:block; width:64px; height:64px; background:url(../images/case.png) no-repeat left top; position:absolute; top:26px; right:15px}
.three li:hover .t_icon2{background:url(../images/case-1.png) no-repeat left top;}
.t_icon3{ display:block; width:64px; height:64px; background:url(../images/workshop.png) no-repeat left top; position:absolute; top:26px; right:15px}
.three li:hover .t_icon3{background:url(../images/workshop-1.png) no-repeat left top;}
/*简介end*/

/*more*/
.more{ background:url(../images/x.jpg) no-repeat center 22px; text-align:center; margin-top:26px}
.more span{ display:inline-table; font-size:16px; border:1px solid #cccccc; padding:10px 30px; background-color:#FFFFFF}
.more span:hover{background-color:#013e8b;}
.more span:hover a{color:#FFFFFF}

/*标题专用*/
.title_index{width:90%; height:auto; margin:0 auto; margin-top:10px; position:relative}
.title_index h1{font-size:0.22rem; color:#333; font-weight:bold; text-align:center; padding:20px;}
.title_index h1 span{ color:#ff6700}
.title_index h1 em{display:block; font-size:0.14rem; line-height:0.22rem; color:#999; font-weight:100; padding-top:20px;}
.title_index:before{content: ""; width:70px; height:1px; background-color:#CCC; position:absolute; left:0; top:60px}
.title_index:after{content: ""; width:70px; height:1px; background-color:#CCC; position:absolute; right:0; top:60px}

/*动态*/
.news{width:100%; height:auto; overflow:hidden }
.news .l{width:100%; height:auto; position:relative}
.news .l img{ width:100%; height:100%}
.news .l .nbox{ width:100%; height:auto; position:absolute; left:0; bottom:0; background-color:rgba(0,0,0,0.7); padding:20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.news .l .nbox span{ display:block; color:#FFF}
.news .l .nbox b{ display:block; color:#FFF; font-size:0.18rem; line-height:0.36rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.news .l .nbox p{ margin-top:10px; color:#FFF; font-size:0.14rem; line-height:0.26rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}

.news .r{width:100%; height:auto; margin-top:20px}

.index_news { width:100%; height:auto; overflow:hidden}
.index_news li {width:100%; height:auto; margin-bottom:10px; background-color:#F7F7F7;}
.index_news li a {display: block;  padding:15px; }
.index_news li .date { display:none}
.index_news li .text {width:100%; height:auto;}
.index_news li .text h4 {font-weight: normal; font-size:0.18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.index_news li .text p { margin-top:10px; color: #666; line-height: 1.8; height:50px; font-size:0.14rem; overflow: hidden;}
.index_news li a:hover {background-color:#3a4249; color:#fff;}
.index_news li a:hover .text p {color: #fff;}




}

/*当浏览器尺寸大于960px时候*/
@media screen and (min-width:960px){
/* 首页焦点图banner幻灯片 */
.slideBox{width:100%; height:auto; position:relative; overflow:hidden; margin:0 auto; max-width:100%; background:#fff; }
.slideBox .hd{ width:100%; position:absolute; height:80px; line-height:30px; left:0; bottom:30px; text-align:center; z-index:1; }
.slideBox .hd li{ display:inline-block; width:20px; height:20px; border-radius:50%; background: rgba(255, 255, 255, 0.6); text-indent:-9999px; overflow:hidden; margin:10px;   cursor:pointer;}
.slideBox .hd li.on{ background: rgba(1, 21, 88, 0.6); }

.slideBox .prev{ position:absolute; left:20px; top:0; display:block; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox .next{ position:absolute; right:20px; top:0; display:block; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative; text-align:center; image-rendering: -webkit-optimize-contrast;}
.slideBox .bd li img{vertical-align:top; max-width:100%; height:auto; object-fit: none; /*保留原有元素内容的长度和宽度，图片不会变模糊*/}
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */

/*首页三块*/
.index_three{
	width:100%;
	height:auto;
	transform: translateY(-50px);
	display:flex;/*启用弹性布局*/
	display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
	flex-direction:row;/*项目的排列方向,从左到右排*/
	-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
	flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
	-webkit-flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
	justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.index_three li{width:31.5%; height:auto; background: rgba(255, 255, 255, 0.8); position:relative; box-shadow:5px 5px 8px 0 rgba(0,0,0,0.10); border-radius:20px; overflow:hidden}
.index_three li span{display:block; width:100%; height:auto; overflow:hidden; position:relative;}
.index_three li span img{max-width:100%; height:auto; object-fit:none; /*保留原有元素内容的长度和宽度，图片不会变模糊*/}

.index_three li p{ width:87%; height:50px; line-height:50px; margin:0 auto; color:#d6000f; font-size:18px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.index_three li a{ display:block}
.index_three li i{ display:block; width:20px; height:20px; z-index: 1; position:absolute; right:25px; top:16px; background:url(../images/indexjt.png) no-repeat; transition-duration:500ms;}
.index_three li:hover i{right:20px;}
.index_three li .bj{ background-color:#FFF; padding:15px 0}

.dl_three{ width:88%; height:auto; margin:0 auto}
.dl_three dd{ width:100%; height:auto; line-height:40px; background:url(../img/jt.jpg) no-repeat right center;}
.dl_three dd a{ display:block}
.dl_three dd+dd{border-top:1px solid #E6E6E6;}
/*首页三块_end*/

/*搜索*/
.key_so_bj{ width:750px; height:auto; margin:0 auto;}
.key_so_bj h2{text-align:center; font-size:30px}

/*加盟*/
.jiameng{ width:100%; height:480px; margin-top:80px; background:#0b308e url(../images/gaolou.png) no-repeat right top; border-radius:25px 25px 0 0; position:relative}
.gongren{ position:absolute; left:50px; top:-50px; height:auto}
.shuiyin{position: absolute; right:50px; top: -60px; width: 158px; height: 158px;}
.shuiyin em{
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	animation: 6s linear 0s normal none infinite changDeg;
	-webkit-animation: 6s linear 0s normal none infinite changDeg;
}

@keyframes changDeg{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.ggc{ position:absolute; width:800px; height:360px; left:580px; top:45px}
.ggc h2{font-size: 48px; font-weight:bold; color:#FFF}
.ggc h3{font-size: 36px; font-weight:100; color:#FFF; margin-top:10px}
.ggc h4{font-size: 16px; font-weight:100; color:#FFF; line-height:30px; margin-top:15px}
.fw{height:auto; padding:30px; margin-top:30px;  border-radius:25px; background: rgba(255, 240, 0, 0.8)}

.family{ width:100%; height:auto; overflow:hidden}
.family li{ float:left; width:49%; height:45px; line-height:45px; font-size:16px; background:#FFF url(../images/jt3.png) no-repeat right 15px center; margin-right:2%; margin-bottom:10px; border-radius:5px; text-indent:20px}
.family li:nth-of-type(2n+0){margin-right:0px;}
.family li:nth-of-type(n+3){margin-bottom:0}
.family li a{ display:block;}
.family li:hover{background:#0b308e url(../images/jt4.png) no-repeat right 15px center;}
.family li:hover a{color:#FFF}

.gzh{ width:100%; height:auto; background-color:#FFF; border-radius:0 0 25px 25px; padding:40px 0}
.gzh_box{ width:88%; height:auto; margin:0 auto; overflow:hidden}
.gzh_box li{ float:left; width:25%; height:auto; overflow:hidden;}
.gzh_box li span{ float:left;}
.gzh_box li span img{ width:100%; height:auto}
.gzh_box li em{ float:left; margin-left:20px; font-size:20px; margin-top:11px}
.gzh_box li em i{ display:block; font-size:14px; margin-top:10px}
.gzh_box li a{ display:block}

/*简介*/
.iabout{background:#e1e2e6 url(../images/iabout.png) no-repeat top center; padding: 70px 0; margin-top:40px}
.about_c{ width:100%; height:auto; overflow:hidden}
.about_c>.l{ float:left; width:60%; height:auto;}
.about_c>.r{ float:right; width:30%; height:auto; padding-top:20px}

.a_h2{ font-size:48px; font-weight:bold; line-height: 1.2; color:#d8222f}
.a_h2 span{ display:block; font-size:36px; font-weight:100; line-height: 1.2;  margin-top:10px}
.a_c{ font-size:14px; line-height:28px; color: #5f5f5f; margin-top:30px;}

.gundong{ width:100%; height:auto; overflow:hidden; padding:20px 0;}
.gundong>.l{ float:left; width:50%; height:auto; font-size:48px; font-weight:bold; color:#d6000f; }
.gundong>.r{ float:right;width:50%; height:auto; line-height:2}

.three{
	width:100%;
	height:auto;
	margin-top:40px;
	display:flex;/*启用弹性布局*/
	display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
	flex-direction:row;/*项目的排列方向,从左到右排*/
	-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
	justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.three li{ width:32%; height:auto; background-color:#FFF;  border-radius:15px; padding:20px; position:relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; transition: 0.5s all ease}
.three li h6{color: #e6e6e6; font-family: "DIN"; text-transform: uppercase; font-size:40px;}
.three li h5{ color:#d8222f; font-size:18px; font-weight:bold; line-height:26px}
.three li:hover{ background-color:#d8222f;}
.three li:hover h5{color: #e6e6e6;}
.t_icon1{ display:block; width:64px; height:64px; background:url(../images/pro.png) no-repeat left top; position:absolute; top:26px; right:15px}
.three li:hover .t_icon1{background:url(../images/pro-1.png) no-repeat left top;}
.t_icon2{ display:block; width:64px; height:64px; background:url(../images/case.png) no-repeat left top; position:absolute; top:26px; right:15px}
.three li:hover .t_icon2{background:url(../images/case-1.png) no-repeat left top;}
.t_icon3{ display:block; width:64px; height:64px; background:url(../images/workshop.png) no-repeat left top; position:absolute; top:26px; right:15px}
.three li:hover .t_icon3{background:url(../images/workshop-1.png) no-repeat left top;}
/*简介end*/

/*标题专用*/
.title_index{ width:800px; height:auto; margin:0 auto; margin-top:10px; position:relative}
.title_index h1{font-size:30px; color:#333; font-weight:bold; text-align:center; padding:20px;}
.title_index h1 span{ color:#ff6700}
.title_index h1 em{display:block; font-size:14px; line-height:30px; color:#999; font-weight:100; padding-top:12px;}
.title_index:before{content: ""; width:150px; height:1px; background-color:#CCC; position:absolute; left:0; top:67px}
.title_index:after{content: ""; width:150px; height:1px; background-color:#CCC; position:absolute; right:0; top:67px}

/*动态*/
.news{width:100%; height:auto; overflow:hidden }
.news .l{ float:left; width:48%; height:448px; position:relative}
.news .l img{ width:100%; height:100%}
.news .l .nbox{ width:100%; height:auto; position:absolute; left:0; bottom:0; background-color:rgba(0,0,0,0.7); padding:20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.news .l .nbox span{ display:block; color:#FFF}
.news .l .nbox b{ display:block; color:#FFF; font-size:18px; line-height:36px}
.news .l .nbox p{ margin-top:10px; color:#FFF; font-size:14px; line-height:26px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}

.news .r{ float:right; width:50%; height:auto;}

.index_news { width:100%; height:auto; overflow:hidden}
.index_news li {width:100%; height:auto; margin-bottom:23px; overflow:hidden; }
.index_news li a {display: block; background-color:#F7F7F7; padding: 25px; -webkit-transition: all 0.5s; transition: all 0.5s; overflow: hidden; position: relative;}
.index_news li a:after {position: absolute; left: 0; top: 0; content: ""; width: 85px; height: 0; border-bottom: 135px solid #0b308e; border-right: 50px solid transparent; -webkit-transition: all 0.5s; transition: all 0.5s;}
.index_news li .date {float: left; width: 75px; height:auto; position: relative; z-index: 1; line-height: 1; padding: 5px 0; color: #fff; text-align:center;}
.index_news li .date small {display: block; font-size:20px; font-weight:bold;}
.index_news li .date strong {display: block; font-size: 44px; margin-top: 10px;}

.index_news li .text { float:right; width:80%; height:auto;}
.index_news li .text h4 {font-weight: normal; font-size:18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.index_news li .text p { margin-top:10px; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; line-height: 1.8; height:50px; overflow: hidden;}
.index_news li a:hover {background-color:#3a4249; color:#fff;}
.index_news li a:hover:after {border-bottom-color: #009844;}
.index_news li a:hover .text p {color: #fff;}
.index_news li:last-child{margin-bottom:0;}
}