* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }
body { overflow-x: hidden; }

.block {
    position: relative;
    width: 100%;
    min-height: 620px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding-top: clamp(42px, 6.95vh, 75px);
    background: url(https://ioi-g-group-1308616072.cos.ap-chengdu.myqcloud.com/valheim/images/bg.png) center center / cover no-repeat;
}

.block .logo {
    display: block;
    width: min(35.47vw, 681px);
    height: auto;
    margin: 0 auto;
}

.block .font-1 {
    display: block;
    width: min(22.24vw, 427px);
    height: auto;
    margin: 0 auto;
}

.block .font-2 {
    display: block;
    width: min(29.95vw, 575px);
    height: auto;
    margin: clamp(80px, 11vh, 120px) auto 0;
}

.steam-btn-area {
    position: relative;
    z-index: 2;
    display: block;
    width: 202px;
    margin: 0 auto;
}

.steam-btn-area .steam-btn {
    width: 202px;
    height: 45px;
    background: url(https://ioi-g-group-1308616072.cos.ap-chengdu.myqcloud.com/valheim/images/steam-btn-bg.png) center / cover no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.steam-btn-area .steam-btn img { width: 21px; height: 21px; margin-right: 10px; }

.steam-btn-area .tip {
    width: 202px;
    height: 30px;
    margin: 5px auto 0;
    color: #b2b3b3;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steam-btn-area .tip img { width: 13px; height: 13px; margin-right: 5px; }

.bottom-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(200px, 28.8vh, 311px);
    background: url(https://ioi-g-group-1308616072.cos.ap-chengdu.myqcloud.com/valheim/images/bottom_img.png) center bottom / cover no-repeat;
}

.progress-bar-area {
    position: relative;
    z-index: 2;
    width: min(62.76vw, 1205px);
    height: 50px;
    margin: clamp(22px, 3.25vh, 35px) auto 0;
}

.progress-bar-area .progress-bar {
    width: 100%;
    height: 17px;
    padding: 2px;
    border: 2px solid #5b7988;
}

.progress-bar-area .progress-bar .progress { height: 100%; background-color: #abe3ff; }
.progress-bar-area p { width: 100%; margin-top: 10px; color: #abe3ff; text-align: center; }


@media (min-width: 769px) and (max-width: 1440px) {
    .block { padding-top: clamp(28px, 5vh, 48px); }
    .block .logo { width: clamp(430px, 35vw, 505px); }
    .block .font-1 { width: clamp(280px, 22vw, 320px); }
    .block .font-2 {
        width: clamp(390px, 30vw, 440px);
        margin-top: clamp(50px, 8vh, 75px);
    }
    .progress-bar-area { width: min(76vw, 960px); }
}


@media (min-width: 769px) and (max-height: 800px) {
    .block { padding-top: 20px; }
    .block .logo { width: min(35vw, 62vh); }
    .block .font-1 { width: min(22vw, 39vh); }
    .block .font-2 {
        width: min(30vw, 55vh);
        margin-top: clamp(25px, 5vh, 40px);
    }
    .progress-bar-area { margin-top: 16px; }
    .bottom-area { height: clamp(170px, 27vh, 216px); }
}

@media (min-width: 769px) and (max-height: 650px) {
    .block { padding-top: 12px; }
    .block .logo { width: min(32vw, 56vh); }
    .block .font-1 { width: min(20vw, 34vh); }
    .block .font-2 {
        width: min(27vw, 48vh);
        margin-top: 18px;
    }
    .steam-btn-area {
        transform: scale(0.9);
        transform-origin: top center;
    }
    .progress-bar-area { margin-top: 4px; }
}

@media (max-width: 768px) {

    .block{background-image: url(https://ioi-g-group-1308616072.cos.ap-chengdu.myqcloud.com/valheim/images/mobile-bg.png); padding-top: 0;}
    .logo{width: 90vw !important;}
    .block .font-1{width: 53.3vw;}
    .block .font-2{width: 75vw; margin-top: 35vw;}
    .steam-btn-area{width: 50vw;}
    .steam-btn-area .steam-btn{width: 50vw; height: 10.6vw;font-size: 3vw;}
    .steam-btn-area .steam-btn img{width: 5.6vw; height: 5.6vw;}
    .steam-btn-area .tip{font-size: 2vw;width: 50vw;}

}