/*竖向手风琴css*/
.card-area {
    margin:0;
    height:300px;
    width:1000px;
    position:relative;
}

.card-area .card-item {
    z-index:4;
    transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;
    position:relative;
    float:left;
    width:15%;
    height:300px;
    background-color:transparent;
    border:solid 1px #f9f9f9;
}

.card-area .card-item.active {
    z-index:6;
    box-shadow:0 0 30px rgba(0,0,0,.2);
    width:40%;
    height:300px;
    -ms-transform: scale(1.04); /* IE 9 */
    -webkit-transform: scale(1.04); /* Safari */
    transform: scale(1.02); /* 标准语法 */
    box-shadow:0rem 0.43rem 0.43rem 0rem rgba(36,180,169,0.05);
    border:solid 0px #f9f9f9;
}

.card-area .card-item+.card-item {
    margin-left:-1px
}

.card-area .card-item .card {
    transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;
    width:100%;
    height:100%;
    background:#fff;
}

.card-area .card-item .card .head{
    color: #fff;
    background:#164C88;
    text-align: center;
}
.card-area .card-item.active .head{
    background:#00C19A;
    color:#fff;
    cursor: pointer;
}
.card-area .card-item .card .content{
   background:#fff;
    color: #000;
}
.card-area .card-item.active .content{
    color: #999;
}

.card-area .card-item .content .conPre{
    width:90%;
    margin:0px auto;
}
.card-area .card-item .content .btnbox{
    display: none;
    width:90%;
    margin:0px auto;
}
.card-area .card-item.active .content .btnbox{
    display: block;
}