@charset "utf-8";
/* CSS Document */

* {
	color:#5D5D5D;
	/*font-size:18px;
	line-height:30px; /*行高*/
	font-family:"Microsoft Yahei";
}
header,section,footer {
	width:100%;
	overflow:hidden;/*这个属性定义溢出元素内容区的内容会如何处理。hidden内容会被修剪，并且其余内容是不可见的。如果值为 scroll，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。默认值是 visible。*/
}
body {
	margin:1 auto; /*边框*/
}
ul,li,ol,dl,dd {
	list-style-type:none; /*段落标记*/
	margin:0;
}
p {
	margin:0 auto;
	padding:0;
}
a {
	text-decoration:none;
	 /*文本的修饰：
	 none 	默认。定义标准的文本。
	 underline 	定义文本下的一条线。
	 overline 	定义文本上的一条线。
	 line-through 	定义穿过文本下的一条线。
	 blink 	定义闪烁的文本。
	 inherit 	规定应该从父元素继承 text-decoration 属性的值。*/
}
a,img {
	border:0;
}
.cstype-wp {
	margin:20px auto;
	width:450px;
	height:196px;
	/*width:1020px;*/
	overflow:hidden;
}


.cstype-wp>div {
	float:left;
	margin-right:24px;
	line-height:30px;
	/*line-height:60px;*/
	color:#fff;
	position:relative;
	width:450px;
	height:196px;
	/*width:180px;
	height:60px;*/
	overflow:hidden;
}
.cstype-wp>div>a {
	display:block;
	width:450px;
	
	/*width:180px;*/
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	-webkit-transition:top .4s 0s ease-out;
	transition:top .4s 0s ease-out
}
.cstype-wp.cstype-c:hover a {
	top:-196px
}
/*.cstype-wp>div:hover>a {
	top:-196px
}*/
.cstype-wp .cstype-a,.cstype-wp .cstype-b,.cstype-wp .cstype-c,.cstype-wp .cstype-d,.cstype-wp .cstype-e,.cstype-wp .cstype-e {
	background-image:url("kc_ioc.png")!important
}
.cstype-wp .cstype-a em,.cstype-wp .cstype-b em,.cstype-wp .cstype-c em,.cstype-wp .cstype-d em,.cstype-wp .cstype-e em,.cstype-wp .cstype-f em {
	width:450px;
	height:196px;
	line-height:normal;
	/*width:180px;
	height:60px;
	line-height:60px;
	line-height:60px;*/
	background-image:url("kc_ioc.png")!important;
	font-style:normal;
}

/*查看更多按钮*/
.cstype-btn {
	margin:0px auto;
	width:160px;
	height:45px;
	/*width:1020px;*/
	overflow:hidden;
}
.cstype-btn>div {
	float:left;
	margin-right:24px;
	line-height:30px;
	/*line-height:60px;*/
	color:#fff;
	position:relative;
	width:160px;
	height:45px;
	/*width:180px;
	height:60px;*/
	overflow:hidden;
}
.cstype-btn>div>a {
	display:block;
	width:160px;
	
	/*width:180px;*/
	overflow:hidden;
	position:absolute;
	top:0px;
	left:0px;
	-webkit-transition:top .4s 0s ease-out;
	transition:top .4s 0s ease-out
}
.cstype-btn.cstype-d:hover a {
	top:-45px;
}
.cstype-btn .cstype-d em1 {
	width:160px;
	height:45px;
	background-image:url("kc_ioc.png")!important;
	font-style:normal;
	line-height:45px;
	background:#333;
	display:block;
	color:#fff;

}
.cstype-btn .cstype-d span1 {
	width:160px;
	height:45px;
	/*width:178px;
	height:58px;*/
	background-image:url("kc_ioc.png")!important
	font-style:normal;
	line-height:45px;
	background:no-repeat #f70000;
	display:block;
	background-color:#f70000;
	border:1px solid #f70000;
	color:#cf68ed;

}

.cstype-btn .cstype-d {
	text-indent:75px
}


