/* 전체 섹션을 감싸는 directions-section에 대한 스타일 */
#directions-section {
    background-color: #f8f8f8; /* 연한 배경색 */
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
    margin-bottom: 3rem;
    min-height: 20rem;
    min-width: 20rem;
}

    /* 회사정보, 찾아오시는 길 타이틀 */
    #directions-section h1, #directions-section h2 {
        font-family: 'Noto Sans', sans-serif;
        font-weight: bold;
        font-size: 3rem;
        color: #333;
        margin-bottom: 3rem;
    }

    /* 각 정보 블록 (회사 정보, 찾아오는 길) */
    #directions-section .col-md-6 {
        margin-bottom: 1.5rem;
    }

    /* 텍스트 내용 스타일 */
    #directions-section p {
        font-family: 'Noto Sans', sans-serif;
        color: #555;
        font-size: 0.9rem;
        line-height: 2.0;
    }

        /* 강조된 텍스트 (주소, 전화 등) */
        #directions-section p strong {
            color: #111;
            font-weight: bold;
        }

    /* 아이콘 및 찾아오는 길 섹션 내 타이틀 스타일 */
    #directions-section .col-md-6 h2 {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    /* 지도 영역 */
    #directions-section #map {
        width: 100%;
        height: 400px;
        margin-top: 20px;
        border-radius: 8px;
        border: 1px solid #ddd;
    }




/* 전체 리스트 스타일 */
.office-list ul {
    list-style-type: none;
    padding-left: 20px;
    position: relative;
}

    /* 리스트 항목 사이의 연결선 스타일 */
    .office-list ul::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 6px;
        height: calc(100% - 20px);
        width: 2px;
        background-color: #ccc;
    }

/* 개별 리스트 항목 스타일 */
.office-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
    color: #ccc;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    cursor: pointer;
}

    /* 리스트 항목 앞에 점 스타일 */
    .office-list li::before {
        content: "";
        position: absolute;
        left: -15px;
        top: 0;
        height: 8px;
        width: 8px;
        background-color: #ccc;
        border-radius: 50%;
    }

    /* 활성 항목 스타일 (본사) */
    .office-list li.active {
        color: #000;
        font-weight: bold;
    }

        .office-list li.active::before {
            background-color: red;
        }

/* 구글 맵의 스타일 */
#map {
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 5rem;
}
@media (max-width: 991.98px) {
    /* 전체 섹션을 감싸는 directions-section에 대한 스타일 */
    #directions-section {
        background-color: #bfbfbf; /* 연한 배경색 */
        padding: 0.3rem;
        border-radius: 1rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
        margin-bottom: 3rem;
        margin-top: 0rem;
        min-height: 20rem;
        min-width: 20rem;
    }

        /* 회사정보, 찾아오시는 길 타이틀 */
        #directions-section h1, #directions-section h2 {
            margin-bottom: 1rem;
            font-size: 2rem;
        }

        /* 각 정보 블록 (회사 정보, 찾아오는 길) */
        #directions-section .col-md-6 {
            margin-bottom: 1.0rem;
        }

        /* 텍스트 내용 스타일 */
        #directions-section p {
            font-family: 'Noto Sans', sans-serif;
            color: #555;
            font-size: 0.8rem;
            line-height: 2.0;
        }

            /* 강조된 텍스트 (주소, 전화 등) */
            #directions-section p strong {
                color: #111;
                font-weight: bold;
            }

        /* 아이콘 및 찾아오는 길 섹션 내 타이틀 스타일 */
        #directions-section .col-md-6 h2 {
            margin-top: 0;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        /* 지도 영역 */
        #directions-section #map {
            width: 100%;
            height: 400px;
            margin-top: 20px;
            border-radius: 8px;
            border: 1px solid #ddd;
        }




    /* 전체 리스트 스타일 */
    .office-list ul {
        list-style-type: none;
        padding-left: 1rem;
        margin-top: -3rem;
        position: relative;
    }

        /* 리스트 항목 사이의 연결선 스타일 */
        .office-list ul::before {
            content: "";
            position: absolute;
            top: 10px;
            left: 6px;
            height: calc(100% - 20px);
            width: 2px;
            background-color: #ccc;
        }

    /* 개별 리스트 항목 스타일 */
    .office-list li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 20px;
        color: #ccc;
        font-family: 'Noto Sans', sans-serif;
        font-size: 16px;
        cursor: pointer;
    }

        /* 리스트 항목 앞에 점 스타일 */
        .office-list li::before {
            content: "";
            position: absolute;
            left: -15px;
            top: 0;
            height: 8px;
            width: 8px;
            background-color: #ccc;
            border-radius: 50%;
        }

        /* 활성 항목 스타일 (본사) */
        .office-list li.active {
            color: #000;
            font-weight: bold;
        }

            .office-list li.active::before {
                background-color: red;
            }

    /* 구글 맵의 스타일 */
    #map {
        border-radius: 8px;
        border: 1px solid #ddd;
        margin-bottom: 5rem;
    }

}