@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-03-23 18:27:10
 * @version $Id$
 */
/*优惠券详情*/
.container .colimain{
    position: absolute;
    width:92%;
    left:50%;
    top:2.49vh;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
}
.colimain .coilinfo{
    width:100%;
    background-color: #fff;
    border-radius: 4px 4px  0 0;
    -webkit-border-radius: 4px 4px  0 0;
}
.coilinfo>div,.colipartic>div,.colipro>div{
    width:90%;
    margin:0 auto;
}
.coilinfo  .colititle{
    width:100%;
    padding:2.16vh 0 5.8vh;
    position: relative;
}
.colititle>div{
    position: absolute;
    right:0;
    width:9.87vw;
    height: 9.87vw;
    background:url("../../images/Coupon/smallcode.png") no-repeat;
    background-size:4.8vw 4.8vw; 
    background-position: center center;
    border:1px solid #ece9e9;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 0px 0px 16px 2px #eee;
    -webkit-box-shadow: 0px 0px 16px 2px #eee;
} 
.colititle>h2{
    width:100%;
    text-align: center;
    margin-top: 4vh;
}
.coilinfo .coliitems>ul>li{
    width:100%;
    font-size: 0;
    list-style: disc;
    line-height: 4.6vh;
}
.coliitems>ul>li>i{
    display: inline-block;
    width:1.6vw;
    height: 1.6vw;
    background-color: #cecece;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-right: 1.3vw;
    vertical-align: middle;
}
.coliitems>ul>li>span{
    display: inline-block;
    width:30%;
    vertical-align: middle;
}
.coliitems>ul>li>em{
    display: inline-block;
    width:61%;
    text-align: right;
    vertical-align: middle;
}
.coilinfo .colibtn{
    padding-top: 3.6vh;
}
.colibtn>button{
    display: block;
    width:100%;
    height: 6.64vh;
    line-height: 6.64vh;
    border:1px solid #f23150;
    text-align: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-bottom: 1.66vh;
}
.colibtn>button.colinow{
    background-color: #f23150;
}
.colibtn>button.colichange{
    background-color: #fff5f7;
    color:#f23150;
}
.coilinfo .colishow{
    width:100%;
    text-align: center;
    color:#f23150;
    padding:1vh 0 2.48vh 0;
}
.coliline{
    width:100%;
    height: 4.3vw;
    background-color: #fff;
    position: relative;
}
.coliline>i{
    display: inline-block;
    width:4.3vw;
    height: 4.3vw;
    background-color: #f23150;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
}
.coliline>i:first-child{
    left:-2.15vw;
}
.coliline>i:last-child{
    right:-2.15vw;
}
.coliline>em{
    display: inline-block;
    border:1px dashed #e4e4e4;
    position: absolute;
    top:50%;
    left:2.15vw;
    right: 2.15vw;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
}
.colipartic{
    width:100%;
    background-color: #fff;
    margin-bottom: 2.49vh;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    padding-bottom:5vh;
}
.colipartic .coliuse,.colipartic .colipro{
    padding:2.16vh 0;
}
.coliuse>h2,.colipro>h2{
    width:100%;
    height: 3vh;
    line-height: 3vh;
    border-left:3px solid #f23150;
    text-indent: 1.6vw;
    font-weight: bold;
    margin-bottom: 1.8vh;
}
.coliuse>ul,.colipro>ul{
    /*padding:2.32vh 0 3.15vh 0;*/
    /*padding:0 0 3.15vh 0;
    border-bottom: 1px solid #e4e4e4;*/
}
.coliuse>ul>li,.colipro>ul>li{
    line-height: 2.6vh;
}

