/* =================================================================== */
/* 公益與關懷 css */
/* =================================================================== */

.public_bg{
    display: flex;
    flex-direction: column;
    gap: clamp(1.2904rem, 2.0833vw, 2.5000rem); /* 20.65px , 2.0833vw , 40.00px */
}





.public_bg .text_area:first-of-type{
    
}
.public_bg .text_area:first-of-type ~ .btn_area{
    margin-top: 0;
}





	.public_area{
	    display: flex;
	    flex-direction: column;
	    row-gap: clamp(1.2904rem, 2.0833vw, 2.5000rem); /* 20.65px , 2.0833vw , 40.00px */
	}

	
		/* 公益與關懷_列表 */
		.public_list{
			/* box-sizing: border-box;
			width: 25%;
			padding: 0 10px;
			
			overflow: hidden; */
		}

		.public_list .public_date_click{
			display: flex;
			justify-content: flex-end;
			gap: 5px 10px;
			color: var(--fourth_color);
			color: var(--dark_color);
			margin-top: 10px;
			font-size: 12px;
			display: none;
		}
		.public_card{
			display: grid;
			grid-template-columns: minmax(230px , 1fr)  2.06fr;
			align-items: flex-start;
			gap: clamp(1.2904rem, 2.0833vw, 2.5000rem); /* 20.65px , 2.0833vw , 40.00px */
			border-radius: 0;
			box-shadow: none;
			/* background-color: var(--fifth_color); */
			background-color: #fff;
			padding: clamp(1.2904rem, 2.0833vw, 2.5000rem); /* 20.65px , 2.0833vw , 40.00px */
			/* border-radius: clamp(0.6452rem, 1.0417vw, 1.2500rem); */ /* 10.32px , 1.0417vw , 20.00px */
			box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);
		}

			/* 公益與關懷_列表圖 */
			.public_Img{
                width: 100%;
			}
				.public_Img a{
					position: relative;
					padding-top: 65.9%;
					display: block;
					overflow: hidden;
					border-radius: 0.9375rem;
                    /* width: 100%; */
				}
					.public_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;
					}


				.public_list .tag_area {
					/*position: absolute;
					top: 2.62vw;
					left: 0;
					z-index: 1;
					display: flex;
					flex-direction: column;
					gap: 5px;
					font-weight: 700;
                    font-size: min(max(0.84vw, 0.875rem), 1rem);*/ /*字體大小 1.31vw、最小值 16px、最大值 16px*/
				}
				/*.public_list .tag_area span{
					display: inline-block;
					padding: 10px 15px;
					background-color: var(--primary_color);
					color: #fff;
				}*/


			.public_info{
				color: var(--dark_color);
				line-height: 1.5;
				overflow: hidden;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				gap:clamp(0.6452rem, 1.0417vw, 1.2500rem); /* 10.32px , 1.0417vw , 20.00px */
				font-size: 1rem;
				height: 100%;
			}
			/* .public_info::before{
				position: absolute;
				content: "";
				background-image: url(../index/images/news_bottom.svg);
				background-position: right bottom;
				background-repeat: no-repeat;
				background-size: cover;
				padding-top: 8.92%;
				width: 100%;
				left: 0;
				bottom: 0;
			} */

				/* 公益與關懷_列表標題 */
				.public_title{
					/*font-size: clamp(0.95rem, 0.9896vw, 1.1875rem); *//* 15.2px , 0.9896vw , 19px */
                    font-size: clamp(1.125rem, 1.0417vw, 1.25rem); /* 18px , 1.0417vw , 20px */
					line-height: 1.2;
					font-weight: 700;
                    color: var(--primary_color);
				}
					.public_title a{
						color: inherit;
						display: block;
						text-decoration: none;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
                .public_remark_content{
                    flex-grow: 1;
                }
                    .public_remark{
                        text-align: left;
                        font-size: inherit;
                        line-height: inherit;
                        color:inherit;
                        

                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 4;
                        overflow: hidden;
                    }
				/* .public_listDate{
					margin-top: 40px;
					margin-top: 20px;
					font-weight: 600;
					color: inherit;
                    font-size: min(max(0.84vw, 0.875rem), 1rem); 
					line-height: inherit;
					font-family: var(--foreign_font);
					position: relative;
				}
				.public_listDate::after{
					position: relative;
					content: "";
					background: url(../images/pencil_icon.svg);
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					width: 12px;
					height: 12px;
					margin-left: 2px;
					display: inline-block;
					transition: 0.3s ease all;
				}
				.public_list:hover .public_listDate::after{
					transform: rotate(225deg);
					transition: 0.3s ease all;
				} */

            .public_list .more{
                text-align:center;
                justify-content: flex-end;
                display: flex;
                flex-wrap: wrap;
                
                gap: 0.9375rem; /*15*/
                font-weight: 600;
                /*font-size: clamp(1rem, 1.0417vw, 1.25rem);*/ /* 16px , 1.0417vw , 20px */
                font-size: clamp(1rem, 0.9375vw, 1.125rem); /* 16px , 0.9375vw , 18px */
            }
                .public_list .more a{
                    display: block;
                    text-decoration: none;
                    margin: 0;
                    color: var(--dark_color);
                    border: var(--dark_color) 1px solid;
                    padding: 0 2.8125rem; /*0 45*/
                    width: auto;
                    border-radius: 3.125rem; /*50px*/
                    background: #fff;
                    font-size: inherit;
                    font-weight: inherit; 
                    height: auto;
                    line-height: 2.625rem; /*42*/
                    transition: 0.3s ease all;
                }
                .public_list .more a:hover {
                    background: var(--dark_color_sec);
                    border-color: var(--dark_color_sec);
                    color: #fff;
                    transition: 0.3s ease all;
                }


		/* hover */
		.public_list:hover{

		}
		.public_list .public_Img:hover img{
			transform: scale(1.1);
		}
		.public_list .public_title :hover{
			opacity: 0.5;
		}



        /*沒有圖片*/
        .noImg{
        }
        .public_area .noImg .public_Img{
            display: none;
        }
        .public_area .noImg .public_card {
            display: flex;
            grid-template-columns: unset;
        }







/* 公益與關懷_列表的標籤區塊----------------------- */
/* .news_tags_area  .tags{
	display: flex;
	font-size: 14px;
	line-height: 1;
	gap: 5px 5px;
	color: var(--fourth_color);
}
	.news_tags_area{
	}

	.news_tagsFeature_area{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 10px;

		margin-top: 10px;
	}

	.news_tagsFeature_area .public_date_click{
		margin-top: 0px;
	}

	
	.news_tags_area .tags{
		color: var(--dark_color);
		flex-wrap: wrap;
	}
		
	.news_tags_area .level,
	.news_tags_area .keyword{
		border-radius: 20px;
		font-family: var(--mandarin_font);
		box-shadow: rgba(50, 50, 93, 0.25) 0px 0px 12px -2px, rgba(0, 0, 0, 0.3) 0px 0px 7px -3px;
	}
	.news_tags_area .level a,
	.news_tags_area .keyword a{
		color: inherit;
		display: block;
		text-decoration: none;

		padding: 5px 0.7813vw;
	}
	.news_tags_area .keyword a {
		color: var(--primary_color);
	}
	.news_tags_area .level:hover,
	.news_tags_area .keyword:hover{
		opacity: 0.5;
	}

	.news_tags_area .level{
		border-color: var(--primary_color);
		background-color: var(--primary_color);
		color: #fff;
	} */
	/* 進階 */
	/* .news_tags_area .level.adv{

	} */
	/* 高階 */
	/* .news_tags_area .level.exp{
		border-color: var(--fifth_color);
		background-color: var(--fifth_color);
	} */
	/* 初階 */
	/*.news_tags_area .level.beg{
		border-color: var(--second_color);
		background-color: var(--second_color);
	}

	.article_center {
		display: flex; 
		justify-content: space-between; 
		padding: 10px 15px; 
	}*/

		/* 最新文章列表_上方資訊_日期與點擊數通用樣式 */
		/* .article_center .tags{
			display: flex; 
			align-items: baseline;
			font-size: 14px; 
			font-family: var(--foreign_font);
		} */














		
        

@media (max-width: 1280px){


}

@media (max-width: 990px){
}


@media (max-width:860px){
    
	.public_area .public_card {
		display: flex;
        flex-direction: column;
	}

}
@media (max-width:640px){
    
	.public_area .public_list {
		/* padding: 0 0 15px; */
	}
		.public_area .public_card {
			/* display: flex;
			flex-direction: column;
			gap: 15px 15px; 
			align-items: unset; */
		}
}