/**{color: #11111a}*/
.blue{color: #4b89f3}
.yellow{color: #fef878}
.orange{color: #ff6a00}
.w900{width: 900px;margin: 0 auto}
.underline{text-decoration: underline}
.f14{font-size: 14px}

.activity-btn{display: inline-block;width: 120px;line-height: 38px;text-align: center;border:1px solid #ff6a00;color: #ff6a00;border-radius: 6px}
.activity-btn:hover,.activity-btn-active{background-color: #ff6a00;color: #fff}
.activity-btn-active:hover{opacity: .8}

.activity-banner{height: 680px;background-image: url(../../index/activity/youhuiquan/images/banner.jpg);background-position: center center;background-size: auto 100%;}
.activity-banner .w900{height: 100%;position: relative}
.activity-btn-rule{color: #fef878;position: absolute;right: 0;bottom: 4%;}
.activity-btn-rule:after{content:'>>';font-family: SimSun}
.activity-btn-receive{display: block;width: 188px;height: 191px;position: absolute;bottom: -90px;left: 50%;transform: translateX(-50%);background-size: 100% 100%;background-image: url(../../index/activity/youhuiquan/images/btn-receive.png);border-radius: 90px}

.activity-list{margin-top: 140px;margin-bottom: 50px}
.activity-list:after{content:'';width: 100%;height: 0;display: table;clear: both}

.col-spac30{margin: -15px;}
.col-spac30>*{padding: 15px;box-sizing: border-box}
.activity-item{width: 50%;float: left;}
.activity-box{box-shadow: 0 10px 20px rgba(64,66,77,.06)}
.activity-box:hover{box-shadow: 0 10px 20px rgba(64,66,77,.1)}

.activity-item-title{background-image: url(../../index/activity/youhuiquan/images/activity-img01.jpg);display: table;width: 100%;height: 200px;background-size: 100% 100%}
.activity-cell{text-align: center;display: table-cell;vertical-align: middle}
.activity-cell>*{color: #fff}
.activity-cell h3{font-size: 24px;line-height: 2em;margin-bottom: 10px}

.activity-item-foot{padding: 25px}
.activity-item-foot .activity-desc{display:inline-block;line-height: 40px;width: calc(100% - 144px);margin-right: 18px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle}

.dialog-form-item{display: table}
.dialog-form-item>*{display: table-cell;vertical-align: top;}
.dialog-form-item .dialog-form-item-name{width: 110px;text-align: right;line-height: 94px;}

.dialog-form-tips{margin-top: 15px}

.coupon-item li{width: 178px;height: 78px;background-image: url(../../index/activity/youhuiquan/images/coupon-bg1.png);margin: 8px 0 8px 15px;padding: 10px 18px;box-sizing: border-box;background-size: 100% 100%;vertical-align: top;float: left}
.coupon-item li *{color: #ff6a00}
.coupon-num{font-size: 16px;}
.coupon-num-price{font-size: 26px;font-weight: bold;}
.coupon-desc{display:block;font-size: 12px;padding-top: 10px;white-space: nowrap;border-top: 1px dashed #ff6a00}

.coupon-item li.coupon1{background-image: url(../../index/activity/youhuiquan/images/coupon-bg1.png)}
.coupon-item li.coupon1 .coupon-num{line-height: 60px;font-size: 20px}

.dialog{background-color: #fff;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding:35px 50px;z-index: 10000;box-sizing: border-box}
.dialog-mask{content:'';width: 100%;height: 100%;position: fixed;top:0;left: 0;background-color: rgba(0,0,0,0.5);display: none}
.dialog-close{position: absolute;right: 40px;top: 40px;cursor: pointer;width: 32px;height: 32px;opacity: .8;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABPUlEQVRYR+2WsW7CQAyGvwwsHQoDSzt0YUGgLlCpS4cuXbp0QOIhgedgYywLL4F4AuTKkaJrLmcnkDAQKcvF5/+L/Tu5jI6vrGN97gA3XYE5cABODX0yAJ6BfVmeWAUmwK/ey9hmA5jkWQFT4A3YhXuqWrABFg0giuLyMh/A0QPQA9bATw2IUDxaxZQJHxTi2wFhFpdqpAAkpq8QXwYIl7gVQOKGCvFZAeEW9wBI7JM6Wswkpir2tZa4F0DiXxTivQAh6/mohWDJSbV4IEwyUsGZQshzmXO3eJ0K5DBjhXjVhVriTQCKPZc8rQKEhmu1BWVub82EVaN29TG0CFhi/o2lZQw9iT2xfzApAHdCwLWnCsCVKKiteW8M4BHYNvnClVTCdSC5iSNZp4fS5F/sUgGpKbiUTjTPHaDzCpwBaPJwIQmcr3AAAAAASUVORK5CYII=);background-size: 100% 100%}
.dialog-title{margin-bottom: 20px}
.dialog-title h1{font-size: 30px;}
.dialog-title p{color:#4a5f70;margin-top: 20px}
.dialog-foot{text-align: center;padding: 30px 0 0 0}
.dialog-foot .btn{}

.dialog-coupon{width: 900px;}
.dialog-coupon .dialog-title{text-align: center}
.dialog-coupon .dialog-title h1{color: #ff6a00}
.dialog-coupon .dialog-body{padding: 0 45px}

.dialog-rule{width: 900px;}
.dialog-rule-item p{position: relative;padding-left: 25px;line-height: 24px;margin-bottom: 5px}
.dialog-rule-item .rule-dot{position: absolute;left: 0}

/* confire弹窗 */
.qback{width: 100%;height: 100%;background: rgba(0,0,0,.3);position: fixed;top: 0;left: 0;z-index: 20000;}
.alertBox{width: 360px;height: auto;padding: 30px;box-sizing: border-box;background: #fff;position: relative;top: 50%;left: 50%;margin: -167px 0 0 -180px;}
.alertHead{width: 100%;height: 45px;border-bottom: 1px solid #4b89f3;font-size: 16px;color: #333;line-height: 45px;text-align: center;}
.alertMes{width: 100%;height: auto;overflow: hidden;padding: 10px 40px 30px;text-align: center;font-size: 16px;color: #333;box-sizing: border-box;line-height: 28px;}
.alertMes p{line-height: 32px}
.alertBtn{display: block;width: 100px;height: 34px;line-height: 34px;background-color: #4b89f3;cursor: pointer;font-size: 14px;color: #fff;border-radius: 4px;border: 1px solid transparent;margin: 0 auto;text-align: center;}
.ConBtn{display: inline-block;width: 100px;height: 34px;line-height: 34px;background-color: #4b89f3;cursor: pointer;font-size: 14px;color: #fff;border-radius: 4px;border: 1px solid transparent;text-align: center;margin-left: 35px;margin-right: 24px;}
.cancel{display: inline-block;width: 100px;height: 34px;line-height: 34px;background:#fff;cursor: pointer;font-size: 14px;color: #4b89f3;border-radius: 4px;text-align: center;border: 1px solid #4b89f3;}
.alertMes a{color: #4b89f3;text-decoration: underline;}
.ToastBox{width: 452px;height: auto;padding: 15px 20px;text-align: center;background: rgba(0,0,0,.5);color: #fff;font-size: 16px;border-radius: 8px;line-height: 24px;position: relative;top: 50%;left: 50%;margin: 0 0 0 -226px;}
.alertClose{position: absolute;right: 20px;top: 20px;cursor: pointer;width: 24px;height: 24px;opacity: .8;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABPUlEQVRYR+2WsW7CQAyGvwwsHQoDSzt0YUGgLlCpS4cuXbp0QOIhgedgYywLL4F4AuTKkaJrLmcnkDAQKcvF5/+L/Tu5jI6vrGN97gA3XYE5cABODX0yAJ6BfVmeWAUmwK/ey9hmA5jkWQFT4A3YhXuqWrABFg0giuLyMh/A0QPQA9bATw2IUDxaxZQJHxTi2wFhFpdqpAAkpq8QXwYIl7gVQOKGCvFZAeEW9wBI7JM6Wswkpir2tZa4F0DiXxTivQAh6/mohWDJSbV4IEwyUsGZQshzmXO3eJ0K5DBjhXjVhVriTQCKPZc8rQKEhmu1BWVub82EVaN29TG0CFhi/o2lZQw9iT2xfzApAHdCwLWnCsCVKKiteW8M4BHYNvnClVTCdSC5iSNZp4fS5F/sUgGpKbiUTjTPHaDzCpwBaPJwIQmcr3AAAAAASUVORK5CYII=);background-size: 100% 100%;}


@media screen and (max-width: 1024px) {
    .wrapper{padding-left: 3%;padding-right: 3%}
    .activity-banner{height: 0;padding-bottom: 68%;background-image: url(../../index/activity/youhuiquan/images/banner-mobile.jpg);position: relative}
    .activity-banner .w900{position: absolute;width: 76%;height: 100%;left: 12%;}
    .activity-item-foot{padding: 10px}
    .activity-item-foot .activity-btn{display: none}
    .activity-item-foot .activity-desc{width: 100%;margin-right: 0;line-height: 30px}
    .activity-cell{position: relative}
    .activity-cell:before,.activity-cell:after{content:'';display: block;background-color: #fff;position: absolute;right: 20px;bottom: 15px;opacity: .6;}
    .activity-cell:before{width: 30px;height: 2px;}
    .activity-cell:after{width: 12px;height: 2px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(30deg);bottom: 18px;}
    .activity-btn-receive{width: 36%;padding-bottom: 36%;height: 0;bottom: -18%}
    .activity-list{margin-top: 18%}
    .activity-item-title{height: 140px}
    .activity-cell h3{font-size: 20px;margin-bottom: 5px}

    .dialog{width: 92%}
    .dialog-coupon .dialog-body{padding: 0}
    .dialog-form-item{display: inline-block}
    .dialog-form-item .dialog-form-item-name{display: none}

    .coupon-item li{margin-right: 5px;margin-left: 0;margin-top: 2px;margin-bottom: 2px}
    .coupon-item li:nth-child(3n){margin-right: 0}
}

@media screen and (max-width: 640px) {
    .activity-container{margin-top: 53px}

    .activity-btn-rule{font-size: 12px}
    .dialog{padding: 20px 15px}
    .dialog-close,.alertClose{top:15px;right: 15px;width: 20px;height: 20px}
    .activity-item{width: 100%;margin-top: -15px}

    .dialog-title h1{font-size: 18px;text-align: center;font-weight: normal}
    .dialog-title p{text-align: left;margin-top: 10px;color: #666}
    .dialog-form-tips{margin-top: 5px}
    .dialog-form-tips p{color: #666}

    .coupon-item li{width: calc(30.5vw - 16px);height:65px;padding: 10px}
    .coupon-item li .f14{font-size: 12px}
    .coupon-item li.coupon1{padding-left: 0;padding-right: 0;text-align: center}
    .coupon-item li.coupon1 .coupon-num{line-height: 45px}
    .coupon-desc{white-space: normal;padding-top: 5px;font-size: 8px}
    .coupon-num{font-size: 12px !important;margin-bottom: 5px;line-height: 1em}
    .coupon-num-price{font-size: 18px}

    .dialog-coupon .dialog-title{margin-bottom: 10px}

    .dialog-rule-item{background-color: #f9f9f9;max-height: 36vh;overflow-y: auto;padding: 10px}
    .dialog-rule-item p{font-size: 12px;line-height: 20px}

    .alertBox{width: 280px;margin-left: -140px;padding-left: 0;padding-right: 0}
    .alertMes{font-size: 14px;padding-bottom: 20px}
    .ConBtn,.cancel{width: 90px}
    .ConBtn{margin-left: 42px;margin-right: 10px}

}