body{
	background: #f0f0f0;	
	margin: 0;
	font-size: 18px;
	color: #000000;
}


a,a:visited,a:active,a:hover{
	text-decoration: none;
	color: #000000;
}



.j_pc_header{
	z-index: 100;
	top: 0;
	position: fixed;
	width: 100%;
	background: #ffffff;	
	height: 60px;
	box-shadow: 0px 0px 3px #333 ;
}


.j_pc_header_logo{
	float: left;
	width: 260px;
	
}


#j_pc_header_logo_01{
	background-color: #12a529;
	color: #ffffff !important;
	text-decoration: none;
	width: 150px;
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	text-align:center;
	padding: 5px 0;
	margin-top: 8px;
	border-radius: 100px;
	margin-left: 15px;
	
}


.j_pc_left{
	height: 100vh;
	width: 260px;
	float: left;
    background: #0a0a0a;	
	left: 0;
	top: 0;
	overflow: hidden;
	
}


.j_pc_right{
	height: 100vh;
	width: 260px;
	float: right;
    background: #0a0a0a;	
	left: 0;
	top: 0;
	overflow: hidden;
	
}





/* 瀑布流容器 */
    .waterfall-container {
      column-count: 5; /* PC端默认5列 */
      column-gap: 16px; /* 列间距 */
      max-width: 1600px;
      margin: 0 auto;
	  padding: 0 10px;
    }

    /* 瀑布流卡片项 */
    .waterfall-item {
      break-inside: avoid; /* 防止卡片被列拆分 */
      margin-bottom: 16px; /* 卡片之间的垂直间距 */
      background-color: #ffffff;
      border-radius: 12px;
      overflow: hidden;
      color: #000;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .waterfall-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    }

    /* 卡片图片 */
    .waterfall-item__img {
      width: 100%;
	  max-height: 120vw;
	  overflow: hidden;
	  border-radius: 12px;
      display: block;
      background-color: #222;
      /* 可替换为真实图片：background-image: url(xxx); background-size: cover; */
    }
    /* 给不同卡片设置不同高度，模拟瀑布流错落效果 */
    .waterfall-item__img--tall  { height: 320px; }
    .waterfall-item__img--mid   { height: 240px; }
    .waterfall-item__img--short { height: 160px; }

    /* 卡片文字内容区 */
    .waterfall-item__content {
      padding: 12px;
    }
    .waterfall-item__title {
      font-size: 22px;
      line-height: 1.5;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .waterfall-item__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #aaa;
    }
    .waterfall-item__author {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .waterfall-item__avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #444;
    }
	
	
	.item_img{
		width: 100%;
	}

    /* 响应式适配 
    @media (max-width: 1400px) {
      .waterfall-container {
        column-count: 4;
      }
    }
    @media (max-width: 1024px) {
      .waterfall-container {
        column-count: 3;
      }
    }
    @media (max-width: 768px) {
      .waterfall-container {
        column-count: 2;
      }
    }
    @media (max-width: 480px) {
      .waterfall-container {
        column-count: 1;
      }
    }*/
	
	
	
	.j_pc_header_search_box{
		float: left;
		max-width: calc(100% - 800px);
		min-width: 400px;
		width: 100%;
	
		margin-top: 8px;
		height: 38px;
	}
	
	.j_pc_header_search_box_01{
		margin-left: auto;
		margin-right: auto;
		max-width: 400px;
		width: 100%;
		background: #f3f3f3;
		height: 38px;
		border-radius: 100px;
		overflow: hidden;
	}
	
	#search-input{
		width: calc(100% - 80px);
		background: #f3f3f3;
		height: 38px;
		height: 38px;
		border: 0;
		outline: none;
		display: inline-block;
		float: left;
		padding-left: 15px;
	}
	
	#search-button{
		width: 38px;
		height: 38px;
		border: 0;
		outline: none;
		display: inline-block;
		float: right;
		margin-right: 15px;
		background: #f3f3f3 !important;
	}
	
	#search-button img {
		width: 35px;
		height: 35px;
		
	}
	
	.j_pc_foot{
		text-align:center;
		color: #aaa;
		font-size: 12px;
		margin-top: 35px;
	}
	
	.j_mobile_foot{
		display: none;
	}
	
	.j_mobile_foot{
		display: none;
	}
	
	.j_pc_top{
		width: 100%;
		height: 80px;
	}
	
	




@media (max-width: 1400px) {
      .waterfall-container {
        column-count: 3;
      }
	  
	  
	  .j_mobile_foot{
	  	display: none;
	  }
	  
	  .j_pc_top{
	  	width: 100%;
	  	height: 80px;
	  }
	  
	  
	  
	  
	  
	  
	  
    }




/*pc*/
@media (max-width:768px){
	
	
	
	
	.waterfall-container {
	  column-count: 3;
	}
	
	
	
	

	
}




/*mobile*/

@media (max-width:768px){
	
	.j_mobile_foot{
		display: block !important;
	}
	
	.j_pc_top{
		width: 100%;
		height: 65px;
	}
	
	.j_pc_foot_dd{
		width: 100%;
		height: 85px;
	}
	
	
	.j_mobile_foot{
		width: 100%;
		height: 60px;
		position: fixed;
		bottom: 0;
		background-color: #0a0a0a;
	}
	
	
	.j_mobile_foot_01,.j_mobile_foot_02{
		float: left;
		text-align:center;
	}
	
	.j_mobile_foot_01{
		width: 20%;
		padding-top: 10px;
	}
	
	.j_mobile_foot_02{
		padding-top: 18px;
		width: 20%;
	}
	
	
	#j_mobile_foot_01_img{
		width: 40px;
	}
	
	.j_mobile_foot_02_img{
		width: 26px;
	}
	
	
	.waterfall-container {
	  column-count: 1;
	}
	
	
	.j_pc_header_logo{
		display: none;
	}
	
	
	
	
	.j_pc_header_search_box{
		float: left;
		max-width: calc(100%);
		min-width: 400px;
		width: 100%;
	
		margin-top: 10px;
		height: 38px;
	}
	
	.j_pc_header_search_box_01{
		margin-left: auto;
		margin-right: auto;
		max-width: 400px;
		width: 80%;
		background: #dddddd;
		height: 38px;
		border-radius: 100px;
		overflow: hidden;
	}
	
	#search-input{
		width: calc(100% - 80px);
		background: #dddddd;
		height: 38px;
		border: 0;
		outline: none;
		display: inline-block;
		float: left;
		padding-left: 15px;
	}
	
	#search-button{
		width: 38px;
		height: 38px;
		border: 0;
		outline: none;
		display: inline-block;
		float: right;
		margin-right: 15px;
		background: #dddddd !important;
	}
	
	#search-button img {
		width: 35px;
		height: 35px;
		
	}
	
	
	.waterfall-item{
		width: calc( 100% - 16px ) !important;
		margin-left: 8px;
	}
	
	
	
	
	
	
}