﻿@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:30px; 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 .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative; text-align:center;  }
.slideBox .bd li img{vertical-align:top; width:100%; height:auto/* 图片宽度100%，达到自适应效果 */}
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */

/*主盒子*/
.index_box{width:95%; height:auto; padding:10px; height:auto; background-color:#FFF; border-radius:5px; box-shadow:2px 2px 5px #C8C8C8; border-top:4px solid #c12c25; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

.box_box{ width:100%; height:auto; overflow:hidden}
.box_box .l{width:100%; height:auto;}
.box_box .c{width:100%; height:auto; margin-top:20px;}
.box_box .r{width:100%; height:auto; margin-top:20px;}

.box_box h6{ height:30px; font-size:16px; color:#333; font-weight:bold; border-bottom:1px solid #ccc; position:relative}
.box_box h6:before{content: ""; width:67px; height:3px; background-color:#FFCC00; position:absolute; left:0; top:29px}

/*小幻灯片*/
.index_hdp{width:100%; height:210px; overflow:hidden; position:relative; margin-top:10px}
.index_hdp .hd{ width:100%; height:5px;  position:absolute; z-index:1; bottom:0; text-align:center;  }
.index_hdp .hd ul{ overflow:hidden; display:-moz-box; display:-webkit-box; display:box; height:5px; background-color:rgba(51,51,51,0.5);   }
.index_hdp .hd ul li{ -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; }
.index_hdp .hd ul .on{ background:#FF4000;  }
.index_hdp .bd{width:100%; height:auto; z-index:0; overflow:hidden}
.index_hdp .bd li img{display:block; width:100%; height:100%; -webkit-transition: all 1.8s; -o-transition: all 1.8s; -moz-transition: all 1.8s; transition: all 1.8s}
.index_hdp .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }
.index_hdp .bd li a:hover img{-moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}

/*弹性布局产品*/
.index_pro{
	width:98%;
	height:auto;
	margin:0 auto;
	margin-top:20px;
	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_pro li{width:48%; height:auto; margin-bottom:10px;}
.index_pro li span{display:block; width:100%; height:auto; overflow:hidden;}
.index_pro li span img{width:100%; height:auto;}
.index_pro li p{ width:95%; height:40px; line-height:40px; margin:0 auto; text-align: center; font-size:14px; color:#333; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.index_pro li a{ display:block}
.index_pro li:hover p{ color:#C30}


}

/*当浏览器尺寸大于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:30px; 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 .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative; text-align:center;  }
.slideBox .bd li img{vertical-align:top; width:100%; height:auto/* 图片宽度100%，达到自适应效果 */}
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */

/*主盒子*/
.index_box{padding:10px; height:auto; background-color:#FFF; border-radius:5px; box-shadow:2px 2px 5px #C8C8C8; border-top:4px solid #c12c25}

.box_box{ width:100%; height:auto; overflow:hidden}
.box_box .l{ float:left; width:450px; height:auto;}
.box_box .c{ float:left; margin-left:26px; width:460px; height:auto;}
.box_box .r{ float:right; width:276px; height:auto;}

.box_box h6{ height:30px; font-size:16px; color:#333; font-weight:bold; border-bottom:1px solid #ccc; position:relative}
.box_box h6:before{content: ""; width:67px; height:3px; background-color:#FFCC00; position:absolute; left:0; top:29px}

/*小幻灯片*/
.index_hdp{width:100%; height:210px; overflow:hidden; position:relative; margin-top:10px}
.index_hdp .hd{ width:100%; height:5px;  position:absolute; z-index:1; bottom:0; text-align:center;  }
.index_hdp .hd ul{ overflow:hidden; display:-moz-box; display:-webkit-box; display:box; height:5px; background-color:rgba(51,51,51,0.5);   }
.index_hdp .hd ul li{ -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; }
.index_hdp .hd ul .on{ background:#FF4000;  }
.index_hdp .bd{width:100%; height:auto; z-index:0; overflow:hidden}
.index_hdp .bd li img{display:block; width:100%; height:100%; -webkit-transition: all 1.8s; -o-transition: all 1.8s; -moz-transition: all 1.8s; transition: all 1.8s}
.index_hdp .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }
.index_hdp .bd li a:hover img{-moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}

/*弹性布局产品*/
.index_pro{
	width:98%;
	height:auto;
	margin:0 auto;
	margin-top:20px;
	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_pro li{width:19%; height:auto; margin-bottom:10px;}
.index_pro li span{display:block; width:100%; height:auto; overflow:hidden;}
.index_pro li span img{width:100%; height:auto;}
.index_pro li p{ width:95%; height:40px; line-height:40px; margin:0 auto; text-align: center; font-size:14px; color:#333; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.index_pro li a{ display:block}
.index_pro li:hover p{ color:#C30}
}

