/* =========================================================
   引入本地字体 Source Sans 3
========================================================= */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900; /* 关键：告诉浏览器这个文件支持 200到900 的任意粗细 */
    font-style: normal;
    font-display: swap;
}
/* 
颜色使用
color: #474747;即 background-color: rgba(71, 71, 71); 是页面主体文字的颜色也是标题背景条的灰色
color: #37c0fb;  原a标签颜色，
color: #004CA1; 即rgb(0, 76, 161,1); 是科大校徽颜色
#0F2B84 即color: rgb(15, 43, 132,1); 课题组logo深蓝色
color: #334155; 移动左侧折叠导航栏的文字色
background-color: #f5f7fa; 新闻和论文条目hover下的浅背景色
#eef3f7即rgba(238, 243, 247) 是Topbanner末端的颜色
其他border的颜色等效果很小不统一也没有关系

background: rgba(27, 27, 27, 0.15); 背景块的灰色

dl：Definition List
dt:Definition Term
dd:Definition Description
*/
/*################################# 重置设定 ####################################*/

	*,
	*::before,
	*::after {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	/* Box Model盒子模型(意味着元素的 width 和 height 会包括边框和内边距)*/
		box-sizing: border-box;
	}
	html{
		-webkit-text-size-adjust: 100%; /* Safari/Chrome */
		-ms-text-size-adjust: 100%;     /* IE/Edge */
		text-size-adjust: 100%;         /* 其他现代浏览器 */
		font-size: 18px;
	}


/*################################# Body标签样式 ####################################*/

	body {
		/* 使用最经典的系统级无衬线字体，无需下载，极简学术风 */
		/* 前面是您的英文字体栈，后面紧跟各平台楷体的中英文名称，最后是系统保底字体 */
    	font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, "Kaiti SC", "STKaiti", "楷体", sans-serif;
		color: #2E2D29;
		background-color: rgba(238, 243, 247);
		line-height: 1.6;
	}


	img {
		display: inline-block;
		position: relative;
		width: 100%;
		height: auto;
		border: 0;
		border-radius: 5px;
	}

	a {
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
		color: #004CA1;
		text-decoration: none;
		border-bottom: dotted 1px; /* 下划线设置为点状线 */
	}

		a:hover {
			/* 褐色 */
			color:#a32911;
			/* 天蓝色 */
			/* color: #37c0fb; */
			border-bottom-color: transparent;
		}

	.a-nodotted{
		border-bottom-color: transparent;
	}

	strong, b {
		font-weight: 600;
	}

	em, i {
		font-style: italic;
	}


	h1, h2, h3, h4, h5, h6 {
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.025em;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
			border-bottom: none; 
		}

	h2 {
		font-size: 1.75rem;
	}

	h3 {
		font-size: 1.2rem;
	}

	article {
		padding:10px 0;
		scroll-margin-top: 40px;
	}
	/* sup {
		font-size: 0.7em;
		position: relative;
		top: -0.5em;
	} */
	 sup {
		font-size: 0.7em;
		vertical-align: super;
	}
	

/*############################## Header&Nav 页面顶部 ################################*/

	#header {
		margin: 0;
		padding: 0;
	}

	#header img {
		width: 100%;
		/* max-height: 155px;  */
		object-fit: cover;
		display: block;
		border-radius: 0;
	}