.cstype-wp .cstype-a span,.cstype-wp .cstype-b span,.cstype-wp .cstype-c span,.cstype-wp .cstype-d span,.cstype-wp .cstype-e span,.cstype-wp .cstype-f span {
	width:448px;
	height:194px;
	/*width:178px;
	height:58px;*/
	line-height:normal;
	background-image:url("kc_ioc.png")!important
}
.cstype-wp .cstype-a {
	text-indent:75px; /*属性规定文本块中首行文本的缩进。
	                   length 	定义固定的缩进。默认值：0。
					   % 	定义基于父元素宽度的百分比的缩进。
					   inherit 	规定应该从父元素继承 text-indent 属性的值。*/
}
.cstype-wp .cstype-a em {
	background:0 -532px no-repeat #9cc400; /*设置所有的背景属性
	                                         background-color 	规定要使用的背景颜色。 	1
	                                         background-position 	规定背景图像的位置。 	1
	                                         background-size 	规定背景图片的尺寸。 	3
	                                         background-repeat 	规定如何重复背景图像。 	1
	                                         background-origin 	规定背景图片的定位区域。 	3
	                                         background-clip 	规定背景的绘制区域。 	3
	                                         background-attachment 	规定背景图像是否固定或者随着页面的其余部分滚动。 	1
	                                         background-image 	规定要使用的背景图像。 	1
	                                         inherit 	规定应该从父元素继承 background 属性的设置。 	1*/
	display:block;  /*属性规定元素应该生成的框的类型。
	                  none 	此元素不会被显示。
	                  block 	此元素将显示为块级元素，此元素前后会带有换行符。
	                  inline 	默认。此元素会被显示为内联元素，元素前后没有换行符。
	                  inline-block 	行内块元素。（CSS2.1 新增的值）
	                  list-item 	此元素会作为列表显示。
	                  run-in 	此元素会根据上下文作为块级元素或内联元素显示。
	                  compact 	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
	                  marker 	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
	                  table 	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
	                  inline-table 	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
	                  table-row-group 	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
	                  table-header-group 	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
	                  table-footer-group 	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
	                  table-row 	此元素会作为一个表格行显示（类似 <tr>）。
	                  table-column-group 	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
	                  table-column 	此元素会作为一个单元格列显示（类似 <col>）
	                  table-cell 	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
	                  table-caption 	此元素会作为一个表格标题显示（类似 <caption>）
	                  inherit 	规定应该从父元素继承 display 属性的值。*/
	color:#fff
}
.cstype-wp .cstype-a span {
	background:0 -180px no-repeat #9cc400;
	display:block;
	background-color:#fff;
	border:1px solid #9cc400;
	color:#9cc400
}
.cstype-wp .cstype-a em {
	background-position:0px -532px;
}
.cstype-wp .cstype-a span {
	background-position:10px -180px
}
.cstype-wp .cstype-b {
	text-indent:75px;
}
.cstype-wp .cstype-b em {
	background:0 -652px no-repeat #00cdff;
	display:block;
	color:#fff
}
.cstype-wp .cstype-b span {
	background:0 -300px no-repeat #00cdff;
	display:block;
	background-color:#fff;
	border:1px solid #00cdff;
	color:#00cdff
}
.cstype-wp .cstype-b em {
	background-position:-3px -652px
}
.cstype-wp .cstype-b span {
	background-position:-3px -300px
}
.cstype-wp .cstype-c {
	text-indent:0px
}
.cstype-wp .cstype-c em {
	background:0 -412px no-repeat #e7e7e7;
	display:block;
	color:#fff
}
.cstype-wp .cstype-c span {
	background:0 -60px no-repeat #fc536f;
	display:block;
	background-color:#f70000;
	border:1px solid #fc536f;
	color:#fc536f
}
.cstype-wp .cstype-c em {
	background-position:10px -412px
}
.cstype-wp .cstype-c span {
	background-position:50px
}
/*.cstype-wp .cstype-c em {
	background-position:10px -412px
}
.cstype-wp .cstype-c span {
	background-position:10px -60px
}*/
.cstype-wp .cstype-d {
	text-indent:75px
}
.cstype-wp .cstype-d em {
	line-height:60px;
	background:0 -352px no-repeat #cf68ed;
	display:block;
	color:#fff
}
.cstype-wp .cstype-d span {
	line-height:58px;
	background:no-repeat #cf68ed;
	display:block;
	background-color:#fff;
	border:1px solid #cf68ed;
	color:#cf68ed
}
.cstype-wp .cstype-d em {
	background-position:-3px -350px
}
.cstype-wp .cstype-d span {
	background-position:-3px 0px
}
.cstype-wp .cstype-e {
	text-indent:75px
}
.cstype-wp .cstype-e em {
	background:0 -472px no-repeat #e9a600;
	display:block;
	color:#fff
}
.cstype-wp .cstype-e span {
	background:0 -120px no-repeat #e9a600;
	display:block;
	background-color:#fff;
	border:1px solid #e9a600;
	color:#e9a600
}
.cstype-wp .cstype-e em {
	background-position:-8px -472px
}
.cstype-wp .cstype-e span {
	background-position:-8px -120px
}
.cstype-wp .cstype-f {
	text-indent:75px
}
.cstype-wp .cstype-f em {
	background:0 -592px no-repeat #49d77d;
	display:block;
	color:#fff
}
.cstype-wp .cstype-f span {
	background:0 -240px no-repeat #49d77d;
	display:block;
	background-color:#fff;
	border:1px solid #49d77d;
	color:#49d77d
}
.cstype-wp .cstype-f em {
	background-position:0 -589px
}
.cstype-wp .cstype-f span {
	background-position:0 -236px
}
/*--图片放大动画--*/
.imgfd:hover img {
      transform: scale(1.005, 1.005);
    }

