﻿dl,dd,dt {
    margin:0;
    padding:0;
}
.article-smCodeList.active .title {
    -webkit-animation: fadeInUp 1s ease .5s 1 both;
    animation: fadeInUp 1s ease .5s 1 both;
}
.article-featureList.active .title {
    -webkit-animation: fadeInUp 1s ease .5s 1 both;
    animation: fadeInUp 1s ease .5s 1 both;
}
.article-industryList.active .title {
    -webkit-animation: fadeInUp 1s ease .5s 1 both;
    animation: fadeInUp 1s ease .5s 1 both;
}
.article>.title {
    position:relative;
}
.article>.title>.title-bar {
    width:180px;
    height:4px;
    background:#1ABD6C;
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-90px;
}
.article-smCodeList.active>.title>.title-bar,
.article-featureList.active>.title>.title-bar,
.article-industryList.active>.title>.title-bar {
    -webkit-animation: slideInLeft 1s ease 1s 1 backwards;
    animation: slideInLeft 1s ease 1s 1 backwards;
}

.article>.title>.title-bar:before {
    content:'';
    width:0;
    height:0;
    display: block;
    position:absolute;
    bottom:4px;
    left:85px;
    border-width:0 5px 5px;
    border-style:solid;
    border-color:transparent transparent #1ABD6C;/*͸�� ͸��  ��*/
}

.width1200 {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}
.banner .bannerList> li:first-child {
    background: url(../images/yingyongbanner_05.png) center no-repeat;
}
.banner .bannerList> li li.yy01 {/*΢��ͼ��*/
    right: -77px;
    top: 131px;
    -webkit-animation: zoomIn 1s ease 2s 1 both;
    animation: zoomIn 1s ease 2s 1 both;
}
.banner .bannerList> li li.yy02 {/*��ڲ��ݴ��*/
    left:-1px;
    top: 154px;
    -webkit-animation: bounceInDown 1s ease 0s 1 both;
    animation: bounceInDown 1s ease 0s 1 both;
}
.banner .bannerList> li li.yy03 {/*��С��CMS*/
    left:-19px;
    top: 242px;
    -webkit-animation: fadeInLeft 1s ease .6s 1 both;
    animation: fadeInLeft 1s ease .6s 1 both;
}
.banner .bannerList> li li.yy04 {/*��������ҵ*/
    left:32px;
    top: 329px;
    -webkit-animation: bounceInLeft 1s ease 1.2s 1 both;
    animation: bounceInLeft 1s ease 1.2s 1 both;
}
.banner .bannerList> li li.yy05 {/*�Ӻ�*/
    left: 366px;
    top: 164px;
    -webkit-animation: pulse 1s ease 0s infinite both;
    animation: pulse 1s ease 0s infinite both;
}
.banner .bannerList> li li.yy06 {/*ʹ�û��������*/
    left: 285px;
    bottom:102px;
    -webkit-animation: bounceInLeft 1s ease 1.6s 1 both;
    animation: bounceInLeft 1s ease 1.6s 1 both;
}

