@charset "utf-8";
body { background: #fff;}
/*卡片大图*/
.card { position: relative;}
.card-img { margin-top: 1rem; overflow: hidden; border-radius: 8px; position:relative;}
.card-img img { width: 100%;}
.preview-card .card-img:after,.e-gift-card-top .card-img:after,.give-card-container .card-img:after{ background: linear-gradient(to bottom, rgba(0,0,0,.25),rgba(0,0,0,0)); content: '';position: absolute; top: 0; right: 0; left: 0; bottom: 0; border-radius:16px;}
.card .card-info { position: absolute; top: .8rem; right: .8rem; bottom: .8rem; left: .8rem;}
.card .card-info .shop-logo { width: 40px; height: 40px; margin-right: .2rem; overflow: hidden; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; box-sizing: border-box; background-color: #fff;}
.card .card-info .shop-logo img { width: 100%;}
.card .card-info .name { line-height: 20px; color: #fff;}
.card .card-info .name h3 { font-size: .75rem; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 .3rem rgba(0,0,0,.5); overflow: hidden;}
.card .card-info .name p { font-size: .65rem; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 .3rem rgba(0,0,0,.5); overflow: hidden;}

/*选择卡片*/
.select-card-img { margin: 0 -5px;}
.select-card-img .swiper-slide { position: relative; padding: 5px;background: #fff; box-sizing: border-box; width: 29% !important;}
.select-card-img .swiper-slide .img { position: relative; width: 100%; overflow: hidden; border-radius:8px;box-sizing: border-box; border-width: 2px; border-style: solid; border-color: transparent;}
.select-card-img .swiper-slide .img img { width: 100%;}
.select-card-img .swiper-slide.active .img { position: relative;}
.select-card-img .swiper-slide.active .img:before { content: '\e6c6'; position: absolute; right: -1px; bottom: -1px; font-family: 'iconfont'; font-size:1rem; line-height: 1;}
.select-card-img .swiper-slide.active .img:after { content: '\e682'; position: absolute; right: 1px; bottom: 1px; z-index: 3; font-family: 'iconfont'; font-size: .45rem; line-height: 1; color: #fff;}

.shopping-card-content { position: relative; padding: 0 1rem;}
.shopping-card-content .shopping-card-title { margin-top: 1rem; margin-bottom: .1rem; font-size: 16px; line-height: 1.3rem; color: #353535; font-weight: normal;}
.shopping-card-content .shopping-card-list { font-size: 0;}
.shopping-card-content .shopping-card-list li { display: inline-block; width: 50%; padding-right: .5rem; margin-bottom: .65rem; cursor: pointer; box-sizing: border-box;}
.shopping-card-content .shopping-card-list li:nth-child(2n) { padding-right: 0; padding-left: .5rem;}
.shopping-card-content .shopping-card-list li .item-con { display: block; padding: 2px; background: #fff; border-radius: .4rem; box-shadow: 0 .3rem .3rem 0 rgba(0,0,0,.035);}
.shopping-card-content .shopping-card-list li .item-con .item-pic { width: 100%; height: auto; position:relative; padding-top: 60%; overflow: hidden;}
.shopping-card-content .shopping-card-list li .item-con .item-pic img { width:auto; height: auto; border-radius: .4rem; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 100%; max-height: 100%}
.shopping-card-content .shopping-card-list li .item-con .item-name { padding: 5px 5px 3px 5px; font-size: .6rem; line-height: 20px; color: #f2a560; text-align: center;}
.buy-history { position: relative; padding: .5rem 0; text-align: center;}
.buy-history a.go-bug-history { position: relative; margin: 0 auto; font-size: 14px; line-height: 18px; color: #63769b; cursor: pointer;}
.buy-history a.go-bug-history:after { content: ''; position: absolute; top: -10px; right: -100px; bottom: -10px; left: -100px;}
.buy-history a.go-bug-history i { display: inline-block; margin-top: -2px; margin-right: 3px; font-weight: 600; font-size: .6rem; vertical-align: middle;}

/*列表页样式*/
.main-content { min-height: calc(100vh - 50px); padding: 0 1rem; background: #fdfdfd;}
.card-list-title { padding: 15px 0; font-size: 14px; line-height: 20px; color: #353535;}
.card-list-title i { display: inline-block; margin-right: 3px; vertical-align: middle;}
.swiper-3d-banner { width: 100%; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; perspective: 1200px;}
.swiper-3d-banner .swiper-wrapper { margin-top: 10px}
.swiper-3d-banner .swiper-slide { width: 80%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style:  preserve-3d}
.swiper-3d-banner .swiper-slide .main-img { display: block; width: 85%; margin: 0 auto; border: 3px solid #fdfdfd; border-radius: .4rem;}
.swiper-3d-banner .swiper-slide.current .main-img { border: 3px solid #06bd04; border-radius: .4rem;}
.swiper-3d-banner .swiper-slide.current:before { content: ''; position: absolute; top: -8px; right: 12px; width: 22px; height: 22px; background: #06bd04; border-radius: 100%;}
.swiper-3d-banner .swiper-slide.current:after { content: '';position: absolute; top: -1px; right: 16px; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.card-list-con { position: relative; font-size: 0;}
.card-list-con li { display: inline-block; width: 50%; padding-right: .25rem; margin-bottom: .65rem; cursor: pointer; box-sizing: border-box;}
.card-list-con li:nth-child(2n) { padding-right: 0; padding-left: .25rem;}
.card-list-con li .item-con { position: relative; background: #fff; border: .06rem solid #e3e3e3; border-radius: .4rem; box-shadow: 0 0.3rem 0.3rem 0 rgba(0,0,0,.05);}
.card-list-con li .item-con .item-pic { width: 100%; height: auto; margin: .5rem 0; text-align: center;}
.card-list-con li .item-con .item-pic img { width: 90px; height: auto;}
.card-list-con li .item-con .item-info { font-size: .6rem; padding: 5px 10px;}
.card-list-con li .item-con .item-info .item-name { color: #353535; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.card-list-con li .item-con .item-info .item-price { color: #353535;}
.card-list-con li .item-con .item-handle { position: relative; height: 40px; border-top: .06rem solid #e9e9e9;}
.card-list-con li .item-con .item-handle a { position: relative; display: block; width: 100%; height: 40px;}
.card-list-con li .item-con .item-handle a .row { position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin-top: -1px; margin-left: -7px;border-radius: 20px;}
.card-list-con li .item-con .item-handle a .col { position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -1px; width: 2px; height: 14px;border-radius: 20px;}
.card-list-con li .item-con .item-handle a.decrease-btn .row { background-color: #888;}
.card-list-con li .item-con .item-handle a.decrease-btn { border-right: .06rem solid #f0f0f0;}
.card-list-con li .item-con .item-handle a.decrease-btn.hide { display: none !important;}
.card-list-con li .item-con .item-handle p{ line-height: 40px; color: #999; font-size: 14px; text-align: center; width: 100%; }
.card-list-con li .item-con .user-buy-num { position: absolute; top: -11px; right: -11px; display: none; width: 22px; height: 22px; font-size: .55rem; line-height: 22px; color: #fff; text-align: center;border-radius: 100%;}
.card-list-con li .item-con.current .user-buy-num { display: block;}
.main-content .card-footer { position: fixed; right: 0; bottom: 0; left: 0; display: -webkit-box; display: box; padding: 10px 1rem; margin: 0 auto; border-top: .06rem solid #eee; box-sizing: border-box; background: #fff;}
.main-content .card-footer .buy-btn { display: block; width: 90px; height: 40px; font-size: .75rem; line-height: 40px; color: #fff; text-align: center; cursor: pointer;border-radius: 20px;}
.main-content .card-footer .card-price-info { position: relative; -webkit-box-flex: 1; box-flex: 1; font-size: 12px; line-height: 14px;}
.main-content .card-footer .card-price-info .card-num { color: #353535;}
.main-content .card-footer .card-price-info .card-price { color: #353535; line-height: 25px; font-size: 16px;}
.main-content .card-footer .card-price-info .card-price em { font-size: 16px; line-height: 25px;}
.card-layer-content { position: fixed; right: 0; bottom: 0; left: 0; z-index: 211; display: none; margin: 0 auto; background: #fff;}
.card-layer-content.spec-menu-show { display: block;}
.card-layer-content .card-layer-colse { position: relative; display: block; height: 30px; padding: 10px 1rem 10px 0.75rem; cursor: pointer;}
.card-layer-content .card-layer-colse .row { position: absolute; top: 50%; left: .9rem; width: 16px; height: 2px; margin-top: -1px; margin-left: -8px; background-color: #000; border-radius: 20px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg);}
.card-layer-content .card-layer-colse .col { position: absolute; top: 50%; left: .9rem; width: 2px; height: 16px; margin-top: -8px; margin-left: -1px; background-color: #000;border-radius: 20px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg);}
.card-layer-content .card-layer-box { position: relative; max-height: calc(100vh - 160px); overflow-y: scroll; border-top: .06rem solid #e5e5e5; -webkit-overflow-scrolling: touch;}
.card-layer-content .card-layer-top { position: relative; display: flex; padding: 1.25rem 1rem; align-items: center; border-top: .06rem solid #e5e5e5; border-bottom: .06rem solid #e5e5e5;}
.card-layer-content .card-layer-top .card-pic { width: 90px; height: 54px;}
.card-layer-content .card-layer-top .card-pic img { display: block; width: 90px; height: 54px;}
.card-layer-content .card-layer-top .card-info { position: relative; display: flex; flex: 1; flex-direction: column; height: 54px; padding: 0 5px 0 10px;}
.card-layer-content .card-layer-top .card-info .card-name { flex: 1; font-size: 16px; line-height: 20px; color: #353535; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.card-layer-content .card-layer-top .card-info .card-price { font-size: 13px; color: #06bd04;}
.card-layer-content .card-layer-top .card-buy-btn { position: relative; display: block; width: 30px; height: 30px; background: #06bd04; border-radius: 4px;}
.card-layer-content .card-layer-top .card-buy-btn .row { position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin-top: -1px; margin-left: -7px; background-color: #fff; border-radius: 20px;}
.card-layer-content .card-layer-top .card-buy-btn .col { position: absolute; top: 50%; left: 50%; width: 2px; height: 14px; margin-top: -7px; margin-left: -1px; background-color: #fff; border-radius: 20px;}
.card-layer-content .card-layer-con { padding: 1.25rem 1rem;}
.card-layer-content .card-layer-con dl { display: flex;}
.card-layer-content .card-layer-con dl dt { min-width: 75px; margin-right: 5px; line-height: 25px; color: #353535;}
.card-layer-content .card-layer-con dl dd { flex: 1; line-height: 25px; color: #666;}

/*支付成功*/
.success-container { position: relative; min-height: calc(100vh); padding-top: 30%; background: #fff; box-sizing: border-box;}
.success-content { font-size: 14px; line-height: 20px; text-align: center;}
.success-content .iconfont { display: block; width: 60px; height: 60px; margin: 0 auto .5rem; font-size: 30px; line-height: 65px; color: #fff; text-align: center; overflow: hidden; background: #06bd04; border-radius: 50%;}
.success-content .success-desc { padding-bottom: 15%; color: #666;}
.success-content .shop-name { margin-bottom: 10px; font-weight: normal; font-size: 14px; color: #353535;}
.success-content .amount { font-weight: 700; font-size: 28px; color: #353535;}
.success-container .btn { position: absolute; left: 50%; bottom: 30%; display: block; width: 120px; height: 38px; line-height: 38px; color: #fff; text-align: center; background-color: #06bd04; border-radius: 19px; -webkit-transform: translateX(-50%); transform: translateX(-50%);}

/*tab切换*/
ul.tab-nav {display: flex;text-align: center;margin:10px 15px 0;}
ul.tab-nav li{ width: 50%; line-height: 28px; height: 28px; display:block;border-style: solid;border-width: 1px; border-radius:14px 0 0 14px;}
ul.tab-nav li:last-child{ border-radius: 0 14px 14px 0; }
ul.tab-nav li.active { color: #fff; }

/*购买&赠送记录*/
.record-list-wrap { margin-top: .5rem;}
.record-list .record-item { position: relative; padding: .5rem; background: #fff;}
.record-list .record-item:after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #eee; transform: scaleY(.5);}
.record-list .record-item .record-info-top { position: relative;}
.record-list .record-item .record-info-top a{ z-index: 1; }
.record-list .record-item .img { width: 30%;position: relative;}
.record-list .record-item .img img { width: 100%; border-radius: 8px;}
.record-list .record-item .card-tag.used{ position: absolute; top: 0; right:30px; z-index: 2; display: block; width: 55px; height: 55px; overflow: hidden; background-image: url(../images/coupon_used.png); background-position: left bottom; background-size: 55px;}
.record-list .record-item .card-tag.expired{position: absolute; top: 0; right:30px; z-index: 2; display: block; width:55px; height: 55px; overflow: hidden; background-image: url(../images/coupon_expired.png);; background-position: left bottom; background-size: 55px;}
.record-list .record-item .card-tag.no-start{position: absolute; top: 0; right:30px; z-index: 2; display: block; width:55px; height:55px; overflow: hidden; background-image: url(../images/coupon_no_start.png);; background-position: left bottom; background-size: 55px;}
.record-list .record-item .card-tag.geted{position: absolute; top: 0; right:30px; z-index: 2; display: block; width:55px; height:55px; overflow: hidden; background-image: url(../images/give-over.png);; background-position: left bottom; background-size:55px;}
.record-list .record-item .card-tag.present{position: absolute; top: 0; right: 30px; z-index: 2; display: block; width: 55px; height:55px; overflow: hidden; background-image: url(../images/give-on.png);; background-position: left bottom; background-size:55px;}
.record-list .record-item .card-tag.cancel{position: absolute; top: 0; right:30px; z-index: 2; display: block; width: 55px; height: 55px; overflow: hidden; background-image: url(../images/give-cancel.png);; background-position: left bottom; background-size: 55px;}
.record-list .record-item .info { display: flex; flex-direction: column; padding-left: .5rem;}
.record-list .record-item .name { font-weight: normal; font-size: .7rem; line-height: 1.4; color: #353535;}
.record-list .record-item .buy-time { flex: 1; height: 100%; font-size: .6rem; color: #999;}
.record-list .record-item .price { font-size: .6rem; line-height: 1; color: #666;}
.record-list .record-item .record-info-top .icon-fanhui-copy { position: absolute; right: 0; bottom: 50%; font-size: .6rem; line-height: 1; color: #bbb; cursor: pointer; transition: all .2s;}
.record-list .record-item .record-info-top .icon-fanhui-copy:after { content: ''; position: absolute; top: -.5rem; left: -2rem; display: block; width: 3rem; height: 2rem; cursor: pointer;}
.record-list .record-item .detail { height: 0; overflow: hidden; transition: all .2s;}
.record-list .record-item .detail ul { padding: .3rem .5rem; margin-top: .5rem; line-height: 1.6; background: #f9f9f9; border-radius: 8px;}
.record-list .record-item .detail span { font-size: .6rem; color: #666;}
.record-list .record-item .detail span:first-child { color: #999;}
.record-list .record-item.active .record-info-top .icon-fanhui-copy { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);}
.record-list .record-item.active .detail { height: auto;}
/*赠送*/
.record-list .record-item .give-detail ul { padding: .5rem;}
.record-list .record-item .give-detail .user-img { width: 30px; height: 30px; margin-right: .3rem; overflow: hidden; border-radius: 50%;}
.record-list .record-item .give-detail .user-img img { width: 100%;}
.record-list .record-item .give-detail .name h3 { font-weight: normal; font-size: .6rem; color: #353535;}
.record-list .record-item .give-detail .name .state { line-height: 1; color: #999; vertical-align: top;}
.record-list .record-item .give-detail .time { font-size: .6rem; line-height: 1; color: #999;}
.record-list .record-item .state{height:25px;display: flex;align-items: flex-end;justify-content: column-reverse;flex-direction: column-reverse;}
.record-list .record-item .btn{width: 80px;font-size:12px;text-align: center;line-height:25px; position: relative; margin-top: 10px;}
.record-list .record-item .btn:before{text-align: center;line-height:60px;border: 1px solid #d7d7d7;border-radius:30px;content: "";position: absolute;left: 0px;top: 0px;width: 200%; height: 200%;transform-origin: 0 0;    transform: scale(.5,.5);box-sizing: border-box;-webkit-transform-origin: 0 0;-webkit-transform: scale(.5,.5);   -webkit-box-sizing: border-box;}

/*赠送礼品卡*/
.give-card-container .card { margin: 1rem 1rem 0;}
.give-card-container .card-list { margin: .5rem 1rem;}
.give-card-container .card-list .name { color: #353535;}
.give-card-container .card-list .num { display: block; width: 1.2rem;}
.give-card-container .card-list .price { display: block; width: 4rem; text-align: right;}
/*留言*/
.give-card-container .form-group.leave-message dl dt { width: 2.5rem;}
.give-card-container .form-group.leave-message dl dd { padding-left: 2.5rem;}
.give-card-container .form-group.leave-message dl dd .textarea { display: block; width: 100%; padding: .5rem 0; font-size: .7rem; line-height: 1.25rem; color: #666; overflow: hidden; border: none; resize: none;}

.give-card-container .form-group.leave-message .two{
bottom:0px;right:10px;position:absolute;
}
/*匿名赠送开关*/
.form-switch { position: relative; height: 2.25rem;}
.form-switch input[type="checkbox"] { display: none;}
.form-switch .indicator { position: absolute; top: 50%; right: 1px; z-index: 9; width: 30px; height: 8px; padding: 9px; margin-top: -13px; background-color: #fafbfa; border-radius: 50px; -webkit-transition: all .1s ease-in; transition: all .1s ease-in;}
.form-switch .indicator:before { content: ''; position: absolute; top: 0; left: 1px; z-index: 999999; width: 26px; height: 26px; background: white; border-radius: 100px; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; box-shadow: 0 3px 1px rgba(0,0,0,.05), 0 0 1px rgba(0,0,0,.3);}
.form-switch input[type="checkbox"]:checked + .indicator:before { content: ''; position: absolute; left: 22px; border-radius: 100px;}
.form-switch input[type="checkbox"]:checked + .indicator:after { content: ''; position: absolute; font-size: 1.5em; background: #4cda60; box-shadow: 0 0 1px #4cda60;}
.form-switch input[type="checkbox"] + .indicator:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; box-sizing: border-box; -webkit-transition: box-shadow .1s ease-in; transition: box-shadow .1s ease-in; box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);}
.middle-content .submit-btn { padding: 0; text-align: center; margin-top: 30px;}
.middle-content .submit-btn .btn-submit{border-radius: 1rem !important;}
.middle-content .submit-btn .btn-submit.bg-white{ color: #666; position: relative; background: #fff;}
.middle-content .submit-btn .btn-submit.bg-white:after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid; border-radius: 2rem; box-sizing: border-box; transform-origin: 0 0; transform: scale(.5,.5); border-color:#666;}
.middle-content .submit-btn .tooltip { display: inline-block; padding: .5rem 0; font-size: .6rem; color: #06bd04;}

/*卡片预览*/
.preview-card-container { padding: 10%; box-sizing: border-box;}
.preview-card { padding: .5rem .5rem .6rem; background: #fff; border-radius: 8px;box-shadow: 0 0.3rem 0.3rem 0 rgba(0,0,0,.035);}
.preview-card>img{ max-width: 100%; }
.preview-card .card-img { margin-top: 0;}
.preview-card .leave-message-box { max-height: 3rem; padding: .5rem 0; font-size: .7rem; color: #353535; overflow: hidden;}
.preview-card .leave-message-info {padding:10px; font-size: .6rem; color: #353535; overflow: hidden; background: #f8f8f8;    border-radius: 0 0 8px 8px;}
.preview-card .other-info{ padding: 1rem 0; line-height: 1.4; color: #666; text-align: right;}
.preview-card .other-info .info-item{ line-height:1rem; }
.preview-card .other-info .info-item img{ width: .8rem; height: .8rem;margin-right: 5px; border-radius: 100%;}
.preview-card .time { line-height: 1.4; color: #666; text-align: center;}
.preview-card-container .submit-btn { width: 100%;}

/*生成微信二维码*/
.qr-container { position: fixed; top: 50%; left: 50%; z-index: 211; width: 80%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.qr-container .qrcode { width: 40%; padding: .8rem 0; margin: 0 auto;}
.qr-container .qrcode img { width: 100%;}
.qr-container .save-btn { position: relative; display: block; margin: 1rem 0 .6rem; line-height: 40px; color: #fff; text-align: center;}
.qr-container .save-btn:after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid #fff; border-radius: 8px; box-sizing: border-box; transform-origin: 0 0; transform: scale(.5,.5);}
.qr-container .tooltip { padding: .2rem 0; color: #fff; text-align: center;}

/*会员中心-电子礼品卡列表*/
.e-gift-card-list { padding: 0 .5rem;}
.e-gift-card-list .card-item { padding: .8rem .6rem 1rem; margin-top: .5rem; background-repeat: no-repeat; background-size: 100% auto; border-radius: 8px; position:relative;}
.e-gift-card-list .card-item:before{background: linear-gradient(to bottom, rgba(0,0,0,.25),rgba(0,0,0,.05));content: '';position: absolute;top: 0;right: 0;left: 0;bottom: 0;border-radius:8px; }
.e-gift-card-list .card-item .card-info .shop-logo { width: 40px; height: 40px; margin-right: .2rem; overflow: hidden; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; box-sizing: border-box; background: #fff;}
.e-gift-card-list .card-item .card-info .shop-logo img { width: 100%;}
.e-gift-card-list .card-item .card-info .name { line-height: 20px; color: #fff;}
.e-gift-card-list .card-item .card-info .name h3 { position: relative; padding-right: 4rem; font-size: .65rem; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 .3rem rgba(0,0,0,.5); overflow: hidden;}
.e-gift-card-list .card-item .card-info .name .tag { position: absolute; top: 0; right: 0; padding: 0 .2rem; font-size: 12px; line-height: 20px; color: #fff;border-radius: 20px;}
.e-gift-card-list .card-item .card-info .name .tag:after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid #fff; border-radius: 20px; box-sizing: border-box; transform-origin: 0 0; transform: scale(.5,.5);}
.e-gift-card-list .card-item .card-info .name p { font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 .3rem rgba(0,0,0,.5); overflow: hidden;}
/*会员中心-电子礼品卡详情*/
.e-gift-card-top { background: #fff; overflow: hidden;}
.e-gift-card { margin: 1rem 1rem .5rem;}
.e-gift-card.card-new{margin:1rem; position: relative;}
.e-gift-card .card-info { display: flex; flex-flow: column;}
.e-gift-card .card-info .ub { height: 100%;}
.e-gift-card .card-info .qrcode { display: block; width: 1rem; height: 1rem; padding: 2px; background: #fff; border-radius: .15rem;}
.e-gift-card .card-info .qrcode img { display: block; width: 100%; border-radius: .15rem;}
.e-gift-card .card-num { padding-bottom: .5rem; font-size: .8rem; font-weight: 700; color: #fff; text-shadow: 0 0 .3rem rgba(0,0,0,.2);}
.e-gift-card.card-new .card-num{ text-align: right; font-size: .6rem; padding-bottom:0; position: absolute;bottom:-.5rem; right:0; font-weight: normal; }
.e-gift-card-amount { padding-bottom: 1rem; margin: 0 1rem; line-height: 2.25rem; text-align: center;}
.e-gift-card-amount .amount { height: 2.25rem; color: #353535;}
.e-gift-card-amount .amount span { font-weight: 300; font-size: .9rem; color: #f23030; vertical-align: bottom;}
.e-gift-card-amount .btn { position: relative; display: block; width: 120px; height: 32px; margin: 0 auto; line-height: 33px; color: #06bd04; border-radius: 16px;}
.e-gift-card-amount .btn:after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid; border-radius: 32px; box-sizing: border-box; transform-origin: 0 0; transform: scale(.5,.5);}
.e-gift-card-menu .menu-item { position: relative; display: block; height: 2.25rem; padding: 0 .5rem; line-height: 2.25rem; color: #353535; background: #fff;}
.e-gift-card-menu .menu-item:before { content: ''; position: absolute; top: 18px; right: .5rem; width: 8px; height: 8px; border: 1px solid #9b9b9b; border-width: 0 1px 1px 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);}
.card-receive-con{margin: 0 8% 10px;width: 84vw;box-sizing: border-box;text-align: center;border-top: 1px dashed #e5e5e5;}
.card-receive-con .des-info{ line-height: 20px; color: #999; font-size: 14px; margin-bottom: .25rem;}
.card-receive-con .des-info span:first-child{ text-align: left; }
.card-receive-con .receive-title{ font-size:16px; color: #353535; text-align: left; line-height: 30px; padding:10px 0;}
.card-receive-con p{ font-size:.6rem; color: #999; text-align: left;}
.card-receive-con .receive-user-item{ position: relative; display: flex; align-items: center; }
.card-receive-con .receive-user-item img{ width:45px;height:45px; border-radius: 100%; }
.card-receive-con .receive-user-item h3{ font-size: 15px; color: #353535; flex: 1; font-weight: normal; text-align: left; margin:0 .35rem;}
.card-receive-con .receive-user-item .user-info{ display: flex; flex-direction: column;justify-content: space-around; height:50px; text-align: right;}
.card-receive-con .receive-user-item .user-info .receive-state{ font-size:14px; color: #666; }
.card-receive-con .receive-user-item .user-info .receive-time{ color: #999; }
/*礼品卡编码*/
.e-gift-card-qrcode { padding-top: 15%;}
.e-gift-card-qrcode .shop-logo { width: 60px; height: 60px; margin: 0 auto .5rem; overflow: hidden; border-radius: 100%;}
.e-gift-card-qrcode .shop-logo img { width: 100%;}
.e-gift-card-qrcode .tooltip { padding: .5rem 0; font-size: .7rem; color: #999; text-align: center;}
.e-gift-card-qrcode .qrcode { text-align: center;}
.e-gift-card-qrcode .qrcode img { width: 40%; border-radius: .4rem;}
.e-gift-card-qrcode .qrcode .card-num { padding-top: 1rem; font-size: .85rem; color: #666;}
/*使用明细*/
.e-gift-card-balance { padding: .8rem .5rem; background: #fff;}
.e-gift-card-balance h3 { font-size: .8rem; font-weight: normal; color: #353535;}
.e-gift-card-balance p { font-size: 1rem; font-weight: 300; color: #f23030;}
.e-gift-card-detail-list .detail-item { position: relative; display: block; height: 2.25rem; padding: 0 .5rem; line-height: 2.25rem; color: #353535; background: #fff;}
.e-gift-card-detail-list .detail-item .time { float: left; color: #999;}
.e-gift-card-detail-list .detail-item .amount { float: right;}

/*领取成功页面*/
.receive-card-success { min-height: calc(100vh - 3rem - 51px);}
.receive-card-success .card-info { text-align: center; overflow: hidden;}
.receive-card-success .card-info .card-img { width: 80%; margin: 1.2rem auto; overflow: hidden; border-radius: 8px; box-shadow: 0 0 .2rem rgba(0,0,0,.1);}
.receive-card-success .card-info .card-img img { width: 100%;}
.receive-card-success .card-info .tooltip { width: 100%;}
.receive-card-success .card-info .card-name { padding: .5rem 0; font-size: .9rem; color: #353535;}
.receive-card-success .card-info .amount { font-size: .75rem; color: #06bd04;}
.receive-card-success .card-info .card-list { margin: .5rem 2rem;}
.receive-card-success .card-info .card-list .name { color: #353535; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.receive-card-success .card-info .card-list .num { display: block; width: 1.2rem;}
.receive-card-success .card-info .card-list .price { display: block; width: 4rem; text-align: right;}
.receive-card-success .user-info { position: relative; padding: .5rem; margin: 3rem .5rem 0; background: #fff; border-radius: .4rem;}
.receive-card-success .user-info:after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid #eee; border-radius: .8rem; box-sizing: border-box; transform-origin: 0 0; transform: scale(.5,.5); }
.receive-card-success .user-info .user-img { width: 40px; height: 40px; margin-right: .5rem; overflow: hidden; border-radius: 50%;}
.receive-card-success .user-info .user-img img { width: 100%;}
.receive-card-success .user-info h3 { font-weight: normal; font-size: .7rem; color: #353535;}
.receive-card-success .user-info p { color: #666;}
.receive-card-success-container .footer-link { text-align: center;}
.receive-card-success-container .footer-link span { padding: 0 .3rem;}
.receive-card-success-container .footer-link a { color: #354d80;}
.give-share-popup{ position: fixed; top: 0; left: 0; right:0;max-width:640px;min-width: 320px;margin: 0 auto; z-index: 223; height: 100%; width: 100%; background-color: rgba(0,0,0,.8);}
.give-share-popup img{max-width: 100%;}

/*购买历史记录*/
.history-con ul li{ position: relative;width: 100%;height: auto; margin-bottom:10px;display: flex;justify-content: space-between; padding:10px 15px; box-sizing: border-box;}
.history-con ul li:after {height:1px;content:'';border-top:1px solid #e3e5e9; position:absolute;bottom:-1px;left:10px; right:10px; transform:scaleY(0.5);-webkit-transform:scaleY(0.5);z-index:10}
.history-con ul li:last-child:after{ content: none; }
.history-con ul li img{width: 90px;height:54px;border-radius:8px; margin-right: 15px;}
.history-con ul li .card-detail{flex: 1;height: 100%}
.history-con ul li .card-detail h3{ font-size:.7rem; color: #353535; line-height: 20px; font-weight: normal;}
.history-con ul li .card-detail .time{ font-size: 12px; color: #666; line-height: 18px;}
.history-con ul li .card-detail .price{ font-size:.75rem; font-weight: bold; margin:5px 0 10px; }
.history-con ul li .state{height:25px;display: flex;align-items: flex-end;justify-content: space-between}
.history-con ul li .state p{font-size: 12px; color: #666;}
.history-con ul li .state .btn{width: 80px;font-size:12px;text-align: center;line-height:25px; position: relative; color: #666;}
.history-con ul li .state .btn:before{text-align: center;line-height:60px;border: 1px solid #d7d7d7;border-radius:30px;content: "";position: absolute;left: 0px;top: 0px;width: 200%; height: 200%;transform-origin: 0 0;    transform: scale(.5,.5);box-sizing: border-box;-webkit-transform-origin: 0 0;-webkit-transform: scale(.5,.5);   -webkit-box-sizing: border-box;}