@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select{margin: 0;padding: 0;border: 0; font-family:"微软雅黑";}
table{ border-collapse:collapse;}
body{background:url(../images/1600.jpg) left top;}

/*bg*/
.logo2{ display:none;}
.bg{position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
.bg img{
	width:100%;
	height:auto;
	}
	
/*header*/	
.header{
	width:100%;
	height:50px;
	background:#1c1c1c;
	}	
.top{
	width:95%;
	margin:0 auto;
	}	
.logo{ 
float:left;
width:163px;
height:82px;
}	
.phone{
	float:right;
	width:175px;
	height:50px;
	line-height:50px;
	font-size:1em;
	color:#fff;
	text-align:right;
	white-space:nowrap;
	}

/*mainCont*/	
.mainCont{
	width:920px;
	padding-top:7%;
	margin:0px auto;
	}	
.mainCont ul li{float: left; list-style-type: none; background: #fff; width: 279px;color: #000;}
.p1{padding:10px 10px 10px 10px; text-align: center;font-size: 16px; font-weight: bold; }
.p2{padding: 0px 10px 10px 10px;color: #787878;}
.mainCont ul li:hover{box-shadow: 0px 5px 10px #0c6255;}
.mainCont ul li a:hover{text-decoration:none; color: #0c6255;  }
.mainCont ul li:nth-child(2){margin-left: 40px;}
.mainCont ul li:nth-child(3){margin-left: 40px;}
/*footer*/
.footer{ position:absolute;left:0;bottom:0;width:100%;height:50px;font-size:.8em;color:#fff; background:#1c1c1c;line-height:50px; text-align:center;}
.footer a{color:#999;}
.footer a:hover{color:#f00;}

/*音乐*/
.musics{width:0;height:0; overflow:hidden; position:absolute;left:0;top:0; display:none;}	

/*客服代码*/
.kefu{ position:fixed;width:20%;padding:1em;color:#fff; top:20%;left:-200%; background:#000;z-index:999; display:none;}
.contactClick{ display:block; background:#018E87;width:30px; text-align:center;padding:0.5em 0; cursor:pointer; position:absolute;right:-44px;top:0px;line-height:20px; }
.contactClick:hover{ background:#036A64;}
.kefuBOx{ position:relative;width:100%;line-height:25px;}
.cc1{ display:block; background:#f30;width:30px; text-align:center;padding:0.5em 0; cursor:pointer; position:fixed;left:0;top:20%;line-height:20px;color:#fff;z-index:999;display:none;}
.cc1:hover{ background:#900;}	
/*---------------响应式控制-----------------*/


body{background:url(../images/1280.jpg) left top;}
#nav{width:620px;}	
/*改变nav li宽度*/	

.nav li img{ width:100%; height:auto !important;}
.nav li.nav-About{width:120px;height:280px;}
.nav li.nav-Products{width:105px;height:235px;margin:15px 5px 0 5px;}
.nav li.nav-News{width:98px;height:225px;margin:27px 0 0 0;}
.nav li.nav-shopping{width:105px;height:235px;margin:15px 5px 0 5px;}
.nav li.nav-Contact{width:120px;height:280px;}

.nav li.nav-About span{width:120px;height:300px;}
.nav li.nav-Products span{width:105px;height:255px;}
.nav li.nav-News span{width:98px;height:225px;}
.nav li.nav-shopping span{width:105px;height:255px;}
.nav li.nav-Contact span{width:120px;height:300px;}
}	
/*此样式在窗口小于820-620的时候生效
@media only screen and (min-width:620px) and (max-width: 820px){
	.mainCont{width:120%;}	
}*/
/*此样式在窗口小于640的时候生效*/
@media screen and (max-width: 620px) {
.logo{height:50px;}
.logo img{height:50px; width:auto !important;}

.footer{ position:static;margin-top:20px;line-height:25px;}
.kefu{ position:fixed;width:60%;}
.logo2{ display:block;}
.logo1{ display:none;}
}	
/*此样式在窗口小于480的时候生效*/
@media screen and (max-width: 480px) {
.phone{width:145px; font-size:.8em;}	
#nav{width:100%;}
#nav li{width:50%;height:200px;margin:0;padding:0 0 0 1em;margin-top:1em;}
#nav li span{width:100%;height:200px;}
#nav li.nav-Index strong{top:20%;}
#nav li span img{width:100%;top:-10%;}
.nav li.nav-Index{ display:inline-block;}
.nav img.grayscale{-webkit-filter: grayscale(0%);}
.cc1{ opacity:.3;}
}	

/*此样式在高度大于900的时候生效*/
@media screen and (min-height: 880px) {	
/*body{background:url(../images/height-900.jpg) left top;}*/
.mainCont{padding-top:10%;}
}	
	
/*此样式在高度小于600的时候生效*/
@media screen and (max-height: 620px) {	
body{background:url(../images/1366-2.jpg) left top;}
.mainCont{padding-top:10%;}
.footer{ position: absolute;margin-top:20px;line-height:25px;}
}
/*此样式在高度小于590的时候生效*/
@media screen and (max-height: 550px) {	
.mainCont{padding-top:10%;}
}