body{background-color: #4f39a3}

.banner{height: 605px;background-image: url(../images/banner.png);background-position: center center;background-size: auto 100%}


.activity-wrapper{width: 868px;margin:0 auto}
.activity-section:first-child{border-bottom:3px solid #624cbc}


.welfare{padding:40px 0;position: relative}
.welfare>*{vertical-align: top}
.welfare .tag{width: 60px;height: 60px;text-align:center;line-height:60px;background-image: url(../images/no-bg.png);background-size:100% 100%;color:#e3dcfe;font-size: 25px;font-weight: bold;position: absolute;left: 0}
.welfare .intro{margin-left: 80px}
.welfare .intro h2{color:#d6d0fe;margin:5px 0 10px}
.welfare .intro p{color:#fff}

.coupon ul{margin:-12.5px;}
.coupon li{float: left;width: 33.33333333%;padding: 12.5px;box-sizing: border-box}

.rule{padding-bottom: 200px}
.rule-title{font-size: 20px;font-weight: bold;color:#d6d0fe;margin:50px 0 30px}
.rule-content p{color:#fff;line-height: 2.5em}


.sec-shadow{box-shadow: 0 0 20px rgba(131,108,223,.75) inset;border-radius: 10px;color:#fff;padding: 25px;margin-bottom: 30px}
.sec-shadow *{color:#fff}
.sec-shadow>p{margin:5px 0}
.sec-shadow>p + .coupon{margin-top: 30px}

.coupon-item{background-image: url(../images/coupon-bg.png);background-repeat: no-repeat;background-size: 100% 100%;height: 110px}
.coupon-item>*{display: inline-block;vertical-align: middle}
.coupon-value{width: 50%;text-align: center;font-weight: bold;height: 100%;line-height: 110px}
.coupon-value span{font-size: 28px;}
.coupon-intro{width: 40%;white-space: nowrap;padding-left: 5px}
.coupon-intro p{font-weight: bold;font-size: 16px;margin-bottom: 10px}

@media screen and (max-width:1024px){
    .banner{padding-bottom: 59%;height: auto}
    .activity-wrapper{width: 90%}
}

@media screen and (max-width:900px){
    .coupon li{width: 50%}
}

@media screen and (max-width:640px){
    .banner{padding-bottom: 70%}
    .welfare{padding: 20px 0;}
    .welfare .intro{margin-left: 65px}
    .welfare .intro h2{font-size: 18px}
    .welfare .tag{position: absolute;top:50%;margin-top: -30px;width: 50px;height: 50px;line-height: 50px;font-size: 20px}
    .coupon li{width: 100%;max-width:280px;padding: 5px;float: none;margin:0 auto}
    /*.coupon-value span{font-size: 20px}*/
    /*.coupon-intro p{font-size: 12px}*/
    /*.coupon-intro span{font-size: 10px}*/
    .rule{padding-bottom: 50px}
    .rule-content p{color:#fff;line-height: 2em}
}