body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.header, .footer {
    background-color: #333;
    color: #fff;
    padding: 15px;
    text-align: center;
}

.nav {
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.nav ul {
    list-style-type: none;
    padding: 0;
}

.nav ul li {
    display: inline;
    margin-right: 10px;
}

.nav .left {
    display: flex;
}

.nav .left a {
    font-size: 25px; /* 你可以根据需要调整这个值 */
    color: black;
    font-weight: bold;
    text-decoration: none;
}

.nav .right {
    display: flex;
}

.nav .right a {
    font-size: 16px; /* 你可以根据需要调整这个值 */
    color: black;
    text-decoration: none;
}

.visiontop {
    display: flex;
    flex-direction: column;
    min-height: 25vh;
}
.visionbottom {
    display: flex;
    flex-direction: column;
    min-height: 25vh;
}
.vision {
    text-align: center;
    margin-top: auto;
}

.vision .title {
    font-size: 25px;
    font-weight: bold;
    color:black
}

.vision .cont {
    font-size: 16px;
    color:black
}

.bk1cover {
    background: url('image/bk2.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat; /* 禁止背景图重复 */
    background-position: center;
    /*background-attachment: fixed; /* 固定背景图 */
}

.bk2cover {
    background: url('image/about.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat; /* 禁止背景图重复 */
    background-position: center;
    /*background-attachment: fixed; /* 固定背景图 */
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center; /* 文字居中 */
}
.image-container .image-item {
    margin: 10px; /* 图片之间的间距 */
}
.image-container img {
    width: 360px; /* 设置图片的宽度 */
    height: auto; /* 保持宽高比 */
}
.image-container p {
    margin-top: 5px; /* 文字与图片的间距 */
}
.main {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.sidebar {
    background-color: #ccc;
    width: 200px;
    padding: 15px;
}

h2 {
    padding: 10px;
}

.content {
    background-color: #fff;
    flex-grow: 1;
    padding: 15px;
}

.about {
    background: url('image/about.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat; /* 禁止背景图重复 */
    background-position: center;
    padding: 15px;
}

.join {
    background: url('image/join.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat; /* 禁止背景图重复 */
    background-position: center;
    padding: 15px;
}

.job {
    width: 480px; /* 设置每个职位占据的宽度 */
    display: inline-block; /* 设置为内联块级元素，让其并排显示 */
    vertical-align: top; /* 设置垂直对齐方式为顶部对齐 */
    margin-right: 15px; /* 设置间距 */
    /*box-sizing: border-box;
    border: 1px solid #ccc;*/
}

h3 {
    margin-top: 0;
}
.contact {
    background: url('image/contact.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat; /* 禁止背景图重复 */
    background-position: center;
    padding: 15px;
}

.contact-info {
    margin-top: 20px;
}

.contact-info p {
    margin-bottom: 10px;
}

.social-container {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 在主轴上居中对齐 */
}

.social-container a {
    display: inline-block;
    margin: 10px;
}

.social-container .icon {
    width: 32px;
    height: 32px;
}

.qr-code {
    width: 200px;
    height: 200px;
    position: fixed; /* 使用固定定位 */
    top: 50%; /* 设置顶部位置为屏幕高度的一半 */
    left: 50%; /* 设置左侧位置为屏幕宽度的一半 */
    transform: translate(-50%, -50%); /* 使用 transform 属性将元素向左上角偏移50% */
    display: none; /* 默认隐藏 */
    z-index: 999; /* 确保在其他元素上方 */
}

/* 当屏幕尺寸小于600px时，应用以下样式 */
@media screen and (max-width: 400px) {
    .bk1cover {
        background-position: left;
        /*background-attachment: fixed; /* 固定背景图 */
    }            
    .image-container img {
        max-width: 100%; /* 设置图片的宽度 */
    }
    .job {
        max-width: 100%; /* 设置每个职位占据的宽度 */
    }
}
/* 当屏幕尺寸小于600px时，应用以下样式 */
@media screen and (min-width: 401px) and (max-width: 800px) {
    .bk1cover {
        background-position: left;
        /*background-attachment: fixed; /* 固定背景图 */
    }
    .visiontop {
        min-height: 15vh;
    }
    .visionbottom {
        min-height: 15vh;
    }
    .vision .title {
        font-size: 25px;
    }
}

/* 当屏幕尺寸大于或等于600px时，应用以下样式 */
@media screen and (min-width: 801px) {
    
}