/* ===== 通用进度条 ===== */
.progress-container {
    margin: 0;
    padding: 0;
    background: rgba(232, 227, 205, 0.5);
    width: auto;
    height: 100vh;
}

.progress-title {
    text-align: center;
    padding: 10px 0;
}
.progress-title p {
    margin: 0;
    padding: 0;
}

.progress {
    border: 4px solid #94202d;
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    display: flex;
    height: 10px;
    width: 80%;
    margin: 0 auto;
}
.progress-value {
    width: 0;
    border-radius: 100px;
    background: #94202d;
    height: 10px;
    transition: width 30s ease;
}
.loading {                /* 30s 后 JS 会给元素加这个 class */
    width: 95%;
}

/* ===== 桌面端居中 ===== */
@media only screen and (min-width: 1025px) {
    .progress-container {
        height: 300px;
        width: 500px;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .progress-title {
        margin-top: 50px;
    }
}

/* ===== IE 警告层 ===== */
.old-ie-box {
    margin: 0;
    padding: 0;
    background-color: #f3eeda;
    height: 300px;
    width: 550px;
    position: absolute;
    top: 30%;
    left: 40%;
}
.old-ie-box .txt {
    margin-top: 50px;
    text-align: center;
    padding: 0 15px;
}
.old-ie-box .txt p {
    margin: 0;
    padding-top: 20px;
}

/* ===== 初始化容器默认隐藏 ===== */
#container {
    visibility: visible;   /* 如需先隐藏，把值改成 hidden，JS 准备好后再加 loading 类即可 */
}