.shop-index {

    .branner-top {
        width: 100%;
        height: 200rem / $pxConvertRem;
        position: relative;
        overflow: hidden;
    }

    .collect {
        width: 128rem / $pxConvertRem;
        height: 50rem / $pxConvertRem;
        position: absolute;
        bottom: 30rem / $pxConvertRem;
        right: 30rem / $pxConvertRem;
        border-radius: 10rem / $pxConvertRem; 
        text-align: center;
        background: image-url('product/collect.png') no-repeat;
        background-size: contain;
    }

    .nav {
        width: 100%;
        height: 88rem / $pxConvertRem;
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        list-style: none;
        font-size: 0.7rem;
        background: #fff;
        overflow: hidden;
        border-sizing: border-box;
        border-bottom: 1px solid #e1e1e1;
             
        li{
            display: block;
            height: 28rem /$pxConvertRem;
            float: left;
            line-height: 28rem /$pxConvertRem;
            width: 24%;
            text-align: center;
            border-left: 1px solid #e1e1e1;
            margin-top: 30rem / $pxConvertRem;
            border-sizing: border-box;

            &:first-child {
                border-left: none;
                // color: #b1b1b1;
            }
        }

        a {
            color: #b1b1b1;
        }    
    }

    .main {
        background: #f0f0f0;
        padding-bottom: 1rem;
        overflow: hidden;
    }

    .hide {
        display: hidden;
    }

    .coupon {
        width: 100%;
        padding: 30rem / $pxConvertRem 0;
        overflow: hidden;

        img {
            width: 245rem / $pxConvertRem;
            height: 120rem / $pxConvertRem;
            vertical-align: top;
            margin-left: 30rem / $pxConvertRem;
            float: left;
        }
    }

    .multi-brands {
        width: 100%;
        height: 260rem / $pxConvertRem;
        background: #fff;
        border: 1px solid #e1e1e1;
        font-size: 20px;
        text-align: center;
        padding-top: 25rem / $pxConvertRem;  
    }

    .brand-img {
        margin-top: 65rem / $pxConvertRem;
        overflow: hidden;

        img {
            // width: 130rem / $pxConvertRem; 
            // height: 110rem / $pxConvertRem;
            float: left;
            margin-left: 30rem / $pxConvertRem;

        }

    }

    .centerimg {
        margin-top: 30rem / $pxConvertRem;
    }

    .spring {
        margin: 0;
        overflow: hidden;
        padding: 30rem / $pxConvertRem 0;

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

            img {
                width: 90%;
                border-radius: 10px;
                vertical-align: top;
            }
        }
    }

    .title {
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        text-align: center;
        line-height: 98rem / $pxConvertRem;
        font-size: 0.8rem;
        margin-top: 1rem;
        position: relative;
    }

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

    .product-list {
        margin: 0;
        padding: 0 0 30rem / $pxConvertRem 30rem / $pxConvertRem;
        overflow: hidden;
        background: #fff;

        li {
            width: 275rem / $pxConvertRem;
            height: 368rem / $pxConvertRem;
            margin-top: 50rem / $pxConvertRem;
            margin-right: 30rem / $pxConvertRem;
            float: left;
            text-align: center;
            list-style: none;

            img {
                width: 100%;
                vertical-align: top;
            }
        }
    }

    .list-price {
        height: 60rem / $pxConvertRem;
        background: #ABACAC;
        color: #FFFFFF;
        font-size: 22rem / $pxConvertRem;
        margin-top: -60rem / $pxConvertRem;
        position: relative;
        opacity: 0.7;
        padding-left: 15rem / $pxConvertRem;

        p {
            margin: 0;
            line-height: 32rem / $pxConvertRem;
            text-align: left;
        }
    }

    .red {
        color: red;
    }

    .icon {
        position: relative;

        i {
            position: absolute;
        }

        .up {
            top: -5rem / $pxConvertRem;
            left: 8rem / $pxConvertRem;
        }

        .down {
            top: 8rem / $pxConvertRem;
            left: 8rem / $pxConvertRem;
        }
    }

    .iconfont {
        color: #b1b1b1;
    }

    .cur {
        color: #000;
    }

    .goods-container {
        position: relative;
        min-height: 440px;
        padding-left: 0.375rem;
        padding-top: 20rem / $pxConvertRem;
        border-bottom: 1px solid #e0e0e0;
    }

    .fotter {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 3;
        width: 100%;
        height: 88rem / $pxConvertRem;
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        list-style: none;
        font-size: 0.7rem;
        background: #fff;
        overflow: hidden;
        border-sizing: border-box;
        border-top: 1px solid #e1e1e1;
        
        li{
            display: block;
            height: 28rem /$pxConvertRem;
            float: left;
            line-height: 28rem /$pxConvertRem;
            width: 49%;
            text-align: center;
            border-left: 1px solid #e1e1e1;
            margin-top: 30rem / $pxConvertRem;
            border-sizing: border-box;

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

    .list {
        padding-top: 30rem / $pxConvertRem;
        padding-left: 15rem / $pxConvertRem;
        background: #fff; 
    }    

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

        .list-nav li {
             display: block;
             height: 28rem /$pxConvertRem;
             float: left;
             line-height: 28rem /$pxConvertRem;
             width: 24%;
             text-align: center;
             border-left: 1px solid #e1e1e1;
             margin-top: 30rem / $pxConvertRem;
             margin-bottom: 30rem / $pxConvertRem;
             border-sizing: border-box;

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

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

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

        .goods-container {
            padding-top: 30rem / $pxConvertRem;
            padding-bottom: 100rem / $pxConvertRem;
        }
    }

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