.container{
    display: flex;
    flex-direction: column;
}

.container .topBg{
    margin-top: 100rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container .topBg>*{
    margin-bottom: 20rem;
}
.AvatarImgDiv{
	width: 400rem;
	height: 400rem;
	position: absolute;
	/* margin-top: 250rem;
	margin-left: -192rem;*/
	/* left: 50%;
	top: 45%; */
}
.font80{font-size: 80rem;}
.font30{font-size: 30rem;}
.font48{font-size: 48rem;}
.font24{font-size: 24rem;}
.font20{font-size: 20rem;}
.font50{font-size: 50rem;}
.font60{font-size: 60rem;}
.font16{font-size: 16rem;}

.container .topBg .AvatarImg{
  width: 100%;
  height: 100%;
}

.container .topBg .title{
    background-image:-webkit-linear-gradient(left,#D8D8D8 70%,#EEEEEE); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;
}

.topBg .showNum{
    display: flex;
}

.topBg .showNum .brand{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.topBg .showNum .advert{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 100rem
}

.topBg .Btns .goBtn{
    width: 318rem;
    height: 80rem;
    background-color: #136DFD;
    color: #FFFFFF;
    border: none;
    border-radius: 14rem;
    -webkit-border-radius: 14rem;
    -moz-border-radius: 14rem;
    -ms-border-radius: 14rem;
    -o-border-radius: 14rem;
}

.topBg .Btns .knowBtn{
    width: 318rem;
    height: 80rem;
    background-color: transparent;
    color: #136DFD;
    border-radius: 14rem;
    border: 1rem solid #136DFD;
    margin-left: 50rem;
}

.bottom{
	margin-top: 500rem;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 800rem;
    background-image: url('../../public/images/memberBg2.png');   
    background-repeat: no-repeat;
    background-position:600rem;
}
.mask1, .mask2{
	height: 690rem!important;
}
.bottom .leftCard,.bottom .rightCard{
    padding: 50rem;
    width: 700rem;
	/* margin-left: 55rem; */
    height: 690rem;
    background-color: white;
    border-radius: 30rem;
    box-shadow: 10rem 10rem 59rem -35rem #7F93E4;
    opacity: 0.85;
    position: relative;
}

.bottom .rightCard{
    margin-right: 55rem;
}

.cardTop{
    display: flex;
    justify-content: space-between;
}

.cardTop .topLeft span{
    display: block;
    margin-top: 20rem;
}	

.cardCenter{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 400rem;
    width: 100%;
    margin-top: 50rem;
}

.cardCenter .privilege{
    width: 150rem;
    display: flex;
    flex-direction: column;
    align-items: center;
	white-space: nowrap;
}

.handleVipBtn,.handleSvipBtn{
    display: block;
    margin: 0 auto;
    width: 520rem;
    height: 70rem;
    background-color: #333333;
    color: white;
    font-size: 24rem;
    border: none;
    border-radius: 42rem;
    box-shadow: 0rem 6rem 10rem -2rem #323E6A;
}

.shallow{
    opacity: 0.5;
}

.confirm{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: 200;
    background-color:rgba(0, 0, 0, 0.5) ;
}

.confirm .confirmCard{
    width: 480rem;
    height: 315rem;
    padding: 80rem;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    margin:auto;
    background-color: white;
    border-radius:18rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.privilege img{
	/* width: 100%; */
	width: 90rem;
	    height: 90rem;
}

.hesitateBtn,.confirmBtn{
    width: 205rem;
    height: 60rem;
    border: none;
    border-radius: 12rem;
    -webkit-border-radius: 12rem;
    -moz-border-radius: 12rem;
    -ms-border-radius: 12rem;
    -o-border-radius: 12rem;
}

.hesitateBtn{
    background-color: #FAFAFB;
}

.confirmBtn{
    background-color: black;
    margin-left: 30rem;
}

.isShow{
    display: none;
}

@media screen and (max-width:1470rem){
	.cardCenter{
		margin-bottom: 20rem;
	}
}