@charset "utf-8";

/*-------------.carDetails--ul--------*/
.banner{width:100%;position:relative;background: #D5EEC3;}
.switchButton{ height:0px; width:1120px; margin:0 auto;    position: relative; display:none; }
.switchButton span{ display:inline-block;vertical-align:top; width:60px; height:60px;    z-index: 6; position:absolute; top:261px; cursor:pointer;}
.switchButton span.prov{ background:url(../images/prov.png); left:0;}
.switchButton span.next{ background:url(../images/next.png); right:0;}
.banner .bannerSpot {position:absolute; width:100%;bottom:20px; text-align:center; width:150px\9;    left: 50%\9;    margin-left: -75px\9;}
.banner .bannerSpot li{ display:inline-block; width:11px; height:11px; margin-right:8px; border:1px solid #fff;     cursor: pointer;border-radius:100%}
.banner .bannerSpot li.active{ background:#fff;}
.banner .resBannerList {height: 580px;overflow: hidden;position: relative;width: 100%;}
.banner .resBannerList> li{display:none;position: relative;text-align:center;color:#fff;font-size:14px;width:100%; height:100%;overflow: hidden;}
.banner .resBannerList li.active{display:block;}
.banner .resBannerList li.res-first{ background:url(../images/yingyongbanner_05.png) center no-repeat; background-size:cover; }
.banner .resBannerList li.res-second{ background:url(../images/banner-bj.png) center no-repeat; background-size:cover; }
.banner .resBannerList li.res-first ul.carDetails {    width: 1120px;    margin: 0 auto;    height: 580px;    position: relative; text-align:center;}
.banner .resBannerList li.res-first ul.carDetails li{ position: absolute}
.banner .resBannerList li.res-first ul li.c1 {    left: 130px;    top: 133px;-webkit-animation: zoomInUp 2s 0s 1 linear both;animation: zoomInUp 2s 0s 1 linear both;}
.banner .resBannerList li.res-first ul li.c2 {    right: 283px;   top: 300px;-webkit-animation: fadeInUp 1.5s 0.5s 1 linear both;animation: fadeInUp 1.5s 0.5s 1 linear both;}
.banner .resBannerList li.res-first ul li.c3 {    right: -232px;  top: 74px;    width: auto;    left: 801px;-webkit-animation: fadeInDown 2s 1s 1 linear both;animation: fadeInDown 2s 1s 1 linear both;}
.banner .resBannerList li.res-first ul li.c4 {    right: -381px;  top: 259px;-webkit-animation: fadeInRight 1.5s 1.5s 1 linear both;animation: fadeInRight 1.5s 1.5s 1 linear both;}



.banner .resBannerList li.res-first ul li.yy01 {
    right: -77px;
    top: 131px;
    -webkit-animation: zoomIn 1s ease 2s 1 both;
    animation: zoomIn 1s ease 2s 1 both;
}
.banner .resBannerList li.res-first ul li.yy02{
    left: -1px;
    top: 154px;
    -webkit-animation: bounceInDown 1s ease 0s 1 both;
    animation: bounceInDown 1s ease 0s 1 both;
}
.banner .resBannerList li.res-first ul li.yy03 {
    left: -19px;
    top: 242px;
    -webkit-animation: fadeInLeft 1s ease .6s 1 both;
    animation: fadeInLeft 1s ease .6s 1 both;
}
.banner .resBannerList li.res-first ul li.yy04 {
    left: 32px;
    top: 329px;
    -webkit-animation: bounceInLeft 1s ease 1.2s 1 both;
    animation: bounceInLeft 1s ease 1.2s 1 both;
}
.banner .resBannerList li.res-first ul li.yy05 {
    left: 383px;
    top: 138px;
    -webkit-animation: pulse 1s ease 0s infinite both;
    animation: pulse 1s ease 0s infinite both;
}
.banner .resBannerList li.res-first ul li.yy06 {
    left: 285px;
    bottom: 102px;
    -webkit-animation: bounceInLeft 1s ease 1.6s 1 both;
    animation: bounceInLeft 1s ease 1.6s 1 both;
}





.banner .resBannerList li.res-second ul.carDetails {    width: 1120px;    margin: 0 auto;    height: 580px;    position: relative; text-align:center;}
.banner .resBannerList li.res-second ul.carDetails li{ position: absolute}
.banner .resBannerList li.res-second ul li.c1 {    left: 130px;    top: 133px;-webkit-animation: zoomInUp 2s 0s 1 linear both;animation: zoomInUp 2s 0s 1 linear both;}
.banner .resBannerList li.res-second ul li.c2 {    right: 283px;   top: 280px;-webkit-animation: fadeInUp 1.5s 0.5s 1 linear both;animation: fadeInUp 1.5s 0.5s 1 linear both;}
.banner .resBannerList li.res-second ul li.c3 {    right: -232px;  top: 74px;    width: auto;    left: 801px;-webkit-animation: fadeInDown 2s 1s 1 linear both;animation: fadeInDown 2s 1s 1 linear both;}
.banner .resBannerList li.res-second ul li.c4 {    right: -381px;  top: 259px;-webkit-animation: fadeInRight 1.5s 1.5s 1 linear both;animation: fadeInRight 1.5s 1.5s 1 linear both;}

.banner .resBannerList li.res-third ul.carDetails {    width: 1120px;    margin: 0 auto;    height: 580px;    position: relative; text-align:center;}
.banner .resBannerList li.res-third ul.carDetails li{ position: absolute}
.banner .resBannerList li.res-third ul li.c1 {    left: 130px;    top: 133px;-webkit-animation: zoomInUp 2s 0s 1 linear both;animation: zoomInUp 2s 0s 1 linear both;}
.banner .resBannerList li.res-third ul li.c2 {    right: 283px;   top: 280px;-webkit-animation: fadeInUp 1.5s 0.5s 1 linear both;animation: fadeInUp 1.5s 0.5s 1 linear both;}
.banner .resBannerList li.res-third ul li.c3 {    right: -232px;  top: 74px;    width: auto;    left: 801px;-webkit-animation: fadeInDown 2s 1s 1 linear both;animation: fadeInDown 2s 1s 1 linear both;}
.banner .resBannerList li.res-third ul li.c4 {    right: -381px;  top: 259px;-webkit-animation: fadeInRight 1.5s 1.5s 1 linear both;animation: fadeInRight 1.5s 1.5s 1 linear both;}



.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;
}

.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;
}

.width1200 {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}

.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;
}