#solutions .bannerBox {
    padding-top: 180px;
    width: 100%;
    height: 528px;
    background: url("../img/common/solutionBg.jpg") no-repeat;
    background-position: top;
    text-align: center;
    color: #FFF
}

@media(max-width:520px) {
    #solutions .bannerBox {
        background: url("../img/common/solutionBg.jpg") no-repeat
    }
}

#solutions .bannerBox h1 {
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 36px
}

@media(max-width:520px) {
    #solutions .bannerBox h1 {
        font-size: 28px
    }
}

#solutions .bannerBox p {
    margin-bottom: 36px;
    font-size: 13px;
    line-height: 12px
}

#solutions .bannerBox h2 {
    font-size: 28px;
    line-height: 28px
}

@media(max-width:520px) {
    #solutions .bannerBox h2 {
        padding: 0 20px;
        font-size: 18px;
        line-height: 18px
    }
}

#solutions .infoBox {
    padding-top: 66px;
    background-color: #fafafa
}

#solutions .infoBox .menuList {
    float: left;
    width: 230px;
    box-shadow: 0 3px 3px #ededed;
    background-color: #FFF;
    top: 66px
}

@media(max-width:520px) {
    #solutions .infoBox .menuList {
        display: none
    }
}

#solutions .infoBox .menuList .bigTitle {
    padding-left: 32px;
    width: 100%;
    height: 58px;
    line-height: 58px;
    color: #202020;
    font-size: 14px
}

#solutions .infoBox .menuList .commonMenuItem {
    padding-left: 32px;
    width: 100%;
    min-height: 50px;
    line-height: 50px;
    font-size: 13px;
    color: #5c5c5c;
    border-top: 1px dashed #bfbfbf;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#solutions .infoBox .menuList .commonMenuItem:hover {
    color: #FFF;
    background-color: #34c8e6;
    border-top: 1px dashed #34c8e6 !important
}

#solutions .infoBox .menuList .activeMenu {
    color: #FFF;
    background-color: #34c8e6;
    border-top: 1px dashed #34c8e6
}

#solutions .infoBox .mobileMenuBox {
    display: none;
    position: relative;
    width: 100%;
    min-height: 40px;
    background-color: #FFF
}

@media(max-width:520px) {
    #solutions .infoBox .mobileMenuBox {
        display: block
    }
}

#solutions .infoBox .mobileMenuBox .currentBox {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #EFEFEF
}

#solutions .infoBox .mobileMenuBox .currentBox i {
    float: right;
    line-height: 40px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#solutions .infoBox .mobileMenuBox .mobileMenuList {
    padding-left: 20px;
    opacity: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    border-bottom: 1px solid #EFEFEF;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#solutions .infoBox .mobileMenuBox .mobileMenuList .commonMenuItem {
    height: 30px;
    line-height: 30px
}

#solutions .infoBox .activeMobileBox .mobileMenuList {
    opacity: 1;
    height: auto
}

#solutions .infoBox .activeMobileBox i {
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg)
}

@media(max-width:520px) {
    #solutions .infoBox {
        padding-top: 0
    }
}

#solutions .infoList {
    padding-left: 27px;
    padding-bottom: 66px;
    float: left;
    width: calc(100% - 230px)
}

@media(max-width:520px) {
    #solutions .infoList {
        padding: 0;
        width: 100%
    }
}

#solutions .infoList .webBox,
#solutions .infoList .appBox,
#solutions .infoList .cicdBox,
#solutions .infoList .serviceBox,
#solutions .infoList .cloudBox,
#solutions .infoList .saasBox {
    padding: 80px 55px 58px;
    width: 100%;
    box-shadow: 0 3px 3px #ededed;
    background-color: #FFF
}

@media(max-width:520px) {

    #solutions .infoList .webBox,
    #solutions .infoList .appBox,
    #solutions .infoList .cicdBox,
    #solutions .infoList .serviceBox,
    #solutions .infoList .cloudBox,
    #solutions .infoList .saasBox {
        padding: 60px 20px
    }
}

