/* 全局 CSS */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
    }

    nav {
        margin: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row; /* 确保是横向排列 */
    }

    .nav-left {
        font-size: 22px;
        font-weight: bold;
        text-decoration: none;
        padding: 5;
        color: #000;
    }

    .nav-right {
        display: flex;
        gap: 20px;
    }

    .nav-right a {
        text-decoration: none;
        font-size: 22px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: #000; /* 主色：黑色 */
        transition: color 0.3s;
    }

    .nav-right a:hover {
        color: #666; /* hover 灰色 */
    }

    .nav-right a.router-link-exact-active {
        font-weight: bold;
        color: #333; 
    }

    .container {
        max-width: 1400px;
        margin: 20px auto;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
    }

    .unit-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bk-img {
        width: 100%;
        padding: 0;
        display: block;
    }

    .major {
        background: white;
        padding: 20px;
        margin-top: -100px;
        margin-bottom: 50px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        z-index: 1;
        position: relative;
        max-width: 1200px;
        width: 90%;
    }

    .responsive-img {
        width: 80%;
        height: auto;
        display: block;
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 10px;
    }

    .contact-item img {
        height: 24px;
        width: auto;
    }

    .contact-item a {
        text-decoration: none;
        font-size: 16px;
        color: black;
    }

    .major-home {
        padding: 0;
    }

    .homepage-work {
        display: flex;
        background-color: #f5f5f5;
    }

    .work-experience-title {
        font-size: 15px;
        font-weight: 600;
    }

    .work-experience-from {
        font-size: medium;
        font-weight: 300;
    }

    .news-section {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin: 20px;
    }

    .news-content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    @font-face {
        font-family: 'LiuJianMaoCao';
        src: url('LiuJianMaoCao-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .slogen {
        font-family: 'LiuJianMaoCao', sans-serif;
        font-weight: 800;
        margin-top: auto;
        margin-right: 10px;
        opacity: 0.7;
        font-size: 20px;
        text-align: right;
    }

    .resume {
        max-height: 700px;
        overflow-y: auto;
        margin: 10px auto;
        padding: 5px;
        font-family: Arial, sans-serif;
    }

    .resume-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .item-index {
        width: 150px;
        font-weight: bold;
        line-height: 1.5;
        color: #333;
        flex-shrink: 0;
    }

    .item-content {
        flex: 1;
        font-size: 18px;
    }

    .profile {
        margin-right: 60px;
    }

    .profile img {
        width: 180px;
        height: auto;
    }

    .student-profile {
        flex: 1 1 auto;
        max-width: 130px;      /* 限制最大宽度，避免太宽 */
        margin: 8px;
        text-align: center;
      }
      
      .student-profile img {
        height: 130px;         /* 固定高度 */
        width: auto;           /* 自适应宽度 */
        object-fit: cover;     /* 填满区域不变形 */
        display: block;
        margin: 0 auto;
      }
      
      

/* 汉堡按钮样式 */
.burger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 22px;
    cursor: pointer;
    z-index: 999;
}

.burger span {
    height: 3px;
    background: #333;
    border-radius: 2px;
}

/* 右侧滑出菜单 */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    padding: 20px;
    transition: right 0.3s ease;
    z-index: 1000;
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu a {
    display: block;
    padding: 15px 0;
    font-size: 18px;
    color: #000;
    text-decoration: none;
}

.mobile-menu a:hover {
    color: #666;
}

.home-header-flex {
    display: flex;
    flex: 1;
    margin: 20px 0 20px 20px;
}
.profile_wrapper {
    flex:1; 
    padding:5px; 
    margin: 10px
}
.contacts {
    flex:1; 
    padding: auto;
}

.slogen::before {
    content: attr(data-slogan);
}

.home-intro {
    font-size: 19px;
}

/* 移动端样式 */
.team-intro {
    display: flex; 
    font-size: large;
}

img {
    border-radius: 5%; /* 相对于图片自身宽度和高度 */
  }

.bk-img {
    border-radius: 0
}

    /* 响应式：移动端优化 */
    @media screen and (max-width: 768px) {
        .home-intro {
            font-size: 15px;
        }

        .student-profile {
           
            max-width: 130px;      /* 限制最大宽度，避免太宽 */
            margin: 4px;
            
          }

        .team-intro {
           
            font-size: 15px;
        }

        .item-content {
            flex: 1;
            font-size: 15px;
        }
        .slogen::before {
            margin: 30px 0 10px 0;
            content: "我见青山多妩媚\A料青山见我应如是";
            font-size: clamp(5px, 8vw, 20px);
            white-space: pre-line;
            display: block;
            text-align: center;
          }
        
          .slogen {
            text-align: center;
          }
        .container {
            margin: 10px
        }
        .nav-right {
            display: none;
        }
    
        .burger {
            display: flex;
        }

        .major {
            margin:0px;
            width: 100%;
            
        }

        .home-header-flex {
            flex-direction: column !important;
            margin: 10px;
        }
    
        .home-header-flex > div {
            width: 100%;
        }
    
        .home-header-flex h2,
        .home-header-flex p {
            text-align: center;
           
        }

        .profile_wrapper {
          
            display: flex;
            flex:1;
            justify-content: center; /* 水平居中 */
          
            width:100%;
           
        }
    
        .home-header-flex img.responsive-img {
           margin: auto;
            width: 50%;
            display: block;
           
        }


        .homepage-work {
            flex-direction: column;
        }

        .news-section {
            margin: 10px;
        }

        .resume-item {
            flex-direction: column;
        }

        .item-index {
            width: auto;
            margin-bottom: 5px;
        }

        .responsive-img {
            width: 100%;
        }

        .unit-container > .major > div {
            flex-direction: column !important;
        }



        nav {
           
            gap: 10px;
        }

        .nav-left {
            margin-bottom: 10px;
        }
    }

    /* 图片自适应（确保不会溢出） */
    img {
        max-width: 100%;
        height: auto;
    }