body,
html {
    background: #f3f3f3;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
}

.container {
    padding: 0 0.2rem 0;
}

.swiper {
    display: none;
    height: 3.7rem;
}

.swiper-pagination-bullet-active {
    background-color: rgba(255, 255, 255, 0.8)
}

.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 0;
    !important;
}


/**************************header*************************/

.header .header_bg {
    width: 100%;
    /*max-height: 6.76rem;*/
    overflow: hidden;
}

.header_bg img {
    display: block;
    width: 100%;
    height: 3.7rem;
    object-fit: cover;
    vertical-align: top;
    background: url(http://wwwoss.gfan.com/2018jf_app/images/detail_bg.png) no-repeat center;
    background-size: cover;
}

.header .header_msg {
    padding: 0.3rem 0;
    font-size: 0.3rem;
    color: #999;
    background: #fff;
}

.header_msg .header_msg_title {
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.42rem;
    color: #333;
    padding-bottom: 0.27rem;
    word-break: break-all;
}

.header_msg_introduce .condition {
    color: #00b4b4;
}

.header_msg_introduce .introduceList {
    padding-bottom: 0.25rem;
    color: #999;
    font-size: 0.24rem;
}

.header_msg_introduce .introduceList:last-child {
    padding-bottom: 0;
}

.introduceList.prizeTime:before {
    content: '';
    height: 0.2rem;
    padding-left: 0.4rem;
    background: url(../images/integral_draw/prize_time.png) no-repeat left center;
    background-size: 0.2rem 0.2rem;
    display: inline-block;
}

.introduceList.peoplesNum:before {
    content: '';
    height: 0.23rem;
    padding-left: 0.4rem;
    background: url(../images/integral_draw/peoples_num.png) no-repeat left center;
    background-size: 0.18rem 0.23rem;
    display: inline-block;
}

.introduceList.joinCondition:before {
    content: '';
    height: 0.24rem;
    padding-left: 0.4rem;
    background: url(../images/integral_draw/join_condition.png) no-repeat left center;
    background-size: 0.21rem 0.24rem;
    display: inline-block;
    margin-top: 0.1rem;
}

.introduceList.joinCondition .goShopping {
    width: 1.25rem;
    height: 0.45rem;
    line-height: 0.45rem;
    background: #fe4444;
    text-align: center;
    border-radius: 0.23rem;
    color: #fff;
    font-size: 0.24rem;
}


/**************************奖品简介*************************/

.prizeMsg {
    font-size: 0.3rem;
    color: #333;
    background: #fff;
    margin-top: 0.2rem;
    padding: 0.5rem 0.2rem 1.44rem;
}

.prizeMsg .prizeMsg_title {
    /*line-height: 0.53rem;*/
}

.prizeMsg .prizeMsg_content {
    line-height: 0.49rem;
    word-wrap: break-word;
    overflow: hidden;
    word-break: break-all;
}

.prizeMsg_content .prizeMsg_contentList {
    padding: 0.28rem 0.56rem 0 0.2rem;
    position: relative;
}

.prizeMsg_content .prizeMsg_contentList:before {
    position: absolute;
    left: 0;
    content: '·';
}

.prizeMsg_content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/**************************抽奖状态部分*************************/

.join {
    margin-top: 0.2rem;
    text-align: center;
    /*padding-bottom: 1rem;*/
    /*background: #fff;*/
    /*margin-top: 0.2rem;*/
}
/**********赞助商**********/
.sponsor{
    background: #fff;
    font-size: 0.3rem;
    color: #333;
    line-height: 1;
}
.sponsorGroup .sponsorTitle{
    padding: 0.2rem 0 0.17rem;
}
.sponsorGroup .sponsorNameGroup{
    padding: 0.12rem 0 0.09rem;
}
.sponsorNameGroup .sponsorImg{
    display: inline-block;
    width: 0.46rem;
    height: 0.46rem;
    vertical-align: middle;
    /*background: url(https://api-portal.gfan.net.cn/2.jpg) no-repeat center;*/
    /*background-size: 100% 100%;*/
    object-fit: cover;
}
.sponsorNameGroup .sponsorName{
    padding-left: 0.1rem;
    vertical-align: middle;
}
.sponsorNameGroup .sponsorName:after{
    content: '>';
    padding-left: 0.15rem;
}
/**********赞助商-宣传标语**********/
.sponsor .slogan{
    background: #FEF7E5;
    border-top: 0.01rem solid #D9CDAE;
    border-bottom: 0.01rem solid #D9CDAE;
    padding: 0.3rem 0.92rem 0.3rem;
    text-align: left;
    position: relative;
    color: #6C604C;
    font-size: 0.3rem;
    line-height: 1.3;
}
.sponsor .slogan:before{
    content: '';
    position: absolute;
    left: 0.29rem;
    top: 0.19rem;
    background: url(../images/integral_draw/slices.png) no-repeat left center;
    background-size: 100% 100%;
    width: 0.26rem;
    height: 0.18rem;
}

/**********未参加状态**********/

.join .join_btn {
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: linear-gradient(#f55385, #c833aa);
    margin: 0.4rem auto 0.7rem;
    line-height: 1.9rem;
    text-align: center;
    font-size: 0.3rem;
    color: #ffffff;
    box-shadow: 0 0 0.5rem #ec64aa;
    text-shadow: 0 0.03rem 0.03rem #b42c8c;
    font-weight: 900;
    position: relative;
}

.join .join_btn.joining:after {
    content: '';
    width: 1.7rem;
    height: 1.7rem;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 0.04rem solid #fff;
    transform: scale(1);
    opacity: 0.4;
    -webkit-animation: joiningPrize 0.6s ease-out;
    -moz-animation: joiningPrize 0.6s ease-out;
    -o-animation: joiningPrize 0.6s ease-out;
    animation: joiningPrize 0.6s ease-out;
    box-sizing: border-box;
    margin: -0.85rem;
}


/************已参与状态**********/

.join .join_btn.wait {
    background: #cdcdcd;
    color: #fff;
    box-shadow: 0 0 0.5rem #e3e3e3;
    text-shadow: none;
}

.join .join_btn.wait:after {
    content: '';
    opacity: 0.2;
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    -o-animation: none;
}


/************开奖公用样式**********/

.join .openPrize {
    font-size: 0.24rem;
    padding: 0.35rem 0 0.45rem;
    text-align: center;
    color: #333;
}

.openPrize .openPrize_msg {
    padding: 0.2rem 0 0;
    overflow: hidden;
}

.openPrize .openPrize_other {
    display: block;
    width: 2.5rem;
    /* height: 0.64rem; */
    line-height: 0.24rem;
    border: 0.01rem solid #f41841;
    color: #f41841;
    /* box-sizing: border-box; */
    margin: 0.35rem auto 0.3rem;
    padding: 0.2rem 0;
}

.openPrize .line {
    width: 100%;
    height: 0.02rem;
    background: #e3e3e3;
}


/************未中奖状态**********/

.join_noPrize .join_noPrize_title {
    font-size: 0.42rem;
}


/************中奖状态**********/

.join_Prize .join_Prize_title {
    font-size: 0.42rem;
    color: #f41841;
}

.join_Prize .join_Prize_contact {
    padding: 0.2rem 0 0.4rem;
}


/**************************** 收货部分 ****************************/

.receiving {
    /*display: none;*/
    margin: 0.48rem 0 0.3rem;
}


/*温馨提示*/

.receiving .receivingTips {
    margin: 0 0.2rem;
    background: #fff;
    text-align: center;
    font-size: 0.24rem;
    padding: 0.25rem 0.45rem 0.3rem;
    color: #999;
}

.receivingTips .receivingTips_title {
    color: #333;
    padding-bottom: 0.27rem;
}

.receivingTips .receivingTips_title:before {
    padding-right: 0.13rem;
    content: '·';
}

.receivingTips .receivingTips_title:after {
    padding-left: 0.13rem;
    content: '·';
}

.receivingTips .receivingTips_msg {
    line-height: 0.37rem;
    letter-spacing: 0.01rem;
}


/*收货地址*/

.receiving .receivingAddress {
    /*width: 100%;*/
    margin: 0.2rem 0;
    background: #fff;
    /*padding: 0.35rem 1.08rem 0.35rem 0.7rem;*/
    padding: 0.35rem 0;
    position: relative;
    color: #999;
    font-size: 0.24rem;
    text-align: left;
}

.receivingAddress .spacing {
    padding: 0 0.9rem 0 0.5rem;
}

.receivingAddress .receivingAddress_title {
    color: #333;
    padding-bottom: 0.25rem;
    font-size: 0.3rem;
}

.receivingAddress .receivingAddress_peopleGroup {
    position: relative;
}

.receivingAddress .receivingAddress_peopleGroup:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0.28rem;
    height: 0.33rem;
    background: url(../images/new_recruits_detail/location.png) no-repeat center;
    background-size: 100% 100%;
}

.receivingAddress .receivingAddress_peopleGroup:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0.05rem;
    background: url(../images/arrow.png) 0 0 no-repeat;
    background-size: 100% 100%;
    width: 0.24rem;
    height: 0.38rem;
}