#solutions .infoList .webBox h1,
#solutions .infoList .appBox h1,
#solutions .infoList .cicdBox h1,
#solutions .infoList .serviceBox h1,
#solutions .infoList .cloudBox h1,
#solutions .infoList .saasBox h1 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 28px;
    color: #202020;
    line-height: 28px
}

#solutions .infoList .webBox .eng,
#solutions .infoList .appBox .eng,
#solutions .infoList .cicdBox .eng,
#solutions .infoList .serviceBox .eng,
#solutions .infoList .cloudBox .eng,
#solutions .infoList .saasBox .eng {
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 12px;
    color: #a9a9a9
}

#solutions .infoList .webBox .line,
#solutions .infoList .appBox .line,
#solutions .infoList .cicdBox .line,
#solutions .infoList .serviceBox .line,
#solutions .infoList .cloudBox .line,
#solutions .infoList .saasBox .line {
    margin-bottom: 30px;
    width: 100%;
    height: 1px;
    border: 1px dashed #bfbfbf
}

#solutions .infoList .webBox .titleLine,
#solutions .infoList .appBox .titleLine,
#solutions .infoList .cicdBox .titleLine,
#solutions .infoList .serviceBox .titleLine,
#solutions .infoList .cloudBox .titleLine,
#solutions .infoList .saasBox .titleLine {
    display: flex;
    align-items: flex-end;
    margin-top: 28px;
    margin-bottom: 28px
}

#solutions .infoList .webBox .littleTitle,
#solutions .infoList .appBox .littleTitle,
#solutions .infoList .cicdBox .littleTitle,
#solutions .infoList .serviceBox .littleTitle,
#solutions .infoList .cloudBox .littleTitle,
#solutions .infoList .saasBox .littleTitle {
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 10px;
    font-size: 16px;
    line-height: 46px;
    color: #34C8E6;
    border-bottom: 3px solid #34C8E6
}

#solutions .infoList .webBox p,
#solutions .infoList .appBox p,
#solutions .infoList .cicdBox p,
#solutions .infoList .serviceBox p,
#solutions .infoList .cloudBox p,
#solutions .infoList .saasBox p {
    margin-bottom: 0;
    line-height: 24px;
    font-size: 13px;
    color: #707070;
    word-break: break-all
}

#solutions .infoList .webBox .colorLine,
#solutions .infoList .appBox .colorLine,
#solutions .infoList .cicdBox .colorLine,
#solutions .infoList .serviceBox .colorLine,
#solutions .infoList .cloudBox .colorLine,
#solutions .infoList .saasBox .colorLine {
    flex: 1;
    min-width: 0;
    height: 49px;
    border-bottom: 1px dashed #bfbfbf
}

#solutions .infoList .webBox .icon,
#solutions .infoList .appBox .icon,
#solutions .infoList .cicdBox .icon,
#solutions .infoList .serviceBox .icon,
#solutions .infoList .cloudBox .icon,
#solutions .infoList .saasBox .icon {
    margin-right: 10px;
    display: inline-block;
    width: 8px;
    height: 8px;
    line-height: 24px;
    border-radius: 12px;
    background-color: #34C8E6
}

#solutions .infoList .webBox .cardDetail,
#solutions .infoList .appBox .cardDetail,
#solutions .infoList .cicdBox .cardDetail,
#solutions .infoList .serviceBox .cardDetail,
#solutions .infoList .cloudBox .cardDetail,
#solutions .infoList .saasBox .cardDetail {
    position: relative;
    margin-bottom: 30px;
    float: left;
    height: 200px;
    width: 30%;
    border-radius: 3px;
    box-shadow: 0 3px 3px #DADADA;
    overflow: hidden;
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#solutions .infoList .webBox .cardDetail .imgBox,
#solutions .infoList .appBox .cardDetail .imgBox,
#solutions .infoList .cicdBox .cardDetail .imgBox,
#solutions .infoList .serviceBox .cardDetail .imgBox,
#solutions .infoList .cloudBox .cardDetail .imgBox,
#solutions .infoList .saasBox .cardDetail .imgBox {
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#solutions .infoList .webBox .cardDetail .imgBox p,
#solutions .infoList .appBox .cardDetail .imgBox p,
#solutions .infoList .cicdBox .cardDetail .imgBox p,
#solutions .infoList .serviceBox .cardDetail .imgBox p,
#solutions .infoList .cloudBox .cardDetail .imgBox p,
#solutions .infoList .saasBox .cardDetail .imgBox p {
    text-align: center;
    font-size: 16px;
    color: #34C8E6;
    cursor: default
}

