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.