body{}
@keyframes typing2{
	0% { width: 0%; }
	99% { width:100%;}
	100% { width: calc(100% - 1px);}
}

.invite-wrap{max-width:768px;margin:30px auto;min-height:calc(100vh - 60px)}
.invite-title{position:relative;color:transparent;text-align:left;display:inline-block;margin-right:auto;margin-left:auto;padding-right:1px;line-height:1;}
.invite-title::before {
    content: attr(data-content);
    position: absolute;top:0;left:0;width:100%;height: 100%;color: #333;overflow:hidden;border-right: 1px solid #333;
    animation: typing2 5s steps(50) 0;animation-iteration-count:1;animation-fill-mode:none;
  }
.r_friend_row { position:relative;display:block;opacity:0;height:0;overflow:hidden;transition:all .3s;}
.r_friend_row.on {opacity:1;height:auto;}
.r_friend_row_btn{position:relative;text-align:right;margin-top:10px}
.r_friend_row_btn::before{position:absolute;width:100%;height:1px;content:'';left:0;top:50%;border-top:1px dashed #333;z-index:-1}
.r_friend_row_btn .btn {display:inline-flex;align-items:center;justify-content:center;background-color:#fff;padding:0;width:30px;height:30px;border-color:#333;color:#333;}
.r_friend_row_btn .btn::before, .r_friend_row_btn .btn::after{content:'';position:absolute;background-color:#333;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);}
.r_friend_row_btn .btn::before{width:16px;height:2px;}
.r_friend_row_btn .btn.r_friend_row_add::after{width:2px;height:16px;}
.r_friend_row_btn .btn:hover{border-color:rgb(61,124,201);color:rgb(61,124,201);}
.r_friend_row_btn .btn:hover::before, .r_friend_row_btn .btn:hover::after{background-color:rgb(61,124,201)}

.invite-wrap p{font-size:14px;}
@media(max-width:545px){
    .invite-wrap h2{font-size:30px;}
    .invite-wrap h4{font-size:16px;}
    .invite-wrap p{font-size:13px;}
}