@charset 'utf-8';
@import (reference) 'size';

.table-responsive{
    border: 0;
}
.compare-table-sction{
    display: none;
}

.compare-table{
    tr{
        text-align: center;
        width: 100%;
        height: auto;
        display: flex;
        th{
            border-bottom:1px solid @color-dd;
            border-top:0px solid @color-dd !important;
            width: 100%;
            text-align: left;
            padding-left: 1em !important;
        }
        td{
            display: flex;
            justify-content: center;
            align-items: center;
//          width: calc(100% / 7);
            text-align: center;
            vertical-align:middle;
            border-left: 1px solid @color-dd;
            border-bottom: 1px solid @color-dd;
            overflow: hidden;
            &:last-child{
                border-right: 1px solid @color-dd;
            }
            .table-img{
                width: 200px;
                height: auto;
                max-width: 100%;
                margin: 0 auto;
                @media (max-width: 850px){
                    max-width: 100%;
                }
                @media (max-width: 720px){
                    max-width: 100%;
                }
            }
        }
        &:nth-child(1){
            td{
                border-top: 1px solid @color-dd !important;
            }
            @media @max850 {
                td{
                    height: 80px;
                    padding: 0 50px;
                }
            }
        }
        &:nth-child(2){
            display: flex;
            td{
                max-height: 310px;
                display: flex;
                align-items: flex-end;
                @media @max850 {
                    max-height: 100%;
                }
                &:nth-child(1){
                    justify-content: center;
                    align-items: center;
                }
//              &:nth-child(6),
//              &:nth-child(7){
//                  img{
//                      max-width: 80%;
//                      @media (max-width: 850px){
//                          max-width: 50%;
//                      }
//                      @media (max-width: 720px){
//                          max-width: 32%;
//                      }
//                  }
//              }
            }
        }
        &:nth-child(odd){
            background: #E9ECEF;
        }
        &:nth-child(even){
            background: @color-ff;
        }
    }
}

.col-num(@name,@totalCol){
    @{name}: calc(100% / @totalCol) !important;;
}
.colspan(@name,@num,@totalNum){
    @{name}: calc((100% / @totalNum) * @num) !important;;
}

//7列，中间数据为合并的列，末尾数据为总列
.colspan-2-7{
    .colspan(width,2,7);
}
.colspan-3-7{
    .colspan(width,3,7);
}
.colspan-4-7{
    .colspan(width,4,7);
}
.colspan-5-7{
    .colspan(width,5,7);
}
.colspan-6-7{
    .colspan(width,6,7);
}
.colspan-3-5{
    .colspan(width,3,5);
}

//平均每列的宽度
.col-num-7{
    .col-num(width,7);
}
.col-num-6{
    .col-num(width,6);
}
.col-num-5{
    .col-num(width,5);
}
.col-num-4{
    .col-num(width,4);
}