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

body{ background:#fff;}
.left{ float:left;}
.right{ float:right;}
.wrap{ width:100%; min-width:1220px; background:#fff; position:relative; overflow:hidden; margin:0 auto;}
.content{ overflow:hidden;}
.clear{ height:0; clear:both;}

/*头部*/
.header{ width:100%; position:fixed; left:0; top:0; z-index:99; transition:all ease 0.4s;}
.header::before{ content:''; display:block; width:100%; height:100%; background:url(../images/common/head_bg.png) center bottom repeat-x; position:absolute; left:0; top:0; z-index:1; transition:all ease 0.4s;}
.header::after{ content:''; display:block; width:100%; height:100%; background:#163470; position:absolute; left:0; top:0; z-index:2; transition/:all ease 0.4s; opacity:0;}
.header .head{ width:1200px; height:80px; padding:10px 0 30px; position:relative; margin:0 auto; transition:all ease 0.4s; z-index:3;}
.header h1.logo{ display:block; position:relative; float:left;}
.header h1.logo a{ display:block; line-height:80px; color:#fff; font-size:22px; font-weight:normal; position:relative; z-index:3; transition:all ease 0.4s;}
.header h1.logo a::before{ content:''; display:block; width:100%; height:100%; background:url(../images/common/logo_fix.png) left center no-repeat; background-size:auto 100%; position:absolute; left:0; top:0; z-index:3; transition:all ease 0.4s; opacity:0.96;}
.header h1.logo a::after{ content:'山东威清视讯科技有限公司'; margin-left/:1em;}
.header h1.logo a img{ display:block; height:80px; float:left; transition:all ease 0.4s; margin:0 14px 0 0; opacity:0;}

.header.fixed{ box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.header.fixed::before{ opacity:0;}
.header.fixed::after{ opacity:1;}
.header.fixed .head{ padding:0 0;}
.header.fixed h1.logo a{ color/:#333;}
.header.fixed h1.logo a img{ height:70px; padding:5px 0;}
.header.fixed h1.logo a::before{ height:70px; margin:5px 0;}

/*导航*/
ul.nav{ display:block; height:80px; font-size:15px; float:right; margin-right:-1em;}
ul.nav li{ display:block; float:left; position:relative;}
ul.nav li a{ display:block; line-height:80px; color:#fff; text-align:center; padding:0 0.4em; margin:0 1em; position:relative;}
ul.nav li:first-child a{ min-width:48px;}
ul.nav li > a:hover,
ul.nav li.on > a,
ul.nav li.cur > a{ color:#fff;}
ul.nav li > a:hover::after,
ul.nav li.on > a::after,
ul.nav li.cur > a::after{ content:''; display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; bottom:0%; transition:all ease 0.4s;}
ul.nav li p.sub{ display:none; min-width:100%; background:#005beb; overflow:hidden; padding:6px 0 0; position:absolute; left:50%; top:100%; transform:translateX(-50%); z-index:99; margin-bottom:-8px; box-shadow:0 2px 4px rgba(0,0,0,0.2);}
ul.nav li p.sub a{ display:block; line-height:3; color:#fff; font-size:14px; font-weight:normal; padding:0 12px; white-space:nowrap; margin:0;}
ul.nav li p.sub a:hover,
ul.nav li p.sub.on a{ color:#005beb; background:#f6f6f6;}

.header.fixed ul.nav li a{ color/:#333;}
.header.fixed ul.nav li > a:hover,
.header.fixed ul.nav li.on > a,
.header.fixed ul.nav li.cur > a{ color/:#005beb;}
.header.fixed ul.nav li > a:hover::after,
.header.fixed ul.nav li.on > a::after,
.header.fixed ul.nav li.cur > a::after{ background/:#005beb;}

/*banner*/
.banner{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:540px; background-position:center top !important; background-attachment:fixed !important; background-size/:cover !important;}
.banner h2{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:1200px; color:#fff; font-size:16px; font-weight:normal; margin:0 auto;}
.banner h2 em{ display:block; line-height:1.5; color:#fff; font-size:2.25em; font-weight:bold; text-align:center; padding:0.25em 0 0;}
.banner h2 span{ display:block; width:68%; line-height:2; color:#eee; text-align:center; margin:0.375em auto 0;}

/*底部*/
.footer{ color:#fff; background:#202020; padding:48px 0 0;}
.footer .foot{ display:flex; justify-content:space-between; width:1200px; margin:0 auto; position:relative;}
.footer .r{ display:flex; justify-content:space-between; overflow:hidden; flex:auto;}

.footer .info{ display:flex; flex-direction:column; max-width:30%; color:#fff; font-size:16px; overflow:hidden; margin-right:8%;}
.footer .info a.logo{ display:block; line-height:40px; color:#fff; font-size:19px; font-weight:normal; position:relative; z-index:3; transition:all ease 0.4s;}
.footer .info a.logo::after{ content:'山东威清视讯科技有限公司'; margin-left/:1em;}
.footer .info a.logo img{ display:block; height:40px; float:left; filter:brightness(0) invert(1); transition:all ease 0.4s; margin:0 14px 0 0; opacity:0.96;}
.footer .info p{ display:block; line-height:2; color:#999; font-size:0.875em; overflow:hidden; padding:1em 0 0;}
.footer .info a.tel{ display:block; line-height:0.875; font-size:1.625em; margin:0.5em 0; padding-top:8px;}
.footer .info a.tel font{ color:#999; font-size:14px;}

.footer dl{ display:block; max-width:16em; font-size:16px; float:left;}
.footer dl dt{ display:block; line-height:2.375; color:#fff; padding:0 0 0.875em;}
.footer dl dt a{ display:block;}
.footer dl dt a:hover{ color:#fff;}
.footer dl dd{ display:block; line-height:2.25; color:#999; font-size:0.875em;}
.footer dl dd a{ display:block;}
.footer dl dd a:hover{ color:#fff;}

.footer dl.code{ width:110px;}
.footer dl.code dt{ text-align:center;}
.footer dl.code dd img{ display:block; width:100%;}

.footer .copyright{ width:100%; line-height:1.5; color:#999; font-size:14px; text-align:center; padding:2em 0; margin:20px 0 0;}
.footer .copyright a:hover{ color:#fff; text-decoration:underline;}

/*返回顶部*/
.backToTop{ display:block; width:44px; height:44px; background:#163470 url(../images/common/top.png) center no-repeat; background-size:20px auto; border-radius:2px; position:fixed; right:20px; bottom:70px; cursor:pointer; text-indent:-9999px; z-index:99; transition:all ease 0.4s;}
.backToTop:hover{ background-color:#005beb;}

.shadow{ width:100%; height:100%; background:rgba(0,0,0,0.6); position:fixed; left:0; top:0; z-index:9998; opacity:0; visibility:hidden; transition:all ease 0.2s;}
.shadow.show{ opacity:1; visibility:visible;}
.picShow{ position:fixed; left:50vw; top:50%; top:0; transform:translate(-50%,0); z-index:9999; opacity:0; visibility:hidden;}
.picShow.show{ opacity:1; visibility:visible;}
.picShow .pic{ display:flex; justify-content:center; align-items:center; width:80vw; height:80vh; height/:750px; max-height/:82vh; width:90vw; height:100vh; background-size:contain !important; background-position:center; background-repeat:no-repeat; transform:scale(0.8); opacity:0; transition:all ease 0.4s;}
.picShow .pic img{ display:block; max-width:96%; max-height:96%;}
.picShow.show .pic{ transform:scale(1); opacity:1;}
.picShow a.close{ width:24px; height:24px; background:url(../images/common/close.png) center no-repeat; background-size:contain; position:absolute; left:100%; bottom/:100%; top:2%; cursor:pointer; z-index:9;}

/*主体样式*/
.main{ position:relative;}
.main::before,
.main::after{ content:''; display:block; width:100%; height:0; clear:both;}

.position{ width:1200px; font-size:16px; padding:26px 0; margin:0 auto; position:relative;}
.position::before{ content:''; display:block; width:100vw; height:100%; background/:#f5f5f5; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1;}
.position::after{ content:''; display:block; overflow:hidden; clear:both;}
.position ul.menu{ display:flex; justify-content:center; font-size:0.9375em; overflow:hidden; position:relative; z-index:3; margin:0 auto;}
.position ul.menu li{ display:block; min-width/:16.666666%;}
.position ul.menu li a{ display:block; min-width:6em; line-height:3.2; color:#333; text-align:center; overflow:hidden; background/:#f6f6f6; padding:0 1em; position:relative; margin:0 0.75em;}
.position ul.menu li a:hover,
.position ul.menu li.cur a{ color:#005beb;}
.position p{ display:block; width:1200px; line-height:4.425; color:#999; font-size:0.875em; padding:1.5em 0 0; margin:0 auto;}
.position p a{ margin:0 2px;}
.position p a:hover{ color:#005beb;}

/*内容样式*/
.main .attr{ width:1200px; position:relative; margin:0 auto;}
.main .attr::before,
.main .attr::after{ content:''; display:block; overflow:hidden; clear:both;}
.main .attr h2.title{ display:block; color:#333; font-size:16px; font-weight:normal; text-align:center; padding:2.5em 0 1.5em;}
.main .attr h2.title em{ display:block; line-height:2; color:#333; font-size:1.75em; font-weight:bold;}
.main .attr h2.title span{ display:block; max-width:62.5%; line-height:2; color:#666; font-size:0.9375em; margin:0 auto;}

.main .attr h3.title{ display:block; line-height:44px; color:#333; font-size:24px; text-align:center; padding:34px 0 14px; border-top:1px solid #ddd;}
.main .attr p.mark{ display:block; line-height:1.75; color:#888; font-size:14px; text-align:center; background:#f5f5f5; padding:0.75em 1.5em; margin:1em 0 -0.5em;}
.main .article{ line-height:2; color:#4e4e4e; font-size:15px; text-align:justify; overflow:hidden; padding:2em 0 2em;}
.main .attr h2.title + .article{ padding-top:0;}
.main .article *{ max-width:100%; line-height:inherit; color:inherit; font-size:inherit;}

/*文章切换*/
.main .change{ overflow:hidden; padding:28px 0 36px; border-top:1px solid #ddd;}
.main .change p{ display:block; line-height:26px; color:#595959; font-size:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; padding:5px 0;}
.main .change p a{ color/:#005beb; font-weight/:bold;}
.main .change p:hover{ color:#005beb;}
.main .change p:hover em{ background-color:#005beb;}

/*页码样式*/
.pages{ text-align:center; font-size:14px; padding:0 0 56px;}
.pages li{ display:inline-block; vertical-align:top;}
.pages span,
.pages a{ display:inline-block; *display:inline; *zoom:1; min-width:12px; color:#666; height:24px; line-height:24px; text-align:center; padding:4px 11px; border:1px solid #ddd; margin:0 5px;}
.pages a:hover,
.pages span{ color:#fff; background:#005beb; border-color:#005beb;}

.main .newsCon{ padding:0 30px; overflow:hidden; border:1px solid #ddd; margin:0 0 40px;}

/*产品列表*/
.main ul.proList{ display:block; font-size:16px; overflow:hidden; padding:0 0 56px;}
.main ul.proList li{ display:block; overflow:hidden; padding:30px 0; border-bottom:1px dashed #ddd;}
.main ul.proList li a.pic{ display:block; width:420px; overflow:hidden; position:relative; float:left; margin:0 30px 0 0;}
.main ul.proList li a.pic::before{ content:''; display:block; width:100%; height:100%; background:rgba(0,91,235,0.85) url(../images/icons/more.png) center no-repeat; position:absolute; left:0; top:0; z-index:3; transition:all ease 0.4s; transform:translateX(-100%);}
.main ul.proList li a.pic img{ display:block; width:100%; height:280px; transition:all ease 0.4s;}
.main ul.proList li a.pic:hover::before{ transform:translateX(0);}
.main ul.proList li a.pic:hover img{ transform:scale(1.1);}
.main ul.proList li .info{ overflow:hidden;}
.main ul.proList li a.cate{ display:block; line-height:2; color:#005beb; text-align:right; margin:1em 0 0;}
.main ul.proList li a.title{ display:block; line-height:2; color:#444; font-size:1.125em; font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:all ease 0.4s;}
.main ul.proList li a.title:hover{ color:#005beb;}
.main ul.proList li .txt{ display:block; height:12em; line-height:2; color:#888; font-size:0.875em; padding:1.5em 0 0;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:6;
}

/*案例列表*/
.main ul.caseList{ display:block; font-size:16px; overflow:hidden; margin:0 -14px; padding:0 0 40px;}
.main ul.caseList li{ display:block; width:33.33%; float:left;}
.main ul.caseList li a{ display:block; overflow:hidden; margin:0 14px 24px; transition:all ease 0.4s; cursor:pointer;}
.main ul.caseList li a:hover{ border-color:#005beb;}
.main ul.caseList li a i{ display:block; overflow:hidden; position:relative;}
.main ul.caseList li a i::before{ content:''; display:block; width:100%; height:100%; background:rgba(0,91,235,0.85) url(../images/icons/more.png) center no-repeat; position:absolute; left:0; top:0; z-index:3; transition:all ease 0.4s; transform:translateY(100%);}
.main ul.caseList li a i img{ display:block; width:100%; transition:all ease 0.4s; transform-origin:center top;}
.main ul.caseList li a em{ display:block; line-height:1.5; color:#333; font-size/:1.125em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0.75em 6px 0; transition:all ease 0.4s;}
.main ul.caseList li a p{ display:block; line-height:2.25; color:#666; font-size:0.875em; margin:0 6px;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
}
.main ul.caseList li a:hover i::before{ transform:translateY(0);}
.main ul.caseList li a:hover i img{ transform:scale(1.05);}
.main ul.caseList li a:hover em{ color:#005beb;}

/*解决方案列表*/
.main ul.sltList{ display:block; font-size:16px; overflow:hidden; padding:0 0 30px;}
.main ul.sltList li{ display:block; overflow:hidden; padding:0 0 30px;}
.main ul.sltList li a.pic{ display:block; overflow:hidden; position:relative;}
.main ul.sltList li a.pic img{ display:block; width:100%; transition:all ease 0.4s;}
.main ul.sltList li .info{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; color:#fff; text-align:center; overflow:hidden; background:rgba(0,91,235,0.85); position:absolute; left:0; top:0; z-index:3; transition:all ease 0.4s; transform:translateY(100%);}
.main ul.sltList li .info h4{ display:block; line-height:2; font-size:1.375em; font-weight:normal; position:relative; transition:all ease 0.4s;}
.main ul.sltList li .info .txt{ max-width:80%; line-height:2.15; font-size:0.875em; margin:1em 0 2em;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.main ul.sltList li a.pic:hover img{ transform:scale(1.05);}
.main ul.sltList li a.pic:hover .info{ transform:translateY(0);}
.main ul.sltList li a.title{ display:block; line-height:1.4; color:#333; font-size:1.125em; font-weight:bold; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:1.12em 0 0; position:relative; transition:all ease 0.4s;}
.main ul.sltList li a.title:hover{ color:#005beb;}

/*合作列表*/
.main ul.coopList{ display:block; font-size:16px; overflow:hidden; margin:-12px; padding:0 0 60px;}
.main ul.coopList li{ display:block; width:20%; float:left;}
.main ul.coopList li a{ display:block; overflow:hidden; padding:24px; border:1px solid #ddd; position:relative; margin:12px; transition:all ease 0.4s;}
.main ul.coopList li a img{ display:block; width:100%; height/:100px; transition:all ease 0.4s; margin:0 auto;}
.main ul.coopList li a h4{ display:block; line-height:2; color:#333; font-size:1.125em; font-weight:normal; text-align:center;}
.main ul.coopList li a .txt{ height:10em; line-height:2; color:#666; font-size:0.875em; text-align:center; margin:1em 0.5em 0;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:5;
}
.main ul.coopList li a:hover{ border-color:#005beb;}
.main ul.coopList li a:hover img{ transform:scale(1.1);}

/*联系我们*/
.contact{ display:flex; justify-content:space-between; align-items:center; padding:0 0 60px; position:relative;}
.contact dl{ display:block; flex:auto; font-size:16px; padding:0 0 2em;}
.contact dl dt{ display:block; line-height:2; color:#333; font-size:1.75em; font-weight:bold; padding:0 0 0.125em;}
.contact dl dd{ display:block; line-height:1.75; color:#434343; padding:0.5em 0 0.25em;}
.contact dl dd b{ display:block; color:#005beb; font-size:1.6em; margin-bottom:-0.25em;}
.contact .map{ width:54%; background:#f2f2f2; border:1px solid #ccc; overflow:hidden; flex-shrink:0; margin:0 0 0 6%;}

.member{ position:relative; padding:64px 0;}
.member::after{ content:''; display:block; width:100vw; height:100%; background:#f6f6f6; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1;}
.member ul{ display:block; font-size:16px; position:relative; z-index:3; margin:-12px;}
.member ul::before,
.member ul::after{ content:''; display:block; width:100%; height:0; clear:both;}
.member ul li{ display:block; width:33.33%; float:left;}
.member ul li a{ display:block; background:#fff; overflow:hidden; padding:8% 5%; border-radius:3px; box-shadow:0 1px 20px 0 rgba(0,0,0,0.1); position:relative; margin:12px;}
.member ul li a::before{ content:''; display:block; width:89%; height:100%; background:url(../images/icons/member.jpg) no-repeat; background-size:cover; position:absolute; right:-8%; top:0; z-index:1; opacity:1;}
.member ul li a::after{ content:''; display:block; width:89%; height:100%; background:linear-gradient(to right, rgba(255,255,255,1) 28%, rgba(255,255,255,0) 64%); position:absolute; right:-8%; top:0; z-index:2;}
.member ul li a > *{ position:relative; z-index:3;}
.member ul li a h4{ display:block; color:#005beb; font-size:inherit; font-weight:normal; margin:1% 0 1%;}
.member ul li a h4 em{ color:#333; font-size:1.25em; font-weight:bold; margin:0 0.75em 0 0;}
.member ul li a p{ display:block; width:64%; height:3.6em; line-height:1.8; color:#666; font-size:0.875em; padding:0.625em 0 0;}
.member ul li a p::before{ content:'负责地区：'; margin/:0 0 0 -5em;}



@media only screen and (max-width:768px){








}




/**/