.wrapper {
    width: 100%;
    height: 100%;
    background: url(../images/loadingimg1.png) no-repeat center center / 100% 100%;
}

.loading {
    /* 居中布局，保证元素在加载背景之上居中显示 */
    width: 100%;
    height: 7.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8vw;
    box-sizing: border-box;
}

.loading-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    margin-bottom: 4vw;
}

.loading-image {
    width: 1.42rem;
    /* max-width: 380px; */
    height: auto;
    display: block;
}

.loading-percent {
    color: #284700;
    font-size: 5vw;
    line-height: 1;
    /* text-shadow: 0 1px 2px rgba(0,0,0,0.25); */
    margin-top: 0.3rem;
    font-size: 0.3rem;
}

.loading-bar {
    width: 84vw;
    max-width: 800px;
    height: 12px;
    border-radius: 12px;
    background-color: #724622;
    /* 底景色 */
    overflow: visible;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    position: relative;
    /* 让指针在进度条内绝对定位 */
}

.loading-bar__fill {
    height: 100%;
    width: 0%;
    background-color: #3eb327;
    /* 加载色 */
    transition: width 0.08s linear;
    border-radius: 12px;
}

.loading-pointer {
    position: absolute;
    bottom: 100%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    z-index: 2;
    left: 0;
    will-change: left;
    transition: left 0.06s linear;
}

/* 调整跟随移动的百分比样式，以适配浅色背景 */
.loading-pointer .loading-percent {
    color: #284700;
    font-size: 0.3rem;
    margin-top: 0;
}

.join {
    width: 2.12rem;
    margin: 0.3rem auto 0;
    animation:  bigsamll 2s infinite;
}

@keyframes bigsamll {
    0% {
        transform: scale(0.9)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(0.95)
    }
}