/*С��CMSС����*/
.smCodeList {
    margin-bottom:45px;
}
.smCodeList ul {
    margin-top:40px;
}
.smCodeList ul li {
    position:relative;
    float: left;
    color:#999;
    font-size:14px;
    width: 270px;
    height:300px;
    margin: 0 40px 45px 0;
    background:#FBFBFD;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.smCodeList ul li:nth-child(1),
.smCodeList ul li:nth-child(2),
.smCodeList ul li:nth-child(3),
.smCodeList ul li:nth-child(4) {
    margin-top:0;
}
.smCodeList ul li:nth-child(4n+4) {
    margin-right:0;
}
.smCodeList ul li dd {
    height: 58px;
    width: 58px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 25px;
    background:url('../images/yingyongicon01.png');
}
.smCodeList ul li dt h2{
    text-align:center;
    font-size:18px;
    font-weight:600;
    color:#363636;
    margin-bottom:15px;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    transition: all .8s;
}
.smCodeList ul li dt p{
    padding:0 30px;
    text-align: center;
    line-height:24px;
}
.smCodeList ul li dt a {
    position:absolute;
    bottom:30px;
    display: block;
    color:#1ABD6C;
    background:#fff;
    padding: 6px 8px;
    border: 2px solid #1ABD6C;
    border-radius: 40px;
    width: 100px;
    text-align: center;
    margin-left:75px;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    transition: all .8s;
}
.smCodeList ul li:nth-child(1) dd {
    background-position:  -11px -6px;
}
.smCodeList ul li:nth-child(2) dd {
    background-position:  -81px -6px;
}
.smCodeList ul li:nth-child(3) dd {
    background-position:  -164px -3px;
}
.smCodeList ul li:nth-child(4) dd {
    background-position:  -239px -6px;
}
.smCodeList ul li:nth-child(5) dd {
    background-position:  -12px -78px;
}
.smCodeList ul li:nth-child(6) dd {
    background-position:  -82px -79px;
}
.smCodeList ul li:nth-child(7) dd {
    background-position:  -164px -79px;
}
.smCodeList ul li:nth-child(8) dd {
    background-position:  -242px -79px;
}
.smCodeList ul li.current {
    background:#fff;
    -webkit-box-shadow: 0 0 20px #ddd;
    -moz-box-shadow: 0 0 20px #ddd;
    box-shadow: 0 0 20px #ddd;
}
.smCodeList ul li.current dd {
    -webkit-animation: flipInY 1.8s ease 0s 1 both;
    animation: flipInY 1.8s ease 0s 1 both;
}
.smCodeList ul li.current dt h2 {
    color:#1ABD6C;
}
.smCodeList ul li.current dt a {
    background:#1ABD6C;
    color:#fff;
}
.smCodeList li.l1.active {
    -webkit-animation: flipInY 1.5s 0.5s ease both;
    -o-animation: flipInY 1.5s 0.5s ease both;
    animation: flipInY 1.5s 0.5s ease both;
}
.smCodeList li.l2.active {
    -webkit-animation: flipInY 1.5s 1s ease both;
    -o-animation: flipInY 1.5s 1s ease both;
    animation: flipInY 1.5s 1s ease both;
}
.smCodeList li.l3.active {
    -webkit-animation: flipInY 1.5s 1.5s ease both;
    -o-animation: flipInY 1.5s 1.5s ease both;
    animation: flipInY 1.5s 1.5s ease both;
}
.smCodeList li.l4.active {
    -webkit-animation: flipInY 1.5s 2s ease both;
    -o-animation: flipInY 1.5s 2s ease both;
    animation: flipInY 1.5s 2s ease both;
}
.smCodeList li.l5.active {
    -webkit-animation: flipInY 1.5s 2s ease both;
    -o-animation: flipInY 1.5s 2s ease both;
    animation: flipInY 1.5s 2s ease both;
}
.smCodeList li.l6.active {
    -webkit-animation: flipInY 1.5s 1.5s ease both;
    -o-animation: flipInY 1.5s 1.5s ease both;
    animation: flipInY 1.5s 1.5s ease both;
}
.smCodeList li.l7.active {
    -webkit-animation: flipInY 1.5s 1s ease both;
    -o-animation: flipInY 1.5s 1s ease both;
    animation: flipInY 1.5s 1s ease both;
}
.smCodeList li.l8.active {
    -webkit-animation: flipInY 1.5s .5s ease both;
    -o-animation: flipInY 1.5s .5s ease both;
    animation: flipInY 1.5s .5s ease both;
}




/*С��������*/
.bg-coffee {
    background:url("../images/bg-coffee.png") top center no-repeat;
}
.featureList {
    margin-bottom:50px;
    padding-top:40px;
    padding-bottom:60px;
}
.featureList li {
    float:left;
    width:270px;
    height:200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top:80px;
    margin-right:35px;
}
.featureList li:nth-child(4n+4) {
    margin-right:0;
}
.featureList li .leftIcon {
    background:url('../images/yingyongicon01.png') -12px -78px;
    position:relative;
    width:60px;
    height:60px;
    float:left;
    background:transparent;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    transition: background .5s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #1ABD6C;
}
.featureList li .rightText {
    margin-left:75px;
}
.featureList li .rightText h2 {
    text-align:left;
    font-size:20px;
    font-weight:600;
    color:#363636;
}
.featureList i.greenLine {
    display:block;
    height:2px;
    background: #1ABD6C;
}
.featureList li .leftIcon i {
    width:18px;
    position:absolute;
    top:0;
    left:21px;
}
.featureList li .rightText i {
    width:30px;
    margin-top:10px;
    margin-bottom:10px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.featureList li .rightText p {
    line-height:24px;
    text-align:left;
}
.featureList li.current .leftIcon {
    background:#1ABD6C;
}
.featureList li .leftIcon em {
    display: block;
    width:40px;
    height:40px;
    position:absolute;
    top:10px;
    left:10px;
    background: url(../images/yingyongicon01.png);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.featureList li.l1 .leftIcon em {
    background-position: -6px -141px;
}
.featureList li.l2 .leftIcon em {
    background-position: -59px -141px;
}
.featureList li.l3 .leftIcon em {
    background-position: -117px -140px;
}
.featureList li.l4 .leftIcon em {
    background-position: -182px -141px;
}
.featureList li.l5 .leftIcon em {
    background-position: -246px -140px;
}
.featureList li.l6 .leftIcon em {
    background-position: -308px -141px;
}
.featureList li.l7 .leftIcon em {
    background-position: -369px -140px;
}
.featureList li.l8 .leftIcon em {
    background-position: -427px -139px;
}

.featureList li.l1.current .leftIcon em {
    background-position: -6px -190px;
}
.featureList li.l2.current .leftIcon em {
    background-position: -59px -190px;
}
.featureList li.l3.current .leftIcon em {
    background-position: -117px -190px;
}
.featureList li.l4.current .leftIcon em {
    background-position: -181px -190px;
}
.featureList li.l5.current .leftIcon em {
    background-position: -246px -190px;
}
.featureList li.l6.current .leftIcon em {
    background-position: -308px -190px;
}
.featureList li.l7.current .leftIcon em {
    background-position: -369px -190px;
}
.featureList li.l8.current .leftIcon em {
    background-position: -427px -190px;
}
.featureList li.l1.active {
    -webkit-animation: fadeInUp 1.5s 0.5s ease both;
    -o-animation: fadeInUp 1.5s 0.5s ease both;
    animation: fadeInUp 1.5s 0.5s ease both;
}
.featureList li.l2.active {
    -webkit-animation: fadeInUp 1.5s 0.8s ease both;
    -o-animation: fadeInUp 1.5s 0.8s ease both;
    animation: fadeInUp 1.5s 0.8s ease both;
}
.featureList li.l3.active {
    -webkit-animation: fadeInUp 1.5s 1.1s ease both;
    -o-animation: fadeInUp 1.5s 1.1s ease both;
    animation: fadeInUp 1.5s 1.1s ease both;
}
.featureList li.l4.active {
    -webkit-animation: fadeInUp 1.5s 1.4s ease both;
    -o-animation: fadeInUp 1.5s 1.4s ease both;
    animation: fadeInUp 1.5s 1.4s ease both;
}
.featureList li.l5.active {
    -webkit-animation: fadeInUp 1.5s 0.6s ease both;
    -o-animation: fadeInUp 1.5s 0.6s ease both;
    animation: fadeInUp 1.5s 0.6s ease both;
}
.featureList li.l6.active {
    -webkit-animation: fadeInUp 1.5s 0.9s ease both;
    -o-animation: fadeInUp 1.5s 0.9s ease both;
    animation: fadeInUp 1.5s 0.9s ease both;
}
.featureList li.l7.active {
    -webkit-animation: fadeInUp 1.5s 1.2s ease both;
    -o-animation: fadeInUp 1.5s 1.2s ease both;
    animation: fadeInUp 1.5s 1.2s ease both;
}
.featureList li.l8.active {
    -webkit-animation: fadeInUp 1.5s 1.5s ease both;
    -o-animation: fadeInUp 1.5s 1.5s ease both;
    animation: fadeInUp 1.5s 1.5s ease both;
}


/*С����������ҵ*/
.industryList {
    margin-top:80px;
    margin-bottom:50px;
}
.industryList li {
    float:left;
    height:320px;
    width:300px;
    border-top:1px solid #EFEFEF;
    border-left:1px solid #EFEFEF;
    background:#fff;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.industryList li.l2, .industryList li.l4, .industryList li.l5, .industryList li.l7 {
    background:#F5F5F5;
}
.industryList li.l5,.industryList li.l6,.industryList li.l7,.industryList li.l8 {
    border-bottom:1px solid #EFEFEF;
}
.industryList li.l4, .industryList li.l8 {
    border-right:1px solid #EFEFEF;
}
.industryList li .industry i {
    display: block;
    margin:0 auto;
    margin-top:105px;
    margin-bottom:50px;
    width: 64px;
    height: 46px;
    background: url(../images/yingyongicon01.png);
}
.industryList li.l1 .industry i {
    background-position: -1px -240px;
}
.industryList li.l2 .industry i {
    background-position: -66px -240px;
}
.industryList li.l3 .industry i {
    background-position: -138px -240px;
}
.industryList li.l4 .industry i {
    background-position: -194px -240px;
}
.industryList li.l5 .industry i {
    background-position: -18px -300px;
}
.industryList li.l6 .industry i {
    background-position: -99px -300px;
}
.industryList li.l7 .industry i {
    background-position: -172px -300px;
}
.industryList li.l8 .industry i {
    background-position: -249px -300px;
}
.industryList li .industry h2 {
    font-size:24px;
    text-align: center;
}
.industryList li.current {
    position:relative;
    z-index:1;
    -webkit-box-shadow:  0 0 20px #BFE8D1;
    -moz-box-shadow:  0 0 20px #BFE8D1;
    box-shadow:  0 0 20px #BFE8D1;
}
.industryList li.current .industry h2 {
    -webkit-animation: fadeInUp 1s ease 0s 1 both;
    animation: fadeInUp 1s ease 0s 1 both;
}



.bg-city {
    height:180px;
    background:url("../images/city_02.png") top center no-repeat;
}
.bg-city a.liaojie {
    display: block;
    width:670px;
    font-size:30px;
    margin:0 auto;
    margin-top:45px;
    text-align:center;
    height:90px;
    line-height:90px;
    background:#FF9103;
    color:#fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    border-radius: 45px;
}
.bg-city a.liaojie i {
    display: inline-block;
    height:19px;
    width:30px;
    background:url("../images/yingyongicon01.png") -330px -25px;
}
.bg-city a.liaojie.active {
    -webkit-animation: fadeInUp 1s ease .5s 1 both;
    animation: fadeInUp 1s ease .5s 1 both;
}





