@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-05-23 10:11:54
 * @version $Id$
 */
/*新会员卡*/
.card_container{
    width:100%;
}
.card_bg{
    width:50vh;
    height: 30vh;
    margin:0 auto;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    margin-top: 1cm;
    position: relative;
    background: -webkit-linear-gradient(top, #5fd060, #008601);
    background: linear-gradient(top, #5fd060, #008601);
    overflow:hidden;
    background-repeat:no-repeat;
    background-size:100% 100%;
}
.card_bg>div.card_top{
    width:92%;
    margin:0 auto;
    padding-top: 1.6rem;
}
.card_top span{
    width:80%;
    color:#fff;
    font-size: 1.5rem;
    text-overflow: ellipsis; overflow: hidden;white-space: nowrap;
}
.card_top em img{
    width:2rem;
    height: 2rem;
}
.card_bg>div.card_bottom{
    font-size: 0;
    position: absolute;
    bottom:1rem;
    width:92%;
    margin-left:4%;
}
.card_bottom>h1{
    display: inline-block;
    width:40%;
    color:#fff;
    font-size: 1.4rem;
    text-align: left;
    text-overflow: ellipsis; overflow: hidden;white-space: nowrap;
}
.card_bottom>h2{
    display: inline-block;
    width:60%;
    color:#fff;
    font-size: 1.4rem;
    text-align: right;
    text-overflow: ellipsis; overflow: hidden;white-space: nowrap;
}
.card_container .card_pattern{
    width:100%;
    margin-top:1.6rem;
    text-align: center;
}
.card_pattern>div img{
    width:90%;
    height: auto;
    margin:0 auto;
}
.card_pattern>p{
    width:90%;
    margin:0 auto;
    color:#3e3e3e;
    font-size: 1.3rem;
    text-overflow: ellipsis; overflow: hidden;white-space: nowrap;
    margin-top: 0.4rem;
}
/*swpiper插件里面修改*/
.card_container .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    top:56vh;
}
.card_container .swiper-pagination-bullet-active {
    opacity: 1;
    background: #469647;
}
/*新会员卡遮罩层*/
.card_layer{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    z-index:10;
    background-color: rgba(0,0,0,0.6);
}
.card_cover{
    position: fixed;
    top:50%;
    left:50%;
    z-index:20;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    width:84vw;
    background-color: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
}
.card_cover>p{
    width:100%;
    height: 4.2rem;
    line-height: 4.2rem;
    color:#fff;
    font-size: 1.5rem;
    text-align: center;
    background-color: #008601;
    border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    position: relative;
}
.card_cover>p>i{
    display: inline-block;
    width:2.2rem;
    height: 2.2rem;
    background:url(../images/crad_close.png) no-repeat ;
    background-size: 100% 100%;
    position: absolute;
    bottom:1rem;
    right:4%;
}
.card_cover>div{
    padding:2rem 0;
    text-align: center;
    position: relative;
}
.card_cover>div p {
    /*width:60vw;
    height: 60vw;*/
}
.card_cover>div .card_img2{
    width:14vw;
    height: 14vw;
    border:4px solid #fff;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}