zenn
239f61c506
- ESG 푸터에서 위로 스크롤하면 문서 영역이 먼저 복귀하도록 처리 - 섹션 전환 중 문서 내부 스크롤을 막아 상단 잘림 방지 - 기술 역량 이미지의 상단 여백과 가용 높이를 본문 기준으로 정렬 - 이미지 진입 애니메이션을 고려해 텍스트 겹침과 화면 이탈 방지 - 기술 역량 프로젝트 순서·설명 및 개별 이미지 배치 설정 정리 - 기술 역량 데이터에 맞춰 검색용 정적 HTML 동기화 - 지도 검색용 도로명 주소와 층·호수 안내를 분리해 건물 위치 핀 표시 - 지도 기본 확대 수준을 16으로 설정하고 한국어 표시 적용 - 회사 소개·조직도와 개인정보 동의 거부 안내 문구 정리 검증: - JavaScript 구문 검사 및 git diff --check 통과 - ESG 세 문서의 푸터 복귀·내부 스크롤·키보드 이동 확인 - 기술 역량 29개 슬라이드의 데스크톱 이미지 정렬 및 모바일 이동 확인 - 본사·지사 지도 위치 핀, 상세 주소, 외부 지도 링크 확인
164 lines
6.7 KiB
HTML
164 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="모비핀테크놀러지 프로젝트 문의" />
|
||
<title>Contact · MOBIPINTECH</title>
|
||
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
||
<link rel="icon" href="assets/images/mobipin-logo.png" type="image/png" />
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css" />
|
||
<link rel="stylesheet" href="css/styles.css" />
|
||
</head>
|
||
<body class="contact-body">
|
||
<header class="site-header" data-header>
|
||
<a class="brand" href="index.html" aria-label="모비핀테크놀러지 홈">
|
||
<img class="brand-logo" src="assets/images/mobipin-logo.png" alt="모비핀테크놀러지" width="4399" height="1069" />
|
||
</a>
|
||
<nav class="desktop-nav" aria-label="주요 메뉴">
|
||
<a href="about.html">회사소개</a>
|
||
<a href="capabilities.html">기술 역량</a>
|
||
<a href="esg.html">ESG</a>
|
||
<a href="contact.html" aria-current="page">문의하기</a>
|
||
</nav>
|
||
<button class="nav-toggle" type="button" aria-label="메뉴 열기" data-menu-toggle>
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</header>
|
||
|
||
<nav class="mobile-menu" aria-label="모바일 메뉴" data-mobile-menu>
|
||
<a href="about.html">회사소개</a>
|
||
<a href="capabilities.html">기술 역량</a>
|
||
<a href="esg.html">ESG</a>
|
||
<a href="contact.html" aria-current="page">문의하기</a>
|
||
</nav>
|
||
|
||
<main class="contact-page">
|
||
<section class="contact-hero">
|
||
<p class="eyebrow">Contact</p>
|
||
<h1>문의하기</h1>
|
||
<p>
|
||
전장 소프트웨어, 내비/HMI, AI·IoT 플랫폼, 서비스 구축에 대한 문의를 남겨주세요.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="contact-layout">
|
||
<div class="office-list">
|
||
<article class="office-location">
|
||
<div>
|
||
<span>Head Office</span>
|
||
<h2>대구 본사</h2>
|
||
<p>대구광역시 북구 경대로17길 47, 8층 803호<br />(복현동, IT융합산업빌딩)</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="office-map-button"
|
||
data-map-title="대구 본사"
|
||
data-map-address="대구광역시 북구 경대로17길 47 IT융합산업빌딩 8층 803호"
|
||
data-map-query="대구광역시 북구 경대로17길 47"
|
||
aria-label="대구 본사 지도 보기"
|
||
title="지도 보기"
|
||
>
|
||
<img src="assets/icons/location_on.svg" alt="" />
|
||
</button>
|
||
</article>
|
||
<article class="office-location">
|
||
<div>
|
||
<span>Seoul Office</span>
|
||
<h2>서울 지사</h2>
|
||
<p>서울특별시 강남구 논현로 416<br />운기빌딩 6층</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="office-map-button"
|
||
data-map-title="서울 지사"
|
||
data-map-address="서울특별시 강남구 논현로 416 운기빌딩 6층"
|
||
data-map-query="서울특별시 강남구 논현로 416"
|
||
aria-label="서울 지사 지도 보기"
|
||
title="지도 보기"
|
||
>
|
||
<img src="assets/icons/location_on.svg" alt="" />
|
||
</button>
|
||
</article>
|
||
<!-- <article>
|
||
<span>Office Hour</span>
|
||
<h2>평일 09:00 - 18:00</h2>
|
||
<p>대표번호 053-214-0592</p>
|
||
</article> -->
|
||
</div>
|
||
|
||
<form class="contact-form" data-contact-form enctype="multipart/form-data">
|
||
<label>
|
||
<span>이름</span>
|
||
<input type="text" name="name" autocomplete="name" required />
|
||
</label>
|
||
<label>
|
||
<span>회사명</span>
|
||
<input type="text" name="company" autocomplete="organization" required />
|
||
</label>
|
||
<label>
|
||
<span>이메일</span>
|
||
<input type="email" name="email" autocomplete="email" required />
|
||
</label>
|
||
<label>
|
||
<span>연락처</span>
|
||
<input type="tel" name="phone" autocomplete="tel" required />
|
||
</label>
|
||
<label class="form-wide">
|
||
<span>문의 분야</span>
|
||
<select name="category" required>
|
||
<option value="">선택해주세요</option>
|
||
<option value="automotive">Automotive · 전장</option>
|
||
<option value="robotics">Robotics · 로봇</option>
|
||
<option value="solution">Solution · 솔루션</option>
|
||
<option value="si">SI · 웹/앱 개발</option>
|
||
<option value="partnership">제휴 및 협업 문의</option>
|
||
<option value="general">기타 문의</option>
|
||
</select>
|
||
</label>
|
||
<label class="form-wide">
|
||
<span>문의 내용</span>
|
||
<textarea name="message" rows="4" required></textarea>
|
||
</label>
|
||
<label class="form-wide">
|
||
<span>파일 첨부 (최대 3개, 전체 100MB 이하)</span>
|
||
<input type="file" name="attachments" multiple data-contact-files />
|
||
</label>
|
||
<div class="form-wide consent-row">
|
||
<label class="consent-label">
|
||
<input type="checkbox" name="privacyConsent" required data-privacy-consent />
|
||
<span>개인정보처리방침을 확인하였으며 이에 동의합니다.</span>
|
||
</label>
|
||
<button type="button" class="privacy-link" data-site-modal="privacy">처리방침 보기</button>
|
||
</div>
|
||
<button class="button button-primary form-wide" type="submit" disabled data-contact-submit>문의 전송</button>
|
||
<p class="form-note form-wide" data-form-note role="status" hidden></p>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="contact-submit-overlay" data-contact-progress role="status" aria-live="polite" tabindex="-1" hidden>
|
||
<div class="contact-submit-status">
|
||
<strong data-contact-progress-title>문의 전송 중</strong>
|
||
<div class="contact-progress" role="progressbar" aria-label="문의 전송 진행률" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-contact-progressbar>
|
||
<span data-contact-progress-fill></span>
|
||
</div>
|
||
<span data-contact-progress-label>0%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="site-footer">
|
||
<div>
|
||
<strong>(주)모비핀테크놀러지</strong>
|
||
<span class="footer-copyright">Copyright 2015 – 2026 | Mobipin Technology | All Rights Reserved</span>
|
||
</div>
|
||
<nav class="footer-links" aria-label="사이트 정책">
|
||
<button type="button" data-site-modal="privacy"><strong>개인정보 처리방침</strong></button>
|
||
<button type="button" data-site-modal="sitemap">사이트맵</button>
|
||
</nav>
|
||
</footer>
|
||
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|