@charset "utf-8";

/* noto-sans-kr-regular - korean */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-regular.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-regular.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-700 - korean */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-700.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-700.woff') format('woff'), /* Modern Browsers */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/assets/fonts/notosanskr/noto-sans-kr-v12-korean-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}


/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
a {
    text-decoration: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*
 * ==============================================================================
 * 1. 기본 설정 (Basic Settings)
 * ==============================================================================
 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background-color: #fff;
}

.nbmaps-container {
    width: 100%; /* 컨테이너 너비 설정 (디자인 파일 기준) */
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 20px;
}

.nbmaps-section {
    padding: 100px 0;
}

.nbmaps-section__heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

/*
 * ==============================================================================
 * 2. Header & GNB (최상단 및 주 메뉴)
 * ==============================================================================
 */

.nbmaps-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: background-color 0.3s ease;
}

/* Console (검은색 배경 상단 메뉴) */
.nbmaps-header__console {
    background-color: rgba(0, 0, 0, 1);
}
.nbmaps-console-menu {
    display: flex;
    align-items: center;
}

.nbmaps-console-menu__list {
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
}
.nbmaps-console-menu__list + .nbmaps-console-menu__list {
    margin-left: auto;
}

.nbmaps-console-menu__item {
    margin-left: 30px;
}
.nbmaps-console-menu__item:first-child {
    margin-left: 0;
}

