body{
    background: url(./header-bg.png) no-repeat;
    background-position: right -11.7vw;
    background-size: 80vw;
}
header{
    display: flex;
    padding: 2.67vw;
}
header i{
    width: 6.4vw;
    font-size: 0;
}
header  h1{
    flex: 1;
    text-align: center;
    font-size: 4.5vw;
    font-weight: normal;
}
#app{
    position: relative;
    z-index: 10;
    height: 100%;
    width: 100%;
}
.title{
    color: #252A3D;
    font-size: 7.06vw;
    line-height: 1.4;
    position: relative;
    display: inline-block;
}
.title span{
    position: relative;
    z-index: 10;
}
.title:after{
    position: absolute;
    content: '';
    height: 1.6vw;
    left: 0;
    right: -4px;
    bottom: 2px;
    background-color: #497DFF;
    z-index: 9;
}
.content{
    padding: 25vw 7.4vw 0;
    position: relative;
    z-index: 10;
}
.content .tip{
    font-size: 3.47vw;
    color: #252A3D;
    line-height: 1.42;
    margin-top: 1.33vw;
}
.checkbox-item{
    padding: 2.67vw 0;
}
.phone-item{
    padding: 2.13vw 0;
    display: flex;
    line-height: 1.4;
    font-size: 4vw;
    margin-top: 15.7vw;
    border-bottom: 1px solid #EBEDF0;
}
.phone-item .label{
    display: inline-block;
    padding: 0 2.4vw;
}
.phone-item .label span{
    display: inline-block;
    position: relative;
    line-height: 1;
    color: #252A3D;
    font-size: 4.8vw;
}
.phone-item .label span:after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.4vw;
    right: -2.4vw;
    background-color: #DFE1E5;
}
.form-input {
    flex: 1;
}
.form-input input{
    font-size: 4vw;
    width: 100%;
    padding-left: 2.67vw;
}
.checkbox-item{
    display: flex;
    align-items: center;
}
.form-checkbox{
    width: 3.7vw;
    height: 3.7vw;
    position: relative;
    font-size: 0;
    margin-right: 2.4vw;
}
.form-checkbox img{
    width: 100%;
    height: 100%
}
#checkbox{
    position: absolute;
    appearance: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.form-btn{
    position: relative;
}
.primary-btn{
    height: 12vw;
    line-height: 12vw;
    background:rgba(57,100,249,1);
    border-radius: 4px;
    width: 100%;
    color: #fff;
    position: relative;
    z-index: 10;
    transition: all .2s ease;
}
.primary-btn:disabled{
    background:rgba(57,100,249,.6);
}
.form-btn:after{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 2.67vw;
    left: 0;
    background:linear-gradient(180deg,rgba(77,129,245,1) 0%,rgba(66,113,228,1) 17%,rgba(43,74,185,1) 100%);
    opacity:0.3;
    filter:blur(10px);
    z-index: 9;
}
.register{
    margin-top: 10.67vw;
}
.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0;
    z-index: 9;
}
.footer .logo{
    position: absolute;
    width: 21.9vw;
    bottom: 5.3vw;
    left: 50%;
    transform: translateX(-50%);
}

.success-page{
    text-align: center;
}
.success-gif{
    width: 32vw;
    height: 32vw;
    margin: 0 auto;
    font-size: 0;
}
.success-tip{
    margin-top: 4.5vw;
    margin-bottom: 5px;
    color: #252A3D;
    font-size: 5.6vw;
    line-height: 1.4;
}
.success-time{
    color: #7B7F8F;
    font-size: 3.4vw;
    margin-bottom: 5px;
}
.success-result{
    color: #7B7F8F;
    font-size: 3.4vw;
    margin-bottom: 10.7vw;
}
.form-btn span{
    display: inline-block;
    width: 6.1vw;
    height: 6.1vw;
    font-size: 0;
    vertical-align: middle;
    margin-right: 4.5vw;
}
.error-gif{
    width: 42.4vw;
    font-size: 0;
    margin: 0 auto;
}
.fail-reason{
    padding: 3.2vw 5.3vw;
    background-color: #F2F5FC;
    margin: 6.7vw 0 5.3vw;
    text-align: left;
    color: #7B7F8F;
    line-height: 1.5;
}
.fail-reason p{
    word-break: break-all;
}

.fade-enter-active,.fade-leave-active{
    transition: all .3s;

}
.fade-enter,.fade-leave-to{
    opacity:0
}