#solutions .infoList .webBox .cardDetail .infoBox,
#solutions .infoList .appBox .cardDetail .infoBox,
#solutions .infoList .cicdBox .cardDetail .infoBox,
#solutions .infoList .serviceBox .cardDetail .infoBox,
#solutions .infoList .cloudBox .cardDetail .infoBox,
#solutions .infoList .saasBox .cardDetail .infoBox {
    padding: 60px 30px;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    color: #FFF;
    text-align: center;
    background-color: #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#solutions .infoList .webBox .cardDetail .infoBox p:first-child,
#solutions .infoList .appBox .cardDetail .infoBox p:first-child,
#solutions .infoList .cicdBox .cardDetail .infoBox p:first-child,
#solutions .infoList .serviceBox .cardDetail .infoBox p:first-child,
#solutions .infoList .cloudBox .cardDetail .infoBox p:first-child,
#solutions .infoList .saasBox .cardDetail .infoBox p:first-child {
    margin-bottom: 20px;
    color: #FFF;
    font-size: 16px;
    line-height: 16px
}

#solutions .infoList .webBox .cardDetail .infoBox p:last-child,
#solutions .infoList .appBox .cardDetail .infoBox p:last-child,
#solutions .infoList .cicdBox .cardDetail .infoBox p:last-child,
#solutions .infoList .serviceBox .cardDetail .infoBox p:last-child,
#solutions .infoList .cloudBox .cardDetail .infoBox p:last-child,
#solutions .infoList .saasBox .cardDetail .infoBox p:last-child {
    color: #FFF;
    font-size: 13px;
    line-height: 16px
}

#solutions .infoList .webBox .cardDetail .product-icon,
#solutions .infoList .appBox .cardDetail .product-icon,
#solutions .infoList .cicdBox .cardDetail .product-icon,
#solutions .infoList .serviceBox .cardDetail .product-icon,
#solutions .infoList .cloudBox .cardDetail .product-icon,
#solutions .infoList .saasBox .cardDetail .product-icon {
    margin: 45px auto 10px;
    width: 80px;
    height: 88px;
    background: url("../img/solutions/web.png") no-repeat
}

#solutions .infoList .webBox .cardDetail .solution-icon,
#solutions .infoList .appBox .cardDetail .solution-icon,
#solutions .infoList .cicdBox .cardDetail .solution-icon,
#solutions .infoList .serviceBox .cardDetail .solution-icon,
#solutions .infoList .cloudBox .cardDetail .solution-icon,
#solutions .infoList .saasBox .cardDetail .solution-icon {
    margin: 45px auto 10px;
    width: 80px;
    height: 88px;
    background: url("../img/solutions/solution.png") no-repeat
}

#solutions .infoList .webBox .cardDetail .quick-start,
#solutions .infoList .appBox .cardDetail .quick-start,
#solutions .infoList .cicdBox .cardDetail .quick-start,
#solutions .infoList .serviceBox .cardDetail .quick-start,
#solutions .infoList .cloudBox .cardDetail .quick-start,
#solutions .infoList .saasBox .cardDetail .quick-start {
    background-position: 0 0
}

#solutions .infoList .webBox .cardDetail .highav,
#solutions .infoList .appBox .cardDetail .highav,
#solutions .infoList .cicdBox .cardDetail .highav,
#solutions .infoList .serviceBox .cardDetail .highav,
#solutions .infoList .cloudBox .cardDetail .highav,
#solutions .infoList .saasBox .cardDetail .highav {
    background-position: 0 -185px
}

