1<!DOCTYPE html> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko" data-bs-theme="auto"> 3<head> 4 <!-- Google Tag Manager --> 5
5<script>
vendor: 347 bytes, lines 5-9
5(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 6 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 7 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 8 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 9 })(window,document,'script','dataLayer','
9GTM-N6TM3J5X
vendor: 3 bytes, line 9
9');
9</script>
9 10 <!-- End Google Tag Manager --> 11 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13
13<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
13 14
14<script src="https://www.alphalaw.co.kr/assets/js/5.3/bootstrap.bundle.min.js" language="javascript" type="text/javascript" /></script>
14 15<link href="https://www.alphalaw.co.kr/assets/css/5.3/bootstrap.min.css" rel="stylesheet" type="text/css" /> 16<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /><link href="https://www.alphalaw.co.kr/assets/css/common3.css?v=1758823511" rel="stylesheet" type="text/css" /> 17 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"> 18 19 <!-- Webfont: Noto Serif KR for question text --> 20 <link rel="preconnect" href="https://fonts.googleapis.com"> 21 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 22 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700&display=swap" rel="stylesheet"> 23 24
24<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
24 25 <!-- Swiper JS (CDN) --> 26
26<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
26 27 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 28 <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> 29 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> 30 <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> 31 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 32 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 33 <link rel="shortcut icon" href="/favicon.ico"> 34 <link rel="manifest" href="/site.webmanifest"> 35 <link rel="canonical" href="https://www.alphalaw.co.kr" /> 36 <meta name="description" content="민ìë²Â·íìë²Â·íì ë²Â·ë¯¼ë²Â·ìë²Â·íë²Â·íë² OX ì´íë¡ ê¸°ì¶ë¬¸ì 를 ë¹ ë¥´ê² íìµíì¸ì. 기ì¶íë¡ ì¬ì´í¸ìì ìµì íë¡ë¥¼ ì¤ì¬ì¼ë¡ ìë¡ì´ ìì ì íì¸íê³ ëë¹íì¸ì."> 37 <!-- Open Graph --> 38 <meta property="og:title" content="ìíë¡ | ë²í OX ì±ì¼ë¡ íµì¬ ì 리, 기ì¶íë¡ë¡ ë ¼ì ì 리"> 39 <meta property="og:description" content="민ìë²Â·íìë²Â·íì ë²Â·ë¯¼ë²Â·ìë²Â·íë²Â·íë² OX ì´íë¡ ê¸°ì¶ë¬¸ì 를 ë¹ ë¥´ê² íìµíì¸ì. 기ì¶íë¡ ì¬ì´í¸ìì ìµì íë¡ë¥¼ ì¤ì¬ì¼ë¡ ìë¡ì´ ìì ì íì¸íê³ ëë¹íì¸ì."> 40 <meta property="og:url" content="https://www.alphalaw.co.kr"> 41 <meta property="og:site_name" content="ìíë¡"> 42 <meta property="og:type" content="website"> 43 <meta property="og:locale" content="ko_KR"> 44 <meta property="og:image" content="https://www.alphalaw.co.kr/assets/img/app_icon_profile_title.png"> 45 <!-- Twitter Cards --> 46 <meta name="twitter:card" content="summary_large_image"> 47 <meta name="twitter:title" content="ìíë¡ | ë²í OX ì±ì¼ë¡ íµì¬ ì 리, 기ì¶íë¡ë¡ ë ¼ì ì 리"> 48 <meta name="twitter:description" content="민ìë²Â·íìë²Â·íì ë²Â·ë¯¼ë²Â·ìë²Â·íë²Â·íë² OX ì´íë¡ ê¸°ì¶ë¬¸ì 를 ë¹ ë¥´ê² íìµíì¸ì. 기ì¶íë¡ ì¬ì´í¸ìì ìµì íë¡ë¥¼ ì¤ì¬ì¼ë¡ ìë¡ì´ ìì ì íì¸íê³ ëë¹íì¸ì."> 49 <meta name="twitter:image" content="https://www.alphalaw.co.kr/assets/img/app_icon_profile_title.png"> 50 <title>ìíë¡ | ë²í OX ì±ì¼ë¡ íµì¬ ì 리, 기ì¶íë¡ë¡ ë ¼ì ì 리</title> 51</head> 52<body> 53 <!-- Google Tag Manager (noscript) -->
vendor: 73 bytes, lines 53-54
53 54 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
54GTM-N6TM3J5X
vendor: 93 bytes, lines 54-56
54" 55 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 56
56<!-- End Google Tag Manager (noscript) --> 57<header class="navbar navbar-expand-lg al-navbar sticky-top"> 58 <div class="container-xxl al-gutter"> 59 <span class="navbar-brand"> 60 <a href="/"><b>ìíë¡</b></a> 61 </span> 62 63 64 65 66 <div class="al-header-actions d-flex align-items-center d-md-none"> 67 <a id="alHeaderMobileDownload" href="#" class="al-header-dl-btn" role="button" data-bs-toggle="modal" data-bs-target="#iDownloadModal"><span class="dl-full">OX ì± ë¤ì´ë¡ë</span><span class="dl-short">OX ì± ë°ê¸°</span><span class="dl-xshort">OX ì±</span></a> 68 </div> 69 70 71 72 <div class="navbar-nav flex-row flex-wrap ms-md-auto offcanvas-lg"> 73 74 <div class="al-download"> 75 <a id="iAppDownload" class="al-btn-download" href="#" data-bs-toggle="modal" data-bs-target="#iDownloadModal" role="button"> 76 <span style="letter-spacing:.02em;"><b>OX</b> ì´í ë¤ì´ë¡ë</span> 77 </a> 78 </div> 79 80 81 </div> 82 83 </div> 84</header>
85<script type="text/javascript"> 86 $(document).ready(function(){ 87 $(".btn-course-app-download").click(function() { 88 $("#iDownloadModal").find(".modal-dialog").addClass("modal-dialog-centered"); 89 }); 90 // Download button handling is centralized in footer.js 91 92 // Desktop coverflow: interactive focus/rotation (original) 93 function initDesktopCoverflow() { 94 if (!window.matchMedia('(min-width: 576px)').matches) return; 95 var $stage = $(".al-coverflow__stage"); 96 if (!$stage.length) return; 97 var $items = $stage.find('.al-coverflow__item'); 98 var n = $items.length; 99 if (!n) return; 100 var container = document.querySelector('.al-coverflow'); 101 var styles = container ? getComputedStyle(container) : null; 102 var overlap = styles ? parseFloat(styles.getPropertyValue('--overlap')) || 24 : 24; 103 var tilt = styles ? parseFloat(styles.getPropertyValue('--tilt')) || 14 : 14; 104 var depth = styles ? parseFloat(styles.getPropertyValue('--depth')) || 90 : 90; 105 var arcY = styles ? parseFloat(styles.getPropertyValue('--arc-y')) || 16 : 16; 106 var active = Math.min(3, n - 1); // default focus (4th if exists) 107 var activated = false; // until user clicks, keep CSS-driven default 108 109 function scaleFor(d){ if (d<=0) return 1; if (d===1) return 0.94; if (d===2) return 0.88; return 0.84; } 110 function zFor(d){ return 100 - d; } 111 function transformFor(i){ 112 var k = i - active; var d = Math.abs(k); var s = Math.sign(k); 113 var x = k * overlap; 114 var y = d * (arcY*0.5); 115 var rz = -depth; // constant depth for equal visual overlap 116 var ry = s * tilt; 117 var sc = scaleFor(d); 118 return { 119 transform: 'translateX(calc(-50% + '+x+'px)) translateY('+y+'px) rotateY('+ry+'deg) translateZ('+rz+'px) scale('+sc+')', 120 zIndex: zFor(d) 121 }; 122 } 123 124 function apply() { 125 // Keep CSS-driven transforms; only control brightness via class on center slot 126 $items.removeClass('is-active'); 127 $items.eq(active).addClass('is-active'); 128 } 129 130 // Initial: mark active and apply explicit transforms 131 $items.eq(active).addClass('is-active'); 132 try { apply(); } catch(e){} 133 134 // Add thin center-biased hit zones (30px) for slots 3 and 5 (0-based 2,4) 135 function createCenterHitzones(widthPx){ 136 if (!widthPx) widthPx = 30; 137 var isDesktop = window.matchMedia('(min-width: 576px)').matches; 138 // clear previous 139 $stage.find('.al-hit-center').remove(); 140 if (!isDesktop) return; 141 var stageEl = $stage.get(0); 142 var srect = stageEl.getBoundingClientRect(); 143 // Place two slim bars centered around the stage center line 144 var centerX = srect.width / 2; 145 function addZone(leftPx, targetIdx){ 146 var zone = document.createElement('div'); 147 zone.className = 'al-hit-center'; 148 zone.style.position = 'absolute'; 149 zone.style.top = '0px'; 150 zone.style.left = leftPx + 'px'; 151 zone.style.width = widthPx + 'px'; 152 zone.style.height = srect.height + 'px'; 153 zone.style.background = 'transparent'; 154 zone.style.pointerEvents = 'auto'; 155 zone.style.zIndex = 1000; 156 zone.addEventListener('mouseenter', function(){ 157 $items.removeClass('is-hovering'); 158 $items.eq(targetIdx).addClass('is-hovering'); 159 }); 160 zone.addEventListener('mouseleave', function(){ 161 $items.eq(targetIdx).removeClass('is-hovering'); 162 }); 163 zone.addEventListener('click', function(ev){ 164 // If the click is inside the true center card, treat as center click (no move) 165 var cx = ev.clientX, cy = ev.clientY; 166 var centerEl = $items.get(active); 167 if (centerEl) { 168 var cr = centerEl.getBoundingClientRect(); 169 if (cx >= cr.left && cx <= cr.right && cy >= cr.top && cy <= cr.bottom) { 170 $items.eq(active).trigger('click'); 171 return; 172 } 173 } 174 ev.preventDefault(); ev.stopPropagation(); 175 $items.eq(targetIdx).trigger('click'); 176 }); 177 stageEl.appendChild(zone); 178 } 179 // Left of center targets slot 3 (index 2), right of center targets slot 5 (index 4) 180 addZone(centerX - widthPx, 2); 181 addZone(centerX, 4); 182 } 183 createCenterHitzones(100); 184 $(window).on('resize scroll', function(){ createCenterHitzones(100); }); 185 186 // Ensure no stray hit zones remain 187 $stage.find('.al-hit').remove(); 188 189 // Rotate sources one slot CCW (images move right) 190 function rotateOnceCCW() { 191 var $imgs = $stage.find('.al-coverflow__item img'); 192 if ($imgs.length < 2) return; 193 var lastIdx = $imgs.length - 1; 194 var last = { 195 src: $imgs.eq(lastIdx).attr('src'), 196 srcset: $imgs.eq(lastIdx).attr('srcset'), 197 alt: $imgs.eq(lastIdx).attr('alt') 198 }; 199 for (var i = lastIdx; i >= 1; i--) { 200 var prevSrc = $imgs.eq(i-1).attr('src'); 201 var prevSrcset = $imgs.eq(i-1).attr('srcset'); 202 var prevAlt = $imgs.eq(i-1).attr('alt'); 203 $imgs.eq(i).attr('src', prevSrc); 204 if (typeof prevSrcset !== 'undefined') $imgs.eq(i).attr('srcset', prevSrcset); else $imgs.eq(i).removeAttr('srcset'); 205 if (typeof prevAlt !== 'undefined') $imgs.eq(i).attr('alt', prevAlt); 206 } 207 $imgs.eq(0).attr('src', last.src);
208 if (typeof last.srcset !== 'undefined') $imgs.eq(0).attr('srcset', last.srcset); else $imgs.eq(0).removeAttr('srcset'); 209 if (typeof last.alt !== 'undefined') $imgs.eq(0).attr('alt', last.alt); 210 } 211 212 // Rotate sources one slot CW (images move left) 213 function rotateOnceCW() { 214 var $imgs = $stage.find('.al-coverflow__item img'); 215 if ($imgs.length < 2) return; 216 var first = { 217 src: $imgs.eq(0).attr('src'), 218 srcset: $imgs.eq(0).attr('srcset'), 219 alt: $imgs.eq(0).attr('alt') 220 }; 221 var lastIdx = $imgs.length - 1; 222 for (var i = 0; i < lastIdx; i++) { 223 var nextSrc = $imgs.eq(i+1).attr('src'); 224 var nextSrcset = $imgs.eq(i+1).attr('srcset'); 225 var nextAlt = $imgs.eq(i+1).attr('alt'); 226 $imgs.eq(i).attr('src', nextSrc); 227 if (typeof nextSrcset !== 'undefined') $imgs.eq(i).attr('srcset', nextSrcset); else $imgs.eq(i).removeAttr('srcset'); 228 if (typeof nextAlt !== 'undefined') $imgs.eq(i).attr('alt', nextAlt); 229 } 230 $imgs.eq(lastIdx).attr('src', first.src); 231 if (typeof first.srcset !== 'undefined') $imgs.eq(lastIdx).attr('srcset', first.srcset); else $imgs.eq(lastIdx).removeAttr('srcset'); 232 if (typeof first.alt !== 'undefined') $imgs.eq(lastIdx).attr('alt', first.alt); 233 } 234 235 // Per-card click only: rotate fixed steps so clicked slot becomes center 236 var rotating = false; 237 238 // Per-card click handler 239 $items.off('click').on('click', function(){ 240 if (!window.matchMedia('(min-width: 576px)').matches) return; 241 if (rotating) return; 242 var idx = $items.index(this); 243 var center = active; // 3 244 if (idx === center) return; 245 var steps = (idx < center) ? (center - idx) : (idx - center); 246 var dir = (idx < center) ? 'CCW' : 'CW'; 247 rotating = true; activated = true; 248 (function doStep(i){ 249 if (dir === 'CCW') rotateOnceCCW(); else rotateOnceCW(); 250 if (i+1 < steps) { setTimeout(function(){ doStep(i+1); }, 90); } 251 else { rotating = false; apply(); } 252 })(0); 253 }); 254 255 // Re-apply on resize breakpoint changes 256 $(window).on('resize', function(){ 257 if (window.matchMedia('(min-width: 576px)').matches) apply(); 258 }); 259 } 260 261 initDesktopCoverflow(); 262 $(window).on('resize', initDesktopCoverflow); 263 264 // Apps list (desktop): 2D overlapped accordion-style, no movement, first front 265 var isMobileSwiperPref = window.matchMedia('(max-width: 1024px)').matches; 266 function setupStaticOverlap() { 267 var $cont = $('.apps-swiper'); 268 if (!$cont.length) return; 269 $cont.removeClass('no-swiper').addClass('static-overlap'); 270 var $wrapper = $cont.find('.swiper-wrapper'); 271 var $slides = $wrapper.children('.swiper-slide'); 272 var currentFront = $slides.length ? ($slides.length - 1) : 0; // default: last card on top 273 var overlapAbs = 120; 274 function arrange() { 275 var n = $slides.length; if (!n) return; 276 var contW = $cont.innerWidth(); 277 var slideW = $slides.first().outerWidth(); 278 var totalW = n * slideW; 279 var overlap = 120; // default overlap 280 if (totalW > contW && n > 1) { 281 var needed = totalW - contW; 282 overlap = Math.max(20, Math.ceil(needed / (n - 1))); // at least 20px overlap 283 } 284 // Apply via CSS var 285 overlapAbs = overlap; 286 $cont.get(0).style.setProperty('--overlap', '-' + overlap + 'px'); 287 applyFront(currentFront); 288 // Fix card height for desktop to accommodate up to 14 exam lines 289 setTimeout(function(){ 290 var fixedMin = 505; // px 291 $cont.find('.swiper-slide .card').css('min-height', fixedMin + 'px'); 292 }, 0); 293 } 294 function applyFront(frontIdx){ 295 currentFront = frontIdx; 296 $slides.each(function(i, el){ 297 var t = ''; 298 if (i === frontIdx) { t = 'translateY(-6px)'; } 299 if (i > frontIdx) { t = (t? t + ' ' : '') + 'translateX(' + overlapAbs + 'px)'; } 300 el.style.transform = t; 301 }); 302 $slides.removeClass('is-front').eq(frontIdx).addClass('is-front'); 303 } 304 // 3D hover tilt per card on desktop 305 function initCardTilt(){ 306 var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 307 var isDesktop = window.matchMedia('(min-width: 1025px)').matches; 308 var maxDeg = 15; // max tilt degrees 309 var $cards = $slides.find('.card'); 310 $cards.each(function(){ 311 var el = this; 312 $(el).off('.tilt'); 313 // reset 314 el.style.setProperty('--tiltX', '0deg'); 315 el.style.setProperty('--tiltY', '0deg'); 316 if (!isDesktop || reduce) return; 317 $(el).on('mousemove.tilt', function(ev){ 318 var r = el.getBoundingClientRect(); 319 var px = (ev.clientX - r.left) / r.width - 0.5; 320 var py = (ev.clientY - r.top) / r.height - 0.5; 321 var rx = (-py * maxDeg).toFixed(2) + 'deg'; 322 var ry = ( px * maxDeg).toFixed(2) + 'deg'; 323 el.style.setProperty('--tiltX', rx); 324 el.style.setProperty('--tiltY', ry); 325 }).on('mouseleave.tilt', function(){ 326 el.style.setProperty('--tiltX', '0deg'); 327 el.style.setProperty('--tiltY', '0deg'); 328 }); 329 }); 330 } 331 arrange(); 332 initCardTilt(); 333 $(window).on('resize', function(){ arrange(); initCardTilt(); }); 334 // Front highlight + push right block like accordion 335 $slides.off('click').on('click', function(){ applyFront($(this).index()); }); 336 } 337 if (isMobileSwiperPref) { 338 // Mobile uses accordion section; ensure swiper area doesn't initialize 339 $('.apps-swiper').addClass('no-swiper'); 340 } else { 341 setupStaticOverlap(); 342 } 343 344 // Mobile coverflow: start with the center (4th) image at the left edge 345 function alignMobileCoverflow() { 346 if (window.matchMedia('(max-width: 575.98px)').matches) { 347 var $stage = $(".al-coverflow__stage"); 348 if ($stage.length) { 349 var $items = $stage.find('.al-coverflow__item'); 350 if ($items.length >= 4) { 351 var stageEl = $stage.get(0); 352 var targetEl = $items.get(3); // 0-based index: 3 = 4th (center on desktop) 353 var desired = (targetEl.offsetLeft || 0) - (stageEl.clientWidth - targetEl.clientWidth) / 2; 354 if (desired < 0) desired = 0; 355 $stage.scrollLeft(desired); 356 } 357 } 358 } 359 } 360 // Initial alignment after layout/imageload 361 setTimeout(alignMobileCoverflow, 0); 362 $(window).on('load resize', alignMobileCoverflow); 363 364 // Mobile accordion: show only one store button based on OS, align right 365 function detectOS(){ 366 var ua = navigator.userAgent || ''; 367 var iOS = /iPhone|iPad|iPod/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); 368 var android = /Android/i.test(ua); 369 return iOS ? 'ios' : (android ? 'android' : 'other'); 370 } 371 function applyMobileDownloadButtons(){ 372 if (!window.matchMedia('(max-width: 1024px)').matches) return; 373 var os = detectOS(); 374 var $acc = $('.apps-accordion-xs'); 375 if (!$acc.length) return; 376 $acc.find('.apps-xs-downloads').each(function(){ 377 var $box = $(this); 378 var $gp = $box.find('.btn-googleplay');
379 var $as = $box.find('.btn-appstore'); 380 // reset 381 $gp.show().text('Google Play'); 382 $as.show().text('App Store'); 383 if (os === 'ios') { $gp.hide(); $as.text('ì± ë¤ì´ë¡ë'); } 384 else if (os === 'android') { $as.hide(); $gp.text('ì± ë¤ì´ë¡ë'); } 385 // align to right 386 $box.addClass('justify-content-end'); 387 }); 388 } 389 applyMobileDownloadButtons(); 390 $(window).on('resize', applyMobileDownloadButtons); 391 392 // Note box uses fixed width via CSS; JS sizing removed 393 }); 394</script>
394 395 396<!-- SEO: Structured data for WebSite and Organization -->
397<script type="application/ld+json"> 398{ 399 "@context": "https://schema.org", 400 "@type": "WebSite", 401 "name": "ìíë¡", 402 "url": "https://www.alphalaw.co.kr/", 403 "potentialAction": { 404 "@type": "SearchAction", 405 "target": "https://www.alphalaw.co.kr/case/question/{search_term_string}", 406 "query-input": "required name=search_term_string" 407 } 408} 409</script>
vendor: 1 bytes, line 409
409
410<script type="application/ld+json"> 411{ 412 "@context": "https://schema.org", 413 "@type": "Organization", 414 "name": "ìíë¡", 415 "url": "https://www.alphalaw.co.kr/", 416 "logo": "https://www.alphalaw.co.kr/favicon.ico", 417 "sameAs": [ 418 "https://apps.apple.com/kr/developer/seungyoung-hong/id1355483812?see-all=i-phone-apps", 419 "https://play.google.com/store/apps/collection/cluster?gsr=SltqGG1MOHkzaHV0QXhmREhKMEdHWDhwa3c9PbICPgohCh1rci5wb25zdGVyLmFscGhhbGF3LmNpdmlscHJvYxAHEhcIARITNzk3MTA4OTQ3MDIyMTQ0ODc3NBgA:S:ANO1ljL7EZc" 420 ] 421} 422</script>
422 423 424<style> 425 /* Scoped hero typography and spacing */ 426 .al-hero { margin-top: 2rem; padding-top: 2.333rem; padding-bottom: 2.25rem; position: relative; overflow: hidden; } 427 /* Background gray sphere gradient */ 428 .al-hero::before { 429 content: ""; 430 position: absolute; 431 inset: -20% -5% -30% -5%; 432 background: radial-gradient(ellipse at 70% 35%, 433 rgba(210,214,220,.65) 0%, 434 rgba(226,230,236,.45) 28%, 435 rgba(238,241,246,.25) 52%, 436 rgba(246,248,252,.12) 66%, 437 rgba(255,255,255,0) 78% 438 ); 439 filter: blur(2px); 440 z-index: 0; 441 pointer-events: none; 442 } 443 .al-hero .row { position: relative; z-index: 1; } 444 /* Mobile: make background gradient darker toward bottom */ 445 @media (max-width: 575.98px) { 446 .al-hero { margin-top: 0 !important; } 447 .al-hero::before { 448 inset: -5% 0 -20% 0; 449 background: linear-gradient(to bottom, 450 rgba(195,199,206,.75) 0%, 451 rgba(210,214,220,.60) 30%, 452 rgba(226,230,236,.40) 60%, 453 rgba(238,241,246,.20) 80%, 454 rgba(255,255,255,0) 100% 455 ); 456 filter: blur(270px); /* make it much softer on mobile */ 457 will-change: filter; 458 } 459 } 460 .al-hero__content { max-width: 760px; margin-inline: auto; } 461 .al-hero__title { 462 font-weight: 800; 463 letter-spacing: -0.01em; /* subtle tightening for Korean */ 464 line-height: 1.15; 465 margin-top: 7px; /* nudge down the title */ 466 margin-bottom: 0.75rem; 467 } 468 @media (max-width: 991.98px) { .al-hero__title { font-size: 2.25rem; } } 469 @media (min-width: 992px) { .al-hero__title { font-size: 3rem; } } 470 .al-hero__subtitle { 471 font-size: 1.0625rem; /* ~17px for long KR copy */ 472 letter-spacing: 0.005em; 473 line-height: 1.75; 474 color: var(--bs-secondary-color); 475 } 476 /* Mobile: slightly tighter subtitle leading */ 477 @media (max-width: 575.98px) { 478 .al-hero__subtitle { line-height: 1.55; } 479 } 480 .al-hero__actions .btn { letter-spacing: 0.02em; } 481 .al-hero__actions .btn-lg { padding-inline: 1.25rem; } 482 .al-hero__divider { border-color: rgba(0,0,0,.06) !important; } 483 .al-hero__logo { width: 150px; height: auto; border-radius: 14px; box-shadow: 0 6px 14px rgba(0,0,0,.15); margin-bottom: 0; display: block; } 484 .al-sec-title { font-weight: 800; } 485 .al-hero__list { font-size: .9rem; line-height: 1.6; color: var(--bs-secondary-color); padding-left: 1.1rem; margin-bottom: 1.25rem; } 486 .al-hero__list li { margin-bottom: .25rem; } 487 /* Screenshot: simple image, sized to match text */ 488 .al-shot { width: 100%; max-width: 180px; margin: 0 auto; } 489 @media (min-width: 992px) { .al-shot { max-width: 180px; } } 490 @media (min-width: 1200px) { .al-shot { max-width: 180px; } } 491 .al-shot-img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 28px rgba(0,0,0,.16); display: block; } 492 /* Apps Swiper sizing */ 493 .apps-swiper { padding: 24px 32px 10px 20px; width: 100%; overflow: visible; } 494 /* Desktop: clip horizontal overflow so last card doesn't spill out */ 495 @media (min-width: 1025px) { 496 .apps-swiper-lg .apps-swiper { overflow-x: hidden; overflow-y: visible; } 497 } 498 .apps-swiper .swiper-wrapper { transform: none !important; } 499 .apps-swiper .swiper-slide { width: 280px; position: relative; z-index: 1; margin-right: var(--overlap, -120px); transition: transform .25s ease, box-shadow .25s ease; } 500 .apps-swiper .swiper-slide:hover { z-index: 6; } 501 .apps-swiper .swiper-slide.is-front { z-index: 5; transform: translateY(-6px); } 502 /* Desktop fixed card height assuming up to 14 exam lines */ 503 @media (min-width: 1025px) { 504 .apps-swiper-lg .card { min-height: 505px; } 505 } 506 507 /* Volumetric âgold-barâ card styling (desktop cards) */ 508 @media (min-width: 1025px) { 509 /* Add perspective on slide so card 3D rotate feels natural */ 510 .apps-swiper-lg .swiper-slide { perspective: 800px; isolation: isolate; } 511 .apps-swiper-lg .card { 512 position: relative; 513 border: none; 514 border-radius: 18px; 515 overflow: hidden; 516 background-clip: padding-box; 517 /* Deep drop + subtle bevel */ 518 box-shadow: 519 0 16px 30px rgba(0,0,0,.22), 520 0 6px 14px rgba(0,0,0,.12), 521 inset 0 1px 0 rgba(255,255,255,.35), 522 inset 0 -3px 8px rgba(0,0,0,.12); 523 transform-style: preserve-3d; 524 transform: translateZ(0) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)); 525 transition: transform .18s ease-out, box-shadow .25s ease, filter .25s ease; 526 } 527 /* More generous padding so content sits more centrally (legacy body) */ 528 .apps-swiper-lg .card .card-body { padding: 1.4rem 1.25rem 1.6rem; } 529 /* Split desktop card: colored head + white main */ 530 .apps-swiper-lg .card { display: flex; flex-direction: column; } 531 .apps-swiper-lg .card .al-card-head { 532 position: relative; 533 padding: 1.1rem 1.25rem .65rem; 534 border-top-left-radius: 18px; border-top-right-radius: 18px; 535 border-bottom: 1px solid rgba(0,0,0,.08); 536 overflow: hidden; 537 } 538 /* Add subtle gloss/overlay on colored head for visual depth */ 539 .apps-swiper-lg .card .al-card-head::before { 540 content: ""; 541 position: absolute; inset: 0; pointer-events: none; 542 background: 543 linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 58%) no-repeat, 544 radial-gradient(140% 80% at 50% -30%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%); 545 mix-blend-mode: soft-light; 546 opacity: .9; 547 } 548 /* Title/subtext emphasis for readability */ 549 .apps-swiper-lg .card .al-card-head .card-title { margin-bottom: .4rem; font-weight: 600; letter-spacing: .01em; } 550 .apps-swiper-lg .card .al-card-head .small, .apps-swiper-lg .card .al-card-head .text-secondary { opacity: .9; } 551 .apps-swiper-lg .card .al-card-main { background: #fff; padding: 1rem 1.25rem 1.2rem; display: flex; flex-direction: column; flex: 1; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } 552 /* Clean typography on desktop cards: no emboss/deboss shadows */ 553 .apps-swiper-lg .card .card-title, 554 .apps-swiper-lg .card .card-body, 555 .apps-swiper-lg .card .small { text-shadow: none; } 556 .apps-swiper-lg .card .btn { text-shadow: none; } 557 /* Specular highlight (no gold tint) */ 558 .apps-swiper-lg .card::before { 559 content: ""; 560 position: absolute; 561 inset: 0; 562 pointer-events: none; 563 border-radius: inherit; 564 background: 565 /* diagonal sweep highlight */ 566 linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 14%, rgba(255,255,255,0) 32%) 0 0 / 220% 220% no-repeat, 567 /* top gloss */ 568 linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 55%) no-repeat, 569 /* base vignette to add depth (neutral) */ 570 radial-gradient(120% 65% at 50% -20%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%), 571 radial-gradient(100% 60% at 50% 120%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%); 572 mix-blend-mode: normal; /* no color tint, keep neutral highlights */ 573 opacity: 0; /* no initial light */ 574 transition: opacity .2s ease-out, background-position .9s ease; 575 } 576 /* Hide inner rim layer to avoid squared artifact under rounded corners */ 577 .apps-swiper-lg .card::after { content: none; } 578 /* Hover: slight lift + sheen sweep */ 579 .apps-swiper-lg .card:hover { 580 transform: translateY(-8px) scale(1.01) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)); 581 box-shadow: 582 0 24px 44px rgba(0,0,0,.28), 583 0 10px 20px rgba(0,0,0,.12), 584 inset 0 1px 0 rgba(255,255,255,.35), 585 inset 0 -3px 8px rgba(0,0,0,.12); 586 } 587 .apps-swiper-lg .card:hover::before { 588 opacity: .25; 589 background-position: 120% 0, center, center, center, center; 590 } 591 /* Reduce motion preference */ 592 @media (prefers-reduced-motion: reduce) { 593 .apps-swiper-lg .card { transition: none; } 594 .apps-swiper-lg .card::before { transition: none; } 595 } 596 } 597 /* Fallback to simple grid when Swiper (CDN) is unavailable */ 598 .apps-swiper.no-swiper .swiper-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; } 599 .apps-swiper.no-swiper .swiper-slide { flex: 0 0 100%; width: 100%; } 600 @media (min-width: 576px) { 601 .apps-swiper.no-swiper .swiper-slide { flex-basis: calc(50% - 1rem); } 602 } 603 @media (min-width: 992px) { 604 .apps-swiper.no-swiper .swiper-slide { flex-basis: calc(33.333% - 1rem); } 605 } 606 .apps-swiper.no-swiper .swiper-button-prev, 607 .apps-swiper.no-swiper .swiper-button-next, 608 .apps-swiper.no-swiper .swiper-pagination { display: none !important; } 609 /* Mobile: keep slide-like horizontal scroll if Swiper is unavailable */ 610 @media (max-width: 575.98px) { 611 .apps-swiper.no-swiper .swiper-wrapper { 612 display: flex; 613 flex-wrap: nowrap; 614 overflow-x: auto; 615 gap: 12px; 616 -webkit-overflow-scrolling: touch; 617 scroll-snap-type: x mandatory; 618 padding-bottom: 8px; 619 } 620 .apps-swiper.no-swiper .swiper-slide { 621 flex: 0 0 80%; /* show like a slide */ 622 width: auto; 623 scroll-snap-align: center; 624 } 625 } 626 /* Show/hide sections by 1024px breakpoint */ 627 .apps-accordion-xs { display: none; } 628 .apps-swiper-lg { display: block; } 629 @media (max-width: 1024px) { 630 .apps-accordion-xs { display: block; } 631 .apps-swiper-lg { display: none; } 632 /* Align mobile section heading with accordion text start and add spacing */ 633 .apps-accordion-xs .apps-xs-head { padding-left: 1.25rem; padding-right: 1.25rem; margin-bottom: 1rem; } 634 /* Mobile accordion: apply header colors only when expanded */ 635 .apps-accordion-xs .accordion-button { position: relative; background: transparent; color: inherit; border: 0; box-shadow: none; padding: .9rem 1.1rem; border-radius: 12px; transition: background-color .15s ease, box-shadow .2s ease; } 636 .apps-accordion-xs .accordion-button:focus { box-shadow: none; border-color: transparent; outline: none; } 637 .apps-accordion-xs .accordion-button:not(.collapsed) { 638 background: var(--head-bg, transparent); 639 color: var(--head-color, inherit); 640 box-shadow: 0 4px 12px rgba(0,0,0,.06); 641 border: 0; 642 } 643 /* Subtle gloss and depth on expanded header */ 644 .apps-accordion-xs .accordion-button:not(.collapsed)::before { 645 content: ""; position: absolute; inset: 0; pointer-events: none; 646 background: 647 linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%) no-repeat, 648 radial-gradient(140% 80% at 50% -30%, rgba(255,255,255,.20), rgba(255,255,255,0) 70%); 649 mix-blend-mode: soft-light; opacity: .9; border-top-left-radius: 12px; border-top-right-radius: 12px; 650 } 651 /* Divider between header and body when expanded */ 652 .apps-accordion-xs .accordion-button:not(.collapsed) { border-bottom: 1px solid rgba(0,0,0,.07); } 653 /* Crisper title and meta inside the colored head */ 654 .apps-accordion-xs .accordion-button .small { opacity: .9; } 655 .apps-accordion-xs .accordion-button { font-weight: 600; letter-spacing: .01em; } 656 /* Focus-visible ring for accessibility */ 657 .apps-accordion-xs .accordion-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13,110,253,.18); } 658 /* Keep chevron size visually balanced */ 659 .apps-accordion-xs .accordion-button::after { -webkit-mask-size: .85rem .85rem; mask-size: .85rem .85rem; } 660 } 661 /* Make the chevron icon follow text color using mask + background-color */ 662 .apps-accordion-xs .accordion-button::after { 663 background-image: none !important; /* override bootstrap */ 664 color: inherit; /* follow title color */ 665 background-color: currentColor; /* draw stroke via mask */ 666 /* Stroke-only chevron (no fill) using CSS mask */ 667 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' d='M1.5 5.5L8 12l6.5-6.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 668 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' d='M1.5 5.5L8 12l6.5-6.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 669 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; 670 -webkit-mask-position: center; mask-position: center; 671 -webkit-mask-size: 0.9rem 0.9rem; mask-size: 0.9rem 0.9rem; 672 } 673 /* Mobile store buttons: use default outline style on white background */ 674 .apps-accordion-xs .apps-xs-downloads .btn { background: transparent; } 675 676 /* Coverflow (stacked overlap around center, spherical curve) */ 677 .al-coverflow { 678 --shot-w: 170px; 679 --overlap: 24px; 680 --tilt: 14deg; 681 --depth: 90px; 682 --arc-y: 16px; 683 position: relative; 684 perspective: 600px; 685 margin-top: 0; /* mobile/tablet: no lift; desktop override below */ 686 } 687 @media (min-width: 992px) { .al-coverflow { margin-top: -50px; } } 688 .al-coverflow__stage { 689 position: relative; 690 height: calc(var(--shot-w) * 1.9); 691 width: calc(var(--shot-w) + 6 * var(--overlap)); 692 margin-left: auto; 693 margin-right: auto; 694 overflow: visible; 695 } 696 .al-coverflow__item { 697 position: absolute; 698 top: 0; left: 50%; 699 width: var(--shot-w); 700 transform-style: preserve-3d; 701 transition: transform .4s ease, filter .4s ease, opacity .4s ease; 702 } 703 .al-coverflow__img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); display: block; aspect-ratio: 215 / 466; } 704 /* Slightly larger clickable area per card (desktop) */ 705 @media (min-width: 576px) { 706 .al-coverflow__item { cursor: pointer; } 707 .al-coverflow__item::before { 708 content: ""; 709 position: absolute; 710 /* expand a little horizontally, keep vertical margin for safety */ 711 left: -10px; right: -10px; top: 10%; bottom: 10%; 712 background: transparent; 713 } 714 .al-hit-center { cursor: pointer; } 715 /* Bias adjacency to center: widen toward center by +10px */ 716 .al-coverflow__stage > .al-coverflow__item:nth-child(3)::before { right: -80px; } /* 3rd slot */ 717 .al-coverflow__stage >
717 .al-coverflow__item:nth-child(5)::before { left: -80px; } /* 5th slot */ 718 } 719 /* positions centered on 4th item (equal visual overlap, progressive scaling) */ 720 .al-coverflow__item:nth-child(1) { transform: translateX(calc(-50% - 3 * var(--overlap))) rotateY(var(--tilt)) translateZ(calc(-1 * var(--depth))) scale(.84); filter: brightness(.88) saturate(.88); z-index: 2; } 721 .al-coverflow__item:nth-child(2) { transform: translateX(calc(-50% - 2 * var(--overlap))) rotateY(var(--tilt)) translateZ(calc(-1 * var(--depth))) scale(.88); filter: brightness(.9) saturate(.9); z-index: 3; } 722 .al-coverflow__item:nth-child(3) { transform: translateX(calc(-50% - 1 * var(--overlap))) rotateY(var(--tilt)) translateZ(calc(-1 * var(--depth))) scale(.94); filter: brightness(.94) saturate(.94); z-index: 4; } 723 .al-coverflow__item:nth-child(4) { transform: translateX(-50%) rotateY(0) translateZ(0) scale(1); z-index: 7; } 724 .al-coverflow__item:nth-child(5) { transform: translateX(calc(-50% + 1 * var(--overlap))) rotateY(calc(-1 * var(--tilt))) translateZ(calc(-1 * var(--depth))) scale(.94); filter: brightness(.94) saturate(.94); z-index: 4; } 725 .al-coverflow__item:nth-child(6) { transform: translateX(calc(-50% + 2 * var(--overlap))) rotateY(calc(-1 * var(--tilt))) translateZ(calc(-1 * var(--depth))) scale(.88); filter: brightness(.9) saturate(.9); z-index: 3; } 726 .al-coverflow__item:nth-child(7) { transform: translateX(calc(-50% + 3 * var(--overlap))) rotateY(calc(-1 * var(--tilt))) translateZ(calc(-1 * var(--depth))) scale(.84); filter: brightness(.88) saturate(.88); z-index: 2; } 727 /* dim/active states (desktop) */ 728 @media (min-width: 576px) { 729 .al-coverflow__item { filter: brightness(.78) saturate(.9); } 730 .al-coverflow__item.is-active, .al-coverflow__item:hover, .al-coverflow__item.is-hovering { filter: none; } 731 } 732 @media (max-width: 575.98px) { 733 .al-coverflow { perspective: none; } 734 .al-coverflow__stage { height: auto; display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; width: auto; } 735 .al-coverflow__item { position: relative; left: auto; transform: none !important; flex: 0 0 var(--shot-w); filter: none !important; } 736 } 737 738 /* (no protective overrides; rely on original coverflow CSS) */ 739 /* iPhone-style frame */ 740 .al-device { width: 100%; position: relative; } 741 .al-device.iphone { max-width: 420px; margin-inline: auto; } 742 .al-device__body { 743 position: relative; width: 100%; 744 border-radius: 32px; 745 background: linear-gradient(145deg, #0f0f12, #1b1b20); 746 box-shadow: 747 0 18px 50px rgba(0,0,0,.35), 748 inset 0 0 0 1px rgba(255,255,255,.06), 749 inset 0 0 0 2px rgba(0,0,0,.6); 750 padding: 14px; /* bezel */ 751 } 752 .al-device__screen { 753 position: relative; 754 width: 100%; 755 border-radius: 24px; 756 overflow: hidden; 757 background: #000; 758 } 759 .al-device__img { 760 width: 100%; 761 height: auto; /* keep original aspect ratio */ 762 object-fit: contain; /* avoid cropping */ 763 display: block; 764 } 765 .al-device__notch { 766 position: absolute; top: 8px; left: 50%; transform: translateX(-50%); 767 width: 42%; height: 24px; 768 background: #000; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; 769 box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; z-index: 3; 770 } 771 .al-device__line { position: absolute; inset: 0; border-radius: 32px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset; pointer-events: none; } 772 /* Alpha cases section fixed pixel widths (~70% of container width) */ 773 #alpha-cases .al-cases-wrap { margin-left: auto; margin-right: auto; text-align: center; padding-top: 32px; } 774 /* xxl: container-xxl max-width 1320px => ~70% = 924px */ 775 @media (min-width: 1400px) { #alpha-cases .al-cases-wrap { width: 924px; } } 776 /* xl: 1140px => ~70% = 798px */ 777 @media (min-width: 1200px) and (max-width: 1399.98px) { #alpha-cases .al-cases-wrap { width: 798px; } } 778 /* lg: 960px => ~70% = 672px */ 779 @media (min-width: 992px) and (max-width: 1199.98px) { #alpha-cases .al-cases-wrap { width: 672px; } } 780 /* md: 720px => ~70% = 504px */ 781 @media (min-width: 768px) and (max-width: 991.98px) { #alpha-cases .al-cases-wrap { width: 504px; } } 782 /* sm: 540px => ~70% = 378px */ 783 @media (min-width: 576px) and (max-width: 767.98px) { #alpha-cases .al-cases-wrap { width: 378px; } } 784 /* xs: full width for usability */ 785 @media (max-width: 575.98px) { #alpha-cases .al-cases-wrap { width: 100%; } } 786 787 /* Alpha cases title and subtitle */ 788 #alpha-cases .al-cases-title { 789 font-size: 1.65rem !important; /* override global h2 !important */ 790 font-weight: 800; 791 letter-spacing: -0.01em; 792 line-height: 1.15; 793 } 794 /* Alpha cases subtitle */ 795 #alpha-cases .al-cases-subtitle { 796 font-size: 1.0625rem; 797 letter-spacing: 0.005em; 798 line-height: 1.75; 799 color: var(--bs-secondary-color); 800 } 801 /* Alpha cases note: match hero list sizing */ 802 #alpha-cases .al-cases-note { 803 font-size: .9rem; 804 line-height: 1.6; 805 color: var(--bs-secondary-color); 806 } 807 /* Stylish short divider with center dot and glow; large vertical spacing */ 808 #alpha-cases .al-divider-short { 809 position: relative; 810 width: 220px; 811 height: 2px; 812 margin: 56px auto; /* generous space above/below */ 813 background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.18), rgba(0,0,0,0)); 814 border-radius: 2px; 815 } 816 #alpha-cases .al-divider-short::after { 817 content: ""; 818 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 819 width: 8px; height: 8px; border-radius: 50%; 820 background: var(--bs-primary, #0d6efd); 821 box-shadow: 0 0 0 6px rgba(13,110,253,.12); 822 } 823 824 /* Note width box: fixed width (won't overflow on small screens) */ 825 #alpha-cases .al-note-box { display: inline-block; width: 640px; max-width: 100%; } 826 #alpha-cases .al-note-first { display: inline; } 827 /* Case item title color as link blue */ 828 #alpha-cases .al-case-title { color: var(--bs-primary); } 829 830 /* Cases: tidy layout + polish */ 831 #alpha-cases .al-cases-search .form-control { max-width: 460px; } 832 #alpha-cases .al-cases-search { margin-top: 32px !important; margin-bottom: 32px !important; }
833 #alpha-cases .al-cases-grid { max-width: 1024px; } 834 #alpha-cases .al-case-card { border: 1px solid rgba(0,0,0,.08); border-radius: 14px; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } 835 #alpha-cases .al-case-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08); border-color: rgba(0,0,0,.12); } 836 #alpha-cases .al-case-card .card-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; height: 100%; } 837 #alpha-cases .al-case-card .al-case-title { font-weight: 700; margin-bottom: .5rem; } 838 #alpha-cases .al-case-card .al-case-desc { color: var(--bs-secondary-color); } 839 #alpha-cases .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; max-height: calc(1.55em * 3); } 840 /* Prevent mid-word wrapping in alpha-cases section */ 841 #alpha-cases, #alpha-cases p, #alpha-cases .al-case-title, #alpha-cases .al-case-desc, 842 #alpha-cases .al-hero__subtitle, #alpha-cases .al-cases-note { word-break: keep-all; overflow-wrap: normal; } 843 844 /* Prevent mid-word wrapping in hero section */ 845 .al-hero, .al-hero p, .al-hero__title, .al-hero__subtitle, .al-hero__list { word-break: keep-all; overflow-wrap: normal; } 846 /* Hero defaults (no overrides) are kept above */ 847 848 /* Timeline list emphasizing recency (year in left rail) */ 849 #alpha-cases .al-cases-timeline { position: relative; margin-top: 36px; padding-left: 0; padding-right: 0; } 850 #alpha-cases .al-cases-timeline > * { position: relative; z-index: 1; } 851 #alpha-cases .al-cases-timeline::before { content: none; } 852 #alpha-cases .al-timeline { 853 position: relative; 854 padding: 0; 855 padding-left: 0; 856 z-index: 0; 857 margin-top: 0; 858 } 859 #alpha-cases .al-timeline::before { 860 content: "" !important; 861 position: absolute; 862 inset: -18px -28px -72px -28px; 863 background: linear-gradient(180deg, 864 rgba(150,150,158,0.16) 0%, 865 rgba(170,170,180,0.10) 55%, 866 rgba(192,192,202,0.06) 72%, 867 rgba(218,218,228,0.04) 84%, 868 rgba(255,255,255,0) 100% 869 ); 870 clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%); 871 pointer-events: none; 872 z-index: 0; 873 } 874 @media (max-width: 575.98px) { 875 #alpha-cases .al-cases-timeline::before { 876 content: ""; 877 position: absolute; 878 top: -12px; 879 bottom: -60px; 880 left: 0; 881 right: 0; 882 background: linear-gradient(180deg, 883 rgba(150,150,158,0.16) 0%, 884 rgba(170,170,180,0.10) 55%, 885 rgba(192,192,202,0.06) 72%, 886 rgba(218,218,228,0.04) 84%, 887 rgba(255,255,255,0) 100% 888 ); 889 clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%); 890 pointer-events: none; 891 z-index: 0; 892 } 893 #alpha-cases .al-timeline::before { content: none !important; } 894 #alpha-cases .al-cases-timeline { margin-top: 28px; padding-left: .75rem; padding-right: .75rem; } 895 #alpha-cases .al-timeline { margin-left: 0; margin-right: 0; } 896 #alpha-cases .al-cases-timeline .al-timeline { width: 100%; max-width: 100% !important; } 897 } 898 @media (min-width: 576px) { 899 #alpha-cases .al-cases-timeline::before { content: none; } 900 #alpha-cases .al-timeline::before { 901 content: "" !important; 902 inset: -18px -28px -72px -28px; 903 background: linear-gradient(180deg, 904 rgba(150,150,158,0.16) 0%, 905 rgba(170,170,180,0.10) 55%, 906 rgba(192,192,202,0.06) 72%, 907 rgba(218,218,228,0.04) 84%, 908 rgba(255,255,255,0) 100% 909 ); 910 clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%); 911 } 912 #alpha-cases .al-cases-timeline { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } 913 } 914 @media (min-width: 992px) { 915 #alpha-cases .al-cases-timeline { margin-top: 48px; } 916 #alpha-cases .al-timeline::before { 917 inset: -16px -28px -72px -28px; 918 } 919 } 920 #alpha-cases .al-timeline-item { display: grid; grid-template-columns: 72px 1fr; column-gap: 12px; padding: 12px 0; position: relative; z-index: 1; } 921 #alpha-cases .al-timeline-item::before { content: none; } 922 923 /* Emphasized paragraphs: force body color (black) */ 924 #alpha-cases .al-emph { color: var(--bs-body-color) !important; } 925 /* Home-only timeline rail: recreate with custom ::after (top/bottom spaced) and disable global one */ 926 #alpha-cases .al-time { color: #6c757d; font-weight: 400; opacity: .7; text-align: right; padding-top: 3px; padding-right: 12px; position: relative; } 927 #alpha-cases .al-time::after { content: "" !important; position: absolute; top: 6px !important; bottom: 6px !important; right: 0; width: 2px; background: var(--bs-border-color, #e9ecef) !important; } 928 @media (max-width: 575.98px) { #alpha-cases .al-timeline-item { grid-template-columns: 56px 1fr; } } 929 930 /* Make entire text block clickable and add progressive fade */ 931 #alpha-cases .al-case-link { display: block; text-decoration: none; } 932 #alpha-cases .al-timeline-item { --fade: 1; } 933 #alpha-cases .al-timeline-item:nth-child(1) { --fade: 1; } 934 #alpha-cases .al-timeline-item:nth-child(2) { --fade: .92; } 935 #alpha-cases .al-timeline-item:nth-child(3) { --fade: .84; } 936 #alpha-cases .al-timeline-item:nth-child(4) { --fade: .76; } 937 #alpha-cases .al-timeline-item:nth-child(5) { --fade: .68; } 938 #alpha-cases .al-case-link { opacity: var(--fade); transition: opacity .15s ease; } 939 #alpha-cases .al-case-link:hover { opacity: 1; } 940</style> 941 942 943<div class="container-xxl"> 944 <section class="px-4 my-5 border-bottom al-hero al-hero__divider"> 945 <div class="row align-items-center g-4 g-lg-5"> 946 <div class="col-12 col-lg-6"> 947 <div class="d-flex align-items-start gap-3 mb-4"> 948 <img class="al-hero__logo" src="/assets/img/app_icon_profile_title.png" alt="ìíë¡ ìì´ì½" referrerpolicy="no-referrer" decoding="async"> 949 <div class="text-start"> 950 <h1 class="al-hero__title text-body-emphasis mb-3">ìíë¡ ë²í OX ì´í ì리ì¦</h1> 951 <p class="al-hero__subtitle mb-0">기ì¶ë¬¸ì 를 OX ì§ë¬¸ì¼ë¡ ì¬êµ¬ì±íì¬ í´ì¦ì´íë¡ ë§ë¤ììµëë¤.</p> 952 </div> 953 </div> 954 <div class="al-hero__content text-start"> 955 <ul class="al-hero__list"> 956 <li>ì¶ì ê¸°ê´ ê³µì ë°í ì ëµì ë°ë¼ ì íí ì /ì¤ë¥¼ í기íììµëë¤.</li> 957 <li>ê¸°ì¶ ì´í ê°ì ë ë²ë ¹, ë³ê²½ë íë¡ë ë¹ ë¥´ê² ì ëµÂ·í´ì¤ì ë°ìëê³ ë³ë ë¤ì´ë¡ë ìì´ ì¤ìê°ì¼ë¡ ì´íì ì ì©ë©ëë¤.</li> 958 <li>ê·¸ë¼ìë ì못ë ì ë³´ê° ìë¤ë©´ ê° ë¬¸ì ë³ë¡ "ì¤ë¥ì ë³´í기" 기ë¥ì íµí´ ì ë³´í ì ììµëë¤.</li> 959 <li>í´ì¤ì ìµëí ë°ì´ì´ì¤ ìì´ ê´ë ¨ 조문·íë¡ë¥¼ ê·¸ëë¡ ì ìíë ë°©ìì¼ë¡ ìì±íììµëë¤.</li> 960 </ul> 961 962 </div> 963 </div> 964 <div class="col-12 col-lg-6"> 965 <div class="al-coverflow ms-lg-auto"> 966 <div class="al-coverflow__stage"> 967 968 <div class="al-coverflow__item"> 969 <img class="al-coverflow__img" 970 src="/assets/img/screen/alphalaw_app_main.jpg" 971 sizes="(min-width: 992px) 170px, 80vw" 972 width="215" height="466" 973 alt="ìíë¡ ì± ë©ì¸ íë©´" loading="lazy" referrerpolicy="no-referrer"> 974 </div> 975 <div class="al-coverflow__item"> 976 <img class="al-coverflow__img" src="/assets/img/screen/alphalaw_app_category_setting.jpg" sizes="(min-width: 992px) 170px, 80vw" width="215" height="466" alt="ìíë¡ ì± ë¨ì ì¤ì íë©´" loading="lazy" referrerpolicy="no-referrer"> 977 </div> 978 <div class="al-coverflow__item"> 979 <img class="al-coverflow__img" src="/assets/img/screen/alphalaw_app_explanation.jpg" sizes="(min-width: 992px) 170px, 80vw" width="215" height="466" alt="ìíë¡ ì± í´ì¤ íë©´" loading="lazy" referrerpolicy="no-referrer"> 980 </div> 981 <div class="al-coverflow__item"> 982 <img class="al-coverflow__img" src="/assets/img/screen/alphalaw_app_100_problem_challenge.jpg" sizes="(min-width: 992px) 170px, 80vw" width="215" height="466" alt="ìíë¡ ì± ëì 100ì 문ì íì´ íë©´" referrerpolicy="no-referrer"> 983 </div> 984 <div class="al-coverflow__item"> 985 <img class="al-coverflow__img" src="/assets/img/screen/alphalaw_app_incorrect_review.jpg" sizes="(min-width: 992px) 170px, 80vw" width="215" height="466" alt="ìíë¡ ì± ì¤ëµë ¸í¸ íë©´" loading="lazy" referrerpolicy="no-referrer"> 986 </div> 987 <div class="al-coverflow__item"> 988 <img class="al-coverflow__img" src="/assets/img/screen/alphalaw_app_exam_year.jpg" sizes="(min-width: 992px) 170px, 80vw" width="215" height="466" alt="ìíë¡ ì± ìí ë° íì°¨ ì¤ì íë©´" loading="lazy" referrerpolicy="no-referrer"> 989 </div> 990 <div class="al-coverflow__item"> 991 <img class="al-coverflow__img" src="/assets/img/screen/alphalaw_app_category_select.jpg" sizes="(min-width: 992px) 170px, 80vw" width="215" height="466" alt="ìíë¡ ì± ë¨ìíìµ ë¨ì ì í íë©´" loading="lazy" referrerpolicy="no-referrer"> 992 </div> 993 994 </div> 995 </div> 996 </div> 997 </div> 998 </section> 999 1000 <!-- Mobile/Tablet (<=1024px): Accordion --> 1001 <section class="my-5 apps-accordion-xs"> 1002 <div class="apps-xs-head"> 1003 <h2 class="h4 mb-1 al-sec-title">ê³¼ëª©ë³ ìíë¡ OX ì±</h2> 1004 </div> 1005 <div class="accordion accordion-flush" id="appsAccordionXs"> 1006 <div class="accordion-item"> 1007 <h2 class="accordion-header" id="appXsItem0"> 1008 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 1009 data-bs-target="#appXsCollapse0" aria-expanded="false" 1010 aria-controls="appXsCollapse0" style="--head-bg:#F9640F;--head-color:#FFFFFF;">
1011 íì ë² OX <span class="ms-2 small">(ì´ë¬¸ì ì : <span class="al-qcount" data-value="7,257">7,257</span>)</span> 1012 </button> 1013 </h2> 1014 <div id="appXsCollapse0" class="accordion-collapse collapse" aria-labelledby="appXsItem0" data-bs-parent="#appsAccordionXs"> 1015 <div class="accordion-body" style="background:#fff;"> 1016 <div class="small mb-3 text-secondary"> 1017 ìë°©ê°ë¶ 2017 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§9ê¸ 2014 ~ 2026<br>ì§ë°©ì§9ê¸ 2014 ~ 2025<br>êµíì§8ê¸ 2018 ~ 2025<br>êµê°ì§7ê¸ 2014 ~ 2025<br>ì§ë°©ì§7ê¸ 2014 ~ 2025<br> </div> 1018 <div class="apps-xs-downloads d-flex gap-2"> 1019 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.admin" class="btn btn-sm btn-outline-dark btn-googleplay" target="_blank">Google Play</a> 1020 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%96%89%EC%A0%95%EB%B2%95-ox/id1555940887" class="btn btn-sm btn-outline-dark btn-appstore" target="_blank">App Store</a> 1021 </div> 1022 </div> 1023 </div> 1024 </div> 1025 <div class="accordion-item"> 1026 <h2 class="accordion-header" id="appXsItem1"> 1027 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 1028 data-bs-target="#appXsCollapse1" aria-expanded="false" 1029 aria-controls="appXsCollapse1" style="--head-bg:#69F588;"> 1030 민ì¬ìì¡ë² OX <span class="ms-2 small">(ì´ë¬¸ì ì : <span class="al-qcount" data-value="1,919">1,919</span>)</span> 1031 </button> 1032 </h2> 1033 <div id="appXsCollapse1" class="accordion-collapse collapse" aria-labelledby="appXsItem1" data-bs-parent="#appsAccordionXs"> 1034 <div class="accordion-body" style="background:#fff;"> 1035 <div class="small mb-3 text-secondary"> 1036 ë³í¸ì¬ìí 기ì¶ë¬¸ì 2018 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2025<br> </div> 1037 <div class="apps-xs-downloads d-flex gap-2"> 1038 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.civilproc" class="btn btn-sm btn-outline-dark btn-googleplay" target="_blank">Google Play</a> 1039 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%EB%AF%BC%EC%82%AC%EC%86%8C%EC%86%A1%EB%B2%95-ox/id1617198466" class="btn btn-sm btn-outline-dark btn-appstore" target="_blank">App Store</a> 1040 </div> 1041 </div> 1042 </div> 1043 </div> 1044 <div class="accordion-item"> 1045 <h2 class="accordion-header" id="appXsItem2"> 1046 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 1047 data-bs-target="#appXsCollapse2" aria-expanded="false" 1048 aria-controls="appXsCollapse2" style="--head-bg:#29DF47;"> 1049 ë¯¼ë² OX <span class="ms-2 small">(ì´ë¬¸ì ì : <span class="al-qcount" data-value="6,569">6,569</span>)</span> 1050 </button> 1051 </h2> 1052 <div id="appXsCollapse2" class="accordion-collapse collapse" aria-labelledby="appXsItem2" data-bs-parent="#appsAccordionXs"> 1053 <div class="accordion-body" style="background:#fff;"> 1054 <div class="small mb-3 text-secondary"> 1055 ë³í¸ì¬ìí 2018 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2025<br>ë²ë¬´ì¬ 2016 ~ 2025<br>ë²ìì§5ê¸(ë²ìíì) 2017 ~ 2024<br> </div> 1056 <div class="apps-xs-downloads d-flex gap-2"> 1057 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.civil" class="btn btn-sm btn-outline-dark btn-googleplay" target="_blank">Google Play</a> 1058 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%EB%AF%BC%EB%B2%95-ox/id1462244200" class="btn btn-sm btn-outline-dark btn-appstore" target="_blank">App Store</a> 1059 </div> 1060 </div> 1061 </div> 1062 </div> 1063 <div class="accordion-item"> 1064 <h2 class="accordion-header" id="appXsItem3"> 1065 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 1066 data-bs-target="#appXsCollapse3" aria-expanded="false" 1067 aria-controls="appXsCollapse3" style="--head-bg:#1A7850;--head-color:#FFFFFF;">
1068 ìë² OX <span class="ms-2 small">(ì´ë¬¸ì ì : <span class="al-qcount" data-value="5,142">5,142</span>)</span> 1069 </button> 1070 </h2> 1071 <div id="appXsCollapse3" class="accordion-collapse collapse" aria-labelledby="appXsItem3" data-bs-parent="#appsAccordionXs"> 1072 <div class="accordion-body" style="background:#fff;"> 1073 <div class="small mb-3 text-secondary"> 1074 ë³í¸ì¬ìí 2018 ~ 2026<br>ê³µì¸íê³ì¬ 2018 ~ 2026<br>ë²ìì§9ê¸ 2017 ~ 2025<br>ë²ë¬´ì¬ 2016 ~ 2025<br> </div> 1075 <div class="apps-xs-downloads d-flex gap-2"> 1076 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.commercial" class="btn btn-sm btn-outline-dark btn-googleplay" target="_blank">Google Play</a> 1077 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%EC%83%81%EB%B2%95-ox/id6446020773" class="btn btn-sm btn-outline-dark btn-appstore" target="_blank">App Store</a> 1078 </div> 1079 </div> 1080 </div> 1081 </div> 1082 <div class="accordion-item"> 1083 <h2 class="accordion-header" id="appXsItem4"> 1084 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 1085 data-bs-target="#appXsCollapse4" aria-expanded="false" 1086 aria-controls="appXsCollapse4" style="--head-bg:#159FC0;--head-color:#FFFFFF;"> 1087 íë² OX <span class="ms-2 small">(ì´ë¬¸ì ì : <span class="al-qcount" data-value="14,561">14,561</span>)</span> 1088 </button> 1089 </h2> 1090 <div id="appXsCollapse4" class="accordion-collapse collapse" aria-labelledby="appXsItem4" data-bs-parent="#appsAccordionXs"> 1091 <div class="accordion-body" style="background:#fff;"> 1092 <div class="small mb-3 text-secondary"> 1093 경찰ì¹ì§ 2012 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§9ê¸ 2014 ~ 2026<br>êµê°ì§9ê¸ íë²ì´ë¡ 2014 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2026<br>경찰공무ì 2012 ~ 2026 1ì°¨<br>경찰ê°ë¶ 2015(64기) ~ 2026(75기)<br>êµê°ì§7ê¸ 2016 ~ 2025<br>ë²ìíì 2017 ~ 2024<br>ì¬ë²ìí 2012 ~ 2016<br> </div> 1094 <div class="apps-xs-downloads d-flex gap-2"> 1095 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.crime" class="btn btn-sm btn-outline-dark btn-googleplay" target="_blank">Google Play</a> 1096 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%98%95%EB%B2%95-ox/id1355483813" class="btn btn-sm btn-outline-dark btn-appstore" target="_blank">App Store</a> 1097 </div> 1098 </div> 1099 </div> 1100 </div> 1101 <div class="accordion-item"> 1102 <h2 class="accordion-header" id="appXsItem5"> 1103 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 1104 data-bs-target="#appXsCollapse5" aria-expanded="false" 1105 aria-controls="appXsCollapse5" style="--head-bg:#3E7FC1;--head-color:#FFFFFF;"> 1106 íì¬ìì¡ë² OX <span class="ms-2 small">(ì´ë¬¸ì ì : <span class="al-qcount" data-value="10,852">10,852</span>)</span> 1107 </button> 1108 </h2> 1109 <div id="appXsCollapse5" class="accordion-collapse collapse" aria-labelledby="appXsItem5" data-bs-parent="#appsAccordionXs"> 1110 <div class="accordion-body" style="background:#fff;"> 1111 <div class="small mb-3 text-secondary"> 1112 경찰ì¹ì§ 2012 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§ 9ê¸ 2014 ~ 2026<br>êµê°ì§ 9ê¸ íìë²ê°ë¡ 2014 ~ 2026<br>ë²ìì§ 9ê¸ 2012 ~ 2026<br>경찰공무ì 2012 ~ 2026 1ì°¨<br>경찰ê°ë¶ 2015(64기) ~ 2026(75기)<br>êµê°ì§ 7ê¸ 2016 ~ 2025<br> </div> 1113 <div class="apps-xs-downloads d-flex gap-2"> 1114 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.crimeproc" class="btn btn-sm btn-outline-dark btn-googleplay" target="_blank">Google Play</a> 1115 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%98%95%EC%82%AC%EC%86%8C%EC%86%A1%EB%B2%95-ox/id1369727256" class="btn btn-sm btn-outline-dark btn-appstore" target="_blank">App Store</a> 1116 </div> 1117 </div> 1118 </div> 1119 </div> 1120 <div class="accordion-item"> 1121 <h2 class="accordion-header" id="appXsItem6"> 1122 <button class="accordion-button" type="button" data-bs-toggle="collapse" 1123 data-bs-target="#appXsCollapse6" aria-expanded="true" 1124 aria-controls="appXsCollapse6" style="--head-bg:#7F43AE;--head-color:#FFFFFF;">
1125 íë² OX <span class="ms-2 small">(ì´ë¬¸ì ì : <span class="al-qcount" data-value="15,332">15,332</span>)</span> 1126 </button> 1127 </h2> 1128 <div id="appXsCollapse6" class="accordion-collapse collapse show" aria-labelledby="appXsItem6" data-bs-parent="#appsAccordionXs"> 1129 <div class="accordion-body" style="background:#fff;"> 1130 <div class="small mb-3 text-secondary"> 1131 경찰ì¹ì§ 2016 ~ 2026<br>ìë°©ê°ë¶ 2017 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§5ê¸ 2017 ~ 2026<br>êµíì§5ê¸(ì ë²ê³ ì) 2017 ~ 2026<br>êµíì§8ê¸ 2014 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2025<br>경찰ê°ë¶ 2023(72기) ~ 2026(75기)<br>경찰공무ì 2022 ~ 2026 1ì°¨<br>ë²ë¬´ì¬ 2017 ~ 2025<br>êµê°ì§7ê¸ 2014 ~ 2025<br>ì§ë°©ì§7ê¸ 2014 ~ 2025<br>ë²ìì§5ê¸(ë²ìíì) 2017 ~ 2024<br>ìì¸ì공무ì 2017 ~ 2019<br> </div> 1132 <div class="apps-xs-downloads d-flex gap-2"> 1133 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.constitution" class="btn btn-sm btn-outline-dark btn-googleplay" target="_blank">Google Play</a> 1134 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%97%8C%EB%B2%95-ox/id1449365342" class="btn btn-sm btn-outline-dark btn-appstore" target="_blank">App Store</a> 1135 </div> 1136 </div> 1137 </div> 1138 </div> 1139 </div> 1140 </section> 1141 1142 <!-- Desktop (>1024px): Overlapped 2D deck --> 1143 <section class="my-5 apps-swiper-lg"> 1144 <div class="px-4"> 1145 <h2 class="h4 mb-1 al-sec-title">ê³¼ëª©ë³ ìíë¡ OX ì±</h2> 1146 <p class="text-secondary small mb-3">êµ¬ê¸ íë ì´ì¤í ì´, ì í ì±ì¤í ì´ìì ì±ì ë¤ì´ë°ì ì ììµëë¤.</p> 1147 </div> 1148 <div class="apps-swiper swiper"> 1149 <div class="swiper-wrapper"> 1150 <div class="swiper-slide"> 1151 <div class="card h-100" style="width: 280px;"> 1152 <div class="card-body d-flex flex-column p-0"> 1153 <div class="al-card-head " style="background:#F9640F;color:#FFFFFF;"> 1154 <h5 class="card-title mb-1 " style="color:#FFFFFF;">íì ë² OX</h5> 1155 <div class="mb-1 ">ì´ë¬¸ì ì : <span class="al-qcount" data-value="7,257">7,257</span></div> 1156 </div> 1157 <div class="al-card-main"> 1158 <div class="small mb-3 text-secondary"> 1159 ìë°©ê°ë¶ 2017 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§9ê¸ 2014 ~ 2026<br>ì§ë°©ì§9ê¸ 2014 ~ 2025<br>êµíì§8ê¸ 2018 ~ 2025<br>êµê°ì§7ê¸ 2014 ~ 2025<br>ì§ë°©ì§7ê¸ 2014 ~ 2025<br> </div> 1160 <div class="mt-auto d-flex gap-2"> 1161 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.admin" class="btn btn-sm btn-outline-dark" target="_blank">Google Play</a> 1162 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%96%89%EC%A0%95%EB%B2%95-ox/id1555940887" class="btn btn-sm btn-outline-dark" target="_blank">App Store</a> 1163 </div> 1164 </div> 1165 </div> 1166 </div> 1167 </div> 1168 <div class="swiper-slide"> 1169 <div class="card h-100" style="width: 280px;"> 1170 <div class="card-body d-flex flex-column p-0"> 1171 <div class="al-card-head " style="background:#69F588;"> 1172 <h5 class="card-title mb-1 " >민ì¬ìì¡ë² OX</h5> 1173 <div class="mb-1 ">ì´ë¬¸ì ì : <span class="al-qcount" data-value="1,919">1,919</span></div> 1174 </div> 1175 <div class="al-card-main"> 1176 <div class="small mb-3 text-secondary"> 1177 ë³í¸ì¬ìí 기ì¶ë¬¸ì 2018 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2025<br> </div> 1178 <div class="mt-auto d-flex gap-2"> 1179 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.civilproc" class="btn btn-sm btn-outline-dark" target="_blank">Google Play</a> 1180 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%EB%AF%BC%EC%82%AC%EC%86%8C%EC%86%A1%EB%B2%95-ox/id1617198466" class="btn btn-sm btn-outline-dark" target="_blank">App Store</a> 1181 </div> 1182 </div> 1183 </div> 1184 </div> 1185 </div> 1186 <div class="swiper-slide"> 1187 <div class="card h-100" style="width: 280px;"> 1188 <div class="card-body d-flex flex-column p-0"> 1189 <div class="al-card-head " style="background:#29DF47;"> 1190 <h5 class="card-title mb-1 " >ë¯¼ë² OX</h5> 1191 <div class="mb-1 ">ì´ë¬¸ì ì : <span class="al-qcount" data-value="6,569">6,569</span></div> 1192 </div> 1193 <div class="al-card-main"> 1194 <div class="small mb-3 text-secondary"> 1195 ë³í¸ì¬ìí 2018 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2025<br>ë²ë¬´ì¬ 2016 ~ 2025<br>
1195ë²ìì§5ê¸(ë²ìíì) 2017 ~ 2024<br> </div> 1196 <div class="mt-auto d-flex gap-2"> 1197 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.civil" class="btn btn-sm btn-outline-dark" target="_blank">Google Play</a> 1198 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%EB%AF%BC%EB%B2%95-ox/id1462244200" class="btn btn-sm btn-outline-dark" target="_blank">App Store</a> 1199 </div> 1200 </div> 1201 </div> 1202 </div> 1203 </div> 1204 <div class="swiper-slide"> 1205 <div class="card h-100" style="width: 280px;"> 1206 <div class="card-body d-flex flex-column p-0"> 1207 <div class="al-card-head " style="background:#1A7850;color:#FFFFFF;"> 1208 <h5 class="card-title mb-1 " style="color:#FFFFFF;">ìë² OX</h5> 1209 <div class="mb-1 ">ì´ë¬¸ì ì : <span class="al-qcount" data-value="5,142">5,142</span></div> 1210 </div> 1211 <div class="al-card-main"> 1212 <div class="small mb-3 text-secondary"> 1213 ë³í¸ì¬ìí 2018 ~ 2026<br>ê³µì¸íê³ì¬ 2018 ~ 2026<br>ë²ìì§9ê¸ 2017 ~ 2025<br>ë²ë¬´ì¬ 2016 ~ 2025<br> </div> 1214 <div class="mt-auto d-flex gap-2"> 1215 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.commercial" class="btn btn-sm btn-outline-dark" target="_blank">Google Play</a> 1216 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%EC%83%81%EB%B2%95-ox/id6446020773" class="btn btn-sm btn-outline-dark" target="_blank">App Store</a> 1217 </div> 1218 </div> 1219 </div> 1220 </div> 1221 </div> 1222 <div class="swiper-slide"> 1223 <div class="card h-100" style="width: 280px;"> 1224 <div class="card-body d-flex flex-column p-0"> 1225 <div class="al-card-head " style="background:#159FC0;color:#FFFFFF;"> 1226 <h5 class="card-title mb-1 " style="color:#FFFFFF;">íë² OX</h5> 1227 <div class="mb-1 ">ì´ë¬¸ì ì : <span class="al-qcount" data-value="14,561">14,561</span></div> 1228 </div> 1229 <div class="al-card-main"> 1230 <div class="small mb-3 text-secondary"> 1231 경찰ì¹ì§ 2012 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§9ê¸ 2014 ~ 2026<br>êµê°ì§9ê¸ íë²ì´ë¡ 2014 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2026<br>경찰공무ì 2012 ~ 2026 1ì°¨<br>경찰ê°ë¶ 2015(64기) ~ 2026(75기)<br>êµê°ì§7ê¸ 2016 ~ 2025<br>ë²ìíì 2017 ~ 2024<br>ì¬ë²ìí 2012 ~ 2016<br> </div> 1232 <div class="mt-auto d-flex gap-2"> 1233 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.crime" class="btn btn-sm btn-outline-dark" target="_blank">Google Play</a> 1234 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%98%95%EB%B2%95-ox/id1355483813" class="btn btn-sm btn-outline-dark" target="_blank">App Store</a> 1235 </div> 1236 </div> 1237 </div> 1238 </div> 1239 </div> 1240 <div class="swiper-slide"> 1241 <div class="card h-100" style="width: 280px;"> 1242 <div class="card-body d-flex flex-column p-0"> 1243 <div class="al-card-head " style="background:#3E7FC1;color:#FFFFFF;"> 1244 <h5 class="card-title mb-1 " style="color:#FFFFFF;">íì¬ìì¡ë² OX</h5> 1245 <div class="mb-1 ">ì´ë¬¸ì ì : <span class="al-qcount" data-value="10,852">10,852</span></div> 1246 </div> 1247 <div class="al-card-main"> 1248 <div class="small mb-3 text-secondary"> 1249 경찰ì¹ì§ 2012 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§ 9ê¸ 2014 ~ 2026<br>êµê°ì§ 9ê¸ íìë²ê°ë¡ 2014 ~ 2026<br>ë²ìì§ 9ê¸ 2012 ~ 2026<br>경찰공무ì 2012 ~ 2026 1ì°¨<br>경찰ê°ë¶ 2015(64기) ~ 2026(75기)<br>êµê°ì§ 7ê¸ 2016 ~ 2025<br> </div> 1250 <div class="mt-auto d-flex gap-2"> 1251 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.crimeproc" class="btn btn-sm btn-outline-dark" target="_blank">Google Play</a> 1252 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%98%95%EC%82%AC%EC%86%8C%EC%86%A1%EB%B2%95-ox/id1369727256" class="btn btn-sm btn-outline-dark" target="_blank">App Store</a> 1253 </div> 1254 </div> 1255 </div> 1256 </div> 1257 </div> 1258 <div class="swiper-slide"> 1259 <div class="card h-100" style="width: 280px;"> 1260 <div class="card-body d-flex flex-column p-0"> 1261 <div class="al-card-head " style="background:#7F43AE;color:#FFFFFF;"> 1262 <h5 class="card-title mb-1 " style="color:#FFFFFF;">íë² OX</h5> 1263 <div class="mb-1 ">ì´ë¬¸ì ì : <span class="al-qcount" data-value="15,332">15,332</span></div> 1264 </div> 1265 <div class="al-card-main"> 1266 <div class="small mb-3 text-secondary"> 1267 경찰ì¹ì§ 2016 ~ 2026<br>ìë°©ê°ë¶ 2017 ~ 2026<br>ë³í¸ì¬ìí 2018 ~ 2026<br>êµê°ì§5ê¸ 2017 ~ 2026<br>êµíì§5ê¸(ì ë²ê³ ì) 2017 ~ 2026<br>êµíì§8ê¸ 2014 ~ 2026<br>ë²ìì§9ê¸ 2012 ~ 2025<br>경찰ê°ë¶ 2023(72기) ~ 2026(75기)<br>경찰공무ì 2022 ~ 2026 1ì°¨<br>ë²ë¬´ì¬ 2017 ~ 2025<br>êµê°ì§7ê¸ 2014 ~ 2025<br>ì§ë°©ì§7ê¸ 2014 ~ 2025<br>
1267ë²ìì§5ê¸(ë²ìíì) 2017 ~ 2024<br>ìì¸ì공무ì 2017 ~ 2019<br> </div> 1268 <div class="mt-auto d-flex gap-2"> 1269 <a href="https://play.google.com/store/apps/details?id=kr.ponster.alphalaw.constitution" class="btn btn-sm btn-outline-dark" target="_blank">Google Play</a> 1270 <a href="https://apps.apple.com/kr/app/%EC%95%8C%ED%8C%8C%EB%A1%9C-%ED%97%8C%EB%B2%95-ox/id1449365342" class="btn btn-sm btn-outline-dark" target="_blank">App Store</a> 1271 </div> 1272 </div> 1273 </div> 1274 </div> 1275 </div> 1276 </div> 1277 </div> 1278 </section> 1279
1279<script> 1280 (function(){ 1281 // Digit-by-digit count-up on hover for desktop app cards 1282 // Prepare digits only when animation starts (keep original text by default) 1283 function buildDigits(el){ 1284 if (!el) return []; 1285 var val = (el.getAttribute('data-value')||'').trim(); 1286 var chars = val.split(''); 1287 el.innerHTML = ''; 1288 var ds = []; 1289 var digitIndex = 0; 1290 for (var i=0;i<chars.length;i++){ 1291 var ch = chars[i]; 1292 if (/\d/.test(ch)){ 1293 var d = document.createElement('span'); 1294 d.className = 'd'; 1295 d.dataset.target = ch; 1296 d.dataset.idx = digitIndex++; 1297 d.textContent = '0'; 1298 el.appendChild(d); 1299 ds.push(d); 1300 } else { 1301 var s = document.createElement('span'); 1302 s.className = 'sep'; 1303 s.textContent = ch; 1304 el.appendChild(s); 1305 } 1306 } 1307 return ds; 1308 } 1309 function animateQCount(el){ 1310 if (!el) return; 1311 // Build digit spans at hover time so default text remains original 1312 var ds = buildDigits(el); 1313 var total = ds.length; 1314 // Emphasize while animating 1315 try { el.classList.add('is-animating'); } catch(e){} 1316 // Most significant digit stays at its target immediately 1317 if (total > 0) { 1318 var first = ds[0]; 1319 first.textContent = String(parseInt(first.dataset.target,10)||0); 1320 } 1321 // Animate remaining digits (from the second digit) 1322 for (var i=1;i<ds.length;i++){ 1323 (function(d, i){ 1324 var target = parseInt(d.dataset.target, 10) || 0; 1325 d.textContent = '0'; 1326 var duration = (i === total - 1) ? 800 : 500; // last digit slower 1327 var delay = (i - 1) * 120; // stagger, ignoring the first fixed digit 1328 var startTime = null; 1329 function step(ts){ 1330 if (startTime === null) startTime = ts; 1331 var t = (ts - startTime) / duration; 1332 if (t < 0) t = 0; if (t > 1) t = 1; 1333 var cur = Math.floor(t * target); 1334 if (t === 1) cur = target; 1335 d.textContent = String(cur); 1336 if (t < 1) requestAnimationFrame(step); 1337 } 1338 setTimeout(function(){ requestAnimationFrame(step); }, delay); 1339 })(ds[i], i); 1340 } 1341 // Keep emphasis after animation completes (do not remove class) 1342 } 1343 function initQCounts(){ 1344 var cards = document.querySelectorAll('.apps-swiper-lg .card'); 1345 for (var i=0;i<cards.length;i++){ 1346 (function(card){ 1347 var q = card.querySelector('.al-qcount'); 1348 if (!q) return; 1349 if (card.dataset.qcBound === '1') return; 1350 card.addEventListener('mouseenter', function(){ animateQCount(q); }); 1351 card.dataset.qcBound = '1'; 1352 })(cards[i]); 1353 } 1354 // Mobile accordion: animate when expanding 1355 var acc = document.getElementById('appsAccordionXs'); 1356 if (acc) { 1357 var collapses = acc.querySelectorAll('.accordion-collapse'); 1358 for (var j=0;j<collapses.length;j++){ 1359 (function(col){ 1360 col.addEventListener('show.bs.collapse', function(){ 1361 try { 1362 var item = col.closest('.accordion-item'); 1363 var header = item ? item.querySelector('.accordion-header') : null; 1364 var q2 = header ? header.querySelector('.al-qcount') : null; 1365 if (q2) animateQCount(q2); 1366 } catch(e){} 1367 }); 1368 })(collapses[j]); 1369 } 1370 } 1371 } 1372 // Minimal styles to keep digits steady 1373 var css = '.al-qcount{font-variant-numeric:tabular-nums;}' + 1374 '.al-qcount .d{display:inline-block;min-width:0.6ch;}' + 1375 '.al-qcount.is-animating{font-weight:700;}'; 1376 try { var s = document.createElement('style'); s.textContent = css; document.head.appendChild(s); } catch(e){} 1377 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initQCounts); else initQCounts(); 1378 })(); 1379 </script>
1379 1380 1381 <section class="my-5" id="alpha-cases"> 1382 <div class="px-4 mx-auto text-center al-cases-wrap"> 1383 <h2 class="al-cases-title text-body-emphasis mb-3"> 1384 <a href="/case/latest/1" class="text-decoration-none text-reset">ìíë¡ ê¸°ì¶íë¡ ì¬ì´í¸</a> 1385 </h2> 1386 <p class="al-hero__subtitle mb-4">ìíë¡ ê¸°ì¶íë¡ ì¬ì´í¸ë ë§¤ì° í¨ì¨ì ì¸ ì¨ë¼ì¸ íë¡ì§ì ëë¤.</p> 1387 <div class="al-note-box"> 1388 <p class="al-cases-note mb-0"> 1389 <span class="al-note-first">ìíì ì¶ì ëìë íë¡ë¤ë§ì¼ë¡ 구ì±ëì´ ìì¼ë©°, íë¡ì í¨ê» ê´ë ¨ 기ì¶ë¬¸ì 를 ë³´ì¬ì¤ëë¤.</span><br> 1390 ì´ë¥¼ íµí´ íë¡ì ìì ì ì íí ì´í´í ì ìì¼ë©°, ëë¶ì´ ì´ë¤ íë¡ê° ìíì ë§ì´ ì¶ì ë ë¹ì¶íë¡ì¸ì§ë¥¼ íì í ì ììµëë¤. 1391 </p> 1392 </div> 1393 <div class="al-divider-short"></div> 1394 <div class="al-note-box"> 1395 <p class="al-cases-note mt-2 mb-0"> 1396 íë¡ë¥¼ ì°¾ê³ , ê´ë ¨ 기ì¶ë¬¸ì 를 íê³ , ê·¸ ìíê³¼ ê´ë ¨ë íë¡ë¥¼ ë³´ê³ , ì´ë ê² ê¼¬ë¦¬ì 꼬리를 ë¬¼ê³ íë¡ì ë°ë¤ë¥¼ í¤ìì¹ë¤ ë³´ë©´ ì´ëì ê³µë¶ë ëì´ ìì ê²ì ëë¤. 1397 </p> 1398 </div> 1399 <form class="mt-3 al-home-search" role="search" onsubmit="var v=(this.case_id.value||'').trim(); if(!v) return false; window.location.href='/case/question/' + encodeURIComponent(v); return false;"> 1400 <div class="search-wrap"> 1401 <input class="form-control" type="search" name="case_id" minlength="2" maxlength="30" placeholder="íë¡ë²í¸" aria-label="íë¡ ê²ì"> 1402 <button class="search-icon-btn" type="submit" aria-label="ê²ì"> 1403 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true" focusable="false"> 1404 <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10.001 5 5 0 0 1 0 10z"/> 1405 </svg> 1406 </button> 1407 </div> 1408 </form> 1409 <div class="al-divider-short"></div> 1410 <div class="al-note-box"> 1411 <p class="al-cases-note mt-2 mb-2">기ì¶íë¡ ì¬ì´í¸ì ì ìíì¬ ìµì íë¡ë¥¼ íì¸íê³ ê´ë ¨ 기ì¶ë¬¸ì 를 í¸ë ê²ì¼ë¡ ìë¡ì´ ìì ì ëë¹í ì ììµëë¤.</p> 1412 </div> 1413 </div> 1414 1415 <div class="al-cases-timeline"> 1416 <div class="al-timeline text-start mx-auto" style="max-width:840px;"> 1417 <div class="al-timeline-item"> 1418 <div class="al-time">2026.2</div> 1419 <div> 1420 <a href="/case/question/2021%ED%97%8C%EB%B0%94168" class="al-case-link"> 1421 <div class="fw-semibold al-case-title mb-1">íì¬ 2026. 2. 26. 2021íë°168 [íë²ë¶í©ì¹,í©í]</div> 1422 <div class="al-case-desc small line-clamp-3">ê°. íë²ì¬íìë 2009. 5. 28. 2007íë°22 ê²°ì ìì ì ê³ ì¡°íê³¼ ëì¼í ë´ì©ì ê·ì íìë 구 ì§ìë² ì¡°íì ëíì¬ ì£íë²ì 주ìì ëª íì±ìì¹ì ìë°°ëì§ ìê³ , ê³¼ìê¸ì§ìì¹ì ë°íì¬ ì§íì ìì 를 침í´íì§ ìëë¤ë ì´ì ë¡ í©í ê²°ì ì íìê³ , ì´íìë ì¬ë¬ ì°¨ë¡ ê°ì ì·¨ì§ì í©í ê²°ì ì íìë¤. 1423ì ë¡ì íë¨ì ë³ê²½í ì¬ì ì´ ìì¼ë¯ë¡, ì ê³ ì¡°íì ì£íë²ì 주ìì ëª íì±ìì¹ì ìë°°ëì§ ìê³ , ê³¼ìê¸ì§ìì¹ì ë°íì¬ ì§íì ìì 를 침í´íì§ ìëë¤. 1424ë. ê°ìê°ìì ì¥ì¸ì§íì ëíì¬ ë¯¸ë¦¬ ê°ë³ì ã구체ì ì¬ì ì ê³ ë ¤íì¬ ì¬ì ì ê³ ì¬ë¶ë¥¼ ë¬ë¦¬ ì í기ë ë§¤ì° ì´ë ¤ì°ë¯ë¡ í¬ê´ì ì¼ë¡ ì¬ì ì ê³ ì무를 ë¶ê³¼íë ë°©ìì¼ë¡ íì ê·ì 를 íë ê²ì ì ë²ê¸°ì ì ë¶ê°í¼íë¤. ê·¸ë¬ë ê°ê´ì ì¼ë¡ íì¸ì 기본ê¶ì´ë 공공ì ìë ì§ì를 침í´í ìíì±ì´ ë§¤ì° ì ê³ , ì¤ì ë¡ë ííë¡ê² ì§íê° ì§íãì¢ ë£ëì´ ìíì±ì´ ìë¤ë ì ì´ íì¸ëë 미ì ê³ ì¥ì¸ì§íì ê²½ì°ê¹ì§ ì²ë²ì¡°íì´ ìì¸ ìì´ íì¬ì²ë²íëë¡ íë ê²ì ì ë²ëª©ì ë¬ì±ì íìí ë²ì를 ëë ê²ì´ë©°, êµê°íë²ê¶ì íì¬ë íì ê·ì ì ë¬ë¦¬ ê°ë³ì ã구체ì ì¬ì ì ê³ ë ¤íì¬ íìì ë°ê°ì¹ì±ì íê°íë ê³¼ì ì ë°ëì ê±°ì³ì¼ íë¤ë ì ë±ì ê³ ë ¤í ë, ì²ë²ì¡°íì ê³¼ìê¸ì§ìì¹ì ë°íì¬ ì§íì ìì 를 침í´íë¤. 1425ë¤. ì²ë²ì¡°íì ìíì±ì 미ì ê³ ì¥ì¸ì§í를 ì²ë²íë ê² ìì²´ì ìë ê²ì´ ìëë¼, ìì ê°ì´ ì²ë²ì íìì±ì´ ìë¤ê³ 보기 ì´ë ¤ì´ ì¥ì¸ì§íê¹ì§ ì¼ë¥ ì ì¼ë¡ ì²ë²ëìì¼ë¡ ì¼ë ë°ì ìë¤. 미ì ê³ ì¥ì¸ì§í ì¤ ì´ë í ííì ì§íì ëíì¬ ì²ë²ì ìì¸ë¥¼ ì¸ì í ì§ë ì ë²ìê° ë ¼ì를 ê±° 1426ì³ ê²°ì í ì¬íì´ë¤. ë°ë¼ì ì²ë²ì¡°íì ëíì¬ íë²ë¶í©ì¹ ê²°ì ì ì ê³ íë, ì ë²ìì ê°ì ì ë²ì´ ì´ë£¨ì´ì§ ëê¹ì§ ê³ì ì ì©ì ëª íê¸°ë¡ íë¤. ì ë²ìë ë¦ì
1426´ë 2027. 8. 31.ê¹ì§ë ê°ì ì ë²ì ì´ííì¬ì¼ íê³ , ê·¸ëê¹ì§ ê°ì ì ë²ì´ ì´ë£¨ì´ì§ì§ ìì¼ë©´ ì²ë²ì¡°íì 2027. 9. 1.ë¶í° í¨ë ¥ì ìì¤íë¤. 1427ì²ë²ì¡°íì ëí ì¬íê´ ì íì, ì¬íê´ ì ê³ì ì ë¨ììíì견 ìì§ 1428ì¥ì¸ì§íì ëí ì ê³ ì무ë íì ì ì°¨ì íì¡°ì무ë¡, ê·¸ ì´íì íì ì ì ì¬ë¡ë ì¶©ë¶í íë³´ ê°ë¥íë¤. ê·¸ë°ë° ì²ë²ì¡°íì´ ì ê³ ì무ì ì´íì ê´ì² ìí¤ê¸° ìí´ íë²ì ì ì¬ë¥¼ ê°íë ê²ì ì§íì ìì 를 ì ì²´ì ì¼ë¡ ìì¶ìí¬ ì ìê³ , ì¤ë¡ì§ ì ê³ ì무ì ë¶ì´íì ëí´ ìµì¥ ì§ì 2ë ëë ìµê³ 200ë§ ìì ë²ê¸ê¹ì§ ë¶ê³¼í ì ìëë¡ íë ê²ì ê·¸ ì£ì§ì ë¹í´ ì§ëì¹ê² 무ê²ë¤. ë°ë¼ì ì²ë²ì¡°íì ê³¼ìê¸ì§ìì¹ ë±ì ë°íì¬ ì§íì ìì 를 침í´íë¤. ì²ë²ì¡°íì íì§íë¤ê³ íì¬ë ê·¹ì¬í ë²ì í¼ëì´ë ì¬íì ë¹ì©ì´ ë°ìíë¤ê³ 보기 ì´ë ¤ì°ë¯ë¡ ë¨ììíê²°ì ì íì¬ì¼ íë¤. 1429ì ê³ ì¡°íì ëí ì¬íê´ ê¹ë³µí, ì¬íê´ ë§ìíì ë°ëì견 ë° ì²ë²ì¡°íì ëí ì¬íê´ ê¹ë³µí, ì¬íê´ ë§ìíì ë¨ììíì견 ìì§ 1430ì¬íëìì¡°íì´ ì§ìë² ì 15ì¡°ì í¹ì 목ì ì§í를 ì ì¸í 모ë ì¥ì¸ì§íì ëíì¬ ìì¸ ìì´ ì¼ë¥ ì ì¼ë¡ ì¬ì ì ê³ ì무를 ë¶ê³¼íê³ , ì ê³ ì무 ë¶ì´íì ëí´ ìì ìì¸ ìì´ íë²ë¡ ì ì¬íë ê²ì ì§íì ìì 를 침í´íë¯ë¡ ì¬íëìì¡°íì ëíì¬ ëª¨ë ë¨ììíê²°ì ì íì¬ì¼ íë¤. 1431ì²ë²ì¡°íì ëí ì¬íê´ ì¡°íì°½ì ë°ëì견 ìì§ 1432ì ê³ ì무 ë¶ì´íì íë²ë¡ ìì¨í ê²ì¸ì§ë ì¼ì°¨ì ì¼ë¡ ì ë²ìì ì¬ëì ë§¡ê²¨ì ¸ ìë¤. íì¬ì²ë²ë³´ë¤ ê°ë²¼ì´ íì ì ì ì¬ë§ì¼ë¡ ì ë²ëª©ì ì ë¬ì±í ì ììì§ ì¬ë¶ê° ë¶ë¶ëª íê³ , ë¤ìí ì¥ì¸ì§íì ê°ë³ì ã구체ì ì¬ì ì ê³ ë ¤íì¬ ì²ë²ì ìì¸ë¥¼ ê·ì íë ê²ì ì ë²ê¸°ì ì ë¶ê°ë¥íê±°ë íì í 곤ëíë¯ë¡ ì ê³ ì¡°í ìë°ì íë²ë¡ ìì¨íì¬ ì¼ë°ìë°©ì í¨ê³¼ë¥¼ ê±°ëê³ ì íë ì²ë²ì¡°íì ì± ìê³¼ íë² ê°ì ë¹ë¡ìì¹ì ë°íì¬ ì§íì ìì 를 침í´íì§ ìëë¤. 1433ì§ìë² ì 22ì¡° ì 2íì âí´ì°ë ì ë¹ì 목ì ì ë¬ì±í기 ìí ì§íâ ë±ì 주ìµì를 미ì ê³ ì¥ì¸ì§íì 주ìµìì ëì¼í ë²ì íì¼ë¡ ì²ë²íë, ë³´í¸ë²ìµ ë±ì ê³ ë ¤í ë 미ì ê³ ì¥ì¸ì§í 주ìµíìê° ë¤ë¥¸ ì§íë¤ì 주ìµíìë³´ë¤ ë°ëì ìíì±ì´ ë®ë¤ê³ ë§ í ìë ìë¤. ëí ì²ë²ì¡°íì ë²ì íì ìíë§ì ì íê³ ìì¼ë¯ë¡ 구체ì ì¸ ì¬ììì ë²ê´ì´ ì ì í ì ê³ íì ì í ì ìë¤. ë°ë¼ì ì²ë²ì¡°íì íë²ì²´ê³ìì ê· íì ìì¤íì¬ íë±ìì¹ì ë°íì§ ìëë¤.</div> 1434 </a> 1435 </div> 1436 </div> 1437 <div class="al-timeline-item"> 1438 <div class="al-time">2026.1</div> 1439 <div> 1440 <a href="/case/question/2023%EB%8F%8418308" class="al-case-link"> 1441 <div class="fw-semibold al-case-title mb-1">[ëí 2026. 1. 29., 2023ë18308]</div> 1442 <div class="al-case-desc small line-clamp-3">íë² ì 113ì¡° ì 1íìì ë§íë ì¸êµì 기ë°ì´ë, ì¸êµê³¼ì ê´ê³ìì êµê°ê° ë³´ì íì¬ ê°ì§í´ì¼ í 기ë°ë¡ì ì¸êµì ì± ì ì¸êµì ëíì¬ ë¹ë°ë¡ íê±°ë íì¸ëì§ ìëí¨ì´ ëí민êµì ì´ìµì´ ëë 모ë ì ë³´ìë£ë¥¼ ë§íë ê²ì¼ë¡ì, âì¸ë¡ 매체ë ì ë³´íµì ë§ ë±ì íµí´ ì¸êµì ì´ë¯¸ ë리 ìë ¤ì ¸ ìë ì¬íì¼ë¡ì ì´ë¥¼ ë¹ë°ë¡ íê±°ë íì¸ëì§ ìëí¨ì´ ì¸êµì ì± ìì ì´ìµì´ ëë¤ê³ í ì ìë ê²âì ìíì§ ìëí ê²ì´ì´ì¼ íê³ , ë ê·¸ ë´ì©ì´ ëì¤ëë ê²½ì° ëí민êµì ëì¸ì ìì ê³¼ ì§ìì ìíì ì´ëí ì°ë ¤ê° ìì´ ê¸°ë°ë¡ì ë³´í¸í ì¤ì§ê°ì¹ë¥¼ ê°ì¶ ê²ì´ì´ì¼ íë¤.</div> 1443 </a> 1444 </div> 1445 </div> 1446 <div class="al-timeline-item"> 1447 <div class="al-time">2026.1</div> 1448 <div> 1449 <a href="/case/question/2024%EB%91%9060701" class="al-case-link"> 1450 <div class="fw-semibold al-case-title mb-1">[ëí 2026. 1. 29., 2024ë60701]</div> 1451 <div class="al-case-desc small line-clamp-3">[1] íì ê¶íì ììì íì ê´ì²ì´ ë²ë¥ ì ë°ë¼ í¹ì í ê¶íì ë¤ë¥¸ íì ê´ì²ì ì´ì íì¬ ììê´ì²ì ê¶íì¼ë¡ íì¬íëë¡ íë ê²ì¼ë¡ì ê¶íì ë²ì ì¸ ê·ìì ë³ê²½íë ê²ì´ë¯ë¡, ë²ë¥ ì´ ììì íì©íê³ ìë ê²½ì°ì ííì¬ ì¸ì ëë¤. ì´ì ë°íì¬, íì ê¶íì ë´ë¶ ììì ë²ë¥ ì´ ììì íì©íê³ ìì§ ìì ê²½ì°ìë íì ê´ì²ì ë´ë¶ì ì¸ ì¬ë¬´ì²ë¦¬ì í¸ì를 ë모í기 ìíì¬ ê·¸ì ë³´ì¡°ê¸°ê´ ëë íê¸íì ê´ì²ì¼ë¡ íì¬ê¸ ê·¸ì ê¶íì ì¬ì¤ì íì¬íê² íë ê²ì´ë¤. ê·¸ë¬ë¯ë¡ ê¶í ììì ê²½ì°ìë ììê´ì²ì´ ì기ì ì´ë¦ì¼ë¡ ê·¸ ê¶ííì¬ë¥¼ í ì ìì§ë§, ë´ë¶ ììì ê²½ì° ììê´ì²ì ììê´ì²ì ì´ë¦ì¼ë¡ë§ ê·¸ ê¶íì íì¬í ì ìì ë¿ ì기ì ì´ë¦ì¼ë¡ë ê·¸ ê¶íì íì¬í ì ìë¤. [2] êµì¡ìë¹ì¤ì ì ììíë ç²ì´ ê³ ì©ë ¸ëë¶ ìê´ ë³´ì¡°ì¬ì ì¸ âì²ë ëì§í¸ ì¼ì리 ì¬ì â ìíì´ì기ê´ì¸ ä¹ ì£¼ìíì¬ì ì ì¬ì ì§ì íì½ì ì²´ê²°íê³ ì²ë ë¤ì ì±ì©íì¬ ä¹ íì¬ë¡ë¶í° ì§ìê¸ì ì§ê¸ë°ìëë°, ç²ì´ ì°¸ì¬ì²ë ë¤ìê² âìíì 무 íììì±, ì¬ì ê·¼ë¡, í´ì§ì¬ì¤ ìë, íì´ë°±âì íìë¤ë ì´ì ë¡ ä¹ íì¬ê° ë³´ì¡°ê¸ ê´ë¦¬ì ê´í ë²ë¥ (ì´í âë³´ì
1451¡°ê¸ë²âì´ë¼ íë¤) ì 33ì¡°ì ë°ë¼ ç²ìê² ì§ìê¸ ë°íëª ë ¹ì íì, ê´í ì§ë°©ê³ ì©ë ¸ëì²ì¥ì´ ç²ìê² ë³´ì¡°ê¸ë² ì 31ì¡°ì2 ì 2í ì 1í¸, ì 33ì¡°ì2 ì 1í ì 2í¸ì ë°ë¼ 5ë ê° ë³´ì¡°ê¸ ì§ê¸ì ì ííê³ ì ì¬ë¶ê°ê¸ì ë¶ê³¼íë ì²ë¶ì í ì¬ììì, ë³´ì¡°ê¸ë² ì 31ì¡°ì2 ì 2í ì 1í¸, ì 33ì¡°ì2 ì 1í 본문 ì 2í¸ì ë°ë¥´ë©´, ê³ ì©ë ¸ëë¶ ìê´ ë³´ì¡°ì¬ì ëë ê°ì ë³´ì¡°ì¬ì ì ê´í ë³´ì¡°ê¸ ì§ê¸ ì íì²ë¶ ë° ì ì¬ë¶ê°ê¸ ë¶ê³¼ì²ë¶ ê¶íì âì¤ìê´ìì ì¥âì¸ ê³ ì©ë ¸ëë¶ì¥ê´ìê² ìë ì , ë³´ì¡°ê¸ë² ì 38ì¡°, 구 ë³´ì¡°ê¸ ê´ë¦¬ì ê´í ë²ë¥ ìíë ¹(2024. 11. 5. ëíµë ¹ë ¹ ì 34979í¸ë¡ ê°ì ë기 ì ì ê²) ì 17ì¡° ê° í¸ ë±ì ë³´ì¡°ê¸ ì§ê¸ ì íì²ë¶ ë° ì ì¬ë¶ê°ê¸ ë¶ê³¼ì²ë¶ ê¶íì ì§ë°©ê³ ì©ë ¸ëì²ì¥ ëë ê·¸ ì§ì²ì¥ìê² ììí ì ìë ë²ë ¹ì ê·¼ê±°ê° ë ì ìê³ , ë¬ë¦¬ ê³ ì©ë ¸ëë¶ì¥ê´ì´ ì§ë°©ê³ ì©ë ¸ëì²ì¥ ëë ê·¸ ì§ì²ì¥ìê² ê·¸ë¬í ê¶íì ììíë ê²ì íì©íë ë²ë ¹ì 근거를 ë°ê²¬í ì ìë ì , ê³ ì©ë ¸ëë¶íë ¹ì¸ âê³ ì©ë ¸ëë¶ì¼ êµê³ ë³´ì¡°ì¬ì ê´ë¦¬ê·ì â ì 44ì¡° ì 1í ì 2í¸, ì 47ì¡° ì 1íì´ ì§ë°©ê³ ì©ë ¸ëì²ì¥ ëë ê·¸ ì§ì²ì¥ì ë³´ì¡°ê¸ ì§ê¸ ì íì²ë¶ ë° ì ì¬ë¶ê°ê¸ ë¶ê³¼ì²ë¶ì ì£¼ì²´ë¡ ê·ì íê³ ìëë¼ë, ê·¸ ìë¯¸ê° âíì ê¶íì ììâì í´ë¹íë¤ê³ ë³¼ ì ìê³ âíì ê¶íì ë´ë¶ ììâì ë¶ê³¼íë¤ê³ ë³´ìì¼ íë ì , íì ê¶íì ìì ìì´ ë´ë¶ ììë§ ì´ë£¨ì´ì§ ììê´ì²ì ê¶íì ììê´ì²ì´ ì기ì ì´ë¦ì¼ë¡ íì¬íë íìë ì²ë¶ê¶íì ê·ì 주체를 ì íê³ ìë ì²ë¶ì 근거 ë²ë¥ ì ìë°í ê²ì¼ë¡ì ìë²í ì , í¹ë³ì§ë°©íì 기ê´ì´ ë´ë¶ ììë ê²ì ë¶ê³¼í ì¤ìíì 기ê´ì ê¶íì ì기ì ì´ë¦ì¼ë¡ íì¬íë íìê° ì²ë¶ê¶íì ê·ì 주체를 ì íê³ ìë ì²ë¶ì 근거 ë²ë¥ ì ìë°í ê²ìì ë¤ë¥¸ íì ê´ì²ì ê²½ì°ì ë§ì°¬ê°ì§ì¸ ì ì ì¢ í©íë©´, ì ì²ë¶ì ëí ê¶íì´ ê³ ì©ë ¸ëë¶ì¥ê´ìê² ìììë ì§ë°©ê³ ì©ë ¸ëì²ì¥ì´ ì기ì ì´ë¦ì¼ë¡ í ì ì²ë¶ì ê¶í ìë ìì ìí ê²ì¼ë¡ì ìë²íë¤ê³ 본 ìì¬íë¨ì ì ë¹íë¤ê³ í ì¬ë¡.</div> 1452 </a> 1453 </div> 1454 </div> 1455 <div class="al-timeline-item"> 1456 <div class="al-time">2026.1</div> 1457 <div> 1458 <a href="/case/question/2025%EB%8F%8415970" class="al-case-link"> 1459 <div class="fw-semibold al-case-title mb-1">[ëí 2026. 1. 29., 2025ë15970]</div> 1460 <div class="al-case-desc small line-clamp-3">íì ì¤í¨ ë±ì ê´í ë²ë¥ (ì´í âíì¤í¨ë²âì´ë¼ íë¤) ì 7ì¡° ì 1íì "ìíì¸ì´ ì격ì ì§ ì´ìì íì ë°ì§ ìëíê³ íì ì§íì ì¢ ë£íê±°ë ê·¸ ì§íì´ ë©´ì ë ë ë¶í° ë¤ì ê° í¸ì 구ë¶ì ë°ë¥¸ 기ê°ì´ 경과í ëì ê·¸ íì ì¤í¨ëë¤."ë¼ê³ ì íê³ , ê°ì í ì 2í¸ìì "3ë ì´íì ì§ì·ê¸ê³ í: 5ë "ì¼ë¡ ì íê³ ìë¤. ì ê·ì ì ë°ë¼ íì´ ì¤í¨ë ê²½ì°ìë ê·¸ì íì ì ê³ ì ë°ë¥¸ ë²ì í¨ê³¼ê° ì¥ëì í¥íì¬ ì멸ëë¤ë ê²ì¼ ë¿, íì ì ê³ ê° ììë¤ë 기ìì ì¬ì¤ ìì²´ì 모ë í¨ê³¼ê¹ì§ ì멸íë¤ë ê²ì ìëë¤. íí¸ íë² ì 35ì¡° ì 1í, ì 2íì ëë²ì¡°íì ê¸ê³ ì´ìì íì ì ê³ ë°ì ê·¸ ì§íì´ ì¢ ë£ëê±°ë ë©´ì ë í 3ë ë´ì ê¸ê³ ì´ìì í´ë¹íë ì£ë¥¼ ì§ì ê²½ì°ë¥¼ ëë²ì¼ë¡ ê·ì íê³ , ê·¸ ì£ì ëíì¬ ì í íì ì¥ê¸°ì 2ë°°ê¹ì§ ê°ì¤íëë¡ íê³ ìë¤. ëë²ì ê°ì¤ì²ë²íë ê²ì ë²ì£ì¸ì´ ì ë²ì ëí íë²ì ìíì¬ ì£¼ì´ì§ ê²½ê³ ê¸°ë¥ì 무ìíê³ íë²ì ì¤íì íµíì¬ ë²ì£ì¶ì§ë ¥ì´ ë³´ë¤ ê°íëì´ íìì± ìì´ ê°ì¤ë기 ë문ì´ê³ , ëìê° ì¬ë²ìë°©ì´ë¼ë íì¬ì ì± ì 목ì ì ë¬ì±í기 ìí ê²ì´ë¤. ì´ì ê°ì´ íì ì§í ì¢ ë£ë ë©´ì ì´í ì¼ì 기ê°ì´ ì§ë기 ì ì ì£ë¥¼ ë²í ê²½ì° ê°ì¤ì²ë²ì´ íìíë¤ë ì ë²ì ê²°ë¨ì ë°ë¼ ëë² ê·ì ì ëê³ ìë ì´ì, ìê°ì 경과ì ë°ë¼ ëë²ê¸°ê° ì ì©ì 기ì¤ì´ ëë íì´ ì¤í¨ëìë¤ë ì´ì ë¡ ëë²ì í´ë¹ëì§ ìëë¤ê³ 보기ë ì´ë µë¤. ë°ë¼ì ì¼ë¨ ê¸ê³ ì´ìì íì ì ê³ ë°ì ê·¸ ì§íì´ ì¢ ë£ëê±°ë ë©´ì ë í 3ë ë´ì ê¸ê³ ì´ìì í´ë¹íë ì£ë¥¼ ë²í ì´ì, ê·¸ í ê·¸ íì´ íì ì¤í¨ì ê´í ê¸°ì¤ ë±ì ì í¨ì¼ë¡ì¨ ì ê³¼ìì ì ìì ì¸ ì¬íë³µê·ë¥¼ ë³´ì¥í¨ì 목ì ì¼ë¡ íë íì¤í¨ë² ì 7ì¡°ì ë°ë¼ ì¤í¨ëìë¤ íëë¼ë ì´ë íë² ì 35ì¡° ì 1íìì ì í ëë²ì¬ì ìë ì¬ì í í´ë¹íë¤ê³ ë³´ìì¼ íë¤.</div> 1461 </a> 1462 </div> 1463 </div> 1464 <div class="al-timeline-item"> 1465 <div class="al-time">2026.1</div> 1466 <div> 1467 <a href="/case/question/2023%ED%97%8C%EB%A7%881272" class="al-case-link"> 1468 <div class="fw-semibold al-case-title mb-1">íì¬ 2026. 1. 29. 2023íë§1272 [기ê°]</div> 1469 <div class="al-case-desc small line-clamp-3"></div> 1470 </a> 1471 </div> 1472 </div> 1473 </div> 1474 1475 <div class="mt-2 text-center"> 1476 <a href="/case/latest/1" class="small text-secondary text-decoration-none">ìµì íë¡ ë보기 â¦</a> 1477 </div> 1478 </div> 1479 </section> 1480 1481 <section class="my-5"> 1482 <div class="al-home-duo mx-auto"> 1483 <div class="row g-4"> 1484 <div class="col-md-6"> 1485 <div class="al-home-panel"> 1486 <h2 class="al-home-head"><a href="/notice" class="text-decoration-none">ê³µì§ì¬í</a></h2> 1487 <hr class="al-home-head-hr"> 1488 <ul class="al-home-list"> 1489 <li><a class="al-home-link" href="/notice/44">[ìíë¡ íë² OX] ë²ìì§9ê¸ 2026ë 문ì ì¶ê°</a></li> 1490 <li><a class="al-home-link" href="/notice/43">[ìíë¡ íì¬ìì¡ë² OX] ë²ìì§9ê¸ 2026ë 문ì ì¶ê°</a></li> 1491 <li><a class="al-home-link" href="/notice/42">[ìíë¡ íì ë² OX] êµíì§8ê¸ 2026ë 문ì ì¶ê°</a></li> 1492 </ul> 1493 </div> 1494 </div> 1495 <div class="col-md-6"> 1496 <div class="al-home-panel"> 1497 <h2 class="al-home-head"><a href="/faq" class="text-decoration-none">FAQ</a></h2> 1498 <hr class="al-home-head-hr"> 1499 <ul class="al-home-list"> 1500 <li><a class="al-home-link" href="/faq/18">ê°ë¡ ì ë¹¼ê³ í ì ìëì? 민ë²ì´ì¹ 문ì ë§ ë£ê³ íê³ ì¶ì´ì.</a></li> 1501 <li><a class="al-home-link" href="/faq/17">í린문ì í¹ì ì¦ê²¨ì°¾ê¸°í 문ì ë§ì¼ë¡ 문ì 를 í ì ìë ë°©ë²ì´ ìëì?</a></li> 1502 <li><a class="al-home-link" href="/faq/16">í린문ì ë ì¦ê²¨ì°¾ê¸°í 문ì 를 íì¼ ííë¡ ë¤ì´ë°ì ì ììê¹ì?</a></li> 1503 </ul> 1504 </div> 1505 </div> 1506 </div> 1507 </div> 1508 </section> 1509 1510</div> 1511 <footer class="footer mt-auto py-1 bg-body-tertiary"> 1512 1513 <div class="container"> 1514 <!-- Mobile sticky bar moved out of footer container to fixed bottom --> 1515 <div class="text-center f-copyright"> 1516 © 2018 Ponster Inc. 1517 </div> 1518</div> 1519</footer> 1520 1521 1522 1523 1524<!-- Modal --> 1525 <div class="modal fade" id="iDownloadModal" tabindex="-1" aria-labelledby="downloadModalLabel" aria-hidden="true"> 1526 <div class="modal-dialog"> 1527 <div class="modal-content"> 1528 <div class="modal-header"> 1529 <h1 class="modal-title fs-5" id="iDownloadModalLabel"><b>ìíë¡ OX ì± ë¤ì´ë¡ë</b></h1> 1530 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1531 </div> 1532 <div class="modal-body"> 1533 <div class="container"> 1534 <div class="d-grid gap-2" style="place-content: center;"> 1535 <div><a href="https://play.google.com/store/apps/collection/cluster?gsr=SltqGG1MOHkzaHV0QXhmREhKMEdHWDhwa3c9PbICPgohCh1rci5wb25zdGVyLmFscGhhbGF3LmNpdmlscHJvYxAHEhcIARITNzk3MTA4OTQ3MDIyMTQ0ODc3NBgA:S:ANO1ljL7EZc" id="GooglePlay_url" target="_blank" rel="noopener"><img src="/assets/img/googleplay_download_badge_280.png" width="280px" alt="구ê¸íë ì´ì¤í
1535 ì´"/></a></div> 1536 <div><a href="https://apps.apple.com/kr/developer/seungyoung-hong/id1355483812?see-all=i-phone-apps" id="AppleAppStore_url" target="_blank" rel="noopener"><img src="/assets/img/appstore_download_badge.svg" width="280px" alt="ì±ì¤í ì´"/></a></div> 1537 </div> 1538 </div> 1539 </div> 1540 <div class="modal-footer"> 1541 1542 </div> 1543 </div> 1544 </div> 1545</div> 1546 1547 1548</body> 1549 1550</html> 1551</body> 1552</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.