.nbmaps-console-menu__item a,
.nbmaps-console-menu__item button {
    /*display: block;*/
    border: 0 none;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s;
}
.nbmaps-console-menu__item.admin a {
    color: #fff;
    font-weight: 700;
    line-height: 30px;
    border: 1px solid #fff;
    background-color: transparent;
    padding: 3px 38px 3px 20px;
    border-radius: 32px;
    background-image: url("/assets/images/newDesign/icon__admin--w.svg");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    background-size: 18px 18px;
}
.nbmaps-console-menu__item.data a {
    background-image: url("/assets/images/newDesign/icon__info--w.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px 18px;
    padding-left: 23px;
    font-size: 12px;
    line-height: 18px;
}
.nbmaps-console-menu__item.login a,
.nbmaps-console-menu__item.login button {
    background-image: url("/assets/images/newDesign/icon__login--w.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px 18px;
    padding-right: 23px;
    line-height: 18px;
}
.nbmaps-console-menu__item.logout a,
.nbmaps-console-menu__item.logout button {
    background-image: url("/assets/images/newDesign/icon__logout--w.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px 18px;
    padding-right: 23px;
    line-height: 18px;
}
.nbmaps-console-menu__item.sign a {
    background-image: url("/assets/images/newDesign/icon__user--w.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px 18px;
    padding-right: 23px;
    line-height: 18px;
}

.nbmaps-console-menu__item a:hover,
.nbmaps-console-menu__item button:hover {
    opacity: 1;
}
.nbmaps-console-menu__item.ai a,
.nbmaps-console-menu__item.llm a {
    color: #fff;
    font-weight: 700;
    line-height: 30px;
    border: 1px solid #fff;
    background-color: transparent;
    padding: 3px 38px 3px 20px;
    border-radius: 32px;
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    background-size: 18px 18px;
}
.nbmaps-console-menu__item.ai a:hover,
.nbmaps-console-menu__item.llm a:hover {
    background-color: #fff;
    color: #000001;
}
.nbmaps-console-menu__item.ai a {
    background-image: url("/assets/images/newDesign/icon__ai--w.svg");
}
.nbmaps-console-menu__item.llm a {
    background-image: url("/assets/images/newDesign/icon__llm--w.svg");
}
.nbmaps-console-menu__item.ai a:hover {
    background-image: url("/assets/images/newDesign/icon__ai.svg");
}
.nbmaps-console-menu__item.llm a:hover {
    background-image: url("/assets/images/newDesign/icon__llm.svg");
}

/* GNB (메인 메뉴) */
.nbmaps-gnb {
    height: 100px; /* 요청하신 헤더 높이 100px 적용 */
    transition: background-color 0.3s ease; /* GNB 배경색 전환 효과 유지 */
}

.nbmaps-gnb > .nbmaps-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.nbmaps-gnb__logo a {
    display: block;
    width: 160px;
    height: 64px;
    line-height: 64px; /* 로고 높이에 맞춰 설정 */

    /* 텍스트 숨김 */
    text-indent: -9999px;
    overflow: hidden;

    /* 1. 기본 로고 이미지 (흰색 버전) 적용 */
    background-image: url('/assets/images/newDesign/logo__bmaps--w.svg'); /* 흰색 로고 */
    background-repeat: no-repeat;
    background-size: 160px 64px;
    background-position: center;

    /* 로고 이미지 변경을 위한 transition 추가 (선택 사항) */
    transition: background-image 0.3s ease;
}

/* GNB Hover 시 로고 이미지 (검은색 버전) 적용 */
.nbmaps-header.is-scrolled .nbmaps-gnb__logo a,
.nbmaps-header:hover .nbmaps-gnb__logo a {
    background-image: url('/assets/images/newDesign/logo__bmaps.svg'); /* 검은색 로고 */
}

.nbmaps-gnb__list {
    display: flex;
    gap: 70px; /* 메뉴 항목 간 간격 조정 */
    margin-left: auto;
}

.nbmaps-gnb__item a {
    display: block;
    height: 100px; /* GNB 높이에 맞춰 설정 */
    line-height: 100px; /* 텍스트 수직 중앙 정렬 */
    border-bottom: 4px solid transparent;

    font-size: 22px; /* 요청하신 폰트 사이즈 */
    font-weight: bold; /* 요청하신 굵기 */
    color: #fff; /* 기본 폰트 색상: 흰색 */
    transition: all 0.3s ease;
}

/* ------------------ GNB Hover 상태 (배경색 및 폰트 색상 반전) ------------------ */

/* 1. 헤더 전체 호버 시 (스크롤 상태 등) */
.nbmaps-header.is-scrolled,
.nbmaps-header:hover {
    background-color: #fff; /* 배경 흰색 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.nbmaps-header.is-scrolled .nbmaps-gnb__item a,
.nbmaps-header:hover .nbmaps-gnb__item a {
    color: #000; /* 메뉴 텍스트 검은색으로 변경 */
}

/* 2. 1 Depth 메뉴 개별 호버 시 (하위 메뉴 표시 트리거) */
.nbmaps-gnb__item:hover > a {
    color: #162ba9 !important; /* 메뉴 호버 시 파란색으로 변경 (이미지 디자인 기준) */
    border-bottom-color: #162ba9; /* 아래 파란색 밑줄 추가 */
}
/* ------------------ 2 Depth Menu Container ------------------ */

.nbmaps-gnb-depth2 {
    display: none; /* 초기 숨김 */
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;

    /* 이미지 디자인에 맞춘 레이아웃 설정 */
    background-color: #fff; /* 배경 흰색 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px 0;
    box-sizing: border-box;
}

/* 1 Depth 항목에 호버했을 때 2 Depth 표시 */
.nbmaps-gnb__item:hover .nbmaps-gnb-depth2 {
    display: block; /* 호버 시 펼침 */
}
.nbmaps-gnb-depth2__inner {
    display: flex;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 20px; /* [수정됨] 텍스트 영역과 리스트 영역 사이에 20px 간격 추가 */
}
.nbmaps-gnb-depth2__text {
    width: 450px;
    flex-shrink: 0;
}
.nbmaps-gnb-depth2__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 30px;
}
.nbmaps-gnb-depth2__text p {
    color: #707f96;
    font-size: 22px;
    line-height: 1.5;
}
.nbmaps-gnb-depth2__list {
    /* 텍스트 영역이 있을 때 남은 공간을 차지하도록 flex-grow 유지 */
    flex-grow: 1;
    min-width: 0; /* flex 아이템이 오버플로우 되는 것을 방지 */

    /* [핵심 수정: Flexbox로 변경] */
    display: flex;
    flex-wrap: wrap; /* 공간 부족 시 다음 줄로 이동 */
    gap: 20px; /* 항목 간 간격 */

    margin: 0;
}

/* ------------------ 2 Depth Menu Item (사용자 정의 스타일 반영) ------------------ */
.nbmaps-gnb-depth2__list > li {
    padding: 0;
    margin: 0;
    /* Flex 항목으로 설정 (축소되지 않고 내용 너비를 유지) */
    flex-shrink: 0;
}

.nbmaps-gnb-depth2__list > li > a {
    display: block;
    /* [복구] 단일 행에 맞춰 높이와 패딩 조정 */
    padding: 0 50px;
    height: 70px;
    line-height: 70px; /* 단일 행 높이 복원 */

    background-color: #e0e6ef;
    border-radius: 4px;
    color: #000;
    font-size: 22px;
    font-weight: 700;
    text-align: center;

    transition: background-color 0.2s, color 0.2s;
    border-bottom: 0 none;

    /* [핵심 수정: 줄바꿈 금지 및 너비 자동 설정] */
    white-space: nowrap; /* 줄바꿈 허용 안 함 (한 줄 고정) */
    /* width: max-content; 를 명시하지 않아도 flex-shrink: 0과 white-space: nowrap 때문에 너비가 내용에 맞춰집니다. */
    overflow: hidden;
    text-overflow: clip;
}

.nbmaps-gnb-depth2__list > li > a:hover {
    background-color: #9fadbf; /* 호버 시 배경색 변경 */
    color: #000;
}

/*
 * ==============================================================================
 * 3. Hero Section (첫 번째 섹션: 비디오 배경)
 * ==============================================================================
 */

.nbmaps-section--hero {
    position: relative;
    height: 100vh; /* 높이 설정 (조정 가능) */
    min-height: 600px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nbmaps-hero__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.nbmaps-hero__video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nbmaps-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 어둡게 오버레이 */
}

.nbmaps-hero__content {
    position: absolute;
    top: 150px;
    left: 50%;
    width: 100%;
    padding-top: 200px;
    z-index: 2;
    color: #fff;
    transform: translateX(-50%);
}

.nbmaps-hero__title {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 30px;
}
.nbmaps-hero__text {
    margin-bottom: 25px;
    font-size: 24px;
    line-height: 1.5;
}
.nbmaps-hero__text strong {
    font-weight: 700;
}
.nbmaps-hero__comment {
    padding-left: 26px;
    background-image: url("/assets/images/newDesign/icon__info--w.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px 16px;
    font-size: 16px;
    line-height: 1.5;
}

.nbmaps-hero__search {
    display: flex;
    width: 700px;
    margin-top: 50px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

.nbmaps-hero__search input {
    flex-grow: 1;
    border: none;
    padding: 26px 20px;
    font-size: 22px;
    outline: none;
}

.nbmaps-hero__search button {
    overflow: hidden;
    background-color: #162BA9;
    background-image: url("/assets/images/newDesign/icon__search--w.svg");
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    width: 100px;
    padding: 0 20px;
    color: #fff;
    font-size: 22px;
    text-indent: -9999px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.nbmaps-hero__search button:hover {
    background-color: #0056b3;
}
.nbmaps-hero__manual {
    margin-top: 30px;
    width: 380px;
    height: 80px;
    border: 1px solid #fff;
    border-radius: 5px;
    background-color: transparent;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}
.nbmaps-hero__manual:hover {
    background-color: #fff;
    color: #000;
}

.nbmaps-hero__scroll-down {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60px;
    height: 90px;
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    transform: translateX(-50%); /* 중앙 정렬 유지 */
    z-index: 10;
    animation: bounce 2s infinite
}
.nbmaps-hero__scroll-down span {
    overflow: hidden;
    display: block;
    width: 0;
    height: 0;
    text-indent: -9999px;
}

/* 이미지에 바운스 및 투명도 애니메이션 적용 */
.nbmaps-hero__scroll-down img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 1. 움직임(bounce)과 2. 투명도 변화(opacity-cycle)를 모두 적용 */
    animation: opacity-cycle 1s infinite;
}

/* 첫 번째 이미지 (앞쪽 화살표) */
/* 기본 50% 투명도로 시작 */
.nbmaps-hero__scroll-down img:first-of-type {
    /* delay 없이 시작 */
}

/* 두 번째 이미지 (뒤쪽 화살표) */
/* 20px 아래에 위치하며, -1초 지연으로 시작 투명도가 100%가 되도록 반전 */
.nbmaps-hero__scroll-down img:last-child {
    top: 20px;
    /* 애니메이션 주기의 절반(1s)만큼 지연시켜 시작 상태를 반전 */
    animation-delay: -0.5s;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 투명도 변화 키프레임 (0.5에서 1로 변화) */
@keyframes opacity-cycle {
    /* 시작 및 복귀 시: 50% */
    0%, 20%, 80%, 100% {
        opacity: 0.5;
    }
    /* 바운스 최상단 (40%): 100% */
    40% {
        opacity: 1;
    }
    /* 중간 (60%): 75% */
    60% {
        opacity: 0.75;
    }
}

/*
 * ==============================================================================
 * 4. Tab Menu Section (두 번째 섹션: 분석센터, 정보서비스 등)
 * ==============================================================================
 */

.nbmaps-section--tab-menu {
    padding-top: 160px;
    padding-bottom: 160px;
    background-color: #fdfdfe;
}

/* 메인 탭 */
.nbmaps-main-tabs {
    margin-bottom: 50px;
}

.nbmaps-main-tabs__list {
    display: flex;
    /*border-bottom: 2px solid #ddd;*/
}

.nbmaps-main-tabs__item {
    margin-right: 120px;
}
.nbmaps-main-tabs__item:last-child {
    margin-right: 0;
}

.nbmaps-main-tabs__item a {
    display: block;
    padding-bottom: 20px;
    background-color: transparent;
    border-bottom: 5px solid transparent;
    color: #9fadbf;
    font-size: 22px;
    font-weight: 700;
    transition: border-color 0.3s, color 0.3s;
}
.nbmaps-main-tabs__item a:hover {
    color: #000001;
}
.nbmaps-main-tabs__item.nbmaps-is-active a {
    color: #000001;
    border-bottom-color: #000001; /* 활성 탭 하단 선 */
}

/* 탭 컨텐츠 */
.nbmaps-tab-content__pane {
    display: none;
}

.nbmaps-tab-content__pane.nbmaps-is-active {
    display: block;
}

/* 분석센터 스타일 */
.nbmaps-analysis-center {
    display: flex;
    /*background-color: #fff;*/
    /*border: 1px solid #ddd;*/
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);*/
}

.nbmaps-analysis-center__main-area {
    position: relative;
    width: 30%;
    min-height: 565px;
    padding: 100px 50px;
    background-color: #162ba9;
    color: #fff;
}
.nbmaps-analysis-center__bg-img {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.3;
}
.nbmaps-analysis-center__bg-img.service01 {
    background-image: url(/assets/images/newDesign/icon__service01--w.svg);
}
.nbmaps-analysis-center__bg-img.service02 {
    background-image: url(/assets/images/newDesign/icon__service02--w.svg);
}
.nbmaps-analysis-center__bg-img.service03 {
    background-image: url(/assets/images/newDesign/icon__service03--w.svg);
}
.nbmaps-analysis-center__bg-img.service04 {
    background-image: url(/assets/images/newDesign/icon__service05--w.svg);
}
.nbmaps-analysis-center__title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;
}
.nbmaps-analysis-center__main-area p {
    font-size: 22px;
    line-height: 1.5;
}

.nbmaps-analysis-center__image {
    position: absolute;
    right: 50px;
    bottom: 40px;
    width: 52px;
    height: 52px;
    background-image: url(/assets/images/newDesign/icon__right--w.svg);
    background-size: 52px 52px;
    background-position: center center;
    background-repeat: no-repeat;
}
/* 실제 아이콘이 들어갈 경우 이 스타일은 수정됩니다 */

.nbmaps-analysis-center__link {
    color: #fff;
    font-weight: 700;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.nbmaps-analysis-center__link:hover {
    opacity: 1;
}

.nbmaps-analysis-center__link i {
    margin-left: 5px;
}

.nbmaps-analysis-center__sub-menu {
    width: 70%;
    padding: 70px 80px;
}

.nbmaps-sub-menu__list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.nbmaps-sub-menu__list li {
    width: 50%; /* 2열 배치 */
    padding: 20px;
}

.nbmaps-sub-menu__list li a {
    color: #495468;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    transition: color 0.3s;
}

.nbmaps-sub-menu__list li a:hover {
    color: #162ba9;
}


/*
 * ==============================================================================
 * 5. Service Info Section (세 번째 섹션)
 * ==============================================================================
 */

.nbmaps-section--service-info {
    padding-top: 160px;
    padding-bottom: 160px;
    background-color: #f3f5f9;
}
.nbmaps-section--service-info .nbmaps-section__heading {
    margin-bottom: 60px;
}

/* 서비스 사용 방법 (How To) */
.nbmaps-how-to {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    gap: 30px;
}

.nbmaps-how-to__step {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 50px;
    background-color: #e3e8f1;
}

.nbmaps-how-to__icon-box {
    width: 150px;
    height: 150px;
    margin-right: 30px;
    background-color: #029bf4;
    background-position: center center;
    background-size: 70px 70px;
    background-repeat: no-repeat;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nbmaps-how-to__icon-box.step1 {
    background-image: url(/assets/images/newDesign/icon__step1.svg);
}
.nbmaps-how-to__icon-box.step2 {
    background-image: url(/assets/images/newDesign/icon__step2.svg);
}
.nbmaps-how-to__icon-box.step3 {
    background-image: url(/assets/images/newDesign/icon__step3.svg);
}
.nbmaps-how-to__text-box {
    flex: 1;
}
.nbmaps-how-to__text-box h3 {
    margin-bottom: 20px;
    color: #029bf4;
    font-size: 22px;
    font-weight: 700;
}
.nbmaps-how-to__step-text {
    color: #495468;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

/* 서비스 현황 및 홍보 영상 */
.nbmaps-service-status {
    display: flex;
}

.nbmaps-service-status__left {
    /*width: 50%;*/
    flex: 1;
    padding-right: 80px;
}

.nbmaps-service-status__right {
    width: 720px;
}

.nbmaps-status-table {
    width: 100%;
    border-top: 2px solid #333;
}

.nbmaps-status-table th,
.nbmaps-status-table td {
    padding: 15px 0;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.nbmaps-status-table th {
    width: 260px;
    color: #495468;
    font-size: 22px;
    font-weight: 700;
    padding: 20px;
}

.nbmaps-status-table td {
    color: #333;
    text-align: right;
    padding-right: 20px;
}

.nbmaps-promotion-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 57%;
}
.nbmaps-promotion-video #embedLayerVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
 * ==============================================================================
 * 6. Board Section (네 번째 섹션: 공지사항 & Q&A)
 * ==============================================================================
 */

.nbmaps-section--board-list {
    background-color: #fdfdfe;
    padding-top: 160px;
    padding-bottom: 160px;
}

.nbmaps-notice-area,
.nbmaps-qa-area {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

.nbmaps-notice-area {
    margin-bottom: 160px;
}
.nbmaps-notice-area__header,
.nbmaps-qa-area__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 섹션 제목과 더보기 링크 */
.nbmaps-notice-area h2.nbmaps-section__heading,
.nbmaps-qa-area h2.nbmaps-section__heading {
    margin-bottom: 60px;
    color: #000001;
    font-size: 60px;
    font-weight: 700;
}

.nbmaps-more-link {
    display: block;
    position: relative;
    padding-right: 36px;
    color: #000001;
    font-size: 22px;
    font-weight: 700;
    background-image: url(/assets/images/newDesign/icon__add.svg);
    background-size: 24px 24px;
    background-position: right center;
    background-repeat: no-repeat;
}

.nbmaps-more-link:hover {
    color: #007bff;
}

.nbmaps-notice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.nbmaps-notice-list__item {
    flex: 1 1 0%;
    min-width: 0; /* flex 아이템이 오버플로우 되는 것을 방지 */
}
.nbmaps-notice-list__item a {
    display: flex; /* 내부 컨텐츠를 세로로 정렬하기 위해 Flexbox 사용 */
    flex-direction: column;
    position: relative;
    height: 100%; /* 부모 article과 동일한 높이 유지 */
    padding: 50px 40px 90px;
    background-color: #f3f5f9;
    color: #000;
    /*word-wrap: break-word;*/
    word-break: keep-all;
    text-decoration: none;
}
.nbmaps-notice-list__item a:hover {
    color: #0064af;
}
.nbmaps-notice__title {
    margin-bottom: 40px;
    color: #000001;
    font-size: 30px;
    font-weight: 700;
    /* 텍스트 2줄 이상이면 ... 처리 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄까지만 표시 */
    -webkit-box-orient: vertical;
}

.nbmaps-notice__text {
    font-size: 22px;
    color: #000001;
    line-height: 1.5;
    flex-grow: 1; /* 나머지 공간을 차지하여 텍스트 위치를 아래로 밀어줌 */
    /* 텍스트 2줄 이상이면 ... 처리 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄까지만 표시 (3줄에서 2줄로 수정됨) */
    -webkit-box-orient: vertical;
}
.nbmaps-notice__icon {
    display: block;
    position: absolute;
    right: 40px;
    bottom: 30px;
    width: 32px;
    height: 32px;
    background-image: url(/assets/images/newDesign/icon__right.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px 32px;
}

.nbmaps-qa-list {
    clear: both;
    border-top: 3px solid #000001;
}
.nbmaps-qa-list__item {
    display: flex;
    border-bottom: 1px solid #b7bdc9;
}

.nbmaps-qa-list__item:last-child {
    border-bottom: none;
}
.nbmaps-qa-list__item a {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 50px 150px 50px 0;
    color: #000001;
}
.nbmaps-qa-list__item a:hover {
    color: #0064af;
}
.nbmaps-notice-list__date,
.nbmaps-qa-list__date {
    color: #9fadbf;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}
.nbmaps-notice-list__date {
    margin-bottom: 30px;
}
.nbmaps-qa-list__date {
    margin-bottom: 20px;
}
.nbmaps-qa__title {
    margin-bottom: 16px;
    font-size: 30px;
    font-weight: 700;
    /* 한 줄 텍스트 오버플로우 적용 */
    white-space: nowrap; /* 줄바꿈 방지 */
    overflow: hidden; /* 영역을 벗어난 텍스트 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트를 ...으로 표시 */
}
.nbmaps-qa__text {
    font-size: 22px;
    /* 한 줄 텍스트 오버플로우 적용 */
    white-space: nowrap; /* 줄바꿈 방지 */
    overflow: hidden; /* 영역을 벗어난 텍스트 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트를 ...으로 표시 */
}
.nbmaps-qa__icon {
    display: block;
    position: absolute;
    right: 40px;
    top: 50%;
    width: 32px;
    height: 32px;
    background-image: url(/assets/images/newDesign/icon__right.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px 32px;
    transform: translateY(-50%);
}

/*
 * ==============================================================================
 * 7. Footer
 * ==============================================================================
 */

.nbmaps-footer {
    background-color: #000001;
    color: #fff;
    padding: 50px 0;
}
.nbmaps-footer .nbmaps-container {
    position: relative;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 20px;
}
.nbmaps-footer__logo {
    width: 240px;
    margin-bottom: 40px;
}
.nbmaps-footer__logo img {
    width: 100%;
}
.nbmaps-container p {
    font-size: 16px;
    line-height: 1.5;
}
.opendate {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
    opacity: 0.5;
}

/* Clearfix for float layout */
.nbmaps-container:after,
.nbmaps-service-status:after {
    content: "";
    display: block;
    clear: both;
}

/*
 * ==============================================================================
 * 8. Media Queries (반응형 구간)
 * ==============================================================================
 */

@media (max-width: 1680px) {
    .nbmaps-hero__content {
        top: 50%;
        padding-top: 0;
        transform: translate(-50%, -50%);
    }
}

/* ----------------------------------------------------------- */
/* 태블릿 및 작은 데스크톱 (Tablet & Small Desktop: Max Width 1200px) */
/* ----------------------------------------------------------- */
@media (max-width: 1200px) {
    .nbmaps-container {
        width: 100%;
        padding: 0 30px; /* 컨테이너 너비를 100%로 하고 좌우 패딩을 늘립니다. */
    }

    /* GNB */
    .nbmaps-gnb__item {
        margin-left: 30px;
    }

    /* Hero Section */
    .nbmaps-hero__search {
        width: 80%;
    }

    /* Analysis Tab Content */
    .nbmaps-analysis-center__sub-menu {
        padding: 30px;
    }

    /* Service Info Section */
    .nbmaps-service-status__left {
        padding-right: 20px;
    }
    .nbmaps-service-status__right {
        padding-left: 20px;
    }
}

/* ----------------------------------------------------------- */
/* 모바일 (Mobile: Max Width 768px) */
/* ----------------------------------------------------------- */
@media (max-width: 768px) {
    .nbmaps-section {
        padding: 60px 0; /* 섹션 상하 패딩 감소 */
    }

    .nbmaps-section__heading {
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* --- Header & GNB (모바일에서는 메뉴 숨김 처리 및 햄버거 메뉴 구조로 변경 필요) --- */
    /* 현재는 레이아웃만 조정합니다. 실제 동작은 JS가 필요합니다. */
    .nbmaps-header {
        position: relative; /* 모바일에서는 fixed 해제 */
    }
    .nbmaps-header__console {
        display: none; /* 최상단 콘솔 숨김 */
    }
    .nbmaps-gnb {
        height: 60px;
        background-color: #007bff; /* 모바일에서는 상시 배경색 유지 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .nbmaps-gnb:hover {
        background-color: #007bff;
    }
    .nbmaps-gnb__list {
        display: none; /* 메뉴는 숨기고 햄버거 버튼이 대신해야 합니다. */
    }
    .nbmaps-gnb__logo a {
        color: #fff;
        line-height: 60px;
    }


    /* --- Hero Section --- */
    .nbmaps-section--hero {
        height: 80vh; /* 수정: 모바일에서는 뷰포트의 80%만 차지하도록 변경 */
        min-height: 450px;
    }

    .nbmaps-hero__title {
        font-size: 32px;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .nbmaps-hero__search {
        width: 100%;
        margin-bottom: 30px;
    }

    .nbmaps-hero__search input {
        padding: 10px 15px;
        font-size: 14px;
    }

    .nbmaps-hero__scroll-down {
        bottom: -100px;
    }


    /* --- Tab Menu Section --- */
    .nbmaps-main-tabs__list {
        display: grid; /* 탭을 2x2 그리드로 배치 */
        grid-template-columns: repeat(2, 1fr);
        border-bottom: none;
        gap: 2px;
    }

    .nbmaps-main-tabs__item a {
        padding: 12px 10px;
        font-size: 16px;
        text-align: center;
    }

    .nbmaps-main-tabs__item.nbmaps-is-active a {
        border-bottom: none;
    }

    /* 분석센터 (탭 컨텐츠) - 1단 레이아웃 */
    .nbmaps-analysis-center {
        flex-direction: column;
    }

    .nbmaps-analysis-center__main-area {
        display: none;
        width: 100%;
        padding: 30px;
    }

    .nbmaps-analysis-center__sub-menu {
        width: 100%;
        padding: 20px;
    }

    .nbmaps-sub-menu__list {
        flex-direction: column; /* 서브 메뉴도 1열로 변경 */
    }

    .nbmaps-sub-menu__list li {
        width: 100%;
        padding: 10px 0;
        padding-left: 0 !important; /* 태블릿에서 적용된 패딩 제거 */
        border-bottom: 1px dashed #eee !important; /* 모든 요소에 선 추가 */
    }


    /* --- Service Info Section --- */
    .nbmaps-how-to {
        flex-direction: column;
        border-bottom: none;
        margin-bottom: 40px;
    }

    .nbmaps-how-to__step {
        width: 100%;
        margin-bottom: 30px;
    }

    .nbmaps-service-status {
        flex-direction: column;
    }

    .nbmaps-service-status__left,
    .nbmaps-service-status__right {
        width: 100%;
        padding: 0;
    }

    .nbmaps-service-status__right {
        margin-top: 40px;
    }

    .nbmaps-promotion-video {
        height: 200px;
    }


    /* --- Board Section --- */
    .nbmaps-notice-area,
    .nbmaps-qa-area {
        width: 100%;
        float: none;
        padding: 0;
    }

    .nbmaps-qa-area {
        margin-top: 40px;
    }

    .nbmaps-notice-list__date,
    .nbmaps-qa-list__date {
        font-size: 12px;
    }

    .nbmaps-notice-list__item a,
    .nbmaps-qa-list__item a {
        font-size: 15px;
    }

    /* Footer */
    .nbmaps-footer {
        padding: 20px 0;
    }
}