﻿body,li,h1,h2,h3,h4{ margin:0; list-style: none; padding: 0; border: none;}
button{padding:0px; margin: 0px; border: none; outline: none;}
a{ text-decoration:none; color:#FFFFFF;}

a:hover{ opacity:0.8;}
#con{ width: 100%; height:60px; background-color:#000000; position: fixed; top: 0; z-index: 100;}
#nav{ width:800px; height: 60px; margin-left:auto; margin-right:auto;}
#ham{ width:24px; height:60px; float:left; background-color:#000000; position:relative; margin-left:14px; display: none;}
#ham img{ width:24px; height:24px; position:absolute; top:50%; margin-top: -12px;}
#logo{ width:110px; height:60px; float:left; background-color:#000000; position:relative; margin-left:200px;}
#logo img{ width:110px; height:30px; position:absolute; top:50%; margin-top:-15px;}
.index,.pro,.coop,.help{ width:120px; height:60px; background-color:#000000; float:left; text-align:center; line-height:60px; color:#FFFFFF; font-family:"幼圆";}


#product{ width:1024px; height:400px; clear:both; margin-left:auto; margin-right:auto;}
#l{ width:512px; height:400px; float:left; position:relative;}
#r{ width:512px; height:400px; float:left;}
#l h1{ font-family:"幼圆"; font-size:24px; font-weight:normal; margin-left:70px;}
#l p{ font-family:"幼圆"; font-size:16px; font-weight:lighter; margin-left:70px; color:#474747; letter-spacing:2px; line-height:20px;}
#content{ position:absolute; top:50%; margin-top:-100px}
#r{ text-align:center; position:relative;}
#r img{ text-align:center; position:absolute; top:50%; margin-top:-170px; margin-left:-240px;}
#detail a{ font-family:"幼圆"; font-size:14px; color:#FF0004; line-height:28px;}



.im01{
 background-image: url(../images/01.jpg);
 height: 800px;
 width: 1920px;
}
.im02{
 background-image: url(../images/02.jpg);
 height: 800px;
 width: 1920px;
}
.im03{
 background-image: url(../images/03.jpg);
 height: 800px;
 width: 1920px;
}
.im04{
 background-image: url(../images/04.jpg);
 height: 800px;
 width: 1920px;
}






.paddlenav-arrow {
	list-style: none;
	background: hsla(0,0%,100%,0.3);
	opacity: 0.4;
	border-radius: 4px;
	display: block;
	overflow: hidden;
	position: absolute;
	z-index: 2;
	pointer-events: all;


}
.paddlenav-arrow:hover {
	text-decoration: none;

	opacity: 0.8;
}
.paddlenav-arrow::before{
    -webkit-filter: blur(20px);
    filter: blur(20px);}
.paddlenav-arrow-next, .paddlenav-arrow-previous {
	line-height: 240px;
	margin-top: -120px;
	top: 50%;
	width: 124px;
	height: 240px;
}
.paddlenav-arrow-next {
	right: 18px;
	background-image: url(../images/r.png);
}
.paddlenav-arrow-previous {
	background-image:url(../images/l.png);
	left: 18px;
}


.dotnav {
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 2;
}
.dotnav ul {
	display: inline-block;
	position: relative
}
.dotnav li {
	list-style: none;
	margin: 0 10px;
	width: 8px;
	height: 8px;
	float: left;
	position: relative
}
.dotnav-item {
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	outline: none;
	position: absolute;
	border-radius: 50%;
	background-color: #999;
	box-sizing: content-box;
	padding: 0;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap
}
.dotnav-item:hover {
	background-color: #666
}
.dotnav-item.current {
	top: -1px;
	left: -1px;
	width: 8px;
	height: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #0070c9;
	background-color: transparent;
	cursor: default
}


.hero-gallery {
	position: relative;
	overflow: hidden;
	height:800px;
	margin-top: 60px;
}
.hero-gallery-item {
	position: absolute;
	width: 1920px;
}



#express{ margin-left:auto; margin-right:auto; text-align:center; margin-top:60px;}
#express h1{ letter-spacing:4px;}

#KVR{ margin-left:auto; margin-right:auto;}


	.title{ text-align:center; font-family: "黑体"; line-height: 50px; margin-top: 100px; background-color: #fafafa;
}
	.title2{ text-align: center; font-size: 18px; font-family: "等线"; letter-spacing: 4px; color:#2B2B2B;   background-color: #fafafa;
}
	.tvbox{
		width:100%;
		padding: 20px 0 40px 0;
		background-color: #fafafa;
	}
	.tv{
		display: block;
		width: 60%;
		margin:auto;
		background-color: #fafafa;

	}
	.title3{ font-family: "等线"; text-align: center; font-size: 42px; line-height: 50px; margin: 50px 0 40px 0;}
	.title4{ font-family: "等线"; text-align: center; font-size: 42px; line-height: 50px; margin: 50px 0 0px 0;}
	.icon{ width:15%; padding: 20px 5% 20px 5%; float: left;}
	.tvicon{ display: inline-block; background-color: #f9f0eb; padding: 0 0 40px 0px;}
	.title5{ font-family: "等线"; text-align: center; font-size: 20px; line-height: 18px; margin: 20px 0 -40px 0; letter-spacing: 2px;}
	.jdhbox{ display: inline-block; background-color:floralwhite;}
	.jdh{ width: 100%;}
	.icons{ width:8%; padding: 20px 6% 20px 6%; float: left;}
	.iconss{ display: block; opacity: 0.2; margin: -20px auto 20px auto ;}
	.ly{ display: block; margin: -60px auto 40px auto ;}

.dh{ width:100%;}
.dra{
	background-color: white;
	margin-top: 50px;
	width: 100%;
	height: 60px;
	box-shadow: 1px 1px 2px 1px #ccc;
	text-align: center;
	line-height: 60px;
	letter-spacing: 2px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 24px;
}

@media only screen and (max-width: 1366px){
    .hero-gallery {
		height:569px;
		margin-top: 50px;
}
    .hero-gallery-item {
		width: 1366px;
}
	.im01{
 		background-image: url(../images/05.jpg);
 		height: 569px;
 		width: 1366px;
}
	.im02{
 		background-image: url(../images/06.jpg);
 		height: 569px;
 		width: 1366px;
}
	.im03{
 		background-image: url(../images/07.jpg);
 		height: 569px;
 		width: 1366px;
}
	.im04{
 		background-image: url(../images/08.jpg);
 		height: 569px;
 		width: 1366px;
}
	
	#ham{height:50px;}
	#con{ height:50px;}
	#nav{ height:50px;}
    #logo{ width:100px; height:50px; margin-left: 300px;}
    .index{ height:50px;  line-height:50px;}
    .pro{ height:50px;  line-height:50px;}
    .coop{ height:50px;  line-height:50px;}
    .help{ height:50px;  line-height:50px; }
	
	.paddlenav-arrow-next, .paddlenav-arrow-previous {
	line-height: 180px;
	margin-top: -90px;
	top: 50%;
	width: 80px;
	height: 180px;
	background-position: center;
	background-size: 60px 120px;
	background-repeat: no-repeat;
}
	.paddlenav-arrow-next {
	right: 18px;
	background-image: url(../images/r.png);
}
	.paddlenav-arrow-previous {
	background-image:url(../images/l.png);
	left: 18px;
}
	.title{ margin-top: 90px;}
	

}

	#nav{ width:100%; height: 50px; margin-left:auto; margin-right:auto;}
	#logo{ width:110px; height:50px; float:left; background-color:#000000; position:relative; margin-left:40px;}
	#logo img{ width:110px; height:30px; position:absolute; top:50%; margin-top:-15px;}
	#index,#pro,#coop,#help{ width:100px; height:50px; background-color:#000000; float:left; text-align:center; line-height:50px; color:#FFFFFF; font-family:"幼圆";}
	
	.iconss{width: 20%; opacity: 0.2; margin: -6px auto 10px auto ;}
	.ly{ width: 3%; display: block; margin: -30px auto 30px auto ;}
	.title5{ margin: 20px 0 0px 0; }

}
    #logo{ margin-left: 80px;}



	
@media only screen and (max-width: 640px){
	
    .hero-gallery {
		height:267px
}
    .hero-gallery-item {
		width: 640px;
}


.im01{
 background-image: url(../images/11.jpg);
 height: 267px;
 width: 640px;
}
.im02{
 background-image: url(../images/12.jpg);
 height: 267px;
 width: 640px;
}
.im03{
 background-image: url(../images/13.jpg);
 height: 267px;
 width: 640px;
}
.im04{
 background-image: url(../images/14.jpg);
 height: 267px;
 width: 640px;

}

	
	#ham{  display:block;}	
	#ham:hover{ opacity:0.8;}
	#nav{ width:100%; height: 50px; display: none; position: absolute; z-index: 10; margin-top: 50px;}
	#logo{ width:80%; height:50px; text-align: center; margin-left: 0;}
	#logo img{ width:110px; height:30px;  top:50%; margin:-15px 0 0 -50px;}
	
	.index,.pro,.coop,.help{ width:100%; height:50px; float:left; text-align:center; line-height:50px; color:#FFFFFF; font-family:"幼圆"; background-color: rgba(0,0,0,0.9); overflow: hidden;}
	.index::before{ filter: blur(40px);}
	.pro::before{ filter: blur(40px);}
	.coop::before{ filter: blur(40px);}
	.help::before{ filter: blur(40px);}
	
	#list{ float: left;}
	.iconss{width: 20%; opacity: 0.2; margin: -20px auto 10px auto ;}
	.ly{ width: 3%; display: block; margin: -20px auto 30px auto ;}
	.title5{ margin: 20px 0 0px 0; }
	
	}