@charset "utf-8";
/*模態視窗*/
/* 模態視窗的背景 */
.co-modal {
	display: none;/* 預設隱藏 */
	position: fixed; /*固定在視窗上*/
	z-index: 1080; /*確保它在最上層 */
	left: 0;
	top: 0; 
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
	backdrop-filter: blur(5px); /* 使用模糊效果，讓背景更顯眼，此行可選 */
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
}

/* 模態視窗的內容，用來置中圖片 */
.co-modal-content {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
}

/* 標頭區域 */
.co-modal-header {
	background-color: #43484D;
	display: flex;
	justify-content: flex-end;
}
/* 關閉按鈕的樣式 */
.close-botan {
	color: #fff;
	font-size: 2rem;
	text-align: end;
	cursor: pointer;
	padding-right:1rem;

}
.close-botan:hover,
.close-botan:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	opacity:0.75;
}

/* 圖片本身的樣式 */
.co-modal-content img{
	width: auto;
	height: auto;
	max-width: 100vw;
	max-height: 92vh;
	object-fit: contain;
}