.shop-index {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;

    &.new-shop {
        position: initial;
        overflow: initial;
        #pos-nav {
            z-index: 99;
        }
        #pos-list {
            z-index: 100;
        }
        #pos-nav, #pos-list {
            position: fixed;
            left: 0;
            top: 0;
        }
        .nav {
            li {
                height: 100%;
                line-height: 100%;
                margin-top: 0px;
                border-left: none;
                .text {
                    display: block;
                    width: 100%;
                    border-left: 1px solid #e0e0e0;
                    margin-top: 30px;
                    height: 28px;
                }
                &:first-child {
                    .text {
                        border-left: none;
                    }
                }
            }
        }
        .shop-foot-wrapper {
            position: fixed;
            left: 0;
        }
    }

    
    .nav-main {
        margin-bottom: 30px;
    }

    .branner-top {
        width: 100%;
        height: 200px;
        position: relative;
        overflow: hidden;

        .shop-back-img {
            height: 100%;
            width: 100%;
        }
    }

    .logo {
        position: absolute;
        overflow: hidden;
        left: 30px;
        bottom: 30px;
        width: 100px;
        height: 100px;
    }

    .store-name {
        color: #fff;
        font-size: 28px;
        position: absolute;
        overflow: hidden;
        left: 148px;
        bottom: 20px;
    }

    .collect {
        width: 128px;
        height: 49px;
        position: absolute;
        bottom: 30px;
        right: 30px;
        border-radius: 10px;
        text-align: center;
        background-size: contain;
    }

    .already-collect {
        width: 128px;
        height: 50px;
        border-radius: 10px;
        background-image: url("/product/already-collect.png") no-repeat;
        background-size: contain;
    }

    .not-collect {
        width: 128px;
        height: 50px;
        border-radius: 10px;
        background-image: url("/product/not-collect.png") no-repeat;
        background-size: contain;
    }

    .nav {
        width: 100%;
        height: 88px;
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        list-style: none;
        font-size: 28px;
        background: #fff;
        overflow: hidden;
        border-sizing: border-box;
        border-bottom: 1px solid #e0e0e0;
        z-index: 2;
             
        li{
            display: block;
            height: 28px;
            float: left;
            line-height: 28px;
            width: 24.7%;
            text-align: center;
            border-left: 1px solid #e0e0e0;
            margin-top: 30px;
            border-sizing: border-box;
            color: #b0b0b0;

            &:first-child {
                border-left: none;
            }

            a {
                color: #b0b0b0;
            }
        }

        .color {
            color: #444;
        }   
    }

    .main {
        background: #f0f0f0;
        padding-bottom: 40px;
        overflow: hidden;
    }

    .banner-area {
        @extend .banner-top;
        margin-bottom: 30px;
    }

    .coupon {
        width: 100%;
        padding: 30px 0;
        overflow: hidden;

        img {
            width: 245px;
            height: 120px;
            vertical-align: top;
            margin-left: 30px;
            float: left;
        }
    }

    .multi-brands {
        width: 100%;
        height: 270px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-top: none;
        font-size: 20px;
        text-align: center;
        padding-top: 25px;
        margin-bottom: 30px;
        overflow: hidden;

        p {
            font-size: 30px;
        }
    }

    .multi-browse {
        margin-top: 50px;
    }

    .brand-img {
        margin-left: 30px;
        width: 140px;
        height: 150px;
        overflow: hidden;
        padding-bottom: 20px;
        float: left;

        p {
            font-size: 18px;
            color: #b0b0b0;
            padding-top: 10px;
            height: 30px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        img {
            height: 120px;
        }
    }

    .spring {
        margin: 0 15px;
        overflow: hidden;

        li {
            width: 50%;
            height: 160px;
            float: left;
            text-align: center;
            list-style: none;
            display: list-item;

            img {
                width: 275px;
                height: 160px;
                border-radius: 10px;
                vertical-align: top;
            }
        }
    }

    .hot-category .floor-header {
        margin: 0;
    }

    .popularity-title, .hot-category .floor-header {
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        border-top: 1px solid #e0e0e0;
        color: #444;
        text-align: center;
        height: 100px;
        line-height: 100px;
        font-size: 30px;
        margin-top: 30px;
        position: relative;
    }

    .hot-category .floor-header {
        border-bottom: none;
    }

    .more {
        position: absolute;
        right: 30px;
        top: 0;
        bottom: 0;
        color: #b0b0b0;
        font-size: 50px;
        font-family: "iconfont" !important;
        font-style: normal;
        text-decoration: none;
    }

    .product-list {
        margin-left: auto;
        margin-right: auto;
        width: 610px;
        overflow: hidden;
        background: #fff;
        border-bottom: 30px solid #f0f0f0;

        li {
            width: 275px;
            height: 368px;
            margin-top: 50px;
            margin-left: 15px;
            margin-right: 15px;
            float: left;
            text-align: center;
            list-style: none;

            img {
                width: 275px;
                height: 368px;
                vertical-align: top;
            }
        }
    }

    .list-price {
        height: 60px;
        background: #aaaeac;
        color: #fff;
        font-size: 22px;
        margin-top: -60px;
        position: relative;
        opacity: 0.9;
        padding-left: 15px;

        p {
            margin: 0;
            line-height: 32px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .red {
        color: red;
    }

    .icon {
        position: relative;
        color: #b0b0b0;

        i {
            position: absolute;
        }

        .up {
            top: -5px;
            left: 8px;
        }

        .down {
            top: 8px;
            left: 8px;
        }
    }
    .product-warp{
        background-color: #fff;
    }
    .goods-container {
        position: relative;
        min-height: 440px;
        /* padding-left: 15px; */
        padding-top: 20px;
        border-bottom: 1px solid #e0e0e0;
    }

    .pos-list {
        border-bottom: 1px solid #e6e6e6;

        li {
            position: relative;
        }

        .default .iconfont,
        .new .iconfont,
        .price .iconfont,
        .discount .iconfont {
            transform: scale(0.8);
            -webkit-transform: scale(0.8);
            font-weight: bold;
        }

        .default:after,
        .newest:after,
        .new:after,
        .price:after,
        .discount:after {
            height: 28px;
            content: '';
            border-left: 1px solid #e0e0e0;
            position: absolute;
            top: 25px;
            left: 163px;
        }
    }

    .discount-area {
        @extend .sale-page;

        #list-nav {
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }

        .list-nav li {
            display: block;
            height: 80px;
            float: left;
            line-height: 80px;
            width: 24.8%;
            text-align: center;
            border-sizing: border-box;
            position: relative;

            span {
                padding-top: 0;
                font-size: 28px;
            }

            &.default:after,
            &.newest:after,
            &.new:after,
            &.price:after,
            &.discount:after {
                height: 28px;
                content: '';
                border-left: 1px solid #e0e0e0;
                position: absolute;
                top: 25px;
                left: 163px;
            }
        }

        .active .cur{
            color: #444;
        }

        .list-nav .icon .up {
            top: -28px;
        }

        .list-nav .icon .down {
            top: -14px;
        }

        .goods-container {
            padding-top: 30px;
            padding-bottom: 100px;
        }
    }

    .search-area {
        @extend .search-page;
    }

    .hide {
        display: none;
    }

    .shop-foot-wrapper {
        position: absolute;
        bottom: 0;
        display: table;
        width: 100%;
        height: 88px;
        line-height: 88px;
        font-size: 28px;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        z-index: 2;


        ul {
            display: table-row;
        }

        li {
            display: table-cell;
            text-align: center;

            .wall {
                width: 0;
                height: 28px;
                margin-top: 30px;
                float: right;
                border-right: 1px solid #e0e0e0;
                display: inline-block;
            }
        }

        .sub-group {
            position: absolute;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            bottom: 104px;
            width: 40%;
            margin-left: 5%;

            dl {
                padding: 0 30px;
                margin: 0 auto;
            }

            dd {
                line-height: 80px;
                text-align: center;
                border-top: 1px solid #e0e0e0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                a {
                    color: #444;
                }
            }

            dd:first-child {
                border-top: 0;
            }
        }

        .sharp {
            position: absolute;
            width: 100%;
            height: 10px;
            background: resolve('product/sharp.png') no-repeat center center;
        }

        .foot-list-3 .sub-group {
            width: 29%;
            margin-left: 2%;
        }
    }

    .bytouch {
        background: #eee;
    }

    .new-arrival {
        padding-top: 30px;
        overflow: hidden;
        padding-left: 15px;
        background: #fff;
        padding-bottom: 100px;
    }

    .popularity {
        padding-top: 30px;
        overflow: hidden;
        padding-left: 15px;
        background: #fff;
        padding-bottom: 100px;
    }

    .pos-list {
        @extend .sale-page;
        background: #fff;
        width: 100%;
        overflow: hidden;

        li {
            display: block;
            height: 78px;
            float: left;
            line-height: 78px;
            width: 24.8%;
            text-align: center;
            border-sizing: border-box;

            span {
                font-size: 28px;
            }

            a {
                display: block;
                box-sizing: border-box;
                text-align: center;
                width: 100%;
                height: 100%;
                color: #b0b0b0;
            }
        }

        .active .cur {
            color: #444;
        }

        .active a {
            color: #444;
        }


        .new .iconfont {
            transform: scale(0.8);
            font-weight: bold;
        }

        .price .iconfont {
            transform: scale(0.8);
            font-weight: bold;
        }

        .filter .iconfont {
            font-size: 22px;
            transition: transform 0.1 ease-in;
        }

        .filter.active .iconfont {
            transform: rotate(-180deg);
        }
    }

    .pos-list .icon .up {
        top: -28px;
    }

    .pos-list .icon .down {
        top: -14px;
    }

    .category-list-top-board {
        border-top: 1px solid #e0e0e0;
    }
    
    .category-list-last-li {
        border-right: 1px solid #e0e0e0;
    }

    .category-list-only-one-row {
        border-top: none!important;
    }

    .new-list {
        width: 100%;
        background-color: #fff;
        font-size: 28px;
        color: #444;
        position: absolute;
        z-index: 102;
        &.classics {
            position: fixed;
            top: 80px;
            left: 0px;
        }
        &.full-height {
            height: 100%;
        }
        li {
            margin-left: 35px;
            height: 88px;
            line-height: 88px;
            border-bottom: 1px solid #e0e0e0;
            padding-right: 38px;

            &:last-child {
                border-bottom: none;
            }

            &.active {
                background: resolve('product/shop/check.png') no-repeat 94% center;
                background-size: 36px 26px;
            }
        }
    }

    .no-result {
        margin-top: 320px;
        color: #ccc;
        vertical-align: middle;
        text-align: center;
        font-size: 1.2em;
    }
}

.shop-index + .filter-mask {
    margin-top: 1px;
    z-index: 101;

    .filter-body {
        overflow: auto;
    }

    .classify {
        height: auto;
    }

    &.call-by-fix {
        top: 78px;
    }
}
.new-shop + .filter-mask {
    margin-top: initial;
    position: fixed;
    top: 46px;
    
    &.call-by-fix {
        top: 80px;
        position: fixed;
        left: 0;
    }
}