.receivingAddress.final .receivingAddress_peopleGroup:after {
    display: none;
}

.receivingAddress_peopleGroup .peopleDetail {
    color: #333;
    line-height: 0.35rem;
    overflow: hidden;
}

.receivingAddress .receivingAddress_msg {
    padding-top: 0.15rem;
    /*letter-spacing: 0.02rem;*/
    line-height: 0.31rem;
}

.receiving .receivingAddress:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0.08rem;
    background: url(../images/new_recruits_detail/columns.png) no-repeat center;
    background-size: 100% 100%;
}


/*备注留言*/

.receiving .remarkMsg {
    box-sizing: border-box;
    padding: 0.25rem 0.88rem 0.3rem 0.75rem;
    background: #fff;
    text-align: left;
    font-size: 0.24rem;
    color: #999;
    position: relative;
}

.remarkMsg .remarkMsg_title {
    font-size: 0.3rem;
    padding-bottom: 0.2rem;
    color: #333;
}

.remarkMsg .remark_number {
    padding-bottom: 0.23rem;
}

.receiving .remarkMsg:before {
    content: '';
    position: absolute;
    width: 0.23rem;
    height: 0.31rem;
    background: url(../images/integral_draw/remarkMsg_icon.png) no-repeat center;
    background-size: 100% 100%;
    left: 0.2rem;
    top: 50%;
    margin-top: -0.15rem;
}

