/*
 * @Author: Targaryen
 * @Date: 2017-03-23 17:12:53
 * @Last Modified by: Targaryen
 * @Last Modified time: 2017-04-25 15:54:23
 */
// 红人店铺首页

/* 标题 */
.reds-shop .red-shop-index {
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

    .section-header {
        font-size: 32px;
        font-weight: bold;
        color: #444;
        line-height: 80px;
        padding-right: 30px;
        padding-left: 30px;
        background-color: #f0f0f0;
    }

    .section-title {
        font-size: 32px;
        text-align: center;
    }

    .section-more {
        font-size: 40px;
        color: #a9a9a9;
        float: right;
        margin-top: -82px;
    }

    .item {
        position: relative;
    }

    .item-pic {
        width: 100%;
    }

    .item-info {
        position: absolute;
        bottom: 0;
        width: 100%;
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;

        .market-price {
            color: #e01;
        }
    }

    .items-s1 {
        position: relative;
        background-color: #fff;

        .item-info {
            padding: 12px;
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .item-info > div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 2px 0;
        }
    }

    .items-s2 {
        font-size: 24px;
        position: relative;

        .item {
            width: 50%;
            height: 375px;
            float: left;
            overflow: hidden;
        }

        .item-info {
            padding: 12px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .item-info > div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 2px 0;
        }
    }

    /* 一大二小三张图片 */
    .items-3-2 {
        width: 100%;
        font-size: 18px;
        overflow: hidden;

        .item {
            width: 50%;
            height: 234px;
        }

        .item-info {
            padding: 16px;
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.3);

            .name {
                float: left;
                width: 65%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .price {
                text-align: right;
                float: right;
                width: 35%;
            }
        }
    }

    /* 左大右小三张图片 */
    .items-3-2-left .item {
        float: left;

        &:first-child {
            height: 468px;
        }

        &:nth-child(2) {
            background-color: #f5f7f6;

            img {
                width: auto;
                height: 100%;
            }
        }

        &:nth-child(3) {
            background-color: #f5f7f6;

            img {
                width: auto;
                height: 100%;
            }
        }
    }

    /* 左小右大三张图片 */
    .items-3-2-right .item {
        &:nth-child(1) {
            background-color: #f5f7f6;

            img {
                width: auto;
                height: 100%;
            }
        }

        &:nth-child(2) {
            background-color: #f5f7f6;

            img {
                width: auto;
                height: 100%;
            }
        }

        &:last-child {
            float: right;
            margin-top: -468px;
            height: 468px;
        }
    }

    /* 三张图 */
    .items-3-3 {
        overflow: hidden;
        font-size: 18px;
        width: 100%;

        .item {
            float: left;
            width: 33.3333333333%;
            height: 333px;
        }

        .item-info {
            padding: 12px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .item-info > div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 2px 0;
        }

        &.items-small {
            .name {
                display: none;
            }
        }
    }

    /* 四张小图 */
    .items-s4 {
        border-bottom: 1px solid #e0e0e0;

        .item {
            float: left;
            width: 25%;
            border-top: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
        }

        .item:last-child {
            border-right: none;
        }

        .item-info {
            text-align: center;
            background-color: #f5f7f6;
            color: #000;
            position: relative;

            .text {
                line-height: 36px;
            }

            .name,
            .price {
                display: none;
            }
        }
    }

    .items-small {
        .item {
            height: 250px;
        }
    }

    .items-c2 {
        overflow: hidden;
        font-size: 20px;

        .item {
            float: left;
            width: 50%;
            height: 375px;
        }

        .item-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3);
        }
    }

    .index-goods-container {
        position: relative;
        min-height: auto !important;
        padding-left: 0.375rem;
        padding-top: 0.2rem;
        display: inline-block;
    }

    .shop-coupon {
        background-color: #f0f0f0;
    }

    .shop-swiper {
        position: relative;
        width: 750px;
        height: 234px;
        overflow: hidden;

        ul {
            width: 100%;
        }
    }

    .shop-video {
        .video-player {
            height: 363px;
        }

        .video-intro {
            padding: 30px;
        }

        .video-title {
            font-size: 36px;
            color: #444;
            margin-bottom: 30px;
        }

        .video-desc {
            font-size: 28px;
            color: #444;
        }

        .video-poster {
            position: relative;
            height: 363px;
            color: #fff;
        }

        .video-meta-customers {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 24px;
            padding: 10px 20px;
            border-radius: 50px;
            background-color: rgba(0, 0, 0, 0.3);
        }
    }

    .shop-item-div {
        height: 30px;
        background-color: #f0f0f0;
    }

    .margin-bottom {
        width: 100%;
        height: 20px;
        background-color: #f0f0f0;
    }

    .all-goods {
        height: 80px;
        line-height: 80px;
        text-align: center;
        margin-bottom: 80px;
        border-top: 1px solid #e0e0e0;
    }
}