.crossover-page{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 100px;
}
.crossover-page1 {
    padding-bottom: 10px; /* 添加內邊距 */
    margin-bottom: 10px; /* 添加底部間距 */
    margin-top: 52px;
    margin-inline-end: auto;
    margin-inline-start: auto;
    width: 980px;
}

.crossover-page h2 {
    text-align: center;
    margin-bottom: 50px;
}

.crossover-page-content {
    display: flex; /* 使用 flexbox 佈局 */
    flex-direction: row; /* 元素從左到右排列 */
    padding-bottom: 10px; /* 添加內邊距 */
    margin-bottom: 10px; /* 添加底部間距 */
	width: fit-content;
}

.crossover-menu {
    display: flex;
    flex: 0 0 20%; /* 設置寬度為 30% */
    padding-bottom: 10px; /* 添加內邊距 */
    margin-bottom: 10px; /* 添加底部間距 */
    margin-left: auto; /* 將元素靠右擺放 */  
    justify-content: center; /* 水平置中 */
}
.menu_link
{
	padding:5px 20px;
	word-break: keep-all;
}
.crossover-menu ul {
    list-style: none; /* 移除列表項的點 */
    #padding: 10; /* 內邊距 */
    #margin-left: auto; /* 將元素靠右擺放 */
	padding:0px;
}

.crossover-menu li {
    margin-bottom: 20px; /* 添加底部間距 */
	display: flex;
    align-items: center;
    justify-content: center;
}

.crossover-menu li a {
    text-decoration: none; /* 移除底線 */
    color: #333; /* 設置文字顏色 */
}

.crossover-menu li a:hover {
    color: #007BFF; /* 當滑鼠懸停時改變文字顏色 */
}

.crossover-list {
    display: grid; /* 使用 flexbox 佈局 */
    flex-direction: row; /* 元素從左到右排列 */
    flex-wrap: wrap; /* 元素自動換行 */
    justify-content: center; /* 水平置中 */
    flex: 1; /* 佔滿剩餘空間 */
	grid-template-columns: repeat(3, 1fr);
	height: 100%;
}
.crossover-item-h
{
	display:none;
}
.crossover-item {
    width: 300px;
    margin: 10px;
    border: 2px solid #ccc; /* 添加邊框線條 */
    border-radius: 5px; /* 添加圓角 */
    padding: 10px; /* 添加內邊距 */
	transition:all .3s;
}
.crossover-item:hover
{
	transition:all .3s;
	border: 2px solid #46A3FF;
}
.crossover-item:hover > img
{
	transition:all .3s;
	opacity:0.8;
}
.crossover-item h3 {
    text-align: center; /* 文字置中 */
}

.crossover-item img {
    width: 100%;
    height: 300px; /* 保持圖片比例 */
    max-width: 300px; /* 設置圖片最大寬度 */
    object-fit: contain; /* 確保圖片在容器內保持比例 */
    margin-right: 20px; /* 添加右邊距離 */
}

.crossover-buy {
    display: none;
    align-items: center;
    justify-content: center;
}

.crossover-buy input {
    text-decoration: none; /* 移除底線 */
    color: #000; /* 設置文字顏色 */
    border: 2px solid #ccc; /* 添加邊框線條 */
    background-color: #FFF; /* 設置背景顏色 */
    padding: 10px 20px; /* 添加內邊距 */
    border-radius: 5px; /* 添加圓角 */
	cursor:pointer;
	transition: all 0.3s;
}
.crossover-buy input:hover {
	background-color:#46A3FF;
	border: 2px solid #46A3FF;
	color:#fff;
	transition: all 0.25s;
}
.case-item
{
	cursor:pointer;
}
.case_subject_1
{
    #background-color: #FFD1A4;
    #border-radius: 10px;
    padding: 8px;
	font-weight: 600;
	border-bottom: 2px solid;
}
.case_subject_2
{
    #background-color: #CCFF80;
    #border-radius: 10px;
    padding: 8px;
	font-weight: 600;
	border-bottom: 2px solid;
}
@media (max-width:1200px)
{
	.crossover-list 
	{
		display: grid;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		flex: 1;
		grid-template-columns: repeat(2, 1fr);
		height: 100%;
	}
}
@media (max-width:1200px)
{
	.crossover-list 
	{
		display: grid;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		flex: 1;
		grid-template-columns: repeat(2, 1fr);
		height: 100%;
	}
}
@media (max-width:1024px)
{
	.case_subject_1
	{
		#background-color: #FFD1A4;
		#border-radius: 10px;
		font-weight: 600;
		align-items: center;
		display: flex;
		justify-content: center;
		border-bottom: 2px solid;
	}
	.case_subject_2
	{
		#background-color: #CCFF80;
		#border-radius: 10px;
		font-weight: 600;
		align-items: center;
		display: flex;
		justify-content: center;
		border-bottom: 2px solid;
	}
	.crossover
	{
		margin-top:220px;
	}
	.crossover-page-content 
	{
		display: flex;
		flex-direction: column;
		padding-bottom: 10px;
		margin-bottom: 10px;
		width: fit-content;
	}

	.crossover-menu {
		display: none;
		flex: 0 0 20%;
		padding-bottom: 10px;
		margin-bottom: 10px;
		margin-left: auto;
		justify-content: center;
	}
	.m_category
	{
		padding:3px !important;
	}
	.m_category div
	{
		padding:3px !important;
	}
	.crossover-page 
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100px;
		margin-bottom: 100px;
	}
}

@media(max-width:720px)
{
	.crossover-list 
	{
		display: grid;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		flex: 1;
		grid-template-columns: repeat(1, 1fr);
		height: 100%;
	}
}