/* construction 페이지 메인 영역 스타일 */

/* 텍스트 표시 영역 스타일 */
.building-text-display {
    padding-left: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    font-family: 'DM Sans', 'Pretendard', 'Noto Sans KR', sans-serif;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-in-out;
}

/* 애니메이션 클래스 */
.building-text-display.show {
    opacity: 1;
    transform: translateX(0);
}

.MapImage {
    margin-top: 2%;
    width: 1200px;
    height: 600px;
    background-color: #f1d2b0;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-in-out;
    position: relative; /* 마커의 기준 컨테이너 */
    margin-left: auto;
    margin-right: auto;
}

.MapImage.show {
    opacity: 1;
    transform: translateX(0);
}

.MapImage .map-background {
    width: 1200px;
    height: 600px;
}

/* 공통 마커 스타일 */
.MapImage .marker {
    position: absolute;
    width: 100px;
    height: 60px;
    transform: translate(-50%, -100%); /* 좌표를 마커 하단 중앙으로 맞춤 */
    cursor: pointer;
}

/* 좌표 배치: (600, 230) */
.MapImage .marker.engineering1 {
    left: 600px;
    top: 240px;
}

/* 좌표 배치: (720, 299) */
.MapImage .marker.student-center {
    left: 730px;
    top: 320px;
}

.MapImage .engineeringName {
    position: absolute;
    font-size: 20px;
    font-weight: bolder;
    color: #000000;
    font-family: 'DM Sans', 'Pretendard', 'Noto Sans KR', sans-serif;
    left: 552px;
    top: 250px;
}

.MapImage .student_centerName {
    position: absolute;
    font-size: 20px;
    font-weight: bolder;
    color: #000000;
    font-family: 'DM Sans', 'Pretendard', 'Noto Sans KR', sans-serif;
    left: 700px;
    top: 330px;
}