*{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
body{width: 100%;overflow-x: hidden;background: #de1829;color: #ffffff;}
img{vertical-align: middle;max-width: 100%;}
.container{width: 100%;padding: 0 .4rem;}
/*顶部*/
.top-bar{display: flex;justify-content: center;align-items: center;width: 100%;height: .8rem;position: relative;}
.top-bar i{display: inline-block;width: .5rem;height: .8rem;background: url(../image/icon-back.png) left center no-repeat;background-size: .17rem .30rem;position: absolute;left: .2rem;}
.top-bar span{font-size: .42rem;color: #fce0b3;font-weight:600;}
/* 顶部大图 */
.banner{width: 100%;height: auto;overflow: hidden;position: relative;}
.banner img{width: 100%;}
.banner a{position: absolute;right: 0;top: .26rem;font-size: .24rem;color: #5c2405;display: inline-block;padding: .12rem .15rem .12rem .2rem;background: linear-gradient(to right bottom,#eb8657,#f7d481);border-radius: .55rem 0  0 .55rem;border: .05rem solid #ffffff;border-right: none;}
.banner a i{font-style: italic;}
/* 礼包月份 */
.month-cate{width: 100%;}
.month-cate ul{width: 100%;;display: flex;justify-content: space-between;align-items: center;height: .72rem;background: #c60000;box-shadow: 0 .25rem .25rem rgba(120,0,0,.3);}
.month-cate ul li{font-size: .3rem;color: #fce0b3;width: 100%;text-align: center;position: relative;height: 100%;line-height: .72rem;}
.month-cate ul li.active{background: #de1829;border-radius: 0 .3rem 0 0;box-shadow: 0 .0 .25rem rgba(120,0,0,.3);}
.month-cate ul li:nth-child(2){border-radius: .3rem .3rem 0 0;}
.month-cate ul li:nth-child(3){border-radius: .3rem .3rem 0 0;}
.month-cate ul li:nth-child(4){border-radius: .3rem 0 0 0;}
/*领取规则*/
.rule-dialog{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;overflow: hidden;z-index: 9;display: none;}
.rule-dialog .mask{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0,0,0,.3);}
.rule-dialog .content{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 80%;height: auto;background: #FFFFFF;border-radius: .35rem;padding: .25rem;}
.rule-dialog .content h2{display: flex;justify-content: space-between;align-items: flex-start;font-size: .32rem;padding-bottom: .3rem;color: #000;}
.rule-dialog .content i{margin-right: .1rem;}
.rule-dialog .content .desc{font-size: .24rem;color: #333;height: 5rem;overflow-y: auto;}
/* 礼包内容 */
.month-detail{width: 100%;padding: .25rem .3rem .85rem .3rem;display: none;}
.month-detail.active{display: block;}
.month-detail .coupon{width: 100%;height: auto;background: #c60000;border-radius: .25rem;padding: .3rem .15rem .2rem .15rem;margin-bottom: .2rem;}
.month-detail .coupon ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
.month-detail .coupon.one ul li{width: 3.05rem;height: 3.12rem;background: url(../image/card-bg.png) center center no-repeat;background-size: 100% 100%;margin-bottom: .2rem;position: relative;text-align: center;white-space: nowrap;}
.month-detail .coupon.one ul li .title{display: inline-block;font-size: .26rem;color: #fffef8;background: linear-gradient(to right,#fb6e4c,#f85450,#f12158);position: absolute;top: .02rem;left: 50%;transform: translateX(-50%);padding:.03rem .25rem .06rem .25rem;border-radius: 0 0 .15rem .15rem;}
.month-detail .coupon.one ul li .title.yellow{background: #ffe2b8;padding:.03rem .15rem .06rem .15rem;color: #c60000;}
.month-detail .coupon.one ul li .money{font-size: .78rem;color: #fd1011;padding-top: .4rem;font-weight: bold;}
.month-detail .coupon.one ul li .money i{font-size: .24rem;padding-left: .18rem;}
.month-detail .coupon.one ul li .type{background: linear-gradient(to right,rgba(250,230,230,.1),rgba(250,231,232,1),rgba(250,230,230,.1));font-size: .26rem;color: #fd1011;width: 100%;padding: .05rem 0;letter-spacing: .02rem;position: relative;}
.month-detail .coupon.one ul li .type::before{content: "";display: block;width: .06rem;height: .06rem;background: #fd1012;border-radius: 50%;position: absolute;left: .35rem;top: 50%;transform: translateY(-50%);}
.month-detail .coupon.one ul li .type::after{content: "";display: block;width: .06rem;height: .06rem;background: #fd1012;border-radius: 50%;position: absolute;right: .35rem;top: 50%;transform: translateY(-50%);}
.month-detail .coupon ul li .btn{width: 100%;position: absolute;bottom: .2rem;}
.month-detail .coupon ul li .btn a{display: inline-flex;align-items: center;background: linear-gradient(to right,#f64136,#fd6e49);padding: .12rem .3rem;font-size:.26rem;color: #ffffff;border-radius: .5rem;}
.month-detail .coupon ul li .btn a i{display: inline-block;width: .25rem;height: .25rem;border-radius: 50%;background: url(../image/arrow-right.png) center center no-repeat #ffffff;background-size: .07rem .1rem;margin-left: .15rem;margin-top: .05rem;}
.month-detail .coupon.two ul li{width: 3.05rem;height: 1.98rem;background: #fff;margin-bottom: .2rem;border-radius: .3rem;border: .05rem solid #ffbd96;overflow: hidden;position: relative;}
.month-detail .coupon.two ul li .desc{background: linear-gradient(to right,#fe664a,#ff352a);display: flex;align-items: center;color: #fbf3da;padding: .05rem 0 ;width: 100%;}
.month-detail .coupon.two ul li .desc>div{width: 50%;text-align: center;}
.month-detail .coupon.two ul li .desc .l{display: flex;align-items: baseline;justify-content: center;position: relative;}
.month-detail .coupon.two ul li .desc .l::after{content: "";display: block;width: .02rem;height: .63rem;background: url(../image/line.png) top center no-repeat;background-size: 100% 100%;position: absolute;right: 0;top: .2rem;}
.month-detail .coupon.two ul li .desc .l span{font-size: .78rem;}
.month-detail .coupon.two ul li .desc .l i{font-size: .24rem;margin-left: .1rem;}
.month-detail .coupon.two ul li .desc .r{display: flex;flex-direction: column;justify-content: center;}
.month-detail .coupon.two ul li .desc .r p{font-size: .24rem;margin-bottom: .06rem;}
.month-detail .coupon.two ul li .desc .r span{font-size: .26rem;}
.month-detail .coupon.two ul li .btn{bottom: .07rem;width: 100%;text-align: center;display: flex;justify-content: center;align-items: flex-start;}
.month-detail .coupon.two ul li .btn a{box-shadow: 0 .05rem .05rem rgba(120,0,0,.3);}