<!doctype html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
	<title>찾아오시는 길</title>
<body>

<div id="wrapper" layout:fragment="content">

    <!-- ======================== HEADER -->
    <header id="hd" class="sub"></header>

    <!-- ======================== CONTAINER -->
    <div id="container">
        <div id="container_wrapper">

            <!-- ========= SUB VISUAL + BREADCRUMB ========= -->
            <div id="sub_visual">
                <div class="sub-bg bg-location"></div>
                <div class="sub-tit-wrap">
                    <h2 class="sub-tit">찾아오시는길</h2>
                    <p class="sub-desc">항상 고객사와 소통하는 오라인포</p>
                </div>
				
				<div id="sub_breadcrumb">
					<div class="inner">
						<ul class="breadcrumb">
							<li>
								<a href="/" class="bc-home" aria-label="홈으로 이동">
									<img src="/img/sub/ico_home.svg" alt="HOME">
								</a>
							</li>
							<li class="bc-item bc-depth1">
								<button class="bc-btn" type="button" aria-haspopup="listbox" aria-expanded="false">
									<span class="bc-label">회사소개</span>
									<span class="bc-arrow">
										<img src="/img/sub/ico_arrow.svg" alt="arrow">
									</span>
								</button>
								<ul class="bc-dropdown" role="listbox">
									<li class="active"><a href="/company/intro">회사소개</a></li>
									<li><a href="/company/business">사업소개</a></li>
									<li><a href="/company/talent">인재채용</a></li>
									<li><a href="/company/owrainfo">오라인</a></li>
								</ul>
							</li>
							<li class="bc-item bc-depth2">
								<button class="bc-btn" type="button" aria-haspopup="listbox" aria-expanded="false">
									<span class="bc-label">찾아오시는길</span>
									<span class="bc-arrow">
										<img src="/img/sub/ico_arrow.svg" alt="arrow">
									</span>
								</button>
								<ul class="bc-dropdown" role="listbox">
									<li><a href="/company/intro">사업개요</a></li>
									<li><a href="/company/business">경영이념/비전</a></li>
									<li><a href="/company/history">회사 연혁</a></li>
									<li><a href="/company/chart">조직도</a></li>
									<li class="active"><a href="/company/map">찾아오는 길</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
            </div>            
            <!-- ========= SUB VISUAL + BREADCRUMB [e] ========= -->


            <!-- ========= SUB CONTENT [s] ========= -->
            <div class="sub_content">	
				<div class="sub-section">
					<div class="sub-inner">
						<!-- 조직도 타이틀 -->
						<div class="" data-aos="fade-up">
							<h2 class="sub-h2 text-center">
								본사로 <em>오시는 길</em>을 안내합니다.
							</h2>
						</div>
						
						<!-- 본사주소 [s] -->
                        <div class="loc-address" data-aos="fade-up">
                            <h2 class="sub-h2">본사주소</h2>
                            <div class="loc-address-info">
                                <dl>
                                    <div class="addr-row">
                                        <dt>도로명 주소</dt>
                                        <dd>서울시 금천구 가산디지털 1로 83, 10F(가산동, 파트너스 타워)</dd>
                                    </div>
                                    <div class="addr-row">
                                        <dt>구지번 주소</dt>
                                        <dd>서울시 금천구 가산동 345-13 파트너스타워 10층</dd>
                                    </div>
                                </dl>
                            </div>
 
                            <!-- 지도 -->
                            <div class="loc-map-wrap">
								<div id="daumRoughmapContainer1776662318241"  class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%"></div>
							</div>

                        </div>
                        <!-- 본사주소 [e] -->
						

						<!-- 교통 + 연락처 그리드 [s] -->
						<div class="loc-bottom-grid" data-aos="fade-up">
							<!-- 대중교통 안내 [s] -->
							<div class="loc-transport">
								<h2 class="sub-h2">대중교통 안내</h2>

								<!-- 도보 -->
								<div class="transport-card">
									<div class="transport-icon">
										<span class="material-symbols-outlined">directions_walk</span>
										<span class="transport-label">도보</span>
									</div>
									<ul class="transport-routes">
										<li>
											<div class="route-row">
												<span class="subway-badge line1">지하철 1호선</span>
												<p class="route-desc"><strong class="route-highlight">독산역 2번 출구</strong> 하차 → 가산디지털단지역 방향 900m</p>
											</div>
										</li>
										<li>
											<div class="route-row">
												<span class="subway-badge line7">지하철 7호선</span>
												<p class="route-desc"><strong class="route-highlight2">가산디지털단지역 5번 출구</strong> 하차 → 독산역 방향 800m</p>
											</div>
										</li>
									</ul>
								</div>

								<!-- 버스 -->
								<div class="transport-card">
									<div class="transport-icon">
										<span class="material-symbols-outlined">bus_map_pin</span>
										<span class="transport-label">버스</span>
									</div>
									<ul class="transport-routes">
										<li>
											<div class="route-row">
												<span class="subway-badge line1">지하철 1호선</span>
												<p class="route-desc"><strong class="route-highlight">독산역 2번 출구</strong> 하차 → 가산디지털단지역 방향 27번, 75번 이용</p>
											</div>
										</li>
										<li>
											<div class="route-row">
												<span class="subway-badge line7">지하철 7호선</span>
												<p class="route-desc"><strong class="route-highlight">가산디지털단지역 6번 출구</strong> 하차 → 맞은편 독산방향 75번 이용</p>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<!-- 대중교통 안내 [e] -->

							<!-- 대표전화 [s] -->
							<div class="loc-contact">
								<h2 class="sub-h2">대표전화</h2>
								<div class="contact-card">
									<div class="contact-tel-wrap">
										<span class="material-symbols-outlined">call</span>
										<a href="tel:15441680" class="contact-tel-num">1544-1680</a>
									</div>
									<p class="contact-fax">Fax. 02-859-0697</p>
								</div>
							</div>
							<!-- 대표전화 [e] -->
						</div>
						<!-- 교통 + 연락처 그리드 [e] -->
						
												
						
					</div>
				</div>				
			</div>
			
            <!-- ========= SUB CONTENT [e] ========= -->

        </div>
    </div>
</div>

<th:block layout:fragment="scripts">
<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<!--
	2. 설치 스크립트
	* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js" ></script>

<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
  new daum.roughmap.Lander({
    "timestamp": "1776662318241", 
    "key": "mzw6dkwyv7n"
  }).render();
 
</script>
</th:block>	

<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=1b5048f6e460777f6b5737197cb6ca1b"></script>
<script>
    var container = document.getElementById('kakao-map');
    var coords = new kakao.maps.LatLng(37.473192, 126.883639);

    var options = {
        center: coords,
        level: 4
    };

    var map = new kakao.maps.Map(container, options);

    // 마커 생성
    var marker = new kakao.maps.Marker({
        position: coords,
        map: map
    });

    // 반응형 리사이즈 - 핀 중심 유지
    $(window).on('resize', function() {
        var markerPosition = marker.getPosition();
        map.relayout();
        map.setCenter(markerPosition);
    });
</script>