.page {
    padding-bottom: 166rpx;
}

.card-swiper {
    width: 100%;
    height: 440rpx;
    background: #fff;
}

.card-swiper swiper {
    width: 100%;
    height: 100%;
}

.clubcard {
    width: 95%;
    height: 320rpx;
    border-radius: 15rpx;
    margin-top: 54rpx;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20rpx;
    text-align: center;
    position: relative;
}

.clubcard.big {
    width: 95%;
    height: 358rpx;
    margin-top: 36rpx;
    overflow: hidden;
}

.clubcard .content {
    position: relative;
    width: 100%;
    height: 100%;
}

.clubcard .content .icon image {
    width: 58rpx;
    height: 58rpx;
}

.clubcard .content:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1rpx solid #000;
    opacity: 0.1;
}

.clubcard .icon-bg {
    position: absolute;
    font-size: 204rpx;
    color: #000;
    opacity: 0.1;
    right: -55rpx;
    bottom: -66rpx;
}

.clubcard .icon {
    padding-top: 26rpx;
}

.clubcard .icon i {
    font-size: 52rpx;
    color: #fff;
}

.clubcard .title {
    color: #fff;
    font-size: 46rpx;
    opacity: 0.8;
    line-height: 1;
    margin-top: 10rpx;
}

.clubcard .subtitle {
    color: #fff;
    font-size: 30rpx;
    opacity: 0.8;
    line-height: 1;
    margin-top: 25rpx;
}

.clubcard .opencard {
    color: #c1a167;
    font-size: 32rpx;
    width: 208rpx;
    height: 64rpx;
    border-radius: 32rpx;
    background: #333;
    margin: 0 auto;
    line-height: 64rpx;
    margin-top: 40rpx;
    position: relative;
    z-index: 999;
}