#solutions .infoList .webBox .cardDetail .logmonitor,
#solutions .infoList .appBox .cardDetail .logmonitor,
#solutions .infoList .cicdBox .cardDetail .logmonitor,
#solutions .infoList .serviceBox .cardDetail .logmonitor,
#solutions .infoList .cloudBox .cardDetail .logmonitor,
#solutions .infoList .saasBox .cardDetail .logmonitor {
    background-position: 0 -287px
}

#solutions .infoList .webBox .cardDetail .safeupdate,
#solutions .infoList .appBox .cardDetail .safeupdate,
#solutions .infoList .cicdBox .cardDetail .safeupdate,
#solutions .infoList .serviceBox .cardDetail .safeupdate,
#solutions .infoList .cloudBox .cardDetail .safeupdate,
#solutions .infoList .saasBox .cardDetail .safeupdate {
    background-position: 0 -378px
}

#solutions .infoList .webBox .cardDetail .elasticity,
#solutions .infoList .appBox .cardDetail .elasticity,
#solutions .infoList .cicdBox .cardDetail .elasticity,
#solutions .infoList .serviceBox .cardDetail .elasticity,
#solutions .infoList .cloudBox .cardDetail .elasticity,
#solutions .infoList .saasBox .cardDetail .elasticity {
    background-position: 0 -100px
}

#solutions .infoList .webBox .cardDetail .maintenance,
#solutions .infoList .appBox .cardDetail .maintenance,
#solutions .infoList .cicdBox .cardDetail .maintenance,
#solutions .infoList .serviceBox .cardDetail .maintenance,
#solutions .infoList .cloudBox .cardDetail .maintenance,
#solutions .infoList .saasBox .cardDetail .maintenance {
    background-position: 0 -465px
}

#solutions .infoList .webBox .cardDetail .quick-iteration,
#solutions .infoList .appBox .cardDetail .quick-iteration,
#solutions .infoList .cicdBox .cardDetail .quick-iteration,
#solutions .infoList .serviceBox .cardDetail .quick-iteration,
#solutions .infoList .cloudBox .cardDetail .quick-iteration,
#solutions .infoList .saasBox .cardDetail .quick-iteration {
    background-position: 0 -15px
}

#solutions .infoList .webBox .cardDetail .apidev,
#solutions .infoList .appBox .cardDetail .apidev,
#solutions .infoList .cicdBox .cardDetail .apidev,
#solutions .infoList .serviceBox .cardDetail .apidev,
#solutions .infoList .cloudBox .cardDetail .apidev,
#solutions .infoList .saasBox .cardDetail .apidev {
    background-position: 0 -113px
}

#solutions .infoList .webBox .cardDetail .wdkk,
#solutions .infoList .appBox .cardDetail .wdkk,
#solutions .infoList .cicdBox .cardDetail .wdkk,
#solutions .infoList .serviceBox .cardDetail .wdkk,
#solutions .infoList .cloudBox .cardDetail .wdkk,
#solutions .infoList .saasBox .cardDetail .wdkk {
    background-position: 0 -203px
}

#solutions .infoList .webBox .cardDetail .ease,
#solutions .infoList .appBox .cardDetail .ease,
#solutions .infoList .cicdBox .cardDetail .ease,
#solutions .infoList .serviceBox .cardDetail .ease,
#solutions .infoList .cloudBox .cardDetail .ease,
#solutions .infoList .saasBox .cardDetail .ease {
    background-position: 0 0
}

#solutions .infoList .webBox .cardDetail .agile,
#solutions .infoList .appBox .cardDetail .agile,
#solutions .infoList .cicdBox .cardDetail .agile,
#solutions .infoList .serviceBox .cardDetail .agile,
#solutions .infoList .cloudBox .cardDetail .agile,
#solutions .infoList .saasBox .cardDetail .agile {
    background-position: 0 -980px
}

