body {
    background: #0e1320;
}

.Top_Img {
    border-bottom: 1px solid #2b3f68;
    margin-bottom: 6.8vw; /* 상단 여백 */
}
.Top_Img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.Security {
    padding-bottom: 40px; /* 하단 여백 */
}

.map_Title {
    text-align: center;
    margin-bottom: 4.3vw; /* 타이틀과 내용 사이의 여백 */
}
.Title_Text {
    color: #ffffff; /* 타이틀 텍스트 색상 */
    text-transform: uppercase; /* 타이틀 텍스트를 모두 대문자로 변환 */
    letter-spacing: 2px; /* 타이틀 텍스트의 글자 간격 */
    text-align: center; /* 타이틀 텍스트 정렬 */
    margin-bottom: 0px; /* 타이틀 텍스트 하단 여백 */
    font-size: 3.8vw; /* 타이틀 텍스트 폰트 크기 */
    font-weight: bold; /* 타이틀 텍스트 폰트 두께 */
}

.map_List_Text {
    border-bottom: 1px solid #1e2a42; /* 보안 섹션 하단 테두리 색상 */
    text-align: center; /* 텍스트를 수평으로 가운데 정렬 */
    margin: 0px 30vw; /* 수평 여백 */
}
.Title_Label {
    font-size: 1vw; /* 타이틀 라벨 폰트 크기 */
    color: #888; /* 타이틀 라벨 텍스트 색상 */
    text-transform: uppercase; /* 타이틀 라벨 텍스트를 모두 대문자로 변환 */
    letter-spacing: 2px; /* 타이틀 라벨 글자 간격 */
    text-align: center; /* 타이틀 라벨 텍스트 정렬 */
    margin-top: 10px; /* 타이틀 라벨 상단 여백 */
    font-weight: bold; /* 타이틀 라벨 폰트 두께 */
    border-top: 3px solid #0055ff; /* 타이틀 라벨 상단 테두리 색상 */
    padding: 0px 10px; /* 타이틀 라벨 패딩 */
}
.Title_Label span {
    color: #fff; /* 타이틀 라벨 내의 강조 텍스트 색상 */
}

.Map_List_1 {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: center;    /* 가로(축 기준) 가운데 정렬 */
    color: #fff;
}
.Map_List_1 img {
    width: 90vw;
    height: auto;
}
.Map_Text {
    display: flex;
    align-items: center; /* 세로(축 기준) 가운데 정렬 */
    justify-content: center; /* 가로(축 기준) 가운데 정렬 */
    text-align: center; /* 텍스트 가운데 정렬 */
    font-size: 1vw; /* 리스트 번호 폰트 크기 */
    border-bottom: 1px solid #2f4164; /* 리스트 하단 테두리 색상 */
    padding: 1vw 2vw; /* 리스트 내부 여백 */
}
.List_Number {
    display: inline-block; /* 리스트 번호를 인라인 블록으로 설정 */
    font-size: 2vw; /* 리스트 번호 폰트 크기 */
    font-weight: bold; /* 리스트 번호 폰트 두께 */
    font-family: "Roboto Mono", monospace; /* Roboto Mono 적용 */
    font-weight: 600; /* 적당히 볼드한 느낌 */
    font-variant-numeric: tabular-nums; /* 숫자 간격을 반듯하게 고정 */
}
.List_Number_span_1 {
    color: #888;
}
.List_Number_span_2 {
    font-weight: bold; 
    font-size: 1.7vw;
}










.Map_List_2 {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    color: #fff;
    margin: 5vw 5vw 0 5vw; /* 좌우 여백 */
}
.Map_List_2 img {
    width: 35vw;
    height: auto;
}

.Map_List_2 > div:first-child {
    display: flex;
    justify-content: space-between;
}

.List_Img_2 {
    
}



.Button_Container {
    display: flex;
    justify-content: center; /* 버튼 가로(축 기준) 가운데 정렬 */
    margin-top: 2vw; /* 버튼 상단 여백 */
}
.map_Button {
    width: 10vw;
    display: inline-block;
    background-color: #0055ff; /* 보안 버튼 배경 색상 */
    color: #ffffff; /* 보안 버튼 텍스트 색상 */
    padding: 0.5vw 20px; /* 보안 버튼 패딩 */
    border-radius: 5px; /* 보안 버튼 테두리 반경 */
    cursor: pointer; /* 보안 버튼 호버 시 커서를 포인터로 변경 */
    transition: background-color 0.3s ease; /* 보안 버튼 배경 색상 전환 효과 */
    margin: 1vw 0vw; /* 보안 버튼 외부 여백 */
    font-size: 0.85vw;
    text-align: center; /* 보안 버튼 텍스트 가운데 정렬 */
}
.map_Button:hover {
    background-color: #0041cc; /* 보안 버튼 호버 배경 색상 */
}
