.page_container{
    background-color: #fff;
}
.banner{
    position: relative;
    width: 100%;
    margin-top: 50px;
}
.banner img{
    width: 100%;
}
.v_rule{
    position: absolute;
    right: 0;
    top: 8%;
    width: 60px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    padding-left: 10px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 30px 0 0 30px;
}
.v_rule a{
    width: 100%;
    color: #fff;
}
.v_btn{
    position: absolute;
    left: 4%;
    top: 55%;
    width: 92%;
    height: 50px;
}
.v_btn a{
    float: left;
    width: 44%;
    height: 40px;
    margin: 0 3%;
    color: #fa1e2a;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    letter-spacing: 2px;
    font-weight: bold;
    border-bottom: 5px #e37e35 solid;
    border-radius: 10px;
    box-shadow: 0 7px 10px #dd3f20;
    background-image:linear-gradient(to bottom,#fff9e7,#ffc30c);
}
.v_process,.rule_details{
    width: 84%;
    min-height: 100px;
    background: #fdedf0;
    border-radius: 10px;
    margin: 0 auto;
    line-height: 28px;
    margin-bottom: 15px;
    padding: 0 5% 50px 5%;
}
.v_process{
    position: relative;
    margin-top: -30px;
}
.process_box{
    width:100%;
    height: 292px;
    overflow-x: auto;
    margin-top: 20px;
    padding-top: 2px;
}
.invite_num{
    position: relative;
    width: 600px;
    height: 35px;
}
.num{
    position: absolute;
    top: 0;
}
.num_1{left: 0}
.num_2{left: 8.2%}
.num_3{left: 17.5%}
.num_4{left: 26.3%}
.num_5{left: 38.4%}
.num_6{left: 52.3%}
.num_7{left: 67.4%}
.num_8{left: 83.4%}
.num_9{
    display: inline-block;
    width: 42px;
    left: 96.7%;
}


.p_grey{
    position: relative;
    width: 600px;
    height: 10px;
    border-radius: 30px;
    background-color: #d9d8d7;
}
.p_currrnt{
    width:0;
    height: 6px;
    border-radius: 30px;
    border: 2px #f87d5a solid;
    background:url("../images/process.png") no-repeat;
    background-size: 100% 100%;
}
.circle{
    position: absolute;
    top: -2px;
    width: 10px;
    height: 10px;
    background-color: #c8584d;
    border: 2px #c8584d solid;
    border-radius: 50%;
}
.c_2{left: 9%;}
.c_3{left: 18%;}
.c_4{left: 27%;}
.c_5{left: 39%;}
.c_6{left: 54%;}
.c_7{left: 69%;}
.c_8{left: 84.5%;}
.c_9{right:0}

.c_btn{
    position: relative;
    width: 600px;
}
.fuli{
    position: absolute;
    top: 24px;
    width: 40px;
    padding: 10px 5px;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    background-image: linear-gradient(to bottom,#aba8a8,#aba8a8);
}
.fuli_active{
    background-image: linear-gradient(to bottom,#fda948,#ff6613);
}
.fuli_1{left: 6.4%}
.fuli_2{left: 15.4%}
.fuli_3{left: 24.4%}
.fuli_4{left: 36.5%}
.fuli_5{left: 51.4%}
.fuli_6{left: 66.5%}
.fuli_7{left: 82%}
.fuli_8{left: 95.5%}

.fuli:before{
    content: ' ';
    position: absolute;
    top: -20px;
    left: 15px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px transparent solid;
    border-bottom: 16px #aba8a8 solid;

}
.fuli_active:before{
    border-bottom: 16px #fda948 solid;
}


.v_title{
    width: 150px;
    height: 35px;
    color: #e7510c;
    text-align: center;
    line-height: 35px;
    margin: 0 auto;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 2px;
    background-color: #feddd3;
    border-radius: 0 0 10px 10px;
}
.r_text{
    color: #666;
    margin-top: 20px;
}
.r_text b{
    font-size: 16px;
}
.add_qun{
    position: fixed;
    right: 0;
    bottom: 30vh;
    width:80px;
    height: 62px;
    background: url("../images/qun.png") no-repeat;
    background-size: 100% 100%;
}
.add_qun a{
    width: 100%;
    height: 62px;
}