/* 首页 */
page {
    background: #fff;
}

.indexTab {
    position: fixed;
    display: flex;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    z-index: 999;
    padding: 0 40rpx;
    top: 80rpx;
    box-sizing: border-box;
    background-color: #07081d;
}

.indexTab-lable {
    text-align: center;
    flex: 3;
    color: #fff;
    position: relative;
}

.indexTab-lable.active {
    background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 38rpx;
}

/* 轮播图 */
.indexBanner {
    height: 360rpx;
    position: relative;
    padding-top: 20rpx;
}

.indexBanner::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 240rpx;
    width: 100%;
    content: '';
    background: #07081d;
    border-radius: 0 0 200rpx 200rpx;
}

.banner {
    position: relative;
    padding-top: 48%;
    width: calc(100% - 100rpx);
    background: white;
    margin: 0 50rpx;
    border-radius: 30rpx;
    overflow: hidden;
    z-index: 99;
}

.banner-swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

/* 指示点 */
.dots {
    margin: 30rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dots view {
    width: 14rpx;
    height: 14rpx;
    margin: 0 6rpx;
    border-radius: 50%;
    background-color: #c5c5c5;
}

.dots .active {
    width: 24rpx;
    border-radius: 40rpx;
    background-color: #f46851;
}

/* 提示 */
.indexNews {
    background: #dddddd;
    padding: 25rpx 40rpx;
    display: flex;
    font-size: 28rpx;
}

.indexNews image {
    width: 34rpx;
    height: 34rpx;
    margin: 4rpx 20rpx 0 0;
}

/* 权益列表 */
.cardArr {
    padding: 50rpx 0 30rpx;
    box-sizing: border-box;
    overflow: hidden;
}

.cardArr-top {
    padding: 0 30rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
    display: flex;
    margin-bottom: 20rpx;
}

.indexCard {
    width: 33.33%;
    text-align: center;
    position: relative;
    flex: 0 0 33.3333%;
    margin-bottom: 40rpx;
}

.indexCard-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
}

