@font-face {
    font-family: "CooperZhengKai";
    src: url("	https://ioi-g-group-1308616072.cos.ap-chengdu.myqcloud.com/Beast_of_Reincarnation/font/CooperZhengKai-2.0.ttf") format("truetype");
    font-weight: 500;
}
*{margin: 0; padding: 0; box-sizing: border-box;}

.block{ width: 100%; height: 100vh; background-image: url(	https://ioi-g-group-1308616072.cos.ap-chengdu.myqcloud.com/Beast_of_Reincarnation/images/bg.png); background-size: cover; padding-top: 7vw; position: relative; overflow: hidden;}
.logo{width: 645px; display: block; margin-left: 20.8vw;}
.appointment-btn{ width: 400px; display: block; margin-left: 26vw; margin-top: 55px;}
.media_icon{ width: 534px; display: block; margin-left: 23.5vw; margin-top: 30px;}
.font{ width: 800px; color: #fff3d9; font-size: 22px; margin-left: 18.5vw; margin-top: 112px; font-family: 'CooperZhengKai';} 
.tag-box{ margin-left: 18.5vw; margin-top: 20px;}
.tag-box span{padding: 5px 15px; border: 1px solid #fff3d9; color: #fff3d9; border-radius: 5px; font-size: 16px; margin-right: 10px;}

.steam-btn-box{width: 262px; position: absolute; right: 20vw;}
.steam-btn-box .steam-btn{width: 100%;}
.steam-btn-box p{ color: #a68e5b; font-size: 14px; text-align: center; width: 100%; display: flex; align-items: center; justify-content: center;}
.steam-btn-box p .steam_tip_icon{ margin-right: 5px;}

.progress_bar{ width: 62.5vw; padding: 2px; border: 1px solid #a68e5b; border-radius: 10px; position: absolute; left: 18.5vw;}
.progress_bar .progress-fill{ width: 0%; height: 10px; background-color: #a68e5b; border-radius: 5px;}
.tip{ width: 62.5vw; color: #a68e5b; font-size: 14px; text-align: center; position: absolute; left: 18.5vw;}

/* 桌面端高度档位（仅 width > 1200px） */

/* 超矮屏：< 700px */
@media (min-width: 1201px) and (max-height: 699px) {
    .steam-btn-box { bottom: 65px; }
    .progress_bar   { bottom: 30px; }
    .tip            { bottom: 12px; }
}

/* 矮屏：700px - 899px */
@media (min-width: 1201px) and (min-height: 700px) and (max-height: 899px) {
    .steam-btn-box { bottom: 110px; }
    .progress_bar   { bottom: 42px; }
    .tip            { bottom: 20px; }
}

/* 标准屏：900px - 1199px（覆盖 1080p） */
@media (min-width: 1201px) and (min-height: 900px) and (max-height: 1199px) {
    .steam-btn-box { bottom: 190px; }
    .progress_bar   { bottom: 50px; }
    .tip            { bottom: 25px; }
}

/* 高屏：>= 1200px */
@media (min-width: 1201px) and (min-height: 1200px) {
    .steam-btn-box { bottom: 220px; }
    .progress_bar   { bottom: 58px; }
    .tip            { bottom: 30px; }
}

@media (max-width: 1200px) {
    .block {
        height: auto;
        min-height: 100vh;
        padding-top: 8vw;
        background-position: 67% top;
    }

    .logo {
        width: 75.3vw;
        margin-left: auto;
        margin-right: auto;
    }

    .appointment-btn {
        width: 52.1vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 48.8vw;
    }

    .media_icon {
        width: 62.8vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4vw;
    }

    .font {
        width: 71.4vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6vw;
        font-size: 3vw;
        text-align: center;
        line-height: 1.8;
    }

    .tag-box {
        display: flex;
        justify-content: center;
        margin-left: 0;
        margin-top: 4vw;
    }

    .steam-btn-box {
        position: static;
        width: 38.6vw;
        margin: 6vw auto 0;
    }

    .steam-btn-box p {
        font-size: 12px;
        margin-top: 8px;
    }

    .progress_bar {
        position: static;
        width: 62.8vw;
        left: auto;
        bottom: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6vw;
    }

    .tip {
        position: static;
        width: 62.8vw;
        left: auto;
        bottom: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 8px;
        padding-bottom: 6vw;
    }
}