#solutions .infoList .webBox .cardDetail .lgprice,
#solutions .infoList .appBox .cardDetail .lgprice,
#solutions .infoList .cicdBox .cardDetail .lgprice,
#solutions .infoList .serviceBox .cardDetail .lgprice,
#solutions .infoList .cloudBox .cardDetail .lgprice,
#solutions .infoList .saasBox .cardDetail .lgprice {
    background-position: 0 -190px
}

#solutions .infoList .webBox .cardDetail .safe,
#solutions .infoList .appBox .cardDetail .safe,
#solutions .infoList .cicdBox .cardDetail .safe,
#solutions .infoList .serviceBox .cardDetail .safe,
#solutions .infoList .cloudBox .cardDetail .safe,
#solutions .infoList .saasBox .cardDetail .safe {
    background-position: 0 -382px
}

#solutions .infoList .webBox .cardDetail .quick,
#solutions .infoList .appBox .cardDetail .quick,
#solutions .infoList .cicdBox .cardDetail .quick,
#solutions .infoList .serviceBox .cardDetail .quick,
#solutions .infoList .cloudBox .cardDetail .quick,
#solutions .infoList .saasBox .cardDetail .quick {
    background-position: 0 -296px
}

#solutions .infoList .webBox .cardDetail .code,
#solutions .infoList .appBox .cardDetail .code,
#solutions .infoList .cicdBox .cardDetail .code,
#solutions .infoList .serviceBox .cardDetail .code,
#solutions .infoList .cloudBox .cardDetail .code,
#solutions .infoList .saasBox .cardDetail .code {
    background-position: 0 -390px
}

#solutions .infoList .webBox .cardDetail .build-server,
#solutions .infoList .appBox .cardDetail .build-server,
#solutions .infoList .cicdBox .cardDetail .build-server,
#solutions .infoList .serviceBox .cardDetail .build-server,
#solutions .infoList .cloudBox .cardDetail .build-server,
#solutions .infoList .saasBox .cardDetail .build-server {
    background-position: 0 -679px
}

#solutions .infoList .webBox .cardDetail .extend,
#solutions .infoList .appBox .cardDetail .extend,
#solutions .infoList .cicdBox .cardDetail .extend,
#solutions .infoList .serviceBox .cardDetail .extend,
#solutions .infoList .cloudBox .cardDetail .extend,
#solutions .infoList .saasBox .cardDetail .extend {
    background-position: 0 -1170px
}

#solutions .infoList .webBox .cardDetail .mirrorcache,
#solutions .infoList .appBox .cardDetail .mirrorcache,
#solutions .infoList .cicdBox .cardDetail .mirrorcache,
#solutions .infoList .serviceBox .cardDetail .mirrorcache,
#solutions .infoList .cloudBox .cardDetail .mirrorcache,
#solutions .infoList .saasBox .cardDetail .mirrorcache {
    background-position: 0 -783px
}

#solutions .infoList .webBox .cardDetail .elastic,
#solutions .infoList .appBox .cardDetail .elastic,
#solutions .infoList .cicdBox .cardDetail .elastic,
#solutions .infoList .serviceBox .cardDetail .elastic,
#solutions .infoList .cloudBox .cardDetail .elastic,
#solutions .infoList .saasBox .cardDetail .elastic {
    background-position: 0 -1270px
}

#solutions .infoList .webBox .cardDetail .dbsave,
#solutions .infoList .appBox .cardDetail .dbsave,
#solutions .infoList .cicdBox .cardDetail .dbsave,
#solutions .infoList .serviceBox .cardDetail .dbsave,
#solutions .infoList .cloudBox .cardDetail .dbsave,
#solutions .infoList .saasBox .cardDetail .dbsave {
    background-position: 0 -1065px
}

#solutions .infoList .webBox .cardDetail .quick-caas,
#solutions .infoList .appBox .cardDetail .quick-caas,
#solutions .infoList .cicdBox .cardDetail .quick-caas,
#solutions .infoList .serviceBox .cardDetail .quick-caas,
#solutions .infoList .cloudBox .cardDetail .quick-caas,
#solutions .infoList .saasBox .cardDetail .quick-caas {
    background-position: 0 -880px
}

