@charset "utf-8";
/* CSS Document */

/* 主容器 */
        .team-container {
            display: flex;
            gap: 1.25rem; /* 左右两列之间的间距 */
            width: 100%;
            /* 关键：设定整个容器的高度。
               原图比例约为 宽:高 = 1.6 : 1，可根据实际图片比例微调此值 */
            aspect-ratio: 1.6 / 1;
			margin-top:3.125vw;
			float:left;
        }

        /* 左侧列 (大图) */
        .left-col {
            /* 设置宽度比例，约占总宽的 42% */
            flex: 0 0 42%;
            display: flex;
            flex-direction: column;
        }

        /* 右侧列 (包含四张小图) */
        .right-col {
            /* 占据剩余宽度 */
            flex: 1; 
            display: flex;
            flex-direction: column;
            gap: 1.25rem; /* 上下两排小图之间的间距 */
        }

        /* 右侧的上排和下排 */
        .right-row {
            /* 关键计算：总高度减去中间的间距，再平分给两行 */
            flex: 1;
            height: calc(50% - 0.6125rem); 
            display: flex;
            gap: 1.25rem; /* 左右两张小图之间的间距 */
        }

        /* 卡片通用样式 */
        .member-card {
            position: relative; 
            overflow: hidden;
            background-color: #e0e0e0; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            cursor: pointer;
        }

        /* 大图卡片撑满左侧列 */
        .member-card.large {
            width: 100%;
            height: 100%;
        }

        /* 小图卡片撑满各自的容器 */
        .member-card.small {
            flex: 1;
            width: calc(50% - 0.6125rem); /* 配合 flex:1 确保宽度均分 */
            height: 100%;
        }

        /* 图片样式 */
        .member-card img {
            width: 100%;
            height: 100%;
            object-fit: cover; 
            object-position: top center; 
            display: block;
            transition: transform 0.3s ease;
        }

        /* 鼠标悬停时的缩放效果 */
        .member-card:hover img {
            transform: scale(1.06);
        }

        /* 底部文字信息栏 */
        .info-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            /* 深红色背景 */
            background-color: rgba(125, 24, 29, 0.90); 
            color: white;
            /* 关键：统一并固定文字栏高度，这是上下对齐的视觉关键 */
            padding: 1.0rem;
            display: flex;
            align-items: center; /* 垂直居中对齐 */
            gap: 0.625rem;
        }
		.left-col .info-bar{
			padding:1.5rem 1.0rem;
		}

        /* 文字样式 */
        .name {
            font-size: 1.2rem;
			font-family:zt4;
            letter-spacing: 1px;
            white-space: nowrap; /* 防止名字换行 */
        }

        .title {
            font-size: 0.85rem;
			font-family:zt3;
            opacity: 0.9;
            white-space: nowrap; /* 防止职位换行 */
        }
        
        /* 大图文字稍微大一点 */
        .member-card.large .name {
            font-size: 1.5rem;
        }

        /* --- 响应式设计 (手机端适配) --- */
        @media (max-width: 768px) {
         .team-container{
			 gap:0.625rem;
		}
		.right-col{
			 gap:0.625rem;
		}
		.member-card.small{
			width:calc(50% - 0.3125rem);
		}
		.right-row{
			 gap:0.625rem;
		}
		.member-card.large .name{
			font-size:1.0rem;
		}
		.title{
			font-size:0.65rem;
		}
		.info-bar {
            padding:0.5rem;
			gap:0.3125rem;
        }
		.left-col .info-bar{
			padding:1.0rem;
		}
		.name{
			font-size:0.875rem;
		}
		
        }