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

@media screen and (min-width: 1024px) {
    /* 横屏 */
    body {
        background: url(../img/bg.png);
        /* 确保图片覆盖整个元素 */
        /* background-size: cover; */
        /* 确保图片覆盖整个元素 */
        background-position: bottom;
        /* 将图片居中显示 */
        /* min-height: 97vh; */
        height: 100vh !important;
        /* 确保至少为视口高度 */
        background-attachment: fixed;
        display: flex;
        flex-direction: column;
    }
    /* .main{
        display: flex;
        flex-direction: column;
    } */
    /* .bg {
        position: relative;
        top: 450px;
        transform: translateY(-50%);
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        justify-items: center;
        align-content: center;
        background: url('../img/title.png');
    } */
    .bg {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .page {
        width: 100%;
        /* transform: translateY(-50%); */
        /* flex布局 两端对齐 */
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* gap: 80px; */
        justify-items: center;
        align-content: center;
    }
    .bg a img {
        /* margin-right: -200px; */
        width: 400px;
        /* height: 15vh; */
        transition: all .1s;
        margin-bottom: 30px;
    }
    .bg a:nth-child(odd) img {
        margin-right: -300px;
    }
    .bg a:nth-child(even) img {
        /* background-color: #fff; */
        margin-left: -300px;
    }
    .bg a img:active {
        transform: translateY(1vh);
    }
    .title {
        height: 400px;
    }
    .title img {
        height: 400px;
        position: relative;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
    }
    .title img:nth-child(2) {
        /* display: none; */
        height: 30px;
        position: absolute;
        top: 250px;
        left: 50%;
        transform: translateX(-50%);
    }
    .title img:last-child {
        /* display: none; */
        height: 50px;
        position: absolute;
        top: 290px;
        left: 50%;
        transform: translateX(-50%);
    }
    .footer img {
        height: 50px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 0px;
        /* transform: scale(0.8); */
    }
}

@media screen and (min-width: 500px) and (max-width: 1140px) {
    body {
        background: url(../img/bg.png);
        /* 确保图片覆盖整个元素 */
        background-size: cover;
        /* 确保图片覆盖整个元素 */
        background-position: center;
        /* 将图片居中显示 */
        /* min-height: 97vh; */
        height: 100vh !important;
        /* 确保至少为视口高度 */
    }
    a {
        text-decoration: none;
        /* 删除下划线 */
        color: inherit;
        /* 继承父级元素的文本颜色 */
        font-weight: inherit;
        /* 继承父级元素的字体粗细 */
        font-style: inherit;
        /* 继承父级元素的字体样式 */
    }
    .bg {
        padding: 25%;
        position: relative;
        top: 53%;
        transform: translateY(-50%);
        /* flex布局 两端对齐 */
        display: flex;
        grid-template-columns: 1fr;
        gap: 5vh;
        justify-items: center;
        align-content: center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* background: url('../img/title.png') no-repeat;
        background-size: 100vw;
        background-position: -10vh; */
    }
    .page {
        width: 100%;
    }
    .page a img {
        margin-bottom: 30px;
        /* padding-left:15%; */
        /* display: flex; */
        /* position: relative; */
        /* left: 50%; */
        /* transform: translateX(50%); */
    }
    .title img {
        /* display: none; */
        height: 20vh;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
    }
    .title img:nth-child(2) {
        /* display: none; */
        height: 2vh;
        position: absolute;
        top: 11%;
        left: 50%;
        transform: translateX(-50%);
    }
    .title img:last-child {
        /* display: none; */
        height: 4vh;
        position: absolute;
        top: 12%;
        left: 50%;
        transform: translateX(-50%);
    }
    .bg a img {
        width: 50vw;
        /* height: 15vh; */
        transition: all .1s;
    }
    .bg a img:active {
        transform: translateY(1vh);
    }
    .footer img {
        height: 5vh;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5vh;
    }
}

@media screen and (max-width: 500px) {
    body {
        background: url(../img/bg.png);
        /* 确保图片覆盖整个元素 */
        background-size: cover;
        /* 确保图片覆盖整个元素 */
        background-position: center;
        /* 将图片居中显示 */
        /* min-height: 97vh; */
        height: 100vh !important;
        /* 确保至少为视口高度 */
    }
    a {
        text-decoration: none;
        /* 删除下划线 */
        color: inherit;
        /* 继承父级元素的文本颜色 */
        font-weight: inherit;
        /* 继承父级元素的字体粗细 */
        font-style: inherit;
        /* 继承父级元素的字体样式 */
    }
    .bg {
        padding: 15%;
        position: relative;
        top: 53%;
        transform: translateY(-50%);
        /* flex布局 两端对齐 */
        display: flex;
        grid-template-columns: 1fr;
        gap: 5vh;
        justify-items: center;
        align-content: center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* background: url('../img/title.png') no-repeat;
        background-size: 100vw;
        background-position: -10vh; */
    }
    .page {
        width: 100%;
    }
    .page a img {
        margin-bottom: 30px;
        /* padding-left:15%; */
        /* display: flex; */
        /* position: relative; */
        /* left: 50%; */
        /* transform: translateX(50%); */
    }
    .title img {
        /* display: none; */
        height: 20vh;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
    }
    .title img:nth-child(2) {
        /* display: none; */
        height: 2vh;
        position: absolute;
        top: 11%;
        left: 50%;
        transform: translateX(-50%);
    }
    .title img:last-child {
        /* display: none; */
        height: 3vh;
        position: absolute;
        top: 14%;
        left: 50%;
        transform: translateX(-50%);
    }
    .bg a img {
        width: 70vw;
        /* height: 15vh; */
        transition: all .1s;
    }
    .bg a img:active {
        transform: translateY(1vh);
    }
    .footer img {
        height: 5vh;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5vh;
    }
}