/*=================================================================*/
/*-------產業領域_總攬區塊--------*/
/*=================================================================*/



.text_area{
    margin-bottom: clamp(1.613rem, 2.6vw, 3.125rem);
}






.industry_overview_area {
	margin: 0;
	padding: 0;
	list-style-type : none;
	display: block;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*row-gap: clamp(1.6130rem, 2.6042vw, 3.1250rem);*/ /* 最小值 25.81px、大小約 2.6042vw、最大值 50.00px */
	/*column-gap: 2.6042vw;*/
	gap: clamp(1.6130rem, 2.6042vw, 3.1250rem);
	/*margin: 0 clamp(-1.3021rem, -0.6510vw, -0.7813rem);*/ /* 最小值 -20.83px、大小約 -0.6510vw、最大值 -12.50px */
  }
  
	.industry_overview_area li{
		margin: 0;
		padding: 0;
		list-style-type : none;
		display: block;
		/* width: calc(100% / 3); */
		box-sizing: border-box;


		/*width: calc((100% / 3) - (2 * 2.6042vw / 3));*/ /* 3欄平均寬度，扣除間距 */
		width: calc((100% / 3) - (2 * clamp(1.6130rem, 2.6042vw, 3.1250rem) / 3)); /* 3欄平均寬度，扣除間距 */

		/*padding: 0 clamp(0.4688rem, 0.6510vw, 0.7813rem);*/ /* 最小值 7.50px、大小約 0.6510vw、最大值 12.50px */
	}
	.industry_overview_list {
		/* width: 32%; */
		/* margin-bottom: 50px; */
		position: relative;
		text-align: center;
		display: block;
		color: var(--primary_color);
		font-size: 1rem;
	}
	.industry_overview_list:hover {
		opacity: 1;
	}

	.industry_overview_img {
		position: relative;
	}

	  .industry_overview_img .img{
			position: relative;
			/* padding-top: 100%; */
			display: block;
			overflow: hidden;
			aspect-ratio: 3 / 2;
			width: 100%;
	  }
	  .industry_overview_img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		float: none;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		transition: 0.3s ease all;
	  }



	  .industry_overview_img .mask {
		position: absolute;
		display: block;
		top: 0%;
		width: 100%;
		height: 100%;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		opacity: 0;
		transition: opacity 0.3s ease;
	  }
	  .industry_overview_list:hover .industry_overview_img .mask {
		opacity: 1;
		transition: opacity 0.3s ease;
	  }
	  .industry_overview_img .mask .description {
			font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem); /* 最小值 14.00px、大小約 0.8333vw、最大值 16.00px */
			position: absolute;
			top: 50%;
			left: 0;
			display: block;
			width: 100%;
			transform: translateY(-50%);
			color: #fff;
			padding: 0 0.625rem; /*10px*/
			text-align: left;
			line-height: 1.5;
			font-size: inherit;


			display: -webkit-box;
			-webkit-box-orient: vertical;	
			-webkit-line-clamp: 6;	
			overflow: hidden;
		}



	  .industry_overview_list .title {
		display: inline-block;
		color: inherit;
		line-height: 1;
		margin-top: 0.625rem; /*10px*/
		font-size: inherit;
		font-weight: bold;
		position: relative;
		padding-right: 2.5rem; /*40px*/
		text-align: left;
		transition: 0.5s;

		line-height: 1.2;
	  }
	  .industry_overview_list:hover .title{
		padding-left: 0.625rem; /*10px*/
		padding-right: 3.125rem; /*50px*/
	  }
	  .industry_overview_list .title:before,
	  .industry_overview_list .title:after {
		display: block;
		content: "";
		position: absolute;
		background-color: var(--primary_color);
	  }
	  .industry_overview_list .title:before {
		bottom: 0.3125rem; /*5px*/
		right: 0.3125rem; /*5px*/
		width: 1px;
		height: 0.75rem; /*12px*/
		transform: rotate(135deg);
	  }
	  .industry_overview_list .title:after {
		bottom: .375rem; /*v*/
		right: 0;
		width: 1.875rem; /*30px*/
		height: 1px;
	  }


@media (max-width: 990px){

	.industry_overview_area li{
		/* width: calc(100% / 2); */
	}

	.industry_overview_img .mask .description{
		-webkit-line-clamp: 5;
	}

}

@media (max-width: 768px){

	.industry_overview_area li{
		/* width: calc(100% / 2); */
	}

	.industry_overview_img .mask .description{
		-webkit-line-clamp: 4;
	}

}
	

@media (max-width: 640px){
	
	.industry_overview_img .mask .description{
		-webkit-line-clamp: 3;
	}

}
	




/* 在螢幕寬度大於510時，套用這裡的特定樣式 */
@media screen and (min-width: 510.1px) {

	/*火狐跑版問題*/
	.firefoxBrowser .industry_overview_area {
		/* display: grid;
		grid-template-columns: repeat(3 , 1fr);
		gap: clamp(1.6130rem, 2.6042vw, 3.1250rem); */
	}
  
		.firefoxBrowser .industry_overview_area li{
			/* width: 100%; */
		}
	
	
}



@media (max-width: 510px){

	.industry_overview_area {
		margin: 0 ;
	}
		.industry_overview_area li{		
			width: calc(100% / 1);
			padding: 0;
		}
			
		.industry_overview_img .mask .description{
			-webkit-line-clamp: 6;
		}
}