@charset "utf-8";
/*整站公共样式代码写在这里*/
:root {
  /*BANNER 设置*/
  --primary-height: 1000px; /*主色调*/
  --second-width: 100%; /*附加色调*/
 
}


/* SuperSlide格式 */
#vk-slideBox{ width:var(--second-width); height:var(--primary-height); overflow:hidden; position:relative; }
#vk-slideBox .hd{     width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    height: 30px;
    line-height: 30px;
    text-align: center; }
#vk-slideBox .hd ul li{ cursor:pointer; display:inline-block; *display:inline; zoom:1; width:11px; height:11px; margin:4px; background:url(/assets/vkes/imgs/slide/dot-black.png) 0 0; overflow:hidden; 
	line-height:9999px; filter:alpha(opacity=40);opacity:0.4; 
}
#vk-slideBox .hd ul .on{ filter:alpha(opacity=100);opacity:1;  }
#vk-slideBox .bd{ position:relative; height:100%; z-index:0;}
#vk-slideBox .bd li{ zoom:1; vertical-align:middle; }
#vk-slideBox .bd img{ width:var(--second-width); height:var(--primary-height); display:block;  }

/* 下面是前/后按钮代码，如果不需要删除即可 */
#vk-slideBox .prev,
#vk-slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(/assets/vkes/imgs/slide/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
#vk-slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
#vk-slideBox .prev:hover,
#vk-slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
#vk-slideBox .prevStop{ display:none;  }
#vk-slideBox .nextStop{ display:none;  }

/*------------------------------------------------------------------*/
/*  首页式样代码可以写在这里
/*-----------------------------------------------------------------*/

/*------------------------------------------*/
/*  主题导航
/*------------------------------------------*/
.vk-holder { background-color: #fff; border: 1px solid #eee; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .1); box-shadow: 0 0 10px rgba(0, 0, 0, .1); border: 1px solid #f5f5f5; padding: 30px 15px; display: block; }
.vk-holder-icon{ margin-bottom: 20px; text-align: center; }
.vk-holder p{ text-align: center; font-size: 0.8rem; font-size: 0.975rem; font-weight: 400; margin-bottom: 10px; }
.b-right { border-right: 1px dashed #e9e9e9; }
.vk-title{color:#004861;font-size:1.75rem;margin-bottom:0.5rem;font-weight:700;}
/*------------------------------------------*/
/*  产品介绍
/*------------------------------------------*/
#vk-product{padding:40px 0;}   
#vk-product p{color:#888888;font-size:14px;line-height: 21px;}
#vk-product .vk-title-1{color:#FFFFFF;margin-bottom: 16px;font-size:24px;font-weight:700;}
#vk-product #vk-system{margin-bottom: 30px;height:510px;}
#vk-product #vk-system p{color:#FFFFFF;margin-bottom: 16px;}
#vk-product .table{ margin-top:20px; margin-bottom:20px; width:100%; }
#vk-product .table td,#vk-product .table th{ font-size: 16px; padding: 16px 0; border-top: none; border-bottom: 1px dashed #FFFFFF; }
#vk-product .vk-product-item{ height:208px; border-radius: 6px; padding: 30px; margin-bottom: 30px; background-color: #fff; border: 1px solid #f5f5f5; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); cursor: pointer; }
#vk-product .vk-product-item:hover{ background-color: #FAFAFA; border: 1px solid #f5f5f5; -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); }
#vk-product .vk-title-2{color:#004861;font-size:1.2rem;font-weight:700;margin-bottom: 10px;text-align: center;}
#vk-product .vk-product-item p{font-size: 15px; line-height: 28px; color: #5c6873;}

/*------------------------------------------*/
/*  友情链接
/*------------------------------------------*/
#vk-link { padding: 40px 0;align-items: center;text-align: center;} 
#vk-link a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
#vk-link .vk-link-box{
	margin:20px 0;
}
#vk-link a img{
	filter:grayscale(80%);
	width: 100%;
	height:100%;
	border: 1px solid #eeeeee;
}
#vk-link a:hover img{
	filter:grayscale(0);
}      
/*#vk-links p { color: #888888; font-size: 14px; line-height: 21px; }
#vk-links li{float: left;padding-bottom: 10px;}
#vk-links li img{width:100%;height:50px;border:1px solid #CCCCCC;}*/

/*------------------------------------------*/
/*  BANNER 图
/*------------------------------------------*/
#vk-banner .layui-carousel-ind { top: -60px; }