.card-style-golden {
    background: linear-gradient(to right,#c1a167,#e9d5aa);
    box-shadow: 0 26px 40px -24px rgba(193,161,103,0.6);
}

.card-style-erythrine {
    background: linear-gradient(to right,#745757,#966d6d);
    box-shadow: 0 26px 40px -24px rgba(116,87,87,0.6);
}

.card-style-gray {
    background: linear-gradient(to right,#434247,#7a7985);
}

.card-style-gray .shadow {
    box-shadow: 0 0 70rpx #434247;
}

.card-style-brown {
    background: linear-gradient(to right,#736e6c,#978c8c);
}

.card-style-brown .shadow {
    box-shadow: 0 0 70rpx #736e6c;
}

.card-style-blue {
    background: linear-gradient(to right,#576074,#6d7b96);
}

.card-style-blue .shadow {
    box-shadow: 0 0 70rpx #576074;
}

.card-style-black {
    background: linear-gradient(to right,#373737,#4a4a4a);
}

.card-style-blue .black {
    box-shadow: 0 0 70rpx #373737;
}

.card-group {
    background: #fff;
    padding-top: 40rpx;
    margin-top: 20rpx;
}

.card-group.nomargin {
    margin-top: 0;
}

.card-title {
    height: 48rpx;
    line-height: 48rpx;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: 20rpx;
}

.card-subtitle {
    font-size: 22rpx;
    color: #bbb;
    text-align: center;
}

.card-title:before {
    content: "";
    position: absolute;
    width: 80rpx;
    height: 2rpx;
    top: 50%;
    margin-top: -1rpx;
    left: 205rpx;
    background: linear-gradient(to right,#fff,#c1a167);
}

.card-title:after {
    content: "";
    position: absolute;
    width: 80rpx;
    height: 2rpx;
    top: 50%;
    margin-top: -1rpx;
    right: 205rpx;
    background: linear-gradient(to right,#c1a167,#fff);
}

.card-btn-group {
    padding: 0 20rpx;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.card-btn-group .card-btn-item {
    width: 25%;
    height: 176rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-btn-group .card-btn-item .card-btn-icon .icon {
    width: 108rpx;
    height: 108rpx;
    background: rgba(193,161,103,0.2);
    display: inline-block;
    border-radius: 50%;
    margin-bottom: 24rpx;
    text-align: center;
    line-height: 108rpx;
}

.card-btn-group .card-btn-item .card-btn-icon i {
    font-size: 50rpx;
    color: #c1a167;
}

.card-btn-group .card-btn-item .card-btn-text {
    font-size: 22rpx;
    color: #999;
}

.card-getmore {
    text-align: center;
    font-size: 24rpx;
    color: #c1a167;
    line-height: 70rpx;
    padding-bottom: 10rpx;
}

.card-getmore i {
    font-size: 20rpx;
    margin-left: 10rpx;
}

.card-fiche {
    width: 710rpx;
    height: 160rpx;
    border-radius: 8rpx;
    margin: 20rpx auto 0;
    display: flex;
}

.card-fiche.gary {
    background: #393939;
}

.card-fiche.golden {
    background: linear-gradient(to right,#c1a167,#ead5aa);
}

.card-fiche .fiche-icon {
    width: 168rpx;
    position: relative;
    overflow: hidden;
}

.card-fiche .fiche-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-fiche .fiche-btn {
    width: 260rpx;
}

.card-fiche.gary .fiche-inner {
    font-size: 32rpx;
    font-weight: bold;
    color: #c1a167;
}

.card-fiche.gary .fiche-btn {
    font-size: 32rpx;
    font-weight: bold;
    color: #c1a167;
    line-height: 140rpx;
    height: 100%;
    text-align: right;
    box-sizing: border-box;
    padding-right: 20rpx;
}

.card-fiche.gary .fiche-btn span {
    font-size: 72rpx;
}

.card-fiche.golden .fiche-inner {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.card-fiche.golden .fiche-inner .subtitle {
    font-size: 46rpx;
    font-weight: bold;
    color: #000;
    opacity: 0.5;
    margin-top: 10rpx;
}

.card-fiche.golden .fiche-inner .subtitle span {
    font-size: 24rpx;
}

.card-fiche.golden .fiche-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 22rpx;
}

.card-fiche.golden .fiche-btn .btn-submit {
    width: 174rpx;
    height: 50rpx;
    text-align: center;
    line-height: 48rpx;
    border-radius: 27rpx;
    display: inline-block;
}

.card-fiche.golden .fiche-btn .btn-submit.border {
    border: 1px solid #333;
}

.card-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
}

.card-modal .inner {
    width: 570rpx;
    height: 422rpx;
    border-radius: 15rpx;
    background: #fff;
    margin: 350rpx auto 0;
    padding: 48rpx;
    box-sizing: border-box;
}

.card-modal .inner .title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    margin-bottom: 20rpx;
}

.card-modal .inner .text {
    font-size: 28rpx;
    color: #666;
    line-height: 50rpx;
    position: relative;
    padding-left: 30rpx;
}

.card-modal .inner .text::before {
    content: "";
    position: absolute;
    width: 8rpx;
    height: 8rpx;
    background: #666;
    border-radius: 50%;
    left: 10rpx;
    top: 50%;
    margin-top: -4rpx;
}

.card-modal .inner .text.nobefore::before {
    display: none;
}

.card-modal .inner .submit {
    font-size: 28rpx;
    color: #fff;
    line-height: 84rpx;
    margin: 46rpx auto 0;
    width: 474rpx;
    height: 84rpx;
    background: linear-gradient(to right,#c1a167,#e9d5aa);
    text-align: center;
    border-radius: 42rpx;
}

.card-group .card-explain {
    font-size: 22rpx;
    color: #666;
    line-height: 40rpx;
    padding: 0 24rpx;
}

.card-group .card-explain:last-child {
    padding-bottom: 50rpx;
}

.btn-footbar-bj {
    height: 98rpx;
    position: fixed;
    left: -50rpx;
    right: -50rpx;
    bottom: 0;
    background: #c1a168;
    display: flex;
    transform: skewX(-20deg);
}

.btn-footbar-bj.iphonex,.btn-footbar.iphonex {
    bottom: 68rpx;
}

.renew {
    height: 98rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #c1a168;
    text-align: center!important;
    line-height: 98rpx;
    color: #fff;
}

.renew.iphonex {
    bottom: 68rpx;
}

.btn-footbar-bj .item {
    flex: 1;
}

.btn-footbar-bj .item:first-child {
    background: #333;
}

.btn-footbar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: flex;
}

.btn-text {
    color: #c1a168;
    font-size: 28rpx;
    font-weight: bold;
    width: 50%;
    text-align: center;
    line-height: 82rpx;
}

.btn-text span {
    font-size: 46rpx;
}

.btn-footbar .btn-submit {
    color: #fff;
    font-size: 34rpx;
    width: 50%;
    text-align: center;
    line-height: 82rpx;
}

.btn-footbar .btn-submit i {
    margin-left: 4rpx;
    font-size: 28rpx;
}

.fiche-icon .icox-kaiqiajifen,.fiche-icon .icox-meiyuejifen,.fiche-icon .icox-huangguan-line {
    font-size: 150rpx;
    color: 000;
    opacity: 0.1;
}

.fiche-icon .icox-huangguan-line {
    position: absolute;
    bottom: -57rpx;
    left: -42rpx;
    font-size: 190rpx;
}

.fiche-icon .icox-huiyuanzhuanxiangzhekou {
    font-size: 190rpx;
    position: absolute;
    left: -60rpx;
    bottom: -76rpx;
    opacity: 0.1;
    color: #fff;
}

.card-group .coupon-list {
    display: flex;
    flex-wrap: wrap;
    padding: 28rpx 20rpx 0;
}

.card-group .coupon-list.left {
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.coupon-list-item {
    position: relative;
    overflow: hidden;
    width: 349rpx;
    height: 194rpx;
    text-align: center;
    margin-bottom: 20rpx;
}

.card-group .coupon-list.left .coupon-list-item {
    flex-shrink: 0;
    margin-right: 15rpx;
}

.coupon-list-item:nth-child(odd) {
    margin-right: 15rpx;
}

.coupon-list-item .coupon-inner {
    border: 1rpx solid #ccc;
    width: 345rpx;
    height: 190rpx;
    border-radius: 15rpx;
}

.coupon-inner-media {
    display: flex;
    padding-left: 36rpx;
}

.coupon-inner-media .price {
    line-height: 100rpx;
}

.coupon-list-item .price {
    font-size: 20rpx;
    font-weight: bold;
    color: #c1a167;
    padding-top: 20rpx;
}

.coupon-list-item .price span {
    font-size: 48rpx;
}

.coupon-list-item .explain {
    font-size: 22rpx;
    color: #666;
    line-height: 1;
    padding-top: 5rpx;
}

.coupon-inner-media .explain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-left: 20rpx;
    font-size: 24rpx;
    color: #000;
    font-weight: bold;
}

.coupon-inner-media .explain .subtitle {
    color: #666;
    font-size: 22rpx;
    margin-top: 10rpx;
    font-weight: 400;
}

.coupon-list-item.already .condition .btn-condition {
    width: 174rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin: 10rpx auto 0;
    color: #fff;
    border-radius: 24rpx;
    background: linear-gradient(to right,#c1a167,#e9d5aa);
}

.coupon-list-item.already .condition .btn-condition.gary {
    background: #bbb;
}

.coupon-list-item .condition {
    height: 68rpx;
    line-height: 68rpx;
    font-size: 24rpx;
    color: #333;
    position: absolute;
    bottom: 0;
    left: 24rpx;
    right: 24rpx;
    border-top: 1rpx dashed #ccc;
}

.coupon-list-item .circle {
    position: relative;
}

.coupon-list-item .circle-l {
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 1rpx solid #ccc;
    left: -11rpx;
    bottom: 60rpx;
    background: #fff;
}

.coupon-list-item .circle-r {
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 1rpx solid #ccc;
    right: -11rpx;
    bottom: 60rpx;
    background: #fff;
}