$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 {
                @include flexbox((
                    display: box,
                    box-lines: multiple,
                    box-pack: start
                ), $version: 1);
                @include flexbox((
                    display: flex,
                    flex-wrap: wrap,
                    justify-content: flex-start
                ));
                width: 100%;
                .column {
                    box-sizing: border-box;
                    //padding: pxToRem(20px) pxToRem(12px);
                    padding: pxToRem(6px) 3%;
                    width: 49.9%;
                    border: 1px solid #fff;
                    font-size: pxToRem(24px);
                    background-color: $tableCellC;
                    word-wrap: break-word;
                    @include flexbox((
                        box-flex: 1.0,
                        display: box,
                        box-align: center
                    ), $version: 1);
                    @include flexbox((
                        display: flex,
                        align-items: center,
                        flex-basis: 49.9%
                    ))
                }
                .oldbox{
                    padding: pxToRem(6px) 3%;
                    width: 49.9%;
                    background-color: $tableCellC;
                    box-sizing: border-box;
                    border: 1px solid #fff;
                    width: 49.9%;
                    height: 100%;
                    float: left;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    overflow:hidden;
                }
            }
        }
    }

    .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);
        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: 28px;
            // position: relative;
            // vertical-align: middle;
            padding:1px 5px;
        }
        .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;
        }
        .yohood-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-single{
        margin:0 auto;
        overflow: hidden;
        img{
           width: pxToRem(448px);
           margin-top:pxToRem(30px);
           margin-bottom:pxToRem(30px);
        }
    }
    .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);
        overflow: hidden;
        ul {
            position: relative;
            height: auto;
            li {
                float: left;
            }
        }
    }
    .goodsName {
        box-sizing: border-box;
        width: 100%;
        min-height: pxToRem(88px);
        font-size: pxToRem(28px);
        color: #fff;
        padding-left: pxToRem(28px);
        padding-right: pxToRem(28px);
        line-height: pxToRem(36px);
        background-color: #515150;
    }
    .goodsSubtitle {
        // display: table;
        height: pxToRem(88px);
        font-size: pxToRem(24px);
        color: $subFontC;
        padding-left: pxToRem(28px);
        padding-right: pxToRem(28px);
        border-bottom: 1px solid $borderC;
        background-color: $pageBgC;
        display: flex;
        align-items: center;
        span{
            // display: table-cell;
            display: -webkit-box;
            line-height: pxToRem(36px);
            margin: 0;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
    .price-date {
        // width: 100%;
        color: $subFontC;
        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 {
        // 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;
            &.current-level{
                .vip-price{
                    color:#d0021b;
                }
            }
            span {
                vertical-align: middle;
                display: inline-block;
                line-height: pxToRem(88px);
                padding-left: pxToRem(8px);
            }
            .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;
        }
    }
    .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);
            &.hide{
                display: none;
            }
        }
    }
    // .recommend-for-you {
    //     margin-bottom: pxToRem(30px);
    // }
    .yoho-tip{
        top:40%;
    }
}

@import "comments-consults";
@import "product-description";