/*--主页图片动画--*/
.box {
		font-family: 'Ubuntu', sans-serif;
		overflow: hidden;
		position: relative;
		transition: all 0.3s;
	}
	.box:hover {
		box-shadow: 0 0 15px -5px #000;
	}
	.box:before {
		content: '';
		background-color: transparent;
		background-image: radial-gradient(circle at 20% 80%, transparent 29%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 33%, transparent 34%),  radial-gradient(circle at 80% 20%, transparent 29%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 33%, transparent 34%);
		background-size: 30px 30px;
		height: 100%;
		width: 100%;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		transition: all 0.3s ease 0.2s;
	}
	.box:hover:before {
		opacity: 0.2;
	}
	.box img {
		width: 99%;
		height: auto;
		cursor: pointer; 
	    border-style:solid;
	    border-radius:20px;
	    border-width: 1px;
	    border-color:#000;
		transition: all 0.3s ease 0s;
	}
	.box:hover img {
		filter: blur(2px);
	}
	.box .box-content {
		color: #fff;
		background-color: rgba(0,0,0,0.6);
		width: 100%;
		height: 56%;
		padding: 18% 0 0 0;
		position: absolute;
		left: 0;
		top: -100%;
		z-index: 2;
		transition: all 0.3s ease 0s;
	}
	
	.box:hover .box-content {
		top: -10px;
	}

	.box .title {
		color: #fff;
		font-size: 23px;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: uppercase;
		margin: 0;
		text-align: center;		
		
	}
	.box .post {
		color: #32c287;
		font-size: 14px;
		font-style: italic;
		text-transform: capitalize;
		letter-spacing: 2px;


	}
	.box .icon {
		background: rgba(50,194,135,0.6);
		text-align: center;
		height: 25%;
		width: 100%;
		padding: 15px 0 0;
		margin: 0;
		list-style: none;
		transform: translateX(50%);
		position: absolute;
		right: 50%;
		bottom: -100%;
		z-index: 1;
		
		transition: all 0.3s;
	}
	.box:hover .icon {
		bottom: 0;
	}
	.box .icon li {
		display: inline-block;
		margin: 0 3px;
	}
	.box .icon li a {
		color: #32c287;
		background-color: #fff;
		font-size: 18px;
		line-height: 40px;
		height: 40px;
		width: 120px;
		
		border-radius: 40%;
		display: block;
		
		transition: all 0.3s;
	}
	.box .icon li a:hover {
		color: #fff;
		background-color: #f70000;
		box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 5px rgba(0,0,0,0.5) inset;
	}

	@media only screen and (max-width:990px) {
	.box {
		margin-bottom: 30px;
	}
	}

	@media only screen and (max-width:479px) {
	.box .title {
		font-size: 20px;
	}
	}

/*--导航菜单横线v--*/
.hx {
	display: flex;width:auto;top: 30%;left: 22%;position: absolute;font:700 15px/35px "微软雅黑";height:52px;text-align:center;white-space:nowrap;text-align:center; color:#333;transform: translate(-50%, -50%);

}

.li-hx {
    position: relative;
    padding: 20px;
    font:700 15px/35px "微软雅黑";
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
}

.li-hx:hover a {
     color:#2da1d1;
	
}

.li-hx1 {
    position: relative;
    padding: 20px;
    font:700 15px/35px "微软雅黑";
    color: #2da1d1;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
}


.li-hx::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

.li-hx:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #224f88;
    z-index: -1;
}

.li-hx:hover ~ li-hx::before {
    left: 0;
	
}

.li-hx:active {
    background: #224f88;
    color: #fff;
}

/*--产品中心导航菜单横线v--*/
.hxs {
	width:240px;position: absolute;font:700 15px/35px "微软雅黑";height:340px;  text-align:left; border-style:solid; border-width:2px; border-color:#888888; 

}

.li-hxs {
    position: relative;
    padding: 20px;
    font:700 15px/35px "微软雅黑";
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer; 
	 border-bottom-style: inset;
	 border-bottom-width: 1px;
	 border-color:#000;
}

.li-hxs:hover a {
     color:#f70000;
	 
}

.li-hxs a {
     margin-left:10px;
	 
}

.li-hxs1 {
    position: relative;
    padding: 20px;
    font:700 15px/35px "微软雅黑";
    color: #2da1d1;
    line-height: 2;
    transition: 0.2s all linear;
    cursor: pointer;
	
}


.li-hxs::before {
    content: "";
    position: absolute;
    top:  -3px;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 3px solid #000;
    transition: 0.2s all linear;
}

.li-hxs:hover::before {
    width: 80%;
	margin-left:20px;
    top: -3px;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #224f88;
    z-index: -1;
	
}

.li-hxs:hover ~ li-hx::before {
    left: 0;
	
}

.li-hxs:active {
    background: #224f88;
    color: #fff;
	
}