/*################################ Nav 导航（顶部） ###############################*/

	#nav {
		cursor: default;
		background-color: rgba(238, 243, 247, 0.8);
		 backdrop-filter: saturate(180%) blur(20px);
		/* border-bottom: 1px solid #ddd; */
		height: 40px;
		display: flex;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		align-items: center;
		position: sticky;
		top: 0;
    	z-index: 1000;
		transition: all 0.5s ease-in-out;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
	}

	#nav ul {
		padding: 5px 0;
		height: 100%;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center; 
	}
	#nav li {
		margin-right: 5px;
		box-shadow: 0 1px 2px transparent;
		display: flex;
		align-items: center;
		height: 100%;
		justify-items: center;
	}

	#nav a {
		font-weight: 600;
		font-size: 19px;
		color:  #004CA1;
		text-decoration: none;
		border: 0;
		/* 这里的padding决定了nav的高度 */
		padding: 0 1rem;
		height: 100%;
		/* 使用flexbox让a标签内的文字垂直居中（多行文字也适用） */
		display: flex;
		align-items: center;
		transition: all 0.2s ease;
	}

	#nav li:hover a ,#nav li.current a{
		/* color: #333333; */
		color:#a32911;
	}

	#nav li.active a {
		/* color: #333333; */
		color:#a32911;
	}

	/* 给除了最后一个 li 之外的所有 li 后面加上竖杠 */
	#nav li:not(:last-child)::after{
		content: "|";                
		color: #a0aec0;               
		font-size: 15px; 
		margin: 0 5px;               
		display: inline-block;
		font-weight: 400;
	}

/*################################ subNav 子导航（底部）###############################*/

	#subnav {
		position: fixed;
		bottom: 0;
		left: 0;  
		width: 100%;
		z-index: 999;
		
		background-color: rgba(238, 243, 247, 0.5);
		backdrop-filter: saturate(180%) blur(20px);

		height:25px;
		margin: 0;
		padding: 0 30px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05); 
		display: flex;
		justify-content: center; 
		align-items: center;
	}

	#subnav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
	}

	#subnav li {
		display: flex;
		align-items: center;
	}
	#subnav a {
		color: #004CA1;
		font-weight: 600;
		font-size: 16px;
		padding: 4px 8px;
		border-radius: 4px;
		transition: all 0.2s ease;
		border-bottom: none; 
	}

	#subnav a:hover {
		color: #a32911;
		text-decoration: none;
	}

	#subnav li:not(:last-child)::after {
		content: "|";
		color: #a0aec0;
		margin: 0 10px;
		font-weight: 400;
		font-size: 13px;
	}

/*################################ Main 页面中间主题内容###############################*/

	#main{
		width: 88%;
		max-width: 1100px; 
		margin: 0 auto;
		padding: 2rem 2rem;
	}

	.ustcBlue {
		letter-spacing: -1px;
		color:rgb(0, 76, 161,1);
	}
	.title-center {
		letter-spacing: -1px;
		color:rgb(0, 76, 161,1);
		text-align: center;
		padding: 2rem 0;
	}
	.h3-title {
		margin-bottom: 5px;
		letter-spacing: -1px;
		color:rgb(0, 76, 161,1);
		text-align: left;
	}
	.h4-title {
		padding-top: 10px;
		margin-bottom: 5px;
		color: #004CA1;
	}
	/* .h4-title::before {
		content: "";
		display: inline-block;
		width: 10px;
		height: 1.6px;
		margin-right: 10px;
		vertical-align: middle;
		background-color: #004CA1;
	} */
	.tab {
		text-indent: 3rem;
	}
	.long-tab {
		text-indent: 6rem;
	}

	.separator{               
		color: #a0aec0;               
		font-size: 16px; 
		margin: 0 10px;               
		display: inline-block;
		font-weight: 400;
	}

/*################################ 首页 News 模块 (左文右图)###############################*/
	.news-container {
		display: flex;
		flex-direction: column;
	}
	.news-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20px 0;
		border-bottom: 1px solid #e0e0e0;
		gap: 30px;
	}
	.news-item:last-child { 
		border-bottom: none; 
	}
	/* .news-content { 
		flex: 1; 
	} */
	.news-date {
		font-weight: 600;
		font-size: 0.9em;
		display: block;
		margin-bottom: 8px;
	}

	.news-congrats {
		display: inline-block;
		margin-left: 15px;
		padding: 4px 8px;
		border-radius: 6px;
		font-size: 0.9em;
		font-weight: 600;
		/* color: #b85c66;
		background-color: #fff1f2;
		border: 1px solid #f3c8ce; */
		color:rgb(0, 76, 161,1);
		background-color: #eef4ff;
    	/* border: 1px solid #cce0ff; */
		vertical-align: middle;
		letter-spacing: 0.01em;
	}

	
	/* .news-title {
		font-size: 1.25em;
		font-weight: bold;
		margin: 0 0 10px 0;
		color: #222;
	} */
	/* .news-excerpt { 
		margin: 0; 
		color: #555; 
	} */
	/* .news-image {
		width: 240px;   //固定宽度和前面的flex:1;相关
		flex-shrink: 0;
	} */
	/* .news-image img {
		width: 100%;
		height: auto;
		border-radius: 4px;
		border: 1px solid #eee;
	} */
