.solution_area .title {
    font-size: 24px;
    font-weight: 500;
}
.solution_area .subtitle {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: #777;
}
.solution_area {
    width: 100%;
    padding-bottom: 100px;
    background:#fff; /*#f6f6f6;*/
    background-size: 100%;
}
.solution_area .pro-title .title{
    color:#333;
    font-size: 28px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}
.solution_area .pro-title .title:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid;
    border-color: #00509c transparent transparent;
}
.solution_area .pro-title .title:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 3px;
    background-color: #00509c;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%)
}
.solution_area .pro-title .subtitle {margin-top: 30px;text-align: center;font-size: 16px;color: #777;}
.pro-title{
  padding: 100px 0 50px 0;
}
/**
* 方案样式
*/
.solution-list ul li {
    float: left;
  width: 291px;
    position: relative;
    height: 528px;
}
.solution-list ul li>p.solution-title {
    position: absolute;
  top: 245px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 20px;
    z-index: 2;
}
.solution-list ul .img_border{
  position: absolute;
    width: 25px;
    height: 3px;
    background: #0196ff;
    margin-left: 134px;
    top: 212px;
}
.solution-list ul li>p.solution-intro {
    text-indent: 26px;
    font-size: 12px;
    height: 150px;
    padding: 0 30px;
    overflow: hidden;
    position: absolute;
  z-index:-1;
    top: 282px;
    color: #fff;
    line-height: 2;
    opacity: 0;
}
#solutionList .active a:hover{
  background-color:#fff;
  color:#1096ff;
}
#solutionList .active .li-bgcolor{
  position: absolute;
    z-index: 1;
    /*left: -10px;*/
    top: 60px;
    /*width:340px;
    height: 528px;*/
    width:290px;
    height: 410px;
    border: 1px solid #fff;
    -webkit-box-shadow: 0 5px 40px rgba(0,0,0,.5);
    -moz-box-shadow: 0 5px 40px rgba(0,0,0,.5);
    box-shadow: 0 5px 40px rgba(0,0,0,.5);
}
.solution-list ul li>i {
  position: absolute;
    top: 118px;
    width: 100%;
    height: 90px;
    z-index: 2;
}
.solution-list ul li>a {
    position: absolute;
    top: 452px;
    left: 50%;
    margin-left: -59px;
    width: 118px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 1px solid #fff;
    font-size: 14px;
    color: #fff;
    z-index:-1;
    opacity: 0;
}
.solution-list ul li .cloud-icon01{
    background: url(../img/index/cloud-icon01.png) no-repeat center;
}
.solution-list ul li .cloud-icon02{
    background: url(../img/index/cloud-icon02.png) no-repeat center;
}
.solution-list ul li .cloud-icon03{
    background: url(../img/index/cloud-icon03.png) no-repeat center;
}
.solution-list ul li .cloud-icon04{
    background: url(../img/index/cloud-icon04.png) no-repeat center;
}
.solution-list ul li .cloud-icon05{
    background: url(../img/index/cloud-icon05.png) no-repeat center;
}
.solution-list ul li .cloud-icon06{
    background: url(../img/index/cloud-icon06.png) no-repeat center;
}
/*.solution-list ul li .cloud-icon07{
    background: url(../img/index/cloud-icon07.png) no-repeat center;
}
.solution-list ul li .cloud-icon08{
    background: url(../img/index/cloud-icon08.png) no-repeat center;
}
.solution-list ul li .cloud-icon09{
    background: url(../img/index/cloud-icon09.png) no-repeat center;
}
.solution-list ul li .cloud-icon10{
    background: url(../img/index/cloud-icon10.png) no-repeat center;
}
.solution-list ul li .cloud-icon11{
    background: url(../img/index/cloud-icon11.png) no-repeat center;
}
.solution-list ul li .cloud-icon12{
    background: url(../img/index/cloud-icon12.png) no-repeat center;
}*/

#solutionList .li_bg01 {
    background: url(../img/index/solution_bg01.png) no-repeat center;
}
#solutionList .li_bg02 {
    background: url(../img/index/solution_bg02.png) no-repeat center;
}
#solutionList .li_bg03 {
    background: url(../img/index/solution_bg03.png) no-repeat center;
}
#solutionList .li_bg04 {
    background: url(../img/index/solution_bg04.png) no-repeat center;
}
#solutionList .li_bg05 {
    background: url(../img/index/solution_bg05.png) no-repeat center;
}
#solutionList .li_bg06 {
    background: url(../img/index/solution_bg06.png) no-repeat center;
}
/*#solutionList .li_bg07 {
    background: url(../img/index/solution_bg07.png) no-repeat center;
}
#solutionList .li_bg08 {
    background: url(../img/index/solution_bg08.png) no-repeat center;
}
#solutionList .li_bg09 {
    background: url(../img/index/solution_bg09.png) no-repeat center;
}
#solutionList .li_bg10 {
    background: url(../img/index/solution_bg10.png) no-repeat center;
}
#solutionList .li_bg11 {
    background: url(../img/index/solution_bg11.png) no-repeat center;
}
#solutionList .li_bg12 {
    background: url(../img/index/solution_bg12.png) no-repeat center;
}*/

/*#solutionList .active .li_hover_bg01{
  background: url(../img/index/solution_bg01_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg02{
  background: url(../img/index/solution_bg02_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg03{
  background: url(../img/index/solution_bg03_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg04{
  background: url(../img/index/solution_bg04_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg05{
  background: url(../img/index/solution_bg05_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg06{
  background: url(../img/index/solution_bg06_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg07{
  background: url(../img/index/solution_bg07_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg08{
  background: url(../img/index/solution_bg08_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg09{
  background: url(../img/index/solution_bg09_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg10{
  background: url(../img/index/solution_bg10_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg11{
  background: url(../img/index/solution_bg11_hover.png) no-repeat center;
}
#solutionList .active .li_hover_bg12{
  background: url(../img/index/solution_bg12_hover.png) no-repeat center;
}*/
.arr-btn .arr-left {
    background: url(../img/index/index-sprite.png) no-repeat 0 -1538px;
}
.arr-btn .arr-right {
    background: url(../img/index/index-sprite.png) no-repeat 0 -1500px;
}
.arr-btn {
    position: absolute;
    width: 40px;
    height: 100%;
    z-index: 99;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}
.arr-btn-right {
    right:-20px;
}
.arr-btn-left {
    left:-20px;
}
.solution-box{
    position: relative;
    width: 100%;
    height: 100%;
}
.arr-btn i {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -18px;
    width: 20px;
    height: 36px;
    z-index: 100;
}

.arr-btn-left i{
  margin-left: -24px;
}
#solutionList li.active .img_border {
  position: absolute;
    width: 25px;
    height: 3px;
    background: #fff;
    z-index:2;
    margin-left: 134px;
    top: 164px;
}
.solution-list ul .active>i {
    width: 100%;
    height: 64px;
}
.solution-list ul .active i {
  top: 80px;
}
.solution-list ul .active p.solution-title{
  top: 194px;
}
.solution-list ul .active p.solution-intro {
    top: 255px;
    opacity: 1;
    z-index: 2;
    filter: alpha(opacity=100);
}
.solution-list ul .active a {
    top: 410px;
    opacity: 1;
    z-index: 2;
    filter: alpha(opacity=100);
}

@media (min-width: 1400px){
  .solution_area .container {
      width: 1170px !important;
  }
}