html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    font-family: PingFangSC-Regular, PingFang SC;
}

html {
    font-size: 16px;
}

a {
    text-decoration: none;
}

@media screen and (min-width:720px) {
    html {
    font-size: 72px !important;
    }
}

body {
    min-width: 360px;
    max-width: 720px;
    width:10rem;
    margin: 0 auto;
    line-height: 1;
}


html {
    overflow-x: hidden;
    width: 100%;
}


#root {
    width: 100%;
    background: #F4F6F7;
    height: 19rem;
}

#content {
    width: 8.888889rem;
    padding: 0.833333rem 0.555556rem 0 0.555556rem;
}

#top {
    width: 100%;
    height: 6rem;
    background: #6559EB;
    border-radius: 0.444444rem;
}

#portrait {
    position: relative;
    width: 8.888889rem;
    height: 2.277778rem;
}

#portrait #round {
    width: 1.972222rem;
    height: 2.277778rem;
    border-radius: 0.444444rem 0 0 0;
    position: relative;
    top: 0;
    left: 0;
    float: left;
}

#portrait #round img {
    width: 1.972222rem;
    height: 2.277778rem;
    border-radius: 0.444444rem 0 0 0;
}


#portrait #head {
    width: 1.388889rem;
    height: 1.388889rem;
    border: 0.083333rem solid #FFFFFF;
    position: relative;
    top: -0.416667rem;
    background: #6559EB;
    border-radius: 0.777778rem;
    left: 1.638889rem;
    float: left;
}

#portrait #head img{
    width: 1.388889rem;
    height: 1.388889rem;
    border-radius: 0.777778rem;
}


#username {
    height: 0.5rem;
    width:4.444444rem;
    margin: -0.555556rem auto 0 auto;
    font-size: 0.333333rem; 
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.5rem;
    text-align: center;
}

#invitation {
    width:5.027778rem;
    margin: 0.222222rem auto 0 auto;
    height: 0.666667rem;
    font-size: 0.5rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 0.666667rem;
    text-align: center;
}

#welfare {
    width: 6.888889rem;
    text-align: left;
    margin: 0.444444rem auto 0 auto;
}


#welfare img {
    width: 1.666667rem;
    height: 0.666667rem;
    left: 0;
}

#welfare p {
    font-size: 0.666667rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 0.888889rem;
    height: 0.888889rem;

}

#process {
    width: 100%;
    height: 8.666667rem;
    background: #FFFFFF;
    top: 0.333333rem;
    position: relative;
    border-radius: 0.222222rem;
}

#process-title {
    width: 2.5rem;
    height: 0.666667rem;
    padding-left: 0.333333rem;
    padding-top: 0.444444rem;
}

#process-title p {
    font-size: 0.5rem;
    font-weight: 600;
    color: #444444;
    line-height: 0.666667rem;
}

#title-block {
    width: 0.333333rem;
    height: 0.333333rem;
    background: #1A84FF;
    opacity: 0.5;
    position: relative;
    top: -0.333333rem;

}

#process-detail{
    margin-top: 0.444444rem;
    padding: 0 0.666667rem;
    height: 2.0rem;
}

#steps {
    height: 0.444444rem;
    padding: 0 0.666667rem;

}

#steps .step {
    float: left;
    width: 0.444444rem;
    height: 0.444444rem;
    background: #8CC1FF;
    border-radius: 0.222222rem;
    text-align: center;    
}

#steps .step p {
    height: 0.444444rem;
    font-size: 0.333333rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 0.444444rem;

}


#steps .line {
    line-height: 0.444444rem;
    float: left;
    width: 2.24rem;
    height: 0;
    opacity: 0.4;
    border: 1px dashed #979797;
    margin-top: 0.222222rem;
}

#steps-desc .desc {
    float: left;
    font-size: 0.333333rem;
    font-weight: 400;
    color: #666666;
    line-height: 0.444444rem;
    width: 1.777778rem;
    margin-top: 0.222222rem;
    text-align: center;
}

#steps-desc #desc1{
   width: 1.777778rem;
}


#steps-desc #desc2{
    margin-left: 0.82rem;
    width: 2rem;
}

#steps-desc #desc3 {
    margin-left: 0.82rem;
    width: 1.777778rem;
}

#big-line {
    width: 100%;
    height: 0.444444rem;
    display: inline-block;
}

#division {
    width:7.9rem;
    height: 0;
    border: 0.055556rem dashed #F4F6F7;
    margin: 0.166666rem 0 0 0.222222rem;
    float: left;
}

#semi-circle-left {
    width:0.222222rem;
    height:0.444444rem;
    background-color:#F4F6F7;
    border-radius:0 0.444444rem 0.444444rem 0;
    float: left;
}


#semi-circle-right {
    width:0.222222rem;
    height:0.444444rem;
    background-color:#F4F6F7;
    border-radius:0.444444rem 0 0 0.444444rem;
    float: right;
}

#invitation-code {
    width: 100%;
    text-align: center;
}

#invitation-desc {
    width: 8.333333rem;
    margin: 0 auto;
    height: 0.5rem;
    font-size: 0.361111rem;
    font-weight: 400;
    color: #6559EB;
    line-height: 0.5rem;
}

#code-info {
    display: inline-block;
    width: 8.333333rem;
    text-align: center;

}

#code-info #code {
    width: 6rem;
    height: 0.722222rem;
    font-size: 0.555556rem;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #6559EB;
    line-height: 0.722222rem;
    float: left;
    margin-left: 1.138889rem;
}

#code-info img {
    float: left;
    width: 0.388889rem;
    height: 0.388889rem;
    margin-top: 0.138889rem;
}

#download {
    width: 7.333333rem;
    height: 1.222222rem;
    background: #1A84FF;
    border-radius: 0.611111rem;
    backdrop-filter: blur(0px);
    margin: 0.666667rem auto 0 auto;
    text-align: center;
}

#download p {
    height: 0.583333rem;
    font-size: 0.416667rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 0.583333rem;
    top: 0.305556rem;
    position: relative;
}

#footer {
    width: 10.0rem;
    text-align: center;
    margin-top: 0.555556rem;

}

#developer {
    width: 8.888889rem;
    margin: 0 auto;
    font-size: 0.305556rem;
    font-weight: 400;
    color: #7F7F7F;
    line-height: 0.5rem;
}

#agreement {
    width: 8.888889rem;
    font-size: 0.305556rem;
    margin: 0.555556rem auto 0 auto;
    font-weight: 400;
    color: #4A4A4A;
    line-height: 0.5rem;
}

#agreement a {
    text-decoration: none;
    color: #4A4A4A;
}