오시는길

본문 바로가기

Phantom
Design

신규 서비스 오픈 안내 2025년 설날 연휴 운영 안내 웹사이트 정기 점검 일정 공지 고객 만족도 조사 진행중

로그인 회원가입

CONTACT

02-1234-5678 contact@phantomdesign.kr

평일 09:00 - 18:00

점심 12:00 - 13:00

주말/공휴일 휴무

자주묻는질문 질문과답변

페이지 헤더 설정

제목

카테고리

설명

카테고리 기본값 설정

현재 페이지의 배경 이미지와 레이아웃 설정(간격, 정렬, 투명도 등)을
이 카테고리의 기본값으로 지정합니다.
※ 같은 카테고리의 다른 페이지에서 개별 설정하지 않은 항목들이 이 기본값을 상속받습니다.

텍스트 정렬

왼쪽

중앙

오른쪽

헤더 높이

헤더 영역의 최소 높이 (180px ~ 500px)

요소 간격 조정

브레드크럼 ↓

카테고리 ↓

제목 ↓

배경 이미지

📐 권장 크기: 1920x280px (Full HD) 또는 1600x280px

배경 이미지 크기 조정

Cover

꽉 채움 (잘림 가능)

Contain

전체 표시 (여백 가능)

색상 설정

배경색

텍스트색

배경 오버레이 투명도

배경 이미지 위에 어두운 오버레이 투명도 (0: 투명, 100: 불투명)

실시간 미리보기

Home 회사소개 CEO 인사말

회사소개

CEO 인사말

고객을 가장 먼저 생각하는 기업이 되겠습니다

Home 회사소개 오시는 길

회사소개

오시는 길

찾아오시는 길을 안내해드립니다

페이지 설정

오시는길

페이지 제목

서브 타이틀 페이지 상단에 표시되는 설명

상위 메뉴 메뉴 그룹 선택

정렬 순서 작은 숫자가 먼저 표시

페이지 활성화

페이지 내용 (DB) DB에 저장되는 추가 내용 (HTML 가능)

PHP 파일 편집 불가

파일 쓰기 권한이 없습니다. (일반 호스팅에서는 PHP 파일 수정이 제한될 수 있습니다)

파일 경로: /var/www/html/sms/theme/modern/page/company_map.php

PHP 파일 내용

<?php
include_once('../../../common.php');

$page_sql = "SELECT * FROM g5_theme_pages WHERE tp_id = 'company_map' AND tp_use = 1 LIMIT 1";
$page_result = sql_query($page_sql);
$page = sql_fetch_array($page_result);

if (!$page) {
    alert('페이지를 찾을 수 없습니다.', G5_URL);
    exit;
}

$config_sql = "SELECT * FROM g5_theme_config LIMIT 1";
$config_result = sql_query($config_sql);
$theme_config = sql_fetch_array($config_result);

$g5['title'] = $page['tp_title'];
include_once(G5_THEME_PATH.'/head.php');
include_once(G5_THEME_PATH.'/page/page_common.php');
?>

<style>
.page_container {
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 40px;
}

.page_header {
    text-align: center;
    margin-bottom: 60px;
}

.page_header h2 {
    font-size: 48px;
    color: #000;
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.page_header .subtitle {
    font-size: 15px;
    color: #737373;
    font-weight: 400;
    line-height: 1.6;
}

#company_map {
    max-width: 1400px;
    margin: 0 auto;
}

.location_hero {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    padding: 80px 60px;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.location_hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: movePattern 20s linear infinite;
}

@keyframes movePattern {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(40px, 40px);
    }
}

.hero_content {
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.hero_label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero_address {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: addressSlide 1s ease forwards 0.3s;
}

@keyframes addressSlide {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero_contact {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
}

.hero_contact span {
    margin-right: 32px;
}

.map_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 60px;
    position: relative;
}

.map_grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 60%;
    background: linear-gradient(to bottom, transparent, #E0E0E0 20%, #E0E0E0 80%, transparent);
    animation: linePulse 2s ease-in-out infinite;
}

@keyframes linePulse {
    0%, 100% {
        opacity: 0.5;
        height: 60%;
    }
    50% {
        opacity: 1;
        height: 70%;
    }
}

#map {
    width: 100%;
    height: 500px;
    border: 1px solid #E0E0E0;
    transition: all 0.3s;
}

