@charset "utf-8";
.header-left a,#show_more { background: url(../images/top1.png) no-repeat; background-size: auto 230px;}
.header { position: absolute; top: 0; z-index: 9; width: 100%; height: 50px; background: rgba(255,255,255,0.1); border: 0;}
.header-left { float: left; width: 13%; height: 50px;}
.header-left a { display: block; width: 30px; height: 50px; background-position: 5px 12px;}
.header-right { float: right; width: 13%; height: 50px; text-align: center;}
.top_bar { float: none; display: block; width: 30px; height: 50px; margin: auto;}
#show_more { width: 30px; height: 50px; background-position: 5px -23px;}
.header-middle { float: left; width: 74%; padding-top: 8px; margin: auto; font-size: 18px; text-indent: 30px;}
.header-middle .text-box { position: relative; display: block; width: 100%; height: 34px; background: #efefef; border-radius: 5px;}
.header-middle .text-box .text { display: block; width: 100%; height: 34px; font-size: 14px; line-height: 35px; color: #666; text-indent: 10px; background: #fff; border: 0; border-radius: 3px; -webkit-appearance: none; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-rtl-ordering: logical; -webkit-user-select: text;}
.header-middle .text-box .submit { position: absolute; top: 0; right: 0; display: block; width: 34px; height: 34px; background: url(../images/search.png) no-repeat center center; background-size: auto 30px; border: 0;}

.coupon-list { width: 95%; margin: auto;}
.coupon-list .coupon-item { position: relative; display: -webkit-box !important; display: box !important; margin-top: 10px; background: #fff; border-radius: .15rem;}
.coupon-list .coupon-item .coupon-geted { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 47px; height: 47px; overflow: hidden; background-image: url(../images/coupon_geted.png); background-position: left bottom; background-size: 65px;}
.coupon-list .coupon-item .coupon-getend { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 47px; height: 47px; overflow: hidden; background-image: url(../images/coupon_getend.png); background-position: left bottom; background-size: 65px;}
.coupon-list .coupon-item .coupon-item-left { position: relative; z-index: 2; display: flex; width: 32%; padding: .5rem 0; text-align: center; border-radius: .1rem 0 0 .1rem;}
.coupon-list .coupon-item .coupon-item-left:before, .coupon-list .coupon-item .coupon-item-left:after { content: ""; position: absolute; right: -4px; height: 8px; width: 8px; background: #f3f3f3; border-radius: 8px;}
.coupon-list .coupon-item .coupon-item-left:before { top: -4px;}
.coupon-list .coupon-item .coupon-item-left:after { bottom: -4px;}
.coupon-list .coupon-item .coupon-item-left .coupon-item-left-inner { flex: 1; padding: .5rem .3rem;}
.coupon-list .coupon-item .coupon-item-left .coupon-item-left-inner:before { content: ''; position: absolute; top: -1px; bottom: -1px; left: -1px; width: .12rem; background-image: url(../images/user-bonus-bg.png); background-size: 100% auto; background-position: left center;}
.coupon-list .coupon-item .coupon-item-left .coupon-item-left-inner:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to right, rgba(255,255,255,.2),rgba(255,255,255,.01));}
.coupon-list .coupon-item.coupon-item-ed .coupon-item-left { background: #c3c3c3;}
.coupon-list .coupon-item .coupon-item-left .coupon-num { position: relative; z-index: 2; font-size: .6rem; line-height: 1.6rem; color: #fff;}
.coupon-list .coupon-item .coupon-item-left .coupon-num span { padding-right: .1rem; vertical-align: baseline;}
.coupon-list .coupon-item .coupon-item-left .coupon-num em { font-size: 1.2rem; font-weight: 700;}
.coupon-list .coupon-item .coupon-item-left .coupon-condition { font-size: .5rem; line-height: 20px; color: #fff;}
.coupon-list .coupon-item .coupon-item-right { display: flex; flex-direction: column; -webkit-box-flex: 1; box-flex: 1; position: relative; padding: .5rem .4rem; box-sizing: border-box;}
.coupon-list .coupon-item .coupon-item-right .coupon-right-top { flex: 1;}
.coupon-list .coupon-item .coupon-item-right .coupon-right-top h3 { font-weight: normal; font-size: 15px; line-height: 1rem; color: #353535;}
.coupon-list .coupon-item .coupon-item-right .coupon-right-top .coupon-range { font-size: 13px; line-height: .8rem; color: #666;}
.coupon-list .coupon-item .coupon-item-right .coupon-right-top .coupon-range a { line-height: .8rem; font-size: 13px;color: #666;}
.coupon-list .coupon-item .coupon-item-right .coupon-right-bottom { display: flex; align-self: flex-end;}
.coupon-list .coupon-item .coupon-item-right .coupon-right-bottom .btn { position: relative; display: block; width: 3rem; height: 1rem; font-size: .55rem; line-height: 1rem; text-align: center; vertical-align: top; overflow: hidden; border-radius: 1rem;}
.coupon-list .coupon-item .coupon-item-right .coupon-right-bottom .btn: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);}
.coupon-list .coupon-item.coupon-item-ed .coupon-item-right .coupon-right-bottom .btn { color: #ddd;}
.coupon-list .coupon-item.coupon-item-ing .coupon-item-right .coupon-right-bottom .btn:after { display: none;}
.coupon-list .coupon-item.coupon-item-ing .coupon-item-right .coupon-right-bottom .btn { color: #fff;}
.coupon-list .coupon-item .coupon-item-right .coupon-time { font-size: .5rem; line-height: 1rem; color: #999; border-top: 1px dashed #ececec; padding-top: 5px; margin-top: 7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.coupon-list .coupon-item .coupon-item-right .coupon-range-box{ border-top: 1px dashed #ececec; padding-top: 5px; margin-top: 5px;}
.coupon-list .coupon-item .coupon-item-right .coupon-range-box i{ top: 7px;}