@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:80%;
padding-top:7%;
margin:0px auto;
}
.nav{padding-left:20px;
width:930px;
margin:0 auto;
}
.nav li{
float:left;
}
.nav li.nav-Index{width:170px;height:400px;display:none;}/*首页板块默认不显示*/
.nav li.nav-About{width:170px;height:400px;}
.nav li.nav-Products{width:151px;height:356px;margin:19px 30px 0 30px;}
.nav li.nav-News{width:129px;height:320px;margin:38px 0 0 0;}
.nav li.nav-shopping{width:151px;height:356px;margin:19px 30px 0 30px;}
.nav li.nav-Contact{width:170px;height:400px;}
.nav li a{
display:block;
width:100%;
height:100%;
position:relative;
padding:0;
color:#fff;
}
.nav li a:hover{
background:0;
font-weight:bold;
}
.nav li span,.nav li strong{
position:absolute;
font-weight:400;
z-index:99;
}
.nav li span{ overflow:hidden;}
.nav li.nav-Index span{}
.nav li.nav-About span{width:170px;height:400px;}
.nav li.nav-Products span{width:151px;height:356px;}
.nav li.nav-News span{width:129px;height:320px;}
.nav li.nav-shopping span{width:151px;height:356px;}
.nav li.nav-Contact span{width:170px;height:400px;}
.nav img{ position:absolute;}
.nav li strong{
font-size:1.2em;
line-height:17px;
left:16px;
}
.nav li.nav-About strong{top:20%;}
.nav li.nav-Products strong{top:13%;}
.nav li.nav-News strong{top:5%;}
.nav li.nav-shopping strong{top:13%;}
.nav li.nav-Contact strong{top:20%;}
.nav li.nav-News strong{width:99%;left:0; text-align:center;}
/*jq控制 鼠标经过改变距离上的位置*/
.nav li strong i{ font-style:normal; font-size:0.6em;}
.nav img{ position:absolute;z-index:3;}
/*图片变灰色*/
/*jq控制 鼠标经过改为彩色 图片变大*/
.nav img.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */margin:0;
}
/*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;}
/*---------------响应式控制-----------------*/
@media screen and (min-width: 1600px){
body{background:url(../images/1920.jpg) left top;}
}
/*此样式在窗口1367-1440的时候生效*/
@media only screen and (min-width: 1367px) and (max-width: 1440px) {
.top{width:95%;}
body{background:url(../images/1440.jpg) left top;}
}
/*此样式在窗口小于1281-1366的时候生效*/
@media only screen and (min-width: 1281px) and (max-width: 1366px){
.top,.mainCont{width:94%;}
body{background:url(../images/1366.jpg) left top;}
.mainCont{padding-top:5%;}
}
/*此样式在窗口小于1500的时候生效*/
@media screen and (max-width: 1500px) {
.bg{ display:none;}
}
/*此样式在窗口小于1366的时候生效*/
@media screen and (max-width: 1300px) {
.top,.mainCont{width:94%;}
body{background:url(../images/1280.jpg) left top;}
}
/*此样式在窗口小于1280的时候生效*/
@media screen and (max-width: 1280px) {
.top,.mainCont{width:99%;}
.kefu{ position:fixed;width:40%;}
}
/*此样式在窗口小于990的时候生效*/
@media screen and (max-width: 990px) {
.mainCont{ padding-top:10%;}
#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:static;margin-top:20px;line-height:25px;}
}
/*此样式在高度小于590的时候生效*/
@media screen and (max-height: 550px) {
.mainCont{padding-top:10%;}
}