.banner{
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}
.banner img {
    width: 1920px;
    position: absolute;
    left: 50%;
    margin-left: -950px;
}
.advantage h3{
    margin: 40px auto 10px;
    text-align: center;
    font-size: 24px;
    color: #333333;
}
.advantage h4{
    text-align: center;
    font-size: 16px;
    color: #333333;
}
.skill{
    height: 577px;
    margin: 0px auto;
    overflow: hidden;
}
.skill h3{
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 28px;
    margin-top: 70px;
}
.skill h4{
    text-align: center;
    color: #666;
    font-size: 16px;
}
.skill .skill-con {
    text-align: left;
    margin-top: 76px;
}
.skill .skill-con li{
    width: 600px;
    height: 112px;
    margin-bottom: 64px;
    overflow: hidden;
    float: left;
}
.skill .skill-con li img{
    width: 132px;
    height: 112px;
    float: left;
}
.skill .skill-con li .con-left{
    width: 425px;
    float: left;
}
.skill .skill-con li .con-left h5{
    width: 425px;
    height: 30px;
    line-height: 30px;
    color: #000;
    font-size: 16px;
    margin-left: 15px;
    float: left;
}
.skill .skill-con li .con-left i{
    width: 90px;
    height: 2px;
    background: #0097e0;
    float: left;
    margin-left: 15px;
}
.skill .skill-con li .con-left p{
    width: 425px;
    height: auto;
    margin-left: 15px;
    float: left;
    color: #666;
    line-height: 180%;
    font-size: 14px;
    margin-top: 10px;
}
.product-advantage{
    width: 100%;
    overflow: hidden;
    padding: 55px 0;
}
.product-advantage ul{ width:1200px; padding-top:50px;}
.product-advantage ul li{ float:left; width:228px; height:415px; position:relative; background:#f2f2f2; display:inline; margin-right:10px; cursor: pointer;}
.product-advantage ul li img{ display:block; position:absolute; top:-50px; left:50%; margin-left:-56.5px; width:113px; height:113px;}
.product-advantage ul li h3{ font-size:24px; color:#464646; text-align:center; padding-top:75px; line-height:35px; padding-bottom:20px;}
.product-advantage ul li p{ padding:0px 19px;text-align:center; color:#464646;font-size: 14px;line-height: 24px;}
.product-advantage ul li p.en{ font-size:12px; line-height:14px;}
.product-advantage ul li p span{display:block; width:62px; height:2px; margin:auto;}

.product-advantage ul li p.c-line{ height:24px; line-height:24px; padding:15px 0px 20px;}
.product-advantage ul li p.c-line span{ background:#ec568a;}

.product-advantage ul li p.s-line{ height:24px; line-height:24px; padding:15px 0px 20px;}
.product-advantage ul li p.s-line span{ background:#03a5e3;}

.product-advantage ul li p.g-line{ height:24px; line-height:24px; padding:15px 0px 20px;}
.product-advantage ul li p.g-line span{ background:#47c251;}

.product-advantage ul li p.e-line{ height:24px; line-height:24px; padding:15px 0px 20px;}
.product-advantage ul li p.e-line span{ background:#ed691f;}

.product-advantage ul li p.o-line{ height:24px; line-height:24px; padding:15px 0px 20px;}
.product-advantage ul li p.o-line span{ background:#14b2dd;}

/* 产品 */
.products{
    padding: 50px 0;
    background: url(../img/system-bg.png) no-repeat 50% 0;
}
.products .title{
    text-align: center;
    margin-bottom: 20px;
}
.products .title h2{height: 35px; margin-bottom: 5px; background: url(../img/icons.png) no-repeat 55% 0px; font-size: 0;overflow: hidden;}
.products .title h3{line-height: 38px; font-size: 24px;color: #333333;}
.products .title h5{font-size: 14px;color: #999999;}
.hotsystem { margin: 30px 0px; }
.hotsystem li{
    border: 1px solid #fff; padding: 40px; background: #fff none repeat scroll 0% 0%; width: 590px; position: relative;cursor: pointer;
}
.hotsystem li:hover{
    border: 1px solid #f39800;
}
.hotsystem li h4{
    font-size: 26px;
    height: 42px;
    line-height: 42px;
    text-indent: 6px;
}
.hotsystem li h4 i{
    background: url(../img/icons.png) no-repeat 0% 0%;
    width: 50px;
    height: 42px;
    float: left;
}
.hotsystem li:first-child h4 i{
    background-position:  -59px -43px;
}
.hotsystem li:last-child h4 i{
    background-position:  -183px -40px;
}
.hotsystem li:first-child:hover i{
    background-position: 0px -43px;
    -webkit-animation: icon-bounce .5s alternate;
    -moz-animation: icon-bounce .5s alternate;
    -ms-animation: icon-bounce .5s alternate;
    -o-animation: icon-bounce .5s alternate;
    animation: icon-bounce .5s alternate;
}
.hotsystem li:last-child:hover i{
    background-position: -124px -40px;
    -webkit-animation: icon-bounce .5s alternate;
    -moz-animation: icon-bounce .5s alternate;
    -ms-animation: icon-bounce .5s alternate;
    -o-animation: icon-bounce .5s alternate;
    animation: icon-bounce .5s alternate;
}
.hotsystem li:hover a{
    color: #0d6fb8;
    transition: all 0.2s ease-in-out;
}
.hotsystem li:hover .more{
    background-color: #f39800;
    color: #fff;
    transition: all 0.2s ease-in-out;
}
.hotsystem li p{
    font-size: 16px;
    padding: 10px 0;
}
.hotsystem li .more{
    position: absolute;
    width:36px;
    height: 206px;
    right: 0px;
    top: 0px;
    background: #addcff none repeat scroll 0% 0%;
    text-align: center;
    line-height: 24px;
    color: #fff;
    font-size: 16px;
    layout-flow: vertical-ideographic;
    letter-spacing: 4px;
}
.hotsystem li .more span{
    float: left;
    margin-top: 50px;
    margin-left: 4px;
}
.newsystem {
    margin: 20px 0;
    float: left;
}
.newsystem ul li {
    width: 24%;
    float: left;
    margin: 0px 0px 30px 16px;
    border: 1px solid #fff;
    background-color: #fff;
    padding: 40px 20px 20px;
    position: relative;
    height: 320px;
    overflow: hidden;
}
.newsystem ul li.first { margin-left: 0px; }
.newsystem ul li.center { text-align: center; }
.newsystem ul li h3 { font-size: 24px; color: #333; font-weight: normal; margin: 10px 0px; }
.newsystem ul li p { line-height: 20px; color: #999; }
.newsystem ul li a.btn { position: absolute; width: 100%; height: 38px; font-size: 16px; color: #fff; left: 0px; background: #addcff none repeat scroll 0% 0%; text-align: center;bottom: 0px; }
.newsystem ul li:hover{cursor: pointer;}
.newsystem ul li:hover .icons{
    -webkit-animation: icon-bounce .5s alternate;
    -moz-animation: icon-bounce .5s alternate;
    -ms-animation: icon-bounce .5s alternate;
    -o-animation: icon-bounce .5s alternate;
    animation: icon-bounce .5s alternate;
}
.newsystem ul li:hover a.btn { background-color: #f39800; bottom: 0;
    transition: all 0.2s ease-in-out;}
.newsystem .icons{background: url(../img/icons.png) no-repeat scroll 0% 0%;
    display: inline-block;
    width: 80px;
    height: 80px;
}
.newsystem .ico1{background-position: 4px -86px;;}
.newsystem .ico2{background-position: -76px -85px;}
.newsystem .ico3{background-position: -176px -87px;}
.newsystem .ico4{background-position: -269px -86px;}
.products .more{text-align: center;}
.products .more a{
    display: inline-block;
    background-color: #0d6fb8;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    color: #fff;
    height: 40px;
    line-height: 40px;
    width: 200px;
    font-size: 14px;
}
.products .more a:hover{
    background-color: #178de4;
    transition: all 0.2s ease-in-out;
}
.newCase{
    width: 100%;
    padding: 50px 0;
    float: left;
}
.newCaseleft{
    float: left;
    width: 300px;
    height: 220px;
    background: #eb3900;
    padding-right: 20px;
    position: relative;
}
.newCaseleft h3{ font-size:24px; color:#FFF; text-align:right; line-height:25px; padding-top:18px;}
.newCaseleft i{
    width: 122px;
    height: 21px;
    background: url(../img/icons.png) no-repeat -42px -406px;
    float: right;}
.newCaseleft span{ display:block; position:absolute; width:11px; height:21px; top:145px;}
.newCaseleft span.newCaseprev{ background:url(../img/icons.png) no-repeat -3px -415px;right:65px;}
.newCaseleft span.newCaseprev a{width:11px; height:21px; display:block;}
.newCaseleft span.newCaseprev a:hover{ background:url(../img/icons.png) no-repeat -3px -393px}
.newCaseleft span.newCasenext{ background:url(../img/icons.png) no-repeat -16px -415px; right:25px;}
.newCaseleft span.newCasenext a{width:11px; height:21px; display:block;}
.newCaseleft span.newCasenext a:hover{ background:url(../img/icons.png) no-repeat -16px -393px}
.newCaseright {
    float: right;
    width: 900px;
    overflow: hidden;
}
.newCaseright ul{ }
.newCaseright ul li{ float:left; background:#FFF; width:284px; height:220px; position:relative; margin-left:16px;overflow: hidden;}
.newCaseright ul li img{ display:block; width:284px; height:220px;}
.newCaseright ul li img:hover{    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s,-webkit-transform 1s;}
.newCaseright ul li p{ position:absolute;text-align: center; bottom:0px; width:284px; left:0px; font-size:14px; color:#FFF; height:34px; line-height:34px; overflow:hidden;
    background: #000;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;transition: all .2s ease-in-out;
}
.newCaseright ul li:hover p{
    background: #f39800;
}