@charset "utf-8";
*{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;
    box-shadow: 2px 2px 5px #aaaaaa;
    width: 100%;
    z-index: 99999999;
    /*position: fixed;*/
    top: 0;
    position: relative;
    background: #fff;}
#app{
    /*margin-top:100px;*/
}
.headLogo{
    height: 70px;
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;}
.nav_ul{float: right;}
.nav_ul li{float: left;padding:0 30px;font-size:14px;line-height:100px;}
.nav_ul li a{}
.nav_ul li a:hover,.nav_ul li.actLi a{color: #F6490D;}

.bannerImg{width: 100%;max-width: 100%;}
.bannerImg img{
    width: 100%;max-width: 100%;
    height:auto;
}

.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("../img//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;}

.app-code{
    display: inline-block;text-align: center;    width: 150px;font-size:12px;margin-right:5px;
}
.bottomBox{width:100%;display:block;position:relative;background:#fff;}
.bottomBox img{width:60px;padding:5px;}
.bottomBox .bottomItem{width: 33.3%;
    float: left;
    padding:80px 0;
    margin: 0 auto;
    position: relative;
    background:#212125;
    display: flex;
    justify-content: center;
    align-items: center;}
.bottomBox .bottomItem .bottomItemRight{color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-left:5px;}

.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 ;height:200px;}
.footer{background-color: #212125;text-align: center;line-height:40px;color: #ffffff;}


.aboutBanner{background: url("../img/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("../img/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;}
}