page {
    background-color: #eeeeee;
}

.cont {
    width: 100%;
    overflow: hidden;
}


/* 卡券权益 */
.contBack {
    position: relative;
    width: 200%;
    height: 340rpx;
    left: -50%;
    text-align: center;
    background: #000000;
    border-radius: 0 0 100% 100%;
    overflow: hidden;
}

/* .contBack::after {
    width: 100%;
    height: 30rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    content: '';
    background-image: linear-gradient(transparent, rgba(0,0,0,.25));
} */

.classBack {
    position: absolute;
    left: 28%;
    right: 30%;
    width: 44%;
    top: 40rpx;
}

.classCircle {
    position: relative;
}

.classCircle::after,
.contBack::before {
    position: absolute;
    border-radius: 50%;
    content: '';
    z-index: 1;
    background-color: rgba(255,255,255,.1);
}

.classCircle::after {
    left: 20%;
    top: -20rpx;
    width: 260rpx;
    height: 260rpx;
}

.contBack::before {
    right: 20%;
    top: 55%;
    width: 300rpx;
    height: 300rpx;
}

.rightsCont {
    position: absolute;
    z-index: 3;
    left: calc(28% - 2rpx);
    right: calc(30% - 2rpx);
    width: calc(44% + 4rpx);
    top: 50rpx;
}

.rightsCont-btn {
    background: rgba(255, 255, 0255, .4);
    width: 100%;
    line-height: 70rpx;
    font-size: 40rpx;
    font-weight: 600;
    color: #000000;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.rightsCont-tips {
    color: #fff;
}

.rightsNumber {
    background-color: #ffffff;
    position: relative;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
}

.rightsGoods-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
}

.rightsGoods {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 80rpx 40rpx 0 270rpx;
    box-sizing: border-box;
}

.rightsGoods-text {
    margin-bottom: 40rpx;
    font-weight: 600;
}

.rightsGoods-price {
    display: flex;
}

.rightsGoods-number {
    flex: 1;
    font-size: 34rpx;
}

.rightsGoods-number>text {
    font-size: 28rpx;
}

.rightsAdd {
    display: flex;
}

.rightsAdd-btn {
    border-radius: 4rpx;
    text-align: center;
    width: 50rpx;
    height: 50rpx;
    line-height: 45rpx;
    font-size: 40rpx;
    font-weight: 600;
}

.rightsAdd-remove {
    background: #f8f8f8;
    color: #d9d9d9;
}

.rightsAdd-remove.active,
.rightsAdd-plus {
    background: #e8e4e5;
    color: #6b6768;
}

.rightsAdd-input {
    width: 100rpx;
    text-align: center;
    font-size: 28rpx;
    line-height: 50rpx;
}

.rightsTips {
    padding: 0 30rpx;
    color: #ff5b5d;
    font-size: 28rpx;
    font-weight: 600;
}

.rightsList,
.notice,
.detailsStore {
    background: white;
    border-radius: 10rpx;
    padding: 10rpx 0;
    margin-top: 20rpx;
    box-sizing: border-box;
}

.rightsLabel,
.rightsLabel-pay {
    display: flex;
    padding: 20rpx 40rpx;
    color: #6c6c6c;
    font-weight: 600;
    font-size: 30rpx;
}

.rightsLabel .rightsLabel-left {
    flex: 1;
    color: #747d86;
}

.rightsLabel .rightsLabel-icon {
    width: 70rpx;
    height: 70rpx;
    margin-top: 14rpx;
}

.rightsLabel-address .rightsLabel-right {
    width: calc(100% - 90rpx);
    margin-left: 20rpx;
    color: #000000;
}

.rightsLabel-address .rightsLabel-row {
    margin-top: 30rpx;
}

.rightsLabel-address-name {
    display: flex;
    font-size: 32rpx;
    margin-bottom: 10rpx;
}

.rightsLabel-address-tel {
    padding-left: 30rpx;
    color: #959595;
}

