/*/////////////////////////////////////////////////////////*/
/*-------案例展示區--------*/
/*/////////////////////////////////////////////////////////*/

ul.album_area{	
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px -30px;
}

	/* 案例展示_列表 */
	ul.album_area li{
		padding: 0;
		margin: 0;
		list-style-type: none;
		box-sizing: border-box;	
		display: block;
		width: 25%;	
		padding: 0 15px 30px;
	}
		.album_list{
			font-size: 16px;
			line-height: 1.5;
		}
			.album_list a{	
				display: block;
				text-decoration: none;				
				color: var(--primary_color);	
				word-wrap: break-word;
				word-break: break-all;
			}
				/* 案例展示_列表_圖 */
				.album_img{
					box-sizing: border-box;
					position: relative;
					/* padding-top: 100%; */
					padding-top: 66%;
					overflow: hidden;
					display: block;
				}                                            
					.album_img 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: all 0.3s ease-out;				
					}
				

					
				/* 案例展示_列表_標題 */
				ul.album_area h3.title{
					padding: 0;
					margin: 0;
					font-size: inherit;
					line-height: inherit;
					font-weight: bold;
					color: inherit;
					margin: 10px 0;
				}
				/* 案例展示_列表_簡述 */
				ul.album_area h4.album_brief{
					padding: 0;
					margin: 0;
					font-size: 15px;
					line-height: inherit;
					font-weight: inherit;
					color: #777;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}



@media (max-width: 640px){

	ul.album_area{	
		margin: 0 -5px -20px;
	}	
		/* 案例展示_列表 */
		ul.album_area li{
			width: 50%;	
			padding: 0 5px 20px;
		}
			ul.album_area h3.title {
				margin: 5px 0;
			}

}






/*-------案例展示區內頁--------*/
ul.album_area.album_area2{	
}
	ul.album_area.album_area2 h4.album_brief{
		margin-top: 15px;	
	}	

	ul.album_area.album_area2 .album_img{
		position: relative;
	}
	/* hover */
	ul.album_area.album_area2 .album_img:before{	
		position: absolute;
		content: "點擊放大";
		font-family: var(--foreign_font);
		top: 50%;
		left: 50%;
		transform: translate(-50% , 0%) scale(0);
		color: #fff;
		text-shadow: rgb(0 0 0) 0px 0px 10px;
		font-size: 14px;
		line-height: 1;
		z-index: 1;
		/* transition: 0.9s ease all; */
		opacity: 0;
	}
	ul.album_area.album_area2 .album_img:hover:before{	
		transform: translate(-50% , -50%) scale(1);
		opacity:1;
		transition: 0.9s ease all;
	}
	ul.album_area.album_area2 .album_list:hover img{
		/* opacity: 0.5; */
		filter: grayscale(0.7) ;  /*灰階*/
		transition: 0.3s ease all;
	}


@media (max-width: 990px){

	/* hover */
	ul.album_area.album_area2 .album_img:before{	
		font-size: 12px;
	}

}
	


	.pswp__custom-caption {		
		font-size: 12px;
		color: #fff;
		/* width: calc(100% - 32px); */
		/* max-width: 400px; 
		padding: 2px 8px;
		border-radius: 4px;*/
		position: absolute;
		left: 50%;
		bottom: 16px;
		transform: translateX(-50%);

		background: rgba(0 0 0 / 35%);
		padding: 0;
		line-height: 1.3;
		text-align: center;		
		max-width: calc(100% - 20px);
    	width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	/* .pswp__custom-caption:before{
		content: "";		
		width: 100%;
	} */
		.pswp__custom-caption a {
			color: #fff;
			/* text-decoration: underline; */

			text-decoration: none;			
		}
		.hidden-caption-content {
			display: none;
		}