https://superpass.info/login?url=%2F%3FlangSet%3Den

1<!DOCTYPE html>
2<html lang="ko">
3<head>
4
5	<meta charset="UTF-8">
6	<meta http-equiv="X-UA-Compatible" content="IE=edge">
7	<meta name="viewport" content="width=device-width,viewport-fit=cover,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
8	<meta property="og:title" content="로그인 - DongDaeMun _ SUPERPASS" />
9	<meta property="og:type" content="website" />
10	<meta property="og:url" content="https://superpass.info/" />
11	<meta property="og:image" content="https://superpass.info/assets/images/ddpSuperPass2.png">
12	<title>로그인 - DongDaeMun _ SUPERPASS</title>
13	<meta property="og:description" name="description" content="DDP는 올해 5월부터 카카오톡에 ‘동대문 슈퍼패스’ 채널을 개설, 가입자에게 월 2회 동대문 지역 쇼핑몰과 맛집의 할인 쿠폰을 제공하고 있다. DDP 내부의 전시 및 디자인 상품과 식당 할인은 물론, 현대아울렛, 두타몰, 현대백화점면세점 등에서 이용할 수 있는 할인권과 주차권, 무료 음료권 등을 제공한다. DDP는 외국인 관광객의 니즈를 반영한 영문 슈퍼패스도 별도 제작해 주요 관광명소를 통해 배포한다.     슈퍼패스에 참여하는 매장을 대상으로 한 &amp;lt;스탬프 투어&gt; 이벤트도 마련했다. 참여 매장 중 3개 이상 방문 시 서울라면, 전통키링, 젤리, 리유저블백, 노트 등의 선물을 증정한다.       외국인 대상 슈퍼패스는 인천공항, 서울시내 관광안내소, 외국인 거점 호텔 등 120개소에 비치되는 것은 물론, 세계적 온라인 여행사 클룩(Klook)을 통해서도 내려받을 수 있다.">
14	<meta name="keywords" content="동대문,슈퍼패스,DDP,SUPERPASS,동대문슈퍼패스,DDP SuperPass,할인쿠폰,동대문지역상권">
15	<meta name="author" content="서울디자인재단, DDP">
16	<link rel="canonical" href="https://superpass.info/login" />
17	<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css" rel="stylesheet">
18	<link rel="stylesheet" type="text/css" href="/assets/bootstrap-5.3.0/css/bootstrap.css" />
19	<link rel="stylesheet" type="text/css" href="/assets/font-awesome-4.7.0/css/font-awesome.css" />
20	<link rel="stylesheet" type="text/css" href="/assets/jqueryui/jquery-ui.css" />
21	<link rel="stylesheet" type="text/css" href="/assets/css/siteAnimationDefine.css" />
22	<link rel="stylesheet" type="text/css" href="/assets/css/siteStyle.css" />
23	
24	

24<script type="text/javascript" src="/assets/js/jquery-3.6.4.min.js"></script>

24
25	

25<script type="text/javascript" src="/assets/js/jquery-migrate-1.4.1.min.js"></script>

25
26	

26<script type="text/javascript" src="/assets/jqueryui/jquery-ui.js"></script>

26
27	

27<script type="text/javascript" src="/assets/js/popper.min.js"></script>

27
28	

28<script type="text/javascript" src="/assets/bootstrap-5.3.0/js/bootstrap.js"></script>

28
29
30	

30<script type="text/javascript">
31		// 자바스크립트에서 사용하는 전역변수 선언
32		var cb_url = "https://superpass.info";
33		var cb_cookie_domain = "";
34		var cb_charset = "UTF-8";
35		var cb_time_ymd = "2026-10-08";
36		var cb_time_ymdhis = "2026-10-08 21:58:01";
37		var layout_skin_path = "_layout/bootstrap";
38		var view_skin_path = "login/bootstrap";
39		var is_member = "";
40		var is_admin = "";
41		var cb_admin_url = "";
42		var cb_board = "";
43		var cb_board_url = "";
44		var cb_device_type = "desktop";
45		var cb_csrf_hash = "8aa11b8415fb2fdc5fc0927a6bb5f5e3";
46		var cookie_prefix = "";
47	</script>

47
48	<!--[if lt IE 9]>
49	

49<script type="text/javascript" src="https://superpass.info/assets/js/html5shiv.min.js"></script>

49
50	

50<script type="text/javascript" src="https://superpass.info/assets/js/respond.min.js"></script>

50
51	<![endif]-->
52	

52<script type="text/javascript" src="https://superpass.info/assets/js/common.js"></script>

52
53	

53<script type="text/javascript" src="https://superpass.info/assets/js/jquery.validate.min.js"></script>

53
54	

54<script type="text/javascript" src="https://superpass.info/assets/js/jquery.validate.extension.js"></script>

54
55	

