$pageBgC:#f0f0f0;
$mainFontC:#444444;
$subFontC:#b0b0b0;
$borderC:#e0e0e0;
$tableCellC:#eee;
$basicBtnC:#eb0313;

.good-detail-page {
    overflow: hidden;
    background-color: #f0f0f0;
    .page-block {
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;
        border-bottom: 1px solid $borderC;
        border-top: 1px solid $borderC;
        padding: 0 pxToRem(28px);
        margin-bottom: pxToRem(30px);
        >.title {
            line-height: pxToRem(88px);
            color: $mainFontC;
            font-size: pxToRem(28px);
            border-bottom: 1px solid $borderC;
            span {
                color: #a0a0a0;
                font-size: pxToRem(18px);
            }
        }
        .detail {
            margin-top: pxToRem(20px);
            margin-bottom: pxToRem(20px);
            font-size: pxToRem(24px);
            line-height: pxToRem(36px);
            &.table {
                width: 100%;
                // .row {
                //     display: table-row;
                .column {
                    box-sizing: border-box;
                    display: table-cell;
                    padding: pxToRem(16px) pxToRem(12px);
                    width: 50%;
                    border-bottom: 1px solid #fff;
                    border-right: 1px solid #fff;
                    font-size: pxToRem(24px);
                    background-color: $tableCellC;
                    float: left;
                    // &:nth-child(even) {
                    //     border-right: none;
                    // }
                }
            }
        }
    }

    .my-swiper-button-prev,
    .my-swiper-button-next {
        position: absolute;
        top: 50%;
        width: pxToRem(48px);
        height: pxToRem(48px);
        margin-top: pxToRem(-44px);
        cursor: pointer;
        -moz-background-size: pxToRem(48px) pxToRem(48px);
        -webkit-background-size: pxToRem(48px) pxToRem(48px);
        background-size: pxToRem(48px) pxToRem(48px);
        background-position: center;
        background-repeat: no-repeat;
        &.swiper-button-disabled{
            opacity: .3;
        }
    }

    .next-grey {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23a0a0a0'%2F%3E%3C%2Fsvg%3E");
        right: pxToRem(30px);
        left: auto;
    }

    .prev-grey {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23a0a0a0'%2F%3E%3C%2Fsvg%3E");
        left: pxToRem(30px);
        right: auto;
    }


    .tag-container {
        position: absolute;
        left: pxToRem(108px);
        top: pxToRem(40px);
        height: pxToRem(35px);
        // width: pxToRem(70px);
        color: #fff;
        font-size: pxToRem(20px);
        line-height: pxToRem(35px);
        z-index: 2;
        .good-tag {
            display: inline-block;
            box-sizing: border-box;
            margin-left: .5px;
            font-size: pxToRem(18px);
            text-align: center;
            line-height: pxToRem(30px);
            padding: 0 8px;
        }
        .new-tag {
            background-color: #78dc7e;
            color: #fff;
        }
        .renew-tag {
            background-color: #78dc7e;
            color: #fff;
        }
        .sale-tag {
            background-color: #ff575c;
            color: #fff;
        }
        .new-festival-tag {
            background-color: #000;
            color: #fff;
        }
        .limit-tag {
            border: 1px solid #000;
            background-color: #fff;
            color: #000;
        }
        .soonSoldOut-tag {
            background-color: #ffac5b;
            color: #fff;
        }
    }

    .banner-container {
        position: relative;
        background-color: #fff;
        // overflow: hidden;
    }
    .banner-top {
        // width: 100%;
        min-height: 660rem / $pxConvertRem;
        overflow: hidden;
        position: relative;
        .swiper-pagination {
            position: absolute;
            z-index: 2;
            bottom: pxToRem(40px);
            .pagination-inner {
                span {
                    background-color: #b0b0b0;
                }
                .swiper-pagination-bullet {
                    margin-right: 2px;
                }
                .swiper-pagination-bullet-active {
                    background-color: #000;
                }
            }
        }
    }
    .banner-swiper {
        min-height: pxToRem(600px);
        min-width: pxToRem(448px);
        margin: pxToRem(30px) pxToRem(96px);
        // position: relative;
        overflow: hidden;
        ul {
            position: relative;
            height: 100%;
            li {
                float: left;
                // height: 100%;
            }
        }
    }
    .goodsName {
        box-sizing: border-box;
        width: 100%;
        min-height: pxToRem(83px);
        font-size: pxToRem(28px);
        color: #fff;
        padding-left: pxToRem(25px);
        padding-right: pxToRem(25px);
        line-height: pxToRem(36px);
        background-color: #515150;
    }
    .goodsSubtitle {
        min-height: pxToRem(87px);
        font-size: pxToRem(24px);
        line-height: pxToRem(36px);
        color: $subFontC;
        padding-left: pxToRem(28px);
        padding-right: pxToRem(28px);
        border-bottom: 1px solid $borderC;
        background-color: #f4f4f4;
    }
    .price-date {
        // width: 100%;
        color: $subFontC;
        min-height: pxToRem(88px);
        padding-left: pxToRem(28px);
        padding-right: pxToRem(28px);
        background-color: #fff;
        border-bottom: 1px solid $borderC;
    }
    .goodsPrice {
        float: left;
        font-size: pxToRem(34.59px);
        h1 {
            display: inline-block;
            line-height: pxToRem(88px);
        }
        .currentPrice {
            color: #d0021b;
            margin-right: pxToRem(10px);
        }
        .previousPrice {
            text-decoration: line-through;
        }
    }
    .periodOfMarket {
        font-size: pxToRem(24px);
        float: right;
        color: #d0021b;
        h1 {
            display: inline-block;
            line-height: pxToRem(88px);
        }
    }
    .goodsName,
    .goodsSubtitle {
        // width: 100%;
        display: table;
        span {
            display: table-cell;
            vertical-align: middle;
        }
    }
    .vip-level {
        box-sizing: box-border;
        padding-left: pxToRem(28px);
        padding-right: pxToRem(28px);
        min-height: pxToRem(88px);
        background-color: #fff;
        font-size: pxToRem(22px);
        color: #999999;
        border-bottom: 1px solid $borderC;
        .icons-item {
            float: left;
            width: 33.3%;
            height: pxToRem(88px);
            margin: 0;
            span {
                vertical-align: middle;
                display: inline-block;
                line-height: pxToRem(88px);
            }
            .vip-img {
                width: pxToRem(53px);
                height: pxToRem(32px);
            }
            &:nth-child(1) {
                text-align: left;
                .vip-img {
                    background: image-url('product/silver.png') no-repeat;
                }
            }
            &:nth-child(2) {
                .vip-img {
                    background: image-url('product/golden.png') no-repeat;
                }
            }
            &:nth-child(3) {
                text-align: right;
                .vip-img {
                    background: image-url('product/platinum.png') no-repeat;
                }
            }
        }
    }
    .goodsDiscount {
        font-size: pxToRem(28px);
        color: $mainFontC;
        background-color: #fff;
        border-bottom: 1px solid $borderC;
        h1 {
            padding: pxToRem(30px) pxToRem(28px);
            line-height: pxToRem(36px);
            // line-height: pxToRem(88px);
        }
        .iconfont {
            display: inline-block;
            width: pxToRem(35px);
            font-size: pxToRem(45px);
            float: right;
            color: #e0e0e0;
            // padding-left:pxToRem(50px);
        }
        .discount-folder {
            .folder-item {
                border-top: 1px solid $borderC;
            }
            display: none;
        }
    }
    .goodsSubtitle,
    .goodsDiscount {
        text-indent: pxToRem(-14px);
    }
    .enter-store {
        min-height: pxToRem(100px);
        display: table;
        background-color: #fff;
        a {
            display: table-cell;
            vertical-align: middle;
            text-align: left;
        }
        .store-logo {
            // padding-right: 35rem/$pxConvertRem;
            img {
                width: auto;
                height: pxToRem(68px);
                margin-left: 0;
                margin-right: pxToRem(-25px);
            }
        }
        .store-name {
            font-size: pxToRem(34px);
            color: $mainFontC;
        }
        .store-link {
            font-size: pxToRem(28px);
            color: $subFontC;
            text-align: right;
            span {
                font-size: inherit;
            }
        }
    }
    //底部固定栏
    .cart-bar {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: pxToRem(120px);
        position: fixed;
        bottom: 0;
        background-color: #fff;
        z-index: 2;
        padding: pxToRem(20px) pxToRem(28px);
        text-align: center;
        a {
            display: inline-block;
            &.num-incart {
                font-size: pxToRem(47px);
                color: #444;
            }
            &.favorite {
                font-size: pxToRem(34px);
                color: #ccc
            }
            &.favorite.liked {
                color: $basicBtnC;
                ;
            }
            &.addto-cart,
            &.sold-out {
                height: pxToRem(80px);
                width: pxToRem(260px);
                margin: 0 pxToRem(100px) 0 pxToRem(115px);
                color: #fff;
                background-color: $basicBtnC;
                font-size: pxToRem(40px);
                line-height: pxToRem(80px);
                text-align: center;
            }
            &.sold-out {
                background-color: #f58189;
            }
        }
        .num-tag {
            position: absolute;
            left: pxToRem(66px);
            height: pxToRem(20px);
            display: block;
            width: pxToRem(36px);
            height: pxToRem(36px);
            background-color: $basicBtnC;
            border-radius: 50%;
            color: #fff;
            font-size: pxToRem(24px);
        }
    }
    // .recommend-for-you {
    //     margin-bottom: pxToRem(30px);
    // }
}
.bottom-blank{
    height: pxToRem(120px);
}
@import "comments-consults";
@import "product-description";