@charset "UTF-8";


/* 文字字体，字号，颜色 */
/* 背景色，长宽，其他 */

.people-column{
    text-align: left;
    padding: 1em calc(50% - 520px);
    color: rgb(146, 157, 192);
    background-color: #fff;
}

.people-column h1{
    text-align: center;
    font-weight: 400;
    font-size: x-large;
}

.people-group{
    display: flex;
}

.person{
    position: relative; /* 设置相对定位，用于绝对定位子元素 */
    width: 16%;
    margin: 20px;
    text-align: center;
}

.person div {
    position: relative; /* 设置相对定位，用于绝对定位子元素 */
    text-align: center;
    margin: 5px;
}

.person .square-container-list {
    margin: 0 auto;
}

.square-container {
    width: 100%; /* 设置宽度等于父元素的宽度 */
    padding-top: 100%; /* 设置 padding-top 百分比，使高度等于宽度 */
    position: absolute; /* 设置绝对定位，使子元素脱离文档流 */
}

.square-container-list {
    width: 130px; /* 设置宽度等于父元素的宽度 */
    padding-top: 130px; /* 设置 padding-top 百分比，使高度等于宽度 */
    position: absolute; /* 设置绝对定位，使子元素脱离文档流 */
}

.person-img-container{
    position: absolute; /* 设置绝对定位，使内容脱离文档流 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* height: 150px; 设置容器的高度 */
    overflow: hidden; /* 隐藏溢出的部分 */
    display: inline-block; /* 或者使用 display: block; */
    margin: 0 auto; /* 使用 auto 将 .img-container 在水平方向上居中 */
}

.person-img-container-adjust{
    height: 130px;
}

.person-img-container img {
    width: 97%; /* 图片宽度占满容器 */
    height: 97%; /* 图片高度占满容器 */
    object-fit: cover;
    object-position: top; /* 设置裁剪时图片在容器中的位置为靠上 */
    border-radius: 50%; /* 将图片的边角设置为50%，使其呈圆形 */
    transition: border-radius 0.5s; /* 添加边角变化的过渡效果，时长为0.5秒 */
    background-color: rgb(218, 235, 243);
    border: 1px solid rgb(218, 235, 243);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 添加灰色内阴影，颜色可根据需要调整 */
}

img:hover {
    border-radius: 0; /* 在悬浮状态下将边角设置为0，使其呈方形 */
}

.person-name{
    text-decoration: none;
    color: rgb(23, 113, 192);
    font-size: 1rem;
    font-weight: 600;
}

.person-title{
    font-size: 0.8em;
}

    /* body {
        min-width: 500px; 
    } */

 /* person detail page */

 .stick-motto-column .person .person-name{
    text-align: left;
    font-size: 2.2em;
    font-weight: 700;
    color: #000;
 }

 .stick-motto-column .person .person-title{
    font-size: 1.1em;
    color: rgb(153, 153, 153);
 }


.stick-motto-bar{
    position: relative;
    /* top:40px; */
    /* height: 100vh; */
    background-color: rgb(247, 247, 247);
    /* display: flex; */
}

.stick-motto-column{
    padding: 1em calc(50% - 720px);
    position: sticky;
    top: 80px;
    /* border: 2px solid rgb(244, 54, 54); */
    background-color: rgb(236, 141, 141,0);
    /* display: flex; */
    z-index: 2;
    pointer-events: none; /* 使上面的图层透明的部分能够被下面的图层透过 */
}

.stick-motto-column .person{
    padding: 5px 10px 5px 5px;
    background-color: #fff;
    /* border: 2px solid #000; */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1);
    pointer-events: auto; /* 使上面的图层部分保留点击功能 */
}

.stick-motto-column .person .square-container .person-img-container img{
    border-radius: 0%; /* 将图片的边角设置为50%，使其呈圆形 */
}

.motto{
    background-color: rgb(122, 19, 19);
    color: aliceblue;
    text-align: right;
    font-size: 4em;
    /* border: 2px solid rgb(0, 60, 255); */
    height: 100px;
    /* width: 100vh; */
}

.column{
    padding: 1em calc(50% - 720px);

}
.detail-info{
    position: relative;
    top: -400px;
    margin-bottom: -400px;
    padding-left: calc(16% + 120px);

    /* border: 2px solid #000; */
    background-color: rgb(236, 141, 141,0);
    /* height: 100px; */
    /* width: 60%; */
}

.detail-info .paper-card{
    margin: 1em;
    color: rgb(146, 157, 192);
}

.stick-motto-column .person div{
    text-align: left;
}

.stick-motto-column .person .icons-container{
    position: relative;
    left: -3%;
    margin-top: 10px;
    /* text-align: left; */
    color: #000;
}

.icons-container a{
    margin-top: 0px;
}
.icons{
    text-decoration: none;
    text-align: left;
    color: #000;
}

.feather-text{
    position: relative;
    top:-5px;
}