/*/////////////////////////////////////////////////////////*/
/*-------網路點燈區產品區塊--------*/
/*/////////////////////////////////////////////////////////*/

ul.productArea{
	padding: 0;
	margin: 0;
	display: block;
	list-style-type: none;
	/* display:flex;
	flex-wrap: wrap;*/
	display: grid;
	grid-template-columns: repeat(3 , 1fr);
	/* align-items: center; */
	gap: 0  1.05vw;
	/* margin: 0 -20px -20px; */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
	/* 產品列表 */
	ul.productArea li {
		padding: 0;
		margin: 0;
		display: block;
		list-style-type: none;
		box-sizing: border-box;
		/* width: 33.3%; */
		/* padding: 0 20px 20px;
		margin-bottom: 20px; */
		margin-bottom: 20px;
		position: relative;
		width: calc(100% / 3);
		width: calc((100% / 3) - 0.7vw); /* 7欄平均寬度，扣除間距  2 × 1.05vw / 3 = 0.7vw */
		/* flex: 1; */
		display: flex;
		flex-direction: column;
		/* flex-grow: 1; */
	}

	.productList {
		border-radius: 5px;
		/* background-color: #E5D8C9; */
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		/* background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%) , url(../images/card_bg_s.svg) ; */
		background-image: url(../images/card_bg_s3.webp); /* 20250617更新連結 */
		background-size: cover;
		padding: 1.57vw; /*30px*/
		height: 100%;
		/* height: calc(100% - (30px * 2)); */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-grow: 1;
	}

		/* 產品標題 */
		.productList strong {
			padding: 0;
			margin: 0;
			display: block;
			font-size: clamp(1.125rem,1.25vw,1.5rem);
			line-height: 1.5;
			color: var(--dark_color);
			position: relative;
			margin-bottom: 15px;
		}
		.productList strong:before {
			position: absolute;
			content: "";
			width: 25px;
			height: 2px;
			left: 2px;
			bottom: -5px;
			/* margin-top: 20px; */
			background-color: var(--sixth_color);
		}

	/* 產品簡述 */
	.productList .briefly {
		font-size: 1rem;
		color: #000;
		line-height: 1.5;
		/* modify by david 20220727 start */
		/* overflow: hidden;*/
		/*white-space: nowrap; */
		/* overflow: hidden; */
		/* text-overflow: ellipsis; */
		/* -webkit-box-orient: vertical; */
		/* modify by david 20220727 end */
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		position: relative;
		z-index: 2;
	}

	/* 產品按鍵 */
	.productList .btn {
		margin: 40px 0px 0px;
		margin-top: clamp(.625rem,1.0417vw,1.25rem);
		/* width: 160px; */
		/* height: 40px; */
		/* background: var(--primary_color); */
		display: inline-flex;
		align-items: self-end;
		justify-content: center;
		/* border-radius: 5px; */
		border-radius: 20px;
		flex-grow: 1;
	}
		.productList .btn a {
			display: inline-block;
			color: #fff;
			text-decoration: none;
			position: relative;
			padding-right: 25px;
			line-height: 2.5;
			transition: 0.5s ease all;
			padding: 0 50px 0 20px;
			white-space: nowrap;
			background: var(--primary_color);
			border-radius: inherit;
		}
			.productList .btn a:before {
				position: absolute;
				content: "";
				background-image: url(../images/right_arrow.svg);
				background-size: 18px;
				background-position: center;
				background-repeat: no-repeat;
				width: 18px;
				height: 18px;
				right: 20px;
				top: 50%;
				transform: translateX(0%) translateY(-50%);
			}

		/* hover */
		.productList .btn a:hover{
			padding-right: 40px;
			transition: 0.5s ease all;
		}


	/* 產品燈圖片 */
	.productList .light_pic {
		/* position: absolute;
		width: 30%;
		right: 0;
		bottom: 0; */
		position: absolute;
		width: 15%;
		min-width: 75px;
		right: 0%;
		bottom: -1%;
		z-index: 0;
	}
		.productList .light_pic img {
			width: 100%;
			height: auto;
		}
		

@media (max-width: 1250px){

	ul.productArea{	
		grid-template-columns: repeat(2 , 1fr);
		gap: 0  10px; /*10px*/
	}

	/* ul.productArea{	
		margin: 0 -10px -10px;
	} */
		/* 產品列表 */
		ul.productArea li {
			width: calc((100% / 2) - 5px); /* 7欄平均寬度，扣除間距  1 × 1.05vw / 2 = 0.4vw */
			/* flex: 1; */
		}
		.productList {
			padding: 15px;
			/* height: calc(100% - (15px * 2)); */
		}
		.productList .btn {
			margin: 40px 0px 0px;
			width: 120px;
		}
}

@media (max-width: 768px){

	ul.productArea{	
		display: block;
		gap: 0;
		/* margin: 0 0px -10px; */
	}
		/* 產品列表 */
		ul.productArea li {
			width: 100%;
			/* padding: 0 0px 10px; */
			/* margin-bottom: 10px; */
		}
		/* .productList {
			padding: 15px;
			height: calc(100% - (15px * 2));
		}*/
		.productList .btn {
			margin: 20px 0px 0px;
			/* width: 120px; */
		} 
		/* 產品燈圖片 */
		.productList .light_pic {
			display: none;
		}


		

	/* 產品燈圖片 */
	.productList .light_pic {
		width: 30%;
		min-width: 55px;
		right: -5%;
		bottom: -5%;
	}
}