.rightsLabel-freight {
    color: #000000;
}

.rightsLabel-black {
    padding-top: 30rpx;
}

.rightsLabel-range {
    display: flex;
    color: #000;
    font-weight: 600;
}

.rightsLabel-row {
    width: 42rpx;
    height: 42rpx;
    margin: 0 0 0 6rpx;
}

.rightsLabel-black .rightsLabel-right,
.rightsLabel-red {
    color: #ff5b5d;
    font-weight: 600;
    font-size: 32rpx;
}

.rightsLabel-black .rightsLabel-left {
    color: #000;
}

.rightsLabel-score {
    font-weight: 600;
    color: #000;
    font-size: 38rpx;
}

.rightsLabel-pay {
    color: #000;
}

.rightsLabel-pay .rightsLabel-left {
    flex: 1;
}

.notice {
    padding: 20rpx 30rpx;
}

.noticeTitle {
    display: flex;
}

.noticeTitle-flex {
    flex: 1;
    display: flex;
    font-size: 30rpx;
    line-height: 46rpx;
}

.noticeTitle-img {
    width: 46rpx;
    height: 46rpx;
    margin-right: 20rpx;
}

.noticeText {
    font-size: 26rpx;
    height: 0;
    overflow: hidden;
}

.noticeText.active {
    height: auto;
}

.noticeText-top {
    margin: 30rpx 0 10rpx;
    font-weight: 600;
}

.noticeText-cont {
    line-height: 60rpx;
}

.noticeTitle-row {
    width: 46rpx;
    height: 46rpx;
}

.noticeTitle-row.active {
    transform: rotate(90deg);
}

/* 门店 */
.detailsStore {
    padding: 20rpx;
}

.detailsStore-top {
    display: flex;
    line-height: 30rpx;
    margin-bottom: 20rpx;
}

.detailsStore-see {
    color: #dfae2e;
    border: 2rpx solid #dfae2e;
    border-radius: 10rpx;
    font-size: 28rpx;
    margin-top: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
}

.detailsStore-see text {
    display: inline-block;
}

.detailsStore-see image {
    width: 50rpx;
    height: 50rpx;
    margin-left: 10rpx;
}

/* 购买按钮 */
.rightsBtn,
.newrightsBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    z-index: 9;
    background: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
}

.rightsBtn button,
.rightsBtn text {
    display: block;
    margin: 12rpx 30rpx;
    width: calc(100% - 60rpx) !important;
    height: 74rpx !important;
    line-height: 74rpx !important;
    padding: 0;
    background: #eacf88;
    text-align: center;
    border-radius: 60rpx;
    font-size: 30rpx;
}

.rightsBtn-text {
    flex: 1;
    font-weight: 600;
    font-size: 30rpx;
}

.rightsBtn-text-num {
    font-size: 30rpx;
    margin-bottom: 10rpx;
}

.rightsBtn-text text {
    font-size: 38rpx;
    color: #fe2d55;
}

.newrightsBtn button {
    width: 280rpx !important;
    background-color: #000000;
    color: #ffffff;
    border-radius: 80rpx;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0;
    margin: 0;
}


.rightsBtn.active text {
    background: #dedede;
    color: #888;
}

/* 选择收货地址 */
.addressBack {
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 10;
    width: 100%;
    height: 100%;
    display: none;
}

.addressBack.active {
    display: block;
}

.addressCont {
    position: fixed;
    left: 0;
    bottom: -1000%;
    transition: .2s;
    background: #fff;
    z-index: 11;
    width: 100%;
}

.addressCont.active {
    bottom: 0;
}

.addressCont-title {
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    padding: 0 30rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    font-weight: 600;
}

.addressCont-left {
    flex: 1;
}

.addressCont-right {
    color: #309ded;
}

.header-classify {
    white-space: nowrap;
    box-sizing: border-box;
    height: 600rpx;
}

.addressCont-list {
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    font-size: 30rpx;
    overflow: hidden;
    position: relative;
}