#map:hover {
    border-color: #000;
}

.transport_box {
    background: #FAFAFA;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.transport_box::before {
    content: '→';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 120px;
    font-weight: 700;
    color: rgba(0,0,0,0.02);
    font-family: Arial, sans-serif;
    animation: arrowPulse 3s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: translateX(10px);
    }
}

.transport_items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.transport_line {
    padding: 20px 0;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 0.3s;
    opacity: 0;
    animation: slideInRight 0.5s ease forwards;
}

.transport_line:nth-child(1) { animation-delay: 0.2s; }
.transport_line:nth-child(2) { animation-delay: 0.4s; }
.transport_line:nth-child(3) { animation-delay: 0.6s; }
.transport_line:nth-child(4) { animation-delay: 0.8s; }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.transport_line:last-child {
    border-bottom: none;
}

.transport_line:hover {
    padding-left: 12px;
    background: rgba(0,0,0,0.02);
}

.line_icon {
    width: 48px;
    height: 48px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.3s;
    animation: iconFloat 3s ease-in-out infinite;
}

.transport_line:nth-child(1) .line_icon { animation-delay: 0s; }
.transport_line:nth-child(2) .line_icon { animation-delay: 0.5s; }
.transport_line:nth-child(3) .line_icon { animation-delay: 1s; }
.transport_line:nth-child(4) .line_icon { animation-delay: 1.5s; }

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.transport_line:hover .line_icon {
    animation: none;
    transform: rotate(360deg);
}

.line_text {
    flex: 1;
}

.line_title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #000;
}

.line_desc {
    font-size: 14px;
    color: #737373;
}

.hours_section {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    padding: 60px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    position: relative;
    overflow: hidden;
}

