

/*/////////////////////////////////////////////////////////*/
/*-------*首頁_最新消息區塊--------*/
/*/////////////////////////////////////////////////////////*/


.indexNewsBg{
	padding-bottom: 70px;
	padding-top: 110px;
}
	.indexNewsBg .wrap{
		width: 65%;
	}

	.indexNewsArea{	
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 -15px;	
	}


		/* 首頁最新消息列表 */
		.indexNewsList{
			box-sizing: border-box;
			width: 33.3%;
			padding: 0px 15px 30px;
		}
		.indexNewsListIn{
			position: relative;
			overflow: hidden;
			border: 1px #f0f0f000 solid; 
			box-shadow: 0 18px 40px #3333331a;
		}

		.indexNewsTop{
			position: absolute;
			width: 100%;
			 top: -100%;
			transition: 0.5s ease all;
			z-index: 1;
		}
        /* 首頁最新消息分享區塊 */
		.indexNewsTopIn{
			background-color: #f0f0f0;
			position: relative;
			padding: 20px 90px 20px 20px;
		}	
			.indexNewsTop span{
			    display: block;
			    font-weight: bold;
			    box-sizing: border-box;
			    overflow: hidden;
			    text-overflow:ellipsis;
			    white-space: nowrap;
			    /* word-wrap: break-word; */
			    word-break: break-all;
			}

			ul.indexNewsTopIcon{
				position: absolute;
				box-sizing: border-box;
				padding: 0;
				list-style-type: none;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 0 -5px;
				/* justify-content: flex-end; */
				top: 50%;
				right: 20px;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}	

			ul.indexNewsTopIcon li{
				padding: 0 5px;
				box-sizing: border-box;
			}				
				ul.indexNewsTopIcon a{
					cursor: pointer; 
					/* padding: 5px; */
					display: block;
					/* background-color: #000; */
				}	
				ul.indexNewsTopIcon a:hover{
					opacity: 0.5;
				}
				.indexNewsTopIcon img{
					width: 25px;
					height: auto;
				}				
			
				


        /* 首頁最新消息圖片 */
		.indexNewsImg{
		    padding-bottom: 135px;
		}
		.indexNewsImg span{
		   overflow: hidden;
			background-color: #000;
			position: relative;
			padding-top: 100%;
			display:block;
		}
			.indexNewsImg img{
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				float: none;
				/* border-radius: 50%; */
				width: 100% !important;
				height: 100% !important;
				object-fit: cover;
				transition: 0.3s ease all;
			}


        /* 首頁最新消息下方文字區塊 */
		.indexNewsBottom{
			/* background-color: #f0f0f0;*/
			background-color: #fff; 
			position: absolute;
			bottom: 0px;
			left: 0;
			width: 100%;
			height: 135px;
			/*transition: 5s ease all;*/
		}
		.indexNewsBottomIn{
			padding: 20px 20px;
		}
			.indexNewsBottom a{
				display: block;
				width: 100%;
    			height: 100%;
				text-decoration: none;
			}
				.indexNewsTag{
					font-size: 15px;
					color: #fff;
					background-color: var(--primary_color);
					padding: 5px;
					display: inline-block;
					margin-bottom: 10px;
				}
				.indexNewsDate{
					font-size: 15px;
					color: var(--primary_color);
					display: inline-block;
					margin-left: 20px;
				}
				.indexNewsTit{
					font-size: 18px;
					line-height: 20px;
					color: var(--primary_color);
					margin: 10px 0;
					font-weight: bold;
					min-height: 40px;
					display: -webkit-box; 
					-webkit-box-orient: vertical; 
					-webkit-line-clamp: 2; 
					overflow: hidden;
				}
				.indexNewsText{
					/* font-size: 14px;
					line-height: 24px; */
					font-size: 18px;
					line-height: 30px;
					color: #000;
					opacity:0;
					display: -webkit-box; 
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 10; 
					overflow: hidden;	
				}	

				/* 首頁最新消息hover效果 */
				.indexNewsList:hover .indexNewsListIn {
					border: 1px #f0f0f0 solid; 
					box-shadow: 0 18px 40px #33333300;
				}
				.indexNewsList:hover  .indexNewsText{
					/*display: block;*/
					opacity:1;
					transition:2s ease all;
					/*color: #7f7f7f;*/									
				}	

				.indexNewsList:hover  .indexNewsTag ,
				.indexNewsList:hover  .indexNewsDate ,
				.indexNewsList:hover  .indexNewsTit{
				    display: none;				    
				}	
				.indexNewsList:hover .indexNewsImg{					
				}
				
				.indexNewsList:hover .indexNewsTop{
					transition: 0.3s ease all;
				    top:0;
				}

				.indexNewsList:hover .indexNewsBottom {
					height:calc(100% - 56px);
					z-index: 9;
					/* background-color: #f0f0f0; */
					background-color: #fff;
					transition:1.5s ease all;
				}
				.indexNewsList:hover .indexNewsBottomIn {
					position: absolute;
				}



@media (max-width: 1280px){
	.indexNewsBg .wrap{
		width: 95%;
	}			
}


@media (max-width: 990px){
	
	.indexNewsBg{
		padding-bottom: 20px;
		padding-top: 50px;
	}

		.indexNewsBg .wrap{
			width: 85%;
		}

}

@media (max-width: 860px){

	/* 首頁最新消息列表 */
	.indexNewsList{
		/* box-sizing: border-box;
		padding: 0px 15px 30px; */
		width: 50%;			
	}

}

@media (max-width: 640px){

	/* 首頁最新消息列表 */
	.indexNewsList{
		width: 100%;			
	}

}