/*################################Research页的research###############################*/
	.research-container {
		display: flex;
		flex-direction: column;
	}
	.research-item {
		padding: 10px 0;
		border-bottom: 1px solid #e0e0e0;
		gap: 30px;
	}
	.research-title{
		padding: 15px 0;
	}
	.research-item:last-child { 
		border-bottom: none; 
	}

/*################################People页卡片###############################*/
	
	.member-card {
		display: flex;
		gap: 20px;
		margin-bottom: 20px;
	}

	.pi-card {
		align-items: flex-start;
	}

	.member-grid {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
	}

	.one-four {
		width: calc((100% - 45px) / 4);
	}

	.photo-box {
		width: 173px;
		height: 216px;
		overflow: hidden;
		border-radius: 5px;
		background: #f3f5f8;
		line-height: 0;
	}

	.photo-box img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}

	.right-content {
		flex: 1;
		padding-top: 5px;
		line-height: 1.8;
	}

	.right-content p {
		margin: 0 0 5px;
	}

	#postdoc,#phd, #master, #undergraduate {
		scroll-margin-top: 40px;
	}

/*################################Outputs页的publication###############################*/

	.publication{
		list-style: none;
	}
	.publication li{
		padding: 10px 0;
		border-bottom: 1px solid #e0e0e0;
		gap: 30px;
	}
	.doi-link {
		color: #37c0fb;
		text-decoration: none;
	}
	#journal,#chinese,#book,#report{
		scroll-margin-top: 40px;
	}
/*################################  颜色  ###############################*/

	.ustcBlue-boldword {
		color:rgb(0, 76, 161,1);
		font-weight:600;
	}
	.ustcBlue-borderline {
		border-bottom: 2px solid rgb(0, 76, 161,1);
    	padding-bottom: 1px;               
	}

	.blockquote {
		border-left: solid 0.5em #e0e0e0;
		font-style: italic;
		padding: 1em 0 1em 2em;
	}
	/*行背景和行下划线效果 */
	.underline-firstline{
		margin-bottom: 0px;
		border-bottom: 2px solid #909090; 
	}
	
	.underline-gray{
		margin-bottom: 15px;
		border-bottom: 2px solid #909090; 
		padding-bottom: 5px;
	}
	/* .left-border {
		color: #004CA1;
		font-size: 1.2rem;
		padding-left: 10px;
		border-left: 2px solid #004CA1; 
		line-height: 1;
	} */
	/* .underline-ustcBlue{
		color: rgb(0, 76, 161,1);
		margin-top: 10px;
		margin-bottom: 15px;
		padding-bottom: 5px;
		border-bottom: 2px solid rgb(0, 76, 161,1); 
	} */
	/* .aboveline-ustcBlue{
		line-height: 1.4rem;
		color: rgb(0, 76, 161,1);
		margin-top: 20px;
		margin-bottom: 10px;
		border-top: 2px solid rgb(0, 76, 161,1); 
	}  */

	.bg-line {
		color: white;
		line-height: 1.4;
		z-index: 1;
		padding-left: 0.5em;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);	
		background-color: rgb(0, 76, 161,0.6);
		/* rgba(71, 71, 71, 0.8); */
		border-radius: 3px;
	}

	/* 灰色背景块效果 */
	#contentwithbg {
		/* margin-top: 5em; */
		background: rgba(27, 27, 27, 0.15);
		color: #fff;
		border-radius: 4px;
		overflow: hidden;
	}
		#contentwithbg h3{
		margin-top: 1em;
		margin-left: 1em;
		color: black;
	}
		#contentwithbg p{
		margin-top: 1em;
		margin-left: 1em;
		margin-right: 1em;
		margin-bottom: 3em;
		color: black;
	}


