#app {
    width: 100%;
    height: 13.34rem;
    background: url(../img/bg.jpg) no-repeat top center;
    background-size: 100%;
    overflow: hidden;
    position: relative;
}

.bg-main {
    position: absolute;
    width: 100%;
    height: 13.34rem;
    background: url(../img/bg.jpg) no-repeat top center;
    background-size: 100%;
    left: 0;
}

.top-slogan {
    width: 4.95rem;
    height: 3.97rem;
    background: url(../img/top_slogan.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.top-logo {
    width: 1.37rem;
    height: 0.73rem;
    background: url(../img/top_logo.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    right: 0.25rem;
    top: 0.14rem;
}

.top-download {
    width: 1.39rem;
    height: 0.48rem;
    background: url(../img/top_btn.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    right: 0.24rem;
    top: 0.96rem;
}

.login-btn {
    width: 1.59rem;
    height: 0.64rem;
    background: url(../img/sigin_btn.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 12.14rem;
}

.user-info {
    width: 2.29rem;
    height: 0.94rem;
    background-color: #ffacbc;
    border-radius: 0 0.14rem 0.14rem 0;
    position: absolute;
    left: 0;
    top: 12.14rem;
    padding: 0.17rem 0.2rem;
    box-sizing: border-box;
}

.user-info-num {
    font-size: 0.2rem;
    color: #d3597e;
    display: flex;
}

.user-info-icon {
    width: 0.18rem;
    height: 0.18rem;
    background: url(../img/icon.png) no-repeat top center;
    background-size: 100%;
    margin-top: 0.04rem;
    margin-right: 0.1rem;
}

.user-info-btns {
    font-size: 0.24rem;
    color: #d3597e;
    display: flex;
    justify-content: space-around;
    margin-top: 0.04rem;
}

.build_day1 {
    width: 2.32rem;
    height: 2.65rem;
    background: url(../img/first_day.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 3.38rem;
    top: 6.67rem;
}

.build_day2 {
    width: 2.49rem;
    height: 2.06rem;
    background: url(../img/two_day.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 0.44rem;
    top: 5.46rem;
}

.build_day3 {
    width: 1.77rem;
    height: 1.84rem;
    background: url(../img/three_day.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 1.1rem;
    top: 3.25rem;
}

.build_day4 {
    width: 2.09rem;
    height: 1.84rem;
    background: url(../img/four_day.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 4rem;
    top: 2.18rem;
}

.build_day5 {
    width: 2.3rem;
    height: 1.96rem;
    background: url(../img/five_day.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    right: 0rem;
    top: 4.8rem;
}


.lock_cloud1 {
    width: 3.1em;
    height: 2.48rem;
    background: url(../img/lock_1.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 3.16rem;
    top: 6.7rem;
}

.lock_cloud2 {
    width: 2.51rem;
    height: 1.93rem;
    background: url(../img/lock_2.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 0.6rem;
    top: 5.6rem;
}

.lock_cloud3 {
    width: 2.49rem;
    height: 1.81rem;
    background: url(../img/lock_3.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 0.56rem;
    top: 3.5rem;
}

.lock_cloud4 {
    width: 2.56rem;
    height: 2.24rem;
    background: url(../img/lock_4.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 3.8rem;
    top: 2rem;
}

.lock_cloud5 {
    width: 2.42rem;
    height: 2.04rem;
    background: url(../img/lock_5.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    right: 0rem;
    top: 4.6rem;
}

.travel-btn {
    width: 4.52rem;
    height: 2.42rem;
    background: url(../img/btn.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: 1.64rem;
    top: 9.67rem;
}

.btn-list {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0.3rem;
}

.btn-item {
    width: 0.77rem;
    height: 0.95rem;
    margin: 0 0.24rem;
}

.btn-item1 {
    background: url(../img/icon_diary.png) no-repeat top center;
    background-size: 100%;
}

.btn-item2 {
    background: url(../img/icon_rule.png) no-repeat top center;
    background-size: 100%;
}

.btn-item3 {
    background: url(../img/icon_reward.png) no-repeat top center;
    background-size: 100%;
}

.btn-item4 {
    background: url(../img/icon_RewardCenter.png) no-repeat top center;
    background-size: 100%;
}

.road1 {
    width: 2rem;
    height: 0.1rem;
    
    position: absolute;
    top: 7.8rem;
    left: 2.3rem;
    transform: rotate(-32deg);
}



.road2 {
    width: 2.8rem;
    height: 0.1rem;
    
    position: absolute;
    top: 6.5rem;
    left: 1.6rem;
    transform: rotate(35deg);
}

.road3 {
    width: 1.3rem;
    height: 0.1rem;
    
    position: absolute;
    top: 5.3rem;
    left: 1.7rem;
    transform: rotate(-32deg);
}

.road4 {
    width: 2rem;
    height: 0.1rem;
    position: absolute;
    top: 4.5rem;
    left: 2.7rem;
    transform: rotate(-32deg);
}

.road5 {
    width: 2.8rem;
    height: 0.1rem;
    
    position: absolute;
    top: 4.7rem;
    left: 3.9rem;
    transform: rotate(35deg);
}

.road0-role {
    width: 1.85rem;
    height: 2.61rem;
    background: url(../img/point_summer1.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    top: 6.8rem;
    left: 1.6rem;
}


.road1-role {
    width: 1.85rem;
    height: 2.61rem;
    background: url(../img/point_summer2.png) no-repeat top center;
    background-size: 100%;
    transform: rotate(32deg);
    position: absolute;
    left: -0.65rem;
    top: -1.61rem;
    transition: all 1s;
}

.road1-role-finish {
    left: 1.3rem;
    transition: all 1s;
}

.road2-role {
    width: 2.08em;
    height: 2.37rem;
    background: url(../img/point_summer3.png) no-repeat top center;
    background-size: 100%;
    transform: rotate(-32deg);
    position: absolute;
    right: -0.75rem;
    top: -1.51rem;
    transition: all 1s;
}

.road2-role-finish {
    right: 1.3rem;
}

.road3-role {
    width: 2.15rem;
    height: 2.36rem;
    background: url(../img/point_summer4.png) no-repeat top center;
    background-size: 100%;
    transform: rotate(32deg);
    position: absolute;
    left: -1.05rem;
    top: -1.61rem;
    transition: all 1s;
}

.road3-role-finish {
    left: 0.3rem;
}

.road4-role {
    width: 1.92rem;
    height: 2.38rem;
    background: url(../img/point_summer5.png) no-repeat top center;
    background-size: 100%;
    transform: rotate(32deg);
    position: absolute;
    left: -0.75rem;
    top: -1.51rem;
    transition: all 1s;
}

.road4-role-finish {
    left: 0.9rem;
}

.road5-role {
    width: 2.42rem;
    height: 2.19rem;
    background: url(../img/point_summer6.png) no-repeat top center;
    background-size: 100%;
    transform: rotate(-32deg);
    position: absolute;
    left: -1.1rem;
    top: -1.31rem;
    transition: all 1s;
}

.road5-role-finish {
    left: 1.1rem;
}

.road0-role-msg {
    width: 1.42rem;
    height: 0.75rem;
    background: url(../img/point_1.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: -0.9rem;
    top: -0.1rem;
}

.road1-role-msg {
    width: 1.42rem;
    height: 0.75rem;
    background: url(../img/point_2.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: -0.9rem;
    top: -0.1rem;
}

.road2-role-msg {
    width: 1.42rem;
    height: 0.75rem;
    background: url(../img/point_3.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    right: -0.7rem;
    top: -0.5rem;
}

.road3-role-msg {
    width: 1.42rem;
    height: 0.75rem;
    background: url(../img/point_4.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    right: -0.95rem;
    top: -0.1rem;
}

.road4-role-msg {
    width: 1.42rem;
    height: 0.75rem;
    background: url(../img/point_5.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: -0.9rem;
    top: -0.1rem;
}

.road5-role-msg {
    width: 1.42rem;
    height: 0.75rem;
    background: url(../img/point_6.png) no-repeat top center;
    background-size: 100%;
    position: absolute;
    left: -0.7rem;
    top: -0.2rem;
}

.loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: rgb(230, 188, 193);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading img {
    width: 70px;
}