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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow-y: auto;
}

.page {
    max-width: 760px;
    margin: 0 auto;
}

.right {
    height: 300px;
    position: relative;
}

.tag_img {
    position: absolute;
}

/* 屏幕大于769px(电脑) */
@media screen and (min-width: 769px) {
    body {
        background: url('../imgs/pc/background.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .head {
        padding: 60px 20px 20px 20px;
    }

    .logo_img {
        width: 15%;
    }

    .main {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .left {
        width: 40%;
    }

    .theme_img {
        width: 100%;
        aspect-ratio: 1672/941;
        background: url('../imgs/pc/main.webp');
        background-size: 100% 100%;
    }

    .scan_img {
        width: 100%;
        aspect-ratio: 1340/670;
        background: url('../imgs/pc/lower.webp');
        background-size: 100% 100%;
    }

    .right {
        width: 58%;
    }

    .tag_img {
        width: 16%;
    }

    .tag_1 {
        top: 50%;
        left: 0%;
    }

    .tag_2 {
        top: 0%;
        left: 50%;
    }

    .tag_3 {
        top: 60%;
        right: 0%;
    }

    .tag_4 {
        bottom: 0%;
        left: 60%;
    }

    .foot {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .foot_img {
        width: 22%;
        aspect-ratio: 822/274;
        background: url('../imgs/pc/auxiliary.webp');
        background-size: 100% 100%;
    }

    .btn_line {
        display: none;
    }
}

/* 屏幕小于769px(手机) */
@media screen and (max-width: 769px) {
    body {
        position: relative;
        background: url('../imgs/mobile/background.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
    }

    .head {
        padding: 20px;
    }

    .logo_img {
        width: 50%;
    }

    .main {
        padding: 10px;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
    }

    .left {
        width: 100%;
        margin: 20px 0;
    }

    .theme_img {
        width: 100%;
        aspect-ratio: 1672/941;
        background: url('../imgs/pc/main.webp');
        background-size: 100% 100%;
    }

    .right {
        width: 100%;
    }

    .tag_img {
        width: 24%;
    }

    .tag_1 {
        top: 50%;
        left: 0%;
    }

    .tag_2 {
        top: 0%;
        left: 33%;
    }

    .tag_3 {
        top: 75%;
        right: 0%;
    }

    .tag_4 {
        bottom: 0%;
        left: 10%;
    }

    .foot {
        width: 100%;
        padding-bottom: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .foot_img {
        width: 50%;
        aspect-ratio: 822/274;
        background: url('../imgs/pc/auxiliary.webp');
        background-size: 100% 100%;
    }

    .btn_line {
        padding: 10px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .download_btn {
        width: 32%;
    }

    .download_btn img {
        width: 100%;
    }
}