/* 添加浏览器前缀以提高兼容性 */
header {
    background-color: #323232;
}

#banner {
    width: 100%;
    height: auto;
    overflow: hidden;
	margin-top: 50px;
}

#banner img {
    width: 100%;
    /* 确保图片在不同浏览器下的显示效果一致 */
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    object-fit: cover;
}

.con {
    width: 85vw;
    height: auto;
    overflow: hidden;
    margin: 2em auto 0;
    /* 使用 Flexbox 布局替代浮动，提高兼容性和布局灵活性 */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* 去除不必要的注释 */
}

.box {
    width: 19%;
    aspect-ratio: 1/0.7;
    margin: auto;
    border-radius: 10px;
    color: white;
    text-align: center;
    margin-bottom: 2em;
    overflow: hidden;
    /* 确保盒子模型计算方式一致 */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.box p {
    line-height: 1.5em;
    width: 90%;
    margin: 0 auto; /* 居中段落文本 */
}

.box-tips {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.box h2 {
    margin-top: 0; /* 简化属性值 */
}

.bumen {
    width: 80vw;
    height: auto;
    overflow: hidden;
    margin: auto;
    margin-bottom: 2em;
    line-height: 1.5em;
}

.bumen p {
    line-height: 2em;
}

.bumen a {
    color: #ff9843;
}

.bumen a:hover {
    color: #ff5e1e;
    text-decoration: underline;
}

.tixing {
    width: 80vw;
    height: auto;
    overflow: hidden;
    margin: auto;
    margin-bottom: 2em;
    line-height: 2em;
    color: #666666;
}