/* 布局样式 */
        body {
          font-family: /* "华文行楷", */Arial, sans-serif;
          margin: 0;
          padding: 0;
          user-select: none;
          /*font-size: 20px;*/
        }
        
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
        }
        
        /* 选项卡样式 */
        .tabs {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
        }
        
        .tab {
          flex: 1;
          padding: 10px 20px;
          background-color: #333;
          color: #fff;
          cursor: pointer;
        }
        
        .tab:hover {
          background-color: #555;
        }
        
        .tab.active {
          background-color: #222;
          border-bottom: 2px solid #fff;
        }
        
        .content {
          display: none;
          padding: 20px;
          background-color: #444;
        }
        
        .content.active {
          display: block;
        }

        /*轮播图*/
        .carousel {
          position: relative;
          width: 80%;
          margin: 0 auto;
          height: 20vh;
          overflow: hidden;
        }
        
        /* 图片列表样式 */
        .carousel ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          display: flex;
          transition: transform 0.5s ease-in-out;
        }
        
        .carousel li {
          width: 100%;
          height: 100%;
          flex-shrink: 0;
          display: none;
          text-align: center;
        }
        
        .carousel li img {
          max-width: 100%;
          max-height: 100%;
        }
        
        /* 箭头样式 */
        .carousel .arrow {
          position: absolute;
          border-radius: 15px;
          top: 50%;
          transform: translateY(-50%);
          width: 30px;
          height: 30px;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
          font-size: 20px;
        }
        
        .carousel .arrow.left {
          left: 10px;
        }
        
        .carousel .arrow.right {
          right: 10px;
        }

        .recommendation-container {
          display: flex;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0px 4px 6px #000;
          transition: transform 0.3s;
          max-width: 400px;
          margin: 20px;
        }
        
        .recommendation-container:hover {
          transform: translateY(-5px);
          box-shadow: 0px 4px 6px #666;
        }
        
        .recommendation-image img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
        
        .recommendation-info {
          padding: 20px;
          background-color: #000;
          flex-grow: 1;
        }
        
        .recommendation-info h3 {
          margin-top: 0;
          font-size: 1.5em;
          color: #666;
        }
		
		.recommendation-info:hover h3 {
          margin-top: 0;
          font-size: 1.5em;
          color: #777;
        }
		
		.nbddx {
			position: flex;
			padding: 20px;
			color: #fff;
			width: 200px;
			height: 40px;
			background-color: #000;
			left: 20px;
			bottom: 120px;
			border-bottom: none;
			transition: all .3s;
		}
		.nbddx:hover {
			position: flex;
			padding: 20px;
			color: #fff;
			width: 100%;
			height: 400px;
			background-color: #555;
			left: 20px;
			bottom: 120px;
			border-bottom: none;
			transition: all .3s;
		}
        
        .recommendation-info p {
          color: #999;
          font-size: 1em;
          line-height: 1.4;
        }
		
		.recommendation-info p {
          color: #bbb;
          font-size: 1em;
          line-height: 1.4;
        }

        .recommendation-container2 {
          display: flex;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0px 4px 6px #000;
          transition: transform 0.3s;
          max-width: 450px;
          max-height: 400px;
          margin: 20px;
          width: 500px;
          height: 300px;
        }
        
        .recommendation-container2:hover {
          transform: translateY(-5px);
          box-shadow: 0px 4px 6px #666;
        }
        
        .recommendation-image2 img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
        
        .recommendation-info2 {
          padding: 20px;
          background-color: #f9f9f9;
          flex-grow: 1;
        }
        
        .recommendation-info2 h3 {
          margin-top: 0;
          font-size: 1.5em;
          color: #333;
        }
        
        .recommendation-info2 p {
          color: #666;
          font-size: 1em;
          line-height: 1.4;
        }
        
        .more-info2 {
          display: inline-block;
          background-color: #007bff;
          color: white;
          padding: 10px 20px;
          text-decoration: none;
          border-radius: 5px;
          margin-top: 15px;
        }
        
        .more-info2:hover {
          background-color: #0056b3;
        }
        footer {
          background-color: #333;
          color: #fff;
          padding: 20px;
          text-align: center;
        }
        
        footer a {
          position: relative;
          color: #fff;
          font-weight: bold;
          display: inline-block;
          text-decoration: none;
        }
        
        .horizontal-scroll-container {
          display: flex;
          overflow-x: auto; /* 水平方向上的内容如果超出了容器，显示滚动条 */
          white-space: nowrap; /* 防止内部元素换行 */
          padding: 20px; 
        }
        
        .item{
          flex: 0 0 auto; /* 防止项目缩放，保持原始大小 */
          margin-right: 20px; /* 展示框之间的间距，最后一个项目可以不需要 */
        }
        
        /* 最后一个展示框的右边距取消，使布局更加紧凑 */
        .horizontal-scroll-container .item:last-child {
          margin-right: 0;
        }
        /*.inline-container {*/
        /*  display: flex;*/
        /*}*/
        .member-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px;
          margin: 20px;
          background-color: #000;
          border-radius: 10px;
          box-shadow: 0px 4px 6px #000;
          transition: all 0.3s;
        }
        
        .member-info {
          flex: 1;
        }
        
        .member-box .h2 {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #555;
        }
        
        .member-box .p {
          font-size: 16px;
          margin-bottom: 10px;
          color: #999;
        }
        
        .member-photo {
          width: 150px;
          height: 150px;
          background-color: #000;
          background-size: cover;
          background-position: center;
          border-radius: 50%;
          box-shadow: 0px 4px 6px #3a3a3a;
          transition: all 0.3s;
        }
        
        .member-box:hover {
          transform: translateY(-5px);
          box-shadow: 0px 4px 6px #999;
        }
		
		.member-box:hover .p{
		  font-size: 16px;
          margin-bottom: 10px;
          color: #bbb;
        }
		
		.member-box:hover .h2{
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 10px;
          color: #7b7b7b;
        }
        
        .member-box:hover .member-photo {
          transform: scale(1.1);
        }
        .project-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30px;
          margin: 20px;
          background-color: #000;
          border-radius: 10px;
          box-shadow: 0px 4px 6px #000;
          overflow: hidden;
          transition: all 0.3s;
        }
        
        .project-info {
          flex: 1;
        }
        
        .hh2 {
          font-size: 36px;
          font-weight: bold;
          margin-bottom: 20px;
          color: #555;
        }
        
        .pp {
          font-size: 18px;
          margin-bottom: 20px;
          color: #999;
        }
        
        .btn {
          display: inline-block;
          padding: 10px 20px;
          border-radius: 5px;
          background-color: #333;
          color: #fff;
          text-decoration: none;
          transition: all 0.3s;
        }

        .btn:hover {
          background-color: #007bff;
        }
        
        .project-image {
          width: 300px;
          height: 300px;
          background-image: url('project-image.png');
          background-size: cover;
          background-position: center;
          transition: transform 0.3s;
        }
        
        .project-container:hover {
          transform: translateY(-5px);
          box-shadow: 0px 4px 6px #999;
        }
        
        .project-container:hover .project-image {
          transform: scale(1.1);
        }
        
        /* 整个滚动条的样式 */
        ::-webkit-scrollbar {
          width: 12px; /* 控制滚动条的宽度 */
        }
        
        /* 滚动条轨道的样式 */
        ::-webkit-scrollbar-track {
          background: #f1f1f1; /* 轨道的背景颜色 */
          border-radius: 10px; /* 轨道的圆角 */
        }
        
        /* 滚动条滑块的样式 */
        ::-webkit-scrollbar-thumb {
          background: #888; /* 滑块的背景颜色 */
          border-radius: 10px; /* 滑块的圆角 */
        }
        
        /* 当鼠标悬停在滚动条滑块上时的样式 */
        ::-webkit-scrollbar-thumb:hover {
          background: #666; /* 滑块的背景颜色（鼠标悬停时） */
        }

        /*背景颜色*/
        .bgc{
          background-color:#000
        }

        /*鸣谢名单*/
        .thk {
           display: inline-block;
           transition: transform 0.3s;
           border-radius:10px;
           width: 200px;
           height: 240px;
           background-color:#222;
           margin-right: 20px;
           margin-bottom: 20px;
           box-shadow: 0px 4px 6px #000;
        }
        .thk:hover {
           transform: translateY(-10px);
           box-shadow: 0px 4px 6px #999;
        }
		.thk p {
           color: #666;
		   font-size: 18px;
		   padding-top: 165px;
		   padding-left: 15px;
		   padding-right: 15px;
        }
		.thk:hover p {
           color: #bbb;
		   font-size: 18px;
		   padding-top: 165px;
		   padding-left: 15px;
		   padding-right: 15px;
        }
        .thanks-block {
			text-align:center;
			display: block;
			padding: 40px;
			background-color: #444;
        }
        .thanks-box{
           display: inline-flex;
           border-radius: 0px 0px 10px 10px;
           width: 200px;
           height: 100px;
           background-color:#222
           top: -140px;
        }
        .thanks-img{
           width: 200px;
           height: 140px;
           border-radius: 10px 10px 0px 0px;
           position: absolute;
        }
        .thanks-img2{
           border-radius: 100%;
           position: absolute;
           top: 128px;
           left: 35px;
        }
        .thanks:before{
           position: absolute;
           top: 123px;
           left: 10px;
           content: "";
           display: flex;
           width: 76px;
           height: 26px;
           background-position: 100% 0;
           background-repeat: no-repeat;
           background-size: 76px auto;
           background-image: url(thanks-pb.svg);
           z-index: 0;
        }
        .thanks{
           display: flex;
           position: relative;
           text-align: left;
       }