PageSourceSearch

https://taeilsolution.com/products/products01.php

html taeilsolution.com collected 2026-10-02 01:45:10 UTC 47,424 bytes, 852 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ko">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>실내건축공사 - 주식회사 태일솔루션</title>
7    
7<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
7
8    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Montserrat:wght@400;600;700;800;900&display=swap" rel="stylesheet">
9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
10    
10<script src="https://cdn.tailwindcss.com"></script>
10
11    <link rel="stylesheet" href="../assets/css/common.css">
12    <style>
13        :root { 
14            --max-width: 1200px;
15            --primary: #4B429A;
16            --accent: #FF6B6B;
17        }
18
19        /* ============ SUB TITLE SECTION ============ */
20        .sub-visual {
21            position: relative; height: 350px; background-image: url('../img/about/ceo_industry.png');
22            background-size: cover; background-position: center bottom;
23            display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 80px;
24        }
25        .sub-visual::before {
26            content: ''; position: absolute; inset: 0;
27            background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%);
28        }
29        .sub-visual-content { position: relative; z-index: 1; text-align: center; }
30        .sub-title { font-size: 64px; font-weight: 900; line-height: 1.1; margin-bottom: 15px; color: #fff; }
31        .sub-desc { font-size: 20px; opacity: 0.9; font-weight: 400; color: #fff; }
32
33        .breadcrumb { padding: 20px 0; border-bottom: 1px solid #eee; margin-bottom: 80px; }
34        .breadcrumb-inner { display: flex; gap: 15px; font-size: 14px; color: #888; align-items: center; }
35        .breadcrumb-inner a { color: #888; text-decoration: none; transition: 0.3s; }
36        .breadcrumb-inner i { font-size: 10px; }
37        .breadcrumb-inner .current { color: var(--primary); font-weight: 700; }
38
39        /* ============ PRODUCT SECTIONS ============ */
40        .section-tag { color: var(--primary); font-weight: 900; font-size: 14px; margin-bottom: 15px; display: block; text-transform: uppercase; letter-spacing: 2px; }
41        .section-title { font-size: 44px; font-weight: 900; color: #111; line-height: 1.2; margin-bottom: 30px; }
42        .section-desc { font-size: 18px; color: #666; line-height: 1.8; word-break: keep-all; }
43
44        .biz-card { 
45            background: #fff; border-radius: 30px; overflow: hidden; 
46            box-shadow: 0 10px 40px rgba(0,0,0,0.05); transition: 0.4s; height: 100%;
47            border: 1px solid #f1f3f6;
48        }
49        .biz-card:hover { transform: translateY(-15px); box-shadow: 0 30px 60px rgba(75, 66, 154, 0.1); }
50        .biz-img { width: 100%; height: 240px; object-fit: cover; }
51        .biz-body { padding: 40px; }
52        .biz-label { font-size: 13px; font-weight: 800; color: var(--primary); background: #f4f3ff; padding: 5px 15px; border-radius: 20px; margin-bottom: 20px; display: inline-block; }
53        .biz-name { font-size: 24px; font-weight: 900; color: #111; margin-bottom: 15px; }
54        .biz-text { font-size: 15px; color: #777; line-height: 1.6; }
55
56        .strength-item { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 40px; }
57        .strength-icon { width: 60px; height: 60px; background: #fff; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary); box-shadow: 0 10px 20px rgba(0,0,0,0.05); flex-shrink: 0; }
58        .strength-info h5 { font-size: 20px; font-weight: 800; color: #111; margin-bottom: 10px; }
59        .strength-info p { font-size: 15px; color: #666; line-height: 1.6; }
60
61        @media (max-width: 768px) {
62            .sub-title { font-size: 40px; }
63            .section-title { font-size: 32px; }
64        }
65    </style>
66</head>
67<body>
68
69<style>
70/* ============================================================
71   2단 헤더 (PC 전용) - header.php  (2026-09-11 전환, 이전본: header_20260911_v1.php)
72   모바일(1024px 이하)은 기존 1단 헤더 동작 그대로 유지
73   ============================================================ */
74/* ------------------------------------------------------------
75   세로 스크롤바 자리 항상 확보
76   페이지 로드 직후에는 콘텐츠가 짧아 스크롤바가 없다가, 이미지·본문이
77   채워지면서 스크롤바가 생긴다. 이때 뷰포트 폭이 약 17px 줄어들어
78   가운데 정렬된 헤더·본문이 8px 왼쪽으로 이동 → "메뉴가 오른쪽으로
79   갔다가 되돌아오는" 것처럼 보인다. 스크롤바 자리를 미리 잡아 방지한다.
80   ------------------------------------------------------------ */
81html { overflow-y: scroll; }
82
83#header.header-2row { height: auto; justify-content: flex-start; }
84
85/* --- 1단 : 인증 유틸 바 --- */
86.top-util-bar {
87    background: linear-gradient(90deg, #4B429A 0%, #6257c0 100%);
88    border-bottom: 1px solid rgba(255,255,255,0.15);
89}
90.top-util-inner {
91    position: relative;
92    width: 100%; max-width: 1540px; margin: 0 auto; padding: 0 50px;
93    height: 94px; display: flex; align-items: center; justify-content: center;
94}
95/* 슬로건 + 인증로고를 한 덩어리로 묶어 화면 가로 중앙에 배치 */
96.util-center { display: flex; align-items: center; gap: 90px; }
97.util-slogan { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; text-align: center; }
98.slogan-sub { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: -0.3px; line-height: 1; }
99.slogan-main {
100    display: inline-block; align-self: center;
101    background: none; border: none; border-radius: 0; padding: 0;
102    font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.5px; line-height: 1.2;
103}
104
105/* 인증 로고 : 기존 26px -> 46px 로 확대 */
106.header-2row .cert-badges { display: flex; align-items: center; justify-content: center; gap: 26px; margin-left: 0; }
107.header-2row .cert-item {
108    display: flex; flex-direction: column; align-items: center; gap: 7px;
109    min-width: 56px;
110}
111.header-2row .cert-badge {
112    height: 46px; width: auto; display: block;
113    background: #fff; border-radius: 50%; padding: 4px;
114    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
115    transition: transform 0.25s;
116}
117.header-2row .cert-item:hover .cert-badge { transform: translateY(-3px); }
118.header-2row .cert-item span {
119    font-size: 11px; font-weight: 700; color: #fff; letter-spacing: -0.5px;
120    line-height: 1; white-space: nowrap;
121}
122
123.util-sns {
124    position: absolute; right: 50px; top: 50%; transform: translateY(-50%);
125    display: flex; align-items: center; flex-shrink: 0;
126}
127.util-sns .sns-blog {
128    display: inline-flex; align-items: center; gap: 7px;
129    height: 34px; padding: 0 14px; border-radius: 8px;
130    background: #03C75A; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -0.3px;
131    text-decoration: none; transition: filter 0.25s, transform 0.25s;
132}
133.util-sns .sns-blog i { font-size: 14px; }
134.util-sns .sns-blog:hover { filter: brightness(1.08); transform: translateY(-2px); }
135
136/* --- 2단 : 로고 + GNB + 고객센터 --- */
137/* GNB 첫 메뉴를 슬로건 시작 위치에 맞추기 위해 좌측 정렬 기준으로 변경 */
138.header-2row .header-inner { height: 86px; flex: 0 0 auto; padding: 0 50px; justify-content: flex-start; }
139.header-2row .pc-nav { flex: 0 0 auto; }
140.header-2row .header-etc { margin-left: auto; }
141.header-2row .logo-area { gap: 0; }
142.header-2row .logo img { height: 44px; width: 246px; } /* 52px의 85% / 폭 명시: 이미지 로드 전 레이아웃 흔들림 방지 (원본 341x61) */
143.header-2row .gnb-item > a { height: 86px; padding: 0 42px; }
144
145/* GNB 메뉴 사이 구분선 (참고 디자인) */
146.header-2row .gnb-item + .gnb-item > a::before {
147    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
148    width: 1px; height: 14px; background: #ddd;
149}
150
151@media (max-width: 1440px) {
152    .top-util-inner { padding: 0 34px; }
153    .header-2row .header-inner { padding: 0 34px; }
154    .util-sns { right: 34px; }
155    .util-center { gap: 60px; }
156    .header-2row .cert-badges { gap: 18px; }
157    .header-2row .gnb-item > a { padding: 0 30px; font-size: 16px; }
158}
159@media (max-width: 1240px) {
160    .slogan-sub { display: none; }
161    .slogan-main { font-size: 16px; }
162    .util-center { gap: 36px; }
163    .header-2row .cert-badge { height: 40px; }
164    .header-2row .gnb-item > a { padding: 0 22px; font-size: 15px; }
165    .util-sns .sns-blog { height: 30px; padding: 0 10px; font-size: 12px; }
166}
167
168/* --- 모바일 GNB 인증 로고 (PC와 동일한 5종) --- */
169.m-cert-badges { display: flex; flex-wrap: wrap; gap: 14px 12px; }
170.m-cert-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 52px; }
171.m-cert-item img { height: 42px; width: auto; display: block; }
172.m-cert-item span {
173    font-size: 11px; font-weight: 800; color: #2b2b2b; letter-spacing: -0.5px;
174    line-height: 1; text-align: center; white-space: nowrap;
175}
176
177/* 모바일 드로어 : 내용이 길어져도 하단까지 볼 수 있도록 스크롤 허용 */
178.mobile-gnb-new { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 100px 28px 40px; }
179.mobile-gnb-new .m-nav { margin-bottom: 30px; }
180.mobile-gnb-new .m-cs { padding-top: 26px; flex-shrink: 0; }
181.mobile-gnb-new .m-cs .mb-6 { margin-bottom: 20px; }
182.mobile-gnb-new .m-cs-num { font-size: 28px; }
183
184/* 모바일 GNB 하단 SNS : 네이버 블로그 버튼 */
185.m-sns { margin-top: 20px; }
186.m-sns .m-sns-blog {
187    display: inline-flex; align-items: center; gap: 7px;
188    height: 34px; padding: 0 16px; border-radius: 8px;
189    background: #03C75A; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -0.3px;
190    text-decoration: none; transition: filter 0.25s;
191}
192.m-sns .m-sns-blog i { font-size: 14px; }
193.m-sns .m-sns-blog:hover { color: #fff; filter: brightness(1.08); }
194
195/* ------------------------------------------------------------
196   서브페이지 상단 여백 보정
197   각 서브페이지가 .sub-visual { margin-top: 80px } 을 하드코딩하고 있어
198   2단 헤더(유틸바 94+1 + 내비바 86 + 헤더 보더 1 = 182px) 높이에 맞춰 덮어쓴다.
199   서브페이지 파일은 수정하지 않는다. (모바일은 헤더 80px 이므로 보정 불필요)
200   ------------------------------------------------------------ */
201@media (min-width: 1025px) {
202    .sub-visual { margin-top: 182px !important; }
203}
204
205/* 모바일 : 기존 헤더와 동일하게 유지 (유틸 바 숨김) */
206@media (max-width: 1024px) {
207    .top-util-bar { display: none; }
208    #header.header-2row { height: 80px; justify-content: center; }
209    .header-2row .header-inner { height: 100%; flex: 1; justify-content: space-between; }
210    .header-2row .logo img { height: 36px; width: 201px; }
211}
212@media (max-width: 768px) {
213    #header.header-2row { height: 72px; }
214    .header-2row .logo img { height: 36px; width: 201px; }
215}
216</style>
217
218<!-- GNB OVERLAY -->
219<div class="gnb-overlay" id="overlay"></div>
220
221<!-- MOBILE GNB (기존과 동일) -->
222<aside id="mobile-gnb" class="mobile-gnb-new">
223    <button class="mobile-close" id="mobile-close-btn"><i class="fas fa-times"></i></button>
224    <nav class="m-nav">
225                                <div class="m-gnb-item">
226                <a href="javascript:void(0)">회사소개 <i class="fas fa-chevron-down"></i></a>
227                                <div class="m-sub-nav">
228                                                                    <a href="../about/about.php">회사개요</a>
229                                                                    <a href="../about/license.php">인증현황</a>
230                                                                    <a href="../about/history.php">회사연혁</a>
231                                                                    <a href="../about/map.php">사업장위치</a>
232                                    </div>
233                            </div>
234                        <div class="m-gnb-item">
235                <a href="javascript:void(0)">사업영역 <i class="fas fa-chevron-down"></i></a>
236                                <div class="m-sub-nav">
237                                                                    <a href="../products/products01.php">실내건축공사</a>
238                                                                    <a href="../products/products02.php">정보통신</a>
239                                                                    <a href="../products/products03.php">공공기관 물품구매/판촉물</a>
240                                                                    <a href="../products/products04.php">수행내역</a>
241                                    </div>
242                            </div>
243                        <div class="m-gnb-item">
244                <a href="javascript:void(0)">공공기관 우선구매 <i class="fas fa-chevron-down"></i></a>
245                                <div class="m-sub-nav">
246                                                                    <a href="../public/public01.php">공공기관 우선구매 제도</a>
247                                                                    <a href="../public/public02.php">주요 고객사</a>
248                                    </div>
249                            </div>
250                        <div class="m-gnb-item">
251                <a href="javascript:void(0)">Our Story <i class="fas fa-chevron-down"></i></a>
252                                <div class="m-sub-nav">
253                                                                    <a href="../social/social04.php">알림마당</a>
254                                    </div>
255                            </div>
256                        <div class="m-gnb-item">
257                <a href="javascript:void(0)">Contact Us <i class="fas fa-chevron-down"></i></a>
258                                <div class="m-sub-nav">
259                                                                    <a href="#" class="inquiry-trigger">상담문의</a>
260                                    </div>
261                            </div>
262                        </nav>
263    <div class="m-cs">
264        <div class="mb-6">
265            <h4 style="margin-bottom: 12px; font-size: 14px; color: #999; font-weight: 700;">공공구매 우선구매기업</h4>
266            <!-- PC 유틸바와 동일한 인증 목록/순서 사용 (사회적기업 우선, 라벨 정정) -->
267            <div class="m-cert-badges">
268                                <div class="m-cert-item">
269                    <img src="../img/l_icon05.png" alt="사회적기업 인증">
270                    <span>사회적기업</span>
271                </div>
272                                <div class="m-cert-item">
273                    <img src="../img/icon002.png" alt="여성기업 인증">
274                    <span>여성기업</span>
275                </div>
276                                <div class="m-cert-item">
277                    <img src="../img/icon003.png" alt="중소기업 인증">
278                    <span>중소기업</span>
279                </div>
280                                <div class="m-cert-item">
281                    <img src="../img/icon004.png" alt="신지식인 인증">
282                    <span>신지식인</span>
283                </div>
284                                <div class="m-cert-item">
285                    <img src="../img/icon005.png" alt="ISO45001 인증">
286                    <span>ISO45001</span>
287                </div>
288                            </div>
289        </div>
290        <h4>고객센터</h4>
291        <span class="m-cs-num">1833-6459</span>
292        <!-- PC 유틸바와 동일하게 네이버 블로그만 노출 -->
293        <div class="m-sns">
294            <a href="https://blog.naver.com/taeilsolution" class="m-sns-blog" target="_blank" rel="noopener noreferrer" title="네이버 블로그">
295                <i class="fas fa-blog"></i> BLOG
296            </a>
297        </div>
298    </div>
299</aside>
300
301<!-- HEADER (2단 구성) -->
302<header id="header" class="header-2row">
303
304    <!-- 1단 : 인증 유틸 바 -->
305    <div class="top-util-bar">
306        <div class="top-util-inner">
307            <div class="util-center">
308                <div class="util-slogan">
309                    <span class="slogan-sub">사회적기업 - 주식회사 태일솔루션</span>
310                    <span class="slogan-main">공공구매 우선구매대상기업</span>
311                </div>
312
313                <div class="cert-badges">
314                                        <div class="cert-item">
315                        <img src="../img/l_icon05.png" alt="사회적기업 인증" class="cert-badge">
316                        <span>사회적기업</span>
317                    </div>
318                                        <div class="cert-item">
319                        <img src="../img/icon002.png" alt="여성기업 인증" class="cert-badge">
320                        <span>여성기업</span>
321                    </div>
322                                        <div class="cert-item">
323                        <img src="../img/icon003.png" alt="중소기업 인증" class="cert-badge">
324                        <span>중소기업</span>
325                    </div>
326                                        <div class="cert-item">
327                        <img src="../img/icon004.png" alt="신지식인 인증" class="cert-badge">
328                        <span>신지식인</span>
329                    </div>
330                                        <div class="cert-item">
331                        <img src="../img/icon005.png" alt="ISO45001 인증" class="cert-badge">
332                        <span>ISO45001</span>
333                    </div>
334                                    </div>
335            </div>
336
337            <div class="util-sns">
338                <a href="https://blog.naver.com/taeilsolution" class="sns-blog" target="_blank" rel="noopener noreferrer" title="네이버 블로그">
339                    <i class="fas fa-blog"></i> BLOG
340                </a>
341            </div>
342        </div>
343    </div>
344
345    <!-- 2단 : 로고 + GNB + 고객센터 -->
346    <div class="header-inner">
347        <div class="logo-area">
348            <a href="../index.php" class="logo">
349                <img src="../img/logo.png" alt="태일솔루션">
350            </a>
351        </div>
352
353        <nav class="pc-nav" id="pc-nav">
354                                            <div class="gnb-item">
355                    <a href="#">회사소개</a>
356                                        <div class="sub-nav">
357                        <div class="sub-nav-inner flex flex-col items-center">
358                                                                                            <a href="../about/about.php">회사개요</a>
359                                                                                            <a href="../about/license.php">인증현황</a>
360                                                                                            <a href="../about/history.php">회사연혁</a>
361                                                                                            <a href="../about/map.php">사업장위치</a>
362                                                    </div>
363                    </div>
364                                    </div>
365                                <div class="gnb-item">
366                    <a href="#">사업영역</a>
367                                        <div class="sub-nav">
368                        <div class="sub-nav-inner flex flex-col items-center">
369                                                                                            <a href="../products/products01.php">실내건축공사</a>
370                                                                                            <a href="../products/products02.php">정보통신</a>
371                                                                                            <a href="../products/products03.php">공공기관 물품구매/판촉물</a>
372                                                                                            <a href="../products/products04.php">수행내역</a>
373                                                    </div>
374                    </div>
375                                    </div>
376                                <div class="gnb-item">
377                    <a href="#">공공기관 우선구매</a>
378                                        <div class="sub-nav">
379                        <div class="sub-nav-inner flex flex-col items-center">
380                                                                                            <a href="../public/public01.php">공공기관 우선구매 제도</a>
381                                                                                            <a href="../public/public02.php">주요 고객사</a>
382                                                    </div>
383                    </div>
384                                    </div>
385                                <div class="gnb-item">
386                    <a href="#">Our Story</a>
387                                        <div class="sub-nav">
388                        <div class="sub-nav-inner flex flex-col items-center">
389                                                                                            <a href="../social/social04.php">알림마당</a>
390                                                    </div>
391                    </div>
392                                    </div>
393                                <div class="gnb-item">
394                    <a href="#">Contact Us</a>
395                                        <div class="sub-nav">
396                        <div class="sub-nav-inner flex flex-col items-center">
397                                                                                            <a href="#" class="inquiry-trigger">상담문의</a>
398                                                    </div>
399                    </div>
400                                    </div>
401                                    </nav>
402
403        <div class="header-etc">
404            <div class="cs-info header-info-pc">
405                <p class="cs-info-label">고객센터</p>
406                <p class="cs-info-num">1833-6459</p>
407            </div>
408            <button class="hamburger" id="menu-btn">
409                <i class="fas fa-bars"></i>
410            </button>
411        </div>
412    </div>
413
414    <div class="header-bg"></div>
415</header>
416
417<script>
418/* GNB 첫 메뉴(회사소개)를 상단 슬로건 시작 위치에 맞추고,
419   밀려난 만큼을 메뉴 사이 여백으로 분배한다. (PC 전용) */
420(function () {
421    var MIN_GAP_TO_CS = 40;   // 고객센터 영역과 최소 간격
422    var MAX_EXTRA_GAP = 70;   // 메뉴 사이 추가 여백 상한
423    var EXTRA_SHIFT   = 20;   // 슬로건 기준에서 추가로 우측 이동하는 값
424
425    function alignGnbToSlogan() {
426        var nav = document.getElementById('pc-nav');
427        var slogan = document.querySelector('.slogan-main');
428        var etc = document.querySelector('.header-2row .header-etc');
429        if (!nav || !slogan || !etc) return;
430
431        nav.style.paddingLeft = '';
432        nav.style.gap = '';
433
434        if (window.innerWidth <= 1024) return;
435
436        var firstLink = nav.querySelector('.gnb-item > a');
437        if (!firstLink) return;
438
439        var linkPad = parseFloat(window.getComputedStyle(firstLink).paddingLeft) || 0;
440        var shift = slogan.getBoundingClientRect().left
441                  - (nav.getBoundingClientRect().left + linkPad)
442                  + EXTRA_SHIFT;
443        if (shift < 0) shift = 0;
444        nav.style.paddingLeft = shift + 'px';
445
446        var items = nav.querySelectorAll('.gnb-item');
447        if (items.length > 1) {
448            var room = etc.getBoundingClientRect().left
449                     - (nav.getBoundingClientRect().left + nav.offsetWidth)
450                     - MIN_GAP_TO_CS;
451            var gap = room > 0 ? room / (items.length - 1) : 0;
452            if (gap > MAX_EXTRA_GAP) gap = MAX_EXTRA_GAP;
453            nav.style.gap = Math.max(0, gap) + 'px';
454        }
455    }
456
457    window.addEventListener('load', alignGnbToSlogan);
458    window.addEventListener('resize', alignGnbToSlogan);
459    /* 웹폰트가 늦게 적용되면 메뉴 폭이 변해 위치가 틀어지므로 폰트 로드 후 재정렬 */
460    if (document.fonts && document.fonts.ready) {
461        document.fonts.ready.then(alignGnbToSlogan);
462    }
463    /* 헤더 마크업은 이 스크립트보다 위에서 이미 파싱되므로 여기서 즉시 1차 정렬한다.
464       DOMContentLoaded 를 기다리면 '정렬 전' 메뉴(로고에 붙은 상태)가 먼저 그려졌다가
465       뒤늦게 제자리로 이동해 메뉴가 튀어 보인다. */
466    alignGnbToSlogan();
467    document.addEventListener('DOMContentLoaded', alignGnbToSlogan);
468})();
469</script>
469
470
471<!-- SUB VISUAL -->
472<section class="sub-visual">
473    <div class="container-custom sub-visual-content">
474        <h2 class="sub-title">실내건축공사</h2>
475        <p class="sub-desc">공간의 가치를 디자인하고, 비즈니스의 품격을 완성합니다.</p>
476    </div>
477</section>
478
479<!-- BREADCRUMB -->
480<div class="breadcrumb">
481    <div class="container-custom">
482        <div class="breadcrumb-inner">
483            <a href="../index_main.php">Home</a>
484            <i class="fas fa-chevron-right"></i>
485            <span>사업영역</span>
486            <i class="fas fa-chevron-right"></i>
487            <span class="current">실내건축공사</span>
488        </div>
489    </div>
490</div>
491
492<!-- INTRODUCTION -->
493<section class="pt-12 pb-24">
494    <div class="container-custom">
495        <div class="flex flex-col lg:flex-row gap-20 items-center">
496            <div class="lg:w-1/2">
497                <span class="section-tag">SPATIAL INNOVATION</span>
498                <h3 class="section-title">단순한 공간을 넘어<br><span class="text-indigo-700">고객의 꿈이 실현되는</span><br>더 높은 차원의 품질 관리</h3>
499                <p class="section-desc mb-10">
500                    (주)태일 솔루션은 1999년 설립 이래 실내건축 전문 중소기업으로 성장해 왔습니다. 
501                    여성기업 특유의 섬세함과 정교한 기획력을 바탕으로 고객의 비즈니스 목적에 최적화된 최상의 공간 솔루션을 제공합니다.
502                </p>
503                <div class="space-y-6">
504                    <div class="flex items-center gap-4 text-slate-700 font-bold">
505                        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-600">
506                            <i class="fas fa-check"></i>
507                        </div>
508                        <span>정직함과 열정을 바탕으로 한 책임 시공</span>
509                    </div>
510                    <div class="flex items-center gap-4 text-slate-700 font-bold">
511                        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-600">
512                            <i class="fas fa-check"></i>
513                        </div>
514                        <span>지속가능한 사회적 가치 실현 및 약자 고용 추구</span>
515                    </div>
516                </div>
517            </div>
518            <div class="lg:w-1/2 relative">
519                <div class="rounded-3xl overflow-hidden shadow-2xl">
520                    <img src="../img/products/products01_main.png" alt="Office Interior" class="w-full h-full object-cover">
521                </div>
522                <div class="absolute -bottom-10 -left-10 bg-white p-8 rounded-2xl shadow-xl hidden lg:block">
523                    <div class="text-4xl font-black text-indigo-700 mb-2">Taeil Solution
524                    <div class="text-slate-500 font-bold uppercase tracking-wider text-xs">Total Service Experience</div>
525                </div>
526            </div>
527        </div>
528    </div>
529</section>
530
531<!-- BUSINESS FIELDS -->
532<section class="pt-12 pb-24 bg-slate-50">
533    <div class="container-custom">
534        <div class="text-center max-w-3xl mx-auto mb-16">
535            <span class="section-tag">BUSINESS FIELDS</span>
536            <h3 class="section-title">다양한 라이프스타일을 위한<br>맞춤형 전문 공사 서비스</h3>
537        </div>
538
539        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
540            <!-- Office -->
541            <div class="biz-card">
542                <img src="../img/products/products01_biz1.png" alt="Office Interior" class="biz-img">
543                <div class="biz-body">
544                    <span class="biz-label">Corporate Office</span>
545                    <h4 class="biz-name">사무/업무 공간</h4>
546                    <p class="biz-text">비즈니스의 효율성을 극대화하는 스마트 오피스 기획 및 구축. 소통과 집중이 공존하는 최적의 환경을 제안합니다.</p>
547                </div>
548            </div>
549
550            <!-- Retail -->
551            <div class="biz-card">
552                <img src="../img/products/products01_biz2.png" alt="Retail Design" class="biz-img">
553                <div class="biz-body">
554                    <span class="biz-label">Commercial Retail</span>
555                    <h4 class="biz-name">상업/전시 공간</h4>
556                    <p class="biz-text">브랜드의 가치를 시각화하는 감각적인 인테리어 시공. 고객의 시선을 사로잡는 마켓 플레이스를 완성합니다.</p>
557                </div>
558            </div>
559
560            <!-- Education/Public -->
561            <div class="biz-card">
562                <img src="../img/products/products01_biz3.png" alt="Educational Facility" class="biz-img">
563                <div class="biz-body">
564                    <span class="biz-label">Educational / Public</span>
565                    <h4 class="biz-name">교육/공공 시설</h4>
566                    <p class="biz-text">다양한 목적에 부합하는 안전하고 신뢰할 수 있는 공공 인프라 시공. 사람과 배우는 공간의 조화를 추구합니다.</p>
567                </div>
568            </div>
569        </div>
570    </div>
571</section>
572
573<!-- COMPETENCIES -->
574<section class="pt-12 pb-24">
575    <div class="container-custom">
576        <div class="flex flex-col lg:flex-row gap-20">
577            <div class="lg:w-1/3">
578                <h3 class="text-3xl font-black text-slate-900 mb-8 mt-2">태일솔루션만의<br><span class="text-indigo-700">차별화된 경쟁력</span></h3>
579                <p class="text-slate-600 leading-relaxed font-medium">단순한 하드웨어 시공을 넘어 소프트웨어를 이해하는 시공사로서, 완벽한 만족을 약속합니다.</p>
580            </div>
581            <div class="lg:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-x-12">
582                <!-- 1 -->
583                <div class="strength-item">
584                    <div class="strength-icon"><i class="fas fa-pencil-ruler"></i></div>
585                    <div class="strength-info">
586                        <h5>정밀한 기획 및 설계</h5>
587                        <p>고객의 요구를 분석하여 현장에 최적화된 도면 설계(3D 이미지 무료 제공) 및 공간 효율성 검토를 선행합니다.</p>
588                    </div>
589                </div>
590                <!-- 2 -->
591                <div class="strength-item">
592                    <div class="strength-icon"><i class="fas fa-hard-hat"></i></div>
593                    <div class="strength-info">
594                        <h5>체계적인 품질 관리</h5>
595                        <p>시공팀과 관리팀의 유기적인 협력을 통해 공정별 오차 없는 정밀 시공을 보장합니다.</p>
596                    </div>
597                </div>
598                <!-- 3 -->
599                <div class="strength-item">
600                    <div class="strength-icon"><i class="fas fa-leaf"></i></div>
601                    <div class="strength-info">
602                        <h5>인증 소재 사용</h5>
603                        <p>사용자의 건강과 지속가능성을 고려하여 인증된 자재를 우선적으로 사용합니다.</p>
604                    </div>
605                </div>
606                <!-- 4 -->
607                <div class="strength-item">
608                    <div class="strength-icon"><i class="fas fa-headset"></i></div>
609                    <div class="strength-info">
610                        <h5>완벽한 사후 관리</h5>
611                        <p>하자 보수 및 유지 관리를 위한 24시간 피드백 시스템으로 고객의 신뢰에 보답합니다.</p>
612                    </div>
613                </div>
614            </div>
615        </div>
616    </div>
617</section>
618
619
620<!-- CALL TO ACTION -->
621<section class="py-12" style="background: linear-gradient(135deg, #4B429A 0%, #372F7D 100%);">
622    <div class="container-custom">
623        <div class="flex flex-col lg:flex-row justify-between items-center gap-10">
624            <div>
625                <h3 class="text-3xl lg:text-4xl font-black text-white mb-4">실내건축 프로젝트를 함께 시작해 보세요</h3>
626                <p class="text-indigo-200 text-lg">태일솔루션 전문가가 현장 방문부터 견적까지 빠르게 도와드립니다.</p>
627            </div>
628            <button onclick="openInquiry()" class="px-10 py-5 bg-white text-indigo-900 font-black rounded-full hover:bg-indigo-100 transition shadow-xl whitespace-nowrap">
629                상담 문의하기 <i class="fas fa-paper-plane ml-2"></i>
630            </button>
631        </div>
632    </div>
633</section>
634
635<!-- FOOTER -->
636<script type="text/javascript" src="//wcs.naver.net/wcslog.js"> </script>
636 
637<script type="text/javascript"> 
638if (!wcs_add) var wcs_add={};
639wcs_add["wa"] = "s_3cce99f6492";
640if (!_nasa) var _nasa={};
641if(window.wcs){
642wcs.inflow();
643wcs_do();
644}
645</script>
645
646<footer id="footer">
647    <div class="container-custom">
648        <div class="f-top-row">
649            <a href="../index.php" class="f-logo">
650                <img src="../img/footer_logo.png" alt="태일솔루션">
651            </a>
652            <div class="f-info-inline">
653                <p>(주)태일솔루션&nbsp;&nbsp;|&nbsp;&nbsp;대표이사 최은희&nbsp;&nbsp;|&nbsp;&nbsp;경기도 구리시 갈매중앙로 190, 휴밸나인 지식산업센터 A동 8층 8001호</p>
654                <p>사업자등록번호 215-87-68281&nbsp;&nbsp;|&nbsp;&nbsp;통신판매업신고 제06-경기구리-0430호</p>
655                <p>전화 1833-6459&nbsp;&nbsp;|&nbsp;&nbsp;팩스 02-3273-1223&nbsp;&nbsp;|&nbsp;&nbsp;이메일 [email protected]</p>
656                <p>개인정보책임자 원석재 부장&nbsp;&nbsp;|&nbsp;&nbsp;[email protected]</p>
657            </div>
658            <div class="f-cs-block">
659                <p class="f-cs-label">고객센터</p>
660                <p class="f-cs-num">1833-6459</p>
661                <p class="f-cs-hours">평일 09:00 - 18:00<br>점심 12:00 - 13:00&nbsp;&nbsp;|&nbsp;&nbsp;주말·공휴일 휴무</p>
662            </div>
663        </div>
664
665        <div class="f-bottom">
666            <p class="f-copy">© 2026 태일솔루션. All rights reserved.</p>
667            <div class="f-policy-links">
668                <button type="button" class="f-policy-link" id="footer-terms-open">이용약관</button>
669                <button type="button" class="f-policy-link" id="footer-privacy-open">개인정보취급방침</button>
670            </div>
671        </div>
672    </div>
673</footer>
674<!-- 우측 하단 퀵메뉴 -->
675<aside class="quick-menu">
676    <a href="javascript:void(0)" class="quick-item" onclick="openInquiry(); return false;">
677        <i class="fas fa-headset"></i>상담문의
678    </a>
679    <a href="https://order.taeilsolution.com" class="quick-item" target="_blank" rel="noopener noreferrer">
680        <i class="fas fa-file-alt"></i>공공기관<br>물품구매
681    </a>
682    <a href="http://www.taeilgift.com" class="quick-item" target="_blank" rel="noopener noreferrer">
683        <i class="fas fa-gift"></i>판촉물
684    </a>
685    <a href="/products/products01.php" class="quick-item">
686        <i class="fas fa-hard-hat"></i>실내건축공사
687    </a>
688    <a href="/products/products02.php" class="quick-item">
689        <i class="fas fa-bolt"></i>정보통신
690    </a>
691    <a href="#" class="quick-item top-btn" onclick="window.scrollTo({top:0, behavior:'smooth'}); return false;">
692        <i class="fas fa-arrow-up"></i>TOP
693    </a>
694</aside><div class="modal-overlay" id="modal-overlay">
695    <div class="port-modal" id="port-modal">
696        <button class="port-modal-close" onclick="closeModals()"><i class="fas fa-times"></i></button>
697        <div class="port-modal-img" id="pm-img"></div>
698        <div class="port-modal-body">
699            <span class="port-modal-badge" id="pm-badge">수행분야</span>
700            <h3 class="port-modal-title" id="pm-title">수행분야 상세</h3>
701            <p class="port-modal-desc" id="pm-desc">프로젝트 개요와 주요 내용을 이 영역에서 확인하실 수 있습니다.</p>
702            <div class="port-modal-actions">
703                <button class="btn-inquiry" onclick="openInquiry()"><i class="fas fa-paper-plane"></i> 상담문의</button>
704                <button class="btn-outline" onclick="closeModals()">닫기</button>
705            </div>
706        </div>
707    </div>
708
709    <div class="inquiry-modal" id="inquiry-modal">
710        <div class="inquiry-header">
711            <h3><i class="fas fa-paper-plane"></i> 상담문의</h3>
712            <p>기관 정보와 문의 내용을 남겨주시면 확인 후 안내해 드리겠습니다.</p>
713            <button class="inquiry-close" onclick="closeModals()"><i class="fas fa-times"></i></button>
714        </div>
715        <div class="inquiry-body">
716            <form id="inquiry-form" action="../master/api/inquiry_submit.php" method="post" enctype="multipart/form-data" data-captcha-url="../master/api/captcha.php">
717                <input type="hidden" name="form_token" value="17909049
71768.4dd6c5972034c22c.0e82b856ad81bd337ffcbbd437a69672">
718                <div class="hp-field" aria-hidden="true">
719                    <label>홈페이지 주소<input type="text" name="website_url" tabindex="-1" autocomplete="off"></label>
720                    <label>팩스번호<input type="text" name="company_fax" tabindex="-1" autocomplete="off"></label>
721                </div>
722                <div class="form-row">
723                    <div class="form-col">
724                        <label class="form-label">기관명<span class="req">*</span></label>
725                        <input type="text" name="company_name" class="form-input" placeholder="기관명 또는 회사명을 입력해 주세요." required="required">
726                    </div>
727                    <div class="form-col">
728                        <label class="form-label">부서명<span class="req">*</span></label>
729                        <input type="text" name="department_name" class="form-input" placeholder="부서명을 입력해 주세요." required="required">
730                    </div>
731                </div>
732                <div class="form-row">
733                    <div class="form-col">
734                        <label class="form-label">담당자명<span class="req">*</span></label>
735                        <input type="text" name="contact_name" class="form-input" placeholder="담당자명을 입력해 주세요." required="required">
736                    </div>
737                    <div class="form-col">
738                        <label class="form-label">연락처<span class="req">*</span></label>
739                        <input type="text" name="phone" class="form-input" placeholder="010-0000-0000" required="required">
740                    </div>
741                </div>
742                <div class="form-row form-row-block">
743                    <label class="form-label">이메일<span class="req">*</span></label>
744                    <input type="email" name="email" class="form-input" placeholder="이메일 주소를 입력해 주세요." required="required">
745                </div>
746                <div class="form-row form-row-block">
747                    <label class="form-label">문의유형<span class="req">*</span></label>
748                    <select name="inquiry_type" class="form-select" required="required">
749                        <option value="">문의유형을 선택해 주세요.</option>
750                        <option value="실내건축공사">실내건축공사</option>
751                        <option value="정보통신/전기">정보통신/전기</option>
752                        <option value="구매대행">구매대행</option>
753                        <option value="기타">기타</option>
754                    </select>
755                </div>
756                <div class="form-row form-row-block">
757                    <label class="form-label">문의내용<span class="req">*</span></label>
758                    <textarea name="content" class="form-textarea" placeholder="문의하실 내용을 입력해 주세요." required="required"></textarea>
759                </div>
760                <div class="form-row form-row-block form-row-compact">
761                    <label class="form-label">파일첨부</label>
762                    <input type="file" name="attachment_file" class="form-input">
763                </div>
764                <div class="form-row form-row-block form-row-compact">
765                    <label class="form-label" for="captcha-code">자동입력 방지문자<span class="req">*</span></label>
766                    <div class="captcha-box">
767                        <div class="captcha-image-wrap">
768                            <img src="../master/api/captcha.php?t=1790904968" alt="자동입력 방지문자 이미지" id="captcha-image" class="captcha-image">
769                            <button type="button" class="captcha-refresh" id="captcha-refresh" title="이미지 새로고침"><i class="fas fa-redo"></i></button>
770                        </div>
771                        <input type="text" name="captcha_code" id="captcha-code" class="form-input captcha-input" maxlength="8" placeholder="왼쪽 이미지의 문자를 입력해 주세요." autocomplete="off" required="required">
772                    </div>
773                    <p class="captcha-help">스팸 방지를 위해 이미지의 문자를 정확히 입력해야 상담문의가 접수됩니다.</p>
774                </div>
775                <div class="privacy-consent">
776                    <label class="privacy-check">
777                        <input type="checkbox" name="privacy_agree" value="1" required="required">
778                        <span>개인정보취급방침에 동의합니다.</span>
779                    </label>
780                    <button type="button" class="privacy-detail" id="privacy-policy-open">자세히보기</button>
781                </div>
782                <button type="submit" class="btn-submit"><i class="fas fa-paper-plane"></i> 상담문의 접수</button>
783            </form>
784        </div>
785    </div>
786
787    <div class="policy-modal" id="privacy-policy-modal">
788        <div class="policy-modal-header">
789            <h3>개인정보취급방침</h3>
790            <button type="button" class="policy-modal-close" id="privacy-policy-close"><i class="fas fa-times"></i></button>
791        </div>
792        <div class="policy-modal-body">
793            <div class="policy-section">
794                <h4>1. 수집 항목</h4>
795                <p>기관명, 부서명, 담당자명, 연락처, 이메일, 문의유형, 문의내용, 첨부파일</p>
796            </div>
797            <div class="policy-section">
798                <h4>2. 수집 목적</h4>
799                <p>상담문의 접수, 문의 내용 확인, 회신 및 상담 이력 관리</p>
800            </div>
801            <div class="policy-section">
802                <h4>3. 보유 및 이용 기간</h4>
803                <p>문의 응대 및 사후 관리 목적 달성 후 관련 법령 또는 내부 기준에 따라 보관 후 파기합니다.</p>
804            </div>
805            <div class="policy-section">
806                <h4>4. 동의 거부 권리</h4>
807                <p>개인정보 제공에 대한 동의를 거부할 수 있으나, 필수 항목 미동의 시 상담문의 접수가 제한될 수 있습니다.</p>
808            </div>
809            <div class="policy-section">
810                <h4>5. 개인정보 보호 담당자</h4>
811                <p>담당자 : 원석재 부장&nbsp;&nbsp;|&nbsp;&nbsp;담당자 이메일 : [email protected]&nbsp;&nbsp;|&nbsp;&nbsp;담당자 전화번호 : 1833-6459</p>
812            </div>
813        </div>
814    </div>
815
816    <div class="policy-modal" id="terms-policy-modal">
817        <div class="policy-modal-header">
818            <h3>이용약관</h3>
819            <button type="button" class="policy-modal-close" id="terms-policy-close"><i class="fas fa-times"></i></button>
820        </div>
821        <div class="policy-modal-body">
822            <div class="policy-section">
823                <h4>1. 목적</h4>
824                <p>이 약관은 태일솔루션 웹사이트에서 제공하는 정보 안내, 상담문의 접수 및 관련 서비스 이용에 관한 기본 사항을 규정합니다.</p>
825            </div>
826            <div class="policy-section">
827                <h4>2. 서비스 범위</h4>
828                <p>회사는 회사소개, 사업영역, 공공구매제도 안내, 수행내역, 각종 게시판, 상담문의 접수 기능 등을 제공합니다.</p>
829            </div>
830            <div class="policy-section">
831                <h4>3. 이용자의 책임</h4>
832                <p>이용자는 상담문의 또는 게시판 이용 시 사실에 근거한 정보를 입력해야 하며, 타인의 권리를 침해하거나 관련 법령에 위반되는 내용을 등록해서는 안 됩니다.</p>
833            </div>
834            <div class="policy-section">
835                <h4>4. 서비스 변경 및 중단</h4>
836                <p>회사는 시스템 점검, 운영상 필요, 기술적 사유 등에 따라 서비스 일부를 변경하거나 중단할 수 있습니다.</p>
837            </div>
838            <div class="policy-section">
839                <h4>5. 저작권 및 권리</h4>
840                <p>웹사이트 내 텍스트, 이미지, 디자인, 게시물 등 모든 콘텐츠의 권리는 태일솔루션 또는 정당한 권리자에게 있으며, 사전 동의 없이 무단 복제·배포할 수 없습니다.</p>
841            </div>
842            <div class="policy-section">
843                <h4>6. 문의</h4>
844                <p>서비스 이용 중 문의사항이 있을 경우 상담문의 또는 고객센터를 통해 문의할 수 있습니다.</p>
845            </div>
846        </div>
847    </div>
848</div>
849<script src="../assets/js/common.js"></script>
849
850
851</body>
852</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.