#pages {
    display: flex; /* 부모 요소에 flexbox 적용 */
}

#pages .col-md-6 {
    width: 50%; /* 각 박스가 부모의 절반 너비를 차지 */
    height: 340px; /* 높이를 340px로 설정하여 정사각형 유지 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 크기 계산 */
    display: flex; /* 내부 텍스트 정렬을 위해 flexbox 사용 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    text-align: center; /* 텍스트 가운데 정렬 */
    font-size: 2rem; /* 폰트 크기 설정 */
    color: #fff; /* 텍스트 색상 설정 */
}

#pages .col-md-6:nth-child(1) {
    background-color: green; /* 첫 번째 박스 배경색 */
}

#pages .col-md-6:nth-child(2) {
    background-color: red; /* 두 번째 박스 배경색 */
}

#pages .col-md-6:hover {
    background-color: rgba(0, 0, 0, 0.6); /* 배경색을 60% 투명으로 변경 */
    border: 10px solid currentColor; /* 현재 색상으로 테두리 추가 */
    cursor: pointer; /* 마우스 손모양으로 변경 */
    filter: invert(1); /* 색상 반전 효과 */
}