.receiving .remarkMsg:after {
    content: '';
    position: absolute;
    right: 0.2rem;
    top: 50%;
    margin-top: -0.19rem;
    width: 0.24rem;
    height: 0.38rem;
    background: url(../images/arrow.png) 0 0 no-repeat;
    background-size: 100% 100%;
}

.receiving .remarkMsg.final:after {
    display: none;
}


/************中奖者***********/

.winners .winnersDetail {
    background: #fff;
    padding: 0.25rem 0 0.3rem;
    text-align: center;
    font-size: 0.24rem;
    color: #999;
}

.winnersDetail .winnersDetail_peoples {
    text-align: center;
    padding-top: 0.2rem;
}

.winnersDetail_peoples .winnersDetail_peoplesList {
    display: inline-block;
    margin-right: 0.67rem;
    color: #333;
}

.winnersDetail_peoplesList img {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 auto 0.2rem;
    object-fit: cover;
    background: url(https://api-portal.gfan.net.cn/2.jpg) no-repeat center;
    background-size: 100% 100%;
}

.winnersDetail_peoples .winnersDetail_peoplesList:last-child {
    margin-right: 0;
}


/************查看全部***********/

.join .join_footer {
    font-size: 0.3rem;
}

.join_footer .people_num {
    padding-bottom: 0.17rem;
}

.join_footer .see_all {
    color: #333;
}


/************参与者列表***********/

.peoplePhotos {
    padding: 0.4rem 0 0;
}

.peoplePhotos .peoplePhotosGroup {
    width: 100%;
}

.peoplePhotosGroup .peoplePhotosList {
    width: 10.56%;
    margin-right: 0.62%;
    height: 0.75rem;
    overflow: hidden;
}

.peoplePhotosList img {
    vertical-align: top;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: url(https://api-portal.gfan.net.cn/2.jpg) no-repeat center;
    background-size: 100% 100%;
}

.peoplePhotosGroup .peoplePhotosList:last-child {
    margin: 0;
}


/**************广告位*************/

.Advertisement {
    padding-bottom: 1rem;
}

.Advertisement .AdvertisementGroup {
    width: 100%;
    height: 1.8rem;
}

.AdvertisementGroup .AdvertisementImg {
    display: block;
    width: 100%;
    height: 100%;
}


/************分享给朋友***********/

.footer {
    width: 100%;
    height: 1rem;
    line-height: 0.36rem;
    padding: 0.32rem 0;
    position: fixed;
    bottom: 0;
    text-align: center;
    background: #00b4b4;
    color: #fff;
    font-size: 0.36rem;
    box-sizing: border-box;
}

.footerGroup {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footerGroup .btn {
    width: 50%;
    height: 100%;
    color: #fff;
    text-align: center;
    font-size: 0.36rem;
    /*line-height: 1rem;*/
    padding: 0.29rem;
    box-sizing: border-box;
    line-height: 0.3rem;
}

.footerGroup .nowJoin.final {
    background: #cdcdcd;
    color: #fff;
}

.footerGroup .shareFriends {
    background: #00b4b4;
}

.footerGroup .nowJoin {
    background: #fe4444;
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /* 这代表IPX */
    /* 目前这种设备像素比 和 尺寸是很“奇葩”、特殊的，基本可以确定是 IPX */
    .footerGroup .btn {
        padding-bottom: 0.41rem;
        height: 1rem;
    }
}


/***********点击参加的动画*********/

@-o-keyframes joiningPrize {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.2;
    }
    25% {
        -webkit-transform: scale(0);
        opacity: 0.4;
    }
    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.6;
    }
    75% {
        -webkit-transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0.4;
    }
}

@-moz-keyframes joiningPrize {
    0% {
        transform: scale(0);
        opacity: 0.2;
    }
    25% {
        transform: scale(0);
        opacity: 0.4;
    }
    50% {
        transform: scale(0.1);
        opacity: 0.6;
    }
    75% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

@keyframes joiningPrize {
    0% {
        transform: scale(0);
        opacity: 0.2;
    }
    25% {
        transform: scale(0);
        opacity: 0.4;
    }
    50% {
        transform: scale(0.1);
        opacity: 0.6;
    }
    75% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

@-webkit-keyframes joiningPrize {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.2;
    }
    25% {
        -webkit-transform: scale(0);
        opacity: 0.4;
    }
    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.6;
    }
    75% {
        -webkit-transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0.4;
    }
}