55<script type="text/javascript" src="https://superpass.info/assets/js/sideview.js"></script>

55
56	

56<script type="text/javascript" src="https://superpass.info/assets/js/js.cookie.js"></script>

56

57<script type="text/javascript" src="https://superpass.info/assets/js/social_login.js"></script>

57
58</head>
59<body >
60
61<!-- 여기까지 레이아웃 상단입니다 -->
62
63<!-- 본문 시작 -->
64<meta property="og:image" content="https://superpass.sfw.kr/assets/images/ddpSuperPass.png">
65  <style>
66    :root{
67      --sp-purple:#6E35B8;
68      --sp-purple-dark:#4d2388;
69      --sp-red:#E73B68;
70      --sp-ink:#17181b;
71      --sp-muted:#6f7480;
72      --sp-line:rgba(255,255,255,.22);
73      --sp-surface:rgba(255,255,255,.12);
74      --sp-surface-2:rgba(255,255,255,.86);
75      --sp-shadow:0 24px 60px rgba(0,0,0,.30);
76      --sp-radius:24px;
77    }
78
79    html,body{
80      min-height:100%;
81      background:#0d1020;
82      color:#fff;
83      font-family: "Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
84    }
85
86    body{
87      position:relative;
88      overflow-x:hidden;
89    }
90
91    .page-shell{
92      min-height:100vh;
93      position:relative;
94      isolation:isolate;
95      background:
96        linear-gradient(180deg, rgba(7,8,17,.24) 0%, rgba(7,8,17,.52) 34%, rgba(7,8,17,.80) 100%),
97        url('https://superpass.info/assets/images/bgLogin2.jpg') center center / cover no-repeat;
98    }
99
100    .page-shell::before{
101      content:"";
102      position:absolute;
103      inset:0;
104      background:
105        radial-gradient(circle at 15% 12%, rgba(0,255,204,.16), transparent 26%),
106        radial-gradient(circle at 80% 24%, rgba(110,53,184,.24), transparent 28%),
107        radial-gradient(circle at 40% 82%, rgba(231,59,104,.16), transparent 24%);
108      pointer-events:none;
109      z-index:-1;
110    }
111
112    .mobile-frame{
113      width:min(100%, 430px);
114      min-height:100vh;
115      margin:0 auto;
116      position:relative;
117      padding:18px 16px 32px;
118      display:flex;
119      flex-direction:column;
120      gap:16px;
121    }
122
123    .top-bar{
124      display:flex;
125      align-items:center;
126      justify-content:space-between;
127      padding:4px 2px 0;
128      font-size:.85rem;
129      color:rgba(255,255,255,.88);
130      letter-spacing:.02em;
131    }
132
133    .brand-chip{
134      display:inline-flex;
135      align-items:center;
136      gap:8px;
137	  margin:5px 10px;
138      padding:8px 12px;
139      border-radius:999px;
140      background:rgba(255,255,255,.10);
141      border:1px solid rgba(255,255,255,.16);
142      backdrop-filter:blur(16px);
143      -webkit-backdrop-filter:blur(16px);
144      box-shadow:0 10px 30px rgba(0,0,0,.15);
145      font-size:.78rem;
146      font-weight:700;
147    }
148
149    .hero{
150      position:relative;
151      min-height:30vh;
152      border-radius:28px;
153      overflow:hidden;
154      box-shadow:var(--sp-shadow);
155      background:
156        linear-gradient(180deg, rgba(16,18,30,.08) 0%, rgba(16,18,30,.34) 50%, rgba(16,18,30,.72) 100%),
157        url('https://superpass.info/assets/images/newReflat2.png') center center / cover no-repeat;
158      border:1px solid rgba(255,255,255,.14);
159    }
160
161    .hero::after{
162      content:"";
163      position:absolute;
164      inset:auto 0 0 0;
165      height:45%;
166      background:linear-gradient(180deg, rgba(9,10,18,0) 0%, rgba(9,10,18,.84) 90%);
167      pointer-events:none;
168    }
169
170    .hero-badge{
171      position:absolute;
172      top:14px;
173      left:14px;
174      z-index:2;
175      padding:8px 12px;
176      border-radius:999px;
177      background:rgba(255,255,255,.14);
178      border:1px solid rgba(255,255,255,.20);
179      backdrop-filter:blur(14px);
180      -webkit-backdrop-filter:blur(14px);
181      font-size:.74rem;
182      font-weight:700;
183      letter-spacing:.06em;
184    }
185
186    .hero-copy{
187      position:absolute;
188      left:18px;
189      right:18px;
190      bottom:18px;
191      z-index:2;
192    }
193
194    .hero-copy h1{
195      margin:0 0 8px;
196      font-size:1.7rem;
197      line-height:1.08;
198      font-weight:900;
199      letter-spacing:-.03em;
200      text-wrap:balance;
201    }
202
203    .hero-copy p{
204      margin:0;
205      font-size:.94rem;
206      color:rgba(255,255,255,.88);
207      line-height:1.5;
208    }
209
210    .glass-card{
211      position:relative;
212      border-radius:var(--sp-radius);
213      background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 100%);
214      border:1px solid rgba(255,255,255,.20);
215      box-shadow:var(--sp-shadow);
216      backdrop-filter:blur(22px) saturate(150%);
217      -webkit-backdrop-filter:blur(22px) saturate(150%);
218      overflow:hidden;
219    }
220
221    .glass-card::before{
222      content:"";
223      position:absolute;
224      inset:0;
225      background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
226      pointer-events:none;
227    }
228
229    .panel{
230      padding:20px 18px 18px;
231    }
232
233    .service-head{
234      display:flex;
235      align-items:flex-start;
236      gap:12px;
237      margin-bottom:14px;
238    }
239
240    .service-thumb{
241      width:56px;
242      height:56px;
243      border-radius:14px;
244      object-fit:cover;
245      flex:0 0 auto;
246      border:1px solid rgba(255,255,255,.30);
247      box-shadow:0 10px 24px rgba(0,0,0,.18);
248      background:#fff;
249    }
250
251    .eyebrow{
252      font-size:.76rem;
253      font-weight:800;
254      letter-spacing:.09em;
255      color:#f6d8ff;
256      margin-bottom:4px;
257    }
258
259    .section-title{
260      margin:0;
261      font-size:1.14rem;
262      font-weight:800;
263      letter-spacing:-.02em;
264      color:#fff;
265    }
266
267    .guide-text{
268      margin:0;
269      font-size:.95rem;
270      line-height:1.72;
271      color:rgba(255,255,255,.90);
272      word-break:keep-all;
273    }
274
275    .guide-text + .guide-text{
276      margin-top:10px;
277    }
278
279    .btn-explore{
280      display:flex;
281      align-items:center;
282      justify-content:center;
283      gap:10px;
284      width:100%;
285      min-height:54px;
286      border-radius:16px;
287      background:linear-gradient(135deg, var(--sp-purple), #8d55d0);
288      border:none;
289      color:#fff;
290      font-weight:800;
291      box-shadow:0 16px 34px rgba(110,53,184,.40);
292      transition:.2s ease;
293      text-decoration:none;
294    }
295
296    .btn-explore:hover{
297      transform:translateY(-1px);
298      color:#fff;
299    }
300
301    .divider-title{
302      display:flex;
303      align-items:center;
304      gap:12px;
305      color:rgba(255,255,255,.82);
306      font-size:.86rem;
307      font-weight:700;
308      margin:18px 0 12px;
309    }
310
311    .divider-title::before,
312    .divider-title::after{
313      content:"";
314      height:1px;
315      flex:1 1 auto;
316      background:rgba(255,255,255,.18);
317    }
318
319    .sns-stack{
320      display:grid;
321      gap:10px;
322    }
323
324    .sns-btn{
325      display:flex;
326      align-items:center;
327      justify-content:center;
328      gap:12px;
329      min-height:52px;
330      border-radius:16px;
331      padding:0 16px;
332      text-decoration:none;
333      font-weight:700;
334      border:1px solid rgba(255,255,255,.22);
335      backdrop-filter:blur(10px);
336      -webkit-backdrop-filter:blur(10px);
337      transition:.2s ease;
338    }
339
340    .sns-btn:hover{ transform:translateY(-1px); }
341    .sns-btn.google{
342      background:rgba(255,255,255,.95);
343      color:#222;
344    }
345    .sns-btn.kakao{
346      background:#FEE500;
347      color:#181600;
348      border-color:rgba(0,0,0,.06);
349    }
350    .sns-btn.naver{
351      background:#03C75A;
352      color:#fff;
353      border-color:rgba(255,255,255,.08);
354    }
355
356    .sns-icon{
357      width:22px;height:22px;border-radius:50%;
358      display:grid;place-items:center;
359      font-size:.95rem;font-weight:900;
360      flex:0 0 auto;
361      background:rgba(255,255,255,.18);
362    }
363    .google .sns-icon{ background:#fff; color:#4285F4; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
364    .kakao .sns-icon{ background:rgba(0,0,0,.08); color:#111; }
365    .naver .sns-icon{ background:rgba(255,255,255,.18); color:#fff; }
366
367    .form-label{
368      margin-bottom:8px;
369      font-size:.84rem;
370      font-weight:700;
371      color:rgba(255,255,255,.88);
372    }
373
374    .form-control.custom{
375      min-height:52px;
376      border-radius:16px;
377      background:rgba(255,255,255,.12);
378      border:1px solid rgba(255,255,255,.18);
379      color:#fff;
380      padding:14px 16px;
381      box-shadow:none;
382    }
383
384    .form-control.custom::placeholder{
385      color:rgba(255,255,255,.52);
386    }
387
388    .form-control.custom:focus{
389      background:rgba(255,255,255,.14);
390      border-color:rgba(174,132,238,.95);
391      box-shadow:0 0 0 .24rem rgba(110,53,184,.25);
392      color:#fff;
393    }
394
395    .btn-login{
396      min-height:54px;
397      border-radius:16px;
398      width:100%;
399      border:1px solid rgba(255,255,255,.12);
400      background:#141826;
401      color:#fff;
402      font-weight:800;
403      letter-spacing:.01em;
404      box-shadow:0 14px 28px rgba(0,0,0,.24);
405    }
406
407    .sub-links{
408      display:flex;
409      align-items:center;
410      justify-content:center;
411      gap:10px;
412      flex-wrap:wrap;
413      margin-top:14px;
414      font-size:.84rem;
415      color:rgba(255,255,255,.76);
416    }
417
418    .sub-links a{
419      color:inherit;
420      text-decoration:none;
421    }
422
423    .footer-note{

424      text-align:center;
425      color:rgba(255,255,255,.54);
426      font-size:.76rem;
427      line-height:1.55;
428      margin-top:auto;
429      padding-top:8px;
430    }
431
432    @media (min-width:768px){
433      .mobile-frame{
434        width:min(100%, 480px);
435        padding-top:28px;
436        padding-bottom:36px;
437      }
438      .hero{
439        min-height:500px;
440      }
441      .hero-copy h1{
442        font-size:2rem;
443      }
444    }
445  </style>
446
447  <main class="page-shell">
448    <section class="mobile-frame">
449      <section class="hero" aria-label="동대문 슈퍼패스 대표 이미지">
450        <span class="brand-chip">DDP</span>
451        <span class="brand-chip">HYUNDAI OUTLETS</span>
452        <span class="brand-chip">DOOTA MALL</span>
453		<div class="hero-copy">
454          <h1>동대문을 더 쉽고<br>특별하게 즐겨보세요</h1>
455          <p>쇼핑, 로컬 스팟, 할인 혜택, 추천 코스를 한 번에 만나는<br>DDP SUPERPASS</p>
456        </div>
457      </section>
458
459      <section class="glass-card">
460        <div class="panel">
461          <div class="service-head">
462            <img class="service-thumb" src="https://superpass.info/assets/images/newReflat.png" alt="DDP 동대문 슈퍼패스 포스터">
463            <div>
464              <div class="eyebrow">SUPERPASS LOGIN</div>
465              <h2 class="section-title">DDP 동대문 슈퍼패스 안내</h2>
466            </div>
467          </div>
468
469          <p class="guide-text">
470            DDP 동대문 슈퍼패스는 DDP를 중심으로 두타몰, 현대아울렛 동대문점 등 대형쇼핑몰과 소상공인이 함께하는 동대문 상권 활성화 서비스입니다.
471          </p>
472          <p class="guide-text">
473            다양한 가게 정보와 할인 혜택을 한 번에 이용하고, 추천 코스를 따라 동대문을 즐겨보세요.
474          </p>
475
476          <div class="mt-4">
477            <a href="/?langSet=en&amp;guest=1" class="btn-explore">로그인 없이 둘러보기</a>
478          </div>
479
480          <div class="divider-title">SNS로 빠르게 시작하기</div>
481
482          <div class="sns-stack">
483				<div class="divSocialLogin text-center">
484					<a href="javascript:;" onClick="social_connect_on('google');" title="구글 로그인">
485						<div class="loginGoole">
486							<div class="row">
487								<div class="col-2 align-middle">
488									<img src="https://superpass.info/assets/images/logo_google.png" class="w-100" alt="구글 로그인" title="구글 로그인" />
489								</div>
490								<div class="col-10 pe-5 text-center align-middle">Login with Google</div>
491							</div>
492						</div>
493					</a>
494				</div>
495
496          </div>
497
498
499      </section>
500
501      <p class="footer-note">
502        DDP SUPERPASS
503      </p>
504    </section>
505  </main>
506
507

508<script type="text/javascript">
509//<![CDATA[
510$(function() {
511	$('#flogin').validate({
512		rules: {
513			mem_userid : { required:true, minlength:3 },
514			mem_password : { required:true, minlength:4 }
515		}
516	});
517});
518$(document).on('change', "input:checkbox[name='autologin']", function() {
519	if (this.checked) {
520		$('.autologinalert').show(300);
521	} else {
522		$('.autologinalert').hide(300);
523	}
524});
525//]]>
526</script>

526
527<!-- 본문 끝 -->
528
529<!-- 여기부터 레이아웃 하단입니다 -->
530
531
532
533</body>
534</html>