.hours_section::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: shine 8s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.hours_title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.hours_table {
    display: flex;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.hours_item {
    text-align: center;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.hours_item:nth-child(1) { animation-delay: 0.1s; }
.hours_item:nth-child(2) { animation-delay: 0.2s; }
.hours_item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hours_label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hours_value {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 768px) {
    .page_container {
        padding: 40px 20px;
    }

    .page_header h2 {
        font-size: 36px;
    }

    .location_hero {
        padding: 60px 32px;
    }

    .hero_address {
        font-size: 28px;
    }

    .hero_contact {
        font-size: 16px;
    }

    .hero_contact span {
        display: block;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .map_grid {
        grid-template-columns: 1fr;
    }

    #map {
        height: 350px;
    }

    .transport_box {
        padding: 40px 28px;
    }

    .hours_section {
        flex-direction: column;
        gap: 24px;
        padding: 48px 28px;
    }

    .hours_title {
        font-size: 24px;
    }

    .hours_table {
        flex-direction: column;
        gap: 20px;
    }

    .hours_value {
        font-size: 18px;
    }
}
</style>

<div class="page_header">
    <h2><?php echo htmlspecialchars($page['tp_title']); ?></h2>
    <p class="subtitle">방문을 환영합니다. 찾아오시는 길을 안내해드립니다</p>
</div>

<div id="company_map">
        <div class="location_hero">
            <div class="hero_content">
                <div class="hero_label">Location</div>
                <div class="hero_address">
                    <?php echo $theme_config['tc_address'] ?? '서울 구로구 디지털로31길 61'; ?>
                </div>
                <div class="hero_contact">
                    <span><i class="fa fa-phone"></i> <?php echo $theme_config['tc_phone'] ?? '02-123-1234'; ?></span>
                    <span><i class="fa fa-envelope-o"></i> <?php echo $theme_config['tc_email'] ?? 'contact@phantomdesign.kr'; ?></span>
                </div>
            </div>
        </div>

        <div class="map_grid">
            <div id="map"></div>

            <div class="transport_box">
                <ul class="transport_items">
                    <li class="transport_line">
                        <div class="line_icon">
                            <i class="fa fa-subway"></i>
                        </div>
                        <div class="line_text">
                            <div class="line_title">지하철</div>
                            <div class="line_desc">2호선 강남역 3번 출구 (도보 5분)</div>
                        </div>
                    </li>

                    <li class="transport_line">
                        <div class="line_icon">
                            <i class="fa fa-subway"></i>
                        </div>
                        <div class="line_text">
                            <div class="line_title">분당선</div>
                            <div class="line_desc">강남역 7번 출구 (도보 7분)</div>
                        </div>
                    </li>

                    <li class="transport_line">
                        <div class="line_icon">
                            <i class="fa fa-bus"></i>
                        </div>
                        <div class="line_text">
                            <div class="line_title">버스</div>
                            <div class="line_desc">간선 146, 740, 341 / 지선 4419, 6411</div>
                        </div>
                    </li>

                    <li class="transport_line">
                        <div class="line_icon">
                            <i class="fa fa-car"></i>
                        </div>
                        <div class="line_text">
                            <div class="line_title">주차</div>
                            <div class="line_desc">지하주차장 B1~B3 (2시간 무료)</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="hours_section">
            <h3 class="hours_title">운영시간</h3>
            <div class="hours_table">
                <div class="hours_item">
                    <div class="hours_label">평일</div>
                    <div class="hours_value"><?php echo $theme_config['tc_hours_weekday'] ?? '09:00-18:00'; ?></div>
                </div>
                <div class="hours_item">
                    <div class="hours_label">점심</div>
                    <div class="hours_value"><?php echo $theme_config['tc_hours_lunch'] ?? '12:00-13:00'; ?></div>
                </div>
                <div class="hours_item">
                    <div class="hours_label">주말</div>
                    <div class="hours_value"><?php echo $theme_config['tc_hours_weekend'] ?? '휴무'; ?></div>
                </div>
            </div>
        </div>
    </div>

<script>
$(function() {
    var address = '<?php echo $theme_config['tc_address'] ?? '서울 구로구 디지털로31길 61'; ?>';
    var encodedAddress = encodeURIComponent(address);
    var mapIframe = '<iframe src="https://www.google.com/maps?q=' + encodedAddress + '&output=embed" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>';
    $('#map').html(mapIframe);
});
</script>

<?php
include_once(G5_THEME_PATH.'/page/page_footer.php');
include_once(G5_THEME_PATH.'/tail.php');
?>

읽기 전용 - 쓰기 권한이 없어 수정할 수 없습니다.

페이지 데이터 (JSON) 조직도, 연혁 등의 구조화된 데이터를 JSON 형식으로 입력

대표 이미지

대표 이미지 / OG 이미지

권장: 1200x630px / 검색 및 SNS 공유 시 사용

검색 엔진 최적화 (SEO)

메타 설명 (Meta Description)

0 / 160자

검색 결과에 표시되는 설명 (권장: 150-160자)

키워드 쉼표(,)로 구분하여 입력

구글 검색 결과 미리보기

오시는길

sms.phantomdesign.kr › company_map

페이스북 공유 미리보기

이미지 없음

오시는길

찾아오시는 길

sms.phantomdesign.kr

오시는길

방문을 환영합니다. 찾아오시는 길을 안내해드립니다

Location

서울특별시 강남구 테헤란로 123

02-1234-5678 contact@phantomdesign.kr

지하철

2호선 강남역 3번 출구 (도보 5분)
분당선

강남역 7번 출구 (도보 7분)
버스

간선 146, 740, 341 / 지선 4419, 6411
주차

지하주차장 B1~B3 (2시간 무료)

운영시간

평일

평일 09:00 - 18:00

점심

점심 12:00 - 13:00

주말

주말/공휴일 휴무

자주 묻는 질문

로딩 중...