1<!doctype html> 2<html lang="ko"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>ííì´ì§ ì ì | ã리ì¨</title> 7<meta name="description" content="ãë¦¬ì¨ ííì´ì§ ì ì ìë´. ê°ê²©ê³¼ ì§í 기ì¤ì 먼ì ê³µê°íê³ , ì íí ë²ì ê·¸ëë¡ ì§íí©ëë¤. ë² ì´ì§ 150ë§ì, ì¤í ë¤ë 300ë§ì."> 8<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"> 9<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css">
10<script src="https://pay.nicepay.co.kr/v1/js/"></script>
10 11<style> 12 * { margin: 0; padding: 0; box-sizing: border-box; } 13 :root { 14 --navy: #0f172a; 15 --blue: #2563eb; 16 --blue-soft: #eff6ff; 17 --gray-soft: #f8fafc; 18 --text: #334155; 19 --text-sub: #64748b; 20 --line: #e2e8f0; 21 --radius: 16px; 22 --shadow: 0 4px 24px rgba(15, 23, 42, 0.06); 23 } 24 html { scroll-behavior: smooth; } 25 body { 26 font-family: 'Paperlogy', 'Pretendard', 'Malgun Gothic', sans-serif; 27 background: #ffffff; 28 color: var(--text); 29 letter-spacing: -0.01em; 30 line-height: 1.5; 31 } 32 .wrap { max-width: 1040px; margin: 0 auto; } 33 .sec { padding: 56px 24px; } 34 .sec.gray { background: var(--gray-soft); } 35 .sec.blue { background: var(--blue-soft); } 36 .sec.navy { background: var(--navy); } 37 .sec-title { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 6px; } 38 .sec-sub { font-size: 15px; color: var(--text-sub); margin-bottom: 26px; } 39 40 /* ìë¨ ë° */ 41 .topbar { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 50; } 42 .topbar .wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; } 43 .topbar .home { font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; } 44 .topbar .home span { color: var(--blue); } 45 .topbar .cta { background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 9px 18px; border-radius: 999px; } 46 47 /* íì´ë¡ */ 48 .hero { padding: 64px 24px 52px; } 49 .hero .brand { display: inline-block; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; } 50 .hero h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.35; } 51 .hero h1 span { color: var(--blue); } 52 .hero .sub { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--text); } 53 .hero .chips { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; } 54 .chip { background: var(--gray-soft); color: var(--text-sub); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; } 55 56 /* ì ì ì¬ë¡ */ 57 .works { display: flex; gap: 20px; flex-wrap: wrap; } 58 .work { flex: 1 1 320px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } 59 .work img { width: 100%; height: 240px; object-fit: cover; object-position: top; display: block; } 60 .work .cap { padding: 20px 24px 22px; } 61 .work .cap .name { font-size: 17px; font-weight: 700; color: var(--navy); } 62 .work .cap .name em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 4px 10px; margin-left: 8px; vertical-align: 2px; } 63 .work .cap .desc { margin-top: 7px; font-size: 13.5px; line-height: 1.65; color: var(--text-sub); } 64 65 /* í¨í¤ì§ ì¹´ë */ 66 .plans { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; } 67 .plan { flex: 1 1 260px; background: var(--gray-soft); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; } 68 .plan.featured { background: var(--navy); } 69 .plan .badge { position: absolute; top: -12px; left: 26px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 999px; } 70 .plan .p-name { font-size: 18px; font-weight: 700; color: var(--navy); } 71 .plan .p-use { font-size: 12.5px; color: var(--text-sub); margin-top: 3px; } 72 .plan .p-price { margin: 16px 0 4px; font-size: 30px; font-weight: 700; color: var(--blue); letter-spacing: -0.02em; } 73 .plan .p-vat { font-size: 12px; color: var(--text-sub); margin-bottom: 16px; } 74 .plan ul { list-style: none; } 75 .plan li { font-size: 13.5px; line-height: 1.6; color: var(--text); padding-left: 16px; position: relative; margin-bottom: 8px; } 76 .plan li::before { content: 'â'; position: absolute; left: 0; color: var(--blue); font-weight: 700; font-size: 12px; } 77 .plan .p-meta { margin-top: 14px; font-size: 12.5px; color: var(--text-sub); line-height: 1.7; } 78 .plan .p-btn { margin-top: auto; padding-top: 18px; } 79 .plan .p-btn a { display: block; text-align: center; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; padding: 13px 0; border-radius: 10px; } 80 .plan .p-btn a.ghost { background: transparent; border: 1.5px solid var(--blue); color: var(--blue); } 81 .plan.featured .p-name { color: #fff; } 82 .plan.featured .p-use { color: #93c5fd; } 83 .plan.featured .p-price { color: #60a5fa; } 84 .plan.featured .p-vat { color: #94a3b8; } 85 .plan.featured li { color: #e2e8f0; } 86 .plan.featured li::before { color: #60a5fa; } 87 .plan.featured .p-meta { color: #94a3b8; } 88 .plan.featured .p-btn a.ghost { border-color: #60a5fa; color: #60a5fa; } 89 .plans-note { margin-top: 18px; font-size: 13px; color: var(--text-sub); } 90 91 /* 기í ìë´ ë */ 92 .consult-strip { 93 display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; 94 background: var(--blue-soft); border-radius: var(--radius); 95 padding: 24px 28px; margin-bottom: 26px; 96 } 97 .consult-strip .cs-tag { font-size: 12px; font-weight: 700; color: var(--blue); letter-spacing: .02em; margin-bottom: 6px; } 98 .consult-strip .cs-name { font-size: 18px; font-weight: 700; color: var(--navy); }
99 .consult-strip .cs-name b { color: var(--blue); } 100 .consult-strip .cs-desc { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--text); } 101 .consult-strip .cs-desc b { color: var(--navy); font-weight: 700; } 102 .consult-strip .cs-btn { 103 flex-shrink: 0; background: var(--navy); color: #fff; text-decoration: none; 104 font-size: 14px; font-weight: 700; padding: 14px 28px; border-radius: 10px; 105 } 106 107 /* ê³µíµ í¬í¨ / ë³ë */ 108 .cols { display: flex; gap: 18px; flex-wrap: wrap; } 109 .col { flex: 1 1 300px; background: #fff; border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); } 110 .col h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 14px; } 111 .col ul { list-style: none; } 112 .col li { font-size: 14px; line-height: 1.65; padding-left: 15px; position: relative; margin-bottom: 8px; color: var(--text); } 113 .col li::before { content: '·'; position: absolute; left: 2px; color: var(--blue); font-weight: 700; } 114 115 /* ì§í ê¸°ì¤ */ 116 .policy { display: flex; flex-direction: column; gap: 12px; } 117 .p-row { display: flex; gap: 16px; background: var(--gray-soft); border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow); } 118 .p-chip { flex-shrink: 0; width: 96px; text-align: center; background: var(--blue-soft); color: var(--blue); border-radius: 999px; font-size: 13px; font-weight: 700; padding: 8px 0; height: fit-content; margin-top: 2px; } 119 .p-txt { font-size: 14px; line-height: 1.65; color: var(--text); } 120 .p-txt b { color: var(--blue); } 121 @media (max-width: 560px) { .p-row { flex-direction: column; gap: 8px; } .p-chip { width: 108px; } } 122 123 /* ì§í ì ì°¨ */ 124 .sec.navy .sec-title { color: #fff; } 125 .sec.navy .sec-sub { color: #93c5fd; } 126 .flow { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; } 127 .step { flex: 1 1 100px; background: rgba(255,255,255,0.07); border-radius: 12px; padding: 14px 6px; text-align: center; } 128 .step .n { font-size: 11px; font-weight: 700; color: #60a5fa; margin-bottom: 4px; } 129 .step .t { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.4; } 130 .step .d { font-size: 11px; color: #94a3b8; margin-top: 3px; } 131 .step.hl { background: var(--blue); } 132 .step.hl .n { color: #bfdbfe; } 133 .step.hl .d { color: #bfdbfe; } 134 135 /* ì ì§ê´ë¦¬ */ 136 .cares { display: flex; gap: 18px; flex-wrap: wrap; } 137 .care { flex: 1 1 300px; background: #fff; border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); } 138 .care .c-name { font-size: 15px; font-weight: 700; color: var(--navy); } 139 .care .c-price { font-size: 24px; font-weight: 700; color: var(--blue); margin: 8px 0 10px; } 140 .care .c-desc { font-size: 13.5px; line-height: 1.7; color: var(--text); } 141 .cares-note { margin-top: 16px; font-size: 13px; color: var(--text-sub); } 142 143 /* ===== 주문 ì¹ì ===== */ 144 .order-grid { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } 145 .order-main { flex: 1 1 480px; min-width: 0; } 146 .order-side { flex: 0 1 340px; position: sticky; top: 76px; } 147 @media (max-width: 900px) { .order-side { position: static; flex: 1 1 100%; } } 148 149 .ostep { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; margin-bottom: 18px; } 150 .ostep h3 { font-size: 16.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } 151 .ostep h3 .num { display: inline-block; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 999px; margin-right: 8px; vertical-align: 2px; } 152 .ostep .hint { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; } 153 154 .pick { display: flex; gap: 12px; flex-wrap: wrap; } 155 .pick label { flex: 1 1 140px; cursor: pointer; } 156 .pick input { position: absolute; opacity: 0; } 157 .pick .card { border: 1.5px solid var(--line); border-radius: 12px; padding: 16px 18px; transition: border-color .15s, background .15s; } 158 .pick input:checked + .card { border-color: var(--blue); background: var(--blue-soft); } 159 .pick .card .t { font-size: 15px; font-weight: 700; color: var(--navy); } 160 .pick .card .pr { font-size: 14px; font-weight: 700; color: var(--blue); margin-top: 4px; } 161 .pick .card .d { font-size: 12.5px; color: var(--text-sub); margin-top: 4px; line-height: 1.5; } 162 163 .opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } 164 .opt-row:last-child { border-bottom: none; } 165 .opt-row .o-name { font-size: 14.5px; font-weight: 600; color: var(--navy); } 166 .opt-row .o-desc { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; } 167 .opt-row .o-price { font-size: 14.5px; font-weight: 700; color: var(--blue); white-space: nowrap; }
168 label.opt-row { cursor: pointer; } 169 .opt-left { display: flex; gap: 12px; align-items: flex-start; } 170 .opt-left input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; margin-top: 3px; } 171 .opt-group { margin-top: 8px; } 172 .opt-group > .g-name { font-size: 12.5px; font-weight: 700; color: var(--blue); background: var(--blue-soft); display: inline-block; padding: 5px 12px; border-radius: 999px; margin: 14px 0 2px; } 173 .opt-row.on { background: var(--blue-soft); border-radius: 10px; padding-left: 12px; padding-right: 12px; } 174 .opt-tail { display: flex; align-items: center; gap: 12px; } 175 .stepper { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; } 176 .stepper button { width: 38px; height: 38px; border: none; background: var(--gray-soft); color: var(--navy); font-size: 18px; font-weight: 700; cursor: pointer; } 177 .stepper .val { width: 64px; text-align: center; font-size: 14.5px; font-weight: 700; color: var(--navy); } 178 select.care-sel { border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--navy); background: #fff; } 179 180 /* ë²ì íì¸ */ 181 .scope-box { border: 1.5px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; } 182 .scope-box h4 { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } 183 .scope-box ul { list-style: none; } 184 .scope-box li { font-size: 13.5px; line-height: 1.6; padding-left: 18px; position: relative; margin-bottom: 6px; color: var(--text); } 185 .scope-box li.inc::before { content: 'â'; position: absolute; left: 0; color: var(--blue); font-weight: 700; } 186 .scope-box li.exc::before { content: 'â'; position: absolute; left: 0; color: #dc2626; font-weight: 700; } 187 .scope-box li.fee::before { content: 'â©'; position: absolute; left: 0; color: var(--text-sub); font-weight: 700; } 188 .agree { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--gray-soft); border-radius: 10px; margin-bottom: 10px; cursor: pointer; } 189 .agree input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; } 190 .agree span { font-size: 13.5px; line-height: 1.6; color: var(--text); } 191 .agree b { color: var(--navy); } 192 193 /* í¼ */ 194 .frm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } 195 .frm .full { grid-column: 1 / -1; } 196 @media (max-width: 560px) { .frm { grid-template-columns: 1fr; } } 197 .frm label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; } 198 .frm label em { font-style: normal; color: #dc2626; } 199 .frm input, .frm textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 14.5px; font-family: inherit; color: var(--navy); } 200 .frm input:focus, .frm textarea:focus { outline: none; border-color: var(--blue); } 201 .frm textarea { min-height: 88px; resize: vertical; } 202 .privacy-note { 203 margin-top: 16px; padding: 13px 15px; background: var(--gray-soft); border-radius: 10px; 204 font-size: 12.5px; line-height: 1.7; color: var(--text-sub); 205 } 206 .privacy-note a { color: var(--blue); font-weight: 600; } 207 208 /* 견ì ìì½ */ 209 .quote { background: var(--navy); border-radius: var(--radius); padding: 26px 28px; color: #e2e8f0; } 210 .quote h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 16px; } 211 .q-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 7px 0; } 212 .q-row .k { color: #94a3b8; } 213 .q-row .v { font-weight: 600; color: #e2e8f0; text-align: right; } 214 .q-div { border-top: 1px solid rgba(255,255,255,0.15); margin: 10px 0; } 215 .q-row.total .k { color: #93c5fd; font-weight: 700; } 216 .q-row.total .v { color: #fff; font-weight: 700; } 217 .q-row.deposit { background: var(--blue); margin: 12px -12px 0; padding: 13px 12px; border-radius: 10px; } 218 .q-row.deposit .k { color: #dbeafe; font-weight: 700; font-size: 14.5px; } 219 .q-row.deposit .v { color: #fff; font-weight: 700; font-size: 18px; } 220 .q-note { margin-top: 14px; font-size: 12px; line-height: 1.7; color: #94a3b8; } 221 .q-submit { display: block; width: 100%; margin-top: 18px; background: #fff; color: var(--navy); border: none; border-radius: 12px; padding: 15px 0; font-size: 15.5px; font-weight: 700; font-family: inherit; cursor: pointer; } 222 .q-submit:disabled { opacity: .45;
222 cursor: not-allowed; } 223 .q-err { margin-top: 10px; font-size: 13px; color: #fca5a5; display: none; } 224 225 /* ì ì ìë£ */ 226 .done { display: none; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 32px; } 227 .done h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } 228 .done p { font-size: 14.5px; line-height: 1.75; color: var(--text); margin-bottom: 8px; } 229 .done .sum { background: var(--gray-soft); border-radius: 12px; padding: 18px 20px; margin: 16px 0; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; color: var(--navy); } 230 .done .btns { display: flex; gap: 10px; flex-wrap: wrap; } 231 .done .btns a, .done .btns button { flex: 1 1 160px; text-align: center; text-decoration: none; border-radius: 10px; padding: 13px 0; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; } 232 .done .btns .mail { background: var(--blue); color: #fff; border: none; } 233 .done .btns .copy { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); } 234 235 /* í¸í° */ 236 .footer { background: var(--navy); padding: 34px 24px 38px; color: #cbd5e1; } 237 .footer .co { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; } 238 .footer .line { font-size: 13px; line-height: 1.8; } 239 .footer .line a { color: #60a5fa; } 240 .footer .caveat { margin-top: 12px; font-size: 12px; color: #64748b; line-height: 1.6; } 241</style> 242</head> 243<body> 244 245<!-- ìë¨ ë° --> 246<div class="topbar"> 247 <div class="wrap"> 248 <a class="home" href="/">ãë¦¬ì¨ <span>RION</span></a> 249 <a class="cta" href="#order">ì ì ì ì²í기</a> 250 </div> 251</div> 252 253<!-- íì´ë¡ --> 254<div class="hero"> 255 <div class="wrap"> 256 <div class="brand">ãë¦¬ì¨ Â· ííì´ì§ ì ì</div> 257 <h1>기íë¶í° ì¤íê¹ì§,<br><span>ëí ê°ë°ìê° ì§ì </span> ë§ëëë¤</h1> 258 <div class="sub">íì ê³ ë¯¼íìë ë¶ë¶ì ííì´ì§ ëë ì íì¼ë¡ 구íí´ ë립ëë¤.<br>ê°ê²©ê³¼ ì§í 기ì¤ì 먼ì ë³´ì¬ëë¦¬ê³ , ì ííì ë²ì ê·¸ëë¡ ì§íí©ëë¤.</div> 259 <div class="chips"> 260 <span class="chip">벤ì²ê¸°ì (íì ì±ì¥ì í)</span> 261 <span class="chip">ì¬ì±ê¸°ì íì¸</span> 262 <span class="chip">ì¤ì°ëíêµ ì°½ì ë³´ì¡ì¼í° ì 주기ì </span> 263 </div> 264 </div> 265</div> 266 267<!-- ì ì ì¬ë¡ --> 268<div class="sec gray"> 269 <div class="wrap"> 270 <div class="sec-title">ì§ì ë§ë ì¬ì´í¸</div> 271 <div class="sec-sub">ì©ëì í¤ì´ ë¤ë¥¸ ë¤ì¯ ê°ì§ ììì ëë¤. 주ìê° ì í ê³³ì ì§ê¸ ì ìí´ì íì¸íì¤ ì ììµëë¤.</div> 272 <div class="works"> 273 <div class="work"> 274 <img src="site_korpang.jpg" alt="ê¸ìí¡"> 275 <div class="cap"> 276 <div class="name">ê¸ìí¡ <em>korpang.com</em></div> 277 <div class="desc">K-pop · ëë¼ë§ë¡ íêµì´ë¥¼ ë°°ì°ë ì¹ ê²ì. ë°ê³ ê°ë²¼ì´ í¤ì ìë¹ì¤ ììì ëë¤.</div> 278 </div> 279 </div> 280 <div class="work"> 281 <img src="site_anbu.jpg" alt="ì ìì§ ìë¶"> 282 <div class="cap"> 283 <div class="name">ì ìì§ ìë¶ <em>anbu.riontech.kr</em></div> 284 <div class="desc">ì êµ 3,422ê³³ ì ìì§ì ì ìì¨ Â· ìì ì ë³´ ìë¹ì¤. ì°¨ë¶íê³ ì ë¢°ê° ìë í¤ì ììì ëë¤.</div> 285 </div> 286 </div> 287 <div class="work"> 288 <img src="site_moonfc.jpg" alt="MOON FC"> 289 <div class="cap"> 290 <div class="name">MOON FC <em>dalnuri.co.kr</em></div> 291 <div class="desc">ì ìë ì¶êµ¬ êµì¡ê³µëì²´ ìê° ì¬ì´í¸. ì¸ì¬ë§ · êµì¡ê³¼ì · ìì 구ì±ì ë¨ì²´ ìê°í ììì ëë¤.</div> 292 </div> 293 </div> 294 <div class="work"> 295 <img src="site_osanvoice.jpg" alt="ì민 ì°¸ì¬ íë«í¼"> 296 <div class="cap"> 297 <div class="name">ì민 ì°¸ì¬ íë«í¼ <em>ì뢰 ì ì</em></div> 298 <div class="desc">ì견ì ë°ì ì§ëì íµê³ë¡ ë³´ì¬ì£¼ë ì°¸ì¬í ì¬ì´í¸. ê¸°ë¥ ê°ë°ì´ ë¤ì´ê° ììì ëë¤.</div> 299 </div> 300 </div> 301 <div class="work"> 302 <img src="site_mayor.jpg" alt="ì¸ë¬¼ ìê° ì¬ì´í¸"> 303 <div class="cap"> 304 <div class="name">ì¸ë¬¼ ìê° ì¬ì´í¸ <em>ì뢰 ì ì</em></div> 305 <div class="desc">ìê° Â· ì´ë ¥ · ë¶ì¼ë³ ê³íì í íë¦ì¼ë¡ ì½íê² êµ¬ì±í ìì
305ì ëë¤.</div> 306 </div> 307 </div> 308 </div> 309 <div class="plans-note">â» ìë¢°ì¸ ìì²ì ë°ë¼ ì¼ë¶ ì¬ì´í¸ë ìí¸ Â· ì¸ë¬¼ ì 보를 ê°ë ¤ íìí©ëë¤.</div> 310 </div> 311</div> 312 313<!-- í¨í¤ì§ --> 314<div class="sec"> 315 <div class="wrap"> 316 <div class="sec-title">ì ì í¨í¤ì§</div> 317 <div class="sec-sub">ì©ëì ë§ë ê²ì ê³ ë¥´ìë©´ ë©ëë¤. ìë ì ì² íë©´ìì ìµì ì ëí´ ìµì¢ ê¸ì¡ì íì¸í ì ììµëë¤.</div> 318 319 <div class="consult-strip"> 320 <div class="cs-left"> 321 <div class="cs-tag">먼ì ì íê³ ì¶ë¤ë©´</div> 322 <div class="cs-name">기í ìë´ <b>30ë¶ 5ë§ì</b></div> 323 <div class="cs-desc">무ìì ë§ë¤ì§ë¶í° ê°ì´ ì í©ëë¤. íìí 기ë¥ê³¼ ìì° ë²ì를 ì ë¦¬í´ <b>ì구ì¬í 문ìì 견ì ì</b>ë¡ ë³´ë´ë립ëë¤.<br>ì ìì¼ë¡ ì´ì´ì§ë©´ <b>ìë´ë£ ì ì¡ì ì ìë¹ìì ì°¨ê°</b>í´ ë립ëë¤.</div> 324 </div> 325 <a class="cs-btn" href="#order" data-pick="consult">ìë´ ì ì²</a> 326 </div> 327 328 <div class="plans"> 329 <div class="plan"> 330 <div class="p-name">ë² ì´ì§</div> 331 <div class="p-use">íì¬ Â· ê¸°ê´ ìê°ì©</div> 332 <div class="p-price">150ë§ì</div> 333 <div class="p-vat">ë¶ê°ì¸ í¬í¨ 165ë§ì</div> 334 <ul> 335 <li>5íì´ì§ ì´ë´</li> 336 <li>ê²ì¦ë í í릿 ê¸°ë° ë§ì¶¤ ëìì¸</li> 337 <li>문ìí¼ Â· ì§ë · ì í ì°ê²°</li> 338 <li>무ì ìì 2í</li> 339 </ul> 340 <div class="p-meta">ì ì ê¸°ê° 2~3주</div> 341 <div class="p-btn"><a href="#order" data-pick="basic">ë² ì´ì§ì¼ë¡ ì ì²</a></div> 342 </div> 343 <div class="plan featured"> 344 <div class="badge">ê°ì¥ ë§ì´ ì í</div> 345 <div class="p-name">ì¤í ë¤ë</div> 346 <div class="p-use">ìê° + ì½í ì¸ ì´ì</div> 347 <div class="p-price">300ë§ì</div> 348 <div class="p-vat">ë¶ê°ì¸ í¬í¨ 330ë§ì</div> 349 <ul> 350 <li>10íì´ì§ ì´ë´</li> 351 <li>ì ì© ëìì¸, ìì 2ì¢ ì¤ ì í</li> 352 <li>ë² ì´ì§ ì ì²´ + ê°¤ë¬ë¦¬ · ê³µì§ ê´ë¦¬</li> 353 <li>방문 íµê³</li> 354 <li>무ì ìì 3í</li> 355 </ul> 356 <div class="p-meta">ì ì ê¸°ê° 4~6주</div> 357 <div class="p-btn"><a href="#order" data-pick="standard">ì¤í ë¤ëë¡ ì ì²</a></div> 358 </div> 359 <div class="plan"> 360 <div class="p-name">ë§ì¶¤í</div> 361 <div class="p-use">ìµì ëª©ë¡ ë°ì 기ë¥</div> 362 <div class="p-price">ìë´ ê²¬ì </div> 363 <div class="p-vat">ì구 ê¸°ë¥ íì í ì°ì </div> 364 <ul> 365 <li>기존 ìì¤í · ì¸ë¶ ìë¹ì¤ ì°ë</li> 366 <li>ì ë¬´ì© ê´ë¦¬ íë¡ê·¸ë¨</li> 367 <li>ê·ëª¨ · ê¸°ê° íì</li> 368 </ul> 369 <div class="p-meta">ìì½ Â· íì · ê²°ì · ì¼í몰ì ìë ì ì² íë©´ì ìµì ìì ë°ë¡ ì ííì¤ ì ììµëë¤.</div> 370 <div class="p-btn"><a href="#order" data-pick="custom" class="ghost">ìë´ ì ì²</a></div> 371 </div> 372 </div> 373 <div class="plans-note">â» íì´ì§ ì¶ê° · ìì½ Â· íì · ê²°ì · ì¼í몰 ë± 20ì¬ ì¢ ì ê¸°ë¥ ìµì ì ìë ì ì² íë©´ìì ê³ ë¥´ë©´ ê¸ì¡ì´ ë°ë¡ ê³ì°ë©ëë¤.</div> 374 </div> 375</div> 376 377<!-- ê³µíµ í¬í¨ / ë³ë --> 378<div class="sec blue"> 379 <div class="wrap"> 380 <div class="sec-title">모ë í¨í¤ì§ ê³µíµ</div> 381 <div class="sec-sub">기본ì¼ë¡ ì±ê²¨ë리ë ê²ê³¼, ì¤ë¹ë¡ 구ë¶ëë ê²ì ëë¤.</div> 382 <div class="cols"> 383 <div class="col"> 384 <h3>기본 í¬í¨</h3> 385 <ul> 386 <li>ë°ìí ì ì(PC · 모ë°ì¼ · íë¸ë¦¿)</li> 387 <li>SSL ë³´ì ì¸ì¦ ì ì©(https)</li> 388 <li>ë¤ì´ë² · êµ¬ê¸ ê²ì ë±ë¡</li> 389 <li>ì¤í í 1ê°ì 무ì íìë³´ì(ì¤ë¥ ìì )</li> 390 </ul> 391 </div> 392 <div class="col"> 393 <h3>ë³ë ë¹ì©(ì¤ë¹)</h3> 394 <ul> 395 <li>ëë©ì¸ ë±ë¡ ì° 2ë§ì ìí</li> 396 <li>ìë² í¸ì¤í ì 1~2ë§ì ìí</li> 397 <li>ì ë£ ì´ë¯¸ì§ · í°í¸ 구매 ì ì¤ë¹</li> 398 <li>문구 · ì¬ì§ ìê³ ë ìë¢°ì¸ ì ê³µ(ìì± ëíì íì)</li> 399 </ul> 400 </div> 401 </div> 402 </div> 403</div> 404 405<!-- ì§í ê¸°ì¤ --> 406<div class="sec"> 407 <div class="wrap"> 408 <div class="sec-title">ì§í 기ì¤</div> 409 <div class="sec-sub">ìë¡ ì¤í´ ìì´ ì§íí기 ìí´ ê³ì½ ì ì 미리 ìë ¤ë리ë 기ì¤ì ëë¤.</div> 410 <div class="policy"> 411 <div class="p-row"> 412 <div class="p-chip">무ì ìì </div> 413 <div class="p-txt">í¨í¤ì§ë³ íì ë´ ë¬´ì ì§í. <b>ìì 1í = ìì² ì¬íì 모ì í ë²ì ì ë¬</b>íë ê²ì 기ì¤ì¼ë¡ íë©° í ì¤í¸ · ì´ë¯¸ì§ êµì²´ì ë¶ë¶ ì¡°ì ì´ ëìì ëë¤.</div> 414 </div> 415 <div class="p-row"> 416 <div class="p-chip">ì´ê³¼ ìì </div> 417 <div class="p-txt">무ì íì ì´ê³¼ë¶ì <b>íë¹ 5ë§ì</b>(ë¨ì ìì 기ì¤)ì¼ë¡ ì§íí©ëë¤.</div> 418 </div> 419 <div class="p-row"> 420 <div class="p-chip">ë²ì ë³ê²½</div> 421 <div class="p-txt">ë ì´ìì · ëìì¸ ì»¨ì ë³ê²½, íì´ì§ ì¶ê°, ê¸°ë¥ ì¶ê°ë <b>ë²ì ë³ê²½ì í´ë¹íì¬ ë³ë 견ì </b> ëìì ëë¤. ìì íì í 컨ì ì ë©´ ë³ê²½ì ì¬ê³ì½ì¼ë¡ ì§íí©ëë¤.</div> 422 </div> 423 <div class="p-row"> 424 <div class="p-chip">ìê³ ì ê³µ</div> 425 <div class="p-txt">문구 · ì¬ì§ ë± ìê³ ì ê³µì´ ë¦ì´ì§ë©´ <b>ì ì ì¼ì ë ê°ì 기ê°ë§í¼ ìì°</b>ë©ëë¤.</div> 426 </div> 427 </div> 428 </div> 429</div> 430 431<!-- ì§í ì ì°¨ --> 432<div class="sec navy">
433 <div class="wrap"> 434 <div class="sec-title">ì§í ì ì°¨</div> 435 <div class="sec-sub">ì ì² ì ì í 1ìì ì¼ ìì íì¸ ì°ë½ì ëë¦¬ê³ , ì°©ìê¸ ê²°ì ë§í¬ë¥¼ ë³´ë´ë립ëë¤.</div> 436 <div class="flow"> 437 <div class="step"><div class="n">01</div><div class="t">ì ì²</div><div class="d">ë²ì íì¸ Â· ì ì</div></div> 438 <div class="step"><div class="n">02</div><div class="t">íì¸ ì°ë½</div><div class="d">1ìì ì¼ ë´</div></div> 439 <div class="step"><div class="n">03</div><div class="t">ì°©ìê¸ ê²°ì </div><div class="d">ê²°ì ë§í¬ ë°ì¡</div></div> 440 <div class="step"><div class="n">04</div><div class="t">ìì ì ì</div><div class="d">ëìì¸ íì¸</div></div> 441 <div class="step hl"><div class="n">05</div><div class="t">ìì íì </div><div class="d">ë²ì íì </div></div> 442 <div class="step"><div class="n">06</div><div class="t">ì ì · ê²ì</div><div class="d">무ì ìì ë°ì</div></div> 443 <div class="step"><div class="n">07</div><div class="t">ì¤í</div><div class="d">ìê¸ ê²°ì </div></div> 444 <div class="step"><div class="n">08</div><div class="t">íìë³´ì</div><div class="d">1ê°ì 무ì</div></div> 445 </div> 446 </div> 447</div> 448 449<!-- ì ì§ê´ë¦¬ --> 450<div class="sec gray"> 451 <div class="wrap"> 452 <div class="sec-title">ì¤í í ì ì§ê´ë¦¬(ì í)</div> 453 <div class="sec-sub">ííì´ì§ë ì¤í ì´íìë ìì´ ê°ëë¤. ë§¤ë¬ ì í´ì§ ìê¸ì¼ë¡ ê´ë¦¬í´ ë립ëë¤.</div> 454 <div class="cares"> 455 <div class="care"> 456 <div class="c-name">ë² ì´ì§ ì¼ì´</div> 457 <div class="c-price">ì 5ë§ì</div> 458 <div class="c-desc">ì ìì 2ê±´(í ì¤í¸ · ì´ë¯¸ì§ êµì²´) · ì 기 ë°±ì · ì¥ì ëì</div> 459 </div> 460 <div class="care"> 461 <div class="c-name">ì¤í ë¤ë ì¼ì´</div> 462 <div class="c-price">ì 10ë§ì</div> 463 <div class="c-desc">ì ìì 5ê±´ · ì½í ì¸ ë±ë¡ ëí · ë³´ì ì ë°ì´í¸ · ì 기 ë°±ì · ì¥ì ëì</div> 464 </div> 465 </div> 466 <div class="cares-note">â» ì ì§ê´ë¦¬ 미ê°ì ì ì¤í í ìì ì ê°ë³ ìì² 1ê±´ë¹ 3ë§ìë¶í° ì§íí©ëë¤. ì ì§ê´ë¦¬ ìê¸ì ì¤í ìì ë¶í° ì ë¨ì ë³ë ì²êµ¬ì ëë¤.</div> 467 </div> 468</div> 469 470<!-- ===== 주문 ===== --> 471<div class="sec blue" id="order"> 472 <div class="wrap"> 473 <div class="sec-title">ì ì ì ì²</div> 474 <div class="sec-sub">í¨í¤ì§ì ìµì ì ê³ ë¥´ë©´ ì°©ìê¸ì´ ë°ë¡ ê³ì°ë©ëë¤. ì ì² ì ì í 1ìì ì¼ ìì íì¸ ì°ë½ê³¼ í¨ê» ì°©ìê¸ ê²°ì ë§í¬(ì¹´ì¹´ì¤í¡ · 문ì)를 ë³´ë´ë립ëë¤.</div> 475 476 <div class="order-grid" id="orderGrid"> 477 <div class="order-main"> 478 479 <!-- 1. í¨í¤ì§ --> 480 <div class="ostep"> 481 <h3><span class="num">1</span>í¨í¤ì§ ì í</h3> 482 <div class="hint">ë§ì¶¤í(ìì½ Â· íì · ê²°ì ë± ê¸°ë¥ ê°ë°)ì ì구 ê¸°ë¥ íì í 견ì ì´ ëì¤ë¯ë¡ ìë´ì¼ë¡ ì§íí©ëë¤.</div> 483 <div class="pick" id="pkgPick"> 484 <label> 485 <input type="radio" name="pkg" value="consult"> 486 <div class="card"> 487 <div class="t">기í ìë´</div> 488 <div class="pr">5ë§ì <small style="font-weight:400;color:var(--text-sub)">(ë¶ê°ì¸ ë³ë)</small></div> 489 <div class="d">30ë¶ ìë´ Â· ì구ì¬í 문ìì 견ì ì · ì ì ì ì ì¡ ì°¨ê°</div> 490 </div> 491 </label> 492 <label> 493 <input type="radio" name="pkg" value="basic" checked> 494 <div class="card"> 495 <div class="t">ë² ì´ì§</div> 496 <div class="pr">150ë§ì <small style="font-weight:400;color:var(--text-sub)">(ë¶ê°ì¸ ë³ë)</small></div> 497 <div class="d">5íì´ì§ · í í릿 ê¸°ë° Â· 무ì ìì 2í · 2~3주</div> 498 </div> 499 </label> 500 <label> 501 <input type="radio" name="pkg" value="standard"> 502 <div class="card"> 503 <div class="t">ì¤í ë¤ë</div> 504 <div class="pr">300ë§ì <small style="font-weight:400;color:var(--text-sub)">(ë¶ê°ì¸ ë³ë)</small></div> 505 <div class="d">10íì´ì§ · ì ì© ëìì¸ Â· 무ì ìì 3í · 4~6주</div> 506 </div> 507 </label> 508 <label> 509 <input type="radio" name="pkg" value="custom"> 510 <div class="card"> 511 <div class="t">ë§ì¶¤í (ìë´)</div> 512 <div class="pr">ìë´ ê²¬ì </div> 513 <div class="d">ìë ìµì 목ë¡ì ìë ê¸°ë¥ Â· ì¸ë¶ ìì¤í ì°ë</div> 514 </div> 515 </label> 516 </div> 517 </div> 518 519 <!-- 2. ìµì --> 520 <div class="ostep" id="stepOptions"> 521 <h3><span class="num">2</span>ìµì ì¶ê°</h3> 522 <div class="hint">íìí ê²ë§ ê³ ë¥´ìë©´ ê¸ì¡ì´ ë°ë¡ ëí´ì§ëë¤. 목ë¡ì ìë 기ë¥ì ìë ìì² ì¬íì ì ì´ ì£¼ìë©´ ë³ë 견ì ì¼ë¡ ìë´ë립ëë¤.</div> 523 <div id="featList"></div> 524 <div class="opt-row"> 525 <div> 526 <div class="o-name">ì¤í í ì ì§ê´ë¦¬</div> 527 <div class="o-desc">ì¤í ìì ë¶í° ì ë¨ì ë³ë ì²êµ¬ · ì°©ìê¸ì í¬í¨ëì§ ììµëë¤</div> 528 </div> 529 <select class="care-sel" id="careSel"> 530 <option value="none">ì ì² ì í¨</option> 531 <option value="basic">ë² ì´ì§ ì¼ì´ · ì 5ë§ì</option> 532 <option value="standard">ì¤í ë¤ë ì¼ì´ · ì 10ë§ì</option> 533 </select> 534 </div> 535 </div> 536 537 <!-- 3. ë²ì íì¸ --> 538 <div class="ostep" id="stepScope"> 539 <h3><span class="num">3</span>ë²ì íì¸</h3> 540 <div class="hint">ì ì² ì ì í¬í¨ ë²ìì ë¶í¬í¨ í목ì íì¸í´ 주ì¸ì. ì´ ë´ì© ê·¸ëë¡ ì§íë©ëë¤.</div> 541 <div class="scope-box"> 542 <h4>í¬í¨</h4> 543 <ul id="scopeInc"></ul> 544 </div> 545 <div class="scope-box"> 546 <h4 id="scopeExcTitle">í¬í¨ëì§ ìì (ì§í ì¤ ì¶ê° ì ë³ë 견ì )</h4> 547 <ul id="scopeExcFeat"></ul> 548 <ul id="scopeExcFixed"> 549 <li class="exc">ì íí íì´ì§ ì를 ëë íì´ì§ ì¶ê° (1íì´ì§ 15ë§ì)</li> 550 <li class="exc">ìµì 목ë¡ì ìë ê¸°ë¥ (ìì² ì ë³ë 견ì )</li> 551 <li class="exc">ìì íì í ë ì´ìì · ëìì¸ ì»¨ì ì ë©´ ë³ê²½ (ì¬ê³ì½)</li> 552 <li class="exc">문구 · ì¬ì§ ìê³ ìì± (ìë¢°ì¸ ì ê³µ, ìì± ëíì íì)</li> 553 </ul> 554 </div> 555 <div class="scope-box" id="scopeFeeBox"> 556 <h4>ì¤ë¹ ë³ë</h4> 557 <ul> 558 <li class="fee">ëë©ì¸ ë±ë¡ ì° 2ë§ì ìí · ìë² í¸ì¤í ì 1~2ë§ì ìí</li> 559 <li class="fee">ì ë£ ì´ë¯¸ì§ · í°í¸ 구매 ì ì¤ë¹</li> 560 </ul> 561 </div> 562 <label class="agree"> 563 <input type="checkbox" id="agreeScope">
564 <span id="agreeScopeText"><b>[íì]</b> ì í¬í¨ ë²ìì 무ì ìì íì를 íì¸íìµëë¤.</span> 565 </label> 566 <label class="agree"> 567 <input type="checkbox" id="agreeChange"> 568 <span id="agreeChangeText"><b>[íì]</b> íì´ì§ · ê¸°ë¥ ì¶ê°ì 컨ì ë³ê²½ì ë²ì ë³ê²½ì¼ë¡ ë³ë 견ì ëììì ëìí©ëë¤.</span> 569 </label> 570 </div> 571 572 <!-- 4. ì ì² ì ë³´ --> 573 <div class="ostep"> 574 <h3><span class="num">4</span>ì ì² ì ë³´</h3> 575 <div class="hint">íì¸ ì°ë½ê³¼ ì§í ìë´ì ì¬ì©í©ëë¤.</div> 576 <div class="frm"> 577 <div> 578 <label for="fCompany">ìí¸ Â· 기ê´ëª <em>*</em></label> 579 <input type="text" id="fCompany" placeholder="ì: ì¤ì°ìì¬"> 580 </div> 581 <div> 582 <label for="fName">ë´ë¹ì ì±í¨ <em>*</em></label> 583 <input type="text" id="fName" placeholder="ì: í길ë"> 584 </div> 585 <div> 586 <label for="fPhone">ì°ë½ì² <em>*</em></label> 587 <input type="tel" id="fPhone" placeholder="010-0000-0000"> 588 </div> 589 <div> 590 <label for="fEmail">ì´ë©ì¼</label> 591 <input type="email" id="fEmail" placeholder="[email protected]"> 592 </div> 593 <div> 594 <label for="fDue">í¬ë§ ì¤í ì기</label> 595 <input type="month" id="fDue"> 596 </div> 597 <div class="full"> 598 <label for="fMemo">ì°¸ê³ ì¬ì´í¸ · ìì² ì¬í</label> 599 <textarea id="fMemo" placeholder="ì°¸ê³ íê³ ì¶ì ì¬ì´í¸ 주ì, ííì´ì§ ì©ë, ê¼ ë¤ì´ê°ì¼ íë ë´ì© ë±ì ì ì´ ì£¼ì¸ì."></textarea> 600 </div> 601 </div> 602 <div class="privacy-note"> 603 ì ë ¥íì ì ë³´ë ì ì · ìë´ ê³ì½ì ì§íê³¼ ê²°ì ì²ë¦¬ìë§ ì¬ì©íê³ , ê·¸ ë°ì 목ì ì¼ë¡ë ì°ì§ ììµëë¤. 604 ë³´ê´ ê¸°ê°ê³¼ ì²ë¦¬ ì ì°¨ë <a href="/privacy/" target="_blank" rel="noopener">ê°ì¸ì ë³´ ì²ë¦¬ë°©ì¹¨</a>ìì íì¸íì¤ ì ììµëë¤. 605 </div> 606 </div> 607 </div> 608 609 <!-- 견ì ìì½ --> 610 <div class="order-side"> 611 <div class="quote" id="quoteBox"> 612 <h3 id="qTitle">견ì ìì½</h3> 613 <div id="qBody"> 614 <div class="q-row"><span class="k" id="qPkgName">ë² ì´ì§</span><span class="v" id="qPkgPrice">150ë§ì</span></div> 615 <div id="qFeatRows"></div> 616 <div class="q-div"></div> 617 <div class="q-row"><span class="k">ì ìë¹ í©ê³ (ë¶ê°ì¸ ë³ë)</span><span class="v" id="qSupply">150ë§ì</span></div> 618 <div class="q-row"><span class="k">ë¶ê°ì¸ (10%)</span><span class="v" id="qVat">15ë§ì</span></div> 619 <div class="q-row total"><span class="k">ì´ì¡ (ë¶ê°ì¸ í¬í¨)</span><span class="v" id="qTotal">165ë§ì</span></div> 620 <div class="q-row deposit"><span class="k" id="qDepositLabel">ì°©ìê¸ (50%)</span><span class="v" id="qDeposit">82ë§5,000ì</span></div> 621 <div class="q-row" id="qBalanceRow"><span class="k">ìê¸ (ì¤í ì)</span><span class="v" id="qBalance">82ë§5,000ì</span></div> 622 <div class="q-row" id="qCareRow" style="display:none"><span class="k" id="qCareName"></span><span class="v" id="qCarePrice"></span></div> 623 </div> 624 <div id="qCustomBody" style="display:none"> 625 <div class="q-note" style="margin-top:0;font-size:13.5px;color:#e2e8f0;line-height:1.7">ë§ì¶¤íì ì구 기ë¥ì íì¸í ë¤ ê²¬ì ì ë립ëë¤. ìë ì ì² ì 보를 ë¨ê²¨ 주ìë©´ 1ìì ì¼ ìì ì°ë½ë립ëë¤.</div> 626 </div> 627 <div class="q-note" id="qNote">ì ì² ì ì í 1ìì ì¼ ìì íì¸ ì°ë½ì ëë¦¬ê³ , ì°©ìê¸ ê²°ì ë§í¬(ì¹´ì¹´ì¤í¡ · 문ì)를 ë³´ë´ë립ëë¤. ì°©ìê¸ ì ê¸ íì¸ ìì ë¶í° ì ìì´ ììë©ëë¤. ìì ì ì ì°©ì ì ìë ì°©ìê¸ ì ì¡ì´ íë¶ë©ëë¤.</div>
628 <button class="q-submit" id="btnSubmit">ì ì² ì ìí기</button> 629 <div class="q-err" id="qErr"></div> 630 </div> 631 </div> 632 </div> 633 634 <!-- ì ì ìë£ --> 635 <div class="done" id="doneBox"> 636 <h3>ì ì² ë´ì©ì´ ì¤ë¹ëììµëë¤</h3> 637 <p>ìë ë´ì©ì <b>[email protected]</b>ë¡ ë³´ë´ ì£¼ìë©´ ì ìê° ìë£ë©ëë¤. ë²í¼ì ë르면 ë©ì¼ ì±ì´ ì´ë¦¬ê³ ë´ì©ì´ ìëì¼ë¡ ì±ìì§ëë¤.</p> 638 <p>ì ì íì¸ í 1ìì ì¼ ìì ì°ë½ëë¦¬ê³ , ì°©ìê¸ ê²°ì ë§í¬ë¥¼ ì¹´ì¹´ì¤í¡ · 문ìë¡ ë³´ë´ë립ëë¤.</p> 639 <div class="sum" id="doneSum"></div> 640 <div class="btns"> 641 <a class="mail" id="doneMail" href="#">ë©ì¼ ì±ì¼ë¡ ë³´ë´ê¸°</a> 642 <button class="copy" id="doneCopy" type="button">ë´ì© ë³µì¬í기</button> 643 </div> 644 </div> 645 </div> 646</div> 647 648<!-- í¸í° --> 649<div class="footer"> 650 <div class="wrap"> 651 <div class="co">주ìíì¬ ë¦¬ì¨ (RION Co., Ltd.)</div> 652 <div class="line">ëí ì¡°íë ¨ · ì¬ì ìë±ë¡ë²í¸ 802-81-04003</div> 653 <div class="line">경기ë ì¤ì°ì ì²íë¡ 45, ì¤ì°ëíêµ ì§ì±1ê´ B504í¸</div> 654 <div class="line">문ì <a href="mailto:[email protected]">[email protected]</a></div> 655 <div class="line"><a href="/terms/">ì´ì©ì½ê´</a> · <a href="/privacy/">ê°ì¸ì ë³´ ì²ë¦¬ë°©ì¹¨</a></div> 656 <div class="caveat"> 657 íì ê°ê²©ì 2026ë 8ì ê¸°ì¤ íì¤ ìê¸ì´ë©° ë¶ê°ì¸ í¬í¨ ì´ì¡ì í¨ê» íìí©ëë¤. ê²°ì ë ì´ íë©´ìì ì¹´ëë¡ ì§íëê³ , ê²°ì ë´ìì ë±ë¡íì ì°ë½ì²ë¡ ìë´ë립ëë¤.<br> 658 íë¶ ê¸°ì¤ì ì ìì ê²½ì° ìì ì ì ì°©ì ì ì°©ìê¸ ì ì¡ íë¶, ì°©ì íìë ì§í ë¨ê³ì ë°ë¼ 기ì±ë¶ì ê³µì íê³ ì ì°í©ëë¤. 기í ìë´ì ìë´ ì§í ì ê¹ì§ ì ì¡ íë¶ë©ëë¤. 659 </div> 660 </div> 661</div> 662
663<script> 664(function () { 665 // ===== ì°ë ì¤ì ===== 666 // ORDER_ENDPOINT : 주문 ì ì¥Â·ê²°ì ì¹ì¸ ìë²(API Gateway) 주ì. ë¹ì°ë©´ ë©ì¼ ì ìë¡ ëìíë¤. 667 // NICEPAY_CLIENT_ID : ëì´ì¤íì´ í´ë¼ì´ì¸í¸ í¤(Server ì¹ì¸ 모ë¸). ë ë¤ ì±ìì¼ ê²°ì ì°½ì´ ì´ë¦°ë¤. 668 var ORDER_ENDPOINT = 'https://dlk3hq1rlf.execute-api.ap-northeast-2.amazonaws.com'; 669 var NICEPAY_CLIENT_ID = 'R2_5728844a3bcd4346b23888812481a2d6'; 670 671 // >>> CATALOG START. ë¨ê° ì ì. ìë²(rion-pay-api/catalog.js)ì ê°ì´ ì¼ì¹í´ì¼ íë©° 672 // check_catalog.jsê° ë ê³³ì ëì¡°íë¤. ê°ì ê³ ì¹ë©´ ë°ëì ì쪽ì í¨ê» ê³ ì¹ ê². 673 var PKG = { 674 // fullPay = ì°©ìê¸Â·ìê¸ì¼ë¡ ëëì§ ìê³ ì ì¡ ê²°ì 675 consult: { label: '기í ìë´', base: 50000, fullPay: true, pages: '30ë¶ ìë´(ì í ëë íì)', design: 'íìí ê¸°ë¥ ì 리', extra: 'ìì° ë²ì ì°ì ', rev: 'ì구ì¬í 문ì · 견ì ì ì ê³µ', weeks: 'ì ì² í 3ìì ì¼ ì´ë´ ì§í' }, 676 basic: { label: 'ë² ì´ì§', base: 1500000, pages: '5íì´ì§ ì´ë´', design: 'ê²ì¦ë í í릿 ê¸°ë° ë§ì¶¤ ëìì¸', extra: '문ìí¼ Â· ì§ë · ì í ì°ê²°', rev: '무ì ìì 2í', weeks: 'ì ì ê¸°ê° 2~3주' }, 677 standard: { label: 'ì¤í ë¤ë', base: 3000000, pages: '10íì´ì§ ì´ë´', design: 'ì ì© ëìì¸, ìì 2ì¢ ì¤ ì í', extra: 'ê°¤ë¬ë¦¬ · ê³µì§ ê´ë¦¬, 방문 íµê³', rev: '무ì ìì 3í', weeks: 'ì ì ê¸°ê° 4~6주' }, 678 custom: { label: 'ë§ì¶¤í (ìë´)', base: 0 } 679 }; 680 681 // ê¸°ë¥ ìµì ì¹´íë¡ê·¸ (ê¸ì¡ì ë¶ê°ì¸ ë³ë) 682 // type 'count' = ìë ì í · 'check' = ì í/í´ì 683 // includes = ì´ ìµì ì í¡ìëì´ ì¤ë³µ ì²êµ¬íì§ ìë ìµì 684 // requires = ì´ ìµì ì ì¼ë©´ í¨ê» ì¼ì§ë ì í ìµì 685 // freeIn = í´ë¹ í¨í¤ì§ììë 기본 í¬í¨ì´ë¼ 목ë¡ìì ê°ì¶¤ 686 var GROUPS = [ 687 { name: 'íì´ì§ · ìê³ ', items: [ 688 { id: 'page', type: 'count', name: 'íì´ì§ ì¶ê°', price: 150000, unit: 'íì´ì§', max: 20, desc: 'ì íí í¨í¤ì§ íì´ì§ ì를 ëë ë¶ë' }, 689 { id: 'copy', type: 'count', name: '문구(ìê³ ) ìì± ëí', price: 100000, unit: 'íì´ì§', max: 20, desc: 'ì ê³µí´ ì£¼ì ìë£ë¥¼ ë°íì¼ë¡ íì´ì§ 문구 ìì±' }, 690 { id: 'lang', type: 'count', name: 'ì문 íì´ì§ ì¶ê°', price: 80000, unit: 'íì´ì§', max: 20, desc: 'ì문 ë²ì본 · ì¸ì´ ì í ë²í¼' } 691 ]}, 692 { name: 'ëìì¸ Â· ì°ì¶', items: [ 693 { id: 'anim', type: 'check', name: 'íë©´ ì°ì¶ · ì ëë©ì´ì ', price: 500000, desc: 'ì¤í¬ë¡¤ ë±ì¥ í¨ê³¼, ë°°ë ì¬ë¼ì´ë, ë§ì°ì¤ ë°ì ì°ì¶' }, 694 { id: 'video', type: 'check', name: 'ë©ì¸ ìì ë°°ê²½', price: 300000, desc: 'ì ê³µí´ ì£¼ì ììì 첫 íë©´ ë°°ê²½ì¼ë¡ ì ì©' }, 695 { id: 'logo', type: 'check', name: 'ë¡ê³ ì ì', price: 400000, desc: 'ìì 3ì¢ ì ì · íì 본 íì¼ ì¼ì²´ ì ê³µ' }, 696 { id: 'pwa', type: 'check', name: 'í´ëí° ì¤ì¹í(ì±ì²ë¼ ì¤í)', price: 600000, desc: 'í íë©´ì ìì´ì½ì¼ë¡ ì¤ì¹ëë ííë¡ ì ì' } 697 ]}, 698 { name: 'ì½í ì¸ ì´ì', items: [ 699 { id: 'board', type: 'check', name: 'ê²ìí · ê³µì§ ê´ë¦¬ì', price: 600000, desc: 'ì§ì ê¸ Â· ì´ë¯¸ì§ë¥¼ ì¬ë¦¬ê³ ê³ ì¹ë ê´ë¦¬ì íë©´', freeIn: ['standard'] }, 700 { id: 'gallery', type: 'check', name: 'ì¬ì§ ê°¤ë¬ë¦¬ ê´ë¦¬', price: 400000, desc: 'ì¨ë² ë¨ì ì¬ì§ ë±ë¡ · ì ë ¬', freeIn: ['standard'] }, 701 { id: 'files', type: 'check', name: 'ìë£ì¤ · íì¼ ë´ë ¤ë°ê¸°', price: 400000, desc: '문ì íì¼ ë±ë¡ê³¼ ë´ë ¤ë°ê¸° 목ë¡' }, 702 { id: 'popup', type: 'check', name: 'íì · ë°°ë ê´ë¦¬', price: 300000, desc: '기ê°ì ì í´ ì¬ë«ë 첫 íë©´ íì ê³¼ ë°°ë' } 703 ]}, 704 { name: 'ê³ ê° ì ì ', items: [ 705 { id: 'notify', type: 'check', name: '문ì ì ì ì림', price: 300000, desc: '문ìê° ë¤ì´ì¤ë©´ ë©ì¼ · 문ìë¡ ì¦ì ì림' }, 706 { id: 'kakao', type: 'check', name: 'ì¹´ì¹´ì¤í¡ ìë´ ì°ê²°', price: 200000, desc: 'ì¹´ì¹´ì¤í¡ ì±ë ìë´ ë²í¼ ì°ê²°' }, 707 { id: 'booking', type: 'check', name: 'ìì½ Â· ì ì ê´ë¦¬', price: 1500000, desc: 'ë¬ë ¥ ìì½ ì ì², ì ì ëª©ë¡ ê´ë¦¬, ì림 ë°ì¡' } 708 ]}, 709 { name: 'í매 · íì', items: [ 710 { id: 'member', type: 'check', name: 'íìê°ì · ë¡ê·¸ì¸', price: 2000000, desc: 'íì ê°ì · ë¡ê·¸ì¸ · íì ëª©ë¡ ê´ë¦¬' }, 711 { id: 'pay', type: 'check', name: 'ì¨ë¼ì¸ ê²°ì ì°ë', price: 3000000, desc: 'ì¹´ë ê²°ì ì°½ ì°ëê³¼ ê²°ì ë´ì ê´ë¦¬ (PG ê°ë§¹ ê³ì½ì ìë¢°ì¸ ëª ì)' }, 712 { id: 'shop', type: 'check', name: 'ìí í매 · ì¬ê³ ê´ë¦¬', price: 5000000, desc: 'ìí ë±ë¡, ì¬ê³ íí©, ì¥ë°êµ¬ë, 주문 · ê²°ì ê¹ì§ í¬í¨', includes: ['pay'] }, 713 { id: 'subs', type: 'check', name: 'ì 기 ê²°ì (구ë )', price: 2000000, desc: 'ì ë¨ì ìë ê²°ì ì 구ë ê´ë¦¬', requires: ['pay'] } 714 ]}, 715 { name: 'ë§ì¼í · ë¶ì', items: [ 716 { id: 'ga', type: 'check', name: '방문 íµê³ 리í¬í¸', price: 300000, desc: '방문ì · ì ì ê²½ë¡ ë¶ì ë구 ì¤ì¹ì ë³´ë ë² ìë´', freeIn: ['standard'] }, 717 { id: 'seo', type: 'check', name: 'ê²ì ë ¸ì¶ ê°í ì¤ì ', price: 400000, desc: 'íì´ì§ë³ ê²ì ì ë³´ ì 리, ê²ì ë±ë¡ ìí ì ê²' }, 718 { id: 'news', type: 'check', name: 'ë´ì¤ë í° ë°ì¡', price: 800000, desc: '구ë ì ìì§ê³¼ ë©ì¼ ë°ì¡ íë©´' } 719 ]} 720 ]; 721 722 var CARE = { 723 none: { label: 'ì ì² ì í¨', monthly: 0 }, 724 basic: { label: 'ë² ì´ì§ ì¼ì´', monthly: 50000 }, 725 standard: { label: 'ì¤í ë¤ë ì¼ì´', monthly: 100000 } 726 }; 727 // <<< CATALOG END 728 729 var FEATURES = [];
730 GROUPS.forEach(function (g) { g.items.forEach(function (f) { FEATURES.push(f); }); }); 731 var FEAT = {}; 732 FEATURES.forEach(function (f) { FEAT[f.id] = f; }); 733 734 // sel[id] = ì²´í¬íì´ë©´ true/false, ìëíì´ë©´ ê°ì 735 var state = { pkg: 'basic', care: 'none', sel: {} }; 736 737 var $ = function (id) { return document.getElementById(id); }; 738 739 function won(n) { 740 var man = Math.floor(n / 10000); 741 var rest = n % 10000; 742 if (man === 0) return n.toLocaleString('ko-KR') + 'ì'; 743 if (rest === 0) return man.toLocaleString('ko-KR') + 'ë§ì'; 744 return man.toLocaleString('ko-KR') + 'ë§' + rest.toLocaleString('ko-KR') + 'ì'; 745 } 746 747 function isOn(id) { return !!state.sel[id]; } 748 function qtyOf(id) { return state.sel[id] || 0; } 749 750 // í¨í¤ì§ì 기본 í¬í¨ëì´ ì²êµ¬íì§ ìë ìµì 751 function isFreeInPkg(f) { return !!(f.freeIn && f.freeIn.indexOf(state.pkg) >= 0); } 752 753 // ìì ìµì ì í¡ìë ìµì â {id: í¡ìí ìµì ëª } 754 function absorbed() { 755 var set = {}; 756 FEATURES.forEach(function (f) { 757 if (isOn(f.id) && f.includes) { 758 f.includes.forEach(function (id) { set[id] = f.name; }); 759 } 760 }); 761 return set; 762 } 763 764 // ì¤ì ì²êµ¬ ëì = ì íë¨ + í¨í¤ì§ 기본í¬í¨ ìë + ìì ìµì ì í¡ìëì§ ìì 765 function billed() { 766 var abs = absorbed(); 767 return FEATURES.filter(function (f) { 768 return isOn(f.id) && !abs[f.id] && !isFreeInPkg(f); 769 }).map(function (f) { 770 var qty = f.type === 'count' ? qtyOf(f.id) : 1; 771 return { f: f, qty: qty, amount: f.price * qty }; 772 }); 773 } 774 775 function calc() { 776 var optSum = billed().reduce(function (s, b) { return s + b.amount; }, 0); 777 var supply = PKG[state.pkg].base + optSum; 778 var vat = Math.round(supply * 0.1); 779 var total = supply + vat; 780 var fullPay = !!PKG[state.pkg].fullPay; 781 var deposit = fullPay ? total : Math.round(total / 2); 782 return { supply: supply, vat: vat, total: total, deposit: deposit, balance: total - deposit, fullPay: fullPay }; 783 } 784 785 // ===== ìµì ëª©ë¡ ë ë ===== 786 function buildFeatureList() { 787 var html = GROUPS.map(function (g) { 788 var rows = g.items.map(function (f) { 789 var tail = f.type === 'count' 790 ? '<div class="opt-tail"><div class="stepper">' 791 + '<button type="button" data-dec="' + f.id + '" aria-label="ì¤ì´ê¸°">â</button>' 792 + '<div class="val"><span data-qty="' + f.id + '">0</span>' + (f.unit === 'íì´ì§' ? 'p' : '') + '</div>' 793 + '<button type="button" data-inc="' + f.id + '" aria-label="ë리기">+</button>' 794 + '</div><div class="o-price" data-price="' + f.id + '">+' + won(f.price) + '</div></div>' 795 : '<div class="o-price" data-price="' + f.id + '">+' + won(f.price) + '</div>'; 796 var left = f.type === 'count' 797 ? '<div class="opt-left"><div><div class="o-name">' + f.name + '</div><div class="o-desc" data-desc="' + f.id + '">' + f.desc + '</div></div></div>' 798 : '<div class="opt-left"><input type="checkbox" data-cb="' + f.id + '"><div><div class="o-name">' + f.name + '</div><div class="o-desc" data-desc="' + f.id + '">' + f.desc + '</div></div></div>'; 799 var tag = f.type === 'count' ? 'div' : 'label'; 800 return '<' + tag + ' class="opt-row" data-row="' + f.id + '">' + left + tail + '</' + tag + '>'; 801 }).join(''); 802 return '<div class="opt-group" data-group="' + g.name + '"><div class="g-name">' + g.name + '</div>' + rows + '</div>'; 803 }).join(''); 804 $('featList').innerHTML = html; 805 806 $('featList').querySelectorAll('input[data-cb]').forEach(function (cb) { 807 cb.addEventListener('change', function () { 808 var id = cb.getAttribute('data-cb'); 809 state.sel[id] = cb.checked; 810 var f = FEAT[id]; 811 if (cb.checked && f.requires) { 812 f.requires.forEach(function (r) { state.sel[r] = true; }); 813 } 814 render(); 815 }); 816 }); 817 $('featList').querySelectorAll('[data-inc]').forEach(function (b) { 818 b.addEventListener('click', function () { 819 var id = b.getAttribute('data-inc'); 820 state.sel[id] = Math.min(FEAT[id].max, qtyOf(id) + 1); 821 render(); 822 }); 823 }); 824 $('featList').querySelectorAll('[data-dec]').forEach(function (b) { 825 b.addEventListener('click', function () { 826 var id = b.getAttribute('data-dec'); 827 state.sel[id] = Math.max(0, qtyOf(id) - 1); 828 render(); 829 }); 830 }); 831 } 832 833 function render() { 834 var isCustom = state.pkg === 'custom'; 835 var isConsult = state.pkg === 'consult'; 836 var canPay = NICEPAY_CLIENT_ID && ORDER_ENDPOINT; 837 // ìë´ì ìµì ì´ ìë¤. ìµì ë¨ê³ë§ ì¨ê¸°ê³ ë²ì íì¸ì ìë´ ì¡°ê±´ì¼ë¡ ë°ê¿ ë³´ì¬ì¤ë¤. 838 $('stepOptions').style.display = (isCustom || isConsult) ? 'none' : ''; 839 $('stepScope').style.display = isCustom ? 'none' : ''; 840 $('qBody').style.display = isCustom ? 'none' : ''; 841 $('qCustomBody').style.display = isCustom ? '' : 'none'; 842 $('qNote').style.display = isCustom ? 'none' : ''; 843 $('qTitle').textContent = isCustom ? 'ìë´ ì ì²' : (isConsult ? 'ìë´ ì ì²' : '견ì ìì½'); 844 $('btnSubmit').textContent = isCustom ? 'ìë´ ì ì²í기' 845 : (canPay ? (isConsult ? 'ìë´ë£ ê²°ì íê³ ìì½í기' : 'ì°©ìê¸ ê²°ì íê³ ì ì²í기') : 'ì ì² ì ìí기'); 846 $('qNote').textContent = isConsult 847 ? 'ê²°ì í 3ìì ì¼ ìì ìë´ ì¼ì ì ì¡ì ì°ë½ë립ëë¤. ìë´ì´ ëëë©´ ì구ì¬í 문ìì 견ì ì를 ë³´ë´ëë¦¬ê³ , ì ìì¼ë¡ ì´ì´ì§ë©´ ìë´ë£ ì ì¡ì ì ìë¹ìì ì°¨ê°í©ëë¤. ìë´ ì ìë ì ì¡ íë¶ë©ëë¤.' 848 : 'ì ì² ì ì í 1ìì ì¼ ìì íì¸ ì°ë½ì ë립ëë¤. ì°©ìê¸ ì ê¸ íì¸ ìì ë¶í° ì ìì´ ììë©ëë¤. ìì ì ì ì°©ì ì ìë ì°©ìê¸ ì ì¡ì´ íë¶ë©ëë¤.'; 849 if (isCustom) return; 850 851 var p = PKG[state.pkg]; 852 var c = calc(); 853 var abs = absorbed(); 854 855 // ìµì í ìí ê°±ì 856 FEATURES.forEach(function (f) { 857 var row = document.querySelector('[data-row="' + f.id + '"]'); 858 var priceEl = document.querySelector('[data-price="' + f.id + '"]'); 859 var descEl = document.querySelector('[data-desc="' + f.id + '"]'); 860 var cb = document.querySelector('[data-cb="' + f.id + '"]'); 861 var qtyEl = document.querySelector('[data-qty="' + f.id + '"]'); 862 if (!row) return; 863 864 if (isFreeInPkg(f)) { 865 row.style.display = 'none'; 866 return; 867 } 868 row.style.display = ''; 869 if (qtyEl) qtyEl.textContent = qtyOf(f.id); 870 if (cb) cb.checked = isOn(f.id); 871 872 var on = f.type === 'count' ? qtyOf(f.id) > 0 : isOn(f.id); 873 row.classList.toggle('on', on && !abs[f.id]); 874 875 if (abs[f.id]) { 876 priceEl.textContent = 'í¬í¨'; 877 priceEl.style.color = 'var(--text-sub)'; 878 descEl.textContent = 'ã' + abs[f.id] + 'ãì í¬í¨ëì´ ë°ë¡ ì²êµ¬íì§ ììµëë¤'; 879 if (cb) { cb.checked = true; cb.disabled = true; } 880 } else { 881 if (cb) cb.disabled = false;
882 descEl.textContent = f.desc; 883 priceEl.style.color = 'var(--blue)'; 884 if (f.type === 'count') { 885 priceEl.textContent = qtyOf(f.id) > 0 886 ? won(f.price * qtyOf(f.id)) 887 : '+' + won(f.price) + ' / ' + f.unit; 888 } else { 889 priceEl.textContent = '+' + won(f.price); 890 } 891 } 892 }); 893 894 // 견ì ìì½ 895 $('qPkgName').textContent = p.label + ' í¨í¤ì§'; 896 $('qPkgPrice').textContent = won(p.base); 897 $('qFeatRows').innerHTML = billed().map(function (b) { 898 var label = b.f.name + (b.f.type === 'count' ? ' à ' + b.qty : ''); 899 return '<div class="q-row"><span class="k">' + label + '</span><span class="v">' + won(b.amount) + '</span></div>'; 900 }).join(''); 901 $('qSupply').textContent = won(c.supply); 902 $('qVat').textContent = won(c.vat); 903 $('qTotal').textContent = won(c.total); 904 $('qDepositLabel').textContent = c.fullPay ? 'ê²°ì ê¸ì¡ (ì ì¡)' : 'ì°©ìê¸ (50%)'; 905 $('qDeposit').textContent = won(c.deposit); 906 $('qBalance').textContent = won(c.balance); 907 $('qBalanceRow').style.display = c.fullPay ? 'none' : ''; 908 909 var careRow = $('qCareRow'); 910 if (state.care !== 'none') { 911 careRow.style.display = ''; 912 $('qCareName').textContent = 'ì ì§ê´ë¦¬ · ' + CARE[state.care].label + ' (ì¤í í ë³ë)'; 913 $('qCarePrice').textContent = 'ì ' + won(CARE[state.care].monthly); 914 } else { 915 careRow.style.display = 'none'; 916 } 917 918 // ë²ì íì¸: ìë´ ìíì ì ì 기ì¤ì´ ìëë¼ ìë´ ì¡°ê±´ì ë³´ì¬ì¤ë¤ 919 if (isConsult) { 920 $('scopeInc').innerHTML = [p.pages, p.design, p.extra, p.rev, p.weeks, 921 'ì ì ê³ì½ì¼ë¡ ì´ì´ì§ë©´ ìë´ë£ ì ì¡ì ì ìë¹ìì ì°¨ê°' 922 ].map(function (t) { return '<li class="inc">' + t + '</li>'; }).join(''); 923 $('scopeExcTitle').textContent = 'í¬í¨ëì§ ìì'; 924 $('scopeExcFeat').innerHTML = ''; 925 $('scopeExcFixed').innerHTML = [ 926 'ëìì¸ ìì · ê°ë° ë± ì¤ì ì ì ìì (ë³ë ê³ì½)', 927 'ìë´ ìê°ì ë기ë ì¶ê° ìë´ (30ë¶ ë¨ìë¡ ë³ë ì ì²)' 928 ].map(function (t) { return '<li class="exc">' + t + '</li>'; }).join(''); 929 $('scopeFeeBox').style.display = 'none'; 930 $('agreeScopeText').innerHTML = '<b>[íì]</b> ìë´ ìê°(30ë¶)ê³¼ 결과물(ì구ì¬í 문ì · 견ì ì)ì íì¸íìµëë¤.'; 931 $('agreeChangeText').innerHTML = '<b>[íì]</b> ì´ ìë´ìë ì¤ì ì ì ìì ì´ í¬í¨ëì§ ììì ëìí©ëë¤.'; 932 return; 933 } 934 $('scopeExcTitle').textContent = 'í¬í¨ëì§ ìì (ì§í ì¤ ì¶ê° ì ë³ë 견ì )'; 935 $('scopeFeeBox').style.display = ''; 936 $('agreeScopeText').innerHTML = '<b>[íì]</b> ì í¬í¨ ë²ìì 무ì ìì íì를 íì¸íìµëë¤.'; 937 $('agreeChangeText').innerHTML = '<b>[íì]</b> íì´ì§ · ê¸°ë¥ ì¶ê°ì 컨ì ë³ê²½ì ë²ì ë³ê²½ì¼ë¡ ë³ë 견ì ëììì ëìí©ëë¤.'; 938 $('scopeExcFixed').innerHTML = [ 939 'ì íí íì´ì§ ì를 ëë íì´ì§ ì¶ê° (1íì´ì§ 15ë§ì)', 940 'ìµì 목ë¡ì ìë ê¸°ë¥ (ìì² ì ë³ë 견ì )', 941 'ìì íì í ë ì´ìì · ëìì¸ ì»¨ì ì ë©´ ë³ê²½ (ì¬ê³ì½)', 942 '문구 · ì¬ì§ ìê³ ìì± (ìë¢°ì¸ ì ê³µ, ìì± ëíì íì)' 943 ].map(function (t) { return '<li class="exc">' + t + '</li>'; }).join(''); 944 945 var pageOpt = billed().filter(function (b) { return b.f.id === 'page'; })[0]; 946 var inc = [ 947 p.pages + (pageOpt ? ' + ì¶ê° ' + pageOpt.qty + 'íì´ì§' : ''), 948 p.design, 949 p.extra, 950 'ë°ìí ì ì · SSL ì ì© Â· ë¤ì´ë² · êµ¬ê¸ ê²ì ë±ë¡', 951 p.rev + ' (ìì 1í = ìì²ì 모ì í ë²ì ì ë¬)', 952 p.weeks, 953 'ì¤í í 1ê°ì 무ì íìë³´ì' 954 ]; 955 billed().forEach(function (b) { 956 if (b.f.id === 'page') return; 957 inc.push('[ì í ìµì ] ' + b.f.name + (b.f.type === 'count' ? ' ' + b.qty + b.f.unit : '') + ' (' + b.f.desc + ')'); 958 }); 959 $('scopeInc').innerHTML = inc.map(function (t) { return '<li class="inc">' + t + '</li>'; }).join(''); 960 961 var notPicked = FEATURES.filter(function (f) { 962 if (isFreeInPkg(f) || abs[f.id]) return false;
963 return f.type === 'count' ? qtyOf(f.id) === 0 : !isOn(f.id); 964 }); 965 $('scopeExcFeat').innerHTML = notPicked.length 966 ? '<li class="exc">ì ííì§ ìì ìµì 기ë¥: ' + notPicked.map(function (f) { return f.name; }).join(' · ') + '</li>' 967 : ''; 968 } 969 970 // ===== ì ë ¥ ë°°ì ===== 971 document.querySelectorAll('input[name="pkg"]').forEach(function (r) { 972 r.addEventListener('change', function () { state.pkg = r.value; render(); }); 973 }); 974 document.querySelectorAll('[data-pick]').forEach(function (a) { 975 a.addEventListener('click', function () { 976 var v = a.getAttribute('data-pick'); 977 var r = document.querySelector('input[name="pkg"][value="' + v + '"]'); 978 if (r) { r.checked = true; state.pkg = v; render(); } 979 }); 980 }); 981 $('careSel').addEventListener('change', function (e) { state.care = e.target.value; render(); }); 982 983 // ===== 주문 ë°ì´í° ===== 984 function orderPayload() { 985 var isCustom = state.pkg === 'custom'; 986 var c = isCustom ? null : calc(); 987 return { 988 pkg: state.pkg, 989 pkgLabel: PKG[state.pkg].label, 990 options: isCustom ? [] : billed().map(function (b) { 991 return { id: b.f.id, name: b.f.name, qty: b.qty, amount: b.amount }; 992 }), 993 care: state.care, 994 careMonthly: CARE[state.care].monthly, 995 supply: c ? c.supply : 0, 996 vat: c ? c.vat : 0, 997 total: c ? c.total : 0, 998 deposit: c ? c.deposit : 0, 999 balance: c ? c.balance : 0, 1000 agreedAt: isCustom ? null : new Date().toISOString(), 1001 // ê²°ì ì°½ì´ ì´ë¦¬ë 주문ì¸ì§ ìë²ì ì린ë¤. falseë©´ ìë²ê° ì ì ì¦ì ì림 ë©ì¼ì ë³´ë¸ë¤. 1002 payNow: !isCustom && !!(NICEPAY_CLIENT_ID && typeof AUTHNICE !== 'undefined'), 1003 customer: { 1004 company: $('fCompany').value.trim(), 1005 name: $('fName').value.trim(), 1006 phone: $('fPhone').value.trim(), 1007 email: $('fEmail').value.trim(), 1008 due: $('fDue').value, 1009 memo: $('fMemo').value.trim() 1010 } 1011 }; 1012 } 1013 1014 function buildSummary() { 1015 var isCustom = state.pkg === 'custom'; 1016 var o = orderPayload(); 1017 var lines = []; 1018 lines.push('[ííì´ì§ ì ì ' + (isCustom ? 'ìë´' : 'ì ì²') + ']'); 1019 lines.push('í¨í¤ì§: ' + o.pkgLabel); 1020 if (!isCustom) { 1021 o.options.forEach(function (op) { 1022 lines.push('ìµì : ' + op.name + (op.qty > 1 ? ' à ' + op.qty : '') + ' (' + won(op.amount) + ')'); 1023 }); 1024 if (state.care !== 'none') lines.push('ì ì§ê´ë¦¬: ' + CARE[state.care].label + ' ì ' + won(o.careMonthly) + ' (ì¤í í ë³ë ì²êµ¬)'); 1025 var isConsultOrder = state.pkg === 'consult'; 1026 lines.push((isConsultOrder ? 'ìë´ë£' : 'ì ìë¹ í©ê³') + ': ' + won(o.supply) + ' (ë¶ê°ì¸ ë³ë)'); 1027 lines.push('ë¶ê°ì¸ í¬í¨ ì´ì¡: ' + won(o.total)); 1028 if (isConsultOrder) { 1029 lines.push('ê²°ì ê¸ì¡(ì ì¡): ' + won(o.deposit)); 1030 lines.push('ë²ì íì¸: ìë´ 30ë¶ Â· 결과물(ì구ì¬í 문ì · 견ì ì) íì¸, ì ì ìì ë¶í¬í¨ ëì (' + new Date().toLocaleString('k
1030o-KR') + ')'); 1031 } else { 1032 lines.push('ì°©ìê¸(50%): ' + won(o.deposit)); 1033 lines.push('ìê¸(ì¤í ì): ' + won(o.balance)); 1034 lines.push('ë²ì íì¸: í¬í¨ ë²ì · 무ì ìì íì íì¸, ë²ì ë³ê²½ ë³ë 견ì ëì (' + new Date().toLocaleString('ko-KR') + ')'); 1035 } 1036 } 1037 lines.push(''); 1038 lines.push('ìí¸ Â· 기ê´ëª : ' + o.customer.company); 1039 lines.push('ë´ë¹ì: ' + o.customer.name); 1040 lines.push('ì°ë½ì²: ' + o.customer.phone); 1041 if (o.customer.email) lines.push('ì´ë©ì¼: ' + o.customer.email); 1042 if (o.customer.due) lines.push('í¬ë§ ì¤í ì기: ' + o.customer.due); 1043 if (o.customer.memo) lines.push('ìì² ì¬í: ' + o.customer.memo); 1044 return lines.join('\n'); 1045 } 1046 1047 function showError(msg) { 1048 var el = $('qErr'); 1049 el.textContent = msg; 1050 el.style.display = 'block'; 1051 } 1052 1053 function validate() { 1054 $('qErr').style.display = 'none'; 1055 var isCustom = state.pkg === 'custom'; 1056 if (!isCustom && (!$('agreeScope').checked || !$('agreeChange').checked)) { 1057 showError('ë²ì íì¸ì íì ì²´í¬ 2ê±´ì ëìí´ ì£¼ì¸ì.'); 1058 $('stepScope').scrollIntoView({ behavior: 'smooth', block: 'center' }); 1059 return false; 1060 } 1061 if (!$('fCompany').value.trim() || !$('fName').value.trim() || !$('fPhone').value.trim()) { 1062 showError('ìí¸, ë´ë¹ì ì±í¨, ì°ë½ì²ë¥¼ ì ë ¥í´ ì£¼ì¸ì.'); 1063 return false; 1064 } 1065 return true; 1066 } 1067 1068 // ===== ì ì · ê²°ì ===== 1069 $('btnSubmit').addEventListener('click', function () { 1070 if (!validate()) return; 1071 1072 var isCustom = state.pkg === 'custom'; 1073 var summary = buildSummary(); 1074 var payload = orderPayload(); 1075 payload.summary = summary; 1076 1077 // ìë²ê° ìì¼ë©´ ë©ì¼ ì ìë¡ ë§ë¬´ë¦¬ 1078 if (!ORDER_ENDPOINT) { finish(summary, false); return; } 1079 1080 var btn = $('btnSubmit'); 1081 var label = btn.textContent; 1082 btn.disabled = true; 1083 btn.textContent = 'ì ì ì¤â¦'; 1084 1085 fetch(ORDER_ENDPOINT + '/orders', { 1086 method: 'POST', 1087 headers: { 'Content-Type': 'application/json' }, 1088 body: JSON.stringify(payload) 1089 }).then(function (res) { 1090 if (!res.ok) throw new Error('order failed'); 1091 return res.json(); 1092 }).then(function (data) { 1093 // ìë´ ê±´ì´ê±°ë ê²°ì 미ì¤ì ì´ë©´ ì ì ìë£ë¡ ëë¸ë¤ 1094 if (isCustom || !NICEPAY_CLIENT_ID) { finish(summary, true); return; } 1095 openPayment(data.orderId, payload); 1096 }).catch(function () { 1097 btn.disabled = false; 1098 btn.textContent = label; 1099 finish(summary, false); 1100 }); 1101 }); 1102 1103 // ëì´ì¤íì´ ê²°ì ì°½ì íë©´ ì 체를 ë®ë iframe(#newPayIframe) ìì 660x825ë¡ ê·¸ë ¤ì§ë¤. 1104 // ë ¸í¸ë¶ì²ë¼ ì¸ë¡ê° 825ë³´ë¤ ì§§ì íë©´ììë ê²°ì ë²í¼ì´ ì리ë¯ë¡, 1105 // iframe ëì´ë¥¼ ê²°ì ì°½ ì¤ì ëì´ë¡ ê³ ì íê³ ë°ê¹¥ ë ì´ì´ì ì¤í¬ë¡¤ì ì¤ë¤. 1106 var PAY_MIN_H = 860; 1107 function fitPayLayer() { 1108 var layer = document.getElementById('newDivLayer'); 1109 var frame = document.getElementById('newPayIframe'); 1110 if (!layer || !frame) return; 1111 layer.style.overflowY = 'auto'; 1112 layer.style.overflowX = 'hidden'; 1113 layer.style.webkitOverflowScrolling = 'touch'; 1114 if (window.innerHeight < PAY_MIN_H) { 1115 frame.style.position = 'relative'; 1116 frame.style.display = 'block'; 1117 frame.style.bottom = 'auto'; 1118 frame.style.height = PAY_MIN_H + 'px'; 1119 } else { 1120 frame.style.position = 'absolute'; 1121 frame.style.bottom = '0'; 1122 frame.style.height = '100%'; 1123 } 1124 } 1125 window.addEventListener('resize', fitPayLayer); 1126 1127 function openPayment(orderId, payload) { 1128 if (typeof AUTHNICE === 'undefined') { finish(payload.summary, true); return; } 1129 // ê²°ì ì°½ì ê°ì íë©´ ìì ë¬ë¤. ê³ ê°ì´ ì°½ì ë«ê³ ëììì ë ë²í¼ì´ ë©ì¶° ìì§ ìëë¡ ëë린ë¤. 1130 setTimeout(function () { 1131 $('btnSubmit').disabled = false; 1132 $('btnSubmit').textContent = 'ì°©ìê¸ ê²°ì íê³ ì ì²í기'; 1133 }, 2000); 1134 AUTHNICE.requestPay({ 1135 clientId: NICEPAY_CLIENT_ID, 1136 method: 'cardAndEasyPay', 1137 orderId: orderId, 1138 amount: payload.deposit, 1139 goodsName: payload.pkg === 'consult' 1140 ? 'ííì´ì§ 기í ìë´(30ë¶)' 1141 : 'ííì´ì§ ì ì ì°©ìê¸(' + payload.pkgLabel + ')', 1142 returnUrl: ORDER_ENDPOINT + '/payments/return', 1143 buyerName: payload.customer.name, 1144 buyerTel: payload.customer.phone.replace(/[^0-9]/g, ''), 1145 buyerEmail: payload.customer.email, 1146 // ê²°ì ì°½ì´ ë ìë ëì ë¤ íì´ì§ë ê³ ì íë¤(ëì´ ë³´ì ì fitPayLayerê° ë§¡ëë¤). 1147 disableScroll: true, 1148 zIdxHigher: true, 1149 fnError: function (result) { 1150 $('btnSubmit').disabled = false;
1151 $('btnSubmit').textContent = 'ì°©ìê¸ ê²°ì íê³ ì ì²í기'; 1152 showError('ê²°ì ì°½ ì¤ë¥: ' + (result.errorMsg || '') + ' ì ìë ì ì¥ëìì¼ë ì°ë½ëë¦¬ê² ìµëë¤.'); 1153 } 1154 }); 1155 // ê²°ì ì°½ iframeì requestPay ììì ë°ë¡ ë§ë¤ì´ì§ë¤. ê·¸ ì§í ëì´ë¥¼ ë§ì¶ë¤. 1156 fitPayLayer(); 1157 } 1158 1159 function finish(summary, sent) { 1160 var box = $('doneBox'); 1161 box.style.display = 'block'; 1162 $('doneSum').textContent = summary; 1163 if (sent) { 1164 box.querySelector('h3').textContent = 'ì ì²ì´ ì ìëììµëë¤'; 1165 box.querySelectorAll('p')[0].style.display = 'none'; 1166 $('doneMail').style.display = 'none'; 1167 $('doneCopy').style.display = 'none'; 1168 $('orderGrid').style.display = 'none'; 1169 } else { 1170 var mail = 'mailto:[email protected]?subject=' 1171 + encodeURIComponent('[ííì´ì§ ì ì ì ì²] ' + $('fCompany').value.trim()) 1172 + '&body=' + encodeURIComponent(summary); 1173 $('doneMail').setAttribute('href', mail); 1174 } 1175 box.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1176 } 1177 1178 $('doneCopy').addEventListener('click', function () { 1179 var text = $('doneSum').textContent; 1180 if (navigator.clipboard && navigator.clipboard.writeText) { 1181 navigator.clipboard.writeText(text).then(function () { 1182 $('doneCopy').textContent = 'ë³µì¬ëììµëë¤'; 1183 setTimeout(function () { $('doneCopy').textContent = 'ë´ì© ë³µì¬í기'; }, 2000); 1184 }); 1185 } 1186 }); 1187 1188 buildFeatureList(); 1189 render(); 1190})(); 1191</script>
1191 1192 1193</body> 1194</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.