/*------------------------------------------*/
/*  产品分类
/*------------------------------------------*/
.product{
	margin-top:120px;
	margin-bottom:120px;
}
.product ul li{
	width: 25%;
	height:600px;
	display: inline-block;
}
.product-box{
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
.product img{
	width: 100%;
	height:570px;
	filter: grayscale(80%);
	opacity: 0.8;
}
.product-box:hover img{
	filter: grayscale(0%);
	opacity: 1;
	-webkit-animation:scaleout 3.3s infinite ease-in-out;
	animation:scaleout 3.3s infinite ease-in-out;
	
}
.product-box .title{
	position: absolute;
	bottom:20px;
	width:100%;
	text-align: center;
	font-size: 30px;
	opacity:0.8;
	padding: 10px 0;
	background-color: #FFFFFF;
	color:#10295c;
}
.product-box:hover .title{

	color:#FFFFFF;
	background-color: #10295c;	
	font-weight: bold;
}

@-webkit-keyframes scaleout {
	0% {
	-webkit-transform:scale(1.0)
	}
	100% {
		-webkit-transform:scale(1.1);
	}
	}@keyframes scaleout {
		0% {
		transform:scale(1.0);
		-webkit-transform:scale(1.0);
	}
	10% {
		transform:scale(1.0);
		-webkit-transform:scale(1.0);
	}
	100% {
		transform:scale(1.1);
		-webkit-transform:scale(1.1);
	}
}


/*------------------------------------------*/
/*  企业宗旨
/*------------------------------------------*/
.purpose{
	background-image: url(/assets/app/imgs/index/bg_purpose.jpg);
	background-size: cover;
	height:430px;
	width: 100%;
	color: #fff;
	position: relative;
}
.purpose .title1{
    font-weight: bold;
    font-size: 42px;
    text-align: center;
    padding-top:40px;
	
}
.purpose ul{text-align: center;position: absolute;top:50%;left: 50%;transform:translate(-50%, -50%);}
.purpose ul li{display: inline-block;width:116px;font-size:22px;position: relative;}
.purpose ul li span:before{
    content: '';
    width: 2px;
    height: 9px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url(/assets/app/imgs/index/purpose_icon_l.png) no-repeat;
    left: 0;
	
}
.purpose ul li span:after{
    content: '';
    width: 2px;
    height: 9px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
        background: url(/assets/app/imgs/index/purpose_icon_r.png) no-repeat;
    right: 0;
}
.purpose ul li.middle{margin:0 114px;}
.purpose ul li.middle:before{
    content: '';
    background-color: rgba(255,255,255,.4);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: width 1s 1s;
    width:116px;
    height:1px;
    right:100%;
    }
.purpose ul li.middle:after{
    content: '';
    background-color: rgba(255,255,255,.4);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: width 1s 1s;
    width:116px;
    height:1px;
    left:100%;
}


/*------------------------------------------*/
/*  资讯中心
/*------------------------------------------*/
#vk-news li .in-caption{width:100%;overflow: hidden;display: block;
white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis;
}
#vk-news li .date{float:right;font-size:14px;display: block;}

#vk-news{ overflow:hidden; position:relative;  height:240px;}
#vk-news .hd{ overflow:hidden;  height:60px;  padding:0 10px;  }
#vk-news .hd .prev,#vk-news .hd .next{ display:block;  width:40px; height:40px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden; cursor:pointer;}
#vk-news .hd .next{ background-position:0 -50px;  }
#vk-news .hd .prevStop{ background-position:-60px 0; }
#vk-news .hd .nextStop{ background-position:-60px -50px; }
#vk-news .hd .next:hover, #vk-news .hd .prev:hover{color:#f7931e;}
#vk-news .hd .title{font-size: 30px;line-height: 60px;}
#vk-news .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
#vk-news .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
#vk-news .hd ul li.on{ background-position:0 0; }
#vk-news .bd{ padding:10px;width:900px;}
#vk-news .bd ul{ overflow:hidden; zoom:1; }
#vk-news .bd ul li{ margin:0 20px; float:left; _display:inline; overflow:hidden; width:400px;height:150px; position: relative;border-bottom: 1px solid #f7931e;}
#vk-news .bd ul li .pic{ text-align:center; }
#vk-news .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
#vk-news .bd ul li .pic a:hover img{ border-color:#999;  }
#vk-news .bd ul li .title{ line-height:24px;min-height: 120px; max-height: 120px; font-size:18px; overflow: hidden; }
#vk-news .bd ul li .more{position: absolute;bottom:0px;right:20px;display: block;}
#vk-news .bd ul li .more a:hover{color:#f7931e;}

#vk-global{
	width:calc(100% - 60px);
	height:200px;
	background-image: url(/assets/app/imgs/index/network_img.jpg);
    position: relative;
    background-size: 100% 100%;
    padding: 20px 30px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
#vk-global .vk-global-box{
	height: 100%;
    border: solid 1px rgba(255, 255, 255, 0.4);
    font-size: 42px;
    letter-spacing: -0.96px;
    position: relative;
    z-index: 10;
    line-height: 200px;
}
#vk-global .vk-global-box:after {
    content: '';
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    background: url(/assets/app/imgs/index/icon01.png) no-repeat center;
    box-shadow: inset 0.5px -0.9px 0 0 rgba(255, 255, 255, 0.4);
}
#vk-global .vk-global-box:hover:after{
	background-color: #00000066;
}