/*优惠券详情1*/
.colimain .spectitle{
    width:100%;
    text-align: center;
    background-color: #fff;
    padding:6.47vh 0;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
}
.colimain .specbarcode{
    width:100%;
    background-color: #fff;
    padding-bottom: 4.98vh;
}
.specbarcode>img{
    display: block;
    width:75.47vw;
    height: auto;
    margin:0 auto;
}
.colimain .speccode{
    width:100%;
    text-align: center;
    background-color: #fff;
}
.speccode>img{
    display: block;
    width:41.34vw;
    height: auto;
    margin:0 auto;
}
.speccode>span{
    display: block;
    margin-top: 1.4vh;
}
.colimain .specbtn{
    width:100%;
    padding:5.8vh 0 3.32vh 0;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
   
}
.specbtn>button{
    display: block;
    width:90%;
    height: 7.3vh;
    line-height: 7.3vh;
    text-align: center;
    border:1px solid #f23150;
    color:#f23150;
    border-radius: 3px;
    -webkit-border-radius: 3px;
     margin:0 auto;
}

/*领取优惠券*/
.givecontainer{
    width: 100%;
    height: 100%;
    background:url("../../images/Coupon/givecouponbg.jpg") no-repeat;
    background-size: cover;
    background-position: center top;
}
.giveinfo{
    width: 92%;
    position: absolute;
    top:51.1vh;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    background-color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 2px 4px 6px #d63652;
}
.giveinfo>p{
    width:100%;
    padding:4.65vh 0;
    text-align: center;
}
.giveinfo>p>i{
    color:#f3335d;
    margin:0 1vw;
}
.giveinfo .givemoney{
    width: 100%;
    text-align: center;
    color:#f3335d;
    padding:1.4vh 0;
}
.givemoney>em{
    font-weight: bold;
    font-family: PingFangSC-Regular, sans-serif;
}
.givemoney>span{
    font-size: 6rem;
    font-family: PingFangSC-Regular, sans-serif;
}
.giveinfo .givetel{
    width:100%;
    height: 4.5rem;
    margin:3.65vh 0 1.8vh 0;
    position: relative;
}
.givetel>input{
    display: block;
    position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    z-index:1;
    width:90%;
    height: 4.5rem;
    line-height: normal;
    text-align: center;
    background-color: #f0f0f0;
    border-radius: 26px;
    -webkit-border-radius: 26px;
}
.givetel>input ::-webkit-input-placeholder { 
    color: #999; 
}
.givetel>div{
    position: absolute;
    top:2px;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    background-color: #dcdcdc;
    width:90%;
    height: 4.5rem;
    border-radius: 26px;
    -webkit-border-radius: 26px;
}
.givebtn{
    width:100%;
    padding-bottom: 3.2vh;
    position: relative;
    height: 4.5rem;
}
.givebtn>button{
    display: block;
    position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    z-index:1;
    width:90%;
    height: 4.5rem;
    line-height: 4.5rem;
    color:#5b1112;
    text-align: center;
    background-color: #ffe544;
    border-radius: 26px;
    -webkit-border-radius: 26px;
    border:0;
    font-weight: bold;
}
.givebtn>div{
    position: absolute;
    top:2px;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    background-color: #d9c12e;
    width:90%;
    height: 4.5rem;
    border-radius: 26px;
    -webkit-border-radius: 26px;
}