#solutions .infoList .webBox .cardDetail .only-cluster,
#solutions .infoList .appBox .cardDetail .only-cluster,
#solutions .infoList .cicdBox .cardDetail .only-cluster,
#solutions .infoList .serviceBox .cardDetail .only-cluster,
#solutions .infoList .cloudBox .cardDetail .only-cluster,
#solutions .infoList .saasBox .cardDetail .only-cluster {
    background-position: 0 -570px
}

#solutions .infoList .webBox .cardDetail .logotpl,
#solutions .infoList .appBox .cardDetail .logotpl,
#solutions .infoList .cicdBox .cardDetail .logotpl,
#solutions .infoList .serviceBox .cardDetail .logotpl,
#solutions .infoList .cloudBox .cardDetail .logotpl,
#solutions .infoList .saasBox .cardDetail .logotpl {
    background-position: 0 -670px
}

#solutions .infoList .webBox .cardDetail .scaling,
#solutions .infoList .appBox .cardDetail .scaling,
#solutions .infoList .cicdBox .cardDetail .scaling,
#solutions .infoList .serviceBox .cardDetail .scaling,
#solutions .infoList .cloudBox .cardDetail .scaling,
#solutions .infoList .saasBox .cardDetail .scaling {
    background-position: 0 -1463px
}

#solutions .infoList .webBox .cardDetail .lgcloud,
#solutions .infoList .appBox .cardDetail .lgcloud,
#solutions .infoList .cicdBox .cardDetail .lgcloud,
#solutions .infoList .serviceBox .cardDetail .lgcloud,
#solutions .infoList .cloudBox .cardDetail .lgcloud,
#solutions .infoList .saasBox .cardDetail .lgcloud {
    background-position: 0 -1550px
}

#solutions .infoList .webBox .cardDetail .fusion,
#solutions .infoList .appBox .cardDetail .fusion,
#solutions .infoList .cicdBox .cardDetail .fusion,
#solutions .infoList .serviceBox .cardDetail .fusion,
#solutions .infoList .cloudBox .cardDetail .fusion,
#solutions .infoList .saasBox .cardDetail .fusion {
    background-position: 0 -1635px
}

#solutions .infoList .webBox .cardDetail .controlled,
#solutions .infoList .appBox .cardDetail .controlled,
#solutions .infoList .cicdBox .cardDetail .controlled,
#solutions .infoList .serviceBox .cardDetail .controlled,
#solutions .infoList .cloudBox .cardDetail .controlled,
#solutions .infoList .saasBox .cardDetail .controlled {
    background-position: 0 -1727px
}

#solutions .infoList .webBox .cardDetail .high,
#solutions .infoList .appBox .cardDetail .high,
#solutions .infoList .cicdBox .cardDetail .high,
#solutions .infoList .serviceBox .cardDetail .high,
#solutions .infoList .cloudBox .cardDetail .high,
#solutions .infoList .saasBox .cardDetail .high {
    background-position: 0 -1821px
}

#solutions .infoList .webBox .cardDetail .platform,
#solutions .infoList .appBox .cardDetail .platform,
#solutions .infoList .cicdBox .cardDetail .platform,
#solutions .infoList .serviceBox .cardDetail .platform,
#solutions .infoList .cloudBox .cardDetail .platform,
#solutions .infoList .saasBox .cardDetail .platform {
    background-position: 0 -1920px
}

#solutions .infoList .webBox .cardDetail .efficient,
#solutions .infoList .appBox .cardDetail .efficient,
#solutions .infoList .cicdBox .cardDetail .efficient,
#solutions .infoList .serviceBox .cardDetail .efficient,
#solutions .infoList .cloudBox .cardDetail .efficient,
#solutions .infoList .saasBox .cardDetail .efficient {
    background-position: 0 -2006px
}

