?닿렐醫?CFP짰 | ?뚮윭?ㅼ썝?먮Ц洹몃９寃쎌쁺?щТ而⑥꽕??/title> <meta name="description" content="CFP짰 ?닿렐醫???쒖? ?몃Т???꾩옣?섏씠 ?④퍡?섎뒗 醫낇빀 寃쎌쁺?щТ 而⑥꽕?? ?щТ? ?몃Т, ??怨녹뿉???꾩꽦?⑸땲??" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> <style> /* ??? Variables ??? */ :root { --navy-dark: #0D1B3E; --navy-primary: #1B3A6B; --navy-medium: #2E5090; --navy-light: #4A7CC7; --gold: #C9A84C; --gold-light: #E8C97A; --white: #FFFFFF; --gray-bg: #F4F6FA; --gray-light: #E8ECF4; --gray-text: #6B7280; --text-dark: #1A1A2E; --radius: 12px; --shadow: 0 4px 24px rgba(13,27,62,0.10); --shadow-hover: 0 8px 40px rgba(13,27,62,0.18); } /* ??? Reset & Base ??? */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans KR', sans-serif; color: var(--text-dark); background: var(--white); line-height: 1.7; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* ??? Utilities ??? */ .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; } .section-sm { padding: 64px 0; } .section-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy-light); background: rgba(74,124,199,0.10); padding: 6px 16px; border-radius: 50px; margin-bottom: 16px; } .section-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.3; color: var(--navy-dark); margin-bottom: 16px; } .section-sub { font-size: 17px; color: var(--gray-text); max-width: 560px; } .gold { color: var(--gold); } .navy { color: var(--navy-primary); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.25s; border: none; } .btn-primary { background: var(--gold); color: var(--navy-dark); } .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,0.35); } .btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.5); } .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); } /* ??? Navigation ??? */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0; transition: all 0.3s; } #navbar.scrolled { background: rgba(13,27,62,0.97); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,0.2); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-logo { display: flex; flex-direction: column; line-height: 1.2; } .nav-logo .brand { font-size: 18px; font-weight: 800; color: var(--white); } .nav-logo .sub { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0.05em; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); transition: color 0.2s; } .nav-links a:hover { color: var(--gold); } .nav-cta { background: var(--gold); color: var(--navy-dark) !important; padding: 8px 20px; border-radius: 50px; font-weight: 700 !important; } .nav-cta:hover { background: var(--gold-light) !important; color: var(--navy-dark) !important; } .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: 0.3s; } /* ??? Hero ??? */ #hero { min-height: 100vh; background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 60%, var(--navy-medium) 100%); display: flex; align-items: center; position: relative; overflow: hidden; } #hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero-decor { position: absolute; right: -100px; top: 50%; transform: translateY(-50%); width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(74,124,199,0.15) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 700px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.3); color: var(--gold-light); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 50px; margin-bottom: 28px; } .hero-badge::before { content: '??; font-size: 12px; } .hero-title { font-size: clamp(32px, 5.5vw, 60px); font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 24px; } .hero-title em { font-style: normal; color: var(--gold); } .hero-desc { font-size: 18px; color: rgba(255,255,255,0.75); margin-bottom: 40px; line-height: 1.8; } .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 40px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; } .hero-stat .num { font-size: 36px; font-weight: 800; color: var(--gold); line-height: 1; } .hero-stat .label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; } /* ??? Strength ??? */ #strength { background: var(--gray-bg); } .strength-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 56px; } .strength-card { background: var(--white); border-radius: var(--radius); padding: 36px 28px; box-shadow: var(--shadow); transition: all 0.3s; border-top: 4px solid transparent; } .strength-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-top-color: var(--navy-light); } .strength-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--navy-primary), var(--navy-light)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; } .strength-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--navy-dark); } .strength-card p { font-size: 14px; color: var(--gray-text); line-height: 1.7; } /* ??? Profile ??? */ #profile { background: var(--white); } .profile-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; } .profile-card { background: var(--gray-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow 0.3s; } .profile-card:hover { box-shadow: var(--shadow-hover); } .profile-card-header { background: linear-gradient(135deg, var(--navy-dark), var(--navy-primary)); padding: 36px 32px; display: flex; align-items: center; gap: 20px; } .profile-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--gold); flex-shrink: 0; overflow: hidden; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .profile-name { color: var(--white); } .profile-name h3 { font-size: 22px; font-weight: 800; } .profile-name .title { font-size: 13px; color: var(--gold-light); margin-top: 4px; font-weight: 500; } .profile-body { padding: 28px 32px; } .profile-list { list-style: none; } .profile-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-light); font-size: 14px; color: var(--text-dark); } .profile-list li:last-child { border-bottom: none; } .profile-list li::before { content: '??; color: var(--navy-light); font-weight: 700; flex-shrink: 0; } /* ??? Services ??? */ #services { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%); } #services .section-title { color: var(--white); } #services .section-sub { color: rgba(255,255,255,0.65); } #services .section-label { color: var(--gold); background: rgba(201,168,76,0.15); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 56px; } .service-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 40px 32px; transition: all 0.3s; position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); opacity: 0; transition: opacity 0.3s; } .service-card:hover { background: rgba(255,255,255,0.10); transform: translateY(-4px); } .service-card:hover::before { opacity: 1; } .service-num { font-size: 48px; font-weight: 800; color: rgba(255,255,255,0.08); line-height: 1; margin-bottom: 12px; } .service-icon { font-size: 36px; margin-bottom: 16px; } .service-card h3 { font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 12px; } .service-card p { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.8; margin-bottom: 20px; } .service-tags { display: flex; flex-wrap: wrap; gap: 8px; } .service-tag { font-size: 12px; color: var(--gold-light); background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.25); padding: 4px 12px; border-radius: 50px; } /* ??? SNS / Insight ??? */ #sns { background: var(--gray-bg); } .sns-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; } .sns-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .sns-card { border-radius: var(--radius); padding: 32px 24px; text-align: center; transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; } .sns-card::after { content: '??; position: absolute; right: 16px; top: 16px; font-size: 14px; opacity: 0; transition: 0.3s; } .sns-card:hover::after { opacity: 1; } .sns-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .sns-insta { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); color: white; } .sns-youtube { background: #FF0000; color: white; } .sns-threads { background: var(--navy-dark); color: white; border: 1px solid rgba(255,255,255,0.1); } .sns-card .sns-icon { font-size: 40px; margin-bottom: 12px; } .sns-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .sns-card p { font-size: 13px; opacity: 0.8; } .sns-card .handle { font-size: 13px; opacity: 0.7; margin-top: 8px; font-family: monospace; } .sns-notice { background: var(--white); border-radius: var(--radius); padding: 28px 32px; display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow); } .sns-notice-icon { font-size: 32px; flex-shrink: 0; } .sns-notice p { font-size: 14px; color: var(--gray-text); line-height: 1.7; } .sns-notice strong { color: var(--navy-primary); } /* ??? Contact ??? */ #contact { background: var(--white); } .contact-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; margin-top: 56px; align-items: start; } .contact-info h3 { font-size: 22px; font-weight: 700; color: var(--navy-dark); margin-bottom: 24px; } .contact-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gray-light); } .contact-item:last-child { border-bottom: none; } .contact-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--navy-primary), var(--navy-light)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .contact-item h4 { font-size: 13px; font-weight: 600; color: var(--gray-text); margin-bottom: 4px; } .contact-item a, .contact-item p { font-size: 15px; font-weight: 500; color: var(--navy-dark); } .contact-item a:hover { color: var(--navy-light); } .contact-form { background: var(--gray-bg); border-radius: var(--radius); padding: 36px; } .contact-form h3 { font-size: 20px; font-weight: 700; color: var(--navy-dark); margin-bottom: 24px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--navy-primary); margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--gray-light); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text-dark); background: var(--white); transition: border-color 0.2s; outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(74,124,199,0.12); } .form-group textarea { resize: vertical; min-height: 100px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-submit { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--navy-primary), var(--navy-medium)); color: white; border: none; border-radius: 50px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.25s; margin-top: 8px; } .form-submit:hover { background: linear-gradient(135deg, var(--navy-dark), var(--navy-primary)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(27,58,107,0.35); } /* ??? Footer ??? */ footer { background: var(--navy-dark); color: rgba(255,255,255,0.6); padding: 48px 0 32px; } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; } .footer-brand .brand { font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 8px; } .footer-brand p { font-size: 13px; line-height: 1.7; max-width: 280px; } .footer-links h4 { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 12px; } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { font-size: 13px; color: rgba(255,255,255,0.55); transition: color 0.2s; } .footer-links a:hover { color: var(--gold); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 12px; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s; } .footer-social a:hover { background: var(--gold); } /* ??? Toast ??? */ .toast { position: fixed; bottom: 32px; right: 32px; background: var(--navy-dark); color: white; padding: 16px 24px; border-radius: var(--radius); font-size: 14px; font-weight: 600; box-shadow: 0 8px 32px rgba(0,0,0,0.25); transform: translateY(100px); opacity: 0; transition: all 0.4s; z-index: 9999; } .toast.show { transform: translateY(0); opacity: 1; } /* ??? Scroll to top ??? */ #scrollTop { position: fixed; bottom: 32px; left: 32px; width: 44px; height: 44px; background: var(--navy-primary); color: white; border: none; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s; z-index: 500; box-shadow: var(--shadow); } #scrollTop.show { opacity: 1; } #scrollTop:hover { background: var(--navy-dark); transform: translateY(-2px); } /* ??? Responsive ??? */ @media (max-width: 900px) { .profile-wrap { grid-template-columns: 1fr; } .contact-wrap { grid-template-columns: 1fr; } .sns-channels { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-links { display: none; } .nav-toggle { display: flex; } .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; background: rgba(13,27,62,0.98); backdrop-filter: blur(12px); padding: 24px; gap: 20px; border-top: 1px solid rgba(255,255,255,0.1); } .hero-stats { gap: 24px; } .form-row { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; } } @media (max-width: 480px) { .section { padding: 64px 0; } .hero-btns { flex-direction: column; } .btn { justify-content: center; } } /* ??? Fade-in animation ??? */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } </style> </head> <body>  <nav id="navbar"> <div class="container"> <div class="nav-inner"> <a href="#hero" class="nav-logo"> <span class="brand">?뚮윭?ㅼ썝?먮Ц洹몃９</span> <span class="sub">?닿렐醫?CFP짰 | 援?젣怨듭씤?щТ?ㅺ퀎??쨌 寃쎌쁺而⑥꽕?댄듃</span> </a> <ul class="nav-links" id="navLinks"> <li><a href="about.html">?뚭컻</a></li> <li><a href="services.html">?쒕퉬??/a></li> <li><a href="insight.html">?몄궗?댄듃</a></li> <li><a href="consult.html" class="nav-cta">?곷떞 ?좎껌</a></li> </ul> <div class="nav-toggle" id="navToggle" onclick="toggleMenu()"> <span></span><span></span><span></span> </div> </div> </div> </nav>  <section id="hero"> <div class="hero-decor"></div> <div class="container"> <div class="hero-content"> <div class="hero-badge">援?젣怨듭씤?щТ?ㅺ퀎??CFP짰 횞 ?몃Т???꾨Ц ?곸뿭</div> <h1 class="hero-title"> ?щТ? ?몃Т,<br/> <em>??怨녹뿉??/em> ?꾩꽦?⑸땲?? </h1> <p class="hero-desc"> ?뚮윭?ㅼ썝?먮Ц洹몃９ ????닿렐醫?CFP짰? ?몃Т???꾩옣?섏씠 ?④퍡?⑸땲??<br/> 踰뺤씤怨?媛쒖씤?ъ뾽?먮? ?꾪븳 ?꾩쟾??寃쎌쁺?щТ ?붾（?섏쓣 ?쒓났?⑸땲?? </p> <div class="hero-btns"> <a href="#contact" class="btn btn-primary">臾대즺 ?곷떞 ?좎껌 ??/a> <a href="#services" class="btn btn-outline">?쒕퉬???뚯븘蹂닿린</a> </div> <div class="hero-stats"> <div class="hero-stat"> <div class="num">20+</div> <div class="label">???щТ 而⑥꽕??寃쎈젰</div> </div> <div class="hero-stat"> <div class="num">CFP<sup style="font-size:18px">짰</sup></div> <div class="label">怨듭씤?щТ?ㅺ퀎???먭꺽</div> </div> <div class="hero-stat"> <div class="num">踰뺤씤+媛쒖씤</div> <div class="label">?ъ뾽???꾨Ц 愿由?/div> </div> <div class="hero-stat"> <div class="num">?몃Т</div> <div class="label">?꾨Ц ?뚰듃?덉떗</div> </div> </div> </div> </div> </section>  <section id="strength" class="section"> <div class="container"> <div class="fade-in"> <span class="section-label">Why SuccessPlan</span> <h2 class="section-title">?щТ?꾨Ц媛 + ?몃Т?ъ쓽<br/><span class="gold">寃고빀??留뚮뱶??李⑥씠</span></h2> <p class="section-sub">?⑥닚???멸툑 ?좉퀬瑜??섏뼱, ?щТ ?꾨왂怨??몃Т 理쒖쟻?붾? ?숈떆???ㅺ퀎?⑸땲??</p> </div> <div class="strength-grid"> <div class="strength-card fade-in"> <div class="strength-icon">?뱤</div> <h3>醫낇빀 ?щТ ?ㅺ퀎</h3> <p>CFP짰 ?먭꺽 湲곕컲??泥닿퀎?곸씤 ?щТ 遺꾩꽍?쇰줈 踰뺤씤怨?媛쒖씤?ъ뾽?먯쓽 ?щТ 嫄댁쟾?깆쓣 吏꾨떒?섍퀬 ?깆옣 ?꾨왂???ㅺ퀎?⑸땲??</p> </div> <div class="strength-card fade-in"> <div class="strength-icon">?㎨</div> <h3>?몃Т 而⑥꽕???뱁솕</h3> <p>?몃Т?ъ???吏곸젒 ?뚰듃?덉떗?쇰줈 ?덉꽭 ?꾨왂 ?섎┰遺???몃Т議곗궗 ??묎퉴吏, ?몃Т 由ъ뒪?щ? 泥닿퀎?곸쑝濡?愿由ы빀?덈떎.</p> </div> <div class="strength-card fade-in"> <div class="strength-icon">?뵕</div> <h3>One-Stop ?붾（??/h3> <p>?щТ 而⑥꽕?댄듃? ?몃Т?ш? ????쇰줈 ?吏곸뿬, 媛??꾨Ц媛瑜??곕줈 李얜뒗 踰덇굅濡쒖? ?놁씠 ?쇨????쒕퉬?ㅻ? 諛쏆쑝?????덉뒿?덈떎.</p> </div> <div class="strength-card fade-in"> <div class="strength-icon">?렞</div> <h3>寃쎌쁺??以묒떖 ?묎렐</h3> <p>?レ옄媛 ?꾨땶 寃쎌쁺?먯쓽 紐⑺몴瑜?以묒떖???먭퀬, ?꾩떎?곸씠怨??ㅽ뻾 媛?ν븳 ?щТ쨌?몃Т ?붾（?섏쓣 ?쒓났?⑸땲??</p> </div> </div> </div> </section>  <section id="profile" class="section"> <div class="container"> <div class="fade-in"> <span class="section-label">Meet the Experts</span> <h2 class="section-title">?꾨Ц媛瑜??뚭컻?⑸땲??/h2> <p class="section-sub">媛?遺꾩빞 理쒓퀬 ?꾨Ц媛媛 ?뱀떊???뚰듃?덈줈 ?④퍡?⑸땲??</p> </div> <div class="profile-wrap">  <div class="profile-card fade-in"> <div class="profile-card-header"> <div class="profile-avatar"><img src="images/leekeunjong.jpg" alt="?닿렐醫?CFP짰" /></div> <div class="profile-name"> <h3>?닿렐醫?CFP짰</h3> <div class="title">???쨌 援?젣怨듭씤?щТ?ㅺ퀎??CFP짰) 쨌 寃쎌쁺而⑥꽕?댄듃</div> </div> </div> <div class="profile-body"> <ul class="profile-list"> <li>CFP짰 怨듭씤?щТ?ㅺ퀎??(Certified Financial Planner) ?먭꺽 蹂댁쑀</li> <li>?쇱꽦利앷텒 ?ъ옄沅뚯쑀??됱씤쨌?댁쭅?곌툑紐⑥쭛???먭꺽 蹂댁쑀</li> <li>20???댁긽 踰뺤씤 쨌 媛쒖씤?ъ뾽???щТ愿由??꾨Ц</li> <li>湲곗뾽 ?щТ援ъ“ 吏꾨떒 諛?媛쒖꽑 而⑥꽕??/li> <li>寃쎌쁺???먯궛愿由?諛??щТ怨꾪쉷 ?섎┰</li> <li>?꾩옣???몃Т?ъ? ?④퍡 ?щТ쨌?몃Т ?듯빀 ?붾（???쒓났</li> <li>媛?遺꾩빞???꾨Ц ?먭꺽?ъ? ?④퍡 ?붾（???쒓났</li> <li>以묎린?댁퐫?몃? LS?쇳꽣 ?꾪뿕愿由??붾（???쒓났</li>  </ul> </div> </div>  <div class="profile-card fade-in"> <div class="profile-card-header"> <div class="profile-avatar"><img src="images/limjanghwan.jpg" alt="?꾩옣???몃Т?? /></div> <div class="profile-name"> <h3>?꾩옣???몃Т??/h3> <div class="title">??쒖꽭臾댁궗 쨌 源??諛붾Ⅸ?몃Т?뚭퀎?щТ??/div> </div> </div> <div class="profile-body"> <ul class="profile-list"> <li>?④뎅??숆탳 ?щТ?뚭퀎 諛뺤궗怨쇱젙</li> <li>源?ъ???꽭臾댁궗??媛꾩궗</li> <li>?쒓뎅?앹궛?깃린?좊낯遺援먯닔</li> <li>?몄쿇吏諛⑷뎅?몄껌 誘쇱깮吏???뚰넻異붿쭊???꾩썝</li> <li>源?ъ꽭臾댁꽌 ?곸꽭?⑹꽭吏?먮떒 ?섎닎?몃Т??/li> <li>源?ъ떆泥?留덉쓣?몃Т??쨌 寃곗궛寃???꾩썝</li> <li>?? 以묐?吏諛⑷뎅?몄껌 援?꽭?ъ궗?꾩썝</li> <li>?? ?몄쿇吏諛⑹꽭臾댁궗???곗닔?꾩썝???꾩썝</li> <li>?? ?낆??몃Т???寃몄엫援먯닔 쨌 AIFA寃쎌쁺?꾩뭅?곕? 援먯닔</li> <li>?? 援?꽭?됱젙 援???뺤콉李몄뿬???뺤콉?곸떊 ?꾩썝</li> </ul> </div> </div> </div> </div> </section>  <section id="services" class="section"> <div class="container"> <div class="fade-in"> <span class="section-label">Services</span> <h2 class="section-title">?쒓났 ?쒕퉬??/h2> <p class="section-sub">?щТ? ?몃Т瑜??꾩슦瑜대뒗 寃쎌쁺 ?꾨컲???꾨Ц 而⑥꽕???쒕퉬?ㅼ엯?덈떎.</p> </div> <div class="services-grid"> <div class="service-card fade-in"> <div class="service-num">01</div> <div class="service-icon">?뱢</div> <h3>寃쎌쁺?щТ 而⑥꽕??/h3> <p>湲곗뾽???щТ 嫄댁쟾?깆쓣 吏꾨떒?섍퀬, ?깆옣 ?④퀎蹂?理쒖쟻???щТ ?꾨왂???ㅺ퀎?⑸땲?? CFP짰 ?꾨Ц?깆쑝濡?寃쎌쁺?먯쓽 ?щТ 紐⑺몴瑜??꾩떎濡?留뚮뱾???쒕┰?덈떎.</p> <div class="service-tags"> <span class="service-tag">?щТ援ъ“ 吏꾨떒</span> <span class="service-tag">?꾧툑?먮쫫 愿由?/span> <span class="service-tag">?ъ옄 怨꾪쉷</span> <span class="service-tag">?먭툑 議곕떖</span> </div> </div> <div class="service-card fade-in"> <div class="service-num">02</div> <div class="service-icon">?㎨</div> <h3>?몃Т 而⑥꽕??(?뱁솕)</h3> <p>?몃Т???뚰듃?덉? ?④퍡 踰뺤씤쨌媛쒖씤?ъ뾽?먯쓽 ?덉꽭 ?꾨왂???섎┰?⑸땲?? ?⑥닚 ?좉퀬瑜??섏뼱 ?멸툑???꾨왂?곸쑝濡?愿由ы븯??諛⑸쾿???쒖떆?⑸땲??</p> <div class="service-tags"> <span class="service-tag">踰뺤씤??理쒖쟻??/span> <span class="service-tag">遺媛媛移섏꽭</span> <span class="service-tag">?덉꽭 ?꾨왂</span> <span class="service-tag">?몃Т議곗궗 ???/span> </div> </div> <div class="service-card fade-in"> <div class="service-num">03</div> <div class="service-icon">?룫</div> <h3>踰뺤씤 ?ㅻ┰ 쨌 ?꾪솚 쨌 寃쎌젙泥?뎄 ?먮Ц</h3> <p>媛쒖씤?ъ뾽?먯뿉??踰뺤씤?쇰줈???꾪솚 ?쒖젏怨?諛⑸쾿???щТ쨌?몃Т 愿?먯뿉??醫낇빀?곸쑝濡?遺꾩꽍?⑸땲?? 理쒖쟻???ъ뾽 援ъ“瑜?李얠븘?쒕┰?덈떎.</p> <div class="service-tags"> <span class="service-tag">踰뺤씤 ?꾪솚 遺꾩꽍</span> <span class="service-tag">?ъ뾽援ъ“ ?ㅺ퀎</span> <span class="service-tag">吏遺??ㅺ퀎</span> <span class="service-tag">寃쎌젙 泥?뎄</span> <span class="service-tag">媛???밴퀎</span> </div> </div> </div> </div> </section>  <section id="sns" class="section-sm"> <div class="container"> <div class="sns-header fade-in"> <div> <span class="section-label">Insight & SNS</span> <h2 class="section-title" style="margin-bottom:0">?щТ쨌?몃Т ?몄궗?댄듃瑜?br/>袁몄???怨듭쑀?섎ŉ ?④퍡 ?깆옣?⑸땲??/h2> </div> <p style="font-size:14px;color:var(--gray-text);max-width:280px;text-align:right;"> 寃쎌쁺?먯뿉寃??ㅼ쭏?곸쑝濡??꾩????섎뒗<br/>?щТ쨌?몃Т ?뺣낫瑜??뺢린?곸쑝濡??낅뜲?댄듃?⑸땲?? </p> </div> <div class="sns-channels">  <a href="https://instagram.com/leekeunjong_cfp" target="_blank" rel="noopener" class="sns-card sns-insta fade-in"> <div class="sns-icon">?벝</div> <h3>?몄뒪?洹몃옩</h3> <p>移대뱶?댁뒪 ?뺤떇??br/>?щТ쨌?몃Т ?듭떖 ?뺣낫</p> <div class="handle">@leekeunjong_cfp</div> </a>  <a href="https://youtube.com/@successplan777" target="_blank" rel="noopener" class="sns-card sns-youtube fade-in"> <div class="sns-icon">?띰툘</div> <h3>?좏뒠釉?/h3> <p>?ъ링 遺꾩꽍 ?곸긽怨?br/>寃쎌쁺?먮? ?꾪븳 ?몃Т 媛뺤쓽</p> <div class="handle">@successplan777</div> </a>  <a href="https://threads.net/@leekeunjong_cfp" target="_blank" rel="noopener" class="sns-card sns-threads fade-in"> <div class="sns-icon">?㏊</div> <h3>?곕젅??/h3> <p>吏㏐퀬 ?좎뭅濡쒖슫<br/>?щТ쨌?몃Т ?몄궗?댄듃</p> <div class="handle">@leekeunjong_cfp</div> </a> </div> <div class="sns-notice fade-in"> <div class="sns-notice-icon">?뮕</div> <p> <strong>?뺢린 ?낅뜲?댄듃 肄섑뀗痢?/strong>: ?몃쾿 媛쒖젙 ?뺣낫, ?덉꽭 ?? 踰뺤씤 ?댁쁺 ?명븯?? 寃쎌쁺???щТ 愿由?泥댄겕由ъ뒪????br/> 援щ룆?섏떆硫?寃쎌쁺?먯뿉寃?瑗??꾩슂???щТ쨌?몃Т ?뺣낫瑜?媛??癒쇱? 諛쏆븘蹂댁떎 ???덉뒿?덈떎. </p> </div> </div> </section>  <section id="contact" class="section"> <div class="container"> <div class="fade-in"> <span class="section-label">Contact</span> <h2 class="section-title">?곷떞 臾몄쓽</h2> <p class="section-sub">?щТ쨌?몃Т??愿??怨좊????덉쑝?쒕㈃ ?몄젣?좎? ?곕씫二쇱꽭??<br/>泥??곷떞? 臾대즺濡?吏꾪뻾?⑸땲??</p> </div> <div class="contact-wrap">  <div class="contact-info fade-in"> <h3>?곕씫泥??덈궡</h3> <div class="contact-item"> <div class="contact-icon">?뱸</div> <div> <h4>?꾪솕 ?곷떞</h4> <a href="tel:010-5170-8020">010-5170-8020</a> </div> </div> <div class="contact-item"> <div class="contact-icon">?뮎</div> <div> <h4>移댁뭅??梨꾨꼸</h4> <a href="http://pf.kakao.com/_VHesX" target="_blank" rel="noopener">移댁뭅?ㅼ콈??諛붾줈媛湲?/a> </div> </div> <div class="contact-item"> <div class="contact-icon">?됵툘</div> <div> <h4>?대찓??/h4> <a href="mailto:ceo@successplan.co.kr">ceo@successplan.co.kr</a> </div> </div> <div class="contact-item"> <div class="contact-icon">?룫</div> <div> <h4>?뚰듃???щТ??/h4> <p>諛붾Ⅸ?몃Т?뚭퀎 (源??</p> </div> </div> </div>  <div class="contact-form fade-in"> <h3>?⑤씪???곷떞 ?좎껌</h3> <form id="contactForm" onsubmit="handleSubmit(event)"> <div class="form-row"> <div class="form-group"> <label for="name">?깊븿 *</label> <input type="text" id="name" name="name" placeholder="?띻만?? required /> </div> <div class="form-group"> <label for="phone">?곕씫泥?*</label> <input type="tel" id="phone" name="phone" placeholder="010-0000-0000" required /> </div> </div> <div class="form-group"> <label for="email">?대찓??/label> <input type="email" id="email" name="email" placeholder="example@email.com" /> </div> <div class="form-group"> <label for="type">?곷떞 ?좏삎 *</label> <select id="type" name="type" required> <option value="">?좏깮??二쇱꽭??/option> <option value="tax">?몃Т 而⑥꽕??/option> <option value="finance">寃쎌쁺?щТ 而⑥꽕??/option> <option value="corp">踰뺤씤 ?ㅻ┰쨌?꾪솚쨌寃쎌젙泥?뎄</option> <option value="etc">湲고?</option> </select> </div> <div class="form-group"> <label for="message">臾몄쓽 ?댁슜</label> <textarea id="message" name="message" placeholder="沅곴툑?섏떊 ?댁슜???먯쑀濡?쾶 ?묒꽦??二쇱꽭??"></textarea> </div> <button type="submit" class="form-submit">?곷떞 ?좎껌?섍린 ??/button> </form> </div> </div> </div> </section>  <footer> <div class="container"> <div class="footer-inner"> <div class="footer-brand"> <div class="brand">?뚮윭?ㅼ썝?먮Ц洹몃９二쇱떇?뚯궗</div> <p>????닿렐醫?CFP짰 | 援?젣怨듭씤?щТ?ㅺ퀎??<br/>?щТ? ?몃Т, ??怨녹뿉???꾩꽦?⑸땲??</p> </div> <div class="footer-links"> <h4>硫붾돱</h4> <ul> <li><a href="#strength">?꾨Ц???뚭컻</a></li> <li><a href="#profile">?꾨Ц媛 ?뚭컻</a></li> <li><a href="#services">?쒕퉬??/a></li> <li><a href="#sns">?몄궗?댄듃</a></li> <li><a href="#contact">?곷떞 臾몄쓽</a></li> </ul> </div> <div class="footer-links"> <h4>?쒕퉬??/h4> <ul> <li><a href="#services">寃쎌쁺?щТ 而⑥꽕??/a></li> <li><a href="#services">?몃Т 而⑥꽕??/a></li> <li><a href="#services">踰뺤씤 ?ㅻ┰쨌?꾪솚 ?먮Ц</a></li> </ul> </div> <div class="footer-links"> <h4>SNS</h4> <ul> <li><a href="https://instagram.com/leekeunjong_cfp" target="_blank" rel="noopener">?몄뒪?洹몃옩</a></li> <li><a href="https://youtube.com/@successplan777" target="_blank" rel="noopener">?좏뒠釉?/a></li> <li><a href="https://threads.net/@leekeunjong_cfp" target="_blank" rel="noopener">?곕젅??/a></li> </ul> </div> </div> <div class="footer-bottom"> <p>짤 2025 ?뚮윭?ㅼ썝?먮Ц洹몃９二쇱떇?뚯궗 | ????닿렐醫?CFP짰 | <a href="mailto:ceo@successplan.co.kr" style="color:inherit;">ceo@successplan.co.kr</a></p> <div class="footer-social"> <a href="https://instagram.com/leekeunjong_cfp" target="_blank" rel="noopener" title="Instagram">?벝</a> <a href="https://youtube.com/@successplan777" target="_blank" rel="noopener" title="YouTube">??/a> <a href="https://threads.net/@leekeunjong_cfp" target="_blank" rel="noopener" title="Threads">?㏊</a> </div> </div> </div> </footer>  <button id="scrollTop" onclick="window.scrollTo({top:0,behavior:'smooth'})" title="留??꾨줈">??/button>  <div class="toast" id="toast"></div> <script> // ?? Navbar scroll effect ?? const navbar = document.getElementById('navbar'); window.addEventListener('scroll', () => { navbar.classList.toggle('scrolled', window.scrollY > 40); document.getElementById('scrollTop').classList.toggle('show', window.scrollY > 400); }); // ?? Mobile menu ?? function toggleMenu() { document.getElementById('navLinks').classList.toggle('open'); } document.querySelectorAll('#navLinks a').forEach(a => { a.addEventListener('click', () => document.getElementById('navLinks').classList.remove('open')); }); // ?? Fade-in on scroll ?? const observer = new IntersectionObserver((entries) => { entries.forEach((entry, i) => { if (entry.isIntersecting) { setTimeout(() => entry.target.classList.add('visible'), i * 80); observer.unobserve(entry.target); } }); }, { threshold: 0.12 }); document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); // ?? Contact form ?? function handleSubmit(e) { e.preventDefault(); const btn = e.target.querySelector('.form-submit'); btn.textContent = '?꾩넚 以?..'; btn.disabled = true; // ?ㅼ젣 ?댁쁺 ????遺遺꾩쓣 Formspree, EmailJS ?깆쑝濡?援먯껜?섏꽭?? setTimeout(() => { showToast('???곷떞 ?좎껌???꾨즺?섏뿀?듬땲?? 怨??곕씫?쒕━寃좎뒿?덈떎.'); e.target.reset(); btn.textContent = '?곷떞 ?좎껌?섍린 ??; btn.disabled = false; }, 1200); } function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 4000); } </script> </body> </html>