.activity-tips {
    position: absolute;
    top: -10rpx;
    right: 10rpx;
    z-index: 9;
    background-image: -webkit-linear-gradient(left, #ff0000, #ff0000);
    color: #fff;
    font-size: 24rpx;
    padding: 0 18rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 20rpx;
    animation: zy 2.5s .15s linear infinite;
    -moz-animation: zy 2.5s .15s linear infinite;
    -webkit-animation: zy 2.5s .15s linear infinite;
    -o-animation: zy 2.5s .15s linear infinite;
}

.indexCard-tips {
    background-image: -webkit-linear-gradient(left, #ef354c, #ef001e);
    color: #fff300;
    height: 34rpx;
    line-height: 32rpx;
    padding: 0 10rpx;
    right: 25rpx;
}

@keyframes zy {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

.indexCard-title {
    font-weight: 600;
    margin: 5rpx 20rpx;
    font-size: 30rpx;
}

.indexCard-remark {
    font-size: 26rpx;
    color: #8a8a8a;
}

/* 新增活动权利列表样式 */
.activity-remark {
    background-color: #000000;
    display: inline-block;
    border-radius: 40rpx;
    height: 38rpx;
    line-height: 38rpx;
    padding: 0 10rpx;
}

.activity-remark text {
    display: block;
    background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 22rpx;
}


/* 定位 */

.locationPicker {
    background: #000;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    position: fixed;
    width: 100%;
    z-index: 1009;
    top: 0;
    left: 0;
}

.locationPicker-icon {
    width: 38rpx;
    height: 38rpx;
    float: left;
    vertical-align: middle;
    margin: 22rpx 10rpx 0 20rpx;
}

.locationPicker-region-icon {
    width: 44rpx;
    height: 44rpx;
    margin-top: 12rpx;
}

.cityCont {
    width: 60%;
    display: flex;
}

.cityCont view {
    max-width: calc(100% - 50rpx);
}

.cityCont image {
    width: 50rpx;
    height: 50rpx;
    margin-top: 16rpx;
}

/* 权益提示 */
.legalTips {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    padding: 80rpx;
    margin: 0 auto;
}

.legalTips image {
    width: 240rpx;
    height: 180rpx;
    display: block;
    margin: 0 auto 40rpx;
}

/* 滚动  */
/*首页跑马灯效果*/
@keyframes around {
    from {
        margin-left: 60rpx;
    }

    to {
        /* var接受传入的变量 */
        margin-left: var(--marqueeWidth--);
    }
}

.marquee_container {
    width: calc(100% - 40rpx);
    overflow: hidden;
}

.marquee_container:hover {
    /* 不起作用 */
    animation-play-state: paused;
}

.marquee_text {
    font-size: 28rpx;
    display: inline-block;
    white-space: nowrap;
}

.marquee_text.active {
    animation-name: around;
    animation-duration: 20s;
    /*过渡时间*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* 福利日 */
/* 
.Welfare {
    background-color: #000;
    padding: 30rpx;
    box-sizing: border-box;
    width: 100%;
} */

.WelfareTitle {
    width: 100%;
    text-align: center;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    font-weight: 600;
    padding-top: 50rpx;
    color: #f1cb8c;
}

.WelfareTitle text {
    font-size: 64rpx;
}

.WelfareCont {
    background-color: #000;
    border: #fcf9da 2rpx solid;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 10rpx 10rpx;
    position: relative;
}

.WelfareTop {
    position: absolute;
    top: -20rpx;
    left: calc(50% - 225rpx);
    width: 450rpx;
    height: 70rpx;
}

.WelfareTop .welfare-title,
.WelfareTop .welfare_stra {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.WelfareTop .welfare_stra {
    height: 130%;
    z-index: 2;
    animation: star .3s ease-in infinite;
}

@keyframes star {
    10% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }
}

.WelfareList {
    position: relative;
    width: 100%;
    padding-top: 35%;
    margin-bottom: 30rpx;
}

.WelfareList:last-child {
    margin: 0;
}

.WelfareList-img {
    border-radius: 15rpx;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


.WelfareList-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 45rpx 40rpx;
    box-sizing: border-box;
    z-index: 8;
    display: flex;
}

.WelfareList-left {
    width: 70rpx;
    height: 70rpx;
    margin-top: 6%;
}

.WelfareList-center {
    font-size: 24rpx;
    margin-left: 30rpx;
    width: calc(100% - 100rpx);
}

.WelfareList-price {
    font-size: 30rpx;
    font-weight: 600;
}

.WelfareList-center-cont {
    padding-right: 100rpx;
    box-sizing: border-box;
}

.WelfareList-center-all {
    margin: 10rpx 0;
    color: #633c1b;
    font-weight: 600;
}

.WelfareList-right {
    background: linear-gradient(to bottom, #e8b86d, #9d743e);
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 2s infinite linear;
    color: #fff;
    height: 58rpx;
    line-height: 58rpx;
    font-size: 28rpx;
    width: 120rpx;
    text-align: center;
    border-radius: 40rpx;
    margin-top: 7%;
    position: absolute;
    right: 40rpx;
    top: 60rpx;
}
@-webkit-keyframes masked-animation {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}

.WelfareList-right.active {
    background: linear-gradient(to bottom, #969696, #969696);
}

.WelfareList-img.active,
.WelfareList-left.active {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.WelfareList-center-time.active,
.WelfareList-center-all.active {
    color: #929292;
}

.WelfareList-center-time.active::after {
    background-color: #cccccc;
}

.WelfareList-right text {
    display: inline-block;
    animation:mymove 2s infinite;
    transform: scale(.9);
}

@keyframes mymove{
    0%{
        transform: scale(.9);
    }
    25%{
        transform: scale(1);
    }
    50%{
        transform: scale(.9);
    }
    75%{
        transform: scale(1);
    }
}

.WelfareList-right.active text {
    -webkit-animation: mymove 0s infinite linear;
}

.WelfareList-center-time {
    position: relative;
    padding-top: 25rpx;
    color: #a37d4d;
}

.WelfareList-center-time::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 60rpx;
    height: 6rpx;
    border-radius: 20rpx;
    background-color: #d68f0d;
}

.WelfareList-center-time text,
.WelfareList-center-all text {
    padding-right: 20rpx;
}

/* 光 */
.light {
    cursor: pointer;
    position: absolute;
    left: -100%;
    top: 0;
    width: 40px;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    transform: skewx(25deg);
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
    animation-name: example;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}


@keyframes example {
    0% {
        left: -100%;
        background: rgba(255, 255, 255, .4);
    }

    50% {
        left: -50%;
        background: rgba(255, 255, 255, .7);
    }

    100% {
        left: 100%;
        background: rgba(255, 255, 255, 0);
    }
}

/* 订阅消息 */
.subscribe {
    color: #89663f;
    width: 100%;
    padding: 0 100rpx;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 50rpx;
    display: flex;
    /* -webkit-animation: Tada 3s both infinite;
    -moz-animation: Tada 3s both infinite;
    -ms-animation: Tada 3s both infinite;
    animation: Tada 3s both infinite; */
}

.subscribe-icon,
.subscribe-cont {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    position: relative;
}

.subscribe-icon {
    width: 150rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    background: linear-gradient(to right, #f3c988, #f9e0b8);
    border-radius: 40rpx 0 0 40rpx;
}

.subscribe-icon::after{
    position: absolute;
    content: '';
    right: -50rpx;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 80rpx solid #f9e0b8;
    border-right: 50rpx solid transparent;
    z-index: 9;
}

.subscribe-cont {
    width: calc(100% - 150rpx);
    background: linear-gradient(to right, #f3c988, #f9e0b8);
    border-radius: 0 40rpx 40rpx 0;
    font-weight: 600;
}

.subscribe-cont text {
    display: inline-block;
    -webkit-animation: subscribeCont 1s linear infinite;
    animation: subscribeCont 1s linear infinite;
}

@keyframes subscribeCont {
    25% {transform: scale(.98);}
    50%, 100% {transform: scale(1);}
    75% {transform: scale(1.05);}
}

.subscribe-icon image {
    width: 54rpx;
    height: 54rpx;
    margin-top: 14rpx;
}

@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(1) rotate(-3deg);
        transform: scale(1) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1) rotate(3deg);
        transform: scale(1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1) rotate(-3deg);
        transform: scale(1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

.subscribe-icon-one {
    -webkit-animation: bounce-right 1s linear infinite;
    animation: bounce-right 1s linear infinite;
}

@keyframes bounce-right {
    25% {transform: translateX(-3px);}
    50%, 100% {transform: translateX(0);}
    75% {transform: translateX(3px);}
}

.subscribe-icon-two {
    -webkit-animation: bounce-two 1s linear infinite;
    animation: bounce-two 1s linear infinite;
}

@keyframes bounce-two {
    25% {opacity: 0;transform: translateX(-3px);}
    75% {opacity: 1;transform: translateX(3px);}
}


/* 漂浮弹出层 */
.indexFloat {
    position: fixed;
    height: 70%;
    width: 110rpx;
    right: 20rpx;
    bottom: 0;
    z-index: 99;
}

.indexFloat-movable {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 280rpx;
    z-index: 99;
}

.indexFloat-img image {
    width: 130rpx;
    height: 130rpx;
    margin-bottom: 20rpx;
}

.indexFloat-animation {
    animation: shake 3s linear infinite;
}

@keyframes shake {
    70%, 80% {
      transform: rotate(7deg);
    }
    75% {
      transform: rotate(-7deg);
    }
   
    65%,
    85% {
      transform: rotate(0);
    }
}