*{box-sizing: border-box; margin: 0; padding: 0;}
.block{ width: 100%; height: 100vh; background-image: url(https://ioi-e-group-1308616072.cos.ap-chengdu.myqcloud.com/shogun/images/bg.png); background-size: cover; padding-top: 780px;}
.logo{ width: 520px; display: block; margin: 0 auto;}
.font-box{width: 1200px; margin: 0 auto; display: flex;}
.font-box .font{ width: 840px; color: #e4e3df; font-size: 22px;}
.font-box .steam-btn{ width: 265px; height: 45px; background-image: url(https://ioi-e-group-1308616072.cos.ap-chengdu.myqcloud.com/shogun/images/steam-btn-bg.png); background-size: 100% 100%; display: flex; align-items: center; justify-content: center; font-size: 22px;}
.font-box .steam-btn img{ margin-right: 10px; margin-top: 3px;}
.font-box a{text-decoration: none; color: inherit;}
.font-box .tip{  color: #b2b3b3; font-size: 12px; margin-top: 3px; display: flex; align-items: center; justify-content: center;}
.font-box .tip img{ margin-top: 3px; margin-right: 3px;}


.progress_bar{ width: 1200px; padding: 2px; border: 1px solid #877127; border-radius: 10px; margin: 0 auto; margin-top: 25px;}
.progress_bar .progress-fill{ width: 0%; height: 10px; background-color: #efc73f; border-radius: 5px;}
.progress-tip{ width: 1200px; color: #efc73f; font-size: 14px; text-align: center;margin: 0 auto;}


@media (min-width: 769px) {
    .block {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 40px clamp(24px, 4vw, 80px) clamp(24px, 3vh, 40px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .logo {
        width: min(520px, 36vw, 48vh);
        height: auto;
        flex: none;
        margin: 0 auto clamp(14px, 2vh, 24px);
    }

    .font-box {
        width: 100%;
        max-width: 1200px;
        gap: clamp(24px, 4vw, 78px);
        align-items: center;
    }

    .font-box .font {
        width: auto;
        flex: 1;
        min-width: 0;
        font-size: clamp(16px, 1.15vw, 22px);
        line-height: 1.6;
    }

    .steam-box { flex: 0 0 265px; }
    .font-box .steam-btn { width: 100%; }
    .font-box .steam-btn img { width: 21px; height: 21px; }
    .font-box .tip { line-height: 1.5; }
    .font-box .tip img { width: 13px; height: 13px; }

    .progress_bar,
    .progress-tip {
        width: 100%;
        max-width: 1200px;
        flex: none;
    }

    .progress_bar { margin-top: clamp(16px, 2.3vh, 25px); }
    .progress-tip { margin-top: 8px; line-height: 1.4; }
}


@media (min-width: 769px) and (max-width: 1440px) {
    .logo { width: min(440px, 38vw, 46vh); }
    .font-box { gap: 28px; }
    .font-box .font { font-size: 16px; }
    .steam-box { flex-basis: 230px; }
    .font-box .steam-btn { font-size: 18px; }
}


@media (min-width: 769px) and (max-height: 800px) {
    .block { padding-top: 24px; padding-bottom: 20px; }
    .logo { width: min(400px, 34vw, 44vh); margin-bottom: 12px; }
    .font-box .font { font-size: 16px; line-height: 1.5; }
    .font-box .steam-btn { font-size: 18px; }
    .progress_bar { margin-top: 16px; }
}

@media (min-width: 769px) and (max-height: 650px) {
    .block { padding-top: 20px; padding-bottom: 16px; }
    .logo { width: min(320px, 30vw, 40vh); margin-bottom: 10px; }
    .font-box .font { font-size: 14px; line-height: 1.5; }
    .font-box .steam-btn { height: 40px; font-size: 16px; }
    .progress_bar { margin-top: 12px; }
    .progress-tip { margin-top: 6px; }
}


@media (max-width: 768px) {

    .block{ width: 100%;  background-image: url(https://ioi-e-group-1308616072.cos.ap-chengdu.myqcloud.com/shogun/images/mobile-bg.png); background-size: 100% auto; background-repeat: no-repeat; padding-top: 93vw; background-color: #070c14;}
    .logo{width: 77vw;}

    .font-box .font,.font-box,.progress_bar,.progress-tip{width: 87vw;}

    .font-box{display: block;}
    .font-box .font{ font-size: 3vw; text-align: center;}
    .font-box .steam-btn{ margin: 0 auto; margin-top: 4.6vw;}
}