/*################################ Image 图片 ###################################*/

		

	
/*################################# List 和 Table ################################*/

/* Lists */

/* 用于论文和新闻的区块卡片 */
	ul.items {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	ul.items li {
		margin-left: 0;
		padding: 16px 12px; /* 增加内边距，提升内容呼吸感 */
		margin-bottom: 8px; /* 增加项之间的间距 */
		border-bottom: 1px solid #e0e0e0; /* 更浅的分隔线，柔和区分 */
		background-color: #fff; /* 明确背景色，增强对比 */
		border-radius: 6px; /* 略微加大圆角 */
		transition: all 0.3s ease; /* 过渡所有可动画属性 */
		box-shadow: 0 1px 2px rgba(0,0,0,0.02); /*  subtle阴影增加层次感 */
	}

	/* 最后一项移除下边框，避免多余线条 */
	ul.items li:last-child {
		border-bottom: none;
	}
	ul.items li:hover {
		background-color: #f5f7fa; /* 更舒适的hover背景色 */
		transform: translateY(-2px); /* 轻微上浮效果 */
		box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* 增强阴影 */
		border-radius: 6px;
	}
	 ul.items li h3{
	 		font-size: 1.3em;
	 		padding-bottom: 0em;
	 		margin-bottom:0.5em;
	 }
	 ul.items li p {
	 	margin-top: -0.5em;
	 	/*border-left: solid 1px #e0e0e0;*/
	 	margin-left: 2em;
	 	/*padding-left: 0.5em;*/
	 }

	.news-list li{
		list-style: none;
		padding: 0;
		/* font-size: 20px; */
		margin: 10px 0;
	}

	/* 有序列表 */
	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol.default li {
			padding-left: 0.25em;
		}

	/* 无序列表 */
	ul.default {
		list-style: disc;
		padding-left: 1em;
	}
		ul.default li {
			padding-left: 0.5em;
		}


/* Tables表格 */
	table {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
	}

	table.default {
		width: 100%;
	}
		table.default th{
			text-align: left;
			/* font-weight: 500; */
			/* border:1px solid gray; */
		}


/* =========================================================
   4. Alumni 文字排版 (按行显示，极简)
========================================================= */
	.alumni-list {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.alumni-list li {
		padding: 12px 0;
		border-bottom: 1px dashed #ddd;
		line-height: 1.5;
	}
	.alumni-list li:last-child { border-bottom: none; }
	.alumni-name {
		font-weight: bold;
		color: #004CA1;
		font-size: 1.1em;
		margin-right: 10px;
	}

/* =========================================================
   5. 移动端自适应 (Mobile Responsiveness)
========================================================= */
@media screen and (max-width: 840px) {
    /* .header-top { height: auto; flex-direction: column; padding: 20px 10px; text-align: center; }
    .first-line { font-size: 22px; line-height: 1.4; }
    .second-line { font-size: 16px; text-align: center; margin-top: 10px; }
    #nav > ul { flex-wrap: wrap; }
    #nav > ul > li a { font-size: 16px; padding: 0 10px; }
    
    .news-item { flex-direction: column-reverse; gap: 15px; }
    .news-image { width: 100%; }
    
    .member-card { flex-direction: column; gap: 20px; }
    .one-four, .left-img, .right-content { width: 100%; }
    
    .page-subnav { display: flex; flex-direction: column; gap: 10px; }
    .page-subnav a { margin: 0; } */
}

 /* This website was designed, implemented, and deployed by Jinchuan Liu（刘锦川）.  */