.filter-mask, .filter-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.filter-mask {
    height: 100%;
    background: rgba(0,0,0,0.1);
}

.filter-body {
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: 14PX;
    height: 440PX;

    .classify {
        width: 50%;
        height: 100%;
        background: #f8f8f8;

        > li {
            height: 60PX;
            line-height: 60PX;

            > * {
                box-sizing: border-box;
            }

            &.active {
                background: #fff;
            }

            .shower {
                padding-left: 20PX;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #333;

                &.highlight {
                    background: #eee;
                }
            }

            .default {
                color: #999;
            }

            .title {
                float: left;
                color: #000;
            }

        }
    }

    .sub-classify {
        position: absolute;
        display: none;
        width: 50%;
        height: 440PX;
        left: 50%;
        top: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        > li {
            height: 60PX;
            line-height: 60PX;
            padding-left: 15PX;
            border-bottom: 1PX solid #e6e6e6;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &.highlight {
                background: #eee;
            }
        }

        .chosed-icon {
            display: none;
        }

        .chosed .chosed-icon {
            display: inline;
        }
    }

    .active > .sub-classify {
        display: block;
    }
}