/*  以下是自行增加 20240708 */
.list-group {
            display: none; /* 默認隱藏 */
        }

        /* 電腦瀏覽時顯示的 list-group */
        @media (min-width: 991px) {
            .desktop .list-group {
                display: flex;
                /*flex-direction: column;*/ /* 直向排列 */
				flex-direction: row; /* 橫向排列 */
            }
			/*
            .desktop .list-group-item {
                text-align: center;
                font-size: 1.5rem;
                padding: 10px;
                text-decoration: none;
                border: 1px solid #ddd;
                margin: 0;
            }
			*/
			.desktop .list-group-item {
                flex: 1;
                text-align: center;
                font-size: 1.0rem;
                padding: 10px;
                text-decoration: none;
                border: 1px solid #ddd;
                margin: 0;
				background-color:#888;
				color:#fff;
            }
			.desktop .list-group-item:hover {
				background-color: #DD678C;
			}
            .desktop .list-group-item:nth-child(2),
            .desktop .list-group-item:nth-child(3) {
                border-left: none; /* 取消左邊框 */
                border-top: 1px solid #ddd; /* 增加上邊框 */
            }
			
        }

        /* 手機瀏覽時顯示的 list-group */
        @media (max-width: 990px) {
            .mobile .list-group {
                display: flex;
                flex-direction: row; /* 手機屏幕橫向排列 */
				
            }
            .mobile .list-group-item {
                flex: 1;
                text-align: center;
                font-size: 1.0rem;
                padding: 10px;
                text-decoration: none;
                border: 1px solid #ddd;
                margin: 0;
				background-color:#888;
				color:#fff;
            }
            .mobile .list-group-item:nth-child(2),
            .mobile .list-group-item:nth-child(3) {
                border-left: none; /* 取消左邊框 */
                border-top: 1px solid #ddd; /* 增加上邊框 */
            }
        }
		
    /* 模態視窗的基本樣式 */
        .modalX {
            display: none; /* 隱藏模態視窗 */
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4); /* 黑色背景透明 */
            padding-top: 60px;
        }
		
		@media (max-width: 990px) {
			.modalX {
				padding-top: 120px;
			}
		}

        .modal-content {
            background-color: #fefefe;
            margin: 2% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 96%;
            max-width: 720px;
            text-align: center;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }



/* 模態視窗的基本樣式 */
.modalY {
    display: none; /* 隱藏模態視窗 */
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* 黑色背景透明 */
    align-items: center;
    justify-content: center;
}

/* 模態內容的基本樣式 */
.modal-contentY {
    background-color: #333;
	color:#fff;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 640px;
    text-align: center;
    position: relative;
	border-radius: 15px; /* 添加圆角 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}


#myTable{
	border-top: 0px;
	border-left: 0px;
}

#myTable td{
	border-bottom: 0px;
	border-right: 0px;
}

/* 購物車小圖示 */
.position-relative {
    position: relative;
}
.position-absolute {
    position: absolute;
}