/*我的优惠券*/
.ourtitle{
    width:100%;
    height: 6.64vh;
    position: fixed;
    top:0;
    z-index:20;
    background-color: #fff;
    display: box;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
}
.ourtitle>div{
    height: 6.64vh;
    line-height: 6.64vh;
    box-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
}
.ourtitle>div>a{
    display: inline-block;
    color:#111;
    height: 3.82vh;
    line-height: 3.82vh;
    margin-top: 1.41vh;
}
.ourtitle>div.current>a{
    color:#f23150;
    border-bottom: 2px solid #f23150;
}
.oursstate{
    width:100%;
    padding-top: 6.64vh;
}
.oursstate .oursnotused,
.oursstate .oursoverused,
.oursstate .oursfailed
{
    width: 92vw;
    margin:0 auto;
}
.oursnotused .oursitems,
.oursoverused .oursitems,
.oursfailed .oursitems
{
    position: relative;
    width:100%;
    height: 20vh;
    margin-top: 1.66vh;
    background-color: #fff;
    border-radius: 4px;
    font-size: 0;
}
.oursitems>em,.oursitems>span{
    position: absolute;
    left:6.3vw;
    display: block;
    width: 3.4vw;
    height: 3.4vw;
    background-color: #ebebeb;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}
.oursitems>em{
    top:-1.7vw;
}
.oursitems>span{
    bottom:-1.7vw;
}
.oursitems .ourstitle{
    display: inline-block;
    width:8vw;
    height: 20vh;
    text-align: center;
    vertical-align: top;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
}
.oursitems .oursinfo{
    display: inline-block;
    width:84vw;
    height: 20vh;
    vertical-align: top;
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
}
.oursinfo .oursnum{
    width:24vw;
    height: 20vh;
    line-height: 20vh;
    text-align: center;
}
.oursnum>span{
    font-size: 3.4rem;
}
.oursnum>span.fourword{
    font-size: 2.5rem;
}
.oursnum>span.fiveword{
    font-size: 2.1rem;
}
.oursnum>span.sixword{
    font-size: 1.7rem;
}
.oursnum>span.severword{
     font-size: 1.5rem;
}
.oursinfo .ourslist{
    width:60vw;
}
.ourslist>ul{
    position: relative;
    width:94%;
    height: 15.6vh;
    margin-top: 2vh;
}
.ourslist>ul>li{
    width:100%;
    margin-bottom: 1vh;
}
.ourslist>ul>li:nth-child(2){
    color:#333;
    margin-top: 0.9rem;
}
.ourslist>ul>li:nth-child(3){
    color:#999;
}
.ourslist>ul>li:last-child{
    position: absolute;
    bottom:0;
    margin-bottom: 0;
}
.oursmoney .ourstitle{
    background-color: #f23150;
}
.oursmoney .oursinfo .oursnum,.oursmoney .oursinfo .ourslist>ul>li:first-child{
    color:#f23150;
}
.oursgift .ourstitle{
    background-color: #f59b33;
}
.oursgift .oursinfo .oursnum,.oursgift .oursinfo .ourslist>ul>li:first-child{
    color:#f59b33;
}
.ourscopint .ourstitle{
    background-color: #56bd48;
}
.ourscopint .oursinfo .oursnum,.ourscopint .oursinfo .ourslist>ul>li:first-child{
    color:#56bd48;
}
.oursdiscount .ourstitle{
    background-color: #1883d7;
}
.oursdiscount .oursinfo .oursnum,.oursdiscount .oursinfo .ourslist>ul>li:first-child{
    color:#1883d7;
}
.oursdisignle .ourstitle{
    background-color: #18c3d7;
}
.oursdisignle .oursinfo .oursnum,.oursdisignle .oursinfo .ourslist>ul>li:first-child{
    color:#18c3d7;
}
.oursoverused .oursitems .oursinfo{
    background:url("../../images/Coupon/usedcoupon.png") no-repeat;
    background-size: 15.2vw 15.2vw;
    background-position: right top;
}
.oursfailed .oursitems .oursinfo{
    background:url("../../images/Coupon/invalitedcoupon.png") no-repeat;
    background-size: 27.2vw 9.6vh;
    background-position: 98% 6%;
}
.oursfailed .oursitems .ourstitle {
    background-color: #ababab;
}
.oursfailed .oursnum, 
.oursfailed .ourslist>ul>li{
    color: #ababab!important;
}








/*遮罩层 */
.layer{
    width:100%;
    position: fixed;
    top:0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index:10;
}
/*优惠券详情浮层*/
.colicover{
    width:100%;
    height: 32vh;
    position: fixed;
    top:0;
    z-index:20;
}
.colicover>i{
    display: block;
    width:100%;
    height: 17.4vh;
    background:url("../../images/Coupon/line.png") no-repeat;
    background-size: 27.2vw 14.6vh;
    background-position: 90% 1vh;
}
.colicover>span{
    display: block;
    width:32.94vw;
    height: 5.31vh;
    margin:0 auto;
    background:url("../../images/Coupon/share.png") no-repeat;
    background-size: 32.94vw 2.82vh;
}
.colicover>em{
    display: block;
    width:27.34vw;
    height: 7.71vh;
    margin:0 auto;
    background:url("../../images/Coupon/know.png") no-repeat;
    background-size: 27.34vw 7.71vh;
}


/*一行省略*/
.oneline{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.twoline{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}