#solutions .infoList .webBox .cardDetail .openapi,
#solutions .infoList .appBox .cardDetail .openapi,
#solutions .infoList .cicdBox .cardDetail .openapi,
#solutions .infoList .serviceBox .cardDetail .openapi,
#solutions .infoList .cloudBox .cardDetail .openapi,
#solutions .infoList .saasBox .cardDetail .openapi {
    background-position: 0 -2105px
}

#solutions .infoList .webBox .cardDetail .maintain,
#solutions .infoList .appBox .cardDetail .maintain,
#solutions .infoList .cicdBox .cardDetail .maintain,
#solutions .infoList .serviceBox .cardDetail .maintain,
#solutions .infoList .cloudBox .cardDetail .maintain,
#solutions .infoList .saasBox .cardDetail .maintain {
    background-position: 0 -2205px
}

#solutions .infoList .webBox .cardDetail .convenient-maintenance,
#solutions .infoList .appBox .cardDetail .convenient-maintenance,
#solutions .infoList .cicdBox .cardDetail .convenient-maintenance,
#solutions .infoList .serviceBox .cardDetail .convenient-maintenance,
#solutions .infoList .cloudBox .cardDetail .convenient-maintenance,
#solutions .infoList .saasBox .cardDetail .convenient-maintenance {
    background-position: 0 -1367px
}

@media(min-width:520px) {

    #solutions .infoList .webBox .cardDetail:hover,
    #solutions .infoList .appBox .cardDetail:hover,
    #solutions .infoList .cicdBox .cardDetail:hover,
    #solutions .infoList .serviceBox .cardDetail:hover,
    #solutions .infoList .cloudBox .cardDetail:hover,
    #solutions .infoList .saasBox .cardDetail:hover {
        box-shadow: 0 10px 10px #DADADA
    }

    #solutions .infoList .webBox .cardDetail:hover .imgBox,
    #solutions .infoList .appBox .cardDetail:hover .imgBox,
    #solutions .infoList .cicdBox .cardDetail:hover .imgBox,
    #solutions .infoList .serviceBox .cardDetail:hover .imgBox,
    #solutions .infoList .cloudBox .cardDetail:hover .imgBox,
    #solutions .infoList .saasBox .cardDetail:hover .imgBox {
        opacity: 0
    }

    #solutions .infoList .webBox .cardDetail:hover .infoBox,
    #solutions .infoList .appBox .cardDetail:hover .infoBox,
    #solutions .infoList .cicdBox .cardDetail:hover .infoBox,
    #solutions .infoList .serviceBox .cardDetail:hover .infoBox,
    #solutions .infoList .cloudBox .cardDetail:hover .infoBox,
    #solutions .infoList .saasBox .cardDetail:hover .infoBox {
        opacity: 1
    }
}

