@charset "utf-8";
/*-----------------初始化---------------------*/
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{text-decoration:none;color:#333;}
body{color:#333;font-family:'Microsoft YaHei', Verdana, Arial, Helvetica, sans-serif;line-height:20px;overflow-x:hidden;width:100%;height:auto;font-size:14px;}
body, ul, li, p, h1, h2, h3, h4, h5, h6, a, dl, dt, dd {
    margin: 0;
    padding: 0;
    font-size: inherit;
}

.clear:after{content:'\20';display:block;height:0;clear:both;visibility:hidden;}
/*固定的悬浮窗*/
.yb_conct{position:fixed;z-index:9999999;top:200px;right:-127px;cursor:pointer;transition:all .3s ease;}
.yb_bar ul li{width:180px;height:53px;font:16px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:3px;border-radius:3px;transition:all .5s ease;overflow:hidden;}
.yb_bar .yb_top{background: #161616 url(../images/rightbar.png) no-repeat 0 0;}
.yb_bar .yb_phone{background: #161616 url(../images/rightbar.png) no-repeat 0 -57px;}
.yb_bar .yb_QQ{text-indent:0;background:#ff4a00 url(../images/rightbar.png) no-repeat 0 -113px;}
.yb_bar .yb_ercode{background: #161616 url(../images/rightbar.png) no-repeat 0 -169px;}
.hd_qr{padding:0 29px 25px 29px;}
.yb_QQ a{display:block;text-indent:54px;width:100%;height:100%;color:#fff;}

.fl-l { float: left; }
.fl-r { float: right; }
.d-ib { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
.cl-baf { *zoom: 1; }
.cl-baf:after { content: ""; display: block; height: 0; font-size: 0; overflow: hidden; clear: both; }
.clear { display: block; height: 0; font-size: 0; overflow: hidden; clear: both; }
.txtoe { -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.trs2s { -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }
.trs1s { -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.trs06s { -webkit-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }
.trs03s { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.trsnone { -webkit-transition: none; -o-transition: none; transition: none; }
.comwrap { position: relative; margin: 0 auto; width: 94%; max-width: 1400px; text-align: center;}
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
  padding-top: 1.3%;
  padding-bottom: 0.8%;
  width: 100%;
  font-size: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.header .logo .img { height: 59px;margin-top: -4%;}
.header .btnwr { position: relative; z-index: 8; margin-top: 7px; padding-left: 8px; width: 30px; cursor: pointer; float: right; }
.header .btnwr .line { display: block; position: relative; margin-top: 6px; height: 3px; background-color: #fff; }
.header .btnwr .line::before { content: ''; position: absolute; top: 0; right: 100%; margin-right: 4px; width: 3px; height: 3px; background-color: #fff; }
.header .btnwr .line-t { margin-top: 0; }
.header .btnwr .line-b { width: 50%; }
.header .btnwr:hover { transform: scale(0.9); }
.header .btnwr:hover .line-b { width: 50%; }
.header .btnwr.on .line-t { transform: translate3d(0, 9px, 0) rotateZ(45deg) scale(0.8, 0.5); }
.header .btnwr.on .line-b { width: 100%; transform: translate3d(0, -9px, 0) rotateZ(-45deg) scale(0.8, 0.5); }
.header .btnwr.on .line::before, .header .btnwr.on .line-m { opacity: 0; filter: alpha(opacity=0); }
.header .navBtnTel {
  position: relative;
  z-index: 8;
  font-size: 17px;
  margin-top: 7px;
  padding-left: 38px;
  padding-right: 54px;
  cursor: pointer;
  float: right;
}
#header .comwrap.cl-baf #navBtnTel img {
  float: left;
}
#header .comwrap.cl-baf #navBtnTel span{
      padding-left: 10px;
    color: #fff;
    padding-top: 2px;
  float: left;
}

.nav { position: relative; z-index: 7; margin-top: 8px; float: right;}
.nav .list { font-size: 0; }
.nav .list .col { position: relative; margin-right: 28px; }
.nav .col .link {
  font-size: 17px;
  color: #fff;
}
.nav .list .col:hover { transform: translate3d(0, -3px, 0); transition-delay: 0s; }
.nav .col .son { position: absolute; top: 90%; left: 0; z-index: 7; margin-left: -36px; padding: 20px 0px 10px; width: 100%; opacity: 0; filter: alpha(opacity=0); visibility: hidden; overflow: hidden; }
.nav .col .son::before { content: ''; position: absolute; top: 10px; left: 0; z-index: 6; width: 100%; height: 100%; background-color: #1f1d1a; opacity: 0.7; filter: alpha(opacity=70); }
.nav .col .row { position: relative; z-index: 7;}
.nav .col .slink { display: block;  font-size: 14px; line-height: 32px; text-align: center; }
.nav .col .slink:hover, .nav .col .scur .slink { color: #fff; background-color: #373c3e; }
.nav .col:hover .son { top: 100%; width: 140px;opacity: 1; filter: alpha(opacity=100); visibility: visible; }
.nav .cur .tlink { font-weight: bold; }
.nav .list .col-h { transition-delay: 0.35s; }
.nav .list .col-0 { transition-delay: 0.3s; }
.nav .list .col-1 { transition-delay: 0.25s; }
.nav .list .col-2 { transition-delay: 0.2s; }
.nav .list .col-3 { transition-delay: 0.15s; }
.nav .list .col-4 { transition-delay: 0.1s; }
.nav .list .col-5 { transition-delay: 0.05s; }
.nav-hide .list .col { visibility: hidden; opacity: 0; filter: alpha(opacity=0); transform: translate3d(50%, 0, 0); }
.nav-hide .list .col { transition-delay: 0s; }
#navCol_6 .son { display: none; }

.product{overflow: hidden;}
.product .title{background: url(../images/1.png) no-repeat center center;height: 252px;width:100%;background-size: cover;margin-top:-30px;}
.product .title p:nth-child(1) img{margin:0 auto;padding-top:100px;margin-bottom:30px;}
.product .title p:nth-child(2){text-align: center;font-size:30px;color:black;}
.product .list ul{
    
}
.product .list li{
    width: 24%;
    display: inline-block;
    position: relative;
    height: 480px;
    box-sizing: border-box;
}
.product .list li .dise{width:100%;height:100%;
/*background: rgba(0,0,0,.7);*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);z-index:2;position: absolute;transition: all .5s;}
.product .list li .dise::after{content: "";position: absolute;left: -400px;top: 0;width: 200px;height: 100%;overflow: hidden;background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));transform: skewx(-25deg);transition: 0s;z-index: 5;}
.product .list li .text{z-index:99;position: absolute;left:20%;transform: translateX(-13%);}
.product .list li .text p:nth-child(1){padding-top:70px;font-size:19px;color:white;text-align: center;margin-bottom:20px;line-height: initial;}
.product .list li .text p:nth-child(2){width:45px;margin:0 auto;border-bottom:2px solid #000;margin-bottom:20px;}
.product .list li .text p:nth-child(3){font-size:12px;text-align: center;color:#908f8f;margin-bottom:50px;}
.product .list li .text img:nth-child(4){width:100%;margin:0 auto;margin-bottom:60px;transition: all .5s;animation-name:'test';animation-duration:1s;}
.product .list li:hover .dise{background: rgba(0,0,0,.4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);}
.product .list li:hover .dise::after{left: 120%;width: 200px;transition:1.3s;}
.product .list li:hover .text img{animation:test .5s;}
.product .list li:hover .base-more span:nth-child(2){width:150%;margin:0 auto;}
.product .list li:hover .base-more span:nth-child(1){border:1px solid #000; color:#fff;}
@-webkit-keyframes test {0%{transform:rotate(0deg);}20%{transform:rotate(5deg);}40%{transform:rotate(-5deg);}80%{transform:rotate(5deg);}100%{transform:rotate(0deg);} } 
.product .more{width:100%;height:120px;background: white;padding-top:70px;}
.product .more-bg{width:675px;height:50px;border:1px solid #A6A6A6;box-sizing: border-box;margin:0 auto;display:block;position: relative;transition: all .5s;overflow: hidden;}
.product .more-bg .zi{width:300px;margin:0 auto;height:48px;border-bottom:2px solid #000;text-align: center;color:#767676;line-height:48px;box-sizing: border-box;z-index:999;position: absolute;left:50%;transform: translateX(-50%);transition: all .5s;}
.product .more-bg .xian{z-index:8;width:0%;border-bottom:50px solid #000;top:0;box-sizing: border-box;margin:0 auto;transition: all .5s;}
.product .more-bg:hover .xian{width:100%;}
.product .more-bg:hover .zi{color:#fff}
.product .more-bg:hover{border:1px solid #000;box-shadow: 0 0 10px -10px #999;}
.base-more {
    width: 160px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.base-more span:nth-child(1) {
    display: block;
    width: 160px;
    height: 50px;
    text-align: center;
    border: 1px solid white;
    box-sizing: border-box;
    line-height: 50px;
    color: white;
    z-index: 80;
    background: none;
    position: absolute;
    transition: all .5s;
}
.base-more span:nth-child(2) {
    border-bottom: 50px solid #000;
    display: block;
    width: 0%;
    transition: all .8s;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) skewx(-45deg);
}