.goods-specs-panel {
    width: 90% !important;
    background: #fff;
    border-radius: .4rem;
    padding: 0 0 .7rem 0;
    position: absolute;
    z-index: 7;
}

.goods-specs-close {
    width: 1.2rem;
    height: 1.2rem;
    background: url(../images/shop/close.png) no-repeat 0 0;
    background-size: 1.2rem;
    position: absolute;
    right: -.4rem;
    top: -.4rem;
    z-index: 9;
}

.goods-images {
    overflow: hidden;
    position: relative;
}

.goods-images .swiper-slide img {
    border-radius: .4rem .4rem 0 0;
    display: block;
    width: 100%;
    height: 7rem;
    object-fit: cover;
}

.goods-images .swiper-pagination {
    position: absolute;
    bottom: .5rem;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

.goods-images .swiper-pagination .goods-index-item {
    display: table;
    margin: auto;
}

.goods-images .swiper-pagination .goods-index-item .item {
    float: left;
    width: .35rem;
    height: .35rem;
    margin: 0 .3rem 0 0;
    position: relative;
}

.goods-images .swiper-pagination .goods-index-item .current::after {
    background: #ff597f !important;
    opacity: 1;
    content: '';
    position: absolute;
    width: .3rem;
    height: .3rem;
    border-radius: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.goods-images .swiper-pagination .goods-index-item .item::after {
    content: '';
    position: absolute;
    width: .3rem;
    height: .3rem;
    border-radius: 100%;
    background: #FFFFFF;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.goods-content {
    margin: .5rem;
    display: flex;
    flex-direction: column;
    color: #999;
    overflow: auto;
    height: 40%;
}

.goods-content .title {
    font-size: .7rem;
    color: #343434;
    font-weight: bold;
    margin-bottom: .3rem;
}

.goods-content .tags {
    display: flex;
    margin-bottom: .2rem;
    /*overflow: hidden;*/
    flex-wrap: wrap;
}

.goods-content .tags .tag {
    border-radius: .2rem;
    font-size: .4rem;
    max-width: 40%;
    padding: .2rem .4rem;
    margin-right: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(255, 89, 127);
    background: rgba(249, 91, 132, 0.2);
}

.goods-content .desc-title {
    margin: .3rem 0;
}

.goods-content .desc-content {
    line-height: 1.7;
    margin-bottom: .5rem;
}

.goods-content .materials .group-name {
    padding: .3rem 0;
    font-size: .5rem;
}

.goods-content .materials .values {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.goods-content .materials .values .selected {
    background-color: rgb(255, 89, 127) !important;
    color: #ffffff;
}

.goods-content .materials .values .val {
    background-color: #f5f5f7;
    padding: .2rem .6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: .3rem;
    margin-bottom: .3rem;
    border-radius: .2rem;
}

.bottom-box {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid rgba(200, 199, 204, 0.3);
    background-color: #ffffff;
    z-index: 11;
}

.bottom-box .price-and-materials .price {
    font-size: .8rem;
    margin-bottom: .2rem;
    color: rgb(255, 89, 127);
    font-weight: bold !important;
}

.bottom-box .price-and-materials .materials {
    font-size: .5rem;
    color: #999;
    margin-bottom: 1rem;
}

.bottom-box .confirm-btn {
    width: 80%;
    height: 1.6rem;
    background: rgb(255, 89, 127);
    font-size: .5rem;
    line-height: 1.6rem;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    border-radius: .5rem;
}