@charset "utf-8";
/**CSS Reset 开始**/
*{box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
html,body,div,dl,dt,dd,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 {
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    font-style: normal;
}

body, html{width:100%;overflow-x: hidden;}
body,th,td,button,input,select,textarea {font: 14px/1.62 "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif;color: #333333;}
ol,ul,dl {list-style: none;}
img {border:none;}
a{text-decoration: none;outline:none;color: #333333;}
.clearFloat:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;*zoom:1}
.overall{width: 1200px;margin:0 auto;}

/*公共头部*/
.header{height: 100px;}
.headLogo{margin-top: 8px;}
.nav_ul{float: right;}
.nav_ul li{float: left;padding:0 30px;font-size:18px;line-height:100px;}
.nav_ul li a:hover,.nav_ul li.actLi a{color: #d30915;}

.bannerImg{height:607px;width: 100%;background: url("../images/bannerIndex.jpg") center no-repeat;}

.flowerBox{margin:40px auto 90px;overflow: hidden;position: relative;height: 495px;}
.flowerBox .fbTit{font-size:30px;color: #353535;text-align: center;font-weight:bold;margin-bottom: 5px;}
.flowerBox .fbDes{color: #979797;text-align: center;margin-bottom: 50px;}

.flowerList{overflow: hidden;height:370px;position:absolute;left:0;}
.flowerList li{width: 268px;float: left;margin-right: 50px;text-align: center;padding:0 19px;position: relative;}
.flowerImg{background-color: #f6f6f8;width: 230px;height: 255px;}
.flowerImg img{max-width: 100%;max-height: 100%;}
.flowerList li h2{font-size:18px;margin:10px 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.flowerList li p{color: #9a9a9a;}

.flowerEcodeBox{position: absolute;left:0;top:0;background-color: rgba(0,0,0,0.72);width: 100%;height: 0;transition: height 1s;text-align: center;}
.flowerEcodeBox img{width: 172px;height: 172px;margin:60px auto 25px;display: block;opacity:0;filter:alpha(opacity=0);transition: opacity 1.5s;}
.flowerEcodeBox span{color: #ffffff;font-size:20px;opacity:0;filter:alpha(opacity=0);transition: opacity 1s;}

.flowerList li:hover .flowerEcodeBox{height:100%;}
.flowerList li:hover .flowerEcodeBox img,.flowerList li:hover .flowerEcodeBox span{opacity:1;filter:alpha(opacity=1);}

.middleBox{background: url("../images/inBg.jpg") center no-repeat;width: 100%;height: 555px;}
.middleImg{float: left;opacity:0;}
.middleBoxRight{display: inline-block;margin-left: 100px;width: 500px;color: #ffffff;float: left;margin-top: 130px;}
.middleBoxRight h1{font-size:36px;font-weight:bold;margin-bottom: 10px;opacity:0;}
.middleBoxRight p{margin-bottom: 40px;opacity:0;}
.middleBoxRight div img{opacity:0;}
.middleBoxRight div img:first-child{margin-right: 25px;}

.slide50{-webkit-animation:slide-market50 1.5s;animation: slide-market50 1.5s;opacity:1 !important;}
.slide30{-webkit-animation:slide-market30 1.5s;animation: slide-market30 1.5s;opacity:1 !important;}
.slide20{-webkit-animation:slide-market20 1.5s;animation: slide-market20 1.5s;opacity:1 !important;}

.footerImg{background: #eeeeee url("../images/ZLfooter.jpg") center no-repeat;height: 307px;}
.footer{background-color: #e2e2e2;text-align: center;line-height:40px;color: #999999;}


.aboutBanner{background: url("../images/bannerAbout.jpg") center no-repeat;height: 409px;width: 100%;}
.aboutBox{margin-top: -30px;}
.aboutBox h1{font-size:36px;color: #353535;font-weight:bold;margin-bottom: 5px;}
.aboutBox p{color: #979797;margin-bottom: 80px;}

.aboutInfo li{float: left;text-align: center;margin-right: 120px;}
.aboutInfo li:last-child{margin-right: 0;}
.aboutInfo li img{-webkit-animation:slide-market50 1.5s;animation: slide-market50 1.5s;}
.aboutInfo li span{display: block;font-size:24px;font-weight:bold;color: #353535;margin-top: 10px;-webkit-animation:slide-market30 1.5s;animation: slide-market30 1.5s;}
.aboutBox .advantages{float: right;position: relative;font-size:24px;font-weight:bold;color: #353535;padding:25px 40px;border:4px solid #333333;-webkit-animation:slide-right50 1.5s;animation: slide-right50 1.5s;}
.aboutBox .advantages i{position: absolute;border:2px solid #333333;width: 52px;top:23px;left:-32px;}

.advantageBox{margin:90px auto;}
.aboutPic{width: 47%;margin-right: 3%;float: left;height: 289px;background: url("../images/aboutPic.jpg") right center no-repeat;-webkit-animation:slide-left50 1.5s;animation: slide-left50 1.5s;}
.advantageBoxText{width: 590px;float: left;-webkit-animation:slide-right50 1.5s;animation: slide-right50 1.5s;}
.advantageBoxText h1{font-size:34px;color: #353535;font-weight:bold;margin-bottom: 20px;}
.advantageBoxText p{color: #9a9a9a;margin-bottom: 20px;}
.advantageBoxText p:last-child{margin-bottom: 0;}


@keyframes slide-market50{
    0%{opacity:0;-webkit-transform:translateY(50px);transform:translateY(50px)}
    to{opacity:1}
}
@keyframes slide-market30{
    0%{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}
    to{opacity:1}
}
@keyframes slide-market20{
    0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
    to{opacity:1}
}

@keyframes slide-right50{
    0%{opacity:0;-webkit-transform:translateX(50px);transform:translateX(50px)}
    to{opacity:1}
}

@keyframes slide-left50{
    0%{opacity:0;-webkit-transform:translateX(-50px);transform:translateX(-50px)}
    to{opacity:1}
}

@media screen and (max-width:1200px){
    html,body{width:1200px;margin:0 auto;overflow-x: auto;}
    .overall{width: 100%;}
    .middleBoxRight{margin-left: 85px;}
}