@import

    "../base/mixin",
    "../base/variable";

/* 三等分 */
.ui-grid{
    padding-left: $wrap-padding;
    padding-right: 10px;
    @media (max-width: 320px) {
        padding-left: $wrap-padding-s;
        padding-right: 5px;
    }
    overflow: hidden;
    padding-top: 10px;
    li{
        padding-right: 5px;
        padding-bottom: 10px;
        float: left;
        position: relative;
        -webkit-box-sizing: border-box;     
    }
}
.ui-grid-trisect,.ui-grid-halve{
    @extend .ui-grid;
}
.ui-grid-trisect>li{
    width: 33.3333%;
}
.ui-grid-trisect-img{
    padding-top: 149.47%;
}
.ui-grid-trisect h4{
    position: relative;
    margin: 7px 0 3px;
}
.ui-grid-trisect h4 span{
    display: inline-block;
    margin-left: 12px;
    color: $txt-info;
}
/* 二等分 */

.ui-grid-halve>li{
    width: 50%; 
}
.ui-grid-halve-img{
    padding-top: 55.17%;
}
.ui-grid-trisect-img,.ui-grid-halve-img{
    @include placehold-img;
    img{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    width: 100%;
    &.active{
        opacity: .5;
    }
    
}
.ui-row{
    display: block;
    overflow: hidden;
}
.ui-col {
    float: left;
    box-sizing: border-box;
    width: 100%;
}
.ui-col-10 {
    width: 10%;
}
.ui-col-20 {
    width: 20%;
}
.ui-col-25 {
    width: 25%;
}
.ui-col-33 {
    width: 33.3333%;
}
.ui-col-50 {
    width: 50%;
}
.ui-col-67 {
    width: 66.6666%;
}
.ui-col-75 {
    width: 75%;
}
.ui-col-80 {
    width: 80%;
}
.ui-col-90 {
    width: 90%;
}
.ui-row-flex{
    display: -webkit-box;
    width: 100%;
    -webkit-box-sizing: border-box;
    .ui-col{
        float: none;
        -webkit-box-flex: 1;
        width: 0;
    }
    .ui-col-2{
        -webkit-box-flex: 2;
    }
    .ui-col-3{
        -webkit-box-flex: 3;
    }
    .ui-col-4{
        -webkit-box-flex: 4;
    }
}

.ui-row-flex-ver{
    -webkit-box-orient: vertical;
    .ui-col{
        width: 100%;
        height: 0;
    }
}