/*网页最顶上渐变框代码*/
body, html {  
    margin: 0;  
    padding: 0;  
    font-family: Arial, sans-serif;  
}  
  
.top-nav-bar {  
    position: relative;  
    width: 100%;  
    height: 100px; /* 或您希望的高度 */  
}  
  
.gradient-background {  
    width: 100%;  
    height: 100%;  
    background: linear-gradient(to right, #007bff, #28a745); /* 蓝色到绿色的渐变 */  
    display: flex;  
    align-items: center; /* 垂直居中 */  
    padding-left: 20px; /* 留出空间给图片 */  
}  
  
.top-nav-image {  
    width: 150px; /* 根据实际图片调整大小 */  
    height: auto;  
    margin-right: 20px; /* 与导航链接保持一定距离 */  
}  
  
nav ul {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
    display: flex;  
}  
  
nav ul li {  
    margin-right: 20px;  
}  
  
nav ul li a {  
    text-decoration: none;  
    color: white;  
    font-weight: bold;  
}  
.container {  
    display: flex;  
    align-items: center; /* 垂直居中 */  
    height: 100px; 
}  
.right-center-image {  
    margin-left: auto; 
}
/*网页最顶上渐变框代码*/
/* 导航栏样式 */
  .nav-bar {  
    /* 这里添加CSS来控制导航栏的样式和位置 */  
    float: right; /* 让导航栏浮动到右边 */  
    margin-top: 20px; /* 根据需要调整上边距 */  
    list-style-type: none; /* 移除列表项前面的标记 */  
    padding: 0; /* 移除默认的内边距 */  
  }  
  .nav-bar li {  
    display: inline; /* 让列表项水平排列 */  
    margin-left: 100px; /* 在列表项之间添加一些间隔 */  
    
  }  
  .nav-bar li a {  
    text-decoration: none; /* 移除链接的下划线 */  
    color: black; /* 设置链接的颜色 */  
  }  
  .nav-bar li a:hover {  
    text-decoration: underline; /* 鼠标悬停时添加下划线 */  
  }
/* 导航栏样式 */
/* 展会资讯内容样式 */

.merged-zixun-box {  
  display: flex; /* 假设您想让.merged-zixun-box也作为一个flex容器 */  
  flex-direction: row; /* 如果您确实想要列布局，但这里可能是不必要的，取决于上下文 */  
  /* 如果.merged-zixun-box不是flex容器，则移除上述两行 */  
  padding: 20px;  
  border-radius: 8px;  
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ /* 取消注释以添加阴影 */  
  margin: 10px;  
}  
  
.zixun-container {  
  display: flex;  
  flex-direction: column; /* 确保子元素横向排列 */  
  flex-wrap: wrap; /* 如果需要换行显示 */  
  padding: 10px;  
  border-radius: 8px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
  margin: 10px;  
  overflow: hidden; /* 只在必要时使用，以防内容溢出 */  
  box-sizing: border-box;  
  align-items: center;
  flex:1;
}

.zixun-content:last-child {  
  margin-bottom: 0; /* 移除最后一个内容块的下边距 */  
}

.zixun-item {  
  flex: 1 1 auto; /* 允许标题根据剩余空间调整大小 */  
  min-width: 0; /* 允许标题缩小到很小 */  
  white-space: nowrap; /* 保持标题在一行内 */  
  overflow: hidden; /* 隐藏溢出的文本 */  
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */  
  padding: 5px;  
  margin-right: 10px; /* 标题之间的间隔 */  
  text-decoration: none; /* 去除下划线 */  
  color: black; /* 文本颜色 */  
}
 

.container {  
  display: flex; 
  justify-content: space-between; /* 盒子之间的间隔平均分布 */  
  flex-direction: column;
  text-decoration: none;
}  
.container {  
  display: flex;  
  flex-direction: column; /* 或者 row 根据需要 */  
  gap: 20px; /* 区块之间的间距 */  
}  

.block {  
  /* border: 1px solid #ccc;   */
  padding: 10px;  
  margin-bottom: 10px; /* 如果是横向排列，则可能需要去除或调整 */  
}  


.title-link {  
  color: black;  
  text-decoration: none; /* 移除链接的下划线 */ 
}  

.title-link:hover {  
  text-decoration: underline;  
}  

.content {  
  display: none; /* 默认不显示内容，通过JS控制显示 */  
}  

.time {  
  color: gray;  
}  

.icon-link img {  
  width: 30px; /* 图标大小根据需要调整 */  
  height: auto;  
}
.b-img {
  /* display: flex;   */
  align-items: center; /* 垂直居中 */  
  justify-content: center; /* 水平居中，如果需要的话 */  
  height: 50px; /* 父容器的高度 */  
  width: 80px;
}
.zh-box {
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中子元素（如果需要的话） */
    gap: 20px; /* 子元素之间的间隙 */
    padding: 10px;

}

.zh-box-image {
    /* 根据需要设置图片的宽度，或者保持默认（自动调整大小） */
    width: 100px; /* 示例宽度 */
    height: auto; /* 保持图片的宽高比 */
}

.zh-box-content {
    /* 这里可以添加一些样式来美化文本内容，比如字体、颜色、边距等 */
    font-size: 16px;
    line-height: 1.5;
}
.zh-box-link {
    /* 这里可以添加一些样式来美化链接，但在这个例子中我们保持简单 */
    text-decoration: none; /* 移除文本下划线（如果适用） */
    color: inherit; /* 继承父元素的文本颜色 */
}
/* 走马灯 */
/* *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container2{
  width: 500px;
  height: 300px;
  margin: 10px auto;

}
.container2 .carousel img {
  width: 500px;
  height: 300px;

} */
h1{
    display: flex;
    left: 20%;

}

/* 展会资讯内容样式 */


/*展会排期内容*/

.banner {
	background-color: #007BFF;  
	color: white;  
	padding: 10px;  
	text-align: center; 
  
}
.event-box {
	margin-top: 20px;  
	display: flex;  
	justify-content: space-around;  
  float: left;
  
}
.event-item {                  /* border为盒子边框 */  
	/* border: 1px solid #ccc; */ 
	padding: 10px;  
	width: 28%;  
	text-align: center;  
	cursor: pointer;  
}  
.event-item img {
	width: 100%;  
	height: auto;  
	margin-bottom: 10px;  
} 
/*展会排期内容*/

/*弹窗*/
.tctp {  
    position: fixed; /* 固定位置 */  
    bottom: 120px; /* 距离页面底部20px */  
    right: 20px; /* 距离页面右边20px */  
    z-index: 1000; /* 确保图片在其他内容之上 */  
    transition: transform 0.3s ease; /* 平滑变换效果 */  
}  
  
.tctp img {  
    width: 200px; /* 设定图片宽度 */  
    height: auto; /* 高度自适应 */  
    border-radius: 15%; /* 可选：将图片变为圆形 */  
}  
  
.tctp:hover img {  
    transform: scale(1.1); /* 鼠标悬停时放大图片 */  
    /* 你可以添加更多效果，比如改变透明度等 */  
}
/*弹窗一*/
.tctp1 {  
    position: fixed; /* 固定位置 */  
    bottom: 520px; /* 距离页面底部20px */  
    left:  20px; /* 距离页面右边20px */  
    z-index: 1000; /* 确保图片在其他内容之上 */  
    transition: transform 0.3s ease; /* 平滑变换效果 */  
}  
  
.tctp1 img {  
    width: 200px; /* 设定图片宽度 */  
    height: auto; /* 高度自适应 */  
    border-radius: 25%; /* 可选：将图片变为圆形 */  
}  
  
.tctp1:hover img {  
    transform: scale(1.1); /* 鼠标悬停时放大图片 */  
    /* 你可以添加更多效果，比如改变透明度等 */  
}
#show-more-link {
	text-align: right; /* 注意：这个属性在这里对<a>标签内的文本不起作用，因为<a>是行内元素 */  
    display: block; /* 将<a>标签转为块级元素，以便text-align: right;能够生效 */  
            /* 可选：添加一些内边距或外边距以改善布局 */  
    padding-right: 20px; /* 右内边距 */  
    margin-top: 20px; /* 上外边距，用于示例 */  
} 
.container {
	text-align: right;
}
.button-li {  
  display: inline-block; /* 让链接表现得像块级元素，便于设置宽度和高度 */  
  padding: 10px 20px; /* 设置内边距 */  
  text-decoration: none; /* 去除下划线 */  
  background-color: #007BFF; /* 设置背景颜色 */  
  color: white; /* 设置文字颜色 */  
  border-radius: 5px; /* 设置边框圆角 */  
  border: 1px solid #004085; /* 可选：设置边框 */  
  transition: background-color 0.3s; /* 可选：设置背景颜色变化的过渡效果 */  
}  
  
.button-li:hover {  
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */  
}