.addressCont-top {
    display: flex;
    margin-bottom: 10rpx;
}

.addressCont-name {
    font-weight: 600;
}

.addressCont-text {
    color: #666;
    width: calc(100% - 160rpx);
}

.addressCont-list:last-child {
    border: none;
}

.rightsLabel-address {
    display: flex;
    position: relative;
    margin: 10rpx 0;
    padding: 25rpx 40rpx;
}

.rightsLabel-address::after,
.rightsLabel-address::before {
    position: absolute;
    content: '';
    left: 30rpx;
    width: calc(100% - 60rpx);
    height: 2rpx;
    background-color: #bfbfbf;
}

.rightsLabel-address::after {
    top: 0;
}

.rightsLabel-address::before {
    bottom: 0;
}

.rightsLabel-address text {
    display: inline-block;
    width: calc(100% - 46rpx);
}

.rightsLabel-address .rightsLabel-right {
    display: flex;
    font-size: 28rpx;
}

.rightsLabel-address-text {
    flex: 1;
}

.address-tool {
    display: flex;
    float: right;
}

.address-tool-btn {
    font-size: 24rpx;
    margin-top: 20rpx;
    border: 2rpx solid #666;
    color: #666;
    border-radius: 6rpx;
    text-align: center;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 20rpx;
    margin-right: 20rpx;
    display: flex;
}

.address-tool-btn-del {
    color: #dfae2e;
    border-color: #dfae2e;
}

.address-tool-icon {
    width: 120rpx;
    height: 54rpx;
    line-height: 54rpx;
    border-radius: 4rpx;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 45rpx;
    right: 10rpx;
    background: #dfae2e;
    transform: scale(.9, .9);
    font-size: 24rpx;
}

.rightsPoint {
    position: fixed;
    left: 0;
    bottom: 160rpx;
    background: #eeeeee;
    z-index: 9;
    width: 100%;
    padding: 20rpx 20rpx 10rpx;
    box-sizing: border-box;
}

.rightsPoint-cont {
    width: 100%;
    background: #eeeeee;
    border-radius: 10rpx;
    position: relative;
    max-height: 50vh;
    overflow-y: scroll;
}

.rightsPoint-top {
    font-size: 28rpx;
    display: flex;
    padding: 0 20rpx 20rpx;
    box-sizing: border-box;
    font-weight: 600;
}

.rightsPoint-top image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
}

.rightsPoint-text {
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    line-height: 44rpx;
    height: 90rpx;
    transition: height 25s;
    overflow: hidden;
}

.rightsPoint-text.active {
    height: auto;
    transition: 2s;
}

.rightsPoint-text view {
    position: relative;
    padding-left: 40rpx;
}

.rightsPoint-text view::after {
    position: absolute;
    content: '';
    left: 10rpx;
    top: 20rpx;
    background: #000;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
}

.rightsPoint-bolck {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 40rpx);
}

.pointMore {
    text-align: center;
    width: 100%;
    background: #eeeeee;
    height: 80rpx;
    line-height: 82rpx;
    position: relative;
    margin-top: 10rpx;
}

.pointMore::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 2rpx;
    background: #f2ecde;
}

.pointMore text {
    font-size: 28rpx;
    color: #c38e00;
    animation: dong 1.8s infinite;
    display: inline-block;
}

.pointMore image {
    width: 30rpx;
    height: 30rpx;
    margin-left: 4rpx;
    vertical-align: -4rpx;
    animation: dong 1.8s infinite;
}

@keyframes dong {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -6rpx);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

.webBack {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    text-align: center;
    display: none;
}

.webBack.active {
    display: block;
}

.welfareCont-top{
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    margin: 50rpx 0 20rpx;
    height: 120rpx;
}

.welfareCont-list-img {
    border-radius: 50%;
    width: 120rpx;
    height: 120rpx;
    display: inline-block;
    margin: 0 15rpx;
    overflow: hidden;
}

.welfareCont-list-img image {
    width: 100%;
    height: 100%;
}