img[location=banner]
{
	
	width: 1920px !important;
	height: 400px !important;
	
}

div[class=medical-departments-area]
{
	
	display: grid; 
	padding: 0px;
	grid-template-columns: repeat(5, 1fr); /*change 6, 1fr*/
	/*gap: 20px;*/
	
}

.quickKey
{
	
	margin: 2px 2px 0px 0px;
	position: relative;
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	/*height: 200px;
	border-radius: 20px;*/
	white-space: pre-line;
	background-blend-mode: multiply;
	background-size: cover;
    background-position: center;
	cursor: pointer;
	overflow: hidden;

}

.quickKey:hover
{
	
	width: 400px;
	
}

.quickKey:hover h2
{
	
	font-size: 35px;
	
}

h2[name=title]
{
	
	display: flex;
    align-items: center;
    justify-content: center;
	margin-left: 5%;
	font-weight: bold;
	color: white !important;
	text-shadow: 3px 3px 1px #000;
	
}

div[name=notice]{

    background-image: url('../myImg/quickKey/rule.jpg');
 
}

/*檢前須知*/
/*灰階圖片放在 ::before*/
/*div[name=notice]::before {
	
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../myImg/quickKey/rule.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
	
}*/

/*彩色遮罩放在 ::after*/
/*div[name=notice]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(113, 92, 122, 0.5);
    pointer-events: none;
    z-index: 1;
}*/

/*讓內部文字在遮罩上 */
/*div[name=notice] > * {
    position: relative;
    z-index: 2;
}*/

div[name=evaluate]{

    background-image: url('../myImg/quickKey/risk.jpg');
	
}

h2[use=evaluate]
{
	
	font-size: 26px;
	
}

/*個人化風險評估*/
/*灰階圖片放在 ::before*/
/*div[name=evaluate]::before {
	
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../myImg/quickKey/risk.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
	
}*/

/* 彩色遮罩放在 ::after */
/*div[name=evaluate]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(105, 1, 11, 0.5);
    pointer-events: none;
    z-index: 1;
}*/

/* 讓內部文字在遮罩上面 */
/*div[name=evaluate] > * {
    position: relative;
    z-index: 2;
}*/

div[name=combination]{

    background-image: url('../myImg/quickKey/combination.jpg');

}

/*健檢組套*/
/* 灰階圖片放在 ::before */
/*div[name=combination]::before {
	
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../myImg/quickKey/combination.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
	
}*/

/* 彩色遮罩放在 ::after */
/*div[name=combination]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(24, 83, 115, 0.5);
    pointer-events: none;
    z-index: 1;
}*/

/* 讓內部文字在遮罩上面 */
/*div[name=combination] > * {
    position: relative;
    z-index: 2;
}*/

div[name=shop]{

    background-image: url('../myImg/quickKey/shop.jpg');

}

/*線上預約*/
/* 灰階圖片放在 ::before */
/*div[name=shop]::before {
	
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../myImg/quickKey/shop.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
	
}*/

/* 彩色遮罩放在 ::after */
/*div[name=shop]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(115, 81, 9, 0.5); 
    pointer-events: none;
    z-index: 1;
}*/

/* 讓內部文字在遮罩上面 */
/*div[name=shop] > * {
    position: relative;
    z-index: 2;
}*/

div[name=line]{

    background-image: url('../myImg/quickKey/line.jpg');

}

/*LINE*/
/* 灰階圖片放在 ::before */
/*div[name=line]::before {
	
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../myImg/quickKey/line.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
	
}*/

/* 彩色遮罩放在 ::after */
/*div[name=line]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(49, 89, 53, 0.5); 
    pointer-events: none;
    z-index: 1;
}*/

/* 讓內部文字在遮罩上面 */
/*div[name=line] > * {
    position: relative;
    z-index: 2;
}*/

/*會員專區*/
/* 灰階圖片放在 ::before */
div[name=member]::before {
	
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../myImg/quickKey/member.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 0;
	
}

/* 彩色遮罩放在 ::after */
div[name=member]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(89, 89, 89, 0.5); /* 半透明紅色遮罩 */
    pointer-events: none;
    z-index: 1;
}

/* 讓內部文字在遮罩上面 */
div[name=member] > * {
    position: relative;
    z-index: 2;
}

div[class=quickKey] h3
{
	
	 margin-left: 20px;
	 color: white;
	 font-weight: bold;
	 text-align: center;
	 text-shadow: 3px 3px 1px #000;
	
}

space
{
	
	margin-right: 5px;
	
}

@media screen and (max-width: 768px) {

	
	div[class=medical-departments-area]
	{
	
		display: grid; 
		grid-template-columns: repeat(2, 1fr);
		/*gap: 20px;*/
	
	}

	.quickKey
	{
		
		height: 150px;
		
	}
	
    .quickKey:hover {
        width: auto; /* 手機無 hover 效果，可移除固定寬度 */
    }

    .quickKey:hover h2 {
        font-size: 24px; /* 防止字太大溢出 */
    }

    h2[name="title"] {
        margin-left: 0;
        font-size: 16px;
        text-align: center;
    }
	
	div[class=quickKey] h3
	{
	
		margin-left: 0px;
		font-size: 14px;
		
	}

}