/* styles.css */
html,
body {
    height: 100%;
    /* 确保body占满整个视口的高度 */
    margin: 0;
    /* 重置任何默认的边距 */
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    /* White background */
}

header {
    background-color: #fff;
    /* Dark header for contrast */
    color: black;
    padding: 0;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(156, 19, 0);
    /* 已有的导航栏背景颜色 */
    color: white;
    /* 设定导航栏内文字默认颜色为白色 */
    display: flex;
    /* 使用flex布局 */
    align-items: center;
    /* 垂直居中对齐 */
    padding: 0 20px;
    /* 根据实际情况调整，为导航栏添加左右填充 */
}

#lab-name {
    margin-left: 80px;
    /* Adjust the pixel value to desired distance from the left */
    float: left;
    /* Aligns the element to the left */
    font-weight: bold;
    /* 加粗字体 */
    font-size: 30px;
    /* 设置字体大小*/
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    margin-left: auto;
    /* Aligns the ul to the right */
    margin-right: 20px;
    /* Adjust this value to set the distance from the right */
}

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

nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 20px 16px;
    display: inline-block;
    font-weight: bold;
    /* 加粗字体 */
    font-size: 20px;
    /* 设置字体大小 */
}

main {
    margin-top: 62px;
    text-align: center;
    /* Center align main content */
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    /* changed from absolute to relative */
    bottom: 0;
    width: 100%;
}

main img {
    display: block;
    /* Makes the image a block-level element */
    width: 100%;
    /* Sets the image width to 100% of its parent */
    height: auto;
    /* Keeps the image's aspect ratio intact */
}

main {
    text-align: center;
    /* Center align main content */
    display: flex;
    /* 使用flex布局 */
    flex-direction: column;
    /* 以列的方式排列子元素 */
    align-items: center;
    /* 子元素居中对齐 */
    justify-content: center;
    /* 子元素在主轴方向上居中 */
}

.part-wrapper {
    width: 1180px;
    /* margin-top: 60px; */
    min-height: 650px;
    padding: 0 32px;
}

.logo-with-text {
    display: flex;
    /* 开启flex布局 */
    align-items: center;
    /* 垂直居中对齐元素 */
    justify-content: center;
    /* 水平居中对齐元素 */
    flex-wrap: wrap;
    /* 允许项目换行 */
    gap: 20px;
    /* 在项目之间设置间隔 */

}

.logo {
    /* 调整logo的样式 */
    height: auto;
    /* 保持原有比例 */
    width: 320px;
    /* 可以根据实际需要调整 */
}

.text-content {
    text-align: left;
    /* 文字对齐方式 */
    max-width: 800px;
    /* 根据需要调整文本内容的宽度 */
    margin-left: 64px;
}

.text-content-title {
    font-size: 40px;
    color: rgb(17, 38, 68);
    margin-bottom: 32px;
    text-align: left;
}

.text-content h2,
.text-content ul {
    margin: 0;
    /* 去除默认的外边距 */
    padding: 0;
    /* 去除默认的内边距 */
}


.text-content li {
    /* 列表项样式 */
    text-align: left;
    /* 对齐到左边 */
    margin-bottom: 32px;
    /* 列表项之间的距离 */
    font-size: 28px;
    font-style: italic;
}

.text-content ul li::marker {
    color: rgb(255, 0, 0);
}

.professor {
    width: 100%;
    display: flex;
    background-color: rgb(196, 163, 120);
    justify-content: center;
}

.professor-img {
    width: auto;
    height: 650px;
}

.professor-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.professor-text {
    text-align: left;
}

.professor-text-desc {
    line-height: 32px;
    height: 32px;
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 8px;
}

.professor-text-detail {
    margin-top: 16px;
    font-size: 18px;
    font-style: italic;
}

.professor-text-contact-wrapper {
    margin-top: 16px;
}

.professor-text-contact {
    font-size: 18px;
    margin-bottom: 8px;
    color: rgb(130, 102, 98);
    font-weight: 700;
}
.professor-text-contact-link a {
    font-size: 16px;
    margin-top: 16px;
    color: rgb(27, 143, 201);
    font-weight: 700;
}

.research {
    display: flex;
    width: 100%;
    background-color: #fff;
    justify-content: center;
}
.research-content-wrapper {
    display: flex;
    justify-content: space-between;
    padding-top: 32px;
}
.research-list-wrapper {
    margin-top: 32px;
    margin-left: 64px;
    padding-left: 64px;
    border-left: 1px black solid;
    border-radius: 1px;
}
.research-list-item {
    margin-top: -8px;
    margin-bottom: 44px;
    min-height: 450px;
}
.research-list-tille {
    position: relative;
    /* margin-top: -12px; */
    font-size: 32px;
    font-weight: 500;
    text-align: left;
    font-style: italic;
}
.research-list-tille::before {
    position: absolute;
    top: 8px;
    left: -76px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgb(145, 22, 22);
    content: ' ';
}
.circle-one::before {
    background-color: #b71c1c; /* 红色 */
}

.circle-two::before {
    background-color: #1b941c; /* 绿色 */
}

.circle-three::before {
    background-color: #ea731c; /* 蓝色 */
}

.research-list-photo {
    /* width: 800px; */
    margin-top: 32px;
    margin-left: -32px;
}
.publications-list {
    text-align: left;
    margin-top: 64px;
    margin-left: 64px;
}
.publications-item {
    /* width: 700px; */
    padding: 32px;
    background-color: rgb(250, 250, 250);
    border-radius: 18px;
    margin-bottom: 32PX;
    
}
.publications-item-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}
.publications-item-title a {
    color: black;
    text-decoration: none;
}
.publications-item-title a:hover {
    color: black;
    text-decoration: none;
    color: rgb(19, 96, 172);
}
.publications-item-meeting {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: rgb(75, 75, 75);
}
.publications-item-name {
    font-size: 12px;
    font-weight: 500;
}

.text-content-a {
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    color: rgb(19, 96, 172);
}
.people-img-wrapper {
    margin-top: 32px;
    margin-left: 64px;
}
.people-img {
    width: 100%;
    height: auto;
}
.professor-text {
    width: 100%;
    margin-left: 64px;
    margin-top: 24px;
}
.professor-text-tittle {
    font-size: 24px;
    color: rgb(21, 48, 87);
    margin-bottom: 32px;
}
.professor-text-detail {
    margin-bottom: 32px;
}
footer {
    background-color: #eee;
    color: black;
    text-align: center;
    padding: 10px;
    width: 100%;
}

footer a {
    color: black;
    text-decoration: none;
    text-align: center;
}

footer a::after {
    content: '|';
    margin-left: 5px;
    color: gray;
}