mobipin.noname.company/contact.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융합산업빌딩"
            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 운기빌딩"
            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>