@media(max-width:520px) {

    #solutions .infoList .webBox .cardDetail,
    #solutions .infoList .appBox .cardDetail,
    #solutions .infoList .cicdBox .cardDetail,
    #solutions .infoList .serviceBox .cardDetail,
    #solutions .infoList .cloudBox .cardDetail,
    #solutions .infoList .saasBox .cardDetail {
        width: 100%;
        height: 220px
    }

    #solutions .infoList .webBox .cardDetail .infoBox,
    #solutions .infoList .appBox .cardDetail .infoBox,
    #solutions .infoList .cicdBox .cardDetail .infoBox,
    #solutions .infoList .serviceBox .cardDetail .infoBox,
    #solutions .infoList .cloudBox .cardDetail .infoBox,
    #solutions .infoList .saasBox .cardDetail .infoBox {
        opacity: 1;
        padding: 20px 30px;
        left: 0;
        bottom: 26px;
        height: 40%;
        color: #34C8E6;
        background-color: #FFF
    }

    #solutions .infoList .webBox .cardDetail .infoBox p,
    #solutions .infoList .appBox .cardDetail .infoBox p,
    #solutions .infoList .cicdBox .cardDetail .infoBox p,
    #solutions .infoList .serviceBox .cardDetail .infoBox p,
    #solutions .infoList .cloudBox .cardDetail .infoBox p,
    #solutions .infoList .saasBox .cardDetail .infoBox p {
        color: #34C8E6 !important
    }

    #solutions .infoList .webBox .cardDetail .imgBox,
    #solutions .infoList .appBox .cardDetail .imgBox,
    #solutions .infoList .cicdBox .cardDetail .imgBox,
    #solutions .infoList .serviceBox .cardDetail .imgBox,
    #solutions .infoList .cloudBox .cardDetail .imgBox,
    #solutions .infoList .saasBox .cardDetail .imgBox {
        height: 40%
    }

    #solutions .infoList .webBox .cardDetail .imgBox p,
    #solutions .infoList .appBox .cardDetail .imgBox p,
    #solutions .infoList .cicdBox .cardDetail .imgBox p,
    #solutions .infoList .serviceBox .cardDetail .imgBox p,
    #solutions .infoList .cloudBox .cardDetail .imgBox p,
    #solutions .infoList .saasBox .cardDetail .imgBox p {
        display: none
    }

    #solutions .infoList .webBox .cardDetail .product-icon,
    #solutions .infoList .appBox .cardDetail .product-icon,
    #solutions .infoList .cicdBox .cardDetail .product-icon,
    #solutions .infoList .serviceBox .cardDetail .product-icon,
    #solutions .infoList .cloudBox .cardDetail .product-icon,
    #solutions .infoList .saasBox .cardDetail .product-icon,
    #solutions .infoList .webBox .cardDetail .solution-icon,
    #solutions .infoList .appBox .cardDetail .solution-icon,
    #solutions .infoList .cicdBox .cardDetail .solution-icon,
    #solutions .infoList .serviceBox .cardDetail .solution-icon,
    #solutions .infoList .cloudBox .cardDetail .solution-icon,
    #solutions .infoList .saasBox .cardDetail .solution-icon {
        margin: 20px auto 10px
    }
}

#solutions .infoList .webBox .leftCard,
#solutions .infoList .appBox .leftCard,
#solutions .infoList .cicdBox .leftCard,
#solutions .infoList .serviceBox .leftCard,
#solutions .infoList .cloudBox .leftCard,
#solutions .infoList .saasBox .leftCard {
    margin-right: 5%
}

@media(max-width:520px) {

    #solutions .infoList .webBox .leftCard,
    #solutions .infoList .appBox .leftCard,
    #solutions .infoList .cicdBox .leftCard,
    #solutions .infoList .serviceBox .leftCard,
    #solutions .infoList .cloudBox .leftCard,
    #solutions .infoList .saasBox .leftCard {
        margin-right: 0
    }
}

#solutions .infoList .webBox .rightCard,
#solutions .infoList .appBox .rightCard,
#solutions .infoList .cicdBox .rightCard,
#solutions .infoList .serviceBox .rightCard,
#solutions .infoList .cloudBox .rightCard,
#solutions .infoList .saasBox .rightCard {
    margin-left: 5%
}

@media(max-width:520px) {

    #solutions .infoList .webBox .rightCard,
    #solutions .infoList .appBox .rightCard,
    #solutions .infoList .cicdBox .rightCard,
    #solutions .infoList .serviceBox .rightCard,
    #solutions .infoList .cloudBox .rightCard,
    #solutions .infoList .saasBox .rightCard {
        margin-left: 0
    }
}

#solutions .testBox {
    width: 100%;
    min-width: 1250px;
    height: 160px;
    background: url("../assets/img/index/testNow.png") no-repeat;
    background-size: 100% 100%
}

#solutions .testBox .title {
    margin-bottom: 0;
    float: left;
    line-height: 160px;
    font-size: 34px;
    font-weight: 500;
    color: #FFF;
    text-align: center
}

#solutions .testBox .testBtnBox {
    height: 160px;
    line-height: 160px
}

#solutions .testBox .testBtnBox .testBtn {
    margin-top: 62px;
    width: 130px;
    height: 36px;
    line-height: 36px;
    color: #FFF;
    text-align: center;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

#solutions .testBox .testBtnBox .testBtn:hover {
    color: #34c8e6;
    background-color: #FFF
}