body {
    max-width: 7.5rem;
    margin: auto;
    background-color: #001339;
    min-height: 100vh
}
img{
    width: 100%;
    height: 100%;
}
[v-cloak] {
    visibility: hidden !important;
}
a:link{
	text-decoration: none;
}
a:visited{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
a:active{
	text-decoration: none;
}

.join{
    position: relative;
    font-size: 0;
}
.join .bg{
    position: relative;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-select:none;
    -o-user-select:none;
    user-select:none;
}
.join .bgs{
    position: relative;
    width: 100%;
    height: auto;
}
.join .form{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
}
.form{
    width: 5.6rem;
    color: #ffffff;
    margin: auto;
}
.form .item p{
    font-size: .32rem;
    padding: .32rem 0 .16rem;
}
.form .item input{
    width: 5.6rem;
    height: .8rem;
    line-height: .8rem;
    background: #ffffff;
    border: 1px solid #585858;
    color: #333333;
    font-size: .3rem;
    border-radius: .1rem;
    padding:  0 .3rem;
    box-sizing: border-box;
}
.form .item .select{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.form .item .select .sitem{
    width: 1.66rem;
    height: .7rem;
    line-height: .7rem;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    background: rgba(0, 0, 0, .5);
    border: 1px solid #585858;
    border-radius: .1rem;
    margin-top: .16rem;
}
.form .item .select .sitem.active{
    position: relative;
    border: 1px solid #2c6cd1;
    color: #ffffff;
    overflow: hidden;
}
.form .item .select .sitem.active:after{
    position: absolute;
    content: " ";
    bottom: -1.5px;
    right: -1.5px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyElEQVQ4T6WTQQ7BQBSGv5e2GxdxCzcQXKApcQZLKjYSN5BIWidgx04cxg1sdBhpolI1Q4fZf997b97/hD+f/MpnhJOA9fQnQQ6DxAGpOAsKOO/cWVCGnQVV2ElggmsLbHAtgQkWOGn08usWbJUF3dZ4Gdx21i3Y29axQiUe/l6QplFQgg9XGHqwAHog24Ckq4g2Gt0x/sF7ZR3ncc2I5j7nsaIxA0ZF/F86sM9M4pP2L4QDQVbl23kKPq3qARyBVvXwnKNsutw7fWdOEcXoJ+0AAAAASUVORK5CYII=) no-repeat;
    background-size: 100%;
    width: .4rem;
    height: .4rem;
}
.save_btn{
    width: 5.6rem;
    height: .8rem;
    line-height: .84rem;
    border-radius: .08rem;
    background: #2c6cd1;
    font-size: .28rem;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    margin: .5rem auto .3rem;
    display: block;
}

.user_box{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.3rem;
    text-align: center;
}
.user_img{
    position: relative;
    display: inline-block;
    border-radius: .08rem;
    padding: .3rem .3rem;
}
.user_img .is_user{
    position: absolute;
    top: .1rem;
    right: .1rem;
    width: 2rem;
    height: 2rem;
}
.user_img img{
    width: 3.2rem;
    height: 3.2rem;
}








.img_bg_join{
    width: 5.2rem;
    margin: .22rem auto 0;
}
.foot_index{
    position: absolute;
    bottom: .2rem;
    left: .54rem;
    right: .54rem;
    font-size: .22rem;
    color: rgba(255, 255, 255, .6);
}
.foot_index p{
    position: relative;
    line-height: 1.8;
}
.foot_index p .lefts{
    position: absolute;
    top: 0;
    left: 0;
}
.foot_index p .rights{
    padding-left: .66rem;
}
.foot_index p img{
    width: .42rem;
    height: .42rem;
    vertical-align: middle;
    padding-right: .14rem;
}

.join_btn{
    width: 5.6rem;
    height: .8rem;
    line-height: .84rem;
    border-radius: .08rem;
    background: #2c6cd1;
    font-size: .28rem;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    margin: .4rem auto 0;
    display: block;
}

.rule_btn{
    position: absolute;
    bottom: 2rem;
    right: 0;
    width: 1.7rem;
    height: .6rem;
    background: rgba(255, 255, 255, .24);
    border-radius: .3rem 0 0 .3rem;
    color: #FFFFFF;
    font-size: .26rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: .1rem;
}
.rule_btn img{
    width: .32rem;
    height: .32rem;
}


.red{
    color: red !important;
    padding-right: .1rem;
}
.user_img p{
    color: #ffffff;
    font-size: .32rem;
    padding: .24rem 0 .2rem;
}
.share_btn{
    width: 5.6rem;
    height: .8rem;
    line-height: .84rem;
    border-radius: .08rem;
    background: #fb005f;
    font-size: .28rem;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    margin: .4rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share_btn img{
    width: .4rem;
    height: .4rem;
    padding-right: .1rem;
}
.rule_box{
    color: #ffffff !important;
    width: 6.9rem;
    background: rgba(0, 0, 0, .5);
    border-radius: .08rem;
    margin: .6rem auto 0;
    padding: .3rem;
    box-sizing: border-box;
}
.rule{
    padding-bottom: .3rem;
}
.rule_box h2{
    font-size: .4rem;
    text-align: center;
    padding-bottom: .3rem;
}
.rule_box p{
    font-size: .28rem;
    line-height: 1.8;
    padding-bottom: .2rem;
    position: relative;
}
.rule_box p .left{
    position: absolute;
    left: 0;
    top: 0;
}
.rule_box p .right{
    display: block;
    padding-left: .4rem;
}


.share_layer{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    z-index: 999999;
}
.share_img1{
    position: absolute;
    top: .2rem;
    right: .4rem;
    width: 2rem;
    height: auto;
}
.share_img2{
    position: absolute;
    top: 3.5rem;
    right: 1.5rem;
    width: 4.24rem;
    height: auto;
}