PageSourceSearch

https://1sq.co.kr/aboutCompany.php

html 1sq.co.kr collected 2026-10-09 22:16:17 UTC 22,505 bytes, 568 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ko">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7    <title>퍼스트스퀘어</title>
8    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
9    <meta property="og:image" content="http://snowkim0808.cafe24.com/firstsquare/img/og_img.png">
10    <meta property="og:description" content="퍼스트스퀘어">
11
12    <!-- Favicon -->
13    <link rel="icon" type="image/png" href="./img/favicon-96x96.png" sizes="96x96" />
14    <link rel="icon" type="image/svg+xml" href="./img/favicon.svg" />
15    <link rel="shortcut icon" href="./img/favicon.ico" />
16    <link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png" />
17    <link rel="manifest" href="./img/site.webmanifest" />
18
19    <!-- Swiper -->
20    
20<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
20
21    
22    <!-- aos -->
23    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
24    
24<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
24
25
26    <!-- Jquery -->
27    
27<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
27
28
29    <!-- Swiper -->
30    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
31    
31<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
31
32    
33    <!-- JS -->
34    
34<script src="./js/main.js"></script>
34
35
36    <!-- gsap -->
37    
37<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
37
38    
38<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
38
39
40    <!-- Fonts -->
41    <link rel="preconnect" href="https://fonts.googleapis.com">
42    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
43    <link href="https://fonts.googleapis.com/css2?family=Teachers:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
44    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet"
45/>
46    
47    <!-- Design css -->
48    <link rel="stylesheet" href="css/common.css?v=250405">
49    <link rel="stylesheet" href="css/sub.css?v=250405">
50    <link rel="stylesheet" href="css/style.css?v=250405">
51   
52    
53</head>
54<body><header class="header-wrap">
55    <div class="container-lg header">
56        <a href="./index.php" class="logo">
57            <img src="./img/header_logo_wh.png" alt="홈으로가기">
58        </a>
59    </div>
60    
61</header>
62<aside class="side-menu-wrap">
63    <a href="./index.php" class="logo">
64        <img src="./img/header_logo_wh.png" alt="홈으로가기">
65    </a>
66    <div class="side-menu">
67        <button class="btn" id="sideBtn">
68            <img class="ic-menuOpen" src="./img/ic_draw.png" alt="메뉴열기">
69            <img class="ic-menuClose" src="./img/ic_x.png" alt="메뉴닫기">
70        </button>
71    </div>
72    <div class="sns-wrap">
73        <a href="./aboutCompany.php" class="ic-company">
74            <img src="./img/ic_goCompany.png" alt="회사소개">
75        </a>
76        <a href="#" target="_blank" class="ic-insta">
77            <img src="./img/ic_goInsta.png" alt="인스타그램">
78        </a>
79        <a href="#" target="_blank" class="ic-youtube">
80            <img src="./img/ic_goYoutube.png" alt="유튜브">
81        </a>
82        <a href="#" target="_blank" class="ic-facebook">
83            <img src="./img/ic_goFacebook.png" alt="페이스북">
84        </a>
85    </div>
86</aside>
87
88<div class="lnb-wrap">
89    <div class="lnb-inner">
90        <ul class="left lnb ff-teachers">
91            <li>
92                <a href="./index.php">
93                    <figure class="ic-arrow">
94                        <img src="./img/ic_arrow_topright_lg.png" alt="home">                        
95                    </figure>
96                    HOME
97                </a>
98            </li>
99            <li>
100                <a href="./works.php">
101                    <figure class="ic-arrow">
102                        <img src="./img/ic_arrow_topright_lg.png" alt="works">                        
103                    </figure>
104                    WORKS
105                </a>
106            </li>
107            <li>
108                <a href="./aboutCompany.php">
109                    <figure class="ic-arrow">
110                        <img src="./img/ic_arrow_topright_lg.png" alt="inquiry">
111                    </figure>
112                    ABOUT COMPANY
113                </a>
114            </li>
115            <li>
116                <a href="news.php">
117                    <figure class="ic-arrow">
118                        <img src="./img/ic_arrow_topright_lg.png" alt="news">
119                    </figure>                    
120                    Q&A Board
121                </a>
122            </li>
123        </ul>
124        <div class="right company-info ff-teachers">
125            <div>
126                <strong>주식회사 퍼스트스퀘어</strong>
127                <span></span><br>
128
129                <strong>PHONE</strong>
130                <span>010.4769.1250</span><br>
131
132                <strong>Email</strong>
133                <span>[email protected]</span><br>
134            </div>
135        </div>
136    </div>
137    
138</div>
139
140
141
142<div id="intro">
143    <div class="logo-intro">
144        <img src="./img/logo_intro.png" alt="로고">
145    </div>
146    <div id="progress-container">
147        <span id="progress-text" class="ff-teachers">0%</span>
148    </div>
149</div>
150<section id="section1" class="company-keyVisual-wrap container-lg">
151    <div class="bg-company-keyVisual">
152        <div class="top"></div>
153        <div class="bottom">
154            <div class="bottom-left">
155                <div class="bottom-left-btn">
156                    <button class="btn btn-lg btn-primary btn-inquiry only-tb-mb" onclick="location.href='./inquiry_write.php'">
157                        <img class="ic-plane" src="./img/ic_plane.png" alt="프로젝트 문의하기 ">
158                    </button>
159                    <button class="btn btn-lg btn-primary only-pc mr-12" onclick="location.href='./inquiry_write.php'">
160                        프로젝트 문의
161                        <img class="ic-arrow ic-right" src="./img/ic_arrow_topright_bk.png" alt="프로젝트 문의하기">
162                    </button>
163                    <button class="btn btn-lg btn-outline-secondary only-pc" onclick="location.href='works.php'">
164                        포트폴리오 보러가기
165                        <img class="ic-arrow ic-right" src="./img/ic_arrow_topright.png" alt="포트폴리오 보러가기">
166                    </button>
167                </div>                
168            </div>            
169            <div class="bottom-right">
170                
171            </div>
172        </div>
173        
174        <div class="keyVisual-blur">
175            <div class="blur-1"></div>
176            <div class="blur-2"></div>
177        </div>
178    </div>
179    <div class="company-keyVisual">
180        <div class="left">
181            <h2 class="heading-2 ff-teachers">
182            True Connection :<br>
183            Where Sincerity Resonates.
184            </h2>
185            <h5 class="heading-5">
186            퍼스트스퀘어는 진정성 있는 소통을 통해 고객과의 진실된 연결을 추구합니다.
187            </h5>
188            <p>
189            기획부터 디자인을 거쳐 개발까지 A to Z를 한 번에! <br class="only-pc">
190            500여개 이상의 국내외 고객사들과 함께 성장하고 있는 퍼스트스퀘어의 포트폴리오를 확인해보세요. <br class="only-pc">
191            이를 통해 우리의 역량과 전문성을 확인할 수 있습니다. 
192            </p>
193        </div>
194        <main class="right keyboard" id="keyboardWrap">        
195            <canvas id="canvas3d"></canvas>
196            <!-- Import maps polyfill -->
197            <!-- Remove this when import maps will be widely supported -->
198            
198<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
198
199            
199<script type="importmap">
200            {
201                "imports": {
202                "@splinetool/runtime": "https://unpkg.com/@splinetool/[email protected]/build/runtime.js"
203                }
204            }
205            </script>
205
206            
206<script type="module" src="./js/keyboard.js"></script>
206    
207            <!-- Gsap -->
208            
208<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
208
209            
209<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
209
210            
210<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollToPlugin.min.js"></script>
210
211
212        </main>        
213    </div>
214</section>
215<section id="section2" class="copyright">
216    <h5 class="heading-3 mt-14" id="companyText1">우리는 단순한 개발업체가 아닙니다.</h5>
217    <h5 class="heading-3 mt-14" id="companyText2">우리는 성공적인 스타트업을 직접 운영한 CEO, CTO가 있는</h5>
218    <h5 class="heading-3 mt-14" id="companyText3">전문가 팀입니다.</h5>
219</section>
220
221<section class="zeroBug-wrap">
222    <div class="zeroBug container-sm">
223        <p class="text-primary ff-teachers">Zero bug warranty</p>
224        <h5 class="heading-3 mt-14">
225            개발만 하고 끝?
226        </h5>
227        <p class="fs-18 mt-14">
228        개발 완료 이후에도 평생 제로 버그 워런티를 제공합니다.<br>
229        풍부한 경험과 함께, 우리는 끊임없는 성장을 이뤄나가고 있습니다.
230        </p>
231
232        <ul class="numberWorks">
233            <li>
234                <p class="text-gray-500">홈페이지</p>
235                <strong>5130</strong>
236            </li>
237            <li>
238                <p class="text-gray-500">어플</p>
239                <strong>2937</strong>
240            </li>
241            <li>
242                <p class="text-gray-500">프로그램</p>
243                <strong>2851</strong>
244            </li>
245        </div>
246    </div>
247</section>
248
249<section class="ourWorks-wrap container-fluid">
250    <p class="text-primary ff-teachers">Our works</p>
251    <h5 class="heading-3 mt-5 fw-400">
252        우리의 작업물을 소개합니다.
253    </h5>
254    <div class="swiper ourWorks">
255        <!-- Additional required wrapper -->
256        <div class="swiper-wrapper">
257            <!-- Slides -->
258            <a href="./work_mungkeul.php" class="swiper-slide">
259                <div class="overlay-box"></div>                    
260                <img src="./img/works_1.jpg">
261                <div class="workInfo">
262                    <div class="date">2024</div>
263                    <strong class="workName">뭉클</strong>
264                    <ul class="workBadge">
265                        <li>APP</li>
266                        <li>RN</li>
267                    </ul>
268                </div>
269            </a>
270            <a href="./work_aix.php" class="swiper-slide">
271                <div class="overlay-box"></div>       
272                <img src="./img/aix_1.jpg">
273                <div class="workInfo">
274                    <div class="date">2024</div>
275                    <strong class="workName">AIX</strong>
276                    <ul class="workBadge">
277                        <li>WEB</li>
278                        <li>RESPONSIVE</li>
279                    </ul>
280                </div>
281            </a>
282            <a href="./work_crewonly.php" class="swiper-slide">
283                <div class="overlay-box"></div>      
284                <img src="./img/crewonly_1.jpg">
285                <div class="workInfo" >
286                    <div class="date">2024</div>
287                    <strong class="workName">크루온리</strong>
288                    <ul class="workBadge">
289                        <li>APP</li>
290                        <li>RN</li>
291                        <li>SHOPPING</li>
292                    </ul>
293                </div>
294            </a>     
295            <a href="./work_meatrider.php" class="swiper-slide">
296                <div class="overlay-box"></div>      
297                <img src="./img/meatrider_1.jpg">
298                <div class="workInfo">
299                    <div class="date">2024</div>
300                    <strong class="workName">미트라이더</strong>
301                    <ul class="workBadge">
302                        <li>APP</li>
303                        <li>RN</li>
304                    </ul>
305                </div>
306            </a>
307            <a href="./work_zoopiter.php" class="swiper-slide">
308                <div class="overlay-box"></div>       
309                <img src="./img/zoopiter_1.jpg">
310                <div class="workInfo">
311                    <div class="date">2024</div>
312                    <strong class="workName">주피터</strong>
313                    <ul class="workBadge">
314                        <li>APP</li>
315                        <li>RN</li>
316                    </ul>
317                </div>
318            </a>
319            <a href="./work_seoulQuest.php" class="swiper-slide">
320                <div class="overlay-box"></div>      
321                <img src="./img/seoulQuest_1.jpg">
322                <div class="workInfo" >
323                    <div class="date">2024</div>
324                    <strong class="workName">서울퀘스트</strong>
325                    <ul class="workBadge">
326                        <li>APP</li>
327                        <li>RN</li>
328                    </ul>
329                </div>
330            </a>  
331            <a href="./work_tireAuction.php" class="swiper-slide">
332                <div class="overlay-box"></div>      
333                <img src="./img/tireAuction_1.jpg">
334                <div class="workInfo">
335                    <div class="date">2024</div>
336                    <strong class="workName">타이어옥션</strong>
337                    <ul class="workBadge">
338                        <li>WEB</li>
339                        <li>REACT</li>
340                        <li>RESPONSIVE</li>
341                    </ul>
342                </div>
343            </a>
344            <a href="./work_mediviewer.php" class="swiper-slide">
345                <div class="overlay-box"></div>       
346                <img src="./img/mediviewer_1.jpg">
347                <div class="workInfo">
348                    <div class="date">2024</div>
349                    <strong class="workName">메디뷰어</strong>
350                    <ul class="workBadge">
351                        <li>WEB</li>
352                        <li>RESPONSIVE</li>
353                    </ul>
354                </div>
355            </a>
356            <a href="./work_mymy.php" class="swiper-slide">
357                <div class="overlay-box"></div>      
358                <img src="./img/mymy_1.jpg">
359                <div class="workInfo" >
360                    <div class="date">2024</div>
361                    <strong class="workName">My My</strong>
362                    <ul class="workBadge">
363                        <li>WEB</li>
364                        <li>RESPONSIVE</li>
365                    </ul>
366                </div>
367            </a>
368        </div>
369        <!-- If we need pagination -->
370        <div class="navi-wrap">            
371            <div class="swiper-button-next">
372                <i class="ri-arrow-right-s-line"></i>
373            </div>
374            <div class="swiper-button-prev">
375                <i class="ri-arrow-left-s-line"></i>
376            </div>
377        </div>
378
379        <div class="swiper-pagination"></div>
380    </div>
381    
381<script>
382        const swiper = new Swiper('.ourWorks', {
383            // Optional parameters
384            slidesPerView: 1.1,
385            spaceBetween: 10,
386            loop: true,
387            allowTouchMove: true,
388
389            // If we need pagination
390            pagination: {
391                el: '.swiper-pagination',
392                clickable: true,
393            },navigation: {
394                nextEl: ".swiper-button-next",
395                prevEl: ".swiper-button-prev",
396            },breakpoints: {
397                575: {
398                    spaceBetween: 20,
399                    allowTouchMove: false,
400                },
401                991: {
402                    spaceBetween: 30,
403                },
404            }
405        });
406        
407        //인트로
408        document.addEventListener("DOMContentLoaded", () => {
409            const intro = document.getElementById("intro");
410
411            const progressText = document.getElementById("progress-text");
412            const progressContainer = document.getElementById("progress-container");
413            let progress = 0;
414            const duration = 2000;  //�시간 조절 2초
415            const intervalTime = duration / 100; 
416
417            const updateProgress = (value) => {
418                progressText.textContent = `${value}%`;
419                progressContainer.style.bottom = `${value * 0.9}%`;  // 위치 변화 애니메이션
420            };
421
422            const simulateLoading = () => {
423                const interval = setInterval(() => {
424                    if (progress < 100) {
425                        progress++;
426                        updateProgress(progress);
427                    } else {
428                        clearInterval(interval);
429                        intro.classList.add("fade-out");
430                        disableScroll(); // 스크롤 막기
431                        setTimeout(() => {
432                            intro.style.display = "none";
433                            enableScroll(); // 스크롤 허용
434                        }, 1500);  // 페이드아웃 애니메이션 시간과 맞추기
435                    }
436                }, intervalTime);
437            };
438
439            // 인트로를 화면에 표시
440            simulateLoading();
441        });
442
443    </script>
443        
444</section>
445<section class="ourClients-wrap">
446    <div class="container">
447        <p class="text-primary ff-teachers">Clients</p>
448        <h5 class="heading-3 mt-5 fw-400">
449            500여개 이상의 국내외 고객사
450        </h5>
451        <p class="fs-18">
452        퍼스트스퀘어는 다양한 산업에서 500여개 이상의<br>
453        국내외 고객사들과 함께 성장하고 있습니다.
454        </p>
455        <ul class="clients-list">
456            <li>
457                <img src="./img/client_1.png" alt="koen">
458            </li>
459            <li>
460                <img src="./img/client_2.png" alt="중외제약">
461            </li>
462            <li>
463                <img src="./img/client_3.png" alt="한화">
464            </li>
465            <li>
466                <img src="./img/client_4.png" alt="포스코">
467            </li>
468            <li>
469                <img src="./img/client_6.png" alt="포스코">
470            </li>
471            <li>
472                <img src="./img/client_6.png" alt="">
473            </li>
474            <li>
475                <img src="./img/client_7.png" alt="">
476            </li>
477            <li>
478                <img src="./img/client_8.png" alt="">
479            </li>
480        </ul>
481    </div>
482</section>
483<section class="inquiry-wrap" id="inquiry">
484    <div class="inquiry container-sm">
485        <div class="left">
486            <figure>
487                <img src="./img/inquiry_img.jpg" alt="문의">
488            </figure>
489        </div>
490        <div class="right">
491            <p class="text-primary ff-teachers">Inquiry</p>
492            <h5 class="heading-3 mt-5 fw-400">
493                망설이지 마세요.<br>
494                상담은 무료입니다.
495            </h5>
496            <form class="inquiry-form mt-40">
497                <div class="form-wrap">
498                    <label class="form-label">회사명</label>
499                    <input type="text" class="form-control" placeholder="회사명 입력">
500                </div>
501                <div class="form-wrap">
502                    <label class="form-label">담당자명</label>
503                    <input type="text" class="form-control" placeholder="담당자명 입력">
504                </div>
505                <div class="form-wrap">
506                    <label class="form-label">휴대폰 번호</label>
507                    <input type="text" class="form-control" placeholder="휴대폰 번호 입력">
508                </div>
509                <div class="form-wrap">
510                    <label class="form-label">이메일 주소 </label>
511                    <input type="text" class="form-control" placeholder="이메일 주소 입력">
512                </div>
513                <div class="form-wrap">
514                    <label class="form-label">내용</label>
515                    <textarea id="" class="form-control" placeholder="내용 입력"></textarea>
516                </div>
517                <div class="form-wrap">
518                    <button class="btn btn-primary" type="button">문의하기</button>
519                </div>
520            </form>
521            
522        </div>
523    </div>
524</section>
525<footer class="footer-wrap">
526    <div class="footer container-sm">
527        <figure class="logo">
528            <img src="./img/logo_footer.png" alt="주식회사 퍼스트스퀘어">
529        </figure>
530        <div class="company-info">
531            <div class="left">
532                <strong>주식회사 퍼스트스퀘어</strong><br><br>
533
534                <div>
535
536                    <strong>PHONE</strong>
537                    <span>010.4769.1250</span>
538
539                    <strong>Email</strong>
540                    <span>[email protected]</span>
541                </div>
542                <strong>주소</strong>
543                <span>서울시 송파구 거여동 603, 유원플러스송파  L112호<br><br>
544
545                Copyright ⓒ FirstSquare Company All Rights Reserved
546                </span>
547
548            </div>
549            <div class="right">
550                <ul class="lnb">
551                    <li>
552                        <a href="./index.php">HOME</a>
553                    </li>
554                    <li>
555                        <a href="./works.php">WORKS</a>
556                    </li>
557                    <li>
558                        <a href="./news.php">NEWS</a>
559                    </li>
560                    <li>                        
561                        <a href="./aboutCompany.php#inquiry">INQUIRY</a>
562                    </li>
563                </ul>
564            </div>
565        </div>
566        
567    </div>
568</footer>

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.