/* ================================================= */
/* 相簿css */
/* ================================================= */





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

ul.album_area{	
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	gap:clamp(1.2904rem, 2.0833vw, 2.5rem); /* 20.65px , 2.0833vw , 40px */
    /*margin: 0 clamp(-1.8163rem, -1.5135vw, -0.9375rem);*/ /* -29.06px , -1.5135vw , -15.00px */

    display: grid;
    grid-template-columns: repeat(3 , 1fr);
}

	/* 案例展示_列表 */
	ul.album_area > li{
		padding: 0;
		margin: 0;
		list-style-type: none;
		box-sizing: border-box;
		display: block;
		width: 100%;
		/* padding: 0 15px 30px; */
       /*padding: 0  clamp(0.4839rem, 0.7813vw, 0.9375rem);*/ /* 7.74px , 0.7813vw , 15.00px */
	}


		.album_list{
			font-size: 1rem;
			line-height: 1.5;
			/* background-color: var(--third_color); */
			display: flex;
			flex-direction: column;
			height: 100%;
		}
			.album_list a{
				display: block;
				text-decoration: none;
				color: var(--primary_color);
				word-wrap: break-word;
				word-break: break-all;
				display: flex;
				flex-direction: column;
				height: 100%;
				flex-grow: 1;
			}
				/* 案例展示_列表_圖 */
				.album_img{
					box-sizing: border-box;
					position: relative;
					padding-top: 100%;
					/* aspect-ratio: 482/ 271; */
					overflow: hidden;
					display: block;
					border-radius: 5px;
				}                                            
					.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;				
					}
				

					



            .album_info_box{
                flex-grow: 1;
                /*padding: clamp(0.9678rem, 1.5625vw, 1.875rem) 0 0;*/ /* 15.48px , 1.5625vw , 30.00px */
                padding: 0;
                padding-top: clamp(0.625rem, 0.7813vw, 0.9375rem); /* 10px , 0.7813vw , 15px */
                display: flex;
                flex-direction: column;
                /* height: 100%; */
            }
                .album_info {
                    display: flex;
                    flex-direction: column;
                    gap: 0.625rem;
                    margin-bottom: clamp(1.6130rem, 2.6042vw, 3.1250rem); /* 25.81px , 2.6042vw , 50.00px */
                    flex-grow: 1;
                    margin-bottom: 0;
                }
                
                ul.album_area .date {
                    font-family: var(--foreign_font);
                    font-size: 0.875rem;
                }
                        
                        /* 案例展示_列表_標題 */
                        ul.album_area .title{
                            padding: 0;
                            margin: 0;
                            font-size: inherit;
                            line-height: inherit;
                            font-weight: bold;
                            color: inherit;
                            margin: 0;
                            /*font-size: clamp(1.0208rem, 1.0938vw, 1.3125rem);*/ /* 16.33px , 1.0938vw , 21.00px */
                            font-size:0.875rem;

                            display: -webkit-box;
                            -webkit-box-orient: vertical;	
                            -webkit-line-clamp: 1;	
                            overflow: hidden;
                        }
                        /* 案例展示_列表_簡述 */
                        ul.album_area .album_brief{
                            padding: 0;
                            margin: 0;
                            /* font-size: 15px; */
                            line-height: inherit;
                            font-weight: inherit;
                            color: var(--fourth_color);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            font-size: clamp(0.8750rem, 0.9375vw, 1.1250rem); /* 14px , 0.9375vw , 18px */

                            display: none;
                        }

                .album_list a:hover .title{
                    opacity: 0.7;
                    transition: all 0.3s ease-out;				
                }
                

                .album_info_bottom{
                    margin: 0;
                    padding: 0;
                    list-style-type : none;
                    display: flex;
                    justify-content: space-between;
                    padding-top:  clamp(0.3871rem, 0.6250vw, 0.7500rem); /* 6.19px , 0.6250vw , 12.00px */
                    border-top: 1px solid rgba(0 200 255 / 20%);
                    color: var(--fourth_color);
                    display: none;
                }
                    .album_info_bottom li{
                        margin: 0;
                        padding: 0;
                        list-style-type : none;
                        display: flex;
                        align-items: center;
                        gap: 0.25rem;
                    }
                    .album_info_bottom li i{
                        font-size: 0.875rem;
                    }
                    .album_info_bottom li .num{                        
                        font-family: var(--foreign_font);                                                
                        font-size:clamp(0.625rem, 0.6250vw, 0.7500rem); /* 10px , 0.6250vw , 12.00px */
                    }

                    .album_info_bottom li .heart_icon{
                        display: none;   
                        cursor: pointer; 
                    }
                    .album_info_bottom li .heart_icon.active{
                        display: flex;
                    }
                    .album_info_bottom li .bi-heart-fill.heart_icon{
                       color: var(--second_color); 
                    }
                    .visit-links li .heart_icon ~ .num{
                        cursor: pointer; 
                    }




/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px){
                    
    ul.album_area > li:hover {
        transform: translateY(-2px);
        -webkit-transform: translateY(-2px);
        box-shadow: 0 17px 25px rgba(0, 0, 0, 0.13);
        transition: all 0.3s ease-out;
    }
    ul.album_area > li:hover .album_info_box{
        padding: clamp(0.625rem, 0.7813vw, 0.9375rem); /* 10px , 0.7813vw , 15px */
        transition: all 0.3s ease-out;
    }

}




@media (max-width: 990px){

    ul.album_area{	
        grid-template-columns: repeat(2 , 1fr);
    }	
		/* 案例展示_列表 */
		ul.album_area > li{
			/* width: 50%;	 */
			/* padding: 0 5px 20px; */
		}
			ul.album_area .title {
				/* margin: 5px 0; */
			}
            /* 案例展示_列表_標題 */
            ul.album_area .title{
                -webkit-line-clamp: 2;	
            }

}


@media (max-width: 640px){

ul.album_area{	
    display: flex;
	flex-direction: column;
	gap: 1.5625rem; /* 25px */
    margin: 0 0; 
}	
		/* 案例展示_列表 */
		ul.album_area > li{
			width: 100%;
            padding: 0;	
			/* padding: 0 5px 20px; */
		}
			ul.album_area .title {
				/* margin: 5px 0; */
			}

    .album_list {
        box-shadow: 1px 1px 15px #00000038;
        padding: 0px 0px 0px;
    }
        .album_img {
            border-radius: 5px 5px 0 0;
        }
        .album_info_box{
            padding: 1.25rem; /* 20px */
        }
}