/*banner*/
.indexBanner{ width: 100%; position: relative; overflow: hidden;}
.BannerVideo{ width: 100%; position: absolute; left: 0; top: 0;}
.BannerVideo video{ width: 100%;}
.BannerVideo .BannerVideo-image{ width: 100%; display: none;}


#banner{ position: relative; z-index: 100; max-height: 700px; overflow: hidden;}

.banner-pagination{ position: absolute; width: 100%; height: 10px; left: 0; bottom: 20px; z-index: 2000; text-align: center;}
.banner-pagination span{ display: inline-block; width: 10px; height: 10px; background: #fff; border-radius: 100%; margin-left: 10px;}
.banner-pagination span.swiper-active-switch{ background: #f08300;}


.theTopImg1{
    position: absolute; width: 47%; left: 26.5%; top: 42.8%; z-index: 10;
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s;
    -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
    -webkit-transform: translate(0,-100px); -moz-transform: translate(0,-100px);
    -ms-transform: translate(0,-100px); -o-transform: translate(0,-100px); transform: translate(0,-100px);
}
.theTopImg2{
    position: absolute; width: 44.8%; left: 27.6%; top: 64.4%; z-index: 10;
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s;
    -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
    -webkit-transform: translate(0,100px); -moz-transform: translate(0,100px);
    -ms-transform: translate(0,100px); -o-transform: translate(0,100px); transform: translate(0,100px);
}
.swiper-slide-active .theTopImg1,
.swiper-slide-active .theTopImg2{
    -webkit-transform: translate(0,0); -moz-transform: translate(0,0);
    -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);
}

/* index news */
.indexNews{ width: 100%; background: #efeff0;}
.indexNewsTitle{ text-align: center; color: #f08300; padding: 10px 0; position: relative; font-size: 14px;}
.indexNewsTitle span{ display: block; position: relative; z-index: 5; font-weight: bold; font-size: 16px; width: 200px; margin: 0 auto; height: 30px; line-height: 30px; background: #efeff0;}

.indexNewsList{ width: 100%;background: #efeff0;}
.indexNewsList li{ margin-bottom: 20px; box-sizing: border-box; padding: 0 16px;}
.indexNewsList li a{ display: block; color: #3e3a39; background: #fff;}
.indexNewsList li a:hover{ background: #f08300;}
.indexNewsList li a:hover p,
.indexNewsList li a:hover h5{ color: #fff;}

.indexNewsList li a span{
    display: block; width: 100%; height: 180px; overflow: hidden; background: #fff;
    display: -webkit-flex; display: flex;
    -webkit-justify-content: center; justify-content: center;
    -webkit-align-items: center; align-items: center;
}
.indexNewsList li a span img{ display: block; width: 100%;}
.indexNewsList li a div{ padding: 10px 20px;}
.indexNewsList li a div h5{ font-size: 16px; height: 30px; line-height: 30px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.indexNewsList li a div p{font-size: 13px; line-height: 20px; height: 44px;overflow: hidden;}

@media screen and (min-width: 768px){
    .indexNewsList li:nth-child(even){ padding-left: 8px;}
    .indexNewsList li:nth-child(odd){ padding-right: 8px;}
}
@media screen and (min-width: 1170px){
    .indexNewsList li{ margin-bottom: 25px; padding: 0 20px!important;}
}

@media screen and (min-width: 1440px){
    .indexNewsTitle{ font-size: 20px; padding: 30px 0;}
    .indexNewsTitle:after{ content: ''; width: 100%; height: 1px; background: #efb978; position: absolute; left: 0; bottom: 45px;}
    .indexNewsTitle span{ font-size: 24px; width: 280px; margin-top: 5px;}
    .indexNewsList li{ margin-bottom: 40px;}
    .indexNewsList li a span{ height: 280px;}
}

/* index bottom */
.indexBottomWeb{ width: 100%;}
.indexBottomWebTop{ width: 100%; padding: 7% 0; background: url(../images/in3.jpg) no-repeat bottom right; background-size: cover;}
.indexBottomWebTop li{ text-align: center; padding: 5%;color: #fff;}
.indexBottomWebTop li i{
    display: block; margin: 0 auto; background: #f08300; border-radius: 100%;
    width: 60px; height: 60px; color: #fff; text-align: center; line-height: 60px; font-size: 30px;
}

.indexBottomWebTop li h5{ font-size: 20px; font-weight: bold; margin: 15px auto;}
.indexBottomWebTop li p{ line-height: 24px; font-size: 13px;}
.indexBottomWebTop li a{
    display: block; width: 50%; border: 1px solid #fff; margin: 20px auto 0 auto;
    height: 36px; line-height: 36px; text-align: center; border-radius: 18px; color: #fff;
}
.indexBottomWebTop li a:hover{ background: #f08300; color: #fff; border: 1px solid #f08300;}

.indexBottomWebBottom{ width: 100%; position: relative;}
.cityBrainTop{
    width: 100%; height: 80px; background: #f08300; color: #fff;
    display: -webkit-flex; display: flex;
    -webkit-justify-content: center; justify-content: center;
    -webkit-align-items: center; align-items: center;
}
@media screen and (min-width: 768px){
    .indexBottomWebTop li{ width: 33.33%; float: left; padding: 5% 2%;}
    .indexBottomWebTop li p{ height: 120px;}
}
@media screen and (min-width: 992px){
    .indexBottomWebTop li p{ height: 96px;}
}

.cityBrainTopCenter{ width: 180px; margin: 0 auto; height: 50px;}
.cityBrainTopCenter i{ display: block; float: left; font-size: 40px; line-height: 50px; margin-right: 10px;}
.cityBrainTopCenter p strong{ display: block; font-size: 16px; font-weight: normal; line-height: 28px;}
.cityBrainBot{ width: 100%; padding: 5% 10%; color: #3e3a39;}
.cityBrainBot span{ display: block; font-size: 16px;}
.cityBrainBot p{ line-height: 22px; font-size: 13px; height: 66px; overflow: hidden; margin: 10px 0;}
.cityBrainBot a{ display: block; width: 170px; height: 36px; border: 1px solid #3e3a39; color: #3e3a39; border-radius: 20px; line-height: 34px; padding: 0 20px; font-size: 14px;}

.indexBottomPrev{ position: absolute; left: 8px; top: 20px; font-size: 34px; line-height: 50px; color: #fff; z-index: 100;}
.indexBottomNext{ position: absolute; right: 8px; top: 20px; font-size: 34px; line-height: 50px; color: #fff; z-index: 100;}

@media screen and (min-width: 768px){
    .indexBottomWebTop li{ width: 33.33%; float: left; padding: 5% 2%;}
    .indexBottomWebTop li p{ height: 120px;}
    .cityBrainCenter{ width: 50%; float: left;}
    .cityBrainBot{ float: right; width: 50%; padding: 5% 0 5% 5%;}
}

.indexBottomPc{ display: none; padding-bottom: 130px;}

.indexBottomPc-top{
    width: 100%; height: 652px; overflow: hidden;
    background: url(../images/in2.jpg) no-repeat top center; background-position: left center; background-size: 150%;
    -webkit-transition: all 0.8s; -moz-transition: all 0.8s;
    -ms-transition: all 0.8s; -o-transition: all 0.8s;
    transition: all 0.8s;
}
.indexBottomPc-top.move0{ background-position: -50px center;}
.indexBottomPc-top.move1{ background-position: -100px center;}
.indexBottomPc-top.move2{ background-position: -150px center;}

/*.indexBottomPc-left{background: url(../images/in2.jpg) no-repeat top center; background-size: cover; background-position: -0px;}
.indexBottomPc-mid{background: url(../images/in2.jpg) no-repeat top center; background-size: cover; background-position: -7px;}
.indexBottomPc-right{background: url(../images/in2.jpg) no-repeat top center; background-size: cover; background-position: -14px;}*/

.indexBottomPc-topList{ width: 1360px; margin: 0 auto; padding-top: 84px;}
.indexBottomPc-topList li{ float: left; width: 370px; text-align: center; color: #fff;}

.indexBottomPc-topList li.sec{ margin: 0 120px;}
.indexBottomPc-topList li i{ 
    display: block; width: 78px; height: 78px; text-align: center; font-size: 40px; line-height: 78px; background: #f08300; margin: 0 auto; color: #fff; border-radius: 100%;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
}
.indexBottomPc-topList li h5{ font-size: 30px; line-height: 80px;}
.indexBottomPc-topList li p{ font-size: 14px; line-height: 24px; height: 72px; overflow: hidden;}
.indexBottomPc-topList li a{ color: #fff; width: 180px; height: 40px; line-height: 38px; text-align: center; font-size: 12px; border: 1px solid #fff; border-radius: 20px; display: block; margin: 30px auto 0 auto;}
.indexBottomPc-topList li a:hover{ border: 1px solid #f08300; background: #f08300;}

.indexBottomPc-topList li:hover i{
    -webkit-transform: translate(0,-10px);
    -moz-transform: translate(0,-10px);
    -ms-transform: translate(0,-10px);
    -o-transform: translate(0,-10px);
    transform: translate(0,-10px);
}

.indexBottomPc-topList li:hover a{
    -webkit-animation: linkMove 1s linear 1 backwards;
    -moz-animation: linkMove 1s linear 1 backwards;
    -ms-animation: linkMove 1s linear 1 backwards;
    -o-animation: linkMove 1s linear 1 backwards;
    animation: linkMove 1s linear 1 backwards;
}
@-webkit-keyframes linkMove{
    0%{ width: 180px;}
    100%{ width: 220px;}
}
@-moz-keyframes linkMove{
    0%{ width: 180px;}
    100%{ width: 220px;}
}
@-ms-keyframes linkMove{
    0%{ width: 180px;}
    100%{ width: 220px;}
}
@-o-keyframes linkMove{
    0%{ width: 180px;}
    100%{ width: 220px;}
}
@keyframes linkMove{
    0%{ width: 180px;}
    100%{ width: 220px;}
}

.indexBottomPc-tabList{ width: 1360px; background: #ddddde; height: 160px; overflow: hidden; margin: 108px auto 0 auto;}
.indexBottomPc-tabList li{
    float: left; width: 24%; border-right: 1px solid #fff; height: 160px; cursor: pointer;
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s;
    -o-transition: all 0.5s; -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.indexBottomPc-tabList li.noBor{ border: none;}
.indexBottomPc-tabList li i{ 
    float: left; font-size: 60px; line-height: 160px; margin: 0 25px 0 68px; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.4);
    -webkit-transition: all 0.5s; -moz-transition: all 0.5s;
    -ms-transition: all 0.5s; -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: scale(1); -moz-transform: scale(1); 
    -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.indexBottomPc-tabList li p{ padding-top: 56px; color: #3e3a39; font-size: 12px;}
.indexBottomPc-tabList li p strong{ font-size: 24px; font-weight: normal; display: block; margin-bottom: 5px;}
.indexBottomPc-tabList li.on{
    background: #f08300; width: 28%;
}
.indexBottomPc-tabList li.on p{ color: #fff;}

.indexBottomPc-tabList li:hover i{
    -webkit-transform: scale(1.2); -moz-transform: scale(1.2); 
    -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);
}

.indexBottomTabContent{ width: 1360px; margin: 0 auto; position: relative; height: 400px; overflow: hidden;}
.indexBottomTabContent-box{ width: 100%; height: 400px; display: none;}
.indexBottomTabContent-boxPic{ float: left; width: 908px; height: 400px;overflow: hidden;}
.indexBottomTabContent-boxText{ float: right; padding: 100px 74px 0 82px; color: #3e3a39; width: 451px; height: 399px; border-bottom: 1px solid #dcdddd; border-right: 1px solid #dcdddd;}
.indexBottomTabContent-boxText span{ font-size: 30px; display: block; margin-bottom: 25px;}
.indexBottomTabContent-boxText p{ line-height: 20px; font-size: 14px; height: 60px; overflow: hidden;}
.indexBottomTabContent-boxText a{ display: block; width: 180px; height: 40px; line-height: 38px; border: 1px solid #3e3a39; color: #3e3a39; padding-left: 25px; border-radius: 20px; margin-top: 40px;}
.indexBottomTabContent-boxText a:hover{ border: 1px solid #f08300; background: #f08300; color: #fff;}

@media screen and (min-width: 1200px){
    .indexBottomWeb{ display: none;}
    .indexBottomPc{ display: block;}
    .indexBottomPc-tabList{ width: 1200px;}
    .indexBottomTabContent{ width: 1200px;}
    .indexBottomTabContent-boxPic{ width: 730px;}
    .indexBottomTabContent-boxText{ padding: 100px 30px 0 50px; width: 470px;}
}
@media screen and (min-width: 1360px){
    .indexBottomPc-tabList{ width: 1360px;}
    .indexBottomTabContent{ width: 1360px;}
    .indexBottomTabContent-boxPic{ width: 908px;}
    .indexBottomTabContent-boxText{ padding: 100px 74px 0 82px; width: 451px;}
}


/*news*/
.news-company{width: 100%;}
.news-company-box{width: 100%;}
.news-company-img{width: 100%;}
.news-company-img a{display: block;width: 100%;}
.news-company-img a img{display: block;width: 100%;}
.news-company-text{width: 100%;padding: 5%;}
.news-company-text h3{font-size: 16px; height: 30px; line-height: 30px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.news-company-text h3 a{color: #3e3a39;font-weight: bold;}
.news-company-text h3 a:hover{ color: #f08300;}
.news-company-text span{color: #9fa0a0; font-size: 12px;}
.news-company-text p{ font-size: 13px; line-height: 20px; height: 60px; overflow: hidden;}
.news-company-text a.more{ display: block; border-radius: 100%; margin-top: 5px; font-size: 16px; font-weight: bold; background: #f08300; color: #fff; text-align: center; width: 34px; height: 34px; line-height: 34px;}

.news-company-list{width: 100%;background: #efeff0;}
.news-company-list-box-list{ width: 100%; padding-top: 10px;}

.news-company-list-box-list li{
    background: #fff; margin-bottom: 10px;
}
.news-company-list-box-list li a{
    padding: 5%; width: 100%;
    display: block; color: #3e3a39;
}
.news-company-list-box-list li a:after{
    content: ''; clear: both; width: 0; overflow: hidden; height: 0; visibility: hidden; display: block;
}
.news-company-list-box-list li a span{ display: block; width: 42%; float: left; overflow: hidden;}
.news-company-list-box-list li a div{ width: 58%; float: right; padding: 0 5%;}
.news-company-list-box-list li a div h5{ height: 40px; overflow: hidden; line-height: 20px; font-size: 14px; margin-bottom: 5px;}
.news-company-list-box-list li a div p{ line-height: 18px; font-size: 12px; height: 54px; overflow: hidden;}


@media screen and (min-width: 768px){
    .news-company-box{ width: 100%;}
    .news-company-img{ float: left; width: 44%;}
    .news-company-text{ float: right; width: 56%;}
    .news-company-list-box-list{ padding-top: 20px;}
    .news-company-list-box-list li{ width: 46%; float: left; margin: 0 2% 20px 2%;}
}

@media screen and (min-width: 768px){
    .news-company-text h3{ margin-bottom: 10px;}
    .news-company-text p{ margin-top: 10px;}
    .news-company-text a.more{ margin-top: 10px;}
}

@media screen and (min-width: 1200px){
    .news-company-box{ width: 1200px; margin: 0 auto;}
    .news-company-list-box-list{ padding-top: 95px;}
    .news-company-list-box-list li{ width: 352px; margin: 0 21px 42px 21px;}
    .news-company-list-box-list li a{ padding: 0;}
    .news-company-list-box-list li a span{
        width: 352px; height: 230px; overflow: hidden; float: none;
        display: -webkit-flex; display: flex;
        -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
    }
    .news-company-list-box-list li a div{ float: none; padding: 2% 5%; width: 100%;}
    .news-company-list-box-list li a div h5{ height: 30px; line-height: 30px; font-size: 18px;}
    .news-company-list-box-list li a div p{ height: 48px; line-height: 24px; font-size: 14px;}
    .news-company-list-box-list li a:hover{ background: #f08300; color: #fff;}
}

@media screen and (min-width: 1440px){
    .news-company-box{ width: 1360px; margin: 0 auto;}

    .news-company-text{ padding: 5% 0 3% 5%;}
    .news-company-text h3{ font-size: 24px;}
    .news-company-text span{ font-size: 14px;}
    .news-company-text p{ font-size: 14px; line-height: 24px; height: 72px;}
    .news-company-text a.more{ width: 42px; height: 42px; line-height: 42px; font-size: 20px; margin-top: 25px;}
    .news-company-list-box{ width: 1404px; margin: 0 auto;}
    .news-company-list-box-list li{ width: 426px; height: 280px;}
    .news-company-list-box-list li a span{ width: 426px;}

}

/*新闻详情*/
.newsDetail-content{ width: 100%;}
.newsDetailTitle{ width: 100%; padding: 15px 5%; text-align: center; font-size: 16px; font-weight: bold; color: #3e3a39;}
.newsDetailTime{ text-align: center; font-size: 13px; color: #9fa0a0; margin-bottom: 20px;}
.newsDetailBox{ width: 100%; padding: 20px 5%; font-size: 13px; line-height: 22px; color: #3e3a39; border-top: 1px dotted #ddddde;}
.newsDetailBox img{ display: inline-block; max-width: 100%;}

.newsDetailDo{ display: none; height: 40px;}
.newsDetailDo a{ float: right; display: block; width: 40px; height: 40px; background: #efeff0; text-align: center; line-height: 40px; margin-left: 1px; font-size: 16px; color: #9fa0a0;}
.newsDetailDo a.goBackText{ width: 72px; background: #f08300; font-size: 12px; color: #fff;}
.newsDetailDo a:hover{ background: #f08300; color: #fff;}

.prev-next{ display: none; border-top: 1px dotted #ddddde; height: 100px; overflow: hidden;}
.prev-next a{ display: block; font-size: 19px; color: #3e3a39; line-height: 60px;padding: 10px;}

@media screen and (min-width: 1440px){
    .newsDetail-content{ width: 1360px; margin: 0 auto;}
    .newsDetailTitle{ font-size: 24px; padding: 100px 0 20px 0;}
    .newsDetailTime{ font-size: 14px;}
    .newsDetailBox{ padding: 60px;}
    .newsDetailDo{ display: block;}
    .newsDetailBox{ font-size: 14px; line-height: 24px;}
    .prev-next{ display: block;}
}

/*解决方案*/
.planBox{ width: 100%; background: #efeff0; padding: 5% 0 8% 0;}
.planBoxCenter{ width: 100%; padding: 0 5%;}
.planBoxCenter span{ display: block; color: #f08300; font-size: 16px; text-align: center;}
.planBoxCenter span strong{ display: block;}
.planBoxCenter p{ font-size: 13px; line-height: 20px; color: #3e3a39; text-align: center; margin: 5% auto;}
.planBoxCenter a{ display: block; width: 130px; height: 32px; line-height: 30px; border-radius: 17px; border: 1px solid #3e3a39; text-align: center; font-size: 13px; color: #3e3a39; margin: 0 auto;}
.planBoxCenter a:hover{ background: #f08300; border: 1px solid #f08300; color: #fff;}

.planBlock{ width: 100%;}
.planBlock li{ width: 100%;}
.planBlock li a{ display: block; width: 100%; padding: 8%;}
.planBlock li.pb1{ background: url(../images/pl1.jpg) no-repeat top center; background-size: cover;}
.planBlock li.pb2{ background: url(../images/pl2.jpg) no-repeat top center; background-size: cover;}
.planBlock li.pb3{ background: url(../images/pl3.jpg) no-repeat top center; background-size: cover;}
.planBlock li.pb4{ background: url(../images/pl4.jpg) no-repeat top center; background-size: cover;}

.planBlock li div.cb{ background: rgba(0,0,0,0.8); color: #fff; width: 190px; padding: 15px 10px; font-size: 14px;}
.planBlock li div.cb i{ font-size: 30px; float: left; margin-right: 10px;}
.planBlock li div.cb div span{ display: block; font-size: 16px;}

@media screen and (min-width: 768px){
    .planBox{ padding: 3% 0;}
    .planBoxCenter span{ font-size: 24px;}
    .planBoxCenter p{ width: 740px; margin: 3% auto;}
    .planBlock li{ width: 50%; float: left; border-bottom: 1px solid #fff;}
    .planBlock li.pb1{ border-right: 1px solid #fff;}
    .planBlock li.pb3{ border-right: 1px solid #fff;}
    .planBoxCenter a{ height: 40px; line-height: 38px; width: 180px; border-radius: 20px; font-size: 14px;}
}
@media screen and (min-width: 1440px){
    .planBlock li div.cb{ width: 320px; height: 135px; padding: 35px 0 0 50px;}
    .planBlock li div.cb i{ font-size: 50px; line-height: 60px; margin-right: 20px;}
    .planBlock li div.cb div span{ font-size: 24px; margin-bottom: 5px;}
    .planBlock li a:hover div.cb{ background: rgba(240,131,0,0.8);}
}

/*城市大脑*/
.a-banner{ width: 100%;}
.plan-cityBrainTop{ display: none; width: 100%; border-bottom: 1px solid #efeff0;}
.plan-cityBrainTopCenter{ width: 1280px; margin: 0 auto; height: 65px;}
.plan-cityBrainTopCenter-left{ color: #dcdddd; line-height: 65px;}
.plan-cityBrainTopCenter-left a{ margin: 0 10px; color: #3e3a39; font-size: 16px;}
.plan-cityBrainTopCenter-left a.on,.plan-cityBrainTopCenter-left a:hover{ color: #f08300;}

.plan-cityBrainTopCenter-right{ line-height: 65px; color: #9fa0a0; font-size: 12px;}
.plan-cityBrainTopCenter-right a{ color: #9fa0a0;}
.plan-cityBrainTopCenter-right a:hover{ color: #f08300;}

.plan-cityBrainTitle{ width: 100%; padding: 5%;}
.plan-cityBrainTitle-tit{ text-align: center; color: #f08300; font-size: 16px; margin-bottom: 15px;}
.plan-cityBrainTitle-tit strong{ display: block;}

.plan-cityBrainTitleDes{ line-height: 20px; font-size: 13px; color: #3e3a39;}
.plan-cityBrainTitleDetail{ width: 100%; padding: 5%;line-height: 20px; font-size: 13px; color: #3e3a39;}
.plan-cityBrainTitleDetail img{ max-width: 100%; display: inline-block;}

.plan-cityBrainLine{ width: 100%; background: url(../images/pl5.jpg) no-repeat top center; background-size: cover; padding: 5%; color: #3e3a39; line-height: 22px;}


@media screen and (min-width: 1300px){
    .plan-cityBrainTop{ display: block;}
    .plan-cityBrainTitle{ width: 1280px; margin: 0 auto; padding: 5% 0;}
    .plan-cityBrainTitle-tit{border-bottom: 1px dotted #ddddde; padding-bottom: 30px; font-size: 24px;}
    .plan-cityBrainTitleDes{ font-size: 14px; line-height: 24px; padding-top: 40px;}
    .plan-cityBrainLineCenter{ width: 1280px; margin: 0 auto; font-size: 24px; line-height: 36px;}
    .plan-cityBrainTitleDetail{ width: 1280px; margin: 0 auto; padding: 5% 0; font-size: 14px; line-height: 24px;}
    .plan-cityBrainLine{ padding: 70px 0;}
}

/*交通大脑*/
.trafficTab{ width: 100%; background: url(../images/pl7.jpg) #ffe3c0 no-repeat top center;}
.trafficTab2{ background: url(../images/pl10.jpg) #f8f0d9 no-repeat top center;}
.trafficTabList{ width: 100%; padding-top: 40px;}
.trafficTabList li{ background: #f08300; position: relative; cursor: pointer; float: left; width: 25%; line-height: 20px; height: 60px; border-right: 1px solid #fff;border-bottom: 1px solid #fff; font-size: 13px; color: #fff; padding: 10px 0 10px 10px;}
.trafficTabList li.lst{ border: none;}
.trafficTabList li.on{ background: #fff; color: #f08300;}
.trafficTabList li i{ display: none;}

.trafficTabDetail{ width: 100%; padding: 5%; margin: 0 auto;}
.trafficTabBox{ display: none; font-size: 13px; line-height: 22px;color: #3e3a39;}
.trafficTabBox img{ max-width: 100%; display: inline-block;}

@media screen and (min-width: 768px){
    .trafficTabList{ width: 90%; margin: 0 auto;}
}

@media screen and (min-width: 1300px){
    .trafficTabList{ width: 1280px; margin: 0 auto; padding-top: 100px;}
    .trafficTabList li{ width: 255px; height: 100px; padding: 25px 0 0 35px; font-size: 16px; line-height: 24px;}
    .trafficTabList li i{
        width: 42px; height: 42px; background: #f08300;
        color: #fff; line-height: 42px; text-align: center; border-radius: 100%; position: absolute; right: 35px; top: 32px;
    }
    .trafficTabList li.on i{ display: block;}
    .trafficTabDetail{ width: 1280px; margin: 0 auto; padding: 90px 0;}
    .trafficTabDetail2{ padding-bottom: 0;}
}

/*健康大脑*/
.healthyBrainTab{ width: 100%; background: url(../images/pl8.jpg) #cbc1c8 no-repeat top center;}
.healthyBrainTabList li{ position: relative; float: left; width: 25%; font-size: 13px; color: #fff; background: #f08300; cursor: pointer; border-right: 1px solid #c2acae; border-bottom: 1px solid #c2acae; padding: 10px 15px; height: 60px; line-height: 20px;}
.healthyBrainTabList li i{ display: none;}
.healthyBrainTabList li.on{ background: #fff; color: #f08300;}

@media screen and (min-width: 414px){
    .healthyBrainTabList li{ line-height: 40px; font-size: 14px;}
}

@media screen and (min-width: 768px){
    .healthyBrainTabList{ width: 90%; margin: 0 auto;}
    .healthyBrainTabList li{height: 100px; line-height: 80px; padding-left: 40px; font-size: 16px;}
}
@media screen and (min-width: 992px){
    .healthyBrainTabList li i{
        width: 42px; height: 42px; background: #f08300;
        color: #fff; line-height: 42px; text-align: center; border-radius: 100%; position: absolute; right: 35px; top: 32px;
    }
    .healthyBrainTabList li.on i{ display: block;}
}

@media screen and (min-width: 1440px){
    .healthyBrainTabList{ width: 1280px;}
    .healthyBrainTabList li{ width: 20%;}
}


/*软件产品*/
.softwareProductBox{ width: 100%; background: #efeff0; padding: 15px;}
.softwareProductList{ width: 100%;}
.softwareProductList li{ background: #fff; margin-bottom: 10px;}
.softwareProductList li a{display: block; width: 100%; color: #3e3a39;}
.softwareProductList li a p{
    position: relative; height: 60px; line-height: 60px; padding: 0 15px; font-size: 14px;
}
.softwareProductList li a p i{
    display: block; width: 26px; height: 26px; line-height: 26px; background: #f6a646; border-radius: 100%; text-align: center;
    color: #fff; font-size: 16px; font-style: normal; position: absolute; right: 10px; top: 50%;
    -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -o-transform: translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.softwareProductList li a:hover{ background: #f08300; color: #fff;}
.softwareProductList li a p span{ display: block; width: 70%; overflow: hidden; text-overflow:ellipsis;white-space: nowrap;}

.softwareProductList li a i.pic{ display: block; width: 100%; border-top: 1px solid #efeff0;}

@media screen and (min-width: 768px){
    .softwareProductList li{ width: 48%; float: left; margin: 0 1% 15px 1%;}
    .softwareProductList li a i.pic{ height: 210px; overflow: hidden;}
}
@media screen and (min-width: 1024px){
    .softwareProductList li{ width: 32%; float: left; margin: 0 0.65% 15px 0.65%;}
    .softwareProductList li a p{ height: 80px; line-height: 80px;}
    .softwareProductList li a i.pic{ height: 230px;}
}
@media screen and (min-width: 1440px){
    .softwareProductBox{ padding: 60px 0 40px 0;}
    .softwareProductList{ width: 1320px; margin: 0 auto;}
    .softwareProductList li{ width: 400px; margin: 0 20px 10px 20px;}
    .softwareProductList li a p{ height: 120px; line-height: 120px; font-size: 18px; padding: 0 20px 0 30px;}
    .softwareProductList li a p i{ width: 42px; height: 42px; line-height: 42px; font-size: 22px;}
    .hardwareProductList li{ margin-bottom: 40px;}
}

/*it规划*/
.itPlanBox{ width: 100%; padding: 0 5%;}
.itPlanImg img{ max-width: 100%; display: inline-block;}

.itPlanList{ width: 100%; padding-top: 20px;}
.itPlanList div{ margin-bottom: 20px; width: 100%;}
.itPlanList li{ line-height: 22px; font-size: 13px;}
.itPlanList li strong{ display: block; margin-bottom: 10px;}

@media screen and (min-width: 768px){
    .itPlanList div{ width: 50%;}
}
@media screen and (min-width: 1024px){
    .itPlanList div{ width: 40%; position: relative;}
    .itPlanList{ padding-top: 40px;}
    .itPlanList li{ line-height: 36px; font-size: 14px;}
    .itPlanList li strong{ font-size: 18px;}
    .itPlanList div.hvl{ width: 26%; margin-right: 4%;}
    .itPlanList div.hvl:after{ content: ''; width: 1px; height: 100%; position: absolute; right: 0%; top: 0; background: #dadada;}
}
@media screen and (min-width: 1440px){
    .itPlanBox{ width: 1280px; margin: 0 auto; padding: 0;}
    .itPlanList{ padding: 2% 0;}
}

.trainingContent{ width: 100%; padding: 0 5% 7% 5%;}
.trainingContentLeft{ width: 100%; font-size: 13px; color: #3e3a39; line-height: 22px;}
.trainingContentRight{ width: 60%; margin: 0 auto;}
.trainingContentRight img{ display: inline-block; max-width: 100%;}

@media screen and (min-width: 768px){
    .trainingContentLeft{ float: left; width: 65%;}
    .trainingContentRight{ float: right; width: 30%;}
}
@media screen and (min-width: 1024px){
    .trainingContentLeft{ font-size: 14px; line-height: 30px; padding-top: 30px;}
    .trainingContentRight{ width: 305px;}
}
@media screen and (min-width: 1440px){
    .trainingContent{ width: 1280px; margin: 0 auto; padding: 0 0 5% 0;}
}

/*video*/
.videoTop{ display: none; width: 1120px; margin: 0 auto; padding: 70px 0;}
.videoTopVideo{ width: 797px; height: 485px; background: #000;}
.videoTopList{ width: 240px;}
.videoTopList li{border-bottom: 1px solid #ddddde;}
.videoTopList li a{ display: block; font-size: 14px; height: 40px; line-height: 40px; color: #595757; position: relative;}
.videoTopList li a:hover{ color: #f08300;}
.videoTopList li a i{ color: #dcdddd; position: absolute; right: 0; top: 0;}
.videoTopList li a:hover i{ color: #f08300;}
.videoTopList li.on a{ color: #f08300;}
.videoTopList li.on a i{ color: #f08300;}

.videoBox{ width: 100%; background: #efefef;}
.videoBoxList{ width: 90%; margin: 0 auto; padding: 5% 0;}
.videoBoxList li{ width: 100%; float: left; background: #fff; margin-bottom: 15px;}
.videoBoxList li .theVdo{ width: 100%; background: #000;}
.videoBoxList li .theVdo video{ display: block; width: 100%;}
.videoBoxList li .theVdo img{ display: none; width: 100%;}
.videoBoxList li p{ padding: 0 10px; height: 44px; overflow: hidden; font-size: 13px; line-height: 44px;}

@media screen and (min-width: 768px){
    .videoBoxList{ width: 100%;}
    .videoBoxList li{ width: 44%; float: left; margin: 0 3%;}
}

@media screen and (min-width: 992px){
    .videoBoxList{ width: 978px;}
    .videoBoxList li{ width: 300px; float: left; margin: 0 13px;}
}

@media screen and (min-width: 1200px){
    .videoBoxList{ width: 1200px;}
    .videoBoxList li{ width: 274px;}
    .videoTop{ display: block;}
}

@media screen and (min-width: 1200px){
    .videoBoxList{ width: 1304px;}
    .videoBoxList li{ width: 300px;}
    .videoBoxList li .theVdo video{ display: none;}
    .videoBoxList li .theVdo img{ display: block;}
}

/*contact*/
.contact-position{ display: none; width: 1280px; margin: 0 auto; border-bottom: 1px solid #efeff0; height: 55px; line-height: 55px; font-size: 12px; color: #9fa0a0;}
.contact-position a{ color: #9fa0a0;}
.contact-position a:hover{ color: #f08300;}
.contact-title{ width: 100%; text-align: center; font-size: 14px; color: #f08300; padding: 5% 0;}
.contact-title strong{ display: block;}

.contact-tab{ width: 100%; height: 60px; overflow: hidden; position: relative;}
.contact-tab li{ display: none; width: 100%; height: 60px; text-align: center; font-size: 16px; background: #efeff0;}
.contact-tab li a{
    color: #3e3a39; height: 60px;
    display: -webkit-flex; display: flex;
    -webkit-justify-content: center; justify-content: center;
    -webkit-align-items: center; align-items: center;
}
.contact-tab li.on{ background: #f08300; display: block;}
.contact-tab li a i{ font-size: 34px; margin-right: 10px;}

.contact-tab-prev,
.contact-tab-next{ position: absolute; width: 34px; height: 34px; top: 50%; margin-top: -17px; z-index: 1000;}
.contact-tab-prev{ left: 10px;}
.contact-tab-next{ right: 10px;}
.contact-tab-prev a,
.contact-tab-next a{ display: block; font-size: 30px; line-height: 34px; color: #fff;}

.contact-content{ width: 100%; padding: 5% 15px;}
.contact-content-left{ font-size: 13px; color: #3e3a39; line-height: 20px;}
.contact-content-left span{ display: block; font-size: 16px; margin-bottom: 10px;}
.contact-content-left font{ display: block; color: #f08300;}

.contact-content-right{ width: 100%; padding-top: 20px;}
.contact-content-right li{ position: relative; margin-bottom: 10px; padding-left: 100px;}
.contact-content-right li:after{ content: ''; clear: both; display: block; width: 0; height: 0; overflow: hidden; visibility: hidden;}
.contact-content-right li span{ display: block; position: absolute; left: 0; top: 0; width: 90px; font-size: 13px; line-height: 34px; color: #3e3a39; text-align: right;}
.contact-content-right li select,
.contact-content-right li input[type='text']{ border: 1px solid #efefef; background: #f7f8f8; height: 34px; width: 100%; outline: none; padding: 0 10px; line-height: 32px; font-size: 13px; color: #9fa0a0;}
.contact-content-right li span font{ color: #f08300;}
.contact-content-right li textarea{ border: 1px solid #efefef; width: 100%; background: #f7f8f8; height: 130px; padding: 10px; color: #9fa0a0; font-size: 13px; line-height: 20px;}
.contact-content-right li input[type='submit']{ background: #f08300; border: none; width: 100%; height: 34px; border-radius: 17px; color: #fff; font-size: 14px;}
.contact-content-right li p{ font-size: 13px; color: #3e3a39; text-align: right;}
.contact-content-right li p a{ color: #f08300;}
.contact-content-right li i{ font-style: normal; font-size: 13px;}
.contact-content-right li.cityLD select{ margin-bottom: 10px;}

.media-content-right li{ padding-left: 80px;}
.media-content-right li span{ width: 70px;}

@media screen and (min-width: 768px){
    .contact-title{ font-size: 18px;}
    .contact-tab{ width: 1280px; margin: 0 auto;height: 80px;}
    .contact-tab li a{ height: 80px; line-height: 80px;}
    .contact-tab li{ display: block; width: 33.33%; float: left; border-right: 1px solid #fff; height: 80px; font-size: 20px;}
    .contact-tab-prev,
    .contact-tab-next{ display: none;}
    .contact-content-left{ float: left; width: 30%;}
    .contact-content-right{ float: right; width: 65%; border-left: 1px solid #efeff0; padding-left: 5%; padding-top: 0;}
}
@media screen and (min-width: 1300px){
    .contact-position{ display: block;}
    .contact-title{ width: 1280px; margin: 0 auto; text-align: left; padding: 50px 0; font-size: 24px;}
    .contact-tab{ width: 1280px; margin: 0 auto;height: 100px;}
    .contact-tab li{ height: 100px; font-size: 24px;}
    .contact-tab li a{ height: 100px; line-height: 100px;}
    .contact-content-left{ padding-right: 10%; font-size: 14px; line-height: 24px;}
    .contact-content-left span{ font-size: 24px; margin-bottom: 15px;}
    .contact-content{ width: 1280px; margin: 0 auto; padding: 50px 0;}
    .contact-content-right{ padding-left: 13%; padding-right: 18%;}
    .contact-content-right li input[type='submit']{ width: 230px;}
    .contact-content-right li p{ text-align: left; padding-left: 50px;}
    .contact-content-right li i{ width: 140px; text-align: left; position: absolute; right: -150px; top: 0; font-style: normal; line-height: 34px; font-size: 13px;}

    .contact-content-right li select{ width: 150px;}
    .contact-content-right li.cityLD select